/* 使用Inter字体，更现代 */
body {
    font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}

/* 强制无滚动条 */
html, body {
    overflow: hidden;
    height: 100%;
}

/* --- 主题色定义 --- */

/* 默认主题 (翡翠绿) */
:root {
    --theme-primary: #6a9c89;
    --theme-primary-hover: #588373;
    --theme-primary-light: #e0ebe5;
    --theme-background: #f0f5f1;
    --theme-text: #1a3a3a;
    --theme-card-bg: #d1e2d8;
    --sidebar-bg: #1a3a3a;
    --sidebar-text: #f0f5f1;
    --sidebar-hover-bg: #2a5a5a;
    --ui-button-bg: #ffffff;
    --ui-button-text: #374151;
    --ui-button-hover-bg: #f3f4f6;
    --header-text: #ffffff;
}

/* --- G8REVIEW06 主题 --- */

/* 翡翠绿主题 (用于切换) */
body.theme-jade {
    --theme-primary: #6a9c89;
    --theme-primary-hover: #588373;
    --theme-primary-light: #e0ebe5;
    --theme-background: #f0f5f1;
    --theme-text: #1a3a3a;
    --theme-card-bg: #d1e2d8;
    --theme-card-bg-rgb: 209, 226, 216;
    --sidebar-bg: #1a3a3a;
    --sidebar-text: #f0f5f1;
    --sidebar-hover-bg: #2a5a5a;
    --ui-button-bg: #ffffff;
    --ui-button-text: #374151;
    --ui-button-hover-bg: #f3f4f6;
    --header-text: #ffffff;
}

/* 乾隆蓝主题 */
body.theme-imperial {
    --theme-primary: #e6b800;
    --theme-primary-hover: #cfa600;
    --theme-primary-light: #fffaf0;
    --theme-background: #fdfaf2;
    --theme-text: #0d1b2a;
    --theme-card-bg: #fff8dc;
    --theme-card-bg-rgb: 255, 248, 220;
    --sidebar-bg: #0d1b2a;
    --sidebar-text: #fdfaf2;
    --sidebar-hover-bg: #1e3a5a;
    --ui-button-bg: #ffffff;
    --ui-button-text: #0d1b2a;
    --ui-button-hover-bg: #fefae0;
    --header-text: #ffffff;
}

/* 故宫红主题 */
body.theme-crimson {
    --theme-primary: #b94547;
    --theme-primary-hover: #9e3a3c;
    --theme-primary-light: #fff5eb;
    --theme-background: #fff8f1;
    --theme-text: #5c1a1b;
    --theme-card-bg: #faebd7;
    --theme-card-bg-rgb: 250, 235, 215;
    --sidebar-bg: #5c1a1b;
    --sidebar-text: #fff8f1;
    --sidebar-hover-bg: #7c2a2b;
    --ui-button-bg: #ffffff;
    --ui-button-text: #5c1a1b;
    --ui-button-hover-bg: #fff1e6;
    --header-text: #ffffff;
}

/* 宣纸黄主题 */
body.theme-parchment {
    --theme-primary: #4e342e;
    --theme-primary-hover: #3e2a25;
    --theme-primary-light: #f5f1e6;
    --theme-background: #f5eeda;
    --theme-text: #4e342e;
    --theme-card-bg: #fffbf0;
    --theme-card-bg-rgb: 255, 251, 240;
    --sidebar-bg: #4e342e;
    --sidebar-text: #f5eeda;
    --sidebar-hover-bg: #6e4f47;
    --ui-button-bg: #f5f5f5;
    --ui-button-text: #4e342e;
    --ui-button-hover-bg: #e0e0e0;
    --header-text: #ffffff;
}

/* 修正宣纸黄主题下导航项的选中效果 */
body.theme-parchment .nav-item.active {
    background-color: var(--theme-background); /* 使用背景色作为高亮色 */
    color: var(--sidebar-bg); /* 使用侧边栏背景色作为文字颜色 */
}


/* --- 将主题色应用到组件 --- */

body {
    background-color: var(--theme-background);
    color: var(--theme-text);
}

header {
    background-color: var(--theme-card-bg);
    border-bottom: 1px solid var(--theme-primary-light);
}

/* 页面内文字样式 */
#display-area h1 {
    color: var(--theme-text);
    font-weight: 800; /* extra-bold */
}

#display-area p {
    color: var(--theme-text);
    opacity: 0.9;
}

/* 可交互高亮文本 */
.text-highlight {
    color: var(--theme-primary);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.text-highlight:hover {
    opacity: 0.8;
}

/* 左侧导航栏 */
#sidebar-nav {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

#sidebar-nav .nav-item:not(.active):hover {
    background-color: var(--sidebar-hover-bg);
}

#sidebar-nav .nav-item {
    font-size: 1rem; /* text-base */
}

/* 左侧导航栏的“选中”状态 */
.nav-item.active {
    background-color: var(--theme-primary);
    color: white;
    font-weight: 600;
}

/* 班级管理按钮 */
.btn-admin {
    background-color: var(--theme-primary);
}
.btn-admin:hover {
    background-color: var(--theme-primary-hover);
}

/* 主题切换按钮 */
.theme-circle {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.theme-circle.active {
    transform: scale(1.15);
    border-color: var(--theme-primary);
}

/* 画笔工具的“选中”状态 */
.tool-btn.active {
    background-color: var(--theme-primary-light);
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

/* UI 按钮 (翻页, 工具栏) */
.page-btn, .tool-btn {
    background-color: var(--ui-button-bg);
    color: var(--ui-button-text);
}
.page-btn:hover, .tool-btn:hover {
    background-color: var(--ui-button-hover-bg);
}
#page-info {
    color: var(--ui-button-text);
}
.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* AI查词弹窗 */
#ai-modal, .ai-modal-instance {
    border: 1px solid var(--theme-primary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    
    /* G8REVIEW: 增加毛玻璃效果 */
    background-color: rgba(var(--theme-card-bg-rgb), 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* G8REVIEW: 增加最小尺寸和溢出隐藏 */
    min-width: 320px;
    min-height: 250px;
    overflow: hidden;
    z-index: 10; /* 为基础弹窗设置 z-index */
}

/* G8REVIEW: 仅对可见的弹窗实例应用Flexbox布局，以防止覆盖模板的hidden属性 */
.ai-modal-instance {
    display: flex;
    flex-direction: column;
}
#ai-modal #ai-modal-header, .ai-modal-instance #ai-modal-header {
    background-color: var(--theme-primary);
    flex-shrink: 0; /* 防止头部在缩小时被压缩 */
    /* G8REVIEW: 防止头部内容换行 */
    white-space: nowrap;
}
#ai-modal #modal-content-body, .ai-modal-instance #modal-content-body {
    overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
    overflow-x: hidden; /* 禁止水平滚动 */
    flex-grow: 1; /* 让内容区占据所有剩余空间 */
    /* G8REVIEW: 强制文字换行以防止水平溢出 */
    word-break: break-word;
    /* G8REVIEW: 修复Flexbox在某些浏览器中的滚动问题 */
    min-height: 0;
}
#ai-modal-header h3, #ai-modal-header button {
    color: var(--header-text);
}

/* AI弹窗内的Tab按钮 */
.modal-tab-btn {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.875rem;
    color: var(--header-text);
    opacity: 0.7;
    transition: all 0.2s ease;
}

.modal-tab-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.modal-tab-btn.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

main {
    background-color: var(--theme-card-bg);
}

#ai-modal h2, #ai-modal p {
    color: var(--theme-text);
}

/* G8REVIEW: 调整大小手柄的样式 */
#resize-handle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent var(--theme-primary) transparent;
    opacity: 0.6;
    transition: opacity 0.2s;
}
#resize-handle:hover {
    opacity: 1;
}

/* --- 课件内容区内部图层 --- */
/* 为页面内的自定义交互元素提供独立的层级控制 */
.content-layer-1 { z-index: 1; position: relative; }
.content-layer-2 { z-index: 2; position: relative; }
.content-layer-3 { z-index: 3; position: relative; }
.content-layer-4 { z-index: 4; position: relative; }
.content-layer-5 { z-index: 5; position: relative; }
.content-layer-6 { z-index: 6; position: relative; }
.content-layer-7 { z-index: 7; position: relative; }
.content-layer-8 { z-index: 8; position: relative; }
.content-layer-9 { z-index: 9; position: relative; }
.content-layer-10 { z-index: 10; position: relative; }


/* --- G8REVIEW: 层级系统 --- */

/* UI 覆盖层，用于放置最高层级的UI元素 */
#ui-overlay {
    z-index: 100;
}

/* 教师画板 */
#drawing-canvas {
    z-index: 40;
}

/* AI 查词弹窗实例 */
.ai-modal-instance {
    /* z-index 在 JS 中动态设置 */
    /* G8REVIEW: 确保克隆出的弹窗也有毛玻璃效果 */
    background-color: rgba(var(--theme-card-bg-rgb), 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* G8REVIEW: 自定义橡皮擦光标 */
.eraser-cursor {
    position: fixed;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%); /* 让鼠标指针位于圆心 */
    display: none; /* 默认隐藏 */
    z-index: 9999; /* 确保在最顶层 */
}

/* --- AI 弹窗内容格式化 --- */
/* 目标：优化AI返回内容的显示格式，使其更符合中文阅读习惯。*/

#modal-content-body p {
    text-indent: 2em; /* 所有段落首行缩进2个字符 */
    margin-bottom: 0.5rem; /* 增加段落间距 */
}

#modal-content-body h3 {
    text-indent: 0; /* 标题不缩进 */
    margin-top: 1rem; /* 增加标题上边距 */
}

#modal-content-body ul {
    text-indent: 0; /* 列表不缩进 */
    padding-left: 2.5em; /* 列表整体左内边距，比默认多一点以容纳项目符号 */
}

#modal-content-body li p {
    text-indent: 0; /* 列表项内的段落不缩进 */
}

/* 针对特定内容的微调 */
#modal-content-body .font-semibold,
#modal-content-body strong {
    text-indent: 0; /* 加粗的标签行不缩进 */
}

#modal-content-body #modal-word,
#modal-content-body #modal-pinyin {
    text-indent: 0; /* 词汇和拼音不缩进 */
}