/* agent.css — 智能体面板样式（沿用 style.css 的暗色主题变量） */

/* ------------------------------------------------------------------ */
/* 抽屉打开时：主布局向左压缩，避免遮住右侧控制面板                     */
/* ------------------------------------------------------------------ */
:root { --agent-w: 440px; }

.topbar, .layout {
  transition: padding-right .24s cubic-bezier(.4, 0, .2, 1);
}
body.agent-open .topbar,
body.agent-open .layout {
  padding-right: calc(var(--agent-w) + 22px);
}
/* 窄屏下抽屉近似全屏，压缩布局反而更糟 —— 此时不压缩 */
@media (max-width: 900px) {
  body.agent-open .topbar,
  body.agent-open .layout { padding-right: 22px; }
}

/* ------------------------------------------------------------------ */
/* 悬浮球                                                              */
/* ------------------------------------------------------------------ */
.agent-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;                 /* 圆形裁切：自然去掉图标四角的多余元素 */
  background: linear-gradient(135deg, #2b3d6b, #3b2f6b);
  border: 1px solid #6a7ec9;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(85, 160, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 900;
  touch-action: none;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.agent-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(85, 194, 255, .45), 0 0 22px rgba(120, 120, 255, .5); }
.agent-fab:active { cursor: grabbing; }
.agent-fab-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;             /* 拖动/点击事件交给悬浮球本身 */
  -webkit-user-drag: none;
}
.agent-fab-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff6b6b;
  border: 2px solid var(--bg, #0b1020);
  display: none;
}
.agent-fab-dot.show { display: block; }

/* ------------------------------------------------------------------ */
/* 抽屉                                                                */
/* ------------------------------------------------------------------ */
.agent-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(440px, 94vw);
  height: 100%;
  background: linear-gradient(180deg, #101629, #0d1324);
  border-left: 1px solid var(--line, #2a3558);
  box-shadow: -12px 0 42px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  z-index: 1000;
}
.agent-drawer.show { transform: translateX(0); }

.agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft, #202b48);
  flex-wrap: wrap;
}
.agent-head-title { font-size: 14px; font-weight: 700; color: var(--accent, #55c2ff); }
.agent-head-acts { display: flex; align-items: center; gap: 6px; }
.agent-tbtn {
  background: var(--card-2, #1a2340);
  border: 1px solid var(--line, #2a3558);
  color: var(--text, #e8ecf7);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.agent-tbtn:hover { border-color: var(--accent, #55c2ff); color: var(--accent, #55c2ff); }
.agent-x { padding: 5px 9px; }

/* ------------------------------------------------------------------ */
/* 消息区                                                              */
/* ------------------------------------------------------------------ */
.agent-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.agent-msg {
  font-size: 13.5px;
  line-height: 1.66;
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 100%;
  word-break: break-word;
}
.agent-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #2b3d6b, #34406b);
  border: 1px solid #46579a;
  white-space: pre-wrap;
}
.agent-msg.assistant {
  align-self: stretch;
  background: var(--card, #151c33);
  border: 1px solid var(--line-soft, #202b48);
}
.agent-msg.chip-row { padding: 0; background: none; border: none; align-self: flex-start; }
.agent-chip {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(85, 194, 255, .14);
  border: 1px solid rgba(85, 194, 255, .35);
  color: var(--accent, #55c2ff);
}
.agent-chip.warn { background: rgba(255, 170, 90, .14); border-color: rgba(255, 170, 90, .4); color: #ffaa5a; }
.agent-err { color: #ff8f8f; }
/* 非错误、但必须说一声的情况（如输出被长度上限截断）——不能留给用户一个空白气泡 */
.agent-warn {
  color: #ffd79a;
  background: rgba(255, 190, 90, .1);
  border: 1px solid rgba(255, 190, 90, .35);
  border-radius: 8px;
  padding: 7px 10px;
  line-height: 1.55;
}
/* 诊断证据行（finish_reason / token 用量）：出问题时能一眼看出原因，不用猜 */
.agent-diag {
  display: inline-block;
  margin-top: 4px;
  color: var(--text-dim, #9aa7c6);
  font-size: 11.5px;
  font-family: ui-monospace, Consolas, monospace;
}
.agent-hello { color: var(--text-dim, #9aa7c6); }
.agent-hello b { color: var(--text, #e8ecf7); }

/* 公式与代码 */
.agent-msg .katex { font-size: 1.02em; }
/* 块级公式独占一行、过宽时可横向滚动（不撑破面板）；
   行内公式保持 inline，与文字连成一句 */
.agent-msg .katex-display {
  margin: 7px 0;
  padding: 1px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.agent-msg .katex-display > .katex { white-space: nowrap; }

/* 块级公式：独占一块，居中；过宽时横向滚动而不是撑破抽屉。
   ★ 内层用 width:max-content + margin:0 auto 而不是 text-align:center ——
     text-align:center 遇上 overflow 时，超出部分会向左溢出且**滚不到**。 */
.md-math-block {
  margin: 9px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.md-math-block > .katex-display { margin: 0; }
.md-math-block > .katex-display > .katex {
  display: block;
  width: max-content;
  margin: 0 auto;
}
.md-line { min-height: 1px; }
.md-quote {
  border-left: 3px solid var(--line, #2a3558);
  padding-left: 9px;
  margin: 6px 0;
  color: var(--text-dim, #9aa7c6);
}
.agent-msg code {
  background: rgba(255, 255, 255, .08);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: .92em;
}
.md-h { font-weight: 700; color: var(--accent, #55c2ff); margin: 4px 0 2px; }
.md-gap { height: 6px; }
.md-table {
  border-collapse: collapse;
  margin: 7px 0;
  font-size: 12.5px;
  width: 100%;
}
.md-table th, .md-table td {
  border: 1px solid var(--line, #2a3558);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.md-table th { background: rgba(85, 194, 255, .1); color: var(--accent, #55c2ff); font-weight: 700; }
.md-table td { color: #d8e2f5; }

/* 思考折叠 */
.agent-think { margin-bottom: 6px; }
.agent-think summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim, #9aa7c6);
  list-style: none;
  user-select: none;
}
.agent-think summary::-webkit-details-marker { display: none; }
.agent-think summary::before { content: '▸ '; }
.agent-think[open] summary::before { content: '▾ '; }
.agent-think-body {
  margin-top: 5px;
  padding: 7px 9px;
  border-left: 2px solid var(--line, #2a3558);
  color: var(--text-dim, #9aa7c6);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* 动作气泡 */
.agent-action {
  align-self: stretch;
  background: rgba(85, 194, 255, .07);
  border: 1px solid rgba(85, 194, 255, .22);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
}
.agent-action.bad { background: rgba(255, 120, 120, .08); border-color: rgba(255, 120, 120, .3); }
.agent-action summary { cursor: pointer; color: #bcd4f5; list-style: none; }
.agent-action summary::-webkit-details-marker { display: none; }
.agent-act-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent, #55c2ff);
  margin-right: 7px;
  vertical-align: middle;
}
.agent-action.bad .agent-act-dot { background: #ff8f8f; }
.agent-act-more { color: var(--text-dim, #9aa7c6); font-size: 11px; margin-left: 6px; }
.agent-act-err { color: #ff8f8f; font-size: 11px; margin-left: 6px; }
.agent-act-body {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-soft, #202b48);
  color: var(--text-dim, #9aa7c6);
  font-size: 11px;
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ */
/* 输入区                                                              */
/* ------------------------------------------------------------------ */
.agent-foot {
  border-top: 1px solid var(--line-soft, #202b48);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-input-text {
  width: 100%;
  resize: none;
  background: var(--card, #151c33);
  border: 1px solid var(--line, #2a3558);
  border-radius: 10px;
  color: var(--text, #e8ecf7);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
  outline: none;
  max-height: 120px;
}
.agent-input-text:focus { border-color: var(--accent, #55c2ff); }
.agent-foot-btns { display: flex; justify-content: flex-end; gap: 8px; }

.agent-btn {
  background: var(--card-2, #1a2340);
  border: 1px solid var(--line, #2a3558);
  color: var(--text, #e8ecf7);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s ease;
}
.agent-btn:hover { border-color: var(--accent, #55c2ff); }
.agent-btn.primary {
  background: linear-gradient(135deg, var(--accent, #55c2ff), var(--accent-2, #7a9bff));
  color: #0b1224;
  border: none;
  font-weight: 700;
}
.agent-btn.primary:disabled { opacity: .5; cursor: default; }
.agent-btn.stop { background: rgba(255, 120, 120, .18); border-color: rgba(255, 120, 120, .45); color: #ffb0b0; }
.agent-btn.danger { border-color: rgba(255, 120, 120, .5); color: #ff9b9b; margin-top: 6px; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------ */
/* 设置弹层                                                            */
/* ------------------------------------------------------------------ */
.agent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, .72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.agent-overlay.show { display: flex; }
.agent-settings-box {
  width: min(520px, 94vw);
  max-height: 88vh;
  background: linear-gradient(180deg, #151c33, #111830);
  border: 1px solid var(--line, #2a3558);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
.agent-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft, #202b48);
}
.agent-settings-title { font-size: 15px; font-weight: 700; color: var(--accent, #55c2ff); }
.agent-settings-body { padding: 6px 16px 10px; overflow-y: auto; }
.agent-sgroup-title {
  font-size: 12px;
  color: var(--text-dim, #9aa7c6);
  margin: 14px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-soft, #202b48);
}
.agent-sgroup { display: flex; flex-direction: column; gap: 10px; }
.agent-field { display: flex; flex-direction: column; gap: 4px; }
.agent-flabel { font-size: 12.5px; color: var(--text, #e8ecf7); }
.agent-fhint { font-size: 11px; color: var(--text-dim, #9aa7c6); }
.agent-input {
  background: var(--card, #151c33);
  border: 1px solid var(--line, #2a3558);
  border-radius: 8px;
  color: var(--text, #e8ecf7);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
}
.agent-input:focus { border-color: var(--accent, #55c2ff); }
.agent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-test-msg { font-size: 12px; color: var(--text-dim, #9aa7c6); }
.agent-test-msg.ok { color: #7ce38b; }
.agent-test-msg.bad { color: #ff8f8f; }
.agent-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.agent-check input { accent-color: var(--accent, #55c2ff); }
.agent-note { font-size: 11.5px; color: var(--text-dim, #9aa7c6); line-height: 1.7; white-space: pre-wrap; }
.agent-settings-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft, #202b48);
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* 公式按项高亮（formula.js 的 \htmlClass{hl-term}）                    */
/* ------------------------------------------------------------------ */
.hl-term {
  background: rgba(85, 194, 255, .22);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(85, 194, 255, .22);
  transition: background .2s ease;
}

/* ------------------------------------------------------------------ */
/* 知识点选择器                                                        */
/* ------------------------------------------------------------------ */
.agent-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.agent-pick-btn {
  text-align: left;
  background: var(--card-2, #1a2340);
  border: 1px solid var(--line, #2a3558);
  color: var(--text, #e8ecf7);
  font-family: inherit; font-size: 13px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  transition: all .15s ease;
}
.agent-pick-btn:hover:not(:disabled) { border-color: var(--accent, #55c2ff); color: var(--accent, #55c2ff); }
.agent-pick-btn:disabled { opacity: .45; cursor: default; }
.agent-pick-tag {
  float: right; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,170,90,.16); color: #ffaa5a; border: 1px solid rgba(255,170,90,.35);
}

/* ------------------------------------------------------------------ */
/* 题目卡                                                              */
/* ------------------------------------------------------------------ */
.agent-q { display: flex; flex-direction: column; gap: 8px; }
.agent-q-kp { font-size: 11px; color: var(--text-dim, #9aa7c6); }
.agent-q-stem { font-size: 14px; line-height: 1.7; }
.agent-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.agent-opt {
  text-align: left;
  background: var(--card-2, #1a2340);
  border: 1px solid var(--line, #2a3558);
  color: var(--text, #e8ecf7);
  font-family: inherit; font-size: 13px; line-height: 1.6;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  transition: all .15s ease;
}
.agent-opt:hover:not(:disabled) { border-color: var(--accent, #55c2ff); }
.agent-opt:disabled { cursor: default; }
.agent-opt.right { border-color: #6ee08a; background: rgba(110,224,138,.14); }
.agent-opt.wrong { border-color: #ff8f8f; background: rgba(255,143,143,.14); }

/* 反馈卡 */
.agent-fb { border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line, #2a3558); }
.agent-fb.ok { background: rgba(110,224,138,.10); border-color: rgba(110,224,138,.4); }
.agent-fb.bad { background: rgba(255,143,143,.10); border-color: rgba(255,143,143,.4); }
.agent-fb-exp { margin-top: 7px; font-size: 13px; line-height: 1.7; color: #d8e2f5; }
.agent-goto { margin-top: 9px; }

/* ------------------------------------------------------------------ */
/* 演示控制条                                                          */
/* ------------------------------------------------------------------ */
.demo-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #1c2544, #16203c);
  border: 1px solid var(--line, #2a3558);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  z-index: 950;
  transition: transform .22s ease;
  max-width: 94vw; flex-wrap: wrap;
}
.demo-bar.show { transform: translateX(-50%) translateY(0); }
.demo-title { font-size: 13px; font-weight: 700; color: var(--accent, #55c2ff); }
.demo-prog { font-size: 12px; color: var(--text-dim, #9aa7c6); }

/* ------------------------------------------------------------------ */
/* 主动提示卡                                                          */
/* ------------------------------------------------------------------ */
.agent-proactive {
  border-color: rgba(255, 200, 90, .4) !important;
  background: linear-gradient(180deg, rgba(255,200,90,.10), rgba(255,200,90,.04)) !important;
  transition: opacity .18s ease, transform .18s ease;
}
.agent-proactive.dismissed { opacity: 0; transform: translateX(20px); }
.agent-pro-head { font-size: 12px; font-weight: 700; color: #ffc85a; margin-bottom: 5px; }
.agent-pro-body { font-size: 13px; line-height: 1.7; }
.agent-pro-act { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.agent-pro-act .agent-btn { font-size: 12px; padding: 5px 11px; }

/* ------------------------------------------------------------------ */
/* 进阶折叠区（量子态编辑器）—— 视觉权重刻意低于主打功能               */
/* ------------------------------------------------------------------ */
.adv-zone {
  margin-top: 14px;
  border-top: 1px dashed var(--line, #2a3558);
  padding-top: 10px;
}
.adv-summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim, #9aa7c6);
  list-style: none;
  user-select: none;
}
.adv-summary::-webkit-details-marker { display: none; }
.adv-summary::before { content: '▸ '; }
.adv-zone[open] .adv-summary::before { content: '▾ '; }
.adv-summary:hover { color: var(--accent, #55c2ff); }
.adv-body { margin-top: 10px; }

.se-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.se-chip {
  background: var(--card-2, #1a2340);
  border: 1px solid var(--line, #2a3558);
  color: var(--text-dim, #9aa7c6);
  font-family: inherit; font-size: 11px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.se-chip:hover { border-color: var(--accent, #55c2ff); color: var(--accent, #55c2ff); }
.se-chip.on { background: rgba(85,194,255,.16); border-color: rgba(85,194,255,.5); color: var(--accent, #55c2ff); }

/* 自定义预设：与内置预设区分开，并带一个删除按钮 */
.se-chipwrap { position: relative; display: inline-flex; align-items: center; }
.se-chip.custom { border-style: dashed; border-color: rgba(160, 140, 255, .55); color: #c9bcff; }
.se-chip.custom.on { background: rgba(160, 140, 255, .18); border-color: rgba(160, 140, 255, .8); color: #d9d0ff; }
.se-chipdel {
  background: none; border: none; cursor: pointer;
  color: #ff9b9b; font-size: 10px; line-height: 1;
  padding: 2px 3px; margin-left: -7px; opacity: .65;
}
.se-chipdel:hover { opacity: 1; color: #ff6b6b; }
.se-addchip { border-style: dashed; color: var(--text-dim, #9aa7c6); }
.se-savename { width: 120px; text-align: left; }
/* 系数归一化的说明：解释"我填 0.35 为什么显示 0.37" */
.se-hint {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim, #9aa7c6);
  background: rgba(85, 194, 255, .07);
  border-left: 2px solid rgba(85, 194, 255, .4);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  margin: 6px 0 2px;
}
.se-hint b { color: #cfe0ff; }
.se-empty { font-size: 11.5px; color: var(--text-dim, #9aa7c6); line-height: 1.6; }

.se-list { display: flex; flex-direction: column; gap: 5px; }
.se-term { display: flex; align-items: center; gap: 4px; }
/* 组分表表头：让"纵向这几个数字框各是什么"一目了然（.se-num 46px / .se-amp 56px 对齐） */
.se-term.se-head { margin-bottom: 1px; }
/* 组分表表头：让"纵向这几个数字框各是什么"一目了然。
   ★ 各列宽度只在下面「叠加态分量的解型与轨道列」一处定义 —— 原先这里还写了一份 46/56px，
     两份都生效、按书写顺序覆盖，改宽度时要改两处才不会失配。 */
.se-term.se-head .se-hcol {
  text-align: center; font-size: 11px; line-height: 1.2;
  color: var(--text-dim, #9aa7c6); cursor: help;
}
/* 叠加态分量的「解型」与「轨道 / m」两列（第 4 条：逐项可选实/复）。
   ★ 面板只有约 290px，而这一行现在有 7 个元素（# n l 解型 轨道 c ✕）—— 各列必须收紧，
     轨道列还要能自己伸缩，否则整行溢出容器（实测内容宽 400px > 容器 286px）。 */
.se-list .se-num { width: 36px; }
/* ★ 系数要显示 "0.50" 这样的四位，而 number 输入框的上下步进箭头会占掉约 14px ——
   48px 减去内边距与箭头，文字区只剩一半，"百分位"那个数字被裁掉（第 4 条）。
   去掉箭头（系数的微调用不上它），并把省下的宽度还给数字。 */
.se-list .se-amp { width: 54px; }
.se-amp::-webkit-outer-spin-button,
.se-amp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.se-amp { -moz-appearance: textfield; appearance: textfield; }
.se-term.se-head .se-hcol { width: 36px; }
.se-term.se-head .se-hcol-c { width: 54px; }
.se-term.se-head .se-hcol-mode { width: 26px; }
.se-term.se-head .se-hcol-pick { flex: 1 1 60px; min-width: 0; width: auto; }
.se-mode {
  flex: 0 0 auto;
  width: 26px; padding: 3px 0; border-radius: 6px; cursor: pointer;
  background: rgba(120,200,255,.12); border: 1px solid rgba(120,200,255,.4);
  color: #bcd4f5; font-family: inherit; font-size: 11px; line-height: 1.2;
}
.se-mode.cx { background: rgba(255,190,90,.14); border-color: rgba(255,190,90,.45); color: #ffd9a0; }
.se-pick {
  flex: 1 1 60px; min-width: 0;
  background: var(--card, #151c33); border: 1px solid var(--line, #2a3558);
  border-radius: 6px; color: var(--text, #e8ecf7); font-family: inherit; font-size: 11px;
  padding: 3px 4px; outline: none;
}
.se-idx { font-size: 11px; color: var(--text-dim, #9aa7c6); width: 14px; }
.se-num, .se-amp {
  width: 46px; background: var(--card, #151c33); border: 1px solid var(--line, #2a3558);
  border-radius: 6px; color: var(--text, #e8ecf7); font-family: inherit; font-size: 12px;
  padding: 3px 5px; outline: none; text-align: center;
}
.se-amp { width: 56px; border-color: rgba(85,194,255,.35); }
.se-del {
  margin-left: auto; background: none; border: none; color: #ff8f8f;
  cursor: pointer; font-size: 12px; padding: 2px 6px;
}
.se-addrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.se-phrow-title { font-size: 11px; color: var(--text-dim, #9aa7c6); margin: 10px 0 5px; }
.se-phrow { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.se-phnum {
  width: 58px; margin-left: auto;
  background: var(--card, #151c33); border: 1px solid rgba(85,194,255,.35);
  border-radius: 6px; color: var(--text, #e8ecf7); font-family: inherit;
  font-size: 12px; padding: 3px 6px; outline: none; text-align: center;
}
/* 演示结束：重播 / 关闭 */
.demo-end {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim, #9aa7c6);
}
.demo-end .agent-btn { font-size: 12px; padding: 5px 11px; }
.agent-msg.fade { opacity: 0; transition: opacity .2s ease; }
.se-btn {
  background: var(--card-2, #1a2340); border: 1px solid var(--line, #2a3558);
  color: var(--text, #e8ecf7); font-family: inherit; font-size: 12px;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.se-btn:hover { border-color: var(--accent, #55c2ff); }
.se-phlabel { font-size: 11px; color: var(--text-dim, #9aa7c6); }
.se-phase { flex: 1; min-width: 90px; }
.se-note { font-size: 11px; color: var(--text-dim, #9aa7c6); line-height: 1.6; margin-top: 7px; }

.se-obs { margin-top: 10px; border: 1px solid var(--line-soft, #202b48); border-radius: 9px; padding: 8px 10px; }
.se-obs-title { font-size: 11.5px; color: var(--accent, #55c2ff); margin-bottom: 6px; }
.se-obs-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; padding: 2px 0; }
.se-obs-k { color: var(--text-dim, #9aa7c6); width: 58px; flex: none; }
.se-obs-v { color: var(--text, #e8ecf7); font-variant-numeric: tabular-nums; }
.se-obs-tag { font-size: 10px; color: #7ce38b; margin-left: auto; }
.se-foot { margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* 教材对照表（默认收起，展开才占空间）                                 */
/* ------------------------------------------------------------------ */
.reftable-panel {
  display: none;
  margin-top: 12px;
  border-top: 1px dashed var(--line, #2a3558);
  padding-top: 10px;
}
.reftable-panel.show { display: block; }
.reftable-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reftable-title { font-size: 13px; font-weight: 700; color: var(--text-dim, #9aa7c6); }
.reftable-tabs { display: inline-flex; background: var(--active, #2b3d6b); border-radius: 9px; padding: 3px; gap: 3px; }
.reftable-close { margin-left: auto; }
.reftable-note { font-size: 11.5px; color: var(--text-dim, #9aa7c6); margin: 8px 0; }
.reftable-body { text-align: center; }
.reftable-img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 8px;
  border: 1px solid var(--line-soft, #202b48);
  cursor: zoom-in;
}
/* 表格图片缺失时的降级提示（别人克隆仓库后看到的就是它，不能是裂图） */
.reftable-fallback {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 190, 90, .08);
  border: 1px solid rgba(255, 190, 90, .3);
}
.reftable-fallback.hidden { display: none; }
.reftable-fb-title { font-size: 12.5px; font-weight: 700; color: #ffd79a; margin-bottom: 6px; }
.reftable-fb-body { font-size: 11.5px; line-height: 1.7; color: var(--text-dim, #9aa7c6); }
.reftable-fb-body b { color: var(--text, #e8ecf7); }
.reftable-zoom {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
  cursor: zoom-out;
  padding: 20px;
}
.reftable-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ------------------------------------------------------------------ */
/* 演示分镜控制条                                                       */
/*   动作在抽屉**外面**的三维视图上一步一停地走，没有这条控制条，学生    */
/*   既不知道演到第几步、这一步在讲什么，也没有「下一步」可按。          */
/* ------------------------------------------------------------------ */
.agent-demo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 12px 6px;
  padding: 9px 11px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(43, 61, 107, .55), rgba(59, 47, 107, .45));
  border: 1px solid rgba(106, 126, 201, .5);
  font-size: 12.5px;
  line-height: 1.5;
  animation: agent-demo-in .16s ease;
}
.agent-demo.hidden { display: none; }
.agent-demo.done { border-color: rgba(85, 194, 255, .45); }
.agent-demo.bad { border-color: rgba(255, 143, 143, .6); }
/* 停在闸门上时给一点脉动，提示"该你点了" */
.agent-demo.manual { border-color: rgba(85, 194, 255, .62); }
.agent-demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.agent-demo-idx {
  color: var(--accent, #55c2ff);
  font-weight: 700;
  white-space: nowrap;
}
.agent-demo-btns { display: flex; gap: 6px; flex: none; }
.agent-btn.sm { font-size: 11.5px; padding: 4px 10px; border-radius: 7px; }
.agent-btn.sm:disabled { opacity: .38; cursor: default; border-color: var(--line, #2a3558); color: var(--text-dim, #9aa7c6); }
.agent-demo-text { color: #e8ecf7; }
.agent-demo-text.muted { color: var(--text-dim, #9aa7c6); font-style: italic; }
.agent-demo-hint {
  padding-top: 4px;
  border-top: 1px dashed rgba(106, 126, 201, .35);
  color: var(--text-dim, #9aa7c6);
  font-size: 12px;
}
.agent-demo-hint.hidden { display: none; }
@keyframes agent-demo-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* 移动端                                                              */
/* ------------------------------------------------------------------ */
/* 消息工具条（复制 / 编辑 / 分支 / 重答）
   只挂在消息节点上、绝对定位在气泡右上；**不新增 DOM 层级包住正文** ——
   beginAssistant 的流式重渲染会整段重写 .agent-text 的 innerHTML，工具条必须挂在
   外层 wrap 上才不会被冲掉。
   ★ 平时用 visibility:hidden 而不是 opacity:0 —— 后者虽然看不见但仍然可点，
     会留下"看不见却能误触"的按钮；而且半透明状态看着像和正文重叠。
     悬停时带**实底**浮现：它会压住底下的文字，但有底板才读得清按钮本身。 */
.agent-msg { position: relative; }
.agent-msg-acts {
  /* ★ 浮在气泡**上方**（消息间距那一带），而不是压在气泡右上角：
     后者会盖住正文末尾——而悬停时用户正在读那句话。有实底 + 悬停才现，
     所以越出一点点到上一条消息的下缘也不影响阅读。 */
  position: absolute; top: -22px; right: 4px; z-index: 2;
  display: flex; gap: 3px;
  /* ★ width:max-content 是必需的：绝对定位元素的 shrink-to-fit 宽度会被**包含块**
     （窄的用户气泡）限死，于是三个按钮被挤成竖排的"复/制"。按钮本身也不许换行。 */
  width: max-content;
  padding: 2px 3px; border-radius: 8px;
  background: rgba(10, 15, 31, .94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  visibility: hidden; opacity: 0; transition: opacity .15s;
}
.agent-msg:hover .agent-msg-acts,
.agent-msg:focus-within .agent-msg-acts { visibility: visible; opacity: 1; }
.agent-msg-acts.busy { pointer-events: none; opacity: .15; }
.agent-act-btn {
  border: 1px solid var(--line, #2a3558); background: rgba(10, 15, 31, .8);
  color: var(--text-dim, #9aa7c6); font: inherit; font-size: 11px;
  padding: 1px 6px; border-radius: 6px; cursor: pointer; line-height: 1.6;
  white-space: nowrap; flex: none;
}
.agent-act-btn:hover { color: var(--accent, #6ea8ff); border-color: var(--accent, #6ea8ff); }
.agent-act-btn.ok { color: #6ee7a8; border-color: #6ee7a8; }
.agent-act-btn.bad { color: #ff9b9b; border-color: #ff9b9b; }
/* 动作气泡里"一步一行"，每行右侧一个「引用」按钮（悬停才现，触屏恒显） */
.agent-act-row { display: flex; align-items: center; gap: 6px; }
.agent-act-row .agent-act-txt { flex: 1; }
.agent-act-row .agent-act-btn { opacity: 0; transition: opacity .15s; flex: none; }
.agent-act-row:hover .agent-act-btn,
.agent-act-row:focus-within .agent-act-btn { opacity: 1; }
.agent-act-ret { margin-top: 6px; opacity: .7; white-space: pre-wrap; }
/* 被校验退回、没进队列的那一步：标出来，免得学生以为"这一步也演过了" */
.agent-act-skip { font-size: 11px; color: #ff9b9b; opacity: .85; flex: none; }
/* 「↻ 重播这个演示」所在的一行：常显（不是悬停才现），它是个功能入口而非编辑动作 */
.agent-act-foot { margin-top: 4px; }
.agent-act-foot .agent-act-btn { opacity: 1; }
/* 没有 hover 的设备（触屏）：没有"悬停出现"这回事，直接常显，并改成气泡末尾一行 ——
   绝对定位在右上会压住正文，而触屏用户没法规避。 */
@media (hover: none) {
  .agent-msg-acts {
    visibility: visible; opacity: 1;
    position: static; justify-content: flex-end; margin-top: 4px;
    background: none; box-shadow: none; padding: 0;
  }
}

/* 分支切换条：只在"真正分叉"的地方出现（懒渲染，多数会话一条都不显示） */
/* 分叉处的分支切换片。
   ★ 原样式是 `分支 1/2 ‹ ›` 独占一行 + 两个箭头，看着像"整段对话的分页器"，
     而且不点开不知道另一条是什么。现在把每条分支的首句直接列出来，当前那条高亮不可点。
   border-left 加重 + 内缩，把这条片与紧随其后的那条消息在视觉上绑成一组。 */
.agent-branch-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin: 2px 0 6px; padding: 3px 6px 3px 8px;
  border-left: 3px solid var(--accent, #6ea8ff);
  font-size: 11px; color: var(--text-dim, #9aa7c6);
}
.agent-branch-label { color: var(--accent, #6ea8ff); font-weight: 700; white-space: nowrap; }
.agent-branch-chip {
  font: inherit; font-size: 11px; line-height: 1.7;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 7px; border-radius: 999px; cursor: pointer;
  color: var(--text-dim, #9aa7c6);
  background: rgba(110, 168, 255, .08);
  border: 1px solid var(--line, #2a3558);
}
.agent-branch-chip:hover { color: var(--accent, #6ea8ff); border-color: var(--accent, #6ea8ff); }
/* 当前显示的那一条：高亮 + 不可点（可点会让人以为"再点一下还有别的"） */
.agent-branch-chip.active {
  color: #0b1020; background: var(--accent, #6ea8ff);
  border-color: var(--accent, #6ea8ff); cursor: default; font-weight: 700;
}
.agent-branch-chip:disabled { opacity: 1; }        /* 别让浏览器把它褪成灰的 */

/* 会话页：抽屉内**绝对定位**的二级页，滑入。
   刻意不动抽屉既有的 flex 列 —— 若改成"包一层 wrapper"，就要处理 min-height:0
   这个经典 flexbox 陷阱；滑入式二级页零风险，而且移动端抽屉本来就是一屏宽。 */
.agent-conv-page {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #101629, #0d1324);
  transform: translateX(100%); transition: transform .2s;
}
.agent-conv-page.show { transform: translateX(0); }
.agent-conv-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line, #2a3558);
}
.agent-conv-title { flex: 1; font-weight: 700; }
.agent-conv-list { flex: 1; overflow-y: auto; min-height: 0; padding: 8px 10px; }
.agent-conv-row {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; min-height: 44px;      /* iOS 触控标准 */
}
.agent-conv-row:hover { background: rgba(110, 168, 255, .08); }
.agent-conv-row.active { border-color: var(--accent, #6ea8ff); background: rgba(110, 168, 255, .10); }
.agent-conv-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-conv-meta { font-size: 11px; color: var(--text-dim, #9aa7c6); white-space: nowrap; }
/* 会话页里的「分支点」清单：全局视角，切分支的唯一答案 */
.agent-conv-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #2a3558); }
.agent-conv-sec-t { font-size: 11px; color: var(--text-dim, #9aa7c6); margin-bottom: 8px; }
/* 收藏的演示（第 11 条）：与会话列表同页，复用 .agent-conv-row 的行样式（含 cursor/hover）。
   ★ 刻意**不带 overflow** —— 滚动交给外层 .agent-conv-list 统一管；若套上它那个
      flex:1 + overflow-y:auto，就会变成"滚动条里再套一条滚动条"。
   行高压紧一点：收藏可能攒好几条，不该把下面的会话列表挤没。 */
.agent-fav-list { display: flex; flex-direction: column; }
.agent-fav-list .agent-conv-row { min-height: 0; padding: 7px 10px; }
.agent-fork {
  padding: 7px 9px; margin-bottom: 7px; border-radius: 9px;
  background: rgba(110, 168, 255, .05);
  border-left: 3px solid var(--accent, #6ea8ff);
}
.agent-fork-at {
  font-size: 11.5px; color: var(--text-dim, #9aa7c6); margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-fork-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-conv-input {
  flex: 1; font: inherit; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--accent, #6ea8ff);
  background: var(--card, #151c33); color: inherit;
}
.agent-conv-foot {
  padding: 8px 12px; border-top: 1px solid var(--line, #2a3558);
  font-size: 11px; color: var(--text-dim, #9aa7c6);
}
/* 长按选择这条路要真的可用（复制失败时提示的正是它） */
.agent-msgs { -webkit-user-select: text; user-select: text; }

/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .agent-drawer { width: 100vw; }
  .agent-fab { width: 46px; height: 46px; right: 12px; bottom: 12px; }
  .agent-fab-icon { font-size: 21px; }
  /* 小屏上把工具条从"绝对定位右上"改成气泡末尾一行，免得压住正文 */
  .agent-msg-acts {
    visibility: visible; opacity: 1;
    position: static; justify-content: flex-end; margin-top: 4px;
    background: none; box-shadow: none; padding: 0;
  }
  .agent-act-btn { min-height: 28px; }
}