/* 龙老师辅导页面样式 - Android设计规范版本 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 按钮样式重置 - 确保退出按钮正常显示 */
button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

body {
    font-family: 'Microsoft YaHei', sans-serif;
    background: white;
    color: black;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    width: 100vw;
    position: relative;
}

/* 主容器 - 响应式设计，参考趣味语文 */
.ai-tutoring-container {
    width: min(1280px, 100vw);
    height: min(800px, 100vh);
    min-height: 100vh;
    position: relative;
    background: white;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}



/* 页面标题容器 - 完美居中 */
.page-title-container {
    position: relative !important; /* 为绝对定位的退出按钮提供定位基准 */
    top: min(59px, 7.375vh);
    left: 0;
    right: 0;
    width: 100%;
    height: min(70px, 8.75vh);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto;  /* 允许标题容器响应事件，包括退出按钮 */
}

.page-title-container .page-title {
    pointer-events: auto;  /* 标题文字本身可以响应事件 */
}

/* 页面标题 - 响应式设计 */
.page-title {
    color: black;
    font-size: min(42px, 3.28vw);
    font-weight: bold;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    text-shadow: none;
    margin: 0;
    padding: 0;
}

/* 退出按钮样式 - 适合墨水屏 */
.exit-button {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: white !important;
    border: 2px solid black !important;
    color: black !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex !important; /* 强制显示 */
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    pointer-events: auto !important;
    z-index: 1000 !important; /* 确保按钮在最上层 */
    min-width: 80px !important; /* 确保最小宽度 */
    min-height: 40px !important; /* 确保最小高度 */
    visibility: visible !important; /* 强制可见 */
    opacity: 1 !important; /* 强制不透明 */
    user-select: none !important; /* 防止文本被选中 */
    -webkit-user-select: none !important; /* Safari支持 */
    -moz-user-select: none !important; /* Firefox支持 */
    -ms-user-select: none !important; /* IE支持 */
    touch-action: manipulation !important; /* 优化触摸操作 */
    -webkit-tap-highlight-color: transparent !important; /* 移除触摸高亮 */
    -webkit-touch-callout: none !important; /* 禁用触摸菜单 */
    -webkit-appearance: none !important; /* 移除默认样式 */
    appearance: none !important; /* 现代浏览器支持 */
}

.exit-button:hover {
    background: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.exit-button:active {
    background: #e0e0e0;
    transform: translateY(-50%) scale(0.98);
}

.exit-button i {
    font-size: 18px;
}

.exit-button span {
    font-size: 16px;
    font-weight: bold;
}

/* 通用辅导老师模块样式 - 响应式设计 */
.tutor-module {
    position: absolute;
    width: min(300px, 23.44vw);
    height: min(280px, 35vh);
    border-radius: min(16px, 1.25vw);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    overflow: hidden;
}

.tutor-module:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    background: #f0f0f0;
}

.tutor-content {
    position: relative; /* 为内部绝对定位的图片提供定位基准 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 改为左对齐，为右下角图片留出空间 */
    justify-content: flex-start; /* 改为顶部对齐 */
    height: 100%;
    width: 100%;
    padding: 20px; /* 添加内边距 */
    border: 2px solid black;
}

/* 通用标题样式 - 响应式设计 */
.tutor-name {
    position: absolute;
    top: min(15px, 1.875vh);
    left: min(15px, 1.17vw);
    width: min(144px, 11.25vw);
    height: min(52px, 6.5vh);
    font-size: min(36px, 2.81vw);
    font-weight: bold;
    margin: 0;
    color: black;
    text-shadow: none;
    z-index: 3;
    line-height: min(52px, 6.5vh);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
}

/* 信息技术老师标题特殊样式 - 响应式设计 */
.it-tutor .tutor-name {
    width: min(200px, 15.63vw);
    font-size: min(32px, 2.5vw);
}

/* 辅导老师图片样式 - 响应式设计 */
.tutor-icon {
    position: absolute;
    bottom: min(10px, 1.25vh);
    right: min(10px, 0.78vw);
    width: min(180px, 14.06vw);
    height: min(180px, 22.5vh);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.tutor-icon img {
    width: min(180px, 14.06vw);
    height: min(180px, 22.5vh);
    object-fit: contain;
    filter: grayscale(100%) drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    transition: all 0.3s ease;
}

.tutor-module:hover .tutor-icon img {
    transform: scale(1.1);
    filter: grayscale(100%) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* 数学老师模块 - 响应式设计 */
.math-tutor {
    left: min(24px, 1.875vw);
    top: min(140px, 17.5vh);
    background: white;
    border: 2px solid black;
}

/* 物理老师模块 - 响应式设计 */
.physics-tutor {
    left: min(335px, 26.17vw);
    top: min(140px, 17.5vh);
    background: white;
    border: 2px solid black;
}

/* 科学老师模块 - 响应式设计 */
.science-tutor {
    left: min(646px, 50.47vw);
    top: min(140px, 17.5vh);
    background: white;
    border: 2px solid black;
}

/* 化学老师模块 - 响应式设计 */
.chemistry-tutor {
    left: min(24px, 1.875vw);
    top: min(440px, 55vh);
    background: white;
    border: 2px solid black;
}

/* 生物老师模块 - 响应式设计 */
.biology-tutor {
    left: min(335px, 26.17vw);
    top: min(440px, 55vh);
    background: white;
    border: 2px solid black;
    border-radius: min(12px, 0.94vw);
}

/* 信息技术老师模块 - 响应式设计 */
.it-tutor {
    left: min(646px, 50.47vw);
    top: min(440px, 55vh);
    background: white;
    border: 2px solid black;
}

/* 作文老师模块 - 响应式设计 */
.writing-tutor {
    left: min(957px, 74.77vw);
    top: min(140px, 17.5vh);
    background: white;
    border: 2px solid black;
}

/* 历史老师模块 - 响应式设计 */
.history-tutor {
    left: min(957px, 74.77vw);
    top: min(440px, 55vh);
    background: white;
    border: 2px solid black;
}



/* ==================== 响应式设计断点 - 参考趣味语文模式 ==================== */

/* 中等屏幕优化 - 1000px以下 */
@media (max-width: 1000px) {
    .ai-tutoring-container {
        width: 100vw;
        height: auto;
        min-height: 100vh;
        padding: min(20px, 2vh) min(15px, 2vw);
    }
    
    .page-title {
        left: 50%;
        transform: translateX(-50%);
        top: min(30px, 4vh);
        font-size: min(36px, 4.5vw);
    }

    /* 中等屏幕退出按钮样式调整 */
    .exit-button {
        position: absolute !important;
        right: min(20px, 3vw) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(75px, 12vw) !important;
        height: min(42px, 6vh) !important;
        font-size: min(15px, 2.5vw) !important;
        padding: min(7px, 1vh) min(12px, 2vw) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .exit-button i {
        font-size: min(17px, 3vw);
    }

    .exit-button span {
        font-size: min(15px, 2.5vw);
    }
    
    .back-button {
        left: min(15px, 2vw);
        top: min(30px, 4vh);
        width: min(40px, 5vw);
        height: min(40px, 5vh);
        font-size: min(16px, 2vw);
    }
    
    /* tutor-module重新布局为2列 */
    .tutor-module {
        width: min(280px, 42vw);
        height: min(220px, 28vh);
    }
    
    .math-tutor {
        left: min(50px, 7vw);
        top: min(100px, 12vh);
    }
    
    .physics-tutor {
        left: min(380px, 52vw);
        top: min(100px, 12vh);
    }
    
    .science-tutor {
        left: min(50px, 7vw);
        top: min(340px, 42vh);
    }
    
    .chemistry-tutor {
        left: min(380px, 52vw);
        top: min(340px, 42vh);
    }
    
    .biology-tutor {
        left: min(50px, 7vw);
        top: min(580px, 72vh);
    }
    
    .it-tutor {
        left: min(380px, 52vw);
        top: min(580px, 72vh);
    }
    
    /* 作文老师模块移到底部 */
    .writing-tutor {
        left: 50%;
        transform: translateX(-50%);
        top: min(820px, 102vh);
    }
    
    /* 历史老师模块移到底部 */
    .history-tutor {
        left: 50%;
        transform: translateX(-50%);
        top: min(1020px, 127vh);
    }
}

/* 手机端适配 - 768px以下 */
@media (max-width: 768px) {
    .ai-tutoring-container {
        padding: min(15px, 2vh) min(10px, 2vw);
    }
    
    .page-title {
        font-size: min(28px, 5vw);
        top: min(20px, 3vh);
    }

    /* 平板设备退出按钮样式调整 */
    .exit-button {
        position: absolute !important;
        right: min(15px, 2vw) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(70px, 15vw) !important;
        height: min(40px, 5vh) !important;
        font-size: min(14px, 3vw) !important;
        padding: min(6px, 1vh) min(10px, 2vw) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .exit-button i {
        font-size: min(16px, 3.5vw);
    }

    .exit-button span {
        font-size: min(14px, 3vw);
    }
    
    .back-button {
        top: min(20px, 3vh);
        width: min(35px, 6vw);
        height: min(35px, 5vh);
        font-size: min(14px, 2.5vw);
    }
    
    /* tutor-module变为单列布局 */
    .tutor-module {
        width: min(300px, 85vw);
        height: min(180px, 22vh);
        left: 50% !important;
        transform: translateX(-50%);
    }
    
    .math-tutor {
        top: min(80px, 10vh);
    }
    
    .physics-tutor {
        top: min(280px, 35vh);
    }
    
    .science-tutor {
        top: min(480px, 60vh);
    }
    
    .chemistry-tutor {
        top: min(680px, 85vh);
    }
    
    .biology-tutor {
        top: min(880px, 110vh);
    }
    
    .it-tutor {
        top: min(1080px, 135vh);
    }
    
    /* 调整tutor-name和tutor-icon */
    .tutor-name {
        font-size: min(24px, 4.5vw);
        width: min(150px, 35vw);
        height: min(40px, 5vh);
        line-height: min(40px, 5vh);
    }
    
    .tutor-icon {
        width: min(100px, 22vw);
        height: min(100px, 12vh);
    }
    
    .tutor-icon img {
        width: min(100px, 22vw);
        height: min(100px, 12vh);
    }
    
    /* 地理老师模块调整 */
    .geography-tutor {
        top: min(1280px, 160vh);
    }
    
    /* 历史老师模块调整 */
    .history-tutor {
        top: min(1480px, 185vh);
    }
}

/* 超小屏幕适配 - 480px以下 */
@media (max-width: 480px) {
    .page-title {
        font-size: min(24px, 6vw);
    }

    /* 手机设备退出按钮样式调整 */
    .exit-button {
        position: absolute !important;
        right: min(10px, 2.5vw) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(60px, 20vw) !important;
        height: min(35px, 8vh) !important;
        font-size: min(12px, 4vw) !important;
        padding: min(5px, 1.5vh) min(8px, 3vw) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .exit-button i {
        font-size: min(14px, 4.5vw);
    }

    .exit-button span {
        font-size: min(12px, 4vw);
    }
    
    .tutor-module {
        width: min(280px, 90vw);
        height: min(160px, 20vh);
    }
    
    .tutor-name {
        font-size: min(20px, 5vw);
    }
    
    .tutor-icon {
        width: min(80px, 18vw);
        height: min(80px, 10vh);
    }
    
    .tutor-icon img {
        width: min(80px, 18vw);
        height: min(80px, 10vh);
    }
    
    .photo-answer-module {
        width: min(300px, 95vw);
        height: min(300px, 38vh);
    }
    
    .photo-desc {
        font-size: min(12px, 3.5vw);
        line-height: min(16px, 2vh);
    }
}

/* 活动状态效果 */
.tutor-module:active {
    transform: translateY(-6px) scale(0.98);
    background: #e0e0e0;
}
/* 加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutor-module {
    animation: fadeInUp 0.6s ease forwards;
}



.back-button {
    animation: fadeInUp 0.4s ease forwards;
}

.page-title {
    animation: fadeInUp 0.5s ease forwards;
}

/* 为不同的模块添加动画延迟 */
.math-tutor { animation-delay: 0.1s; }
.physics-tutor { animation-delay: 0.2s; }
.science-tutor { animation-delay: 0.3s; }
.chemistry-tutor { animation-delay: 0.4s; }
.biology-tutor { animation-delay: 0.5s; }
.it-tutor { animation-delay: 0.6s; }
.geography-tutor { animation-delay: 0.7s; }
.history-tutor { animation-delay: 0.8s; }

/* 适配1180x768分辨率 - 减少空隙更充满屏幕 */
@media screen and (width: 1180px) and (height: 768px) {
    /* 主容器尺寸调整 */
    .ai-tutoring-container {
        width: 1180px;
        height: 768px;
    }

    /* 1180x768专用body样式 - 去除居中，贴边显示 */
    body {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        height: 768px !important;
        min-height: 768px !important;
        overflow: hidden !important;
    }

    /* 返回按钮位置调整 - 几乎贴边 */
    .back-button {
        left: 4px;    /* 几乎贴边，最大化利用空间 */
        top: 50px;    /* 与整体布局保持协调 */
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    /* 页面标题位置调整 */
    .page-title {
        left: 513px;  /* 居中调整 */
        top: 25px;    /* 极度上移，最大化给模块空间 */
        width: 154px;
        height: 60px; /* 稍微减小高度 */
        font-size: 38px; /* 稍微减小字体 */
    }

    /* 墨水屏设备退出按钮样式调整 */
    .exit-button {
        right: 4px;    /* 几乎贴边，最大化利用空间 */
        top: 25px;     /* 与标题对齐 */
        width: 80px;
        height: 44px;
        font-size: 14px;
        padding: 6px 12px;
    }

    .exit-button i {
        font-size: 16px;
    }

    .exit-button span {
        font-size: 14px;
    }

    /* 所有模块统一尺寸调整 - 所有模块统一宽度 */
    .tutor-module {
        width: 284px;  /* 统一宽度，确保所有7个模块宽度一致 */
        height: 325px; /* 进一步增大高度，最大化减少下方空隙 */
    }

    /* 辅导老师标题样式调整 */
    .tutor-name {
        top: 15px;
        left: 15px;
        width: 145px;  /* 适应284px宽度 */
        height: 52px;
        font-size: 36px;  /* 适应284px宽度 */
        line-height: 52px;
    }

    /* 信息技术老师标题特殊样式调整 */
    .it-tutor .tutor-name {
        width: 210px;  /* 适应284px宽度 */
        font-size: 32px;  /* 适应284px宽度 */
    }

    /* 辅导老师图片样式调整 */
    .tutor-icon {
        bottom: 10px;
        right: 10px;
        width: 210px;  /* 适应325px高度的模块 */
        height: 210px;
    }

    .tutor-icon img {
        width: 210px;
        height: 210px;
    }

    /* 数学老师模块位置调整 - 几乎贴边，极度下移 */
    .math-tutor {
        left: 4px;    /* 与返回键对齐，几乎贴边 */
        top: 105px;   /* 极度下移，最大化减少上方空间 */
    }

    /* 物理老师模块位置调整 - 标准间距12px */
    .physics-tutor {
        left: 300px;  /* 4 + 284 + 12 = 300 */
        top: 105px;
    }

    /* 科学老师模块位置调整 - 标准间距12px */
    .science-tutor {
        left: 596px;  /* 300 + 284 + 12 = 596 */
        top: 105px;
    }

    /* 化学老师模块位置调整 */
    .chemistry-tutor {
        left: 4px;
        top: 442px;   /* 105 + 325 + 12 = 442，极度减少下方空隙 */
    }

    /* 生物老师模块位置调整 */
    .biology-tutor {
        left: 300px;  /* 保持12px标准间距 */
        top: 442px;
    }

    /* 信息技术老师模块位置调整 */
    .it-tutor {
        left: 596px;  /* 保持12px标准间距 */
        top: 442px;
    }

    /* 作文老师模块位置调整 - 与其他模块宽度完全一致 */
    .writing-tutor {
        left: 892px;  /* 596 + 284 + 12 = 892，保持12px标准间距 */
        top: 105px;   /* 与左边模块对齐 */
    }

    /* 历史老师模块位置调整 - 与其他模块宽度完全一致 */
    .history-tutor {
        left: 892px;  /* 596 + 284 + 12 = 892，保持12px标准间距 */
        top: 442px;   /* 与左边第二行模块对齐 */
    }
}