/* 拍照答疑页面 - 全新左右分栏布局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(180deg, #01baef 0%, #398bf9 100%);
    min-height: 100vh;
    width: 100vw;
    color: #333;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

/* 响应式容器 - 参考语文素养模式 */
.photo-answer-container {
    position: relative;
    width: min(1280px, 100vw);
    height: min(800px, 100vh);
    min-height: 100vh;
    margin: 0 auto;
    background: linear-gradient(180deg, #01baef 0%, #398bf9 100%);
    overflow: hidden;
    box-sizing: border-box;
}



/* 页面标题 - 响应式设计 */
.page-title {
    position: absolute;
    left: min(563px, 44vw);
    top: min(59px, 7.375vh);
    width: min(154px, 12vw);
    height: min(70px, 8.75vh);
    color: white;
    font-size: min(48px, 3.75vw);
    font-weight: bold;
    text-align: center;
    line-height: min(70px, 8.75vh);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: none; /* 默认隐藏，可选择显示 */
}

/* 左侧：题目图片显示模块 - 响应式设计 */
.question-image-panel {
    position: absolute;
    left: min(24px, 1.875vw);
    top: min(154px, 19.25vh);
    width: min(413px, 32.27vw);
    height: min(606px, 75.75vh);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: min(16px, 1.25vw);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-display {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 题目图片标题 - 响应式设计 */
.image-title {
    position: absolute;
    left: min(16px, 1.25vw);
    top: min(15px, 1.875vh);
    width: min(80px, 6.25vw);
    height: min(29px, 3.625vh);
    font-size: min(20px, 1.56vw);
    font-weight: bold;
    color: #2634b5;
    line-height: min(29px, 3.625vh);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 默认图片 - 响应式设计 */
.default-image {
    position: absolute;
    left: min(107px, 8.36vw);
    top: min(100px, 12.5vh);
    width: min(200px, 15.63vw);
    height: min(200px, 25vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.default-image img {
    width: min(200px, 15.63vw);
    height: min(200px, 25vh);
    object-fit: contain;
    opacity: 0.8;
    border-radius: min(12px, 0.94vw);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

/* 提示文字区域 */
.upload-hints {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* "请上传题目图片" - 响应式设计 */
.upload-prompt {
    position: absolute;
    left: min(109px, 8.52vw);
    top: min(308px, 38.5vh);
    width: min(220px, 17.19vw);
    height: min(41px, 5.125vh);
    font-size: min(24px, 1.88vw);
    font-weight: 700;
    color: #2634b5;
    opacity: 0.8;
    line-height: min(41px, 5.125vh);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "支持数学、物理、化学、语文等各科题目" - 响应式设计 */
.subject-support {
    position: absolute;
    left: min(40px, 3.13vw);
    top: min(357px, 44.625vh);
    width: min(320px, 25vw);
    height: min(23px, 2.875vh);
    font-size: min(14px, 1.09vw);
    font-weight: 400;
    color: #2634b5;
    opacity: 0.8;
    line-height: min(23px, 2.875vh);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

#questionImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: min(16px, 1.25vw);
    z-index: 10;
}

/* 数字人显示区域 */
.digital-human-display {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    border-radius: inherit;
    z-index: 15;
}

/* 数字人静默状态 */
.digital-idle-state {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.digital-idle-image {
    width: auto;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: min(8px, 0.625vw);
}

/* 数字人活跃状态 */
.digital-active-state {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.digital-background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: min(8px, 0.625vw);
    z-index: 1;
}

.digital-animation {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: min(8px, 0.625vw);
    z-index: 2;
}

/* 右侧：上传图片界面（上传前） - 响应式设计 */
.upload-panel {
    position: absolute;
    left: min(449px, 35.08vw);
    top: min(154px, 19.25vh);
    width: min(807px, 63.05vw);
    height: min(606px, 75.75vh);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: min(16px, 1.25vw);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* "上传图片"标题 - 响应式设计 */
.upload-title {
    position: absolute;
    left: min(16px, 1.25vw);
    top: min(15px, 1.875vh);
    width: min(80px, 6.25vw);
    height: min(29px, 3.625vh);
    font-size: min(20px, 1.56vw);
    font-weight: 700;
    color: #2634b5;
    line-height: min(29px, 3.625vh);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 拍照上传框 - 响应式设计 */
.photo-upload-box {
    position: absolute;
    left: min(16px, 1.25vw);
    top: min(52px, 6.5vh);
    width: min(382px, 29.84vw);
    height: min(478px, 59.75vh);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: min(12px, 0.94vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.photo-upload-box:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 本地照片框 - 响应式设计 */
.local-upload-box {
    position: absolute;
    left: min(409px, 31.95vw);
    top: min(52px, 6.5vh);
    width: min(382px, 29.84vw);
    height: min(478px, 59.75vh);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: min(12px, 0.94vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.local-upload-box:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.upload-icon i {
    font-size: min(64px, 5vw);
    color: #007bff;
    margin-bottom: min(20px, 2.5vh);
}

.photo-upload-box h3,
.local-upload-box h3 {
    font-size: min(24px, 1.88vw);
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* 右侧：聊天界面（上传后） - 响应式设计 */
.chat-panel {
    position: absolute;
    left: min(449px, 35.08vw);
    top: min(154px, 19.25vh);
    width: min(807px, 63.05vw);
    height: min(606px, 75.75vh);
    /* border: 2px solid red; /* 临时调试边框 */
    pointer-events: auto;  /* 确保聊天面板可以传递事件 */
}

/* 聊天气泡显示框 - 响应式设计 */
.chat-display-area {
    position: absolute;
    left: 0;
    top: 0;
    width: min(807px, 63.05vw);
    height: min(410px, 51.25vh);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: min(16px, 1.25vw);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    pointer-events: none;  /* 聊天显示区域本身不阻止事件，但内容可以接收事件 */
}

.chat-messages {
    flex: 1;
    padding: min(16px, 1.25vw);
    padding-bottom: min(20px, 2.5vh);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: min(10px, 1.25vh);
    width: 100%;
    max-width: min(775px, 60.55vw);
    box-sizing: border-box;
    pointer-events: auto;
}

.typing-indicator {
    margin: min(10px, 1.25vh) 0;
    padding: min(8px, 0.63vw) min(12px, 0.94vw);
    background: rgba(255, 255, 255, 0.8);
    border-radius: min(20px, 1.56vw);
    display: flex;
    align-items: center;
    gap: min(8px, 0.63vw);
    align-self: flex-start;
    max-width: min(100px, 7.81vw);
}

.typing-dots {
    display: flex;
    gap: min(4px, 0.31vw);
}

.typing-dots span {
    width: min(8px, 0.63vw);
    height: min(8px, 1vh);
    background: #007bff;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* 快捷按钮基础样式 - 响应式设计 */
.quick-btn {
    position: absolute;
    width: min(140px, 10.94vw);
    height: min(36px, 4.5vh);
    background: linear-gradient(180deg, #ddec82 0%, #ffd285 100%);
    border: none;
    border-radius: min(40px, 3.125vw);
    color: #2634b5;
    font-size: min(12px, 0.94vw);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(221, 236, 130, 0.4);
}

.quick-btn:active {
    transform: translateY(0);
}

/* 快捷按钮位置 - 居中布局 */
.chat-panel .quick-btn.btn-1 {
    left: calc(50% - 290px) !important;
    top: min(438px, 54.75vh) !important;
}

.chat-panel .quick-btn.btn-2 {
    left: calc(50% - 145px) !important;
    top: min(438px, 54.75vh) !important;
}

.chat-panel .quick-btn.btn-3 {
    left: calc(50% + 5px) !important;
    top: min(438px, 54.75vh) !important;
}

.chat-panel .quick-btn.btn-4 {
    left: calc(50% + 150px) !important;
    top: min(438px, 54.75vh) !important;
    border: none !important;
    outline: none !important;
}

/* 输入框外框 - 响应式设计 */
.input-outer-box {
    position: absolute;
    left: 0;
    top: min(422px, 52.75vh);
    width: min(807px, 63.05vw);
    height: min(184px, 23vh);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: min(16px, 1.25vw);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
    pointer-events: none;
}

/* 输入框 - 响应式设计 */
.input-box {
    position: absolute;
    left: min(16px, 1.25vw);
    top: min(482px, 60.25vh);
    width: min(775px, 60.55vw);
    height: min(108px, 13.5vh);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: min(12px, 0.94vw);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    z-index: 2;
    pointer-events: auto;
}

/* 输入内容容器 */
.input-content-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    pointer-events: auto;  /* 确保可以接收鼠标事件 */
}

.input-content-box textarea {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    resize: none;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    outline: none;
    max-height: 68px;   /* 108-40=68px，给按钮留出空间 */
    min-height: 68px;
    pointer-events: auto;  /* 确保textarea可以接收输入 */
}

.input-content-box textarea::placeholder {
    color: #999;
}

.input-actions {
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 6px;
    pointer-events: auto;  /* 确保按钮区域可以交互 */
}

.voice-btn,
.send-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    pointer-events: auto;  /* 确保输入框内的按钮可以点击 */
}

.voice-btn {
    background: #28a745;
    color: white;
}

.voice-btn:hover {
    background: #218838;
    transform: scale(1.1);
}

/* 语音录制状态 */
.voice-btn.recording {
    background: #dc3545;  /* 红色背景表示录制中 */
    animation: pulse 1.5s infinite;
}

.voice-btn.recording:hover {
    background: #c82333;
}

/* 录制动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.send-btn {
    background: #007bff;
    color: white;
}

.send-btn:hover {
    background: #0056b3;
    transform: scale(1.1);
}

/* 摄像头拍照界面（全屏模式） */
.camera-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 9999;
    /* 重置任何继承的transform，确保真正全屏 */
    transform: none !important;
}

/* 当camera-modal被移到body下时，确保样式独立 */
body > .camera-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.camera-container {
    background: #000;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.camera-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background: transparent;
    border-bottom: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
}

.camera-header h4 {
    display: none; /* 隐藏标题，让体验更像原生摄像头 */
}



.camera-preview {
    position: relative;
    width: 100vw !important;
    height: 100vh !important; /* header被隐藏，所以使用全高度 */
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.camera-preview video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important; /* 视频填满屏幕 */
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.camera-preview canvas {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important; /* 图片适应屏幕 */
    border-radius: 0;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Canvas显示时的样式 */
#cameraCanvas {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 强制摄像头全屏的通用样式 */
.camera-modal,
.camera-modal *,
body.camera-active {
    box-sizing: border-box !important;
}

/* 针对所有屏幕尺寸的摄像头全屏保证 */
@media screen {
    .camera-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }
    
    .camera-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    .camera-preview {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        position: relative !important;
    }
    
    .camera-preview video,
    .camera-preview canvas {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

.camera-controls {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    background: transparent;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* 摄像头界面本地上传按钮样式 */
.upload-from-camera-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
    gap: 5px;
}

.upload-from-camera-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.upload-from-camera-btn:active {
    transform: scale(0.95);
}

.upload-from-camera-btn i {
    font-size: 20px;
    margin-bottom: 2px;
}

.upload-from-camera-btn span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.capture-btn {
    width: 70px;
    height: 70px;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    transition: all 0.3s ease;
}

.capture-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.capture-btn:active {
    transform: scale(0.95);
}

/* 拍照按钮内部圆圈 */
.capture-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #dc3545;
    border-radius: 50%;
}

.capture-btn i {
    display: none; /* 隐藏图标文字 */
}

/* 拍照闪光效果 */
@keyframes camera-flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.camera-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

.camera-flash.active {
    animation: camera-flash 0.3s ease-out;
}

/* 相机操作按钮 */
.retake-btn, .confirm-btn, .use-anyway-btn {
    padding: 12px 24px;
    margin: 0 10px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retake-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
}

.retake-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.confirm-btn {
    background: #28a745;
    color: white;
}

.confirm-btn:hover:not(:disabled) {
    background: #218838;
    transform: scale(1.05);
}

.confirm-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.use-anyway-btn {
    background: #007bff;
    color: white;
}

.use-anyway-btn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* 检测状态 */
.detection-status {
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 20px;
}

.detection-status i {
    margin-right: 10px;
}

/* 检测结果 */
.detection-result {
    text-align: center;
    color: white;
    max-width: 200px;
}

.detection-result p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
}

.camera-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* 检测错误 */
.detection-error {
    text-align: center;
    color: white;
    max-width: 200px;
}

.detection-error p {
    margin-bottom: 20px;
    font-size: 18px;
    color: #ffc107;
}

.detection-error i {
    margin-right: 10px;
}

/* 相机题目覆盖层 */
.camera-question-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* 让鼠标事件穿透到题目框 */
}

.camera-question-overlay > * {
    pointer-events: auto; /* 但题目框可以接收鼠标事件 */
}

/* 相机题目框样式 */
.camera-question-box {
    background: rgba(0, 123, 255, 0.08) !important;
    border: 3px solid #007bff !important;
    /* 移除模糊效果，避免题目内容被模糊 */
    /* backdrop-filter: blur(2px); */
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
}

.camera-question-box:hover {
    background: rgba(0, 123, 255, 0.25) !important;
    border-color: #0056b3 !important;
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.6) !important;
    transform: scale(1.02);
}

.camera-question-box.selected {
    background: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
    box-shadow: 0 0 25px rgba(40, 167, 69, 0.6) !important;
}

/* 题目序号标签 */
.camera-question-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.camera-question-box.selected .camera-question-label {
    background: #28a745;
}



/* 聊天界面返回按钮 - 相对于整个页面定位 */
.chat-back-button {
    position: fixed;
    left: min(24px, 1.875vw);
    top: min(70px, 8.75vh);
    width: min(48px, 3.75vw);
    height: min(48px, 6vh);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: min(40px, 3.125vw);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.chat-back-button:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chat-back-button i {
    color: white;
    font-size: min(18px, 1.41vw);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 通知消息 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    background: #28a745;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 1001;
}

.notification.show {
    transform: translateX(0);
}

.notification.error {
    background: #dc3545;
}

.notification.warning {
    background: #ffc107;
    color: #333;
}

.notification.info {
    background: #17a2b8;
    color: white;
}

/* 响应式设计 - 确保1280及以上分辨率显示原始大小 */
@media (min-width: 1280px) {
    .photo-answer-container {
        transform: none;
    }
}

@media (max-width: 1279px) and (min-width: 1100px) {
    .photo-answer-container {
        transform: scale(0.9);
        transform-origin: center top;
    }
    /* 确保摄像头始终全屏 */
    .camera-modal {
        transform: none !important;
    }
}

@media (max-width: 1099px) and (min-width: 900px) {
    .photo-answer-container {
        transform: scale(0.75);
        transform-origin: center top;
    }
    /* 确保摄像头始终全屏 */
    .camera-modal {
        transform: none !important;
    }
}

@media (max-width: 899px) {
    .photo-answer-container {
        transform: scale(0.6);
        transform-origin: center top;
    }
    /* 确保摄像头始终全屏 */
    .camera-modal {
        transform: none !important;
    }
}

/* 聊天消息样式 - 统一且紧凑 */
.message {
    display: flex;
    margin-bottom: 8px;  /* 减小间距 */
    align-items: flex-start;
    gap: 6px;  /* 减小头像与内容的间距 */
}

.message.user {
    justify-content: flex-end;
}

.message.ai {
    justify-content: flex-start;
}

.message-avatar {
    width: 24px;  /* 减小头像尺寸 */
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;  /* 减小图标尺寸 */
    flex-shrink: 0;
}

.message.user .message-avatar {
    background: #2634b5;  /* 与AI回复框颜色统一 */
    color: white;
    order: 2;
}

.message.ai .message-avatar {
    background: #28a745;
    color: white;
}

.message-content {
    max-width: 60%;  /* 进一步减小最大宽度 */
    padding: 10px 14px;  /* 适中的内边距 */
    border-radius: 12px;  /* 更小的圆角 */
    font-size: 14px;  /* 正常的字体大小 */
    line-height: 1.4;  /* 正常的行高 */
    word-wrap: break-word;
    box-sizing: border-box;  /* 确保padding不会超出max-width */
}

.message.user .message-content {
    background: #2634b5;  /* 与AI回复框颜色统一 */
    color: white;
    border-bottom-right-radius: 4px;
}

.message.ai .message-content {
    background: rgba(255, 255, 255, 0.8);  /* 稍微更透明 */
    color: #2634b5;  /* 与AI回复框颜色统一 */
    border: 1px solid rgba(255, 255, 255, 0.6);  /* 与用户规范一致 */
    border-bottom-left-radius: 4px;
}



.message-time {
    font-size: 11px;  /* 更小的时间字体 */
    color: #999;
    margin-top: 2px;
    text-align: center;
}

/* 适配1180x768分辨率 - 按1280x800比例缩放 */
@media screen and (width: 1180px) and (height: 768px) {
    /* body样式调整 - 保持原始背景，只调整尺寸 */
    body {
        min-height: 768px;
        height: 768px;
        overflow: hidden;
    }

    /* 主容器尺寸调整 - 保持原始定位方式，只调整尺寸 */
    .photo-answer-container {
        width: 1180px;
        height: 768px;
        margin: 0 auto; /* 保持原始的居中方式 */
    }



    /* 页面标题位置和尺寸调整 */
    .page-title {
        left: 519px;  /* (1180 - 142) / 2 = 519，重新居中 */
        top: 57px;    /* 59 * 0.96 = 57 */
        width: 142px; /* 154 * 0.921875 = 142 */
        height: 67px; /* 70 * 0.96 = 67 */
        font-size: 46px; /* 48 * 0.96 = 46 */
        line-height: 67px;
    }

    /* 左侧题目图片显示模块位置和尺寸调整 - 合理利用空间 */
    .question-image-panel {
        left: 16px;   /* 与返回按钮对齐，适度边距 */
        top: 140px;   /* 稍微上移，减少下方空隙 */
        width: 380px; /* 合理增加宽度 */
        height: 620px; /* 768-140-8 = 620px，留8px底部边距 */
    }

    /* 题目图片标题位置调整 - 增加宽度确保一行显示 */
    .image-title {
        left: 15px;   /* 16 * 0.921875 ≈ 15 */
        top: 14px;    /* 15 * 0.96 = 14 */
        width: 100px; /* 增加宽度确保"题目图片"4个字一行显示 */
        height: 28px; /* 29 * 0.96 = 28 */
        font-size: 18px; /* 稍微减小字体确保适配 */
        line-height: 28px;
        white-space: nowrap; /* 强制单行显示 */
    }

    /* 默认图片位置调整 */
    .default-image {
        left: 98px;   /* (380 - 184) / 2 = 98，重新居中 */
        top: 96px;    /* 100 * 0.96 = 96 */
        width: 184px; /* 200 * 0.921875 = 184 */
        height: 192px; /* 200 * 0.96 = 192 */
    }

    .default-image img {
        width: 184px;
        height: 192px;
    }

    /* 上传提示文字位置调整 - 增加宽度确保一行显示 */
    .upload-prompt {
        left: 80px;   /* (380 - 220) / 2 = 80，重新居中 */
        top: 296px;   /* 308 * 0.96 = 296 */
        width: 220px; /* 增加宽度确保"请上传题目图片"7个字一行显示 */
        height: 39px; /* 41 * 0.96 = 39 */
        font-size: 24px; /* 减小字体确保适配 */
        line-height: 39px;
        white-space: nowrap; /* 强制单行显示 */
        text-align: center; /* 居中显示 */
    }

    /* 科目支持文字位置调整 - 确保完整显示 */
    .subject-support {
        left: 40px;   /* (380 - 300) / 2 = 40，重新居中 */
        top: 343px;   /* 357 * 0.96 = 343 */
        width: 300px; /* 增加宽度确保长文字完整显示 */
        height: 22px; /* 23 * 0.96 = 22 */
        font-size: 14px; /* 稍微减小字体确保适配 */
        line-height: 22px;
        white-space: nowrap; /* 强制单行显示 */
        text-align: center; /* 居中显示 */
    }

    /* 右侧上传面板位置和尺寸调整 - 与左侧面板高度完全一致 */
    .upload-panel {
        left: 408px;  /* 16 + 380 + 12 = 408，合理间距 */
        top: 140px;   /* 与左侧面板对齐 */
        width: 756px; /* 1180 - 408 - 16 = 756，合理利用右侧空间 */
        height: 620px; /* 与左侧面板高度完全一致：620px */
    }

    /* 上传图片标题位置调整 - 增加宽度确保一行显示 */
    .upload-title {
        left: 15px;   /* 16 * 0.921875 = 15 */
        top: 14px;    /* 15 * 0.96 = 14 */
        width: 100px; /* 增加宽度确保"上传图片"4个字一行显示 */
        height: 28px; /* 29 * 0.96 = 28 */
        font-size: 18px; /* 稍微减小字体确保适配 */
        line-height: 28px;
        white-space: nowrap; /* 强制单行显示 */
    }

    /* 拍照上传框位置和尺寸调整 */
    .photo-upload-box {
        left: 15px;   /* 保持左侧位置 */
        top: 50px;    /* 52 * 0.96 = 50 */
        width: 356px; /* 适应756px面板宽度：(756-15-15-15)/2 = 356 */
        height: 500px; /* 适应新的面板高度：620-50-70 = 500 */
    }

    /* 本地上传框位置和尺寸调整 */
    .local-upload-box {
        left: 386px;  /* 15 + 356 + 15 = 386，适应新布局 */
        top: 50px;    /* 52 * 0.96 = 50 */
        width: 356px; /* 与拍照上传框宽度一致 */
        height: 500px; /* 与拍照上传框高度一致 */
    }

    /* 上传图标尺寸调整 */
    .upload-icon i {
        font-size: 61px; /* 64 * 0.96 = 61 */
    }

    .photo-upload-box h3,
    .local-upload-box h3 {
        font-size: 23px; /* 24 * 0.96 = 23 */
    }

    /* 右侧聊天面板位置和尺寸调整 - 与左侧面板高度一致 */
    .chat-panel {
        left: 408px;  /* 与上传面板位置一致 */
        top: 140px;   /* 与上传面板位置一致 */
        width: 756px; /* 与上传面板宽度一致 */
        height: 620px; /* 与左侧面板高度一致：768-140-8=620px */
        pointer-events: auto; /* 确保聊天面板可以传递事件 */
    }

    /* 聊天显示区域尺寸调整 - 避免重叠，保持总高度一致 */
    .chat-display-area {
        width: 756px; /* 与聊天面板宽度一致 */
        height: 400px; /* 调整为400px，留15px间距 */
        background: rgba(255, 255, 255, 0.4); /* 恢复背景色 */
        border: 1px solid rgba(255, 255, 255, 0.6); /* 恢复边框 */
        border-radius: 15px; /* 16 * 0.96 = 15，保持圆角 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 恢复阴影 */
        display: flex; /* 恢复布局 */
        flex-direction: column; /* 恢复方向 */
    }

    .chat-messages {
        max-width: 726px; /* 适应新的宽度 */
    }

    /* 快捷按钮尺寸调整 */
    .quick-btn {
        width: 101px; /* 110 * 0.921875 = 101 */
        height: 35px; /* 36 * 0.96 = 35 */
        font-size: 13px; /* 14 * 0.96 = 13 */
    }

    /* 快捷按钮位置调整 */
    .chat-panel .quick-btn.btn-1 {
        left: 15px !important;   /* 16 * 0.921875 = 15 */
        top: 440px !important;   /* 适应新的面板高度610px */
    }

    .chat-panel .quick-btn.btn-2 {
        left: 123px !important;  /* 134 * 0.921875 = 123 */
        top: 440px !important;   /* 适应新的面板高度610px */
    }

    .chat-panel .quick-btn.btn-3 {
        left: 232px !important;  /* 252 * 0.921875 = 232 */
        top: 440px !important;   /* 适应新的面板高度610px */
    }

    .chat-panel .quick-btn.btn-4 {
        left: 341px !important;  /* 370 * 0.921875 = 341 */
        top: 440px !important;   /* 适应新的面板高度610px */
    }

    /* 输入框外框位置和尺寸调整 - 包含快捷按钮，避免重叠 */
    .input-outer-box {
        left: 0;      /* 保持相对位置 */
        top: 415px;   /* 保持位置：400 + 15间距 = 415px */
        width: 756px; /* 与聊天面板宽度一致 */
        height: 205px; /* 620 - 415 = 205px，充分利用剩余空间 */
        background: rgba(255, 255, 255, 0.4); /* 恢复背景色 */
        border-radius: 15px; /* 16 * 0.96 = 15，保持圆角 */
    }

    /* 输入框位置和尺寸调整 */
    .input-box {
        left: 15px;   /* 16 * 0.921875 = 15 */
        top: 490px;   /* 调整到合理位置：415 + 75 = 490 */
        width: 726px; /* 适应新的外框宽度 */
        height: 120px; /* 调整高度：620 - 490 - 10 = 120，适应新外框 */
        background: rgba(255, 255, 255, 0.9); /* 恢复背景色 */
        border-radius: 14px; /* 15 * 0.96 = 14，保持圆角 */
    }

    /* 输入框内的按钮尺寸调整 */
    .voice-btn,
    .send-btn {
        width: 30px; /* 32 * 0.921875 = 30 */
        height: 30px; /* 32 * 0.96 = 31, 取30保持圆形 */
        font-size: 12px; /* 保持原来的字体大小 */
    }

    /* 摄像头模态框适配 - 确保全屏 */
    .camera-container {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    /* 聊天返回按钮适配 */
    .chat-back-button {
        left: 16px;
        top: 67px;
        width: 44px;
        height: 44px;
    }

    .camera-header {
        padding: 14px 18px; /* 15*0.96=14, 20*0.921875=18 */
    }

    .camera-header h4 {
        font-size: 17px; /* 18 * 0.96 = 17 */
    }

    /* 完全融合边框和阴影，消除"框住"效果 */
    .question-image-panel {
        border: 1px solid rgba(255, 255, 255, 0.1); /* 几乎透明的边框 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 减少阴影强度 */
    }

    .upload-panel {
        border: 1px solid rgba(255, 255, 255, 0.1); /* 几乎透明的边框 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 减少阴影强度 */
    }



    .input-outer-box {
        border: 1px solid rgba(255, 255, 255, 0.6); /* 恢复可见边框 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 恢复正常阴影 */
    }

    .input-box {
        border: 1px solid rgba(255, 255, 255, 0.4); /* 适中的边框 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 适中的阴影 */
    }

    /* 上传框也需要调整 */
    .photo-upload-box {
        border: 1px solid rgba(255, 255, 255, 0.4); /* 减少边框可见性 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 减少阴影 */
    }

    .local-upload-box {
        border: 1px solid rgba(255, 255, 255, 0.4); /* 减少边框可见性 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 减少阴影 */
    }
}

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

/* 中等屏幕优化 - 1000px以下 */
@media (max-width: 1000px) {
    .photo-answer-container {
        width: 100vw;
        height: auto;
        min-height: 100vh;
        padding: min(20px, 2vh) min(15px, 2vw);
        overflow-y: auto;
    }
    
    /* 确保摄像头全屏显示 */
    .camera-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    

    
    .page-title {
        left: 50%;
        transform: translateX(-50%);
        top: min(30px, 4vh);
        font-size: min(36px, 4.5vw);
    }
    
    /* 左右分栏变为垂直布局 - 调整间距参考1280x800 */
    .question-image-panel {
        left: 50%;
        transform: translateX(-50%);
        top: min(80px, 10vh);
        width: min(600px, 90vw);
        height: min(380px, 47vh);
    }
    
    .upload-panel,
    .chat-panel {
        left: 50%;
        transform: translateX(-50%);
        top: min(480px, 60vh);
        width: min(600px, 90vw);
        height: min(480px, 60vh);
    }
    
    /* 手机端返回按钮适配 */
    .chat-back-button {
        left: min(15px, 2vw);
        top: min(30px, 4vh);
        width: min(40px, 5vw);
        height: min(40px, 5vh);
    }
    
    /* 调整上传框布局 */
    .photo-upload-box {
        left: min(20px, 3vw);
        top: min(60px, 7vh);
        width: min(260px, 40vw);
        height: min(300px, 37vh);
    }
    
    .local-upload-box {
        left: min(300px, 47vw);
        top: min(60px, 7vh);
        width: min(260px, 40vw);
        height: min(300px, 37vh);
    }
    
    /* 调整聊天界面 */
    .chat-display-area {
        width: 100%;
        height: min(300px, 37vh);
    }
    
    .input-outer-box {
        top: min(320px, 40vh);
        width: 100%;
        height: min(140px, 17vh);
    }
    
    .input-box {
        top: min(340px, 42vh);
        width: calc(100% - 32px);
        height: min(100px, 12vh);
    }
    
    /* 调整快捷按钮 */
    .chat-panel .quick-btn.btn-1 {
        left: min(20px, 3vw) !important;
        top: min(310px, 39vh) !important;
    }
    
    .chat-panel .quick-btn.btn-2 {
        left: min(150px, 23vw) !important;
        top: min(310px, 39vh) !important;
    }
    
    .chat-panel .quick-btn.btn-3 {
        left: min(280px, 43vw) !important;
        top: min(310px, 39vh) !important;
    }
    
    .chat-panel .quick-btn.btn-4 {
        left: min(410px, 63vw) !important;
        top: min(310px, 39vh) !important;
    }
}

/* 手机端适配 - 768px以下 */
@media (max-width: 768px) {
    .photo-answer-container {
        padding: min(15px, 2vh) min(10px, 2vw);
    }
    
    /* 手机端确保摄像头全屏 */
    .camera-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* 使用动态视口高度，避免地址栏影响 */
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    

    
    .page-title {
        font-size: min(28px, 5vw);
        top: min(20px, 3vh);
    }
    
    .question-image-panel {
        top: min(70px, 9vh);
        width: min(350px, 95vw);
        height: min(280px, 35vh);
    }
    
    .upload-panel,
    .chat-panel {
        top: min(370px, 46vh);
        width: min(350px, 95vw);
        height: min(380px, 47vh);
    }
    
    /* 手机端小屏幕返回按钮 */
    .chat-back-button {
        left: min(12px, 3vw);
        top: min(20px, 3vh);
        width: min(36px, 7vw);
        height: min(36px, 6vh);
    }
    
    .chat-back-button i {
        font-size: min(14px, 3vw);
    }
    
    /* 垂直布局上传框 */
    .photo-upload-box {
        left: 50%;
        transform: translateX(-50%);
        top: min(60px, 7vh);
        width: min(280px, 80vw);
        height: min(120px, 15vh);
    }
    
    .local-upload-box {
        left: 50%;
        transform: translateX(-50%);
        top: min(200px, 25vh);
        width: min(280px, 80vw);
        height: min(120px, 15vh);
    }
    
    /* 调整聊天界面 */
    .chat-display-area {
        height: min(220px, 27vh);
    }
    
    .input-outer-box {
        top: min(240px, 30vh);
        height: min(120px, 15vh);
    }
    
    .input-box {
        top: min(260px, 32vh);
        height: min(80px, 10vh);
    }
    
    /* 快捷按钮重新布局 */
    .chat-panel .quick-btn.btn-1,
    .chat-panel .quick-btn.btn-2 {
        left: min(20px, 5vw) !important;
        top: min(230px, 29vh) !important;
        width: min(120px, 35vw) !important;
    }
    
    .chat-panel .quick-btn.btn-2 {
        left: min(160px, 50vw) !important;
    }
    
    .chat-panel .quick-btn.btn-3,
    .chat-panel .quick-btn.btn-4 {
        left: min(20px, 5vw) !important;
        top: min(280px, 35vh) !important;
        width: min(120px, 35vw) !important;
    }
    
    .chat-panel .quick-btn.btn-4 {
        left: min(160px, 50vw) !important;
    }
}

/* 超小屏幕适配 - 480px以下 */
@media (max-width: 480px) {
    .page-title {
        font-size: min(24px, 6vw);
    }
    
    /* 移动端摄像头全屏适配 */
    .camera-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .camera-preview video {
        object-fit: cover !important; /* 确保视频填满屏幕 */
    }
    
    .camera-preview canvas {
        object-fit: contain !important; /* 确保图片适应屏幕 */
    }
    
    .camera-controls {
        right: 20px; /* 移动端减少右边距 */
        padding: 15px;
    }
    
        /* 移动端按钮尺寸调整 */
    .upload-from-camera-btn {
        width: 65px;
        height: 65px;
    }
    
    .upload-from-camera-btn i {
        font-size: 18px;
    }
    
    .upload-from-camera-btn span {
        font-size: 10px;
    }
    
    .capture-btn {
        width: 60px; /* 稍微缩小拍照按钮 */
        height: 60px;
    }

    .capture-btn::after {
        width: 40px;
        height: 40px;
    }
    

    
    /* 移动端按钮优化 */
    .retake-btn, .confirm-btn, .use-anyway-btn {
        padding: 10px 16px;
        font-size: 14px;
        margin: 0 5px;
    }
    
    .detection-result p, .detection-error p {
        font-size: 16px;
    }
    
    .camera-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .question-image-panel {
        width: min(320px, 98vw);
        height: min(230px, 29vh);
    }
    
    .upload-panel,
    .chat-panel {
        width: min(320px, 98vw);
        height: min(330px, 41vh);
    }
    
    .photo-upload-box,
    .local-upload-box {
        width: min(260px, 90vw);
        height: min(100px, 12vh);
    }
    
    .local-upload-box {
        top: min(170px, 21vh);
    }
    
    .chat-display-area {
        height: min(180px, 22vh);
    }
    
    .input-outer-box {
        top: min(200px, 25vh);
        height: min(100px, 12vh);
    }
    
    .input-box {
        top: min(220px, 27vh);
        height: min(60px, 7vh);
    }
    
    .chat-panel .quick-btn {
        width: min(100px, 30vw) !important;
        height: min(32px, 4vh) !important;
        font-size: min(12px, 3vw) !important;
    }
    
    /* 超小屏幕返回按钮 */
    .chat-back-button {
        left: min(10px, 4vw);
        top: min(15px, 2vh);
        width: min(32px, 8vw);
        height: min(32px, 6vh);
    }
    
    .chat-back-button i {
        font-size: min(12px, 3.5vw);
    }
}