/* ==========================================
   aichat-modes.css（v191.7）AI 各模式专用界面
   —— 八个模式不再共用一套聊天骨架，每个模式一套外壳（shell）
       translate 双栏对照 + 常见短语
       code      轻量 IDE（文件 / 编辑器 / 终端 / AI 陪练）
       write     稿纸 + AI 侧栏
       digest    输入卡 + 结果卡
   —— 铁律：滚动链上每层都要 min-height:0（known-issues §27/§45）
   —— 颜色一律走 CSS 变量，不硬编码浅色（深色模式白底白字前车之鉴）
   ========================================== */

/* ---------- 外壳通用 ---------- */
.ac-shell {
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  display: flex;
}
.ac-shell[hidden] { display: none !important; }

/* 代码高亮配色（浅 / 深两套，均保证在 --bg-code 上可读） */
:root {
  --cd-kw: #7c3aed;
  --cd-str: #0a7d55;
  --cd-com: #9097a0;
  --cd-num: #b45309;
  --cd-fn: #1d4ed8;
  --cd-op: #6b7280;
  --cd-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;
}
[data-theme="dark"] {
  --cd-kw: #c792ea;
  --cd-str: #a5e075;
  --cd-com: #616a76;
  --cd-num: #f0a35e;
  --cd-fn: #82aaff;
  --cd-op: #8b95a5;
}

/* 通用小圆角按钮（下拉触发器 / 迷你按钮共用） */
.ac-sel {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-main); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  touch-action: manipulation;
}
.ac-sel:hover { border-color: var(--text-sub); }
.ac-sel-arrow { width: 13px; height: 13px; flex: none; opacity: .6; }
.ac-pop.ac-sel-menu {
  /* 关键：aichat.css 的 .ac-pop 原本是 bottom:calc(100%+8px)（向上弹）。
     这里改成向下弹，必须同时把 bottom 复位成 auto —— 否则 top/bottom 两头夹住，
     高度会塌陷成只剩 padding（下拉变成一条 12px 的细线，看起来就是"被挡住"）。 */
  position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; right: auto; z-index: 60;
  min-width: 172px; max-height: 320px; overflow-y: auto;
  background: var(--bg-modal, var(--bg-card)); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  display: block;
}
.ac-pop.ac-sel-menu[hidden] { display: none; }
/* v191.9：语气下拉在面板最底部，向下弹会超出容器被裁掉 —— 这一颗改成向上弹 */
.tr-tone .ac-pop.ac-sel-menu { top: auto; bottom: calc(100% + 6px); }

.tr-mini {
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease;
}
.tr-mini:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.cd-mini {
  border: none; background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  padding: 5px 7px; border-radius: 6px; touch-action: manipulation;
}
.cd-mini:hover { color: var(--text-main); background: var(--bg-hover-tint); }

/* ============================================================
   一、AI 翻译：左输入 / 右译文 + 右侧常见短语
   ============================================================ */
.ac-shell-tr { gap: 0; }
.tr-main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.tr-langs {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 22px 10px; flex-wrap: wrap;
}
.tr-lang { position: relative; }
.tr-swap {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-sub);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s ease, color .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.tr-swap svg { width: 16px; height: 16px; }
.tr-swap:hover { color: var(--text-main); border-color: var(--text-sub); transform: rotate(180deg); }
.tr-status { font-size: 12px; color: var(--text-faint); margin-left: auto; }

.tr-panes {
  flex: 1; min-height: 0; display: flex;
  border-top: 1px solid var(--border);
}
.tr-pane {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; padding: 16px 22px 14px;
}
.tr-pane-out { border-left: 1px solid var(--border); }
.tr-pane-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; min-height: 30px;
}
.tr-pane-title {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--text-main);
}
.tr-pane-tools { display: flex; align-items: center; gap: 2px; }
.tr-src {
  flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
  border: none; outline: none; resize: none; background: transparent;
  color: var(--text-main); font-family: inherit; font-size: 15.5px; line-height: 1.75;
  padding: 4px 0;
}
.tr-src::placeholder { color: var(--text-placeholder, var(--text-faint)); }
.tr-out {
  flex: 1; min-height: 0; overflow-y: auto;
  font-size: 15.5px; line-height: 1.75; color: var(--text-main);
  overflow-wrap: anywhere; padding: 4px 0;
}
.tr-out .tr-ph { color: var(--text-faint); font-size: 13.5px; line-height: 1.8; }
.tr-out .tr-err { color: #e5484d; font-size: 13.5px; line-height: 1.8; }
.tr-out p { margin: 0 0 .7em; }
.tr-out ul, .tr-out ol { margin: .4em 0 .8em; padding-left: 20px; }
.tr-pane-foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border);
}
.tr-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  touch-action: manipulation; transition: color .15s ease, border-color .15s ease;
}
.tr-ico svg { width: 16px; height: 16px; }
.tr-ico:hover { color: var(--text-main); border-color: var(--text-sub); }
.tr-ico.rec { color: #e5484d; border-color: #e5484d; animation: trPulse 1.1s infinite; }
@keyframes trPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tr-count { font-size: 12px; color: var(--text-faint); }
.tr-tone { margin-left: auto; }

/* 右侧：常见短语 */
.tr-phrases {
  width: 300px; flex: none;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  padding: 16px 0 0;
}
.tr-ph-head {
  flex: none; font-size: 14px; font-weight: 700; color: var(--text-main);
  padding: 0 18px 12px; display: flex; align-items: baseline; gap: 8px;
}
.tr-ph-from { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.tr-ph-cats {
  flex: none; display: flex; gap: 6px; overflow-x: auto;
  padding: 0 18px 10px; scrollbar-width: none;
}
.tr-ph-cats::-webkit-scrollbar { display: none; }
.tr-ph-cat {
  flex: none; border: 1px solid transparent; background: transparent;
  color: var(--text-sub); font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  touch-action: manipulation; transition: background-color .15s ease, color .15s ease;
}
.tr-ph-cat:hover { color: var(--text-main); background: var(--bg-hover-tint); }
.tr-ph-cat.on { background: var(--bg-hover-strong); color: var(--text-main); }
.tr-ph-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 10px 16px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start;
}
.tr-ph-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: 8px; cursor: pointer; text-align: left;
  border: none; background: transparent; font-family: inherit;
  transition: background-color .15s ease;
}
.tr-ph-item:hover { background: var(--bg-hover-tint); }
.tr-ph-spk { flex: none; width: 15px; height: 15px; color: var(--text-faint); }
.tr-ph-text { min-width: 0; }
.tr-ph-foreign {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-ph-native {
  display: block; font-size: 11.5px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   二、AI 编程陪练：文件 / 编辑器 / 终端 / AI 陪练
   ============================================================ */
.ac-shell-cd { gap: 0; }
.cd-files {
  width: 196px; flex: none; min-height: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 10px 10px;
}
.cd-files-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 10px;
}
.cd-files-title { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.cd-file-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cd-file {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; color: var(--text-sub); position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.cd-file:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.cd-file.on { background: var(--bg-hover-strong); color: var(--text-main); font-weight: 600; }
.cd-file-ico { flex: none; width: 13px; height: 13px; opacity: .7; }
.cd-file-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-file-del {
  flex: none; border: none; background: transparent; color: var(--text-faint);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 4px;
  display: none;
}
.cd-file:hover .cd-file-del { display: block; }
.cd-file-del:hover { color: #e5484d; }
.cd-files-foot { flex: none; font-size: 10.5px; color: var(--text-faint); padding: 10px 6px 2px; }

.cd-editor-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cd-head {
  flex: none; height: 50px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 1px solid var(--border);
}
.cd-file-name { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.cd-dirty { font-size: 11px; color: var(--text-faint); }
.cd-head-space { flex: 1; }
.cd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.cd-btn:hover { color: var(--text-main); border-color: var(--text-sub); background: var(--bg-hover-tint); }
.cd-btn svg { width: 12px; height: 12px; }
.cd-btn.cd-run { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }
.cd-btn.cd-run:hover { opacity: .86; color: var(--bg-card); background: var(--text-main); }

.cd-editor {
  flex: 1; min-height: 0; display: flex;
  background: var(--bg-code); position: relative; overflow: hidden;
}
.cd-gutter {
  flex: none; width: 56px; padding: 14px 10px 14px 0; text-align: right;
  font: 13px/1.65 var(--cd-mono); color: var(--text-faint);
  overflow: hidden; user-select: none;
  border-right: 1px solid var(--border);
}
.cd-code-wrap { flex: 1; min-width: 0; min-height: 0; position: relative; }
.cd-hl, .cd-ta {
  position: absolute; inset: 0; margin: 0; box-sizing: border-box;
  padding: 14px 16px; border: none;
  font: 13px/1.65 var(--cd-mono); white-space: pre; tab-size: 4;
}
.cd-hl { z-index: 1; overflow: hidden; pointer-events: none; color: var(--text-main); will-change: transform; }
.cd-ta {
  z-index: 2; overflow: auto; resize: none; outline: none;
  background: transparent; color: transparent; caret-color: var(--text-main);
}
.cd-ta::selection { background: rgba(127, 127, 127, .3); }
.tk-kw { color: var(--cd-kw); }
.tk-str { color: var(--cd-str); }
.tk-com { color: var(--cd-com); font-style: italic; }
.tk-num { color: var(--cd-num); }
.tk-fn { color: var(--cd-fn); }
.tk-op { color: var(--cd-op); }

.cd-term {
  flex: none; max-height: 42%; min-height: 120px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border); background: var(--bg-code);
}
.cd-term-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px 16px; font-size: 12px; font-weight: 700; color: var(--text-sub);
  border-bottom: 1px solid var(--border);
}
.cd-term-right { display: flex; align-items: center; gap: 2px; }
.cd-term-body {
  flex: 1; min-height: 0; overflow: auto; margin: 0;
  padding: 10px 16px 14px; font: 12.5px/1.7 var(--cd-mono);
  color: var(--text-main); white-space: pre-wrap; overflow-wrap: anywhere;
}
.cd-term-body .tm-err { color: #e5484d; }
.cd-term-body .tm-dim { color: var(--text-faint); }
.cd-term-body .tm-ok { color: var(--cd-str); }

.cd-ai {
  width: 340px; flex: none; min-height: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
}
.cd-ai[hidden] { display: none; }
.cd-ai-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 12px 18px; font-size: 13.5px; font-weight: 700; color: var(--text-main);
  border-bottom: 1px solid var(--border);
}
.cd-ai-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.cd-ai-input {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 12px; border-top: 1px solid var(--border);
}
.cd-ai-input textarea {
  flex: 1; min-width: 0; max-height: 140px; resize: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13px; line-height: 1.6; padding: 8px 10px;
  outline: none;
}
.cd-ai-input textarea:focus { border-color: var(--accent); }
.cd-send {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: none; background: var(--text-main); color: var(--bg-card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, transform .15s ease; touch-action: manipulation;
}
.cd-send svg { width: 15px; height: 15px; }
.cd-send:hover { opacity: .86; transform: translateY(-1px); }
.cd-send:disabled { opacity: .4; cursor: default; transform: none; }

/* 侧栏里的对话气泡（编程 / 写作共用，风格与主聊天一致） */
.sd-msg { display: flex; }
.sd-msg.sd-me { justify-content: flex-end; }
.sd-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; min-width: 0;
}
.sd-me .sd-bubble {
  background: var(--text-main); color: var(--bg-card);
  border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.sd-bot .sd-bubble {
  /* v191.8：AI 回复不再套灰底气泡，回归「纯文本」（与主聊天页一致），只留排版 */
  max-width: 100%; padding: 0; border-radius: 0;
  background: transparent; color: var(--text-main);
}
.sd-bot .sd-bubble > *:first-child { margin-top: 0; }
.sd-bot .sd-bubble h1, .sd-bot .sd-bubble h2,
.sd-bot .sd-bubble h3, .sd-bot .sd-bubble h4 {
  font-size: 13.5px; font-weight: 700; margin: 12px 0 6px; color: var(--text-main);
}
.sd-bot .sd-bubble ul, .sd-bot .sd-bubble ol { margin: .4em 0; padding-left: 18px; }
.sd-bot .sd-bubble li { margin: 3px 0; }
.sd-bot .sd-bubble p { margin: 0 0 .7em; }
.sd-bot .sd-bubble blockquote {
  margin: .5em 0; padding: 3px 12px; border-left: 3px solid var(--border); color: var(--text-sub);
}
.sd-bot .sd-bubble table { border-collapse: collapse; margin: .5em 0; width: 100%; }
.sd-bot .sd-bubble th, .sd-bot .sd-bubble td {
  border: 1px solid var(--border); padding: 4px 8px; font-size: 12px; text-align: left;
}
.sd-bot .sd-bubble hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.sd-bot .sd-bubble a { color: var(--accent); }
.sd-bot .sd-bubble pre {
  background: var(--bg-code); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; overflow-x: auto;
  font: 12px/1.6 var(--cd-mono); margin: 8px 0;
}
.sd-bot .sd-bubble code {
  font-family: var(--cd-mono); font-size: .93em;
  background: var(--inline-code-tint, rgba(127,127,127,.14));
  border-radius: 4px; padding: 1px 4px;
}
.sd-bot .sd-bubble pre code { background: transparent; padding: 0; }
.sd-msg-tools { display: flex; gap: 2px; margin-top: 6px; }
.sd-mini {
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 11px; padding: 2px 7px; border-radius: 5px; cursor: pointer;
}
.sd-mini:hover { color: var(--text-main); background: var(--bg-hover-tint); }
.sd-typing::after {
  content: "…"; color: var(--text-faint); animation: sdDots 1.2s infinite;
}
@keyframes sdDots { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ============================================================
   三、AI 写作：稿纸 + AI 侧栏
   ============================================================ */
.ac-shell-wr { gap: 0; }
.wr-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.wr-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 18px 24px 10px;
}
.wr-title {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 19px; font-weight: 700; color: var(--text-main);
}
.wr-title::placeholder { color: var(--text-placeholder, var(--text-faint)); }
.wr-count { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.wr-btn {
  flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: var(--radius-sm); cursor: pointer;
  touch-action: manipulation; transition: color .15s ease, border-color .15s ease;
}
.wr-btn:hover { color: var(--text-main); border-color: var(--text-sub); }
.wr-paper {
  flex: 1; min-height: 0; border: none; outline: none; resize: none; background: transparent;
  padding: 6px 24px 20px; font-family: inherit; font-size: 15px; line-height: 1.95;
  color: var(--text-main);
}
.wr-paper::placeholder { color: var(--text-placeholder, var(--text-faint)); }
.wr-tools {
  flex: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 24px 16px; border-top: 1px solid var(--border);
}
.wr-chip {
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.wr-chip:hover { color: var(--text-main); border-color: var(--text-sub); background: var(--bg-hover-tint); }
.wr-chip-ghost { color: var(--text-faint); border-style: dashed; }
.wr-ai {
  width: 340px; flex: none; min-height: 0;
  display: flex; flex-direction: column; border-left: 1px solid var(--border);
}
.wr-ai-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 12px 18px; font-size: 13.5px; font-weight: 700; color: var(--text-main);
  border-bottom: 1px solid var(--border);
}
.wr-ai-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.wr-ai-input {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 12px; border-top: 1px solid var(--border);
}
.wr-ai-input textarea {
  flex: 1; min-width: 0; max-height: 140px; resize: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13px; line-height: 1.6; padding: 8px 10px; outline: none;
}
.wr-ai-input textarea:focus { border-color: var(--accent); }

/* ============================================================
   四、AI 摘要：输入卡 + 结果卡
   ============================================================ */
.ac-shell-dg { flex-direction: column; overflow: hidden; }
.dg-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.dg-card {
  width: 100%; max-width: 880px; margin: 0 auto; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); display: flex; flex-direction: column; overflow: hidden;
}
.dg-card-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.dg-card-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.dg-card-tools { display: flex; align-items: center; gap: 2px; }
.dg-src {
  border: none; outline: none; resize: vertical; background: transparent;
  min-height: 200px; height: 30vh; max-height: 46vh;
  padding: 14px 18px; font-family: inherit; font-size: 14px; line-height: 1.8;
  color: var(--text-main); box-sizing: border-box; width: 100%;
}
.dg-src::placeholder { color: var(--text-placeholder, var(--text-faint)); }
.dg-card-foot {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.dg-stat { font-size: 12px; color: var(--text-faint); }
.dg-len { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.dg-len-opt {
  border: none; background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease;
}
.dg-len-opt:hover { color: var(--text-main); }
.dg-len-opt.on { background: var(--bg-hover-strong); color: var(--text-main); }
.dg-foot-space { flex: 1; }
.dg-go {
  border: none; background: var(--text-main); color: var(--bg-card);
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer;
  transition: opacity .15s ease; touch-action: manipulation;
}
.dg-go:hover { opacity: .86; }
.dg-go:disabled { opacity: .5; cursor: default; }
.dg-result { padding: 4px 18px 18px; font-size: 14px; line-height: 1.8; color: var(--text-main); }
.dg-result h1, .dg-result h2, .dg-result h3, .dg-result h4 {
  margin: 16px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text-main);
}
.dg-result h1:first-child, .dg-result h2:first-child, .dg-result h3:first-child { margin-top: 4px; }
.dg-result ul, .dg-result ol { margin: .5em 0; padding-left: 22px; }
.dg-result li { margin: 4px 0; }
.dg-result p { margin: 0 0 .7em; }
.dg-result hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.dg-result blockquote {
  margin: .6em 0; padding: 6px 14px; border-left: 3px solid var(--border);
  color: var(--text-sub);
}
.dg-result pre {
  background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 13px; overflow-x: auto; font: 12.5px/1.65 var(--cd-mono); margin: 8px 0;
}
.dg-result code {
  font-family: var(--cd-mono); font-size: .93em;
  background: var(--inline-code-tint, rgba(127,127,127,.14));
  border-radius: 4px; padding: 1px 4px;
}
.dg-result pre code { background: transparent; padding: 0; }
.dg-result table { border-collapse: collapse; margin: .6em 0; width: 100%; }
.dg-result th, .dg-result td {
  border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; text-align: left;
}
.dg-loading { color: var(--text-faint); font-size: 13px; }

/* ============================================================
   五、响应式（≤980 / ≤780）
   ============================================================ */
@media (max-width: 980px) {
  .tr-phrases { width: 240px; }
  .cd-ai, .wr-ai { width: 290px; }
  .cd-files { width: 168px; }
}
@media (max-width: 780px) {
  /* 翻译：短语栏与译文竖排，短语栏缩成横向滚动条 */
  .ac-shell-tr { flex-direction: column; }
  .tr-phrases {
    width: auto; flex: none; max-height: 42%;
    border-left: none; border-top: 1px solid var(--border); padding-top: 12px;
  }
  .tr-ph-list { grid-template-columns: 1fr; padding-right: 18px; }
  .tr-panes { flex-direction: column; }
  .tr-pane-out { border-left: none; border-top: 1px solid var(--border); }
  .tr-langs { padding: 12px 14px 8px; }
  .tr-pane { padding: 12px 14px; }
  .tr-pane-title { font-size: 18px; }

  /* 编程：文件栏收起，AI 侧栏变覆盖层 */
  .cd-files { display: none; }
  .cd-ai {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 40;
    width: min(320px, 88vw);
    background: var(--bg-card);
    box-shadow: -14px 0 30px rgba(0, 0, 0, .2);
  }
  .ac-shell-cd { position: relative; }
  .cd-head { height: 46px; padding: 0 10px; gap: 6px; }

  /* 写作：AI 侧栏变覆盖层 */
  .ac-shell-wr { position: relative; }
  .wr-ai {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 40;
    width: min(320px, 88vw); background: var(--bg-card);
    box-shadow: -14px 0 30px rgba(0, 0, 0, .2);
  }
  .wr-paper { padding: 6px 16px 16px; }
  .wr-head { padding: 14px 16px 8px; }
  .wr-tools { padding: 10px 16px 14px; }

  /* 摘要 */
  .dg-wrap { padding: 14px; }
}

/* ---------- 动效兜底（铁律：reduced-motion / 界面动效开关） ---------- */
@media (prefers-reduced-motion: reduce) {
  .tr-swap, .tr-ico, .cd-send, .ac-sel, .dg-go { transition: none; }
  .tr-ico.rec { animation: none; }
  .sd-typing::after { animation: none; }
}
html[data-motion="off"] .tr-swap,
html[data-motion="off"] .tr-ico,
html[data-motion="off"] .cd-send,
html[data-motion="off"] .ac-sel,
html[data-motion="off"] .dg-go { transition-duration: .001s !important; }
html[data-motion="off"] .tr-swap:hover { transform: none; }
html[data-motion="off"] .tr-ico.rec,
html[data-motion="off"] .sd-typing::after { animation: none; }


/* ============================================================
   六、补件：新建文件行内输入 + 居中二次确认 + 细滚动条
   ============================================================ */
.cd-file-new {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 12.5px; padding: 5px 8px; outline: none;
}

.am-cf-mask {
  position: fixed; inset: 0; z-index: 320; background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.am-cf-mask.on { opacity: 1; pointer-events: auto; }
.am-cf {
  width: 300px; max-width: calc(100vw - 40px);
  background: var(--bg-modal, var(--bg-card)); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-sizing: border-box;
  transform: translateY(8px); transition: transform .18s ease;
}
.am-cf-mask.on .am-cf { transform: none; }
.am-cf-title { display: block; font-size: 14px; color: var(--text-main); line-height: 1.6; }
.am-cf-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.am-cf-no, .am-cf-ok {
  padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  color: var(--text-main); font-family: inherit; touch-action: manipulation;
}
.am-cf-ok { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.am-cf-ok:hover { filter: brightness(.94); }

.cd-ta::-webkit-scrollbar, .cd-term-body::-webkit-scrollbar,
.cd-ai-log::-webkit-scrollbar, .wr-ai-log::-webkit-scrollbar { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) {
  .am-cf-mask, .am-cf { transition: none; }
}
html[data-motion="off"] .am-cf-mask,
html[data-motion="off"] .am-cf { transition-duration: .001s !important; }


/* ============================================================
   七、v191.8 补件：返回按钮 / 工具调用卡 / AI 学习辅导
   ============================================================ */

/* ---------- 模式页「返回 AI Chat」 ---------- */
.am-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-sub);
  text-decoration: none; white-space: nowrap;
  padding: 6px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  touch-action: manipulation;
}
.am-back:hover { color: var(--text-main); border-color: var(--text-sub); background: var(--bg-hover-tint); }
.am-back svg { width: 13px; height: 13px; flex: none; }
.tr-langs .am-back { margin-right: 2px; }
.dg-topbar { flex: none; padding: 16px 22px 0; }

/* ---------- 工具调用卡（AI 请求执行操作，必须用户点「允许」） ---------- */
.sd-tool {
  margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-code); overflow: hidden;
}
.sd-tool-head {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-main);
}
.sd-tool-ico { flex: none; width: 14px; height: 14px; color: var(--accent); }
.sd-tool-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--cd-str); white-space: nowrap; letter-spacing: .01em;
}
.sd-tool-body {
  padding: 0 12px 10px; font: 11.5px/1.6 var(--cd-mono); color: var(--text-sub);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 150px; overflow-y: auto;
}
.sd-tool-ops { display: flex; gap: 8px; padding: 0 12px 11px; }
.sd-tool-ok, .sd-tool-no {
  border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 13px; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--border); background: transparent; color: var(--text-main);
}
.sd-tool-ok { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }
.sd-tool-ok:hover { opacity: .86; }
.sd-tool-no:hover { border-color: var(--text-sub); }
.sd-tool.done { opacity: .7; }
.sd-tool.done .sd-tool-ops { display: none; }
.sd-tool-res {
  padding: 8px 12px; border-top: 1px solid var(--border);
  font: 11.5px/1.6 var(--cd-mono); color: var(--text-sub);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto;
}
.sd-tool-res.err { color: #e5484d; }

/* ---------- AI 学习辅导 ---------- */
.ac-shell-st { gap: 0; }
.st-side {
  width: 230px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 10px 10px;
}
.st-side-top { flex: none; padding: 0 4px 10px; }
.st-group {
  flex: none; font-size: 11px; font-weight: 700; color: var(--text-faint);
  padding: 10px 8px 4px; letter-spacing: .02em;
}
.st-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.st-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--text-sub);
  padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.st-item:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.st-item.on { background: var(--bg-hover-strong); color: var(--text-main); font-weight: 600; }
.st-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.st-head {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.st-who { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }
.st-task {
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.st-task:hover { color: var(--text-main); border-color: var(--text-sub); }
.st-task.on { background: var(--bg-hover-strong); color: var(--text-main); border-color: transparent; }
.st-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.st-hint { font-size: 12px; color: var(--text-faint); line-height: 1.95; }
.st-input {
  flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 18px 16px; border-top: 1px solid var(--border);
}
.st-input textarea {
  flex: 1; min-width: 0; max-height: 180px; resize: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13.5px; line-height: 1.65; padding: 10px 12px; outline: none;
}
.st-input textarea:focus { border-color: var(--accent); }
.st-clear { margin-left: auto; }

@media (max-width: 980px) { .st-side { width: 190px; } }
@media (max-width: 780px) {
  .ac-shell-st { flex-direction: column; }
  .st-side {
    width: auto; flex: none; flex-direction: row; align-items: center; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px 10px; min-height: 0;
  }
  .st-side-top { padding: 0 6px 0 0; }
  .st-list { flex: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; }
  .st-group { display: none; }
  .st-item { white-space: nowrap; }
  .st-log { padding: 14px; }
  .st-head { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .am-back, .st-item, .st-task, .sd-tool-ok { transition: none; }
}
html[data-motion="off"] .am-back,
html[data-motion="off"] .st-item,
html[data-motion="off"] .st-task,
html[data-motion="off"] .sd-tool-ok { transition-duration: .001s !important; }


/* ---------- 「AI 正在发送请求…」等待提示（v191.11） ---------- */
.sd-tool-wait {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-size: 12px; color: var(--text-faint);
}
.sd-spin {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: sdSpin .7s linear infinite;
}
@keyframes sdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sd-spin { animation: none; } }
html[data-motion="off"] .sd-spin { animation: none; }


/* ============================================================
   八、v191.12：主文件徽标 / 终端输入行 / 情景模式
   ============================================================ */


/* ---------- 终端输入行 ---------- */
.cd-term-in {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 9px 16px; border-top: 1px solid var(--border);
  background: var(--bg-code);
}
.cd-term-ps { flex: none; font: 12.5px/1 var(--cd-mono); color: var(--accent); }
.cd-term-in-t {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: 12.5px/1.7 var(--cd-mono); color: var(--text-main); padding: 2px 0;
}
.cd-term-in-t::placeholder { color: var(--text-faint); }
.cd-term-body .tm-in { color: var(--text-sub); }
.cd-term-body .tm-res { color: var(--cd-num); }
.cd-term-body .tm-ai { color: var(--accent); }

/* ---------- 情景模式 ---------- */
.ac-shell-sc { gap: 0; }
.sc-side {
  width: 244px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 10px 10px;
}
.sc-side-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 0 4px 10px;
}
.sc-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sc-group {
  flex: none; font-size: 11px; font-weight: 700; color: var(--text-faint);
  padding: 10px 8px 4px; letter-spacing: .02em;
}
.sc-item {
  position: relative; display: block; width: 100%; text-align: left; border: none;
  background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-sub);
  padding: 7px 26px 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sc-item:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.sc-item.on { background: var(--bg-hover-strong); color: var(--text-main); font-weight: 600; }
.sc-item-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item-s {
  /* v191.12：次要行用 --text-sub（--text-faint 在深色下对比度偏低，细小文字读起来吃力） */
  display: block; font-size: 10.5px; color: var(--text-sub); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-item-del {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--text-sub); cursor: pointer;
  padding: 2px 4px; border-radius: 4px; opacity: .35; font-size: 12px; line-height: 1;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}
.sc-item:hover .sc-item-del, .sc-item.on .sc-item-del { opacity: 1; }
.sc-item-del:hover { color: #e5484d; background: rgba(229, 72, 77, .1); }

.sc-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sc-head {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.sc-name {
  font-size: 14px; font-weight: 700; color: var(--text-main); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
.sc-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sc-space { width: 4px; }
.sc-sel { position: relative; display: inline-flex; }
.sc-tool {
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: 999px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sc-tool:hover { color: var(--text-main); border-color: var(--text-sub); }
.sc-tool.on { background: var(--bg-hover-strong); color: var(--text-main); border-color: transparent; }
.sc-go { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }
.sc-go:hover { opacity: .88; color: var(--bg-card); border-color: var(--text-main); }
/* 顶栏的下拉往左下弹（右上角放不下时也不会被裁） */
.sc-sel .ac-pop.ac-sel-menu { left: auto; right: 0; }

.sc-brief {
  flex: none; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  max-height: 32%; overflow-y: auto;
}
.sc-brief-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.7; }
.sc-brief-k { flex: none; width: 62px; color: var(--text-faint); }
.sc-brief-v { flex: 1; min-width: 0; color: var(--text-main); overflow-wrap: anywhere; }
.sc-start { align-self: flex-start; margin-top: 10px; }
/* v191.17：情景信息（背景/你演/AI演/目标/结束条件）可折叠，动画与侧栏分类折叠同一套 grid 方案 */
.sc-info-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px; margin: -2px 0 1px -6px; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--text-faint); cursor: pointer;
  border-radius: 6px; transition: color .18s ease, background .18s ease;
}
.sc-info-btn:hover { color: var(--text-main); background: var(--hover, rgba(128,128,128,.12)); }
.sc-info-btn .sc-info-ar { display: inline-block; font-size: 10px; transition: transform .22s ease; }
.sc-info-btn.off .sc-info-ar { transform: rotate(-90deg); }
.sc-info {
  flex: none; display: grid; grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.sc-info-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
/* 收起后延迟 0.28s 再隐藏，动画能完整播完；展开时立刻可见 */
.sc-info.fold {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, visibility 0s linear .28s;
}

.sc-log {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 20px;
}
.sc-log .sd-bot .sd-bubble { background: transparent; padding: 0; border-radius: 0; max-width: 100%; }
.sc-role { display: block; font-size: 10.5px; color: var(--text-faint); margin-bottom: 3px; }
.sc-hint {
  margin: 9px 0 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-main); background: var(--bg-hover-tint);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sc-hint b { display: block; font-size: 11.5px; color: var(--accent); margin-bottom: 2px; }
.sc-report {
  margin: 9px 0 0; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-code);
}
.sc-r-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sc-r-score { flex: none; font-size: 30px; font-weight: 800; line-height: 1; color: var(--accent); }
.sc-r-sum { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-sub); }
.sc-dim { margin: 9px 0 0; }
.sc-dim-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-main); margin-bottom: 4px;
}
.sc-dim-note { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.sc-bar { height: 6px; border-radius: 999px; background: var(--bg-hover-strong); overflow: hidden; }
.sc-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.sc-list2 { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.75; color: var(--text-main); }
.sc-list2 b { color: var(--text-main); }
.sc-next {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--text-main);
}

.sc-input {
  flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 18px 16px; border-top: 1px solid var(--border);
}
.sc-input textarea {
  flex: 1; min-width: 0; max-height: 180px; resize: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13.5px; line-height: 1.65; padding: 10px 12px; outline: none;
}
.sc-input textarea:focus { border-color: var(--accent); }

/* ---------- 新建情景对话框 ---------- */
.sc-dlg-mask {
  position: fixed; inset: 0; z-index: 320; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  box-sizing: border-box; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.sc-dlg-mask.on { opacity: 1; pointer-events: auto; }
.sc-dlg {
  width: 540px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--bg-modal, var(--bg-card)); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; box-sizing: border-box;
  transform: translateY(8px); transition: transform .18s ease;
}
.sc-dlg-mask.on .sc-dlg { transform: none; }
.sc-dlg h4 { margin: 0 0 4px; font-size: 15px; color: var(--text-main); }
.sc-dlg-sub { margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: var(--text-faint); }
.sc-field { margin-bottom: 10px; }
.sc-field label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 5px; }
.sc-field input, .sc-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-input, transparent);
  color: var(--text-main); font-family: inherit; font-size: 13px; line-height: 1.6;
  padding: 8px 10px; outline: none; resize: vertical;
}
.sc-field input:focus, .sc-field textarea:focus { border-color: var(--accent); }
.sc-gen { display: flex; gap: 8px; margin-bottom: 14px; }
.sc-gen input {
  flex: 1; min-width: 0; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13px; padding: 8px 10px; outline: none;
}
.sc-dlg-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.sc-btn {
  padding: 8px 16px; border-radius: 9px; font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--border); background: transparent; color: var(--text-main);
}
.sc-btn.pri { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }
.sc-btn:hover { opacity: .88; }
.sc-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 980px) { .sc-side { width: 200px; } }
@media (max-width: 780px) {
  .ac-shell-sc { flex-direction: column; }
  .sc-side {
    width: auto; flex: none; flex-direction: row; align-items: center; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px;
  }
  .sc-side-top { padding: 0 6px 0 0; }
  .sc-side-foot { display: none; }
  /* v191.12：手机上情景列表是横排。这里必须给死高度 + 居中对齐 ——
     否则 flex 行会把每个 item 纵向拉伸到容器高度（实测 236px 高的「胶囊」）。 */
  .sc-list { flex: 0 0 auto; height: 40px; align-items: center; flex-direction: row;
    overflow-x: auto; overflow-y: hidden; gap: 6px; }
  .sc-group { display: none; }
  .sc-item {
    width: auto; flex: none; height: 30px; box-sizing: border-box;
    display: inline-flex; align-items: center; white-space: nowrap; padding: 0 22px 0 9px;
  }
  .sc-item-t { max-width: 46vw; }
  .sc-item-s { display: none; }
  .sc-head { padding: 9px 12px; gap: 6px; }
  .sc-name { max-width: 100%; }
  .sc-tools { margin-left: 0; width: 100%; }
  .sc-brief { padding: 10px 12px; max-height: 30%; }
  .sc-brief-k { width: 54px; }
  .sc-log { padding: 14px; }
  .sc-input { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-dlg-mask, .sc-dlg, .sc-item, .sc-tool, .sc-item-del { transition: none; }
}
html[data-motion="off"] .sc-dlg-mask,
html[data-motion="off"] .sc-dlg,
html[data-motion="off"] .sc-item,
html[data-motion="off"] .sc-tool,
html[data-motion="off"] .sc-item-del { transition-duration: .001s !important; }


/* ============================================================
   九、v191.13：AI 面板范围标注 / 情景模式新玩法（轮次·旁白·随机·接话·渐入）
   ============================================================ */

/* 编程页：AI 面板标题旁标出「围绕 xxx」 */
.cd-scope { margin-left: 6px; font-size: 10.5px; font-weight: 400; color: var(--text-faint); }

/* 情景模式：轮次 */
.sc-round { flex: none; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* 情景模式：消息渐入（只让最新一条渐入，避免整屏重放的闪烁） */
@keyframes scIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.sc-log .sd-msg:last-child { animation: scIn .26s ease-out both; }
/* 流式期间写进去的是纯文本，用 pre-wrap 保住换行 */
.sc-body.sc-stream { white-space: pre-wrap; }

/* 情景模式：底部输入行左侧的「帮我接话」 */
.sc-assist { flex: none; font-size: 12px; padding: 9px 12px; }
.sc-assist:disabled { opacity: .5; cursor: default; }

/* 情景模式：AI 给的几句「可以这样说」 */
.sc-ask { flex: none; padding: 12px 18px 0; }
.sc-ask-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 7px; font-size: 11.5px; color: var(--text-faint);
}
.sc-ask-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.sc-ask-chip {
  text-align: left; font-family: inherit; font-size: 12.5px; line-height: 1.6;
  color: var(--text-main); background: var(--bg-hover-tint);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease;
}
.sc-ask-chip:hover { border-color: var(--accent); }
.sc-mini-btn {
  flex: none; border: none; background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 7px;
  border-radius: 5px; transition: color .15s ease, background-color .15s ease;
}
.sc-mini-btn:hover { color: var(--text-main); background: var(--bg-hover-tint); }

@media (max-width: 780px) {
  /* 顶栏工具多，手机上改成一行可横向滑动，别堆成三行 */
  .sc-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
  .sc-tool { flex: none; }
  .sc-assist { padding: 8px 10px; }
  .sc-ask { padding: 10px 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-log .sd-msg:last-child { animation: none; }
  .sc-ask-chip, .sc-mini-btn { transition: none; }
}
html[data-motion="off"] .sc-log .sd-msg:last-child { animation: none; }
html[data-motion="off"] .sc-ask-chip,
html[data-motion="off"] .sc-mini-btn { transition-duration: .001s !important; }


/* ============================================================
   十、v191.14：情景分类折叠 / 新建情景随机与灵感词 / 点评兜底
   ============================================================ */

/* 分类标题变可点按钮（▾ 展开 / ▸ 收起 + 条数角标） */
.sc-group-btn {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit;
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  padding: 10px 8px 4px; letter-spacing: .02em; cursor: pointer;
  touch-action: manipulation; border-radius: var(--radius-sm);
  transition: color .15s ease, background-color .15s ease;
}
.sc-group-btn:hover { color: var(--text-main); background: var(--bg-hover-tint); }
.sc-group-btn .sc-group-ar { flex: none; width: 10px; font-size: 9px; opacity: .85; }
.sc-group-btn .sc-group-t { flex: 1; min-width: 0; }
.sc-group-btn .sc-group-n {
  flex: none; font-size: 10px; font-weight: 600; color: var(--text-sub);
  background: var(--bg-hover-strong); border-radius: 999px; padding: 1px 6px;
}
.sc-group-btn.off { opacity: .82; }

/* 折叠动画：grid 1fr → 0fr，内容多高都不用 JS 算高度 */
.sc-cat {
  flex: none; display: grid; grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.sc-cat-in {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* 收起后延迟 0.28s 再隐藏，这样动画能完整播完；展开时立刻可见 */
.sc-cat.fold {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, visibility 0s linear .28s;
}
.sc-group-btn .sc-group-ar { display: inline-block; transition: transform .22s ease; }
.sc-group-btn.off .sc-group-ar { transform: rotate(-90deg); }

/* 新建情景：🎲 随机按钮 + 灵感词 */
.sc-gen2 { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; flex-wrap: wrap; }
.sc-btn.rand { border-color: var(--accent); color: var(--accent); }
.sc-gen-tip { font-size: 11px; color: var(--text-faint); }
.sc-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-idea {
  border: 1px dashed var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation;
  transition: border-color .15s ease, color .15s ease;
}
.sc-idea:hover { border-color: var(--accent); color: var(--accent); }

/* 点评解析不出来时的兜底（原文折叠起来，不糊一屏） */
.sc-r-warn { font-size: 12.5px; line-height: 1.7; color: var(--text-sub); }
.sc-r-raw { margin-top: 10px; }
.sc-r-raw > summary { font-size: 11.5px; color: var(--text-faint); cursor: pointer; }
.sc-r-raw > *:not(summary) { margin-top: 8px; font-size: 12px; color: var(--text-sub); }

@media (max-width: 780px) {
  .sc-gen2 { gap: 8px; }
  .sc-idea { font-size: 11px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-group-btn, .sc-idea, .sc-cat, .sc-info, .sc-group-btn .sc-group-ar, .sc-info-btn .sc-info-ar { transition: none; }
}
html[data-motion="off"] .sc-group-btn,
html[data-motion="off"] .sc-idea,
html[data-motion="off"] .sc-cat,
html[data-motion="off"] .sc-info,
html[data-motion="off"] .sc-group-btn .sc-group-ar,
html[data-motion="off"] .sc-info-btn .sc-info-ar { transition-duration: .001s !important; }


/* ============================================================
   十一、v192.0：AI 聊天室（room）—— 多 AI 同室群聊
   —— 三栏：房间列表 / 消息流 / 成员控制台
   —— 成员专属色走 --bc（RGB 三元组），深浅两套色板都保证 ≥3:1 对比度
   ============================================================ */
:root {
  --ro-0: 124 58 237;   /* 紫 */
  --ro-1: 37 99 235;    /* 蓝 */
  --ro-2: 14 116 144;   /* 青 */
  --ro-3: 21 128 61;    /* 绿 */
  --ro-4: 180 83 9;     /* 橙 */
  --ro-5: 190 18 60;    /* 红 */
  --ro-6: 162 28 175;   /* 品红 */
  --ro-7: 15 118 110;   /* 青绿 */
}
[data-theme="dark"] {
  --ro-0: 167 139 250;
  --ro-1: 96 165 250;
  --ro-2: 34 211 238;
  --ro-3: 74 222 128;
  --ro-4: 251 191 36;
  --ro-5: 251 113 133;
  --ro-6: 232 121 249;
  --ro-7: 45 212 191;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ro-0: 167 139 250;
    --ro-1: 96 165 250;
    --ro-2: 34 211 238;
    --ro-3: 74 222 128;
    --ro-4: 251 191 36;
    --ro-5: 251 113 133;
    --ro-6: 232 121 249;
    --ro-7: 45 212 191;
  }
}

.ac-shell-ro { gap: 0; }
/* v193.0：收起改宽度收拢动画（主栏跟着变宽），不再是 display:none 硬切 */
.ac-shell-ro.no-console .ro-console {
  width: 0; opacity: 0; padding-left: 0; padding-right: 0;
  border-left-width: 0; overflow: hidden; pointer-events: none;
}
/* v193.1：设置入口就位——桌面收起后右栏变竖条把手，点击展开；顶栏按钮仅手机 */
.ro-top-only { display: none; }
.ro-desk-only { display: inline-flex; }
.ac-shell-ro { position: relative; }
.ro-console-tab {
  display: none; position: absolute; top: 14px; right: 0; z-index: 5;
  writing-mode: vertical-rl; letter-spacing: .18em;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-sub);
  background: var(--bg-card); border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px; padding: 12px 5px; cursor: pointer;
  transition: color .15s ease; touch-action: manipulation;
}
.ro-console-tab:hover { color: var(--text-main); }
.ac-shell-ro.no-console .ro-console-tab { display: block; }
@media (max-width: 1080px) {
  .ro-top-only { display: inline-flex; }
  .ro-desk-only { display: none; }
  .ro-console-tab { display: none !important; }
}

/* ---------- 左栏：房间列表 ---------- */
.ro-side {
  width: 224px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 10px 10px;
}
.ro-side-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 0 4px 10px;
}
/* v193.0 修「按钮还在但看不见」：内联 SVG 不给宽高会塌陷成 0，一律定死尺寸 */
.cd-mini svg { width: 14px; height: 14px; display: block; }
.ro-item-del svg { width: 11px; height: 11px; display: block; }
.ro-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ro-item {
  position: relative; display: block; width: 100%; text-align: left; border: none;
  background: transparent; font-family: inherit; color: var(--text-sub);
  padding: 8px 26px 8px 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ro-item:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.ro-item.on { background: var(--bg-hover-strong); color: var(--text-main); }
.ro-item-t { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-item-avs { display: flex; margin-top: 4px; }
.ro-item-avs .ro-ava { width: 16px; height: 16px; font-size: 8.5px; margin-right: -5px; border-width: 1px; }
.ro-item-more {
  flex: none; width: 16px; height: 16px; border-radius: 50%; margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--text-sub); background: var(--bg-hover-strong);
}
.ro-item-s { display: block; font-size: 10.5px; color: var(--text-sub); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-item-del {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--text-sub); cursor: pointer;
  padding: 2px 4px; border-radius: 4px; opacity: .35; font-size: 12px; line-height: 1;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}
.ro-item:hover .ro-item-del, .ro-item.on .ro-item-del { opacity: 1; }
.ro-item-del:hover { color: #e5484d; background: rgba(229, 72, 77, .1); }

/* ---------- 中栏：头部 / 消息流 ---------- */
.ro-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ro-head {
  flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.ro-name {
  font-size: 14px; font-weight: 700; color: var(--text-main); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%;
}
/* v193.1：自动对话运行指示改「圆环 + 倒计时秒数」；发言中整环旋转 */
.ro-live { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.ro-tools .sc-tool:disabled { opacity: .45; cursor: default; }
.ro-tools .sc-tool:disabled:hover { color: var(--text-sub); border-color: var(--border); }
.ro-live svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.ro-live.on svg { animation: roLiveSpin 1.1s linear infinite; }
.ro-live-bg, .ro-live-ring { fill: none; stroke-width: 2.5; }
.ro-live-bg { stroke: var(--bg-hover-strong); }
.ro-live-ring { stroke: #16a34a; stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 0; }
[data-theme="dark"] .ro-live-ring { stroke: #4ade80; }
@keyframes roLiveSpin { to { transform: rotate(270deg); } }
.ro-live b { flex: none; min-width: 17px; font-size: 10.5px; font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ro-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ro-space { width: 4px; }
.ro-sel { position: relative; display: inline-flex; }
.ro-sel .ac-pop.ac-sel-menu { left: auto; right: 0; }
.ro-auto-menu { width: 218px; }
.ro-am-sec {
  font-size: 10.5px; font-weight: 700; color: var(--text-sub);
  padding: 8px 12px 3px; letter-spacing: .02em;
}
.ro-am-note { font-size: 10.5px; line-height: 1.6; color: var(--text-sub); padding: 8px 12px 10px; border-top: 1px solid var(--border); margin-top: 6px; }
.ro-am-sec + .ro-am-sec { border-top: 1px solid var(--border); margin-top: 6px; }
.ro-am-gap { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; }
.ro-am-gap input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 18px; margin: 0; }
.ro-am-gap b { flex: none; width: 38px; text-align: right; font-size: 11px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }

.ro-log {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 20px;
}
/* AI 消息：头像 + 名字 + 左侧专属色细竖线的轻卡片 */
.ro-log .sd-msg { gap: 10px; }
.ro-log .sd-bot { align-items: flex-start; }
.ro-log .sd-bot .sd-bubble {
  max-width: 100%; background: var(--bg-hover-tint);
  border-left: 2px solid rgb(var(--bc, var(--accent)));
  border-radius: 4px 12px 12px 4px; padding: 9px 13px 10px;
}
.ro-row { --bc: var(--accent); }
.ro-ava {
  flex: none; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: rgb(var(--bc)); background: rgba(var(--bc), .13);
  border: 1px solid rgba(var(--bc), .4);
}
.ro-row.speaking .ro-ava { animation: roBreath 1.8s ease-in-out infinite; }
@keyframes roBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bc), 0); }
  50% { box-shadow: 0 0 0 5px rgba(var(--bc), .18); }
}
.ro-who { display: block; font-size: 11px; font-weight: 700; color: rgb(var(--bc)); margin-bottom: 3px; }
.ro-body { font-size: 13px; line-height: 1.7; color: var(--text-main); overflow-wrap: anywhere; }
.ro-body.ro-stream { white-space: pre-wrap; }
.ro-log .sd-msg:last-child { animation: scIn .26s ease-out both; }
/* 系统提示（裁判介入 / 熔断 / 轮数用尽）：居中灰胶囊 */
.ro-sys {
  align-self: center; max-width: 92%; text-align: center;
  font-size: 11.5px; line-height: 1.6; color: var(--text-sub);
  background: var(--bg-hover-tint); padding: 6px 13px; border-radius: 999px;
}
/* 空房间引导 */
.ro-empty { margin: auto; text-align: center; padding: 20px; max-width: 420px; }
.ro-empty-t { font-size: 14.5px; font-weight: 700; color: var(--text-main); margin: 0 0 6px; }
.ro-empty-d { font-size: 12.5px; line-height: 1.8; color: var(--text-sub); margin: 0 0 16px; }
.ro-empty-ops { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- 输入区 ---------- */
.ro-input {
  position: relative; flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 18px 16px; border-top: 1px solid var(--border);
}
.ro-at-menu { top: auto; bottom: calc(100% + 8px); left: 18px; right: auto; min-width: 150px; }
/* v192.1：@ 与发送按钮和输入框对齐——初始高度统一 42px，flex-end 底边对齐 */
.ro-at { flex: none; font-weight: 700; padding: 0 14px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.ro-input textarea { min-height: 42px; }
.ro-input .cd-send { width: 42px; height: 42px; }
.ro-input textarea {
  flex: 1; min-width: 0; max-height: 180px; resize: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 13.5px; line-height: 1.65; padding: 10px 12px; outline: none;
}
.ro-input textarea:focus { border-color: var(--accent); }

/* ---------- 右栏：成员控制台 ---------- */
.ro-console {
  width: 256px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--border); padding: 14px 12px 10px; background: var(--bg-card);
  transition: width .24s ease, opacity .18s ease, padding .24s ease;
  overflow: hidden;
}
.ro-console-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text-main);
  padding: 0 2px 10px; border-bottom: 1px solid var(--border);
}
.ro-console-head i { font-style: normal; font-size: 11px; color: var(--text-sub); font-weight: 400; }
.ro-bots { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 2px; }
.ro-bot {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 10px; display: flex; flex-direction: column; gap: 7px;
  transition: opacity .15s ease;
}
.ro-bot.mute { opacity: .55; }
.ro-bot.mute .ro-ava { filter: grayscale(1); }
.ro-bot-top { display: flex; align-items: center; gap: 7px; }
.ro-ava-sm { width: 24px; height: 24px; font-size: 11px; }
.ro-bot-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ro-bot-mode {
  flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 999px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease;
}
.ro-bot-mode:hover { color: var(--text-main); border-color: var(--text-sub); }
.ro-bot-btn {
  flex: none; border: none; background: transparent; color: var(--text-sub); cursor: pointer;
  font-family: inherit; font-size: 10.5px; padding: 3px 5px; border-radius: 5px;
  transition: color .15s ease, background-color .15s ease;
}
.ro-bot-btn:hover { color: var(--text-main); background: var(--bg-hover-tint); }
.ro-bot-btn.warm:hover { color: #e5484d; }
.ro-bot-act { display: flex; align-items: center; gap: 8px; }
.ro-bot-act input[type="range"] { flex: 1; min-width: 0; accent-color: rgb(var(--bc)); height: 18px; margin: 0; }
.ro-bot-act b { flex: none; width: 34px; text-align: right; font-size: 11px; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ro-bot-prompt input {
  width: 100%; box-sizing: border-box; border: 1px dashed var(--border);
  background: transparent; color: var(--text-sub); outline: none;
  font-family: inherit; font-size: 11.5px; line-height: 1.5;
  border-radius: 8px; padding: 5px 8px; resize: none;
}
.ro-bot-prompt input:focus { border-color: var(--accent); color: var(--text-main); }
.ro-console-foot {
  flex: none; font-size: 10.5px; line-height: 1.6; color: var(--text-sub);
  padding-top: 8px; border-top: 1px solid var(--border);
}
.ro-console-back {
  display: none; flex: none; margin-bottom: 8px; border: none; background: transparent;
  color: var(--text-sub); font-family: inherit; font-size: 12px; cursor: pointer;
  text-align: left; padding: 2px 0;
}

/* ---------- 新建聊天室对话框（复用 .sc-dlg 体系） ---------- */
.ro-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ro-tab {
  flex: 1; padding: 8px 10px; border-radius: 9px; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ro-tab.on { background: var(--bg-hover-strong); color: var(--text-main); border-color: transparent; }
.ro-mb {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.ro-mb-name { flex: none; width: 76px; }
.ro-mb-prompt { flex: 1; min-width: 0; }
.ro-mb input {
  box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input, transparent); color: var(--text-main);
  font-family: inherit; font-size: 12px; line-height: 1.5; padding: 6px 8px; outline: none;
}
.ro-mb input:focus { border-color: var(--accent); }
.ro-mb-act { flex: none; display: flex; align-items: center; gap: 4px; }
.ro-mb-act input[type="range"] { width: 64px; accent-color: var(--accent); height: 18px; margin: 0; border: none; background: none; padding: 0; }
.ro-mb-act b { flex: none; width: 24px; font-size: 10.5px; color: var(--text-sub); font-weight: 600; text-align: right; }
.ro-mb-del {
  flex: none; border: none; background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 4px;
}
.ro-mb-del:hover { color: #e5484d; background: rgba(229, 72, 77, .1); }
.ro-addbot { border-style: dashed; width: 100%; margin-top: 2px; }

/* ---------- v192.1 新建聊天室三步向导 ---------- */
.ro-wiz { width: 560px; }
.ro-steps { display: flex; align-items: center; margin: 2px 0 14px; }
.ro-step {
  flex: none; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); color: var(--text-sub); background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ro-step.on, .ro-step.done { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }
.ro-sline { flex: 1; height: 1px; background: var(--border); margin: 0 8px; transition: background-color .2s ease; }
.ro-sline.done { background: var(--text-main); }
.ro-step-t { flex: none; margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--text-sub); }
.ro-panes { height: 404px; overflow-y: auto; }
.ro-pane { animation: roSlideIn .24s ease-out both; }
@keyframes roSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
/* 类型卡：九宫格 + 固定大小 */
.ro-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ro-cat {
  height: 96px; box-sizing: border-box; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent;
  color: var(--text-sub); font-family: inherit; padding: 8px 6px; min-width: 0;
  transition: border-color .16s ease, color .16s ease, transform .16s ease, background-color .16s ease;
}
.ro-cat:hover { color: var(--text-main); border-color: var(--text-sub); transform: translateY(-2px); }
.ro-cat.on { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); transform: none; }
.ro-cat svg { width: 22px; height: 22px; flex: none; }
.ro-cat-t { font-size: 12px; font-weight: 700; line-height: 1; }
.ro-cat-d {
  font-size: 10.5px; line-height: 1.3; opacity: .78; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ro-cat-hint { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-sub); }
/* 表单里的滑条行 + 校验提示条 */
.ro-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e5484d; margin: 0 0 10px; }
.ro-warn svg { width: 13px; height: 13px; flex: none; }
.ro-slider { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.ro-slider label { flex: none; width: 168px; font-size: 12px; color: var(--text-sub); }
.ro-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 18px; margin: 0; }
.ro-slider b { flex: none; width: 48px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }
/* 底部操作行 */
.ro-wops { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ro-wops .ro-wspace { flex: 1; }
.ro-wiz .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ro-wiz .sc-btn svg { width: 13px; height: 13px; flex: none; }
.sc-btn svg { width: 13px; height: 13px; flex: none; }
/* 向导第 3 步成员卡 */
.ro-mb .ro-ava-sm { flex: none; }
.ro-addbot { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 2px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .ro-console {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); z-index: 330;
    transform: translateX(105%); transition: transform .22s ease;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  }
  .ac-shell-ro .ro-console.open { transform: none; }
  .ro-console-back { display: block; }
}
@media (max-width: 980px) { .ro-side { width: 196px; } }
@media (max-width: 780px) {
  .ac-shell-ro { flex-direction: column; }
  .ro-side {
    width: auto; flex: none; flex-direction: row; align-items: center; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px;
  }
  .ro-side-top { padding: 0 6px 0 0; }
  /* 同情景模式的教训：横排列表必须给死高度 + 居中，否则 item 被纵向拉成胶囊 */
  .ro-list { flex: 0 0 auto; height: 40px; align-items: center; flex-direction: row;
    overflow-x: auto; overflow-y: hidden; gap: 6px; }
  .ro-item {
    width: auto; flex: none; height: 30px; box-sizing: border-box;
    display: inline-flex; align-items: center; white-space: nowrap; padding: 0 24px 0 9px;
  }
  .ro-item-t { max-width: 44vw; }
  .ro-item-avs, .ro-item-s { display: none; }
  .ro-head { padding: 9px 12px; gap: 6px; }
  .ro-name { max-width: 100%; }
  .ro-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; margin-left: 0; width: 100%; }
  .ro-tools .sc-tool { flex: none; }
  .ro-log { padding: 14px; }
  .ro-log .sd-bot .sd-bubble { max-width: calc(100% - 42px); }
  .ro-input { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ro-item, .ro-live, .ro-bot, .ro-bot-mode, .ro-bot-btn, .ro-console, .ro-tab { transition: none; animation: none; }
  .ro-row.speaking .ro-ava { animation: none; }
}
html[data-motion="off"] .ro-item,
html[data-motion="off"] .ro-live,
html[data-motion="off"] .ro-bot,
html[data-motion="off"] .ro-bot-mode,
html[data-motion="off"] .ro-bot-btn,
html[data-motion="off"] .ro-console,
html[data-motion="off"] .ro-tab { transition-duration: .001s !important; }
html[data-motion="off"] .ro-live.on,
html[data-motion="off"] .ro-row.speaking .ro-ava { animation: none; }
html[data-motion="off"] .ro-live.on svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ro-pane { animation: none; }
  .ro-cat, .ro-step, .ro-sline { transition: none; }
  .ro-sec-body, .ro-sec-head .ro-sec-ar { transition: none; }
}
html[data-motion="off"] .ro-pane { animation: none !important; }
html[data-motion="off"] .ro-cat,
html[data-motion="off"] .ro-step,
html[data-motion="off"] .ro-sline { transition-duration: .001s !important; }
html[data-motion="off"] .ro-sec-body,
html[data-motion="off"] .ro-sec-head .ro-sec-ar { transition-duration: .001s !important; }

/* ---------- v193.0 聊天室设置面板（折叠区：房间 / 世界书 / 资料与导出） ---------- */
.ro-console-body { flex: 1; min-height: 0; overflow-y: auto; }
.ro-sec { border-bottom: 1px solid var(--border); }
.ro-sec-head {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--text-sub);
  padding: 10px 2px; cursor: pointer; letter-spacing: .02em;
  transition: color .15s ease; touch-action: manipulation;
}
.ro-sec-head:hover { color: var(--text-main); }
.ro-sec-head .ro-sec-ar { flex: none; font-size: 9px; display: inline-block; transition: transform .22s ease; }
.ro-sec-head.off .ro-sec-ar { transform: rotate(-90deg); }
.ro-sec-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.ro-sec-body.fold { grid-template-rows: 0fr; opacity: 0; }
.ro-sec-body.fold > .ro-sec-in { visibility: hidden; transition: visibility 0s linear .26s; }
.ro-sec-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 0 2px 12px; }
.ro-set-input, .ro-set-area {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input, transparent); color: var(--text-main); outline: none;
  font-family: inherit; font-size: 11.5px; line-height: 1.5; padding: 6px 8px; resize: none;
}
.ro-set-input:focus, .ro-set-area:focus { border-color: var(--accent); }
.ro-set-gap { display: flex; align-items: center; gap: 7px; }
.ro-set-gap input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 16px; margin: 0; }
.ro-set-gap b { flex: none; width: 34px; text-align: right; font-size: 10.5px; color: var(--text-main); font-variant-numeric: tabular-nums; }
.ro-set-lb { flex: none; font-size: 10.5px; color: var(--text-sub); }
.ro-lore-row { display: flex; align-items: center; gap: 4px; }
.ro-lore-k { flex: none; width: 56px; }
.ro-lore-v { flex: 1; min-width: 0; }
.ro-doc-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-sub); }
.ro-doc-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-set-btn {
  border: 1px dashed var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 11px; padding: 5px 8px; border-radius: 8px;
  cursor: pointer; touch-action: manipulation; text-align: center;
  transition: border-color .15s ease, color .15s ease;
}
.ro-set-btn:hover { border-color: var(--accent); color: var(--accent); }
.ro-emoji { font-size: 22px; line-height: 1; display: inline-block; vertical-align: -3px; margin-left: 5px; }
.ro-meme {
  display: block; max-width: 160px; max-height: 160px; margin-top: 8px;
  border-radius: 10px; border: 1px solid var(--border);
}
.ro-mems-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--text-sub); padding: 10px 2px 8px;
}
.ro-mems-head i { font-style: normal; font-size: 11px; color: var(--text-sub); font-weight: 400; }
@media (max-width: 780px) {
  .ro-wiz .ro-cats { grid-template-columns: repeat(2, 1fr); }
  .ro-cat { height: 88px; }
  .ro-panes { height: 356px; }
  .ro-slider label { width: 128px; }
  .ro-step-t { display: none; }
  .ro-console { width: min(320px, 88vw); }
}

/* v193.1 情景向导第 1 步：剧本开关行内对齐 */
.sc-script-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-script-opt label { margin: 0; }
.sc-script-opt .sc-gen-tip { margin: 0; }


/* ============================================================
   ↓↓↓ 以下两段由 v195.0 合并进来（原 css/aichat-v194.css 已删除）
   —— 顺序保持不变：先 v194 的聊天室/四模式样式，再 v195 的星图改版样式，
      靠「后加载覆盖」的既有约定生效，不要调整顺序。
   ============================================================ */

/* ==========================================
   aichat-v194.css（v194.0）AI Chat 本轮新增 / 重构的界面样式
   一、聊天室布局重构：顶栏通铺整宽 + 设置右侧滑出
   二、情景模式「新建情景」优化补丁（种子 chips / 就地补全）
   三、灵感工坊 ideas（灵魂拷问 / 时光机 / 来信 / 平行世界 合并）
   四、AI 知识星图 knowledge（左学科树 + 中 Canvas 星图 + 右讲解栏）
   五、AI 决策台 decide（评分矩阵 + 权重重算）
   六、AI 提示词实验室 prompt
   七、响应式 + 动效兜底
   铁律：颜色只用 CSS 变量（深色模式白底白字是前车之鉴）；
        滚动链上每层都要 min-height:0（known-issues §27 / §45）。
   ========================================== */

/* ============================================================
   一、聊天室：顶栏通铺整宽 + 设置右侧滑出
   （覆盖 aichat-modes.css 的「左栏 / 中栏顶栏 / 右栏常驻」旧布局）
   ============================================================ */
.ac-shell-ro { flex-direction: column; gap: 0; position: relative; }
.ro-top {
  flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.ro-body { flex: 1; min-width: 0; min-height: 0; display: flex; position: relative; }
.ro-side-title { font-size: 13px; font-weight: 700; color: var(--text-sub); }

/* 设置：从右侧滑出的浮层抽屉（桌面 / 手机同一套；不再有竖条把手） */
.ac-shell-ro .ro-console {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw); z-index: 30;
  transform: translateX(103%); box-shadow: none;
  transition: transform .24s ease, box-shadow .24s ease;
  border-left: 1px solid var(--border); border-top: none;
}
.ac-shell-ro.ro-console-open .ro-console {
  transform: none; box-shadow: -16px 0 44px rgba(0, 0, 0, .18);
}
.ro-console-tab, .ro-console-back { display: none !important; }
/* 顶栏里的「设置」开关：显形（原来只在手机显示） */
.ac-shell-ro .ro-console-btn { display: inline-flex; align-items: center; }
.ro-console-btn.on { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   二、新建情景：最近用过的一句话题目 + 就地补全按钮
   ============================================================ */
.sc-seeds {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: -2px 0 12px;
}
.sc-seeds-t { flex: none; font-size: 11px; color: var(--text-faint); }
.sc-seed {
  border: 1px dashed var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 11.5px; line-height: 1.4; max-width: 220px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s ease, color .15s ease;
}
.sc-seed:hover { border-color: var(--accent); color: var(--accent); }
.sc-btn.ghost {
  border-style: dashed; border-color: var(--border); color: var(--text-sub);
}
.sc-btn.ghost:hover { border-color: var(--text-sub); color: var(--text-main); opacity: 1; }
.sc-ops2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
.sc-script-go { margin-left: 8px; font-weight: 600; }
.sc-field label { display: flex; align-items: center; gap: 4px; }

/* ============================================================
   三、灵感工坊 ideas —— 左模式栏 + 中作品舞台 + 作品集滑层
   ============================================================ */
.ac-shell-id { position: relative; }

/* 左模式栏 */
.id-rail {
  width: 214px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 10px 10px;
}
.id-rail-top { flex: none; padding: 0 4px 10px; }
.id-rail-label {
  flex: none; font-size: 10.5px; color: var(--text-faint);
  padding: 0 6px 10px; letter-spacing: .02em;
}
.id-modes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.id-mode {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; font-family: inherit;
  color: var(--text-sub); border-radius: 12px; padding: 10px 11px;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.id-mode:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.id-mode.on { background: var(--bg-card); border-color: var(--border); color: var(--text-main); }
.id-mode-ico {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  color: rgb(var(--acc, var(--accent)));
  background: rgba(var(--acc, var(--accent)), .13);
}
.id-mode-ico svg { width: 15px; height: 15px; }
.id-mode-t { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.id-mode-d { display: block; font-size: 10.5px; line-height: 1.55; color: var(--text-faint); margin-top: 3px; }
.id-mode-x { flex: 1; min-width: 0; }
.id-rail-foot { flex: none; padding: 8px 2px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.id-mini {
  border: 1px solid transparent; background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.id-mini:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.id-rail-foot .id-mini { width: 100%; border-color: var(--border); text-align: center; }

/* 中舞台 */
.id-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.id-head {
  flex: none; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.id-title { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.id-sub { font-size: 11.5px; color: var(--text-faint); min-width: 0; }
.id-space { flex: 1; min-width: 0; }
.id-head .id-mini { border-color: var(--border); }
.id-head .id-mini i { font-style: normal; color: var(--accent); font-weight: 700; }

.id-canvas {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 26px 8px; display: flex; flex-direction: column; gap: 16px;
}
.id-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 880px; margin: 0 auto; width: 100%; }
.id-strip-t { font-size: 10.5px; color: var(--text-faint); }
.id-round {
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums;
  transition: color .15s ease, border-color .15s ease;
}
.id-round:hover { color: var(--text-main); border-color: var(--text-sub); }
.id-round.on { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }

.id-work { width: 100%; max-width: 880px; margin: 0 auto; }
.id-work-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11px; color: var(--text-faint);
}
.id-work-tag {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  color: rgb(var(--acc, var(--accent)));
  background: rgba(var(--acc, var(--accent)), .13);
}
.id-work-q {
  font-size: 13px; line-height: 1.7; color: var(--text-sub);
  border-left: 2px solid var(--border); padding: 2px 0 2px 11px; margin-bottom: 14px;
  white-space: pre-wrap; word-break: break-word;
}
.id-work-body { color: var(--text-main); }

/* 各模式的「作品」外观 —— 同一个 Markdown 内核，四种纸 */
.id-work-paper .id-work-body {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 26px 30px; box-shadow: 0 6px 26px rgba(0, 0, 0, .06);
  font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 15px; line-height: 2;
}
.id-work-paper .id-work-body p:first-child { margin-top: 0; }
.id-work-file .id-work-body {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 22px; border-top: 3px solid rgb(var(--acc, var(--accent)));
}
.id-work-time .id-work-body { border-left: 2px solid rgb(var(--acc, var(--accent))); padding-left: 18px; }
.id-work-tree .id-work-body {
  background: var(--bg-code); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px;
}

.id-empty { margin: auto; text-align: center; padding: 20px; max-width: 560px; }
.id-empty-ico {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; background: var(--grad-accent);
  box-shadow: 0 8px 24px var(--shadow-glow);
}
.id-empty-ico svg { width: 22px; height: 22px; }
.id-empty-t { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; }
.id-empty-d { font-size: 12.5px; line-height: 1.9; color: var(--text-faint); margin: 0; }
.id-err { font-size: 13px; color: #d64545; font-style: italic; }

.id-compose {
  flex: none; border-top: 1px solid var(--border);
  padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 8px;
}
.id-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.id-chip {
  border: 1px solid var(--border); background: var(--bg-code); color: var(--text-sub);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-family: inherit;
  cursor: pointer; touch-action: manipulation; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s ease, color .15s ease;
}
.id-chip:hover { border-color: var(--ring); color: var(--text-main); }
.id-inrow { display: flex; align-items: flex-end; gap: 10px; }
.id-inrow textarea {
  flex: 1; min-width: 0; max-height: 180px; resize: none;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-input); color: var(--text-main);
  font-family: inherit; font-size: 14px; line-height: 1.6;
  padding: 10px 14px; outline: none;
}
.id-inrow textarea:focus { border-color: var(--accent); }
.id-inrow .cd-send { width: 40px; height: 40px; flex: none; }
.id-tip { font-size: 11px; color: var(--text-faint); min-height: 14px; }

/* 作品集滑层（默认停在屏外，靠 .ac-shell-id.hist-open 滑出） */
.id-hist {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(372px, 90vw); z-index: 20;
  background: var(--bg-card); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform .24s ease, box-shadow .24s ease;
}
.ac-shell-id.hist-open .id-hist { transform: none; box-shadow: -16px 0 44px rgba(0, 0, 0, .18); }
.id-hist-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-main);
}
.id-hist-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.id-hist-item {
  text-align: left; width: 100%; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text-sub); font-family: inherit;
  padding: 9px 11px; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.id-hist-item:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.id-hist-item.on { border-color: var(--accent); color: var(--text-main); }
.id-hist-q { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.id-hist-m { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.id-hist-foot { flex: none; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.7; color: var(--text-faint); }

/* ============================================================
   四、AI 知识星图 knowledge（v196.0 重写：球面 3D 星空）
   —— 这一整块**强制深色**：星图是沉浸式视图，不跟随全站浅/暗色皮肤。
      所以这里不引用全局 --bg-* / --text-*，改用块内 --k* 变量，
      保证任何皮肤下都是「深色星空」。
   —— 铁律：滚动链每层 min-height:0；SVG 必须写宽高。
   ============================================================ */
.ac-shell-kn {
  /* v198：材质跟其他 AI 模式完全一致 —— 一律取自全站变量，
     浅暗切换统一交给全站皮肤，不再自建一套 --k* 配色。 */
  --kbg: var(--bg-page);
  --kbg2: var(--bg-card);
  --kcard: var(--bg-card);
  --kcard2: var(--bg-hover-tint);
  --kline: var(--border);
  --kline2: var(--bg-hover-strong);
  --kfg: var(--text-main);
  --ksub: var(--text-sub);
  --kfaint: var(--text-faint);
  --kacc: var(--accent);
  --kwarn: var(--accent);
  --ktop1: var(--bg-card);
  --ktop2: var(--bg-card);
  --kfloat: var(--bg-card);
  --kadd: var(--bg-hover-tint);
  --kfloat-b: var(--bg-modal);
  position: relative; flex-direction: column;
  background: var(--bg-page); color: var(--text-main); overflow: hidden;
  /* v202.4：星图页面与网站的交界 —— 圆角 + 一圈细边线（不加阴影） */
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--border);
  /* v202.7：向下扩到底但**不往上跑** —— 顶部留 10px 正常间距（负 margin 会让
     壳顶钻进全局顶栏，老大已纠正），底部 margin 归零 + 撑满容器，
     壳底与网站底栏齐平 */
  margin: 10px 12px 0;
  min-height: 100%;
}
.ac-shell-kn:fullscreen {
  /* 全屏时铺满，不露圆角和边距 */
  border-radius: 0; margin: 0; box-shadow: none; min-height: 100%;
}
.ac-shell-kn:fullscreen .am-back { display: none; }   /* v202.6：全屏下没有「离开星图」一说 */

/* ---------- 顶栏（v202.3）：常规文档流占位，一条素栏 + 细分割线 ----------
   学科栏移回星图外（常规三栏），顶栏不再悬浮在画布上。 */
.kn-top {
  flex: none; min-height: 52px; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.kn-title { font-size: 14.5px; font-weight: 700; color: var(--kfg); white-space: nowrap; }
.kn-space { flex: 1; min-width: 8px; }
.kn-search {
  display: flex; align-items: center; gap: 7px; flex: none;
  width: min(330px, 40vw); padding: 6px 11px; border-radius: 10px;
  border: 1px solid var(--kline); background: var(--kadd);
  transition: border-color .16s ease, background-color .16s ease;
}
.kn-search:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.kn-search svg { flex: none; color: var(--kfaint); }
.kn-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--kfg); font-family: inherit; font-size: 12.5px;
}
.kn-search input::placeholder { color: var(--kfaint); }

.kn-chip {
  flex: none; border: 1px solid var(--border); background: transparent;
  color: var(--text-sub); font-family: inherit; font-size: 12px; padding: 5px 10px;
  border-radius: 9px; cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.kn-chip:hover { color: var(--text-main); border-color: var(--text-faint); }
.kn-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.kn-chip.ico {
  /* v202.2：纯图标按钮（学科栏开关 / 全屏），SVG 垂直居中 */
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
}
.kn-chip.ico svg { display: block; }

/* v202.5：顶栏与侧栏材质顺应暗色三皮肤 —— 全站变量 --side-glass 在
   墨案（近实底）/ 曜石（近实黑）/ 玻璃（半透明）下各有值，自动跟随；
   浅色模式未定义该变量，回退到卡色。玻璃皮肤再叠毛玻璃。 */
.kn-top, .kn-side { background: var(--side-glass, var(--bg-card)); }
[data-theme="dark"][data-darkskin="glass"] .kn-top,
[data-theme="dark"][data-darkskin="glass"] .kn-side {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- 主体（v202.3）：flex 三栏，学科栏在星图外 ----------
   老大要求「学科栏移到星图外」——侧栏不再浮在画布上，
   画布只占舞台区；收起时宽度归零（偏好照旧记住）。 */
.kn-body { position: relative; flex: 1; min-height: 0; display: flex; }

.kn-side {
  position: relative; z-index: 11;
  width: 224px; flex: none; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width .22s ease, opacity .18s ease;
}
.ac-shell-kn.kn-side-closed .kn-side { width: 0; opacity: 0; pointer-events: none; border-right-color: transparent; }
.kn-side-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--kfaint);
}
.kn-mini {
  border: 1px solid var(--kline); background: transparent; color: var(--kfaint);
  font-family: inherit; font-size: 10.5px; padding: 3px 8px; border-radius: 7px;
  cursor: pointer; touch-action: manipulation; transition: color .16s ease, border-color .16s ease;
}
.kn-mini:hover { color: var(--kfg); border-color: var(--kline2); }
.kn-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 14px; }
.kn-none { font-size: 12px; line-height: 1.8; color: var(--kfaint); padding: 10px 4px; }

.kn-group { margin-bottom: 1px; }
.kn-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--kfg);
  padding: 7px 8px; border-radius: 8px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease;
}
.kn-group-head:hover { background: var(--bg-hover-tint); }
.kn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.kn-gname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-gcnt { flex: none; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--kfaint); }
.kn-caret {
  flex: none; width: 0; height: 0; transition: transform .18s ease;
  border-left: 4px solid var(--kfaint); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.kn-group-head.off .kn-caret { transform: rotate(-90deg); }
.kn-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.kn-group-body.fold { grid-template-rows: 0fr; }
.kn-group-in { overflow: hidden; min-height: 0; }
.kn-branch {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--ksub);
  padding: 5px 8px 5px 24px; border-radius: 6px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease, color .16s ease;
}
.kn-branch:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.kn-leaf {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 11.5px; color: var(--kfaint);
  padding: 4px 8px 4px 34px; border-radius: 6px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease, color .16s ease;
}
.kn-leaf:hover { background: var(--bg-hover-tint); color: var(--text-main); }
.kn-leaf.seen { color: var(--ksub); }
.kn-leaf.hasnote { color: var(--accent); }
.kn-branch.hasnote::after { content: " ✎"; color: var(--kacc); font-size: 10px; }

/* ---------- 星图舞台 ---------- */
.kn-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }  /* v202.3：画布只占舞台区，背景由 canvas 每帧绘制（跟随皮肤） */
.kn-canvas { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.kn-canvas.dragging { cursor: grabbing; }

.kn-zoombar {
  position: absolute; right: 14px; bottom: 14px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px; border-radius: 11px;
  background: var(--kfloat); border: 1px solid var(--kline); backdrop-filter: blur(8px);
}
.kn-zoombar b { font-size: 10.5px; color: var(--ksub); font-weight: 600; }
.kn-zbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; border-radius: 7px; background: transparent;
  color: var(--ksub); cursor: pointer; touch-action: manipulation;
  transition: color .16s ease, background-color .16s ease;
}
.kn-zbtn:hover { color: var(--text-main); background: var(--bg-hover-tint); }

.kn-tip {
  position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none;
  max-width: 270px; padding: 7px 11px; border-radius: 10px;
  background: var(--bg-modal); border: 1px solid var(--border);
  box-shadow: var(--shadow-card-hover);
  will-change: transform;
}
.kn-tip[hidden] { display: none; }
.kn-tip b { display: block; font-size: 12.5px; font-weight: 700; color: var(--kfg); }
.kn-tip i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.6; color: var(--ksub); margin-top: 2px; }
.kn-tip i:empty { display: none; }

/* 深入了解：外链槽位 */
.kn-ext { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.kn-ext-a {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 9px; padding: 5px 10px;
  font-size: 12px; color: var(--text-sub); text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.kn-ext-a:hover { color: var(--text-main); border-color: var(--text-faint); background: var(--bg-hover-tint); }

/* ---------- 右栏：知识卡片 ---------- */
.kn-panel {
  /* 知识卡片做成右侧浮层。v202.3：默认跟随皮肤（浅色模式 = 浅色卡片），
     强调色由 JS 注入学科色；暗色模式再用深色玻璃提高正文可视度。 */
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 14;
  width: min(346px, 86vw); min-height: 0; display: flex; flex-direction: column;
  background: var(--kcard);
  border-left: 1px solid var(--kline);
  color: var(--text-main);
  transform: translateX(103%);
  transition: transform .24s ease, box-shadow .24s ease;
}
[data-theme="dark"] .kn-panel {
  /* 深色玻璃（仅暗色）：深底浅字 + 模糊，AI 正文是主角 */
  --text-main: #eef3ff;
  --text-sub: #b6c2dd;
  --text-faint: #8391b1;
  --border: rgba(255, 255, 255, .13);
  --bg-hover-tint: rgba(255, 255, 255, .07);
  --bg-hover-strong: rgba(255, 255, 255, .13);
  --bg-modal: #141a2c;
  --bg-code: rgba(0, 0, 0, .30);
  --inline-code-tint: rgba(255, 255, 255, .09);
  background: rgba(13, 17, 30, .86);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.kn-panel.open { transform: none; box-shadow: var(--shadow-island); }
.kn-panel-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--kline);
}
.kn-panel-kind {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 6px; padding: 2px 7px;
}
.kn-panel-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--kfg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

.kn-empty { font-size: 12.5px; line-height: 1.9; color: var(--kfaint); }
.kn-path { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-bottom: 10px; font-size: 11px; }
.kn-path-b {
  border: none; background: transparent; font-family: inherit; font-size: 11px;
  padding: 1px 4px; border-radius: 5px; cursor: pointer; touch-action: manipulation;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .16s ease;
}
.kn-path-b:hover { background: var(--bg-hover-tint); }
.kn-path i { font-style: normal; color: var(--kfaint); }

.kn-def {
  font-size: 13px; line-height: 1.85; color: var(--kfg); margin: 0 0 10px;
  padding-left: 10px; border-left: 2px solid var(--kacc);
}
.kn-meta {
  font-size: 11px; color: var(--kfaint); line-height: 1.7;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--kline);
}

/* 就这个概念追问 */
.kn-ask { display: flex; gap: 6px; margin-bottom: 10px; }
.kn-ask input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-hover-tint); color: var(--text-main);
  font-family: inherit; font-size: 12.5px; padding: 8px 11px; outline: none;
  transition: border-color .16s ease;
}
.kn-ask input::placeholder { color: var(--kfaint); }
.kn-ask input:focus { border-color: var(--kacc); }
.kn-ask-go {
  flex: none; border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent); font-family: inherit; font-size: 12.5px; padding: 0 14px;
  border-radius: 9px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease;
}
.kn-ask-go:hover { background: var(--bg-hover-strong); }
.kn-qa { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kn-qa:empty { display: none; }
.kn-qa-item { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--bg-hover-tint); }
.kn-qa-q { font-size: 12px; font-weight: 600; color: var(--ksub); margin-bottom: 6px; }
.kn-qa-q::before { content: "问 · "; color: var(--kacc); }
.kn-qa-a { font-size: 12.5px; line-height: 1.78; color: var(--kfg); }

.kn-note { margin-bottom: 14px; }
.kn-note-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.kn-note-head span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--ksub); }
.kn-note-head em { font-style: normal; font-size: 10px; color: var(--kfaint); }
.kn-note-body { font-size: 13px; line-height: 1.85; color: var(--kfg); }
.kn-note-body h2 {
  font-size: 12.5px; font-weight: 700; color: var(--text-main);
  margin: 15px 0 6px; padding-left: 9px; border-left: 2px solid var(--accent);
}
.kn-note-body h2:first-child { margin-top: 0; }
.kn-note-body p { margin: 0 0 .6em; }
.kn-note-body p:last-child { margin-bottom: 0; }
.kn-note-body ul, .kn-note-body ol { margin: .3em 0 .8em; padding-left: 1.35em; }
.kn-note-body li { margin-bottom: .32em; }
.kn-note-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em; background: var(--inline-code-tint); border-radius: 4px; padding: 1px 5px; color: var(--text-main);
}
.kn-note-body pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; overflow-x: auto; }
.kn-note-body strong { color: var(--text-main); }
.kn-note-empty {
  font-size: 12px; line-height: 1.85; color: var(--text-faint);
  background: var(--bg-hover-tint); border-radius: 9px; padding: 10px 12px; margin: 0;
}

.kn-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--kfaint);
  margin: 4px 0 8px;
}
.kn-rel {
  /* v202：一行行列表 → 紧凑药丸流，主要位置留给 AI 百科 */
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px;
}
.kn-rel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-hover-tint); font-family: inherit;
  font-size: 11.5px; color: var(--ksub); padding: 3px 10px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.kn-rel-btn:hover { color: var(--text-main); border-color: var(--text-faint); }
.kn-rel-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.kn-btn {
  flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-hover-tint); color: var(--text-sub);
  font-family: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.kn-btn:hover { color: var(--text-main); border-color: var(--text-faint); }
.kn-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.kn-btn:disabled { opacity: .45; cursor: default; }
.kn-panel-foot { flex: none; display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--kline); flex-wrap: wrap; }
.kn-panel-foot .kn-btn.pri {
  flex: 1 1 140px; background: var(--accent); color: #16203a;
  border-color: var(--accent); font-weight: 600;
}
.kn-panel-foot .kn-btn.pri:hover { opacity: .86; color: #1a2032; }
.kn-panel-foot .kn-btn.danger { flex: none; color: #ff8f8f; border-color: rgba(255, 143, 143, .45); }
.kn-panel-foot .kn-btn.danger:hover { color: #ff8f8f; border-color: #ff8f8f; }

/* ---------- 响应式 ---------- */
@media (max-width: 1400px) {
}
@media (max-width: 1080px) {
  .kn-side { width: 196px; }
}
@media (max-width: 900px) {
  .kn-side { width: min(74vw, 260px); }
}
@media (max-width: 700px) {
  .kn-top { padding: 8px 12px; gap: 7px; }
  .kn-search { width: 100%; order: 9; }
  .kn-zoombar { bottom: 10px; right: 10px; }
  .kn-tip { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-panel, .kn-group-body, .kn-caret, .kn-side { transition: none; }
}
html[data-motion="off"] .kn-panel,
html[data-motion="off"] .kn-group-body,
html[data-motion="off"] .kn-caret,
html[data-motion="off"] .kn-side { transition-duration: .001s !important; }

/* ============================================================
   五、AI 决策台 decide
   ============================================================ */
.ac-shell-dc { }
.dc-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dc-head {
  flex: none; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.dc-title { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.dc-sub { font-size: 11.5px; color: var(--text-faint); }
.dc-space { flex: 1; min-width: 0; }
.dc-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px; display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.dc-card {
  width: 100%; max-width: 780px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 18px 20px;
}
.dc-field { margin-bottom: 12px; }
.dc-field:last-child { margin-bottom: 0; }
.dc-field label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.dc-field textarea, .dc-field input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg-input); color: var(--text-main);
  font-family: inherit; font-size: 13px; line-height: 1.6; padding: 9px 11px; outline: none;
  resize: vertical;
}
.dc-field textarea:focus, .dc-field input:focus { border-color: var(--accent); }
.dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.dc-tip { font-size: 11.5px; color: var(--text-faint); min-width: 0; }
.dc-result { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 14px; }
.dc-res-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 16px 18px;
}
.dc-res-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dc-res-h b { font-size: 14px; color: var(--text-main); }
.dc-res-h span { font-size: 11px; color: var(--text-faint); }
.dc-pick {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); margin-bottom: 12px;
}
.dc-pick-name { font-size: 16px; font-weight: 700; color: var(--accent); }
.dc-pick-score { font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.dc-pick-why { font-size: 12.5px; line-height: 1.8; color: var(--text-main); margin: 0; }
.dc-weights { display: flex; flex-direction: column; gap: 8px; }
.dc-w-row { display: flex; align-items: center; gap: 10px; }
.dc-w-name { flex: none; width: 108px; font-size: 12px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-w-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 18px; margin: 0; }
.dc-w-val { flex: none; width: 30px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }
.dc-matrix { overflow-x: auto; }
.dc-matrix table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.dc-matrix th, .dc-matrix td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.dc-matrix th { background: var(--bg-code); font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.dc-matrix td.dc-num { text-align: center; font-variant-numeric: tabular-nums; }
.dc-matrix tr.on td { background: var(--accent-soft); }
.dc-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dc-bar-row { display: flex; align-items: center; gap: 10px; }
.dc-bar-name { flex: none; width: 96px; font-size: 12px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-bar-track { flex: 1; min-width: 0; height: 10px; border-radius: 999px; background: var(--bg-hover-strong); overflow: hidden; }
.dc-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.dc-bar-val { flex: none; width: 44px; text-align: right; font-size: 11.5px; color: var(--text-main); font-variant-numeric: tabular-nums; }
.dc-notes { margin: 12px 0 0; padding-left: 1.2em; font-size: 12.5px; line-height: 1.85; color: var(--text-sub); }
.dc-err { font-size: 13px; color: #d64545; }

/* ============================================================
   六、AI 提示词实验室 prompt
   ============================================================ */
.pr-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pr-head {
  flex: none; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.pr-title { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.pr-sub { font-size: 11.5px; color: var(--text-faint); }
.pr-space { flex: 1; min-width: 0; }
.pr-sel { position: relative; display: inline-flex; }
.pr-grid {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; padding: 18px;
}
.pr-left { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.pr-right { min-height: 0; overflow-y: auto; }
.pr-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 14px 16px;
}
.pr-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--text-main);
}
.pr-run-note { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
.pr-card textarea, .pr-field input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg-input); color: var(--text-main);
  font-family: inherit; font-size: 13px; line-height: 1.6; padding: 9px 11px; outline: none; resize: vertical;
}
.pr-card textarea:focus, .pr-field input:focus { border-color: var(--accent); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pr-chip {
  border: 1px solid var(--border); background: var(--bg-code); color: var(--text-sub);
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-family: inherit;
  cursor: pointer; touch-action: manipulation;
  transition: border-color .15s ease, color .15s ease;
}
.pr-chip:hover { border-color: var(--ring); color: var(--text-main); }
.pr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pr-tip { font-size: 11.5px; color: var(--text-faint); min-width: 0; }
.pr-vars { display: flex; flex-direction: column; gap: 8px; }
.pr-var { display: flex; align-items: center; gap: 8px; }
.pr-var label { flex: none; width: 92px; font-size: 11.5px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-var input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--text-main); font-family: inherit; font-size: 12.5px;
  padding: 6px 9px; outline: none;
}
.pr-var input:focus { border-color: var(--accent); }
.pr-run-out {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-code); padding: 10px 12px; font-size: 12.5px; line-height: 1.75;
  color: var(--text-main); max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.pr-sec { margin-bottom: 14px; }
.pr-sec-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 12px; font-weight: 700; color: var(--text-sub);
}
.pr-sec-h span { flex: 1; }
.pr-copy {
  border: 1px solid var(--border); background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation;
}
.pr-copy:hover { color: var(--text-main); border-color: var(--text-sub); }
.pr-pre {
  margin: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-code);
  padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.7;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--text-main); white-space: pre-wrap; word-break: break-word;
}
.pr-card-mini { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.pr-card-mini-t { font-size: 11.5px; font-weight: 700; margin-bottom: 5px; }
.pr-card-mini-t.good { color: #16a34a; }
.pr-card-mini-t.bad { color: #e5484d; }
.pr-card-mini-b { font-size: 12px; line-height: 1.7; color: var(--text-sub); white-space: pre-wrap; }
.pr-tips { margin: 0; padding-left: 1.2em; font-size: 12.5px; line-height: 1.85; color: var(--text-sub); }
.pr-empty { display: grid; place-items: center; height: 100%; text-align: center; padding: 30px; }
.pr-empty p { font-size: 12.5px; line-height: 1.9; color: var(--text-faint); margin: 0; max-width: 320px; }
.pr-err { font-size: 13px; color: #d64545; }

/* ============================================================
   七、响应式 + 动效兜底
   ============================================================ */
@media (max-width: 1080px) {
  .id-rail { width: 178px; }
  .pr-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .pr-left, .pr-right { overflow: visible; }
}
@media (max-width: 860px) {
  /* 灵感工坊：左栏转到顶部横排 */
  .ac-shell-id { flex-direction: column; }
  .id-rail {
    width: auto; flex: none; flex-direction: column; padding: 10px 10px 8px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .id-rail-label { display: none; }
  .id-modes { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 2px; }
  .id-mode { flex: none; width: auto; padding: 7px 11px; }
  .id-mode-d { display: none; }
  .id-rail-foot { display: none; }
  .id-canvas { padding: 16px 14px 6px; }
  .id-compose { padding: 8px 14px 12px; }
  .dc-scroll { padding: 14px; }
  .pr-grid { padding: 14px; }
}
@media (max-width: 780px) {
  /* 聊天室：手机下「房间列表横条」在上面，「消息流」占满，设置仍是右侧抽屉 */
  .ro-body { flex-direction: column; }
}
@media (max-width: 600px) {
  .ro-top { padding: 8px 12px; gap: 6px; }
  .dc-w-name { width: 76px; }
  .id-head { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ro-console, .id-hist, .id-mode, .kn-panel, .dc-bar-fill, .kn-group-body, .kn-caret { transition: none; }
}
html[data-motion="off"] .ro-console,
html[data-motion="off"] .id-hist,
html[data-motion="off"] .id-mode,
html[data-motion="off"] .kn-panel,
html[data-motion="off"] .dc-bar-fill,
html[data-motion="off"] .kn-group-body,
html[data-motion="off"] .kn-caret { transition-duration: .001s !important; }