:root{--bg:#0b0f14;--card:#121821;--muted:#7c8aa0;--text:#e8eef7;--accent:#6aaefc}






/* ===== 页面布局框架 (优化版) 开始 ===== */
html, body.chat-layout { /* <-- 修改点1：只对带 chat-layout 标签的 body 设置100%高度 */
    height: 100%; 
    margin: 0;
    padding: 0;
    overscroll-behavior-y: contain; /* <-- 添加这一行 */
}

body.chat-layout { /* <-- 修改点2：只对带 chat-layout 标签的 body 应用特殊布局 */
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* 关键：禁止 body 本身滚动，滚动将由内部元素控制 */
    overscroll-behavior-y: contain; /* <-- 添加这一行 */
}

/* 对所有 body 都生效的通用基础样式 */
body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans SC, Helvetica, Arial;
}





header {
    flex-shrink: 0; /* Header高度固定，不允许被压缩 */
    position: sticky;
    top: 0;
    z-index: 5;
}

main.container {
    flex-grow: 1; /* 关键：让 main 区域占据 header之外的所有剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0; /* 关键：允许 main 在内容过多或键盘弹出时正确收缩，防止溢出 */
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 12px;
}

/* 应用于聊天界面的容器 */
#view-gpt, .chat-wrap {
    flex-grow: 1; /* 继续将“占满剩余空间”的特性传递下去 */
    display: flex;
    flex-direction: column;
    min-height: 0; /* 同样，允许自身收缩 */
}

/* 聊天记录区域 */
.chat-log {
    flex-grow: 1; /* 核心：让聊天记录区占据所有可用的垂直空间 */
    overflow-y: auto; /* 核心：当内容超出时，只让这个区域出现垂直滚动条 */
    -webkit-overflow-scrolling: touch; /* 在iOS上提供更流畅的滚动体验 */
    overscroll-behavior-y: contain; /* <-- 添加这一行 */
}

/* 输入框所在的容器 */
.chat-wrap > div:last-child {
    flex-shrink: 0; /* 核心：保护输入框区域，不允许它在任何情况下被压缩 */
}
/* ===== 页面布局框架 (优化版) 结束 ===== */

*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans SC,Helvetica,Arial;}

header{position:sticky;top:0;background:#0b0f14cc;backdrop-filter:blur(8px);z-index:5}
.container{max-width:980px;margin:0 auto;padding:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
button{background:#1b2431;border:1px solid #243244;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
button.primary{background:var(--accent);color:#001933;border-color:#5aa2ff}
input,textarea,select{width:100%;background:#0e141c;border:1px solid #223043;color:var(--text);padding:10px;border-radius:10px}
label{color:var(--muted);font-size:12px}
.card{background:var(--card);border:1px solid #243244;border-radius:16px;padding:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hidden{display:none}.small{font-size:12px;color:#7c8aa0}
.badge{display:inline-block;background:#0f1722;border:1px solid #223044;border-radius:999px;padding:2px 8px;margin-left:8px;color:#9fb0c9}
@media (max-width:760px){.grid,.grid-4,.grid-3{grid-template-columns:1fr}}
.toast{position:fixed;top:10px;right:10px;background:#2e7d32;color:#fff;padding:8px 12px;border-radius:8px;display:none;z-index:9}



.msg{margin:8px 0;display:flex;gap:8px}
.msg .bubble{padding:10px 12px;border-radius:12px;max-width:100%;white-space:pre-wrap;word-break:break-word}
.user .bubble{background:#16324a;border:1px solid #1f4464}
.assistant .bubble{background:#1a2a19;border:1px solid #274d26}
.msg .role{font-weight:700;font-size:12px;opacity:.8}
#gpt-toolbox{ display:none !important; }
body.light{--bg:#f7f9fc;--card:#ffffff;--text:#1b2234;--muted:#5c6b80;--accent:#2e80ff;}
.bubble pre.code{margin:8px 0; padding:12px; border-radius:10px;overflow:auto; line-height:1.45;background:var(--code-bg,#f6f8fa); color:inherit;}
body.dark .bubble pre.code{ background:#0f1729; }
.bubble pre.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13px;}
.bubble code.inline{background:rgba(125,125,125,.15);padding:0 4px; border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;}
.composer-lite{background: var(--card);border: 1px solid #223044;border-radius: 16px;padding: 8px;}
.ipt-wrap{ display: flex; align-items: center; gap: 8px; }
.ipt-wrap #gptInput{flex: 1; min-height: 44px;max-height: 160px;padding: 12px 10px;border-radius: 12px;resize: none;line-height: 1.4;overflow-y: auto;white-space: pre-wrap; border: 1px solid #223043;}

.ipt-wrap .i-plus,
.ipt-wrap .i-send{
  /* 这里是按钮本身大小、颜色等基础样式 */
  width: 36px; 
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d7deea;
  background: #fff; 
  color: #0c1118;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 18px; 
  cursor: pointer;
  /* 关键：删除了 position: absolute; 这一行，并清除了下面两行错误代码 */
}
body:not(.light) .ipt-wrap .i-plus,
body:not(.light) .ipt-wrap .i-send{background:#14202f; border-color:#2a3b52; color:#bcd1e7;}
@media (max-width:480px){
  /* 新增：移除手机上输入框外面的那个多余的框 */
  .composer-lite {
    border: none;
    padding: 0;
  }
  .ipt-wrap #gptInput{
    /* 关键修改在这里：把上下的内边距从 0 改为 11px */
    padding: 11px 10px; 
    min-height: 42px; /* 保持原来的最小高度 */
  }
  .ipt-wrap .i-plus, .ipt-wrap .i-send{
    width: 36px; /* 按钮大小微调 */
    height: 36px;
  }
}
.msg .bubble .ops{display: flex;gap: 8px;justify-content: flex-end;align-items: center;margin-top: 6px;opacity: .85;flex-wrap: wrap;}
.msg .bubble .ops { opacity:.95; }
.msg .bubble .ops-row{display:flex;gap:10px;align-items:center;justify-content:flex-start;border-top:1px solid #223044;margin-top:8px;padding-top:6px;flex-wrap:wrap;}
.icon-btn{width:28px; height:28px; line-height:26px;display:inline-flex; align-items:center; justify-content:center;border:1px solid #2a3b52; border-radius:8px;background:#14202f; color:#bcd1e7; font-size:16px; cursor:pointer;}
body.light .icon-btn{ background:#fff; border-color:#d7deea; color:#0c1118; }
.msg .bubble h4 {display: block;font-size: 1.15em;font-weight: 600;margin-top: 18px;margin-bottom: 8px;padding-bottom: 6px;border-bottom: 1px solid rgba(125, 125, 125, 0.25);}
.msg .bubble h4:first-child {margin-top: 5px;}
.msg .bubble details {margin-top: 16px;border-top: 1px solid rgba(125, 125, 125, 0.25);padding-top: 8px;}
.msg .bubble summary {cursor: pointer;font-weight: 500;font-size: 1.1em;color: var(--muted);outline: none;}
.msg .bubble summary::before {content: '▶ ';font-size: 0.8em;margin-right: 4px;transition: transform 0.2s;}
.msg .bubble details[open] summary::before {transform: rotate(90deg);}
.msg{ align-items: flex-end; }
.msg.user{ justify-content: flex-end; }
.msg .meta{font-size: 12px;opacity: .8;margin-bottom: 4px;}
.user .bubble{ border-radius: 14px 14px 4px 14px; }
.assistant .bubble{ border-radius: 14px 14px 14px 4px; }
.preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.preview img{height:72px;border-radius:8px;border:1px solid #223044}
.kv{display:flex;gap:8px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;z-index:20}
.modal .panel{max-width:920px;width:92%;max-height:86vh;overflow:auto;background:#0f1620;border:1px solid #223044;border-radius:14px;padding:16px}
.modal img{max-width:100%;border-radius:8px;border:1px solid #223044}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.row .pill{padding:4px 8px;border:1px solid #223044;border-radius:999px;background:#0f1722}
.small-btn{border-radius:8px;border:1px solid #2a3b52;background:#14202f;color:#bcd1e7;padding:4px 8px;font-size:12px}
:root { color-scheme: dark; }
body.light { color-scheme: light; }
body.light{--bg:#f7f9fc;--card:#ffffff;--text:#0c1118;--muted:#6b7785;--accent:#1a73e8;}
body.light header{ background:#ffffffcc; }
body.light .card{ background:var(--card); border-color:#e5eaf2; }
body.light .badge{ background:#f6f8fc; border-color:#e5eaf2; color:#62748a; }
body.light .chat-log{ background:#FFFFFF; border-color:#e5eaf2; }


body.light .user .bubble{
  /* 核心修改：移除原有的气泡，变为透明容器 */
  background: none;
  border: none;
  padding: 0;

  /* 新增：使用 Flexbox 布局 */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* 让内容靠右对齐 */
  align-items: center;

  /* 核心修改：将gap拆分，增加4px的垂直（行）间距 */
  row-gap: 4px; 
  column-gap: 8px;
}


body.light .assistant .bubble{
  /* 核心修改：移除气泡视觉效果 */
  background: none;
  border: none;
  padding: 0;

  /* 新增：使用 Flexbox 重新排序和对齐 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* 图标和时间之间的间距 */
}
body.light button{ background:#f5f7fb; border-color:#d7deea; color:#0c1118; }
body.light button.primary{ background:var(--accent); color:#fff; border-color:#0f5ddb; }
body.light .small-btn{ background:#ffffff; border-color:#d7deea; color:#0c1118; }
body.light input,
body.light textarea,
body.light select{ background:#ffffff; border-color:#d7deea; color:#0c1118; }
body.light .modal .panel{ background:#ffffff; border-color:#e5eaf2; }
body.light .row .pill{ background:#f6f8fc; border-color:#e5eaf2; }
body.light .small{ color:#6b7785; }
.msg{ gap:6px; margin:24px 0; } /* 控制每条消息的上下间距 */
.msg .bubble{font-size:13px;line-height:1.45;max-width:86%;}
.user .bubble{      border-radius:12px 12px 4px 12px; }
.assistant .bubble{ border-radius:12px 12px 12px 4px; }
.msg .bubble .ops{ margin-top:4px; }
.icon-btn{width:22px; height:22px;border-radius:6px;font-size:13px;line-height:20px;}
.msg .bubble .small-btn{padding:2px 6px;font-size:12px;border-radius:6px;}
@media (max-width:480px){.msg .bubble{ font-size:12.5px; padding:6px 8px; max-width:84%; }.icon-btn{ width:20px; height:20px; font-size:12px; }.msg{ margin:3px 0; }}
.msg .bubble{ max-width: 92%; }
#gptSettingsCard{ display:none; }

.cell-list{list-style:none;margin:0;padding:0}
.cell{width:100%; background:transparent; border:0;border-bottom:1px solid #223044;padding:14px 16px; text-align:left;display:flex; justify-content:space-between; align-items:center;font-size:16px}
.cell .chev{opacity:.5; transition:transform .15s}
.cell-details summary{list-style:none; cursor:pointer}
.cell-details[open] .chev{transform:rotate(90deg)}
.cell-body{padding:12px 16px}
.net-menu button.active-mode {background: var(--accent);color: #fff;font-weight: bold;}
body.light .net-menu button.active-mode {color: #ffffff;}
.net-mode-badge{ display:none !important; }



/* ===== 新增：用于修复标题和代码块样式的代码 开始 ===== */

/* 让聊天气泡里的标题字体变大 */
.msg .bubble h1,
.msg .bubble h2,
.msg .bubble h3,
.msg .bubble h4,
.msg .bubble h5 {
  font-weight: 600; /* 加粗 */
  line-height: 1.4;
  margin-top: 1em;
  margin-bottom: 0.6em;
}
.msg .bubble h1 { font-size: 1.6em; } /* 一号标题最大 */
.msg .bubble h2 { font-size: 1.4em; }
.msg .bubble h3 { font-size: 1.2em; }
/* h4 已有样式，这里不再重复 */

/* 代码块的背景和字体，确保高亮插件能正确工作 */
.msg .bubble pre {
  background-color: #dde2e8; /* 深色背景 */
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto; /* 内容超长时可以横向滚动 */
  border: 1px solid #dee2e7;
  
  /* --- 这里是新增的修复代码 --- */
  white-space: pre-wrap;   /* 这句是让文字可以自动换行的关键 */
  word-break: break-all;   /* 这句是让很长的英文或数字也能被强制换行 */
  /* --- 修复代码结束 --- */
}
.msg .bubble code {
  font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
  font-size: 0.9em;
}
.msg .bubble pre code {
  background: none; /* 代码块里的代码不要再有单独背景 */
  padding: 0;
}

/* ===== 新增：用于修复标题和代码块样式的代码 结束 ===== */



/* ===== 新增：代理分销功能专属样式 开始 ===== */
.pyramid-modal .panel { max-width: 980px; width: 95%; }
#downlineList { min-height: 200px; }
#downlineList .role-admin { color: #6aaefc; font-weight: bold; }
#downlineList .role-disabled { color: #ff8a8a; text-decoration: line-through; }
#backend-controls { display: flex; gap: 10px; margin-bottom: 15px; }
#backend-controls input { flex: 1; }
.link-box { background: #0f1620; padding: 12px; border-radius: 8px; margin-top:10px; word-break:break-all; font-family: monospace; }
.danger { background: #c62828; color: white; border-color: #c62828; }
/* ===== 新增：代理分销功能专属样式 结束 ===== */



/* ===== 新增：用于实现用户消息气泡仅包裹文本的核心样式 ===== */

/* 选中用户消息中真正包含文字的那个div，并把气泡样式赋予它 */

.user .bubble > div:not(.ops):not(.meta) {
  order: 3; /* 内容排第三，自然就到了下一行 */



  /* 气泡的视觉样式（背景、边框等） */
  background: #e8f0fe;
  border: 1px solid #c5dafc;
  padding: 4px 8px;
  line-height: 1.2;
  border-radius: 12px 12px 4px 12px;
}

/* 新增：移除文字“段落”自带的多余上下高度，这是解决问题的关键 */
.user .bubble > div p {
  margin-top: 0;
  margin-bottom: 0;
}

/* 统一定义时间和图标的顺序与样式，确保和谐 */
.assistant .bubble .ops,
.user .bubble .ops {
  margin-top: 0;
}
.assistant .bubble .ops .ops-row,
.user .bubble .ops .ops-row {
  border: none; padding: 0; margin: 0;
}
.assistant .bubble .meta,
.user .bubble .meta {
  order: 2; /* 助手消息的时间顺序不变 */
  font-size: 12px;
  margin-bottom: 0;
}

/* === 这里是修改的重点 === */
/* 这是最关键的新增代码：强制换行 */
.user .bubble::after {
  content: '';
  display: block;
  width: 100%;
  order: 2;
}
.user .bubble .meta {
  order: 1; /* 用户消息的时间排第一 */
}
.user .bubble .ops {
  order: 2; /* 用户消息的图标排第二 */
}
/* === 修改结束 === */
.assistant .bubble > div:not(.ops):not(.meta) {
  order: 3; /* 助手消息的内容排第三 */
  width: 100%;
  margin-top: 4px;
}
.assistant .bubble .icon-btn,
.user .bubble .icon-btn {
  font-size: 12px; width: 16px; height: 16px; line-height: 1;
}


  /* ===== 新增：后台管理弹窗的粘性页脚样式 ===== */
  .modal-footer {
    position: sticky;
    bottom: 0;
    /* 使用 --card 变量确保背景色在深/浅色模式下都和弹窗面板一致 */
    background-color: var(--card);
    /* 为了美观，增加一些内边距和顶部分隔线 */
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid #243244;
    /* 通过负外边距抵消父元素.panel的内边距，让页脚宽度100%撑满 */
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -16px;
    /* 再把内边距加回来，让按钮位置正确 */
    padding-left: 16px;
    padding-right: 16px;
  }
  /* 适配浅色模式下的边框颜色 */
  body.light .modal-footer {
    border-top-color: #e5eaf2;
  }


/* ===== 最终样式：完美布局 (V5) 开始 ===== */
.ipt-wrap {
  position: relative; /* 容器作为定位参考 */
}

/* 核心：为输入框增加左、右、底三侧的“留白区域” */
.ipt-wrap #gptInput {
  padding-bottom: 52px !important; /* 底部留白保持不变 */
  padding-left: 14px !important;  /* 关键修改：大幅减少左侧留白，让文字从最左边开始 */
  padding-right: 45px !important; /* 关键修改：调整右侧留白，与发送按钮保持对称距离 */
}

/* 悬浮工具栏：现在要撑满整个宽度 */
.composer-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 10px 8px 10px; /* 控制工具栏的边距 */
  z-index: 2;
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 让左右两组按钮分开，分别靠两边 */
  align-items: center; /* 垂直居中对齐 */
  pointer-events: none; /* 让工具栏本身不阻挡鼠标点击输入框 */
}

/* 工具栏里的所有按钮都可以响应鼠标事件 */
.composer-toolbar > div > * {
    pointer-events: auto;
}

/* 左右按钮组 */
.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 统一所有按钮的样式和大小 */
.composer-toolbar .i-plus,
.composer-toolbar .i-send,
.composer-toolbar .quick-prompts-container {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent; /* 默认无边框 */
  background: transparent; /* 默认透明 */
  transition: all 0.2s;
}
.composer-toolbar .i-plus,
.composer-toolbar .i-send {
    font-size: 32px;
    color: var(--muted);
}
.composer-toolbar .i-plus:hover,
.composer-toolbar .i-send:hover {
    background: rgba(125,125,125,0.1);
    color: var(--text);
}

/* 单独设置快捷回复按钮的SVG颜色和样式 */
#quickPromptsBtn {
  stroke: var(--accent); /* 设置箭头颜色为蓝色 */
  color: var(--accent);
  transition: all 0.2s;
}
.quick-prompts-container:hover #quickPromptsBtn {
    transform: scale(1.1);
}

/* 弹出菜单样式 (位置微调) */
.quick-prompts-menu {
    position: absolute;
    bottom: 120%; /* 从按钮上方弹出 */
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-height: 250px;
    z-index: 10;
    /* 其他样式保持不变 */
    overflow-y: auto; background: var(--card); border: 1px solid #243244;
    border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); padding: 8px;
}
/* 其他菜单项样式保持不变 */
.quick-prompts-menu.hidden { display: none; }
.quick-prompt-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-prompt-item:hover { background: #1b2431; }
body.light .quick-prompts-menu { background: #fff; border-color: #e5eaf2; }
body.light .quick-prompt-item:hover { background: #f5f7fb; }
/* ===== 最终样式：完美布局 (V5) 结束 ===== */



/* ===== 新增：SVG 图形可交互的样式 ===== */
.svg-pan-zoom-container {
  position: relative;
  overflow: hidden;
  cursor: grab;
  border: 1px solid #243244;
  border-radius: 8px;
  touch-action: none; /* 关键：告诉手机浏览器不要处理默认的触摸行为 */

  /* --- 新增：限制容器的最大高度为450像素，避免图形一开始就过大 --- */
  max-height: 450px; 
  /* --- 新增：让图形在容器内居中显示 --- */
  display: flex; 
  justify-content: center;
  align-items: center;
  background: #0f1722; /* 给个不易察觉的深色背景，避免纯白SVG看不见 */
}
body.light .svg-pan-zoom-container {
  border-color: #e5eaf2;
  background: #fdfdfd;
}
.svg-pan-zoom-container svg {
  /* --- 修改：不再强制撑满，而是让它在容器内自动缩放，保持自身的比例 --- */
  max-width: 100%;
  max-height: 100%;
  display: block;
}




/* ===== 新增：公式符号输入面板样式 v2 (弹窗版) 开始 ===== */
.student-input-container {
    position: relative; /* 这是让弹窗定位的关键 */
}
.symbol-toggle-btn {
    position: absolute;
    bottom: 8px; /* <-- 修改点：从 top 改为 bottom */
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #555;
    color: #eee;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* 确保按钮在输入框上层 */
}
.symbol-toolbar-container {
    position: absolute;
    bottom: calc(100% + 5px); /* 出现在答题框正上方，并有5px间距 */
    right: 0;
    width: 320px; /* 弹窗宽度 */
    max-width: 90vw;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    padding: 8px;
    z-index: 10; /* 确保面板在最上层 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.symbol-category-selector {
    width: 100%;
    margin-bottom: 8px;
    background: #222;
    border-color: #444;
    padding: 6px;
}
.symbol-groups-wrapper {
    max-height: 110px;
    overflow-y: auto;
    padding-right: 5px;
}
.symbol-group {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
}
.symbol-group.active {
    display: flex;
}
.symbol-btn {
    min-width: 40px;
    padding: 5px 8px;
    font-size: 16px;
    border-radius: 6px;
    background: #2a2a2a;
    border: 1px solid #444;
    cursor: pointer;
    line-height: 1.5;
}
.symbol-btn:hover {
    background: #3a3a3a;
    border-color: #666;
}
body.light .symbol-toggle-btn { background: #e9ecef; border-color: #ced4da; color: #495057; }
body.light .symbol-toolbar-container { background: #f8f9fa; border-color: #dee2e6; }
body.light .symbol-category-selector { background: #fff; border-color: #ced4da; }
body.light .symbol-btn { background: #fff; border-color: #ced4da; }
body.light .symbol-btn:hover { background: #e9ecef; }
/* ===== 新增：公式符号输入面板样式 v2 (弹窗版) 结束 ===== */




/* ===== 新增：用户可自定义的快捷回复菜单样式 ===== */
.quick-prompts-menu {
    /* 让菜单可以更宽一点，容纳按钮 */
    width: 380px; 
    max-width: 90vw;
}
.quick-prompt-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
}
.quick-prompt-text {
    flex: 1; /* 让文本区域占据尽可能多的空间 */
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超长文本显示省略号 */
}
.quick-prompt-text:hover {
    color: var(--accent);
}
.quick-prompt-controls {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}
.quick-prompt-controls button {
    /* 这是编辑和删除按钮的样式 */
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: #1b2431;
    border: 1px solid #2a3b52;
    color: var(--muted);
    cursor: pointer;
}
body.light .quick-prompt-controls button {
    background: #f5f7fb;
    border-color: #d7deea;
    color: #6b7785;
}
.quick-prompt-footer {
    border-top: 1px solid #243244;
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.light .quick-prompt-footer {
    border-top-color: #e5eaf2;
}
.quick-prompt-footer .template-info {
    font-size: 12px;
    color: var(--muted);
    padding-left: 12px;
}
/* ===== 样式结束 ===== */


/* ===== 新增：自定义链接弹窗的样式 ===== */
.link-display-area {
    display: flex;
    gap: 10px;
    align-items: center;
}
.link-display-area input[readonly] {
    flex-grow: 1; /* 让输入框占据尽可能多的空间 */
    background-color: #0f1722; /* 深色背景，突出只读感 */
    border: 1px solid #2a3b52;
    color: #e8eef7;
    font-family: monospace; /* 使用等宽字体，更像链接 */
    font-size: 14px;
}
body.light .link-display-area input[readonly] {
    background-color: #f3f6fb;
    border-color: #d7deea;
    color: #0c1118;
}
.link-display-area button {
    flex-shrink: 0; /* 防止复制按钮被压缩 */
}
/* ===== CSS代码结束 ===== */



/* ===== 新增：顶部三栏式布局样式 (最终修正版 v2) ===== */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: nowrap;
}

#btnGptSettings {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
#btnGptSettings:hover {
    background-color: rgba(125,125,125,0.1);
}

.header-left {
    flex-grow: 1; 
    display: flex;
    justify-content: center;
    min-width: 0;
}

#headerModelSelectorContainer {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- ↓↓↓ 这是本次最核心的修改区域 ↓↓↓ --- */
#headerModelSelectorContainer select {
    /* 1. 设置一个最大宽度，强制让框变窄 */
    max-width: 180px;
    /* 2. 隐藏超出宽度的文本 */
    overflow: hidden;
    /* 3. 超出部分显示为 ... */
    text-overflow: ellipsis;
    /* 4. 强制文本不换行，这是让省略号生效的前提 */
    white-space: nowrap;

    /* 尺寸微调，让它更小巧 */
    font-size: 12.5px;
    padding: 2px 4px;
    
    /* 其他美观样式保持不变 */
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237c8aa0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 20px; /* 保持给箭头留出的空间 */
}
/* --- ↑↑↑ 修改结束 ↑↑↑ --- */

body.light #headerModelSelectorContainer select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235c6b80' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
#headerModelSelectorContainer select:hover {
    background-color: rgba(125,125,125,0.1);
}

.header-right {
    flex-shrink: 0;
}
/* ===== 样式结束 ===== */



/* ===== 新增：自定义音频播放器样式 开始 ===== */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.1); /* 浅灰色背景，深色模式下透明度低 */
    max-width: 250px;
}

body.light .custom-audio-player {
    background-color: #e6e6e6; /* 浅色模式下为中性灰 */
}

.custom-audio-player .play-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding-left: 2px; /* 播放按钮的三角形校正 */
}

.custom-audio-player .status-text {
    font-size: 13px;
    color: var(--text);
    opacity: 0.8;
}
/* ===== 新增：自定义音频播放器样式 结束 ===== */
/* ===== 新增：语音功能关闭时隐藏播放器 开始 ===== */
/* 当 body 包含 .voice-disabled 类时，隐藏所有播放器 */
body.voice-disabled .custom-audio-player {
    display: none;
}
/* ===== 新增：语音功能关闭时隐藏播放器 结束 ===== */



/* 新增：图片放大镜（Modal）的样式 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  border-radius: 8px;
}
.close-modal-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 100; /* <-- 就是新增这一行，确保按钮在最顶层 */
}
.close-modal-btn:hover,
.close-modal-btn:focus {
  color: #bbb;
  text-decoration: none;
}




/* 新增：用于图片放大的容器样式 */
.image-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none; /* 关键：告诉手机浏览器不要处理默认的触摸行为 */
}


/* 新增：“终极大锁”样式，用于彻底固定背景 */
body.scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  /* “top”值将由JS动态设置 */
}


  .net-menu{position:absolute;left:6px;bottom:48px;width:190px;z-index:9;background:var(--card,#fff);border:1px solid #223044;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px}
  body:not(.light) .net-menu{background:#0f1722;border-color:#2a3b52}
  .net-menu.hidden{display:none}
  .net-menu .t{font-size:12px;opacity:.75;margin:2px 0 6px}
  .net-menu button{display:block;width:100%;text-align:left;border:1px solid #2a3b52;background:transparent;border-radius:10px;margin:6px 0;padding:8px 10px;cursor:pointer}
  .net-menu hr{border:none;border-top:1px solid #223044;margin:6px 0}
  .net-mode-badge{position:absolute;left:44px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.7}
  .net-menu button.active-mode{background: rgba(46, 102, 162, .22);border-color: #2e66a2;}


  /* ================= 新增：右上角菜单样式 开始 ================= */
  .header-left, .header-right {
    display: flex;
    align-items: center;
  }
  .nav {
    justify-content: space-between; /* 让左右两边的元素分开 */
  }
  .avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
  }
  .login-prompt-btn {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 18px;
    cursor: pointer;
  }
  .settings-dropdown-menu {
  position: fixed;
  top: 60px;
  right: 15px;
  width: 280px;
  background: var(--card);
  border: 1px solid #243244;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 100;
  display: none; /* 默认隐藏 */

  /* --- ↓↓↓ 在这里插入下面两行新代码 ↓↓↓ --- */
  max-height: 80vh; /* 新增：最大高度不超过屏幕高度的80% */
  overflow-y: auto; /* 新增：如果内容超高，就显示垂直滚动条 */
  /* --- ↑↑↑ 插入结束 ↑↑↑ --- */

  padding-bottom: 8px;
}



  body.light .settings-dropdown-menu {
    border-color: #e5eaf2;
    background: #ffffff;
  }
  .settings-dropdown-menu.show {
    display: block; /* 显示菜单 */
  }
  .settings-dropdown-menu .dropdown-header {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #243244;
      font-weight: 500;
  }
  body.light .settings-dropdown-menu .dropdown-header {
      border-color: #e5eaf2;
  }
  .settings-dropdown-menu .close-btn {
      background: transparent;
      border: none;
      font-size: 24px;
      line-height: 1;
      padding: 0 4px;
      color: var(--muted);
      cursor: pointer;
  }
  .settings-dropdown-menu .cell {
      font-size: 15px;
      padding: 12px 16px;
  }
  /* ================= 新增：右上角菜单样式 结束 ================= */


  /* 弹窗和关闭按钮 */
  .close-chat-btn { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 28px; color: var(--muted); cursor: pointer; z-index: 10; }
  #userChatModal .panel { overflow: hidden; }

  /* 左右两个面板的通用样式 */
  .chat-pane { width: 100%; height: 100%; display: flex; flex-direction: column; transition: background-color 0.2s; }
  .pane-header { padding: 10px; border-bottom: 1px solid #243244; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  body.light .pane-header { border-bottom-color: #e5eaf2; }
  
  /* 左侧面板：联系人列表 */
  #contactsPane {
      width: 280px;
      flex-shrink: 0;
      border-right: 1px solid #243244;
      background-color: #1a212e; 
  }
  body.light #contactsPane { background-color: #f5f7fa; border-right-color: #e5eaf2; }
  .search-container { display: flex; width: 100%; gap: 8px; }
  #userSearchResults { padding: 0 10px; }
  .contacts-scroll-area { flex: 1; overflow-y: auto; padding: 10px; }

  /* 好友列表项 */
  .contact-item, .search-result-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; border-radius: 6px; margin-bottom: 5px; position: relative; } /* 新增 position: relative */
  .contact-item.friend { cursor: pointer; }
  .contact-item.friend:hover { background-color: #242c3b; }
  body.light .contact-item.friend:hover { background-color: #e9edf3; }
  .contact-item.friend.active { background-color: var(--accent); color: white; }
  body.light .contact-item.friend.active { color: #fff; }

  /* 好友请求的样式 */
  .contact-item.request { background-color: #2e66a222; flex-direction: column; align-items: flex-start; gap: 8px; }
  .contact-item.request .request-buttons { display: flex; gap: 8px; }

  /* 右侧面板：聊天窗口 */
  #chatPane { background-color: #10161f; }
  body.light #chatPane { background-color: #fff; }
  #chatMessages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; }
  #chatInputArea { display: none; padding: 10px; border-top: 1px solid #243244; gap: 10px; flex-shrink: 0; }
  body.light #chatInputArea { border-top-color: #e5eaf2; }
  
  /* 聊天气泡样式 */
  .chat-message { max-width: 70%; padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; word-wrap: break-word; line-height: 1.5; }
  .chat-message.me { background-color: var(--accent); color: white; align-self: flex-end; margin-left: auto; border-radius: 12px 12px 4px 12px; }
  .chat-message.them { background-color: #243244; align-self: flex-start; border-radius: 12px 12px 12px 4px; }
  body.light .chat-message.them { background-color: #eef1f5; }
  
  /* 未读消息红点样式 */
  .unread-badge {
      position: absolute;
      top: 6px;
      right: 8px;
      background-color: #c62828;
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      border: 1px solid var(--card);
  }

  /* 手机版适配 (核心修改) */
  .back-to-contacts-btn { display: none; }
  @media (max-width: 768px) {
      #userChatModal { align-items: flex-start; }
      #userChatModal .panel { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
      
      /* 核心修改：在电脑上并排显示，在手机上只显示一个 */
      #userChatModal .panel {
          display: block; /* 改为 block 布局 */
      }
      .chat-pane {
          display: none; /* 默认都隐藏 */
          height: 100%; /* 占满整个屏幕高度 */
      }
      .chat-pane.active {
          display: flex; /* 只显示 active 的那个 */
      }
      #contactsPane {
          width: 100%; /* 手机上，联系人列表占满全宽 */
          border-right: none;
      }

      .back-to-contacts-btn { display: block; }
  }


/* 新增：用于菜单按钮上的未读消息徽章样式 */
.menu-badge {
    background-color: #c62828;
    color: white;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    height: 18px;
    min-width: 18px;
    text-align: center;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}
.menu-badge.hidden {
    display: none;
}  




/* ===== 新增：资料库功能专属样式 ===== */
#resourceLibraryModal .panel {
    max-width: 800px;
    width: 95%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.library-header {
    padding: 12px 16px;
    border-bottom: 1px solid #243244;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
.library-header input { flex-grow: 1; }
.library-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
#libraryCategoryList {
    list-style: none;
    padding: 10px;
    margin: 0;
    width: 180px;
    flex-shrink: 0;
    border-right: 1px solid #243244;
    overflow-y: auto;
}
#libraryCategoryList li {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
}
#libraryCategoryList li:hover { background-color: #1b2431; }
#libraryCategoryList li.active { background-color: var(--accent); color: white; }
#libraryFileList {
    list-style: none;
    padding: 10px;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}
#libraryFileList li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #243244;
}
#libraryFileList .file-icon { font-size: 24px; }
#libraryFileList .file-info { flex-grow: 1; }
#libraryFileList .file-name { display: block; font-weight: 500; }
#libraryFileList .file-meta { font-size: 12px; color: var(--muted); }
#libraryFileList .file-actions button { margin-left: 8px; }
body.light .library-header,
body.light #libraryCategoryList,
body.light #libraryFileList li,
body.light #categoryManagementList div { border-color: #e5eaf2; }
body.light #libraryCategoryList li:hover { background-color: #f5f7fb; }


/* ===== 新增：修复资料库弹窗层级问题 ===== */
#libraryUploadModal,
#libraryViewModal,
#libraryEditModal,
#libraryCategoryModal {
    z-index: 21; /* 把这几个子弹窗的“楼层”抬高到21楼 */
}



/* ===== 新增：资料库选择器样式 ===== */
#librarySelectorBtn {
  stroke: var(--muted); /* 设置箭头颜色 */
  color: var(--muted);
  transition: all 0.2s;
}
#librarySelectorContainer:hover #librarySelectorBtn {
    stroke: var(--accent);
    transform: scale(1.1);
}
/* 让返回按钮和进入按钮的样式更清晰 */
#librarySelectorMenu .quick-prompt-item:first-child {
    font-weight: bold;
    color: var(--accent);
}
#librarySelectorMenu .quick-prompt-item {
    display: flex;
    justify-content: space-between;
}

  /* ===== 新增：后台管理表格响应式样式 开始 ===== */
  #backendModal table {
      border: 1px solid #243244;
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
  }
  #backendModal th, 
  #backendModal td {
      padding: 10px 12px;
      text-align: left;
  }
  #backendModal thead th {
      background-color: #121821;
  }
  #backendModal tbody tr:not(:last-child) {
      border-bottom: 1px solid #243244;
  }
  body.light #backendModal table,
  body.light #backendModal tbody tr:not(:last-child) {
      border-color: #e5eaf2;
  }
  body.light #backendModal thead th {
      background-color: #f3f6fb;
  }
  
  @media (max-width: 960px) {
      #backendModal thead {
          display: none; /* 在手机上隐藏电脑版的表头 */
      }
      #backendModal tr {
          display: block; /* 让每一行像一个卡片 */
          margin-bottom: 15px;
          border: 1px solid #243244;
          border-radius: 8px;
          padding: 8px;
      }
      body.light #backendModal tr {
          border-color: #e5eaf2;
      }
      #backendModal td {
          display: flex; /* 使用flex布局，让标签和内容对齐 */
          align-items: center;
          justify-content: space-between; /* 标签和内容两端对齐 */
          padding: 8px 4px;
          border-bottom: 1px dashed rgba(125, 125, 125, 0.2);
          text-align: right; /* 内容靠右 */
      }
      #backendModal td:last-child {
          border-bottom: none;
      }
      #backendModal td::before {
          content: attr(data-label); /* 从 data-label 属性获取标签名 */
          font-weight: bold;
          text-align: left; /* 标签靠左 */
          margin-right: 10px;
          color: var(--muted);
          font-size: 13px;
      }
      #backendModal td[data-label="用户层级 / 用户名"] {
           font-weight: bold;
      }
      #backendModal td[data-label="权限开关"],
      #backendModal td[data-label="账号操作"] {
          flex-direction: column; /* 让按钮垂直排列 */
          gap: 8px;
          align-items: flex-end; /* 按钮组靠右 */
      }
      #backendModal td[data-label="权限开关"] > button,
      #backendModal td[data-label="账号操作"] > button {
          width: 100%; /* 按钮宽度撑满 */
          text-align: center;
      }
  }

/* ===== 新增：文件预览项和删除按钮样式 开始 ===== */
.preview-item {
  position: relative;
  display: inline-block;
  margin: 4px;
}
.preview-item .remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background-color: #c62828; /* 红色背景 */
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.preview-item .badge {
  padding-right: 20px; /* 给徽章留出一点空间，防止文字和删除按钮重叠 */
}
/* ===== 新增：文件预览项和删除按钮样式 结束 ===== */



/* ===== 新增：超级管理员后台管理面板样式 ===== */
.admin-tabs {
    display: flex;
    border-bottom: 1px solid #243244;
    margin-bottom: 15px;
}
.admin-tab-btn {
    padding: 10px 18px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--muted);
    border-bottom: 2px solid transparent;
}
.admin-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.admin-tab-content {
    display: none;
}
.admin-tab-content.active {
    display: block;
}
.settings-group {
    background: #0f1620;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.settings-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}
.edit-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}




  /* 弹窗内产品列表的样式 */
  .product-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 15px;
      margin-top: 15px;
  }
  .product-card {
      border: 1px solid #243244;
      border-radius: 12px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
  }
  .product-card:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  body.light .product-card { border-color: #e5eaf2; }
  body.light .product-card:hover { border-color: var(--accent); }
  .product-card .name { font-size: 16px; font-weight: 500; }
  .product-card .price { font-size: 24px; font-weight: bold; color: var(--accent); margin: 8px 0; }
  .product-card .price .unit { font-size: 14px; font-weight: normal; }
  .product-card .duration { font-size: 12px; color: var(--muted); }
  .payment-options { margin-top: 20px; text-align: center; }
  .payment-options button { margin: 0 5px; }


/* ===== 新增：公式符号输入面板样式 v4 (安全隔离版) 开始 ===== */

/* 关键修改：我们在每个选择器前面都加上了 #answer-section，
   这意味着这些样式只在 id="answer-section" 的容器内部生效。
   而这个ID只在 homework.html 页面里有，所以就实现了安全隔离。*/

   #answer-section .student-input-container {
    position: relative;
}

#answer-section .symbol-toggle-btn {
    position: absolute;
    bottom: 56px; 
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #555;
    color: #eee;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#answer-section .symbol-toggle-btn:hover {
    opacity: 1;
}

#answer-section .symbol-toolbar-container {
    position: absolute;
    bottom: 92px; 
    right: 8px;
    width: 320px;
    max-width: 90vw;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    padding: 8px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#answer-section .symbol-category-selector {
    width: 100%;
    margin-bottom: 8px;
    background: #222;
    border-color: #444;
    color: var(--text);
    padding: 6px;
}

#answer-section .symbol-groups-wrapper {
    max-height: 110px;
    overflow-y: auto;
    padding-right: 5px;
}

#answer-section .symbol-group {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
}

#answer-section .symbol-group.active {
    display: flex;
}

#answer-section .symbol-btn {
    min-width: 40px;
    padding: 5px 8px;
    font-size: 16px;
    border-radius: 6px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: var(--text);
    cursor: pointer;
    line-height: 1.5;
}

#answer-section .symbol-btn:hover {
    background: #3a3a3a;
    border-color: #666;
}

/* 适配浅色模式 (同样加上了 #answer-section 进行隔离) */
body.light #answer-section .symbol-toggle-btn { background: #e9ecef; border-color: #ced4da; color: #495057; }
body.light #answer-section .symbol-toolbar-container { background: #f8f9fa; border-color: #dee2e6; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
body.light #answer-section .symbol-category-selector { background: #fff; border-color: #ced4da; color: #000; }
body.light #answer-section .symbol-btn { background: #fff; border-color: #ced4da; color: #000; }
body.light #answer-section .symbol-btn:hover { background: #e9ecef; }

/* ===== 新增：公式符号输入面板样式 v4 (安全隔离版) 结束 ===== */



/* homework.html 专属：强制使用浅色（日间）模式 */
/* 它会覆盖你的主应用 style.css 中的深色主题变量 */
body {
    /* 强制切换到浅色配色方案，确保系统控件也是浅色 */
    color-scheme: light;
    /* 重新定义背景和文本颜色为浅色模式的值 */
    background: #f7f9fc !important; /* 你的 --bg 浅色值 */
    color: #0c1118 !important;     /* 你的 --text 浅色值 */
}

/* 核心：覆盖所有深色卡片/容器的背景，确保亮起来 */
.card,
.msg.assistant .bubble,
.msg.user .bubble {
    background-color: #ffffff !important; /* 你的 --card 浅色值 */
    border-color: #e5eaf2 !important; /* 浅色边框 */
    color: #0c1118 !important;
}

/* 特殊处理输入框，确保其是浅色的 */
#student-answer {
    background: #ffffff !important;
    border-color: #ced4da !important;
    color: #0c1118 !important;
}

/* 如果你的主应用引入了通用的 .dark 样式，你可能需要用 !important 确保覆盖 */



/* ===== 新增：论坛板块列表样式 ===== */
#forumBoardList .forum-board-item:hover {
    background-color: rgba(125, 125, 125, 0.1); /* 鼠标悬停时给个背景色 */
}
body.light #forumBoardList .forum-board-item:hover {
    background-color: #f0f0f0;
}
/* 最后一条分割线去掉，好看一点 */
#forumBoardList .forum-board-item:last-child {
    border-bottom: none;
}

/* ===== 新增：论坛帖子列表样式 ===== */
#forumThreadList .forum-thread-item:hover {
    background-color: rgba(125, 125, 125, 0.1);
}
body.light #forumThreadList .forum-thread-item:hover {
    background-color: #f0f0f0;
}
/* 最后一条分割线去掉 */
#forumThreadList .forum-thread-item:last-child {
    border-bottom: none;
}




/* 让快捷回复控制按钮小一点 */
.quick-prompt-controls button {
    padding: 2px 6px; /* 上下2像素，左右6像素的内边距 */
    font-size: 12px;  /* 字体大小12像素 */
    min-width: 25px; /* 按钮最小宽度25像素 */
    margin-left: 4px; /* 左边留4像素空隙 */
  }
  
  /* 让不能点的按钮变灰，鼠标放上去显示禁止图标 */
  .quick-prompt-controls button[disabled] {
    opacity: 0.5; /* 半透明 */
    cursor: not-allowed; /* 禁止点击的光标样式 */
  }



/* 管理快捷回复按钮的样式 */
#managePromptsBtn {
  margin-left: -4px; /* 让它离快捷回复图标近一点 */
  background: transparent;
  border: none;
  color: var(--muted);
}
#managePromptsBtn:hover {
  color: var(--accent);
  background: rgba(125,125,125,0.1);
}

/* 管理弹窗内列表项的样式微调 */
#managePromptsList .quick-prompt-item-container {
  padding: 6px 8px; /* 让列表项紧凑一点 */
  border-bottom: 1px dashed rgba(125, 125, 125, 0.15); /* 加个分隔线 */
}
#managePromptsList .quick-prompt-item-container:last-child {
  border-bottom: none; /* 最后一个去掉分隔线 */
}
#managePromptsList .quick-prompt-controls button {
   padding: 3px 6px; /* 让管理按钮也小一点 */
   font-size: 14px; /* 图标按钮字体可以稍大 */
}

/* 弹出窗口底部按钮区域的样式 */
#managePromptsFooter {
    border-top: 1px solid #243244;
    padding-top: 10px;
    margin-top: 10px;
}
body.light #managePromptsFooter {
    border-top-color: #e5eaf2;
}


/* 下拉菜单中“管理”项的特殊样式 */
.quick-prompt-manage-item {
  display: flex; /* 让文字和图标在一行 */
  justify-content: space-between; /* 文字靠左，图标靠右 */
  align-items: center; /* 垂直居中 */
  color: var(--accent); /* 使用醒目的颜色 */
  font-weight: 500; /* 加一点粗细 */
  background-color: rgba(106, 174, 252, 0.1); /* 给个淡淡的背景 */
  margin-bottom: 4px; /* 和下面的分隔线留点距离 */
}
.quick-prompt-manage-item:hover {
  background-color: rgba(106, 174, 252, 0.2); /* 悬停时背景加深 */
}
body.light .quick-prompt-manage-item {
    background-color: rgba(26, 115, 232, 0.1);
}
body.light .quick-prompt-manage-item:hover {
    background-color: rgba(26, 115, 232, 0.2);
}


/* 移除旧的资料库选择器样式 */
#librarySelectorContainer {
    display: none !important; 
}

/* 重新定义新的常用符号按钮容器，使其融入工具栏 */
#mathSymbolContainer {
    /* 继承 toolbar-left 的 flex 布局，无需额外定位 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* 保持和快捷回复按钮一样大小 */
    height: 32px;
}

/* 重新定义 ∑ 按钮的样式，使其看起来像一个图标按钮 */
#symbolToggleBtn {
    /* 重置掉 i-plus 的默认样式，我们自己来定义 */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--muted) !important; /* 使用 muted 颜色，像一个图标 */
    font-size: 18px !important; 
    line-height: 1 !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
}
#symbolToggleBtn:hover {
    color: var(--accent) !important;
    background: rgba(125,125,125,0.1) !important;
}

/* 确保符号面板在正确的位置弹出 */
#symbolToolbarContainer {
    /* 覆盖掉你的 v4 安全隔离版中的固定定位 */
    position: absolute !important;
    /* 让它出现在输入框的上方 */
    bottom: 120%; /* 向上弹出 */
    left: 45px; /* 放在左侧工具栏附近 */
    /* 确保它在最上面 */
    z-index: 100 !important;
    /* 继承你原来的面板样式，无需重复写 */
}

/* 手机适配：如果你的输入框在手机上是全屏的，可能需要调整底部位置 */
@media (max-width: 480px) {
    #symbolToolbarContainer {
        bottom: 120%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 隐藏旧的资料库选择器 SVG 样式，以防它被其他地方使用 */
#librarySelectorContainer {
  display: none !important;
}



/* --- 粘贴到 style.css 底部的 PDF 工具样式 (已为您隔离好) --- */

/* PDF工具的字体和背景 */
#pdfProcessorModal body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; margin: 20px; background-color: #f8f9fa; color: #212529; }
/* 我们用 #pdfProcessorModal .container 来覆盖您 index.html 里的 .container 样式 */
#pdfProcessorModal .container { max-width: 1200px; margin: 0 auto; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
#pdfProcessorModal h1, #pdfProcessorModal h2 { text-align: center; color: #007bff; }
#pdfProcessorModal .config-section, #pdfProcessorModal .file-section { margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #fdfdfd; }
#pdfProcessorModal label { display: block; margin-bottom: 5px; font-weight: bold; }
/* 我们给 button 也加上 #pdfProcessorModal 前缀，防止影响您原来的按钮 */
#pdfProcessorModal input[type="file"], #pdfProcessorModal input[type="number"], #pdfProcessorModal select, #pdfProcessorModal button { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; margin-top: 5px; }
#pdfProcessorModal input[type="file"] { width: calc(100% - 22px); }
#pdfProcessorModal input[type="number"], #pdfProcessorModal select { width: 150px; }
#pdfProcessorModal button { cursor: pointer; background-color: #007bff; color: white; border: none; transition: background-color 0.2s; }
#pdfProcessorModal button:hover { background-color: #0056b3; }
#pdfProcessorModal button:disabled { background-color: #ccc; cursor: not-allowed; }
#pdfProcessorModal .split-options label { display: inline-block; margin-right: 15px; }
#pdfProcessorModal #pdfUtil-status { margin-top: 15px; font-weight: bold; text-align: center; padding: 10px; border-radius: 4px; } /* 已修改 ID */
#pdfProcessorModal .status-processing { background-color: #e2f3ff; color: #004085; }
#pdfProcessorModal .status-success { background-color: #d4edda; color: #155724; }
#pdfProcessorModal .status-error { background-color: #f8d7da; color: #721c24; }
#pdfProcessorModal #pdfUtil-results { margin-top: 30px; border-top: 2px solid #007bff; padding-top: 20px; } /* 已修改 ID */
#pdfProcessorModal .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}

#pdfProcessorModal #pdfUtil-rangeOptions label { display: inline-block; margin-right: 5px; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-rangeOptions input[type="number"] { width: 100px; } /* 已修改 ID */

#pdfProcessorModal #pdfUtil-imageOptions { display: none; margin-top: 10px; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-imageOptions label { display: inline-block; margin-right: 5px; font-weight: normal; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-imageOptions select { width: 120px; margin-right: 15px; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-imageOptions input[type="checkbox"] { width: auto; margin-right: 5px; vertical-align: middle; } /* 已修改 ID */

/* --- PDF 预览样式 --- */
#pdfProcessorModal #pdfUtil-previewContainer { border: 1px dashed #007bff; background: #fdfdfd; max-height: 400px; overflow-y: auto; padding: 10px; margin-top: 15px; display: none; text-align: center; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-previewStatus { font-weight: bold; color: #0056b3; padding: 10px; position: sticky; top: 0; background: #fdfdfd; z-index: 10; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-previewPages { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } /* 已修改 ID */
#pdfProcessorModal .preview-page { display: inline-block; margin: 10px; text-align: center; background: #fff; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 5px; width: 150px; }
#pdfProcessorModal .preview-page canvas { display: block; border: 1px solid #eee; width: 100%; height: auto; cursor: pointer; }
#pdfProcessorModal .preview-page p { margin: 5px 0 0 0; font-size: 0.9em; font-weight: bold; color: #333; }

/* --- 页面选择器样式 --- */
#pdfProcessorModal .page-checkbox-label { font-weight: normal !important; display: flex !important; align-items: center; margin-right: 15px !important; margin-bottom: 0 !important; cursor: pointer; }
#pdfProcessorModal #pdfUtil-pageSelectionContainer { /* 已修改 ID */
     border: 1px solid #007bff; 
     background-color: #e2f3ff;
     margin-top: 20px;
     padding: 15px;
     border-radius: 5px;
}

/* --- Modal (模态框) 样式 --- */
#pdfProcessorModal #pdfUtil-modalOverlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow: auto; align-items: center; justify-content: center; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-modalClose { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 1002; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-modalClose:hover, #pdfProcessorModal #pdfUtil-modalClose:focus { color: #bbb; text-decoration: none; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-modalContent { /* 已修改 ID */
    background-color: #fff; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: 95vh; 
    max-width: 95vw;
    border-radius: 8px;
    overflow: hidden; 
}
#pdfProcessorModal #pdfUtil-modalLoading { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.5rem; z-index: 1001; } /* 已修改 ID */

/* --- Modal 内部样式 --- */
#pdfProcessorModal #pdfUtil-modalPageWrapper { /* 已修改 ID */
    flex-shrink: 1; 
    overflow: auto; 
    background-color: #525252; 
    text-align: center; 
}
#pdfProcessorModal #pdfUtil-modalPageWrapper canvas { /* 已修改 ID */
    display: block; 
    max-width: none; 
    margin: auto; 
}

#pdfProcessorModal #pdfUtil-modalTextCopyArea { /* 已修改 ID */
    flex-shrink: 0; 
    padding: 15px;
    background-color: #f0f2f5;
    border-top: 2px solid #007bff;
}
#pdfProcessorModal #pdfUtil-modalTextCopyArea label { /* 已修改 ID */
    font-size: 0.95em;
    color: #333;
    margin-bottom: 8px;
}
#pdfProcessorModal #pdfUtil-modalTextCopyArea textarea { /* 已修改 ID */
    width: calc(100% - 22px); 
    height: 150px; 
    resize: vertical; 
    font-family: monospace;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* --- 逐页校对样式 --- */
#pdfProcessorModal .proofing-chunk { margin-bottom: 25px; border: 1px solid #007bff; border-radius: 8px; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; }
#pdfProcessorModal .proofing-chunk h3 { margin: 0; padding: 12px 15px; background-color: #e2f3ff; color: #0056b3; border-bottom: 1px solid #007bff; }
#pdfProcessorModal .proofing-layout { display: flex; flex-direction: row; gap: 10px; padding: 15px; }
#pdfProcessorModal .proofing-layout .image-side { flex: 1; padding: 10px; background-color: #fdfdfd; border: 1px solid #eee; border-radius: 5px; overflow-x: auto; }
#pdfProcessorModal .proofing-layout .image-side img { width: 100%; height: auto; display: block; border: 1px solid #ccc; cursor: zoom-in; }
#pdfProcessorModal .proofing-layout .text-side { flex: 1; }
#pdfProcessorModal .proofing-layout .text-side textarea { width: calc(100% - 22px); height: 500px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto; resize: vertical; font-size: 0.95rem; }
#pdfProcessorModal #pdfUtil-downloadCorrectedTextButton { background-color: #28a745; margin-left: auto; } /* 已修改 ID */
#pdfProcessorModal #pdfUtil-downloadCorrectedTextButton:hover { background-color: #218838; } /* 已修改 ID */

/* --- PDF.js 文本层 (用于复制) 样式 --- */
#pdfProcessorModal .textLayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; line-height: 1.0; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
#pdfProcessorModal .textLayer > span { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }

/*
   注意: ::selection 规则是全局的，不能被隔离。
   这没关系，它只会改变您选中文字的颜色，不会弄乱布局。
   我们把它【单独】放在最后，不加前缀。
*/
::selection { background: rgba(0, 123, 255, 0.4); }
::-moz-selection { background: rgba(0, 123, 255, 0.4); }

/* --- 样式结束 --- */





/* 新增：用于“跳转到解析”的高亮闪烁效果 */
@keyframes highlight-flash-anim {
    0% { background-color: rgba(100, 150, 255, 0.4); }
    100% { background-color: transparent; }
}
.msg.highlight-flash .bubble {
    animation: highlight-flash-anim 1.5s ease-out;
}



/* ========================================================== */
/* == 新增：“立即答题”弹窗的样式
/* ========================================================== */
#homework-iframe-container {
    /* 在深色模式下，给 iframe 容器加个边框，避免白色内容太突兀 */
    border: 2px solid var(--border-color, #243244);
}
/* ========================================================== */









/* ========================================================== */
/* == 新增：“AI智能分层教学引擎”弹窗样式
/* ========================================================== */

/* 修复复选框在深色模式下的样式 */
#englishTierModal input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

#englishTierModal label {
    display: inline-flex; /* 让 label 和 checkbox 在一行对齐 */
    align-items: center;
    cursor: pointer;
}

/* 修复下拉菜单的宽度 */
#englishTierModal select {
    width: 100%;
}

/* 修复小提示的样式 */
#englishTierModal p.small a {
    color: var(--accent);
    text-decoration: none;
}
#englishTierModal p.small a:hover {
    text-decoration: underline;
}





/* ====== 新增：模型角色分类标签页的 CSS 样式后端模型角色配置 ====== */
.model-role-tabs {
    display: flex;
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    gap: 6px;
    margin-bottom: 15px;
    border-bottom: 2px solid #243244; /* 底部加一条分隔线 */
}
.model-role-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent; /* 默认的底部边框（透明） */
    padding: 10px 12px;
    cursor: pointer;
    color: var(--muted); /* 默认灰色 */
    font-size: 14px;
    margin-bottom: -2px; /* 让按钮的边框盖住父元素的边框 */
}
.model-role-tab.active {
    color: var(--accent); /* 选中的标签页用高亮色 */
    border-bottom-color: var(--accent); /* 选中的标签页显示边框 */
    font-weight: bold;
}
.model-role-content {
    display: none; /* 默认隐藏所有内容页 */
    animation: fadeIn 0.3s; /* 添加一个淡入动画 */
}
.model-role-content.active {
    display: grid; /* 只有选中的才显示为 grid 布局 */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ====== CSS 结束 ====== */