/* 基础变量和重置样式 */
:root {
    --primary-blue: #2563eb;
    --bg-gray: #f1f5f9;
    --text-dark: #0f172a;
    --border-color: #e2e8f0;
    --th: 100vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* 基础布局 */
body {
    background-color: var(--bg-gray);
    /* height: 100vh; */
    width: 100vw;
    height: calc(var(--th) * 100);
    overflow: hidden;
    touch-action: manipulation;
}

    .container {
        display: flex;
        height: 100%;
        width: 100%;
    }

        /* 列布局 */
        .right-column {
            flex: 1;
            width: 100%;
            height: 100%;
            padding: calc(var(--th) * 3);
            background: #ffffff;
            display: flex;
        }

            /* 模型查看器相关样式 */
            .model-viewer {
                flex: 1;
                width: 100%;
                height: 100%;
                margin: 0;
                display: flex;
                flex-direction: row;
                position: relative;
                background: transparent;
                gap: 1vw;
            }

                .canvas {
                    height: 100%;
                    position: relative;
                    order: 2;
                    border-radius: calc(var(--th) * 3);
                    box-shadow: 4px 4px 4px rgba(255, 0, 217, 0.1);
                }

                /* 参数面板样式 */
                .parameter-tooltip,
                .data-tooltip,
                .material-tooltip {
                    width: 50%;
                    height: 100%;
                    position: relative;
                    background: #fd9fc2;
                    overflow-y: auto;
                    padding: calc(var(--th) * 3);
                    border-right: 1px solid rgba(255, 255, 255, 0.1);
                    order: 1;
                    border-radius: calc(var(--th) * 3);
                    box-shadow: 4px 4px 4px rgba(255, 0, 217, 0.1);

                    display: flex;
                    flex-direction: column;
                }

                .parameter-tooltip {
                    justify-content: space-between;
                }

                .data-tooltip {
                    width: 100%;
                    padding: calc(var(--th) * 24);
                    gap: calc(var(--th) * 2);  
                    
                    justify-content: center; 
                    align-items: center;
                }

                    /* 曲线控制相关样式 */
                    .curve-number-controls {
                        display: flex;
                        flex-direction: row;
                        background: transparent;
                    }

                        .curve-button {
                            text-align: center;
                            border: none;
                            border-radius: calc(var(--th) * 1.5);
                            color: white;
                            cursor: pointer;
                            transition: background-color 0.3s;
                            padding: calc(var(--th) * 2);
                        }

                        .curve-button.add-curve {
                            background: #fb86b3;
                            margin-right: calc(var(--th) * 1);
                            height: calc(var(--th) * 8);
                            flex: 0 1 50%; 
                        }

                        .curve-button.remove-curve {
                            background: #fb86b3;
                            margin-left: calc(var(--th) * 1);
                            height: calc(var(--th) * 8);
                            flex: 0 1 50%; 
                        }

                        .curve-button.data-copy {
                            background: #fb86b3;
                            height: calc(var(--th) * 8);
                            width: calc(var(--th) * 16);
                        }

                        .add-icon,
                        .remove-icon {
                            background-size: cover;
                            background-position: center;
                            display: block;
                            /* width: 100%; */
                            height: 100%;
                            aspect-ratio: 1;
                            margin: 0 auto;

                            user-select: none;
                            -webkit-user-select: none;  
                            -moz-user-select: none;     
                            -ms-user-select: none;
                            pointer-events: none;
                        }

                    .curve-control {
                        background: transparent;
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--th) * 4);
                        justify-content: space-between;
                    }

                        
                    
                    .curve-control-header {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 100%;
                        justify-content: space-between;
                    }

                        .curve-control-header h3 {
                            color: #ffffff;
                            font-size: calc(var(--th) * 6);
                            text-align: center;
                            margin: 0;

                            user-select: none;
                            -webkit-user-select: none;  
                            -moz-user-select: none;     
                            -ms-user-select: none;
                            pointer-events: none;
                        }

                        .previous-curve-button,
                        .next-curve-button {
                            height: calc(var(--th) * 10);
                            width: calc(var(--th) * 10);
                            padding: calc(var(--th) * 2);

                            border-radius: calc(var(--th) * 1.5);
                            /* background: #fb86b3; */
                            background: transparent;
                            border: transparent;
                        }

                        .next-curve-icon,
                        .previous-curve-icon {
                            background-color: transparent;
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: center;

                            user-select: none;
                            -webkit-user-select: none;  
                            -moz-user-select: none;     
                            -ms-user-select: none;
                            pointer-events: none;
                        }
                    
                    /* 形状按钮组样式 */
                    .shape-buttons {
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        background: #fb86b3;
                        justify-content: space-between;
                        border-radius: calc(var(--th) * 1.5);
                        padding: calc(var(--th) * 1);
                    }

                        .shape-button{
                            border: transparent;
                            cursor: pointer;
                            text-align: center;
                            width: calc(var(--th) * 10);
                            height: calc(var(--th) * 10);
                            background-color: transparent;
                            padding: calc(var(--th) * 1);
                        }

                        .shape-icon {
                            background-color: transparent;
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: center;

                            user-select: none;
                            -webkit-user-select: none;  
                            -moz-user-select: none;     
                            -ms-user-select: none;
                            pointer-events: none;
                        }

                    /* 控制组样式 */
                    .control-group {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--th) * 2);
                        background: transparent;
                        padding: calc(var(--th) * 2);
                        

                        position: relative;
                    }

                        .control-header {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: calc(var(--th) * 0);
                        }

                        .control-group label {
                            color: #ffffff;
                            font-size: calc(var(--th) * 4);
                            z-index: 1;

                            user-select: none;
                            -webkit-user-select: none;  
                            -moz-user-select: none;     
                            -ms-user-select: none;
                            pointer-events: none;
                        }

                    /* 滑块样式 */
                    input[type="range"] {
                        width: 100%;
                        height: 100%;
                        
                        border-radius: calc(var(--th) * 0.5);
                        appearance: none;

                        background: linear-gradient(to right, 
                            #fb86b3 0%, /* 左边颜色 */
                            #fb86b3 calc(var(--value) - 1%), /* 左边颜色到当前值 */
                            #fd9fc2 calc(var(--value) + 1%), /* 右边颜色开始 */
                            #fd9fc2 100% /* 右边颜色 */
                        );

                        position: absolute;
                        top: 0; /* 顶部对齐 */
                        left: 0; /* 左侧对齐 */
                        right: 0; /* 右侧对齐 */
                        bottom: 0; /* 底部对齐 */
                        z-index: 0; /* 确保在底层 */

                        border-radius: calc(var(--th) * 1.5);
                    }
                        

                        input[type="range"]::-webkit-slider-thumb {
                            appearance: none;
                            -webkit-appearance: none;
                            width: calc(var(--th) * 16);
                            height: calc(var(--th) * 8);
                            border: none;
                            background: none;
                            cursor: pointer;
                            box-shadow: none;
                            outline: none;
                        }

                        input[type="range"]::-moz-range-thumb {
                            width: calc(var(--th) * 16);
                            height: calc(var(--th) * 8);
                            background: none;
                            border: none;
                            cursor: pointer;
                            box-shadow: none;
                        }

                    .value-display {
                        display: block;
                        font-size: calc(var(--th) * 4);
                        color:#ffffffb1;
                        margin-top: 2px;
                        z-index: 1; /* 确保在底层 */

                        user-select: none;
                        -webkit-user-select: none;  
                        -moz-user-select: none;     
                        -ms-user-select: none;
                        pointer-events: none;

                    }

                    /* 其他控制组样式 */ 
                    .other-controls {
                        display: flex;
                        flex-wrap: wrap;
                        gap: calc(var(--th) * 2) calc(var(--th) * 2);
                    }

                    .other-controls > * {
                        flex: 0 0 calc(50% - calc(var(--th) * 1));
                    }

/* 加载器样式 */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--th) * 100);
    background: transparent;
    justify-content: center;
    padding: calc(var(--th) * 3);  
    z-index: 1000;
}

    .loader-content-container {
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        box-shadow: 4px 4px 4px rgba(255, 0, 217, 0.1);
        font-size: calc(var(--th) * 2);
        color: #fb86b3;
        text-align: center;
        border-radius: calc(var(--th) * 3);
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: calc(var(--th) * 2);
    }

    .rotate-icon {
        background-color: transparent;
        display: block;
        width: calc(var(--th) * 10);
        height: calc(var(--th) * 10);
        background-size: cover;
        background-position: center;

        user-select: none;
        -webkit-user-select: none;  
        -moz-user-select: none;     
        -ms-user-select: none;
        pointer-events: none;
    }

/* 模式切换按钮样式 */
.mode-button-container {
    position: absolute;
    top: calc(var(--th) * 6);
    right: calc(var(--th) * 6);
    display: flex;
    flex-direction: column;
    gap: calc(var(--th) * 2);
}

    .mode-button {
        border-color: transparent;
        background: transparent;
        position: relative;
        
        width: calc(var(--th) * 8);
        height: calc(var(--th) * 8);
        border-radius: calc(var(--th) * 4);
        padding: calc(var(--th) * 2);
        background-color: #ffffff;

        opacity: 0.5;
    }
    .mode-button.active {
        opacity: 1;
    }

        /* .mode-button.design {
            top: calc(var(--th) * 6);
            right: calc(var(--th) * 6);
        }
        .mode-button.material {
            top: calc(var(--th) * 16);
            right: calc(var(--th) * 6);
        }
        .mode-button.scene {
            top: calc(var(--th) * 26);
            right: calc(var(--th) * 6);
        }
        .mode-button.data {
            top: calc(var(--th) * 36);
            right: calc(var(--th) * 6);
        } */
        .mode-button.full-screen {
            top: calc(var(--th) * 46);
            right: calc(var(--th) * 6);
        }

        .mode-icon,
        .tutorial-icon {
            /* background-image: url(./src/icon/Scene.png);
            background-size: cover;
            background-position: center;
            display: block;
            width: 100%;
            height: 100%;
            border: transparent;
            background-color: transparent; */


            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb86b3;
            font-size: calc(var(--th) * 6);
            border: transparent;
            background-color: transparent;
            text-align: center;
            width: 100%;
            height: 100%; 

            user-select: none;
            -webkit-user-select: none;  
            -moz-user-select: none;     
            -ms-user-select: none;
            pointer-events: none;
        }

.canvas-message,
.parameter-data-message {
    width: 100%;
    border-color: transparent;
    background: #ffffff84;
    
    color: #cc668d;

    border-radius: 2vw;
    padding: calc(var(--th) * 2);

    font-size: calc(var(--th) * 6);
    text-align: center;
    word-wrap: break-word; /* 允许单词换行 */
    overflow-wrap: break-word; /* 兼容性处理 */
    overflow: hidden;
    white-space: pre-line;
}

    .canvas-message {
        height: 100%;
        position: absolute;
        bottom: calc(var(--th) * 6);
        right: calc(25% - 18vw);
        width: 36vw;
        height: auto; /* 修改高度为自动，以适应内容 */
        /* transform: translate(0, -50%); */

        user-select: none;
        -webkit-user-select: none;  
        -moz-user-select: none;     
        -ms-user-select: none;
        pointer-events: none;
    }

    .parameter-data-message {
        position: relative;

        user-select: none;
        -webkit-user-select: none;  
        -moz-user-select: none;     
        -ms-user-select: none;
    }

    

/* 响应式布局 */
/* @media (max-width: 768px) {
    .model-viewer {
        flex-direction: column;
    }

    .parameter-tooltip {
        width: 100%;
        order: 2;
    }

    .model-viewer canvas {
        order: 1;
        width: 100%;
    }
} */



.placeholder {
    color: #5a84bf;
    font-size: 14px;
}

.material-tooltip{
    /* gap: 4vh; */
    justify-content: space-between;
}

    .material-selector,
    .texture-selector,
    .weight-selector {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        justify-content: space-between;
        gap: calc(var(--th) * 2);
    }
        .material-selector h3,
        .texture-selector h3,
        .weight-selector h3 {
            color: #ffffff;
            font-size: calc(var(--th) * 4);
            text-align: left;

            user-select: none;
            -webkit-user-select: none;  
            -moz-user-select: none;     
            -ms-user-select: none;
            pointer-events: none;
        }
        .material-button-frame,
        .weight-button-frame,
        .texture-button-frame {
            display: flex;
            flex-direction: row;
            /* justify-content: space-between; */
            flex-wrap: nowrap;
            overflow-x: auto;
            white-space: nowrap;

            width: 100%;
            gap: calc(var(--th) * 2);
            /* padding-bottom: calc(var(--th) * 1); */
        }

        .material-button-frame::-webkit-scrollbar,
        .weight-button-frame::-webkit-scrollbar,
        .texture-button-frame::-webkit-scrollbar {
            height: calc(var(--th) * 0.5);
        }
        
        .material-button-frame::-webkit-scrollbar-track,
        .weight-button-frame::-webkit-scrollbar-track,
        .texture-button-frame::-webkit-scrollbar-track {
            background: transparent; /* 滚动条轨道的背景 */
        }
        
        .material-button-frame::-webkit-scrollbar-thumb,
        .weight-button-frame::-webkit-scrollbar-thumb,
        .texture-button-frame::-webkit-scrollbar-thumb {
            background: #cc668d; /* 滚动条的颜色 */
            border-radius: calc(var(--th) * 0.25);
        }
            .material-button-container,
            .weight-button-container,
            .texture-button-container {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;

                /* width: 100%; */
                height: calc(var(--th) * 18);
                gap: calc(var(--th) * 0.5);

                /* width: 10vw;
                height: 10vw;
                gap: calc(var(--th) * 0.5); */
            }
            
                .material-button,
                .weight-button,
                .texture-button {
                    border-color: transparent;
                    background: transparent;
                    
                    aspect-ratio: 1;
                    height: 100%;
                    width: auto;
                    border-radius: calc(var(--th) * 1.5);
                    padding: calc(var(--th) * 1.5);
                    background-color: #ffffff40;
                }
                .material-button.active,
                .weight-button.active,
                .texture-button.active {
                    background-color: #ffffff;
                }
                .material-button-text,
                .weight-button-text,
                .texture-button-text {
                    color: #cc668d;
                    font-size: calc(var(--th) * 3);
                    text-align: center;
                    margin: 0;

                    position: absolute; /* 绝对定位 */
                    top: 50%; /* 垂直居中 */
                    left: 50%; /* 水平居中 */
                    transform: translate(-50%, -50%); /* 使元素的中心点对齐 */
                    pointer-events: none;

                    user-select: none;
                    -webkit-user-select: none;  
                    -moz-user-select: none;     
                    -ms-user-select: none;
                    pointer-events: none;
                }



.tutorial-button {
    position: absolute;
    bottom: calc(var(--th) * 6);
    right: calc(var(--th) * 6);
    width: calc(var(--th) * 8);
    height: calc(var(--th) * 8);
    border-radius: calc(var(--th) * 4);
    border: transparent;
    padding: calc(var(--th) * 2);
    background-color: #ffffff;
}