/* ═══════════════════════════════════════════════════════════
   AIUGOOE 设计系统 — Nova
   墨色空间为底，翡翠—曙光渐变为魂；1px 发丝线分隔，大圆角呼吸。
   全部视觉与图标均为 aiugooe 原创。
   ═══════════════════════════════════════════════════════════ */

/* P0-5 单源化：原 :root 语义层（--bg0..--sb-w）已整体迁入 tokens.css——
   本文件不再定义任何全局设计令牌，全部从 var(--x) 引用。
   注意 tokens.css 先于本文件加载，此处若重复定义会覆盖单源（禁止）。 */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body, #app { height: 100%; }

body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg0);
  overflow: hidden;
  user-select: none;
  border: 1px solid #1b212c;
}

#app { display: flex; flex-direction: column; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .10);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .18); }
::-webkit-scrollbar-corner { background: transparent; }

/* ─────────────── 图标基础 ─────────────── */
[data-icon] { display: inline-flex; }
[data-icon] svg, .icon-btn svg {
  width: 18px; height: 18px;
  display: block;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  color: var(--text3);
  transition: all .15s;
}
.icon-btn:hover { color: var(--text); background: var(--bg3); }
.icon-btn.done { color: var(--jade); }

/* ═══════════════ 标题栏（窄条） ═══════════════ */
#titlebar {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 8px;
  background: var(--bg0);
  -webkit-app-region: drag;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
.tb-right { -webkit-app-region: no-drag; }
.tb-left > * { -webkit-app-region: no-drag; }
.tb-left > .tb-brand { -webkit-app-region: drag; }

.tb-brand { display: flex; align-items: center; gap: 8px; padding: 0 4px; }

/* ═══════════════ 环境式状态灯（v3.4.0）：顶栏随智能体相位呼吸变色 ═══════════════ */
.tb-phase {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text3);
  opacity: .45;
  transition: background var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
/* 思考=紫（缓呼吸） */
body[data-phase="thinking"] .tb-phase { background: var(--ai); opacity: 1; box-shadow: 0 0 8px var(--ai-border); animation: phase-breathe 2.4s ease-in-out infinite; }
/* 执行=绿（稳亮） */
body[data-phase="tooling"] .tb-phase { background: var(--jade); opacity: 1; box-shadow: 0 0 8px var(--ok-border); }
/* 回答=紫（快呼吸，与思考节奏区分） */
body[data-phase="answering"] .tb-phase { background: var(--ai); opacity: 1; box-shadow: 0 0 10px var(--ai-border); animation: phase-breathe 1.1s ease-in-out infinite; }
/* 等待审批=黄（双闪醒目） */
body[data-wait] .tb-phase { background: var(--warn); opacity: 1; box-shadow: 0 0 9px var(--warn-border); animation: phase-blink 1s steps(2, jump-none) infinite; }
/* 错误=红闪 2s（notice level=error 驱动） */
body.sys-err .tb-phase { background: var(--coral); opacity: 1; box-shadow: 0 0 10px var(--err-border); animation: phase-blink .5s steps(2, jump-none) infinite; }
@keyframes phase-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes phase-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}
/* 浅色主题降饱和阴影 */
:root[data-theme="light"] body[data-phase="thinking"] .tb-phase,
:root[data-theme="light"] body[data-phase="answering"] .tb-phase { box-shadow: 0 0 6px var(--ai-border); }

/* ═══════════════ 生成式 UI 组件（v3.4.0）：模型输出的受控交互块 ═══════════════ */
.gui {
  margin: 10px 0;
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ai-bg), rgba(10, 10, 10, .4));
  padding: 12px 14px;
}
.gui-q { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: 10px; }
.gui-btn {
  font-family: var(--sans);
  font-size: var(--font-md);
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.gui-btn:hover { border-color: var(--ai-border); background: var(--ai-bg); }
.gui-btn:active { transform: scale(.97); }
.gui-btn:disabled { opacity: .45; cursor: default; }
.gui-sent { opacity: .6; }
.gui-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* 表单 */
.gui-form { display: flex; flex-direction: column; gap: 10px; }
.gui-field { display: flex; flex-direction: column; gap: 5px; }
.gui-label { font-size: var(--font-sm); color: var(--text3); }
.gui-input {
  font-family: var(--sans);
  font-size: var(--font-md);
  color: var(--text);
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gui-input:focus { border-color: var(--ai); box-shadow: var(--focus-ring); }
.gui-submit { align-self: flex-start; background: var(--ai-bg); border-color: var(--ai-border); color: var(--ai); font-weight: var(--weight-medium); }
.gui-submit:hover { background: var(--ai-border); }
/* 指标卡 */
.gui-stats { display: flex; flex-wrap: wrap; gap: 10px; border: none; background: none; padding: 0; }
.gui-stat {
  flex: 1 1 120px;
  min-width: 110px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--bg1);
  padding: 12px 14px;
}
.gui-stat-v { font-family: var(--mono); font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--ai); }
.gui-stat-l { font-size: var(--font-sm); color: var(--text2); margin-top: 3px; }
.gui-stat-h { font-size: var(--font-xs); color: var(--text3); margin-top: 2px; }
/* 柱状图 */
.gui-chart { border: none; background: none; padding: 0; }
.gui-bars { display: flex; flex-direction: column; gap: 8px; }
.gui-bar-row { display: flex; align-items: center; gap: 10px; }
.gui-bar-l { flex: none; width: 110px; font-size: var(--font-sm); color: var(--text2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gui-bar-track { flex: 1; height: 10px; border-radius: var(--radius-full); background: var(--bg2); overflow: hidden; }
.gui-bar-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--ai), var(--jade)); transition: width var(--dur-slow) var(--ease-out); }
.gui-bar-v { flex: none; width: 56px; font-family: var(--mono); font-size: var(--font-sm); color: var(--text3); }
/* 浅色主题组件底色 */
:root[data-theme="light"] .gui { background: linear-gradient(180deg, var(--ai-bg), rgba(255, 255, 255, .6)); }
:root[data-theme="light"] .gui-btn { background: var(--bg1); }

.brand-mark { color: var(--jade); }
.brand-mark svg { width: 20px; height: 20px; }
.logo-img { width: 20px; height: 20px; object-fit: contain; display: block; }
.brand-word {
  font-weight: 700;
  letter-spacing: 1.6px;
  font-size: 12.5px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══════════════ 对话区顶栏 ═══════════════ */
/* 性能关键：顶栏不用 backdrop-filter——滚动内容持续从其下经过时每帧重做 14px 模糊是回看卡顿主源；加深深色渐变替代 */
#chat-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: linear-gradient(rgba(12, 15, 21, .97), rgba(12, 15, 21, .9));
  box-shadow: 0 1px 0 var(--line);
}
#chat-scroll { padding-top: 60px; }
.hd-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.hd-model:hover { background: var(--bg2); border-color: var(--line); }
.hd-model-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ai);
  box-shadow: 0 0 8px rgba(151, 136, 255, .6);
}
#hd-model-label {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-chev { display: inline-flex; color: var(--text3); }
.hd-chev svg { width: 13px; height: 13px; }

.hd-ws {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text3);
  font-size: 12px;
  transition: all .15s;
  max-width: 180px;
}
.hd-ws:hover { background: var(--bg2); color: var(--text2); }
.hd-ws svg { width: 13px; height: 13px; flex: none; }
#hd-ws-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hd-space { flex: 1; }
.hd-title {
  color: var(--text3);
  font-size: 12.5px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--text2);
  transition: all .15s;
}
.hd-icon:hover { background: var(--bg2); color: var(--text); }
.hd-icon svg { width: 16px; height: 16px; }
.hd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--text2);
  font-size: 12.5px;
  transition: all .15s;
}
.hd-btn:hover { background: var(--bg2); color: var(--text); }
.hd-btn svg { width: 15px; height: 15px; }

/* 模型徽章 + 上下文环 */
.model-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text2);
  font-size: 12px;
  transition: all .15s;
}
.model-chip:hover { border-color: var(--line2); color: var(--text); }
.ctx-ring { width: 15px; height: 15px; transform: rotate(-90deg); }
.ctx-ring-bg { fill: none; stroke: var(--line2); stroke-width: 2.6; }
.ctx-ring-val {
  fill: none;
  stroke: var(--ai);
  stroke-width: 2.6;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s ease;
}
.ctx-ring-val.hot { stroke: var(--amber); }

/* 工作区徽章 */
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text3);
  font-size: 12px;
  transition: all .15s;
  max-width: 180px;
}
.ws-chip:hover { border-color: var(--line); color: var(--text2); background: var(--bg2); }
.ws-chip svg { width: 13px; height: 13px; flex: none; }
#ws-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 窗口控制（Windows 三件套） */
.win-btn {
  width: 44px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2);
  transition: background .12s;
}
.win-btn i { display: block; }
#win-min i { width: 11px; height: 1.4px; background: currentColor; }
#win-max i { width: 10px; height: 10px; border: 1.4px solid currentColor; border-radius: 2.5px; }
body.is-maximized #win-max i { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-top: 1.4px solid currentColor; border-radius: 0; margin: 2px -2px 0 0; }
.win-close i { position: relative; width: 12px; height: 12px; }
.win-close i::before, .win-close i::after {
  content: ''; position: absolute; top: 5.2px; left: -0.4px;
  width: 12.6px; height: 1.4px; background: currentColor; transform: rotate(45deg);
}
.win-close i::after { transform: rotate(-45deg); }
.win-btn:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.win-close:hover { background: #d63a2f; color: #fff; }

/* ═══════════════ 主体布局 ═══════════════ */
#body { flex: 1; display: flex; min-height: 0; }

#sidebar {
  width: var(--sb-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-right: 1px solid var(--line);
}
body.rail-collapsed #sidebar { margin-left: calc(-1 * var(--sb-w)); }

.sb-actions { padding: 12px 12px 8px; }
.btn-new-chat {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13.5px;
  transition: all .15s;
}
.btn-new-chat:hover { border-color: rgba(63, 216, 180, .35); background: var(--bg3); }
.btn-new-chat svg { width: 16px; height: 16px; color: var(--jade); }

/* 侧栏搜索 */
.sb-search {
  position: relative;
  margin: 0 12px 4px;
}
.sb-search-ico {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  display: inline-flex;
}
.sb-search-ico svg { width: 14px; height: 14px; }
#session-search {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: 9px;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s;
}
#session-search:focus { border-color: rgba(63, 216, 180, .35); }
#session-search::placeholder { color: var(--text3); }

.sb-label {
  padding: 14px 16px 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text3);
}
.sb-group {
  padding: 12px 12px 5px;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .5px;
}
.sb-empty { padding: 18px 14px; font-size: 12.5px; color: var(--text3); }
/* 「显示更早的会话」展开器（v3.6.0 渲染上限） */
.sb-older-more {
  display: block;
  width: 100%;
  margin: 4px 0 6px;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: var(--font-sm);
  color: var(--text3);
  background: none;
  border: 1px dashed var(--line2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.sb-older-more:hover { color: var(--text2); border-color: var(--ai-border); background: var(--ai-bg); }
.sb-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; }

.session-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 8px 0 12px;
  border-radius: 9px;
  color: var(--text2);
  font-size: 13px;
  text-align: left;
  transition: background .13s, color .13s;
}
.session-row:hover { background: var(--bg2); color: var(--text); }
.session-row.active { background: var(--bg3); color: var(--text); }
.session-row.active::before {
  content: '';
  position: absolute;
  left: 3px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px;
  background: var(--grad);
}
.sr-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text3); opacity: .5; }
.session-row.active .sr-dot { background: var(--jade); opacity: 1; box-shadow: 0 0 6px rgba(63,216,180,.6); }
.sr-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 右端为徽标（相对时间/重名编号）预留固定区：所有行省略号截断位置一致，不再探入徽标底下显乱（v3.37.7） */
  padding-right: 52px;
}
/* 重名编号徽标：独立于标题省略号，长标题下仍可见 */
.sr-dup { flex: none; font-size: 11px; color: var(--text3); }
.sr-dup[hidden] { display: none; }
/* 会话行操作组：悬浮行右端（不占布局，标题满宽）。指针悬浮带 150ms 意图延迟渐显，键盘焦点立即渐显，选中会话常驻；左缘渐隐遮罩融入行背景 */
.sr-actions {
  position: absolute;
  right: 6px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 18px;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, transparent, var(--bg2) 16px);
  opacity: 0;
  visibility: hidden;
  transform: translate(4px, -50%);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* 键盘焦点进入：立即显示（Tab 巡览需要即时反馈） */
.session-row:focus-within .sr-actions {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity .16s ease, transform .16s ease;
}
/* 指针悬浮：150ms 意图延迟——快速划过列表不闪现操作组，停驻才浮现；
   visibility 同步延后翻转，延迟期内不拦截行内点击 */
.session-row:hover .sr-actions {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity .16s ease .15s, transform .16s ease .15s, visibility 0s linear .15s;
}
/* 选中会话：操作组常驻显示（不依赖悬浮，立即渐显无延迟）；重名编号/相对时间同步让位 */
.session-row.active .sr-actions {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  background: linear-gradient(90deg, transparent, var(--bg3) 16px);
  transition: opacity .16s ease, transform .16s ease;
}
.sr-actions .icon-btn { width: 22px; height: 22px; }
.sr-actions .icon-btn svg { width: 13.5px; height: 13.5px; }
/* 重名编号：悬浮右端，优先级高于相对时间（有编号时隐藏 meta）；hover 时让位操作组 */
.session-row .sr-dup {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 0 1px 20px; /* 与 .sr-meta 渐变区等宽 20px：两类徽标几何一致 */
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, transparent, var(--bg1) 16px);
  pointer-events: none;
}
.session-row.active .sr-dup { background: linear-gradient(90deg, transparent, var(--bg3) 16px); opacity: 0; }
/* 编号让位：焦点立即；悬浮与操作组同步延迟，避免「编号已消失、按钮未出现」的空档 */
.session-row:focus-within .sr-dup { opacity: 0; }
.session-row:hover .sr-dup { opacity: 0; transition: opacity .16s ease .15s; }
.session-row:has(.sr-dup:not([hidden])) .sr-meta { display: none; }
.sr-del.confirm { color: var(--coral); background: rgba(255, 111, 97, .12); }
.sr-input {
  flex: 1;
  min-width: 0;
  background: var(--bg0);
  border: 1px solid rgba(63, 216, 180, .4);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  padding: 4px 7px;
  outline: none;
}
.sb-foot { padding: 8px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 4px; }
.sb-user-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  min-width: 0;
}
.sb-user-btn:hover { background: var(--bg2); }
.sb-user-avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
}
.sb-user-avatar svg { width: 16px; height: 16px; }
.sb-user-info { display: flex; flex-direction: column; min-width: 0; }
.sb-user-name { font-size: 12.5px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-plan { font-size: 10.5px; color: var(--muted); }
.sb-gear-btn {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.sb-gear-btn:hover { background: var(--bg2); color: var(--fg); }
.sb-gear-btn svg { width: 16px; height: 16px; }
.sb-foot-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text2);
  font-size: 13px;
  transition: all .13s;
}
.sb-foot-btn:hover { background: var(--bg2); color: var(--text); }
.sb-avatar {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad);
  color: var(--grad-ink);
}
.sb-avatar svg { width: 14px; height: 14px; }
.sb-foot-label { flex: 1; text-align: left; }
.sb-foot-ico { display: inline-flex; color: var(--text3); }
.sb-foot-ico svg { width: 15px; height: 15px; }

/* ═══════════════ 聊天区 ═══════════════ */
#chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; container-type: inline-size; contain: layout style; padding: 0 40px; }
/* 窄列（展区打开/小窗）：输入区按钮只留图标，提示语隐藏 */
@container (max-width: 720px) {
  .cp-hint, .cp-act-label, .hd-chev { display: none !important; }
  .cp-act { padding: 0; }
  .cp-act.cp-act { width: 34px; justify-content: center; }
  .cp-left { gap: 4px; }
}

#chat-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 性能关键（回看长会话）：视口外消息跳过渲染（content-visibility 只画看得见的）；
   contain-intrinsic-size 带 auto 关键词=记住每条已渲染的真实高度，滚动条几乎不跳 */
#messages > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
#chat-column {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 26px 26px 12px;
}

/* ———— 空态 ———— */
/* ═══ 空态（满窗背景：极光/神经网络层铺满整个滚动视口，不再被 780px 列裁剪）═══ */
#empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 250px);
  padding: 6vh 10px 30px;
  overflow: hidden;
  width: 100%;
}
#neural-bg { display: none; }
#neural-bg-keep {
  position: absolute;
  inset: -40px 0;
  opacity: .8;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 78%);
}
.es-inner { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.es-logo { margin-bottom: 18px; filter: drop-shadow(0 0 28px rgba(63, 216, 180, .35)); }
.es-logo svg { width: 84px; height: 84px; }
.es-logo .logo-img { width: 92px; height: 92px; margin: 0 auto; }
.es-title { font-size: 34px; font-weight: 550; letter-spacing: .02em; margin-bottom: 6px; }
.es-sub { margin-top: 4px; color: var(--text3); font-size: 14px; line-height: 1.7; letter-spacing: .01em; }
.es-sub .es-hl { color: var(--ai); }
.es-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  width: 100%;
  max-width: 760px;
}
.es-card { min-width: 0; }
.es-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 15px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg1) 72%, transparent);
  border: 1px solid var(--line);
  text-align: left;
  transition: all .18s ease;
  backdrop-filter: blur(6px);
}
.es-card:hover {
  border-color: rgba(151, 136, 255, .4);
  background: var(--bg2);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}
.es-card-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--jade); background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .22);
}
.es-card-icon svg { width: 17px; height: 17px; }
.es-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.es-card-desc { font-size: 12px; color: var(--text3); line-height: 1.5; }

/* ———— 消息项 ———— */
#messages { display: flex; flex-direction: column; gap: 26px; padding-bottom: 8px; }
.item { animation: rise .28s ease; }
@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
}

/* 用户气泡：右对齐，翡翠渐变暗底 */
.msg-user { display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; }
/* 系统自查胶囊（v3.5.0）：智能引擎步数校正，非用户发言 */
.msg-syscheck {
  width: 100%;
  padding: 8px 14px;
  border: 1px dashed var(--line2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .02);
  color: var(--text3);
  font-size: var(--font-sm);
  line-height: 1.6;
  text-align: center;
}
:root[data-theme="light"] .msg-syscheck { background: rgba(0, 0, 0, .02); }
.msg-user-bubble {
  max-width: 78%;
  padding: 12px 17px;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, rgba(151, 136, 255, .2), rgba(151, 136, 255, .08));
  border: 1px solid rgba(151, 136, 255, .3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.msg-user-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s;
  flex: none;
}
.msg-user:hover .msg-user-actions { opacity: 1; }
.msg-edit-box { display: flex; flex-direction: column; gap: 8px; margin-left: auto; width: 78%; }
.msg-edit-ta {
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--ai-border);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  user-select: text;
}
.msg-edit-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* 助手消息：无气泡平铺，悬浮头像 */
.msg-ai { display: flex; gap: 13px; }
.ai-avatar { flex: none; padding-top: 2px; }
.ai-avatar-orb {
  display: block;
  width: 30px; height: 30px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 42%),
    linear-gradient(135deg, #9788ff, #b3a7ff);
  box-shadow: 0 3px 12px rgba(151, 136, 255, .3);
}
.ai-body { flex: 1; min-width: 0; position: relative; font-size: 14.5px; line-height: 1.78; letter-spacing: .005em; }
.msg-ai { display: flex; gap: 12px; }
.ai-avatar-orb { width: 26px; height: 26px; }
.ai-md {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  user-select: text;
  word-break: break-word;
}

/* 流式光标：呼吸方块 */
.ai-md.streaming > :last-child::after,
.ai-md.streaming > .md-p:only-child::after {
  content: '';
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--grad);
  animation: caret 1.05s ease-in-out infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

.ai-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  min-height: 20px;
  font-size: 11.5px;
  color: var(--text3);
}
.interrupt-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 180, 84, .12);
  border: 1px solid rgba(255, 180, 84, .3);
  color: var(--amber);
  font-size: 11px;
}
.ai-actions {
  position: absolute;
  top: -4px; right: 0;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1px;
}
.ai-body:hover .ai-actions { opacity: 1; }

/* ═══════════════ 思考过程卡片 ═══════════════ */
.think {
  margin: 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(17, 21, 29, .55);
  overflow: hidden;
  transition: border-color .2s;
}
.think.live { border-color: var(--ai-border); }
.think-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;
  color: var(--text2);
  font-size: 12.5px;
}
.think-head:hover { background: rgba(255, 255, 255, .025); }
.think-ico { color: var(--text3); display: inline-flex; }
.think-ico svg { width: 16px; height: 16px; }
.think.live .think-ico { color: var(--ai); animation: node-pulse 1.6s ease-in-out infinite; }
@keyframes node-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(63, 216, 180, 0)); }
  50% { opacity: .55; filter: drop-shadow(0 0 6px rgba(151, 136, 255, .8)); }
}
.think-label { font-weight: 550; letter-spacing: .3px; }
.think-state { color: var(--text3); font-size: 11.5px; }
.think.live .think-state { color: var(--ai); }
.think-chevron { margin-left: auto; display: inline-flex; color: var(--text3); transition: transform .2s; }
.think-chevron svg { width: 14px; height: 14px; }
.think.open .think-chevron { transform: rotate(180deg); }

.think-body {
  padding: 2px 14px 12px 37px;
}
.think-text {
  font-size: 12.8px;
  line-height: 1.8;
  color: #96a7bc;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  border-left: 2px solid rgba(63, 216, 180, .25);
  padding-left: 12px;
  max-height: 300px;
  overflow-y: auto;
}
.think-body.streaming .think-text { color: #a9bccf; }

/* ═══════════════ 工具调用芯片 ═══════════════ */
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
}
.tool-chip:hover { border-color: var(--line2); color: var(--text); }
.tool-ico { display: inline-flex; color: var(--text3); }
.tool-ico svg { width: 15px; height: 15px; }
.tool-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-chev { display: inline-flex; color: var(--text3); transition: transform .2s; }
.tool-chev svg { width: 13px; height: 13px; }
.tool-chip.open .tool-chev { transform: rotate(180deg); }

.tool-status { display: inline-flex; align-items: center; }
.tool-status .ok, .tool-status .err { display: none; }
.tool-status .ok svg, .tool-status .err svg { width: 13px; height: 13px; }
.tool-chip[data-state="running"] .spin {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.6px solid rgba(63, 216, 180, .25);
  border-top-color: var(--jade);
  animation: rot .7s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }
.tool-chip[data-state="ok"] .spin { display: none; }
.tool-chip[data-state="ok"] .ok { display: inline-flex; color: var(--jade); }
.tool-chip[data-state="error"] { border-color: rgba(255, 111, 97, .3); }
.tool-chip[data-state="error"] .spin { display: none; }
.tool-chip[data-state="error"] .err { display: inline-flex; color: var(--coral); }
.tool-chip[data-state="denied"] { border-color: rgba(255, 180, 84, .35); }
.tool-chip[data-state="denied"] .spin { display: none; }
.tool-chip[data-state="denied"] .err { display: inline-flex; color: var(--amber); }

/* ═══════════════ 计划卡 ═══════════════ */
.plan-card {
  border: 1px solid rgba(52, 211, 153, .18);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(52, 211, 153, .05), rgba(10, 10, 10, .5));
  overflow: hidden;
}
.plan-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.plan-ico { display: inline-flex; color: var(--jade); }
.plan-ico svg { width: 16px; height: 16px; }
.plan-title { font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.plan-progress {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--jade);
  background: rgba(63, 216, 180, .1);
  border: 1px solid rgba(63, 216, 180, .22);
  padding: 2px 9px;
  border-radius: 999px;
}
.plan-steps { list-style: none; padding: 9px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.plan-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); }
.plan-step .ps-mark {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--text3);
  position: relative;
}
.plan-step.doing { color: var(--text); }
.plan-step.doing .ps-mark { border-color: var(--jade); border-top-color: transparent; animation: rot .8s linear infinite; }
.plan-step.done { color: var(--text3); text-decoration: line-through; text-decoration-color: rgba(63, 216, 180, .5); }
.plan-step.done .ps-mark { border-color: var(--jade); background: rgba(63, 216, 180, .18); }
.plan-step.done .ps-mark::after {
  content: '';
  position: absolute;
  left: 3.2px; top: 3px;
  width: 6px; height: 3.5px;
  border-left: 1.8px solid var(--jade);
  border-bottom: 1.8px solid var(--jade);
  transform: rotate(-45deg);
}

/* ═══════════════ 蜂群编排卡（v3.3.0 多代理可视） ═══════════════ */
.swarm-card {
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ai-bg), rgba(10, 10, 10, .5));
  overflow: hidden;
}
.swarm-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.swarm-ico { display: inline-flex; color: var(--ai); }
.swarm-ico svg { width: 16px; height: 16px; }
.swarm-title { font-size: var(--font-md); font-weight: var(--weight-semibold); letter-spacing: .3px; }
.swarm-count { font-size: var(--font-sm); color: var(--text3); }
.swarm-summary {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--ai);
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  transition: all var(--dur-base) var(--ease-out);
}
.swarm-head[data-state="done"] .swarm-summary { color: var(--jade); background: var(--ok-bg); border-color: var(--ok-border); }
.swarm-tasks { padding: 9px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.swarm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-md);
  color: var(--text3);
  transition: color var(--dur-base) var(--ease-out);
}
.swarm-row .swarm-dot {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--text3);
  position: relative;
}
.swarm-row .swarm-state { margin-left: auto; font-size: var(--font-sm); color: var(--text3); }
.swarm-row[data-state="queued"] .swarm-state { opacity: .55; }
.swarm-row[data-state="running"] { color: var(--text); }
.swarm-row[data-state="running"] .swarm-dot { border-color: var(--ai); border-top-color: transparent; animation: rot .8s linear infinite; }
.swarm-row[data-state="running"] .swarm-state { color: var(--ai); }
.swarm-row[data-state="ok"] { color: var(--text2); }
.swarm-row[data-state="ok"] .swarm-dot { border-color: var(--jade); background: var(--ok-bg); }
.swarm-row[data-state="ok"] .swarm-dot::after {
  content: '';
  position: absolute;
  left: 3.2px; top: 3px;
  width: 6px; height: 3.5px;
  border-left: 1.8px solid var(--jade);
  border-bottom: 1.8px solid var(--jade);
  transform: rotate(-45deg);
}
.swarm-row[data-state="ok"] .swarm-state { color: var(--jade); }
.swarm-row[data-state="fail"] { color: var(--text2); }
.swarm-row[data-state="fail"] .swarm-dot { border-color: var(--coral); background: var(--err-bg); }
.swarm-row[data-state="fail"] .swarm-dot::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--coral);
  line-height: 1;
}
.swarm-row[data-state="fail"] .swarm-state { color: var(--coral); }

/* 操作透明化卡（v3.41）：本回合高危动作回执 */
.ops-card {
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  background: var(--bg1);
  overflow: hidden;
}
.ops-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.ops-ico { display: inline-flex; color: var(--ai); }
.ops-ico svg { width: 15px; height: 15px; }
.ops-title { font-size: var(--font-md); font-weight: var(--weight-semibold); letter-spacing: .3px; }
.ops-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--jade);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  padding: 1.5px 9px;
  border-radius: var(--radius-full);
  transition: all var(--dur-base) var(--ease-out);
}
.ops-count[data-health="warn"] { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.ops-count[data-health="denied"] { color: var(--coral); background: var(--err-bg); border-color: var(--err-border); }
.ops-list { padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
.ops-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: var(--font-md);
  color: var(--text2);
}
.ops-row .ops-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--jade);
}
.ops-row[data-state="fail"] .ops-dot { background: var(--coral); }
.ops-row[data-state="denied"] .ops-dot { background: transparent; border: 1.6px solid var(--coral); }
.ops-row .ops-name {
  flex: none;
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--text);
}
.ops-row .ops-name[data-risk="exec"] { color: var(--coral); }
.ops-row .ops-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--text3);
}
.ops-row.ops-more { color: var(--text3); font-size: var(--font-sm); padding-left: 2px; }

/* 缓存命中徽章（v3.7.0）：越用越省 */
.meta-cache {
  font-size: var(--font-xs);
  padding: 1.5px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--ok-border);
  background: var(--ok-bg);
  color: var(--jade);
  letter-spacing: .4px;
}
/* 远程控制状态卡（v3.9.0） */
.remote-status { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.remote-code { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--bg1); }
.remote-code span { font-size: var(--font-xs); color: var(--text3); }
.remote-code b { font-family: var(--mono); font-size: 22px; letter-spacing: 4px; color: var(--ai); }

/* 扫码配对（v3.8.0 远程与扫码） */
.pair-box { display: flex; gap: 20px; align-items: center; padding: 16px 18px; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--bg1); flex-wrap: wrap; }
.pair-qr img { display: block; border-radius: var(--radius-md); border: 1px solid var(--line2); background: #fff; }
.pair-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.pair-pin-label { font-size: var(--font-sm); color: var(--text3); }
.pair-pin { font-family: var(--mono); font-size: 30px; font-weight: var(--weight-bold); letter-spacing: 8px; color: var(--ai); }
.pair-tip { font-size: var(--font-sm); color: var(--text3); line-height: 1.7; }
.pair-state { font-size: var(--font-md); color: var(--text2); margin-top: 2px; }
.pair-state.ok { color: var(--jade); font-weight: var(--weight-semibold); }

/* 信心指示徽章（v3.3.0）：回复元信息区，工具成败驱动 */
.meta-conf {  font-size: var(--font-xs);
  padding: 1.5px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line2);
  color: var(--text3);
  letter-spacing: .4px;
}
.meta-conf.conf-high { color: var(--jade); border-color: var(--ok-border); background: var(--ok-bg); }
.meta-conf.conf-mid { color: var(--warn); border-color: var(--warn-border); background: var(--warn-bg); }
.meta-conf.conf-low { color: var(--coral); border-color: var(--err-border); background: var(--err-bg); }

/* ═══════════════ 审批卡 ═══════════════ */
.approval-card {
  border: 1px solid rgba(255, 180, 84, .28);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 180, 84, .06), rgba(17, 21, 29, .55));
  overflow: hidden;
}
.approval-card[data-risk="exec"] { border-color: rgba(255, 111, 97, .3); background: linear-gradient(180deg, rgba(255, 111, 97, .05), rgba(17, 21, 29, .55)); }
.approval-card[data-decision="deny"] { border-color: rgba(255, 111, 97, .4); }
.approval-card[data-decision="allow"], .approval-card[data-decision="always"] { border-color: rgba(63, 216, 180, .3); }
.approval-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px 9px; }
.approval-ico { display: inline-flex; color: var(--amber); }
.approval-card[data-risk="exec"] .approval-ico { color: var(--coral); }
.approval-ico svg { width: 18px; height: 18px; }
.approval-title { font-size: 13.5px; font-weight: 600; }
.approval-title b { font-family: var(--mono); color: var(--amber); font-weight: 650; }
.approval-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.approval-risk {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 180, 84, .12);
  border: 1px solid rgba(255, 180, 84, .3);
  color: var(--amber);
}
.approval-card[data-risk="exec"] .approval-risk { background: rgba(255, 111, 97, .1); border-color: rgba(255, 111, 97, .3); color: var(--coral); }
.approval-args {
  margin: 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: #b9c6d6;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  max-height: 180px;
  overflow: auto;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-all;
}
.approval-actions { display: flex; gap: 8px; padding: 11px 14px 13px; }
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12.5px;
  border: 1px solid var(--line2);
  color: var(--text2);
  transition: all .15s;
}
.ap-btn svg { width: 13px; height: 13px; }
.ap-btn:hover { color: var(--text); border-color: var(--text3); }
.ap-allow { background: rgba(63, 216, 180, .12); border-color: rgba(63, 216, 180, .35); color: var(--jade); }
.ap-allow:hover { background: rgba(63, 216, 180, .2); color: #7cecc9; }
.ap-deny:hover { border-color: rgba(255, 111, 97, .45); color: var(--coral); }
.approval-done {
  padding: 10px 14px 12px;
  font-size: 12.5px;
  color: var(--jade);
}
.approval-card[data-decision="deny"] .approval-done,
.approval-card[data-decision="timeout"] .approval-done { color: var(--coral); }

.tool-detail { margin-top: 7px; }
.tool-detail-pre {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: #b9c6d6;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  overflow-x: auto;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 运行时提示 */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(255, 111, 97, .07);
  border: 1px solid rgba(255, 111, 97, .22);
  color: #f2b6ae;
  font-size: 13px;
  line-height: 1.55;
  user-select: text;
}
.notice-ico { display: inline-flex; color: var(--coral); padding-top: 1px; }
.notice-ico svg { width: 15px; height: 15px; }

/* ═══════════════ Markdown ═══════════════ */
.md-p { margin: .45em 0; }
.md-h {
  margin: .9em 0 .45em;
  font-weight: 650;
  letter-spacing: .3px;
}
.md-h2 { font-size: 17px; }
.md-h3 { font-size: 15.5px; }
.md-h4, .md-h5, .md-h6 { font-size: 14px; color: var(--text); }
.md-list { margin: .45em 0; padding-left: 1.5em; }
.md-list li { margin: .28em 0; }
.md-quote {
  margin: .6em 0;
  padding: 6px 14px;
  border-left: 2.5px solid rgba(63, 216, 180, .45);
  background: rgba(63, 216, 180, .05);
  border-radius: 0 9px 9px 0;
  color: var(--text2);
}
.md-hr { border: none; border-top: 1px solid var(--line2); margin: 1em 0; }
.md-code {
  font-family: var(--mono);
  font-size: .9em;
  background: rgba(74, 168, 255, .09);
  border: 1px solid rgba(74, 168, 255, .16);
  color: #9ecfff;
  border-radius: 5px;
  padding: 1.5px 6px;
}
.md-block {
  margin: .7em 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #0a0d13;
}
.md-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px 0 13px;
  background: rgba(255, 255, 255, .025);
  border-bottom: 1px solid var(--line);
}
.md-lang { font-family: var(--mono); font-size: 11px; color: var(--text3); letter-spacing: .5px; }
.md-copy {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text3);
}
.md-copy:hover { color: var(--text); background: var(--bg3); }
.md-copy::before {
  content: '';
  width: 12px; height: 12px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  position: relative;
  box-shadow: -3px -3px 0 -1.1px currentColor;
}
.md-pre {
  padding: 12px 14px;
  overflow-x: auto;
  user-select: text;
}
.md-pre code {
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.65;
  color: #c6d4e4;
  background: none;
  border: none;
  padding: 0;
}
.md-table-wrap { overflow-x: auto; margin: .7em 0; border: 1px solid var(--line); border-radius: 10px; }
.md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.md-table th, .md-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.md-table th { background: var(--bg2); color: var(--text); font-weight: 600; }
.md-table tr:last-child td { border-bottom: none; }
.md-table td { color: var(--text2); user-select: text; }

/* ═══════════════ 回到底部 ═══════════════ */
#jump-latest {
  position: absolute;
  bottom: 128px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  z-index: 5;
  transition: all .15s;
}
#jump-latest:hover { color: var(--text); border-color: rgba(63, 216, 180, .4); }
#jump-latest svg { width: 13px; height: 13px; }

/* ═══════════════ 输入区 ═══════════════ */
#composer {
  flex: none;
  padding: 4px 26px 14px;
  background: linear-gradient(transparent, var(--bg0) 38%);
}
.cp-queue {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  margin: 0 4px 8px auto; align-self: flex-end;
  max-width: 88%;
  padding: 0;
  background: none; border: none; backdrop-filter: none; box-shadow: none;
}
.q-chip {
  display: flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg1) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(151, 136, 255, .3);
  color: var(--text2);
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  animation: queue-in .22s var(--ease-out);
}
.q-text { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-remove {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--bg3); color: var(--text3);
  cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;
  transition: all .13s;
}
.q-remove:hover { background: rgba(248, 113, 113, .16); color: #f87171; }
@keyframes queue-in { from { opacity: 0; transform: translateY(4px); } }
.cp-queue .q-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ai);
  animation: q-pulse 1.1s ease-in-out infinite;
}
@keyframes q-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.cp-queue .q-count {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--ai), var(--jade));
}
.cp-shell {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  border-radius: 26px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
  transition: border-color .2s, box-shadow .2s;
}
/* 极光环境光：聚焦呼吸、运行时流转 */
.cp-shell::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  background: conic-gradient(from var(--aurora-angle, 0deg),
    rgba(151, 136, 255, 0), rgba(151, 136, 255, .85), rgba(240, 240, 240, .6),
    rgba(52, 211, 153, .5), rgba(151, 136, 255, .55), rgba(151, 136, 255, 0));
  opacity: 0;
  transition: opacity .4s, box-shadow .4s;
  z-index: -1;
  filter: blur(16px);
  animation: aurora-spin 4s linear infinite;
  animation-play-state: paused; /* 空闲暂停：自定义属性动画走不了合成器，逐帧重绘是常驻主线程税；聚焦/对话态恢复 */
  box-shadow: 0 0 24px rgba(151, 136, 255, .12);
}
@keyframes aurora-spin { to { --aurora-angle: 360deg; } }
@property --aurora-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.cp-shell:focus-within::before { opacity: .7; animation: aurora-spin 4s linear infinite, aurora-breathe 3.2s ease-in-out infinite; }
@keyframes aurora-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(151, 136, 255, .12); }
  50% { transform: scale(1.015); box-shadow: 0 0 40px rgba(151, 136, 255, .22); }
}
.cp-shell.running::before { opacity: 1; box-shadow: 0 0 35px rgba(151,136,255,.25); animation-play-state: running; }
.cp-shell:focus-within::before { animation-play-state: running; }
.cp-shell:focus-within {
  border-color: var(--ai-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 3px rgba(151, 136, 255, .07);
}
#cp-input {
  display: block;
  width: 100%;
  max-height: 260px;
  padding: 17px 19px 4px;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  user-select: text;
}
#cp-input::placeholder { color: var(--text3); }
.cp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 9px 16px;
}
.cp-hint { font-size: 11.5px; color: var(--text3); }
.cp-left { display: flex; align-items: center; gap: 10px; }
.cp-attach, .cp-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text2);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
  border: 1px solid transparent;
}
.cp-attach { padding: 0; width: 34px; justify-content: center; }
.cp-act:hover, .cp-attach:hover { color: var(--text); background: var(--bg3); border-color: var(--line2); }
.cp-act svg { width: 15px; height: 15px; }
.cp-act .hd-chev svg { width: 12px; height: 12px; }
.cp-act .cp-act-label { font-size: 12.5px; }
.cp-act-label { font-weight: 500; }
.perm-menu { width: 340px; }
.cp-right { display: flex; align-items: center; gap: 12px; }
.cp-meter { font-size: 11.5px; color: var(--text2); letter-spacing: .3px; }

.send-btn {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #09090b;
  background: linear-gradient(135deg, var(--ai), #b3a7ff);
  box-shadow: 0 4px 18px rgba(151, 136, 255, .35);
  transition: all .18s;
}
.send-btn svg { width: 20px; height: 20px; }
.send-btn:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 6px 24px rgba(151, 136, 255, .5); }
.send-btn:active { transform: translateY(0); }
.send-btn.stopping {
  background: none;
  border: 1.6px solid var(--coral);
  color: var(--coral);
  box-shadow: none;
}
.send-btn.stopping:hover { background: rgba(255, 111, 97, .1); }
.send-btn.stopping svg { width: 16px; height: 16px; }

/* 工具徽标行 */
.cp-tools {
  max-width: var(--content-w);
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cp-tools-label { font-size: 11px; color: var(--text3); letter-spacing: 1px; }
.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bg1);
  border: 1px solid var(--line);
  color: var(--text3);
  font-size: 11px;
  font-family: var(--mono);
}
.tool-pill svg { width: 11.5px; height: 11.5px; color: var(--text3); }

/* ═══════════════ 弹窗 ═══════════════ */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 11, .62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }
/* 弹窗收场：淡出 + 微缩下沉（对齐 ChatGPT 关闭手感；JS 等动画走完再 hidden） */
.modal-mask.closing { animation: fade-out .16s ease forwards; pointer-events: none; }
.modal-mask.closing .modal { animation: pop-out .18s var(--ease-out) forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.985) translateY(8px); } }
.modal {
  position: relative;
  width: 480px;
  max-width: calc(100vw - 48px);
  border-radius: 18px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  animation: pop .2s cubic-bezier(.2, .9, .3, 1.2);
}
/* 设置 = 准全屏页面（大厂范式：设置即页面），默认铺满 94vw/92vh；用户可拖拽缩放且记住尺寸 */
.modal-wide {
  width: 94vw; height: 92vh;
  max-width: 1560px; max-height: 1000px;
  display: flex; flex-direction: column;
  resize: both; min-width: 820px; min-height: 560px;
  overflow: hidden;
  border-radius: 16px;
}
/* 准全屏设置面板：收敛进场（无回弹——大面板弹跳显廉价），覆盖小弹窗的 pop */
.modal-wide { animation: wide-in .26s var(--ease-out); }
@keyframes wide-in { from { opacity: 0; transform: scale(.985) translateY(10px); } }
.modal-wide .modal-head { padding: 16px 22px 12px; }
.modal-wide .modal-head .modal-title { font-size: 16px; font-weight: 750; }
/* pane 内容可读宽度（大屏不散铺） */
.st-pane-inner { max-width: 860px; }
.st-pane { padding: 0 28px 28px; overflow-y: auto; }
.st-pane-head { position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--bg1) 82%, transparent); padding: 18px 0 12px; margin: 0 0 6px; }
.modal-wide .modal-head { cursor: default; }
/* 右下角拖拽手柄视觉提示（原生 resize grip 所在位置） */
.modal-wide::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(135deg, transparent 0 50%, var(--line2) 50% 60%, transparent 60% 70%, var(--line2) 70% 80%, transparent 80% 90%, var(--line2) 90%); border-radius: 0 0 16px 0; opacity: .8; }
.st-layout { flex: 1; display: flex; min-height: 0; }
.st-nav {
  width: 200px;
  flex: none;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
}
.st-nav::-webkit-scrollbar { width: 8px; }
.st-nav::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.st-nav::-webkit-scrollbar-track { background: transparent; }
.st-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: 6px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 9px; color: var(--text3); }
.st-search svg { width: 13px; height: 13px; flex: none; }
.st-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text1); font-size: 12px; }
.st-search input::placeholder { color: var(--text3); }
.st-search:focus-within { border-color: var(--ai-border); box-shadow: var(--focus-ring); }
.st-grp { margin-bottom: 4px; }
.st-grp-label { display: block; padding: 8px 10px 3px; font-size: 10px; font-weight: 600; letter-spacing: .5px; color: var(--text3); text-transform: uppercase; }
.st-pane-head { display: flex; flex-direction: column; gap: 3px; margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.st-pane-head b { font-size: 16px; font-weight: 700; color: var(--text1); letter-spacing: .01em; }
.st-pane-head span { font-size: 11.5px; color: var(--text3); }
.st-grp-hidden { display: none !important; }
.st-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--text2);
  font-size: 13px;
  text-align: left;
  transition: background .13s, color .13s;
  min-width: 0;
  white-space: nowrap;
}
.st-item svg { width: 16px; height: 16px; }
.st-item:hover { background: var(--bg2); color: var(--text); }
.st-item.active { background: var(--bg3); color: var(--text); }
.st-panes { flex: 1; overflow-y: auto; padding: 16px 22px; }
.st-pane { display: flex; flex-direction: column; gap: 10px; }
.st-pane .field { gap: 4px; }
.st-pane .field > span { font-size: 11.5px; }
.st-h { font-size: 13.5px; font-weight: 650; margin-bottom: 0; }
.st-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
/* 权限卡 */
.perm-list { display: flex; flex-direction: column; gap: 9px; }
.perm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  text-align: left;
  transition: all .15s;
}
.perm-card:hover { border-color: var(--line2); }
.perm-card.active { border-color: rgba(63, 216, 180, .45); background: rgba(63, 216, 180, .06); }
.perm-ico { display: inline-flex; color: var(--text3); flex: none; }
.perm-card.active .perm-ico { color: var(--jade); }
.perm-ico svg { width: 18px; height: 18px; }
.perm-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.perm-body b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.perm-body i { font-style: normal; font-size: 12px; color: var(--text3); line-height: 1.5; }
.perm-check { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.6px solid var(--text3); position: relative; }
.perm-card.active .perm-check { border-color: var(--jade); background: var(--jade); }
.perm-card.active .perm-check::after {
  content: '';
  position: absolute;
  left: 4.4px; top: 2.2px;
  width: 4.5px; height: 8px;
  border-right: 2px solid #06251f;
  border-bottom: 2px solid #06251f;
  transform: rotate(45deg);
}
/* ═══ 换肤系统 ═══ */
#skin-layer{position:fixed;inset:0;z-index:0;display:none;pointer-events:none}
#skin-layer #skin-media{position:absolute;inset:0}
#skin-layer #skin-media img,#skin-layer #skin-media video{width:100%;height:100%;object-fit:cover}
#skin-layer #skin-dim{position:absolute;inset:0;background:rgba(3,5,9,.35)}
body.skin-on{background:transparent}
body.skin-on #sidebar{background:rgba(8,10,14,var(--skin-opacity,.82));border-right-color:transparent}
body.skin-on #titlebar{background:transparent}
body.skin-on #chat-header{background:rgba(8,10,14,calc(var(--skin-opacity,.82) * .8));backdrop-filter:blur(10px)}
body.skin-on #chat,body.skin-on #chat-scroll{background:transparent}
body.skin-on .hero,body.skin-on section,body.skin-on .stats{background:transparent}
body.skin-on .cp-shell{background:rgba(13,16,22,calc(var(--skin-opacity,.82) - .08));border-color:rgba(240,240,240,.1)}
body.skin-on .modal{background:rgba(15,15,15,.96)}
body.skin-on .card,body.skin-on .scene{background:rgba(13,16,22,calc(var(--skin-opacity,.82) - .1))}
.skin-sliders{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.skin-sliders label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.skin-sliders label b{color:var(--ai);font-weight:600}
.skin-sliders input[type=range]{width:100%;accent-color:var(--ai);height:22px}
.skin-add{display:flex;gap:8px;margin-bottom:14px}
.skin-add-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-style:dashed}
.skin-add-btn svg{width:15px;height:15px}
.skin-reset-btn{height:38px}

/* ═══ 插件市场卡片 ═══ */
.market-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;transition:all .15s}
.market-card:hover{border-color:var(--border2)}
.market-card .mc-body{flex:1;min-width:0}
.market-card b{font-size:13.5px;font-weight:650;color:var(--text)}
.market-card i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.market-card .mc-meta{font-size:11px;color:var(--text3);font-family:var(--mono)}
.market-card .mk-btn{flex:none;height:30px;padding:0 16px}

/* ═══ 更新提示条 ═══ */
.update-bar {
  position: fixed;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--ai-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font-size: 12.5px;
  color: var(--text2);
  animation: rise .3s ease;
}
.ub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 8px var(--ai); flex: none; }
.ub-btn {
  height: 26px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0f0f0, #fff);
  color: #09090b;
  font-size: 12px;
  font-weight: 650;
}
.ub-btn:hover { filter: brightness(1.06); }
.ub-close { width: 22px; height: 22px; border-radius: 50%; color: var(--text3); display: inline-flex; align-items: center; justify-content: center; }
.ub-close:hover { color: var(--text); background: var(--bg2); }

/* 服务商网格 */
.provider-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  text-align: left;
  transition: all .15s;
  position: relative;
}
.provider-row:hover { border-color: var(--line2); background: var(--bg3); }
.provider-row.active { border-color: var(--ai-border); background: rgba(151, 136, 255, .07); }
.pr-radio {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  position: relative;
  transition: border-color .15s;
}
.provider-row.active .pr-radio { border-color: var(--ai); }
.provider-row.active .pr-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ai);
}
.pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pr-models {
  font-size: 10.5px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-custom .pr-name { color: var(--ai); }
.pr-del {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--text3);
  font-size: 10px;
}
.pr-del:hover { color: var(--coral); background: rgba(248, 113, 113, .12); }
.provider-add {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.2fr auto auto;
  gap: 7px;
  margin: 8px 0 4px;
}
.provider-add input {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.provider-add input:focus { border-color: var(--ai-border); }
.provider-add .btn-ghost { height: 32px; padding: 0 12px; font-size: 12px; }

/* 插件 */
/* 模型 chips */
.model-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px 0 10px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  transition: all .13s;
  max-width: 100%;
}
.model-chip:hover { border-color: var(--ai-border); color: var(--text); }
.model-chip.active { border-color: var(--ai-border); background: rgba(151, 136, 255, .1); color: var(--text); }
.model-chip .mc-x {
  display: inline-flex;
  width: 14px; height: 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text3);
  font-size: 10px;
}
.model-chip .mc-x:hover { color: var(--coral); background: rgba(248, 113, 113, .12); }
.model-add-row { display: flex; gap: 7px; }
.model-add-row input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.model-add-row input:focus { border-color: var(--ai-border); }
.model-add-row .btn-ghost { height: 32px; padding: 0 12px; font-size: 12px; flex: none; }

.bill-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(151,136,255,.08), var(--bg2));
  border: 1px solid var(--ai-border);
}
.bs-left { flex: 1; }
.bs-plan { font-size: 16px; font-weight: 700; }
.bs-detail { font-size: 12px; color: var(--text3); margin-top: 3px; }
.cmp { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--line); align-items: center; }
.cmp-row:last-child { border-bottom: none; }
.cmp-row span { color: var(--text2); }
.cmp-row i { font-style: normal; text-align: center; color: var(--jade); }
.cmp-row i:empty::before, .cmp-row i { font-weight: 600; }
.cmp-row i:not(:empty) { }
.cmp-row.hl { background: rgba(151,136,255,.05); }
.cmp-row.hl span { color: var(--text); }
.cmp-head { background: var(--bg2); font-weight: 600; }
.cmp-head span, .cmp-head i { color: var(--text); }

/* 动态会员套餐卡（后台远程推送，domain: membership） */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
/* ═══ 套餐卡（大厂定价卡：主推渐变描边+悬浮抬升，当前套餐态）═══ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg1);
  transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
.plan-card:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: var(--shadow-2); }
.plan-card.hl {
  border-color: transparent;
  background: linear-gradient(var(--bg1), var(--bg1)) padding-box,
              linear-gradient(135deg, var(--ai), var(--jade)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 8px 28px rgba(151, 136, 255, .16);
}
.plan-card.hl:hover { box-shadow: 0 12px 34px rgba(151, 136, 255, .24); }
.plan-card.current { outline: 2px solid var(--jade); outline-offset: -2px; }
.plan-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 10px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--ai), var(--jade));
  box-shadow: 0 2px 8px rgba(151, 136, 255, .4);
}
.plan-current-tag {
  position: absolute;
  top: -9px;
  left: 12px;
  padding: 2px 10px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--jade);
  background: var(--bg2);
  border: 1px solid var(--jade);
}
.plan-name { font-size: 14px; font-weight: 750; color: var(--text); letter-spacing: .01em; }
.plan-price { display: flex; align-items: baseline; gap: 3px; }
.plan-price b { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.plan-price small { font-size: 11px; font-weight: 500; color: var(--text3); }
.plan-feats { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; flex: 1; }
.plan-feats span { font-size: 12px; color: var(--text2); display: flex; gap: 7px; align-items: baseline; line-height: 1.45; }
.plan-feats span::before { content: '✓'; color: var(--jade); font-weight: 700; font-size: 11px; flex: none; }
.plan-cta {
  margin-top: auto;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--line2);
  transition: all .15s var(--ease-out);
}
.plan-cta:hover { border-color: var(--ai-border); color: var(--ai); transform: translateY(-1px); }
.plan-card.hl .plan-cta { background: linear-gradient(135deg, var(--ai), var(--jade)); border-color: transparent; color: #fff; }
.plan-card.hl .plan-cta:hover { box-shadow: 0 4px 14px rgba(151, 136, 255, .4); }
.plan-cta.current-btn { background: var(--bg2); border-color: var(--jade); color: var(--jade); cursor: default; }
.plan-cta.current-btn:hover { transform: none; box-shadow: none; }

/* 动态公告条（domain: notice） */
.dyn-notice {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}

.st-badge {
  margin-left: auto;
  min-width: 18px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text3);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.st-badge-ai {
  background: rgba(151, 136, 255, .12);
  border-color: var(--ai-border);
  color: var(--ai);
}
.plugin-actions { display: flex; gap: 8px; }
.plugin-actions .btn-ghost { height: 32px; padding: 0 14px; font-size: 12.5px; }
.plugin-list { display: flex; flex-direction: column; gap: 8px; }
.plugin-empty {
  padding: 18px;
  border-radius: 11px;
  background: var(--bg2);
  border: 1px dashed var(--line2);
  color: var(--text3);
  font-size: 12.5px;
  text-align: center;
}
.plugin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
}
.plugin-row.error { border-color: rgba(248, 113, 113, .3); }
.pl-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-body b { font-size: 13.5px; color: var(--text); }
.pl-body i { font-style: normal; font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { font-size: 11px; color: var(--text3); }
.pl-toggle {
  width: 38px; height: 21px;
  flex: none;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  position: relative;
  transition: background .18s;
}
.pl-toggle i {
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--text3);
  transition: all .18s;
}
.pl-toggle.on { background: rgba(151, 136, 255, .3); border-color: var(--ai-border); }
.pl-toggle.on i { left: 19px; background: var(--ai); }
.plugin-doc {
  margin-top: 6px;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--bg2);
  border: 1px solid var(--line);
}
.plugin-doc h4 { font-size: 12.5px; color: var(--text); margin-bottom: 5px; }
.plugin-doc p { font-size: 12px; color: var(--text3); line-height: 1.7; }

/* 关于 */
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 6px; text-align: center; }
.about-hero [data-icon] svg { width: 64px; height: 64px; }
.about-hero h3 { font-size: 18px; }
.about-hero p { font-size: 12.5px; color: var(--text3); }
.about-rows { display: flex; flex-direction: column; }
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.about-row span { color: var(--text3); }
.about-row b { color: var(--text); font-weight: 550; }
.about-row b.mono { font-family: var(--mono); font-size: 12px; }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 15.5px; font-weight: 650; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--text2); }
.field > span b { color: var(--jade); font-weight: 600; }
.field input, .field select {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field-textarea:focus { border-color: var(--ai-border); }
.field-textarea {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  resize: vertical;
  min-height: 70px;
  line-height: 1.6;
  user-select: text;
}
.field-inline input { padding: 0; border: none; background: none; height: auto; accent-color: var(--jade); }
.cfg-note { font-size: 11.5px; color: var(--text3); line-height: 1.6; }
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 13px 18px 16px;
  border-top: 1px solid var(--line);
}
.cfg-saved { font-size: 12px; color: var(--jade); }
.btn-primary {
  height: 34px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--grad);
  color: var(--grad-ink);
  font-weight: 650;
  font-size: 13px;
  transition: all .15s;
}
.btn-primary:hover { filter: brightness(1.08); }

/* 选择框下拉配色 */
select option { background: var(--bg1); color: var(--text); }

/* ═══════════════ 附件芯片 ═══════════════ */
.cp-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 16px 0;
}
.cp-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 6px 0 10px;
  border-radius: 9px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 12px;
}
.cp-file-chip svg { width: 12px; height: 12px; color: var(--jade); }
.cfc-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  color: var(--text3);
}
.cfc-x:hover { color: var(--coral); background: rgba(255, 111, 97, .12); }
.cfc-x svg { width: 10px; height: 10px; color: currentColor; }

/* ═══════════════ 会话行菜单 ═══════════════ */
.row-menu {
  position: fixed;
  z-index: 65;
  min-width: 170px;
  padding: 5px;
  border-radius: 12px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  animation: pop .14s cubic-bezier(.2, .9, .3, 1.15);
}
.rm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  color: var(--text2);
  font-size: 13px;
  transition: background .12s, color .12s;
}
.rm-item svg { width: 14px; height: 14px; }
.rm-item:hover { background: var(--bg3); color: var(--text); }
.rm-danger:hover { background: rgba(255, 111, 97, .1); color: var(--coral); }
.rm-item.confirm { background: rgba(255, 111, 97, .12); color: var(--coral); }
/* 键盘导航高亮 */
.mm-item.kbd { background: var(--bg3); color: var(--text); }

/* 设置：工作区行 */
.ws-row { display: flex; gap: 8px; }
.ws-row input { flex: 1; font-family: var(--mono); font-size: 12px; }
.btn-ghost {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 12.5px;
  transition: all .15s;
  flex: none;
}
.btn-ghost:hover { color: var(--text); border-color: rgba(63, 216, 180, .4); }

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .cp-shell::before { animation: none; }
  #neural-bg { display: none; }
  .item { animation: none; }
}

/* ═══════════════ 模型切换下拉 ═══════════════ */
.model-menu {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  animation: pop .16s cubic-bezier(.2, .9, .3, 1.15);
}
.mm-search { padding: 7px; border-bottom: 1px solid var(--line); flex: none; }
.mm-q {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text1);
  font-size: 12.5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.mm-q:focus { border-color: var(--ai-border); box-shadow: var(--focus-ring); }
.mm-q::placeholder { color: var(--text3); }
.mm-scroll { overflow-y: auto; max-height: 48vh; padding: 5px; }
.mm-scroll::-webkit-scrollbar { width: 8px; }
.mm-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.mm-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mm-item .mm-name { flex: 1; font-weight: 500; }
.mm-txt .mm-name { flex: none; font-size: 12.5px; }
.mm-txt .mm-sub { font-size: 10.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-empty { padding: 16px 10px; text-align: center; font-size: 12px; color: var(--text3); }
.mm-item.mm-manage { margin: 2px 5px 4px; width: calc(100% - 10px); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; padding-top: 8px; }
.mm-head {
  padding: 8px 10px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mm-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  color: var(--text2);
  font-size: 12.5px;
  text-align: left;
  transition: background .12s, color .12s;
}
.mm-item.active { background: rgba(151, 136, 255, .09); color: var(--text); }
.mm-item.active .mm-check { color: var(--ai); }
.mm-manage { color: var(--text3); }
.mm-item:hover { background: var(--bg3); color: var(--text); }
.mm-check {
  flex: none;
  width: 15px; height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jade);
}
.mm-check svg { width: 12px; height: 12px; }
.mm-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-desc {
  flex: none;
  font-size: 11px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
  max-width: 45%;
}
.mm-sep { height: 1px; background: var(--line); margin: 4px 8px; }

/* ═══════════════ Toast ═══════════════ */
#toast {
  position: fixed;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 12.5px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  z-index: 70;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 窄窗口时建议卡降级为 2 列 */
@media (max-width: 1180px) {
  .es-cards { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
}

/* ═══ v1.0 侧栏优化 ═══ */
.sb-ws-tag{width:100%;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;margin-top:6px;border-radius:8px;color:var(--text3);font-size:12px;transition:all .15s}
.sb-ws-tag:hover{background:var(--bg2);color:var(--text2)}
.sb-ws-tag svg{width:13px;height:13px;flex:none}
.sb-foot-settings{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--text3);transition:all .15s;flex:none;margin-left:auto}
.sb-foot-settings:hover{background:var(--bg2);color:var(--text)}
.sb-foot-settings svg{width:15px;height:15px}

/* ═══ v1.0.1 设置排版修复 ═══ */
.st-nav { width: 216px; padding: 14px 10px; }
.st-item { font-size: 13px; padding: 0 9px; height: 36px; gap: 7px; }
.st-item svg { width: 15px; height: 15px; }
.st-item .st-badge { font-size: 9.5px; padding: 1px 5px; min-width: 16px; height: 15px; }
.st-panes { padding: 14px 18px; }
.st-pane { gap: 9px; }
.st-h { font-size: 13.5px; }
.field > span { font-size: 11.5px; }
.field input, .field select { font-size: 12.5px; padding: 0 10px; }
.provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.provider-card { padding: 8px 9px; border-radius: 8px; }
.pc-name { font-size: 11px; }
.pc-models { font-size: 10px; }
.provider-add { gap: 5px; }
.provider-add input { font-size: 11.5px; padding: 0 8px; }
.provider-add .btn-ghost { height: 30px; font-size: 11.5px; padding: 0 10px; }
.cmp-row { padding: 8px 14px; font-size: 12px; }
.cmp-table { font-size: 12.5px; }

/* 输入舱精调 */
.cp-shell { border-radius: 16px; }
.cp-bar { padding: 6px 12px 8px; }
.cp-act { gap: 5px; padding: 0 9px; }
.cp-act svg { width: 15px; height: 15px; }
.cp-act-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.send-btn { width: 42px; height: 42px; }

/* 对话区间距优化 */
#chat-column { padding: 28px min(40px, 4vw) 18px; max-width: var(--content-w); margin: 0 auto; width: 100%; }
/* 输入框与消息区同宽居中（视觉一条线） */
#composer > .cp-shell, #composer > #np-bar { max-width: min(900px, 100% - 32px); margin: 0 auto; width: calc(100% - 32px); }
#messages { gap: 18px; }
.item-user { margin-top: 4px; }
.msg-user-bubble { border-radius: 14px 14px 4px 14px; padding: 9px 14px; }
.ai-avatar-orb { width: 28px; height: 28px; border-radius: 9px; }

/* 侧栏精调 */
.sb-actions { padding: 10px 10px 6px; }
.btn-new-chat { height: 36px; font-size: 13px; border-radius: 10px; }
.sb-search { margin: 0 10px 4px; }
#session-search { height: 30px; font-size: 12px; }
.sb-label { padding: 12px 14px 6px; font-size: 10.5px; }
.session-row { height: 34px; font-size: 12.5px; padding: 0 10px; }
.sb-foot { padding: 6px; }
.sb-foot-btn { height: 38px; padding: 0 8px; }

/* ═══════════════ 侧栏项目分组（文件夹折叠组） ═══════════════ */
.sb-pgroup{display:flex;align-items:center;gap:5px;width:100%;padding:7px 8px 3px;background:none;border:none;color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.03em;cursor:pointer;text-align:left;border-radius:8px;transition:color .15s}
.sb-pgroup:hover{color:var(--text2)}
.sb-pg-chev{display:inline-flex;opacity:.7;transition:transform .15s}
.sb-pg-chev svg{width:11px;height:11px}
.sb-pgroup.collapsed .sb-pg-chev{transform:rotate(-90deg)}
.sb-pg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sb-pg-count{flex:none;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;background:var(--bg2);color:var(--text3)}
.sb-pgroup.active{color:var(--text2)}
.sb-pgroup.active .sb-pg-count{background:rgba(151,136,255,.16);color:#b7acff}
.sb-ws-tag.active{background:var(--bg2);color:var(--text2)}

/* ═══════════════ 展区：内嵌浏览器预览 ═══════════════ */
#stage-split{width:4px;flex:none;cursor:col-resize;background:transparent;transition:background .15s;margin:-1px -2px;z-index:5}
body.stg-resizing #stage-split{background:var(--ai-border)}
#stage-split:hover{background:var(--ai-border)}
#stage{width:44%;min-width:320px;flex:none;display:flex;flex-direction:column;background:var(--bg1);border-left:1px solid var(--line);min-height:0;overflow:hidden;transition:width .26s cubic-bezier(.2,.9,.3,1);contain:layout style}#stage.no-anim{transition:none}
.stg-body{transition:opacity .16s ease}
#stage.closing .stg-body,#stage.opening .stg-body{opacity:0}
/* 开合动画期 / 拖宽中：webview 停止合成（防逐帧重排卡顿），溢出全部裁剪（防封面/工具栏压到聊天区） */
#stage.opening #stg-view,#stage.closing #stg-view,body.stg-resizing #stg-view{visibility:hidden}
.stg-tbar{position:relative;display:flex;align-items:center;gap:6px;height:46px;padding:0 10px;border-bottom:1px solid var(--line);flex:none;background:linear-gradient(180deg, rgba(255,255,255,.025), transparent)}
/* 加载进度条（tbar 底边，变换动画走合成器） */
.stg-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .15s;pointer-events:none}
.stg-progress::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--ai),var(--jade),transparent);transform:translateX(-100%)}
#stage.stg-loading .stg-progress{opacity:1}
#stage.stg-loading .stg-progress::before{animation:stg-progress-slide 1.1s linear infinite}
@keyframes stg-progress-slide{to{transform:translateX(100%)}}
#stage.stg-loading #stg-reload{color:var(--ai)}
#stage.stg-loading #stg-reload svg{animation:stg-spin .9s linear infinite}
@keyframes stg-spin{to{transform:rotate(360deg)}}
/* 后退/前进不可用态 */
#stg-back.off,#stg-fwd.off{opacity:.32;pointer-events:none}
/* URL 联想下拉 */
.stg-suggest{position:absolute;left:96px;right:10px;top:calc(100% + 4px);z-index:30;background:var(--bg1);border:1px solid var(--line2);border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:4px;max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.stg-sug-row{display:flex;flex-direction:column;gap:1px;width:100%;padding:6px 9px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.stg-sug-row:hover,.stg-sug-row.active{background:var(--ai-bg)}
.stg-sug-t{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-sug-u{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-group{display:flex;align-items:center;gap:2px;flex:none}
.stg-group + .stg-group{margin-left:2px}
/* 缩放 pill（仅非 100% 显示，点击重置） */
.stg-zoom{flex:none;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--ai-border);background:var(--ai-bg);color:var(--ai);font-size:11px;font-weight:600;cursor:pointer;transition:all .13s;font-variant-numeric:tabular-nums}
.stg-zoom:hover{background:rgba(151,136,255,.18)}
/* 历史面板（复用 .stg-suggest 容器）：标题行 + 清空 + 空态 */
.stg-hist-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px 5px;border-bottom:1px solid var(--line);margin-bottom:3px}
.stg-hist-head span{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.04em}
.stg-hist-clear{border:none;background:none;color:var(--text3);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:all .12s}
.stg-hist-clear:hover{background:var(--bg3);color:#f87171}
.stg-hist-empty{padding:18px 10px;text-align:center;color:var(--text3);font-size:12px}
/* —— v3.37.0 顶栏溢出菜单（⋯ 更多工具）：对标主流 IDE 收纳式工具栏 —— */
#stg-menu{position:absolute;top:calc(100% + 6px);right:10px;z-index:70;min-width:196px;padding:5px;border-radius:12px;border:1px solid var(--line2);background:var(--bg1);box-shadow:0 16px 42px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:1px;animation:stg-menu-in .16s var(--ease-spring)}
@keyframes stg-menu-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.stg-menu-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border:none;background:none;border-radius:8px;color:var(--text2);font-size:12.5px;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s var(--ease-out),color .12s var(--ease-out)}
.stg-menu-item:hover{background:var(--bg3);color:var(--text)}
.stg-menu-item svg{width:14px;height:14px;color:var(--text3);flex:none;transition:color .12s var(--ease-out)}
.stg-menu-item:hover svg{color:var(--ai)}
.stg-menu-item.stg-pin.on{color:var(--jade)}
.stg-menu-item.stg-pin.on svg{color:var(--jade)}
.stg-menu-sep{height:1px;margin:4px 6px;background:var(--line);flex:none}
#stg-more.active{background:rgba(151,136,255,.14);color:var(--ai)}
.stg-tbar > .stg-group:first-child{padding-right:6px;border-right:1px solid var(--line);margin-right:2px}
.stg-tbar > .stg-group:nth-of-type(2){padding-left:4px}
.stg-btn.active{background:rgba(151,136,255,.14);color:var(--ai)}
.stg-btn.active svg{color:var(--ai)}
.stg-close{margin-left:2px}
.stg-close:hover{background:rgba(248,113,113,.14);color:#f87171}
.stg-btn{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:8px;color:var(--text3);transition:all .13s}
.stg-btn:hover{background:var(--bg3);color:var(--text);box-shadow:0 0 0 1px var(--line2)}
.stg-btn:active{transform:scale(.94)}
.stg-btn:hover{background:var(--bg2);color:var(--text)}
.stg-btn svg{width:14px;height:14px}
#stg-url{flex:1;min-width:0;height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg0);color:var(--text2);font-size:12px;outline:none;transition:border-color .15s, box-shadow .15s;font-family:var(--mono, ui-monospace, monospace)}
#stg-url:focus{border-color:var(--ai-border)}
/* 展区窄宽分级：由 stage.js ResizeObserver 按 stage 实际宽度驱动（非窗口宽度） */
body.stg-narrow .stg-tbar{gap:4px;padding:0 6px}
body.stg-narrow .stg-btn{width:26px;height:26px}
body.stg-narrow #stg-url{font-size:11px;padding:0 8px}
body.stg-tiny #stg-home-tb{display:none}
body.stg-tiny .stg-tbar > .stg-group{display:none}
body.stg-tiny #stg-url{font-size:10.5px}
.stg-body{flex:1;min-height:0;position:relative;display:flex}
#stg-view{flex:1;width:100%;height:100%;border:none;background:#fff}
.stg-start{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text3);padding:24px;text-align:center;position:relative;overflow:hidden;animation:stg-start-in .55s var(--ease-out) both}
.stg-start-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.stg-aurora{position:absolute;inset:-18%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.3}
.stg-aurora::before,.stg-aurora::after{content:'';position:absolute;border-radius:50%}
.stg-aurora::before{width:58%;height:58%;left:6%;top:14%;background:radial-gradient(circle,rgba(151,136,255,.5),transparent 65%);animation:aurora-drift-1 36s var(--ease-out) infinite alternate}
.stg-aurora::after{width:50%;height:50%;right:5%;bottom:12%;background:radial-gradient(circle,rgba(52,211,153,.35),transparent 65%);animation:aurora-drift-2 44s var(--ease-out) infinite alternate}
.stg-start-ico{display:inline-flex;color:var(--ai);animation:stg-logo-float 8s var(--ease-out) infinite;filter:drop-shadow(0 10px 26px rgba(151,136,255,.26))}
.stg-start-ico svg{width:48px;height:48px}
@keyframes stg-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.stg-start-brand{margin-top:2px;font-size:25px;font-weight:650;letter-spacing:.24em;background:linear-gradient(100deg,var(--text) 25%,var(--ai) 50%,var(--jade) 75%,var(--text) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shiny-slide 12s linear infinite;padding-left:.24em}
.stg-start-slogan{margin:0;font-size:12px;letter-spacing:.44em;color:var(--text3);padding-left:.44em}
.stg-start-line{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--ai-border),transparent);margin:10px 0 4px}
.stg-start-hint{margin:0;font-size:11px;color:var(--text3);opacity:.7;letter-spacing:.06em}
.stg-start p{margin:0;font-size:12px;line-height:1.7;max-width:300px}
@keyframes stg-start-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.stg-start,.stg-start-ico{animation:none}}
.hd-icon.active{background:var(--bg2);color:var(--ai)}

/* ═══════════════ 浅色主题（Nova 体系适配） ═══════════════
   P0-5 单源化：浅色变量覆盖已迁入 tokens.css 的 :root[data-theme="light"]；
   此处仅保留组件级浅色微调。 */
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: rgba(20, 20, 30, .18); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 20, 30, .3); }
:root[data-theme="light"] .model-menu { box-shadow: 0 20px 60px rgba(20, 20, 40, .18); }
:root[data-theme="light"] .cp-shell { box-shadow: 0 14px 40px rgba(20, 20, 40, .1); }
:root[data-theme="light"] #neural-bg { opacity: .25; }

/* ═══════════════ 图标缩放（基础设置） ═══════════════ */
svg { zoom: var(--icon-zoom, 1); }
.logo-img { zoom: 1; }

/* ═══════════════ 基础设置控件 ═══════════════ */
.gen-row { margin: 10px 0 16px; }
.gen-label { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text2); margin-bottom: 8px; }
.gen-label b { color: var(--ai); font-weight: 600; font-size: 12px; }
.gen-row input[type="range"] { width: 100%; accent-color: var(--ai); }
.gen-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text2);
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.gen-select:hover { border-color: var(--ai-border); }
.gen-select:focus { border-color: var(--ai-border); }

/* ═══════════════ 输入区丝滑细化 ═══════════════ */
.cp-act { transition: background .15s, color .15s, transform .12s; }
.cp-act:hover { transform: translateY(-1px); }
.cp-act:active { transform: translateY(0) scale(.96); }
.cp-act-label { transition: color .15s; white-space: nowrap; }
.send-btn { transition: transform .16s cubic-bezier(.2, .9, .3, 1.2), box-shadow .16s, opacity .2s; }
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn:disabled:hover { transform: none; box-shadow: none; }
#cp-input { transition: padding .18s ease; }
#cp-files { animation: pop .18s cubic-bezier(.2, .9, .3, 1.15); }

/* 浅色主题补充适配：顶栏 / 审批卡 / 头部控件 */
:root[data-theme="light"] #chat-header { background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .6)); }
:root[data-theme="light"] .approval-card { background: var(--bg1); }
:root[data-theme="light"] .approval-card[data-risk="write"],
:root[data-theme="light"] .approval-card[data-risk="exec"] { background: var(--bg1); }
:root[data-theme="light"] .ctx-ring-bg { stroke: rgba(20, 20, 30, .15); }
:root[data-theme="light"] .send-btn { color: #fff; }
:root[data-theme="light"] .think { background: var(--bg2); }
:root[data-theme="light"] .think-head:hover { background: rgba(20, 20, 30, .04); }

/* ═══════════════ 侧栏文件树（Explorer 式） ═══════════════ */
.sb-filesec{display:flex;align-items:center;gap:5px;width:100%;margin-top:6px;padding:4px 8px;background:none;border:none;color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;text-align:left;border-radius:7px;transition:color .15s}
.sb-filesec:hover{color:var(--text2)}
.sb-filesec .sb-pg-chev{display:inline-flex;transition:transform .15s;opacity:.7}
.sb-filesec .sb-pg-chev svg{width:10px;height:10px}
.sb-filesec:not(.open) .sb-pg-chev{transform:rotate(-90deg)}
.sb-tree{min-height:2px}
.tr-row{display:flex;align-items:center;gap:5px;width:100%;height:26px;padding:0 6px;background:none;border:none;color:var(--text2);font-size:12px;cursor:pointer;text-align:left;border-radius:7px;transition:background .12s;position:relative}
.tr-row:hover{background:var(--bg2)}
.tr-chev{flex:none;width:12px;display:inline-flex;color:var(--text3);transition:transform .13s;opacity:.75}
.tr-chev svg{width:10px;height:10px}
.tr-row.open > .tr-chev{transform:rotate(0)}
.tr-row.is-dir:not(.open) > .tr-chev{transform:rotate(-90deg)}
.tr-ico{flex:none;display:inline-flex;color:var(--text3)}
.tr-ico svg{width:13px;height:13px}
.tr-row.is-dir .tr-ico{color:var(--sky)}
.tr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-actions{flex:none;display:none;align-items:center;gap:2px}
.tr-row:hover .tr-actions{display:inline-flex}
.tr-act{flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:var(--text3);transition:all .12s}
.tr-act:hover{background:var(--bg3);color:var(--text)}
.tr-act.danger:hover{background:rgba(248,113,113,.14);color:var(--coral)}
.tr-act svg{width:12px;height:12px}
.tr-input{flex:1;min-width:0;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--ai-border);background:var(--bg1);color:var(--text);font-size:12px;outline:none}
.tr-empty{padding:6px 10px;font-size:11.5px;color:var(--text3)}
/* P0-3 配套：目录读取失败态的重试按钮（紧随 .tr-empty 错误文案） */
.tr-retry{margin-left:4px;padding:1px 8px;border-radius:var(--radius-full);border:1px solid var(--line2);background:transparent;color:var(--ai);font-size:var(--font-xs);cursor:pointer;transition:var(--dur-fast) var(--ease-out)}
.tr-retry:hover{border-color:var(--ai);background:var(--ai-bg)}
.tr-new{height:26px;display:flex;align-items:center}
.tr-new .tr-input{width:calc(100% - 16px)}
.sb-pg-acts{flex:none;display:none;align-items:center;gap:1px}
.sb-pgroup:hover .sb-pg-acts{display:inline-flex}
.sb-pgroup:hover .sb-pg-count{display:none}
.sb-pg-act{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:var(--text3);transition:all .12s}
.sb-pg-act:hover{background:var(--bg3);color:var(--text)}
.sb-pg-act svg{width:12px;height:12px}

/* ═══════════════ 项目模型：新项目文件夹条 + 二级项目 ═══════════════ */
#np-bar{max-width:780px;margin:0 auto 8px;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.np-folder{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--ai-border);background:var(--bg2);color:var(--text2);font-size:12.5px;cursor:pointer;transition:all .15s;max-width:320px}
.np-folder:hover{background:var(--bg3);border-color:var(--ai)}
.np-folder svg{width:14px;height:14px;flex:none;color:var(--ai)}
.np-folder.none{border-style:dashed;color:var(--text3)}
.np-folder span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-hint{font-size:11.5px;color:var(--text3)}
.session-row .sr-chev{flex:none;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--text3);transition:transform .15s;opacity:.75}
.session-row .sr-chev svg{width:11px;height:11px}
.session-row .sr-chev.closed{transform:rotate(-90deg)}
.session-row .sr-chev.none{visibility:hidden}
.session-row.sub{padding-left:30px}
.session-row.sub .sr-dot{opacity:.5}
.session-row .sr-add{opacity:0}
.session-row:hover .sr-add{opacity:1}
.session-row .sr-add svg{width:12px;height:12px}

/* ═══════════════ v1.5：diff 审批卡 + todo 任务卡 ═══════════════ */
.approval-diff{display:flex;gap:8px;margin:8px 10px;max-height:260px;overflow:auto}
.diff-pane{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.diff-tag{display:block;padding:4px 8px;font-size:10px;letter-spacing:.08em;color:var(--text3);background:var(--bg2)}
.diff-tag.after{color:var(--jade)}
.diff-pane pre{margin:0;padding:8px;font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text2);font-family:var(--mono);max-height:220px;overflow:auto}
.diff-pane:first-child pre{background:rgba(248,113,113,.05)}
.diff-pane:last-child pre{background:rgba(52,211,153,.05)}
.todo-card{max-width:720px;margin:8px auto;padding:10px 14px;border:1px solid var(--ai-border);border-radius:12px;background:var(--bg1)}
.todo-head{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ai);margin-bottom:6px}
.todo-list{margin:0;padding:0 0 0 4px;list-style:none}
.todo-item{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px;color:var(--text2)}
.todo-state{flex:none;width:9px;height:9px;border-radius:50%;background:var(--text3);opacity:.5}
.todo-item.doing .todo-state{background:var(--ai);opacity:1;box-shadow:0 0 6px var(--ai-border)}
.todo-item.done .todo-state{background:var(--jade);opacity:1}
.todo-item.done .todo-text{text-decoration:line-through;color:var(--text3)}

/* ═══════════════ v1.5.1 流式与渲染细节 ═══════════════ */
/* 打字机光标：assistant / reasoning 流式期间 */
.ai-body.streaming .ai-md > *:last-child::after {
  content: '';
  display: inline-block;
  width: 7px; height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--ai);
  border-radius: 2px;
  animation: cursor-blink .9s steps(2) infinite;
}
.think-body.streaming .think-text::after {
  content: '';
  display: inline-block;
  width: 6px; height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
  background: var(--text3);
  border-radius: 2px;
  animation: cursor-blink .9s steps(2) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* 代码块复制按钮态 */
.md-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: var(--text3); border-radius: 6px; cursor: pointer; transition: all .13s; }
.md-copy:hover { background: var(--bg3); color: var(--text); }
.md-copy.done { color: var(--jade); }

/* 工具行微调：图标与文字基线对齐 */
.tool-chip { align-items: center; }
.tool-ico { display: inline-flex; color: var(--text3); }
.tool-ico svg { width: 14px; height: 14px; }
.tool-name { font-family: var(--sans); }

/* ═══════════════ 命令面板（Ctrl+K） ═══════════════ */
.palette{width:560px;max-width:92vw;margin:10vh auto 0;background:var(--bg1);border:1px solid var(--line2);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden;align-self:flex-start}
.pal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-ico-main{display:inline-flex;color:var(--text3)}
.pal-ico-main svg{width:16px;height:16px}
.pal-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px}
.pal-input::placeholder{color:var(--text3)}
.pal-kbd{flex:none;font-size:10.5px;color:var(--text3);border:1px solid var(--line2);border-radius:5px;padding:2px 6px}
.pal-list{max-height:380px;overflow-y:auto;padding:6px}
.pal-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text2);font-size:13px;cursor:pointer;text-align:left;transition:background var(--dur-fast)}
.pal-row:hover{background:var(--bg2)}
.pal-row.active{background:var(--ai-bg);color:var(--text)}
.pal-ico{flex:none;display:inline-flex;color:var(--text3)}
.pal-row.active .pal-ico{color:var(--ai)}
.pal-ico svg{width:14px;height:14px}
.pal-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-hint{flex:none;font-size:11px;color:var(--text3)}
.pal-empty{padding:22px;text-align:center;color:var(--text3);font-size:12.5px}

/* ═══════════════ 烟雾呼吸 2.0：随对话状态而变化 ═══════════════ */
/* 基础呼吸更明显：待机缓慢深呼吸（原来几乎不可见） */
.cp-shell::before { opacity: .5; animation-duration: 7s; }
.cp-shell:focus-within::before { opacity: .95; }
/* 思考中：紫色加速呼吸（跟随思考节奏） */
.cp-shell[data-phase="thinking"]::before {
  opacity: 1;
  animation: aurora-spin 2.8s linear infinite, aurora-pulse-think 1.8s ease-in-out infinite;
  animation-play-state: running;
}
@keyframes aurora-pulse-think {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(151, 136, 255, .15); }
  50% { transform: scale(1.03); box-shadow: 0 0 50px rgba(151, 136, 255, .35); }
}
/* 工具执行中：青绿高速旋转（机器在操作电脑的感觉） */
.cp-shell[data-phase="tooling"]::before {
  opacity: 1;
  inset: -10px;
  animation-duration: 1.4s;
  background: conic-gradient(from var(--aurora-angle, 0deg),
    rgba(52, 211, 153, 0), rgba(52, 211, 153, .55), rgba(151, 136, 255, .4),
    rgba(52, 211, 153, .3), rgba(52, 211, 153, 0));
  filter: blur(9px);
}
/* 出错：红色脉冲 */
.cp-shell.error-pulse::before {
  animation-play-state: running;
  animation-duration: .9s;
  background: conic-gradient(from var(--aurora-angle, 0deg),
    rgba(248, 113, 113, 0), rgba(248, 113, 113, .6), rgba(255, 180, 84, .4),
    rgba(248, 113, 113, .35), rgba(248, 113, 113, 0));
}
/* 完成涟漪：绿色一圈扩散后淡出 */
.cp-shell.ripple::before {
  opacity: 1;
  animation: aurora-ripple 1.5s var(--ease-out) 1;
  animation-play-state: running;
}
@keyframes aurora-ripple {
  0% { opacity: .9; filter: blur(7px); }
  60% { opacity: .55; filter: blur(12px); }
  100% { opacity: .3; filter: blur(7px); }
}
/* 深浅主题下浅色收敛强度 */
:root[data-theme="light"] .cp-shell[data-phase="tooling"]::before,
:root[data-theme="light"] .cp-shell[data-phase="thinking"]::before { opacity: .7; }
/* 回答中：紫色流光更绵密 */
.cp-shell[data-phase="answering"]::before {
  opacity: .95;
  animation: aurora-spin 2s linear infinite, aurora-pulse-answer 1s ease-in-out infinite;
  animation-play-state: running;
}
@keyframes aurora-pulse-answer {
  0%, 100% { transform: scale(1) translateY(0); box-shadow: 0 0 30px rgba(151,136,255,.25); }
  50% { transform: scale(1.02) translateY(-2px); box-shadow: 0 0 55px rgba(151,136,255,.4), 0 0 20px rgba(52,211,153,.15); }
}
/* 文字节奏脉冲层：每个文本块到达时闪光一圈，--chunk-glow 1→0 衰减（JS 驱动，随文字输出起伏） */
.cp-shell::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 30px;
  border: 1.5px solid rgba(168, 156, 255, .85);
  box-shadow: 0 0 38px rgba(151, 136, 255, .5), 0 0 14px rgba(151, 136, 255, .38), inset 0 0 22px rgba(151, 136, 255, .25);
  opacity: var(--chunk-glow, 0);
  pointer-events: none;
  z-index: -1;
  transition: opacity .3s ease-out;
}
:root[data-theme="light"] .cp-shell::after { box-shadow: 0 0 30px rgba(124, 108, 247, .35), inset 0 0 16px rgba(124, 108, 247, .16); }

/* ═══════════════ v1.6.3：输入输出体验 ═══════════════ */
/* 斜杠命令补全（输入框上方） */
.cp-slash{position:absolute;left:14px;right:14px;bottom:calc(100% + 8px);max-height:300px;overflow-y:auto;background:var(--bg1);border:1px solid var(--line2);border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:5px;z-index:var(--z-menu)}
.sl-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text2);font-size:12.5px;cursor:pointer;text-align:left}
.sl-row:hover,.sl-row.active{background:var(--ai-bg);color:var(--text)}
.sl-ico{flex:none;display:inline-flex;color:var(--text3)}
.sl-ico svg{width:14px;height:14px}
.sl-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-hint{flex:none;font-size:10.5px;color:var(--text3)}

/* 图片附件芯片（缩略图） */
.cp-file-chip.image{padding:3px}
.cfc-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block}
.cp-file-chip.image .cfc-x{position:absolute;top:-5px;right:-5px;width:16px;height:16px;background:var(--bg3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.cp-file-chip.image .cfc-x svg{width:9px;height:9px}
.cp-file-chip{position:relative}

/* 用户消息里的图片 */
.msg-user-imgs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.msg-user-img{max-width:220px;max-height:160px;border-radius:10px;border:1px solid var(--line2);cursor:zoom-in}
.msg-user-bubble:empty{display:none}

/* 长代码折叠 */
.md-block.md-fold .md-pre{max-height:360px;overflow:hidden}
.md-block.md-fold.md-open .md-pre{max-height:none}
.md-fold-btn{border:none;background:none;color:var(--ai);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:5px}
.md-fold-btn:hover{background:var(--ai-bg)}

/* ═══════════════ v1.6.4：流式可见性 + 执行过程细节 ═══════════════ */
/* 打字光标：更大 + 发光 */
.ai-body.streaming .ai-md > *:last-child::after {
  width: 8px; height: 16px;
  box-shadow: 0 0 10px var(--ai), 0 0 3px var(--ai);
}
.think-body.streaming .think-text::after {
  width: 7px; height: 13px;
  box-shadow: 0 0 8px rgba(156, 163, 175, .8);
}
/* 新消息块滑入（流式"涌出"感） */
#messages > .item { animation: item-in .28s var(--ease-out); }
@keyframes item-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* 工具行参数摘要：mono 字体嵌在行中 */
.tool-args {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text3);
  padding-left: 4px;
}
.tool-chip[data-state="running"] .tool-args { color: var(--text2); }
/* 工具输出详情：限高滚动 */
.tool-detail-pre {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* ═══════════════ v1.6.5：项目栏交互 + 字号等级排版 ═══════════════ */
.sb-label-row{display:flex;align-items:center;justify-content:space-between;padding:0 10px 2px}
.sb-label{font-size:10.5px;letter-spacing:.08em;color:var(--text3)}
.sb-label-acts{display:none;gap:2px}
.sb-label-row:hover .sb-label-acts{display:inline-flex}
.sb-lab-act{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:5px;color:var(--text3);cursor:pointer;transition:all .12s}
.sb-lab-act:hover{background:var(--bg3);color:var(--text)}
.sb-lab-act svg{width:11px;height:11px}
.sb-filesec-acts{display:none;gap:2px;margin-left:auto}
.sb-filesec{position:relative}
.sb-filesec:hover .sb-filesec-acts{display:inline-flex}
.sb-filesec:hover .sb-pg-chev{opacity:0}

/* ── 字号等级（视觉层级） ── */
/* L1 组/区标题 */ .sb-label,.sb-filesec{font-size:10.5px;font-weight:600}
/* L2 顶级项目 */ .session-row.proj .sr-title{font-size:13px;font-weight:500}
/* L3 二级项目 */ .session-row.sub{padding-left:26px}
.session-row.sub .sr-title{font-size:12.5px;font-weight:400;color:var(--text2)}
/* L4 文件行 */ .tr-row{height:25px}
.tr-row .tr-name{font-size:12px}
.tr-row.is-dir .tr-name{font-weight:500;color:var(--text2)}
.tr-empty{font-size:11px}
/* 消息区等级：正文 14 / 工具 12 / 元信息 11（沿用现状），meta 统一 */
.meta-usage{font-size:11px;color:var(--text3)}

/* 强制更新横条（重要安全/修复版本） */
.update-bar.force {
  background: linear-gradient(90deg, rgba(151, 136, 255, .18), rgba(248, 113, 113, .16));
  border-bottom: 1px solid var(--ai-border);
}
.update-bar.force .ub-text { color: var(--text); font-weight: 600; }
.ub-force-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ai);
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  padding: 3px 10px;
  animation: cursor-blink 2s steps(2) infinite;
}

/* 强制更新横条（重要安全/修复版本） */
.update-bar.force {
  background: linear-gradient(90deg, rgba(151, 136, 255, .18), rgba(248, 113, 113, .16));
  border-bottom: 1px solid var(--ai-border);
}
.update-bar.force .ub-text { color: var(--text); font-weight: 600; }
.ub-force-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ai);
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── 贾维斯自主进化面板 ── */
.evo2-acts { display: flex; gap: 6px; flex: none; }
.evo2-acts .btn-ghost { height: 30px; padding: 0 12px; font-size: 12px; }
.evo2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.evo2-grid > div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.evo2-grid b { font-size: 15px; color: var(--ai); }
.evo2-grid span { font-size: 11px; color: var(--text3); }
.evo2-files { display: flex; gap: 6px; margin-top: 12px; }
.evo2-files .btn-ghost { height: 28px; padding: 0 10px; font-size: 11.5px; }
.evo2-view { margin: 8px 0 0; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 280px; overflow: auto; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--text2); white-space: pre-wrap; }

/* 自主进化 opt-in 引导卡 */
.evo2-off { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 16px 18px; }
.evo2-off p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.7; color: var(--text2); }
.evo2-off .evo2-warn { color: var(--text3); font-size: 11.5px; }
.evo2-off .btn-primary { margin-top: 6px; }

.evo2-files .btn-ghost.active { border-color: var(--ai-border); color: var(--ai); }

/* ———— 定时任务面板 ———— */
.sched-new { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1.4fr auto; gap: 8px; margin: 10px 0 14px; }
.sched-new input, .sched-new select { background: var(--input-bg, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.1)); color: var(--text1); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; min-width: 0; }
.sched-new input::placeholder { color: var(--text3); }
.sched-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,.02); }
.sched-row.off { opacity: .55; }
.sched-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sched-main b { font-size: 13px; color: var(--text1); }
.sched-main span { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-main i { font-style: normal; font-size: 11px; color: var(--text3); }
.sched-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sched-status { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--text3); }
.sched-status.ok { color: var(--ok); background: var(--ok-bg); }
.sched-status.err { color: var(--err); background: var(--err-bg); }
.sched-status.running { color: var(--ai); background: var(--ai-bg); }
.btn-ghost.sm { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; }
.btn-ghost.danger { color: var(--err); border-color: var(--err-border); }
@media (max-width: 860px) { .sched-new { grid-template-columns: 1fr 1fr; } }

/* 展区窄宽度适配：工具栏元素紧凑化，URL 输入收缩不换行 */
@media (max-width: 560px) {
  .stg-tbar { gap: 2px; padding: 0 4px; height: 40px; }
  .stg-btn { width: 26px; height: 26px; }
  #stg-url { padding: 0 6px; font-size: 11px; }
  .stg-group + .stg-group { margin-left: 0 }
  .stg-tbar > .stg-group:first-child { padding-right: 4px; }
}

/* 侧栏项目/会话 meta：静息悬浮行右端（相对时间随手可扫，标题始终满宽），hover/选中时让位操作组（同位互斥） */
.sr-meta {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  max-width: 46%;
  font-size: 11px; /* 与 .sr-dup 统一 11px：徽标字号一致（v3.37.7 修复显示不统一） */
  color: var(--text3);
  padding: 1px 0 1px 20px;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, transparent, var(--bg1) 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.session-row.active .sr-meta { background: linear-gradient(90deg, transparent, var(--bg3) 16px); opacity: 0; }
.session-row:hover .sr-meta,
.session-row:focus-within .sr-meta { opacity: 0; }

/* 聊天顶栏适配（body.chat-narrow 由 ResizeObserver 切换）：展区拖宽时隐藏次要元素，防止覆盖 */
body.chat-narrow #hd-title { display: none; }
body.chat-narrow #hd-ws-label { display: none; }
body.chat-narrow .hd-ws { padding: 0 7px; }
body.chat-narrow .hd-icon { width: 30px; height: 30px; }
body.chat-micro #hd-ws { display: none; }
body.chat-micro #hd-stage { display: none; }
body.chat-micro .hd-model { padding: 0 8px; }
body.chat-micro #hd-model-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* —— 就地检查元素 —— */
.stg-inspect-bar {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(13, 16, 22, .92);
  border: 1px solid var(--ai-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  font-size: 12px;
  color: var(--text2);
}
.stg-inspect-bar .sib-ico { color: var(--ai); display: inline-flex; flex: none; }
.stg-inspect-bar .sib-ico svg { width: 14px; height: 14px; }
.stg-inspect-bar .sib-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sib-exit { flex: none; padding: 4px 10px; border-radius: 7px; background: rgba(151, 136, 255, .14); color: var(--ai); font-size: 11.5px; border: none; cursor: pointer; }
.sib-exit:hover { background: rgba(151, 136, 255, .25); }

/* —— HTML 代码块演示按钮 —— */
.md-demo {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--jade);
  border: 1px solid rgba(52, 211, 153, .25);
  background: rgba(52, 211, 153, .08);
  cursor: pointer;
  transition: all .13s;
}
.md-demo:hover { background: rgba(52, 211, 153, .18); border-color: var(--jade); }

/* —— 侧栏优化（v1.8.9）—— */
/* 新建项目：实色渐变大按钮 */
.btn-new-chat {
  background: linear-gradient(135deg, rgba(151, 136, 255, .22), rgba(52, 211, 153, .14));
  border: 1px solid var(--ai-border);
  color: var(--text);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(151, 136, 255, .08);
}
.btn-new-chat:hover {
  border-color: var(--ai);
  background: linear-gradient(135deg, rgba(151, 136, 255, .32), rgba(52, 211, 153, .2));
  transform: translateY(-1px);
}
/* 时间分组标题 */
.sb-group {
  padding: 14px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--text3);
}
/* 置顶标：玉色圆点 */
.sr-dot.pinned { background: var(--jade); box-shadow: 0 0 6px rgba(52, 211, 153, .6); }
/* 侧栏拖拽手柄 */
.sb-resize {
  position: absolute;
  top: 0; right: 0; /* 内收布局：悬停热区完整落在 sidebar 内，不被 overflow:hidden 裁剪（外伸 3px 曾导致可命中区只剩 3px） */
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 30;
}
.sb-resize:hover, body.sb-resizing .sb-resize { background: var(--ai-border); }
#sidebar { position: relative; transition: width .26s cubic-bezier(.2, .9, .3, 1), margin .28s cubic-bezier(.4, 0, .2, 1); overflow: hidden; contain: layout style; }
#sidebar.no-anim { transition: none; }
/* 丝滑折叠：宽度锁只在动画期生效（#sidebar.folding > *，见下方）；平时不设 min-width——
   内容随侧栏拖拽宽度自适应，拖窄后不再溢出 40px 被 overflow:hidden 硬裁（v3.37.7 修复） */
.sb-actions, .sb-search, .sb-label-row, #session-list, .sb-foot { transition: opacity .16s ease; }
#sidebar.collapsing .sb-actions,
#sidebar.collapsing .sb-search,
#sidebar.collapsing .sb-label-row,
#sidebar.collapsing #session-list,
#sidebar.collapsing .sb-foot { opacity: 0; }
#sidebar.collapsed .sb-actions,
#sidebar.collapsed .sb-search,
#sidebar.collapsed .sb-label-row,
#sidebar.collapsed #session-list,
#sidebar.collapsed .sb-foot { opacity: 0; }
/* 折叠窄条（原创设计：核心操作图标条） */
.sb-actions { display: flex; align-items: center; gap: 7px; }
.sb-fold {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text3);
  transition: all .13s;
}
.sb-fold:hover { background: var(--bg2); color: var(--text); }
.sb-fold svg { width: 13px; height: 13px; }
.sb-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  flex: 1;
  min-height: 0;
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}
#sidebar.collapsed .sb-rail { opacity: 1; pointer-events: auto; }
.sb-rail-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--text2);
  transition: all .13s;
}
.sb-rail-btn:hover { background: var(--bg2); color: var(--text); }
.sb-rail-btn svg { width: 16px; height: 16px; }
.sb-rail-spacer { flex: 1; }
#sidebar { overflow: hidden; }
/* 折叠/展开过渡期：内容锁定真实宽度（被裁剪而非重排，丝滑核心） */
#sidebar.folding > * { min-width: var(--sb-lock, var(--sb-w)); }
#sidebar.collapsed { width: 44px !important; }
#sidebar.collapsed .sb-search,
#sidebar.collapsed .sb-label-row,
#sidebar.collapsed #session-list,
#sidebar.collapsed .sb-foot { display: none !important; }
#sidebar.collapsed .sb-actions { display: none; }
#sidebar.collapsed .sb-fold { display: none; }


/* ═══ v1.9.0 灵动 UI（ReactBits 式视觉理念，原生 CSS 实现，零框架）═══ */

/* —— Aurora 极光空态背景：多层模糊渐变慢速漂移（ReactBits Aurora 理念）—— */
.es-aurora {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  filter: blur(90px);
  opacity: .55;
}
.es-aurora::before, .es-aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.es-aurora::before {
  width: 55%; height: 55%;
  left: 8%; top: 12%;
  background: radial-gradient(circle, rgba(151, 136, 255, .55), transparent 65%);
  animation: aurora-drift-1 22s var(--ease-out) infinite alternate;
}
.es-aurora::after {
  width: 48%; height: 48%;
  right: 6%; bottom: 8%;
  background: radial-gradient(circle, rgba(52, 211, 153, .4), transparent 65%);
  animation: aurora-drift-2 26s var(--ease-out) infinite alternate;
}
@keyframes aurora-drift-1 {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to { transform: translate3d(10%, 8%, 0) scale(1.18); }
}
@keyframes aurora-drift-2 {
  from { transform: translate3d(5%, 4%, 0) scale(1.12); }
  to { transform: translate3d(-8%, -6%, 0) scale(.96); }
}
#empty-state { overflow: hidden; }
#empty-state .es-inner { position: relative; z-index: 1; }
::root[data-theme="light"] .es-aurora { opacity: .28; }

/* —— Shiny 渐变标题（ReactBits Gradient/Shiny Text 理念）：「晚上好」流光 —— */
.es-title {
  background: linear-gradient(100deg, var(--text) 30%, var(--ai) 50%, var(--jade) 70%, var(--text) 90%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shiny-slide 7s linear infinite;
}
@keyframes shiny-slide { to { background-position: 220% center; } }

/* —— Spotlight 卡片（ReactBits Spotlight Card 理念）：鼠标跟随高亮 —— */
.es-card {
  position: relative;
  overflow: hidden;
}
.es-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(151, 136, 255, .16), transparent 65%);
}
.es-card:hover::after { opacity: 1; }

/* —— 对话区光球背景（ReactBits Orb 理念）：模糊光球缓慢漂移 —— */
.chat-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.chat-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .16;
  will-change: transform; /* 提升为独立合成层：动画走合成器，不与滚动重绘竞争 */
}
/* 滚动进行中暂停光球动画（chat-scrolling 由滚动监听挂/摘，停止 160ms 后恢复） */
#chat.chat-scrolling .chat-orbs span { animation-play-state: paused; }
.chat-orbs span:nth-child(1) {
  width: 380px; height: 380px;
  left: -8%; top: 18%;
  background: radial-gradient(circle, var(--ai), transparent 70%);
  animation: orb-float-1 30s var(--ease-out) infinite alternate;
}
.chat-orbs span:nth-child(2) {
  width: 300px; height: 300px;
  right: -6%; bottom: 10%;
  background: radial-gradient(circle, rgba(52, 211, 153, .9), transparent 70%);
  animation: orb-float-2 36s var(--ease-out) infinite alternate;
}
.chat-orbs span:nth-child(3) {
  width: 240px; height: 240px;
  left: 34%; top: 58%;
  background: radial-gradient(circle, rgba(240, 240, 240, .35), transparent 70%);
  animation: orb-float-3 40s var(--ease-out) infinite alternate;
}
@keyframes orb-float-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(60px, -50px, 0) scale(1.15); }
}
@keyframes orb-float-2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-50px, 40px, 0) scale(.9); }
}
@keyframes orb-float-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(30px, -30px, 0) scale(1.1); }
}
#chat-scroll, #chat-column { position: relative; z-index: 1; }
::root[data-theme="light"] .chat-orbs span { opacity: .1; }

/* —— 文件区自动化（v1.9.1）：小节更新闪动 + 文件行高亮 —— */
.sb-filesec.updated { animation: filesec-pulse 1.6s var(--ease-out); }
@keyframes filesec-pulse {
  0% { background: rgba(52, 211, 153, .22); }
  100% { background: transparent; }
}
.tr-row.flash {
  animation: file-flash 1.8s var(--ease-out);
  border-radius: 6px;
}
@keyframes file-flash {
  0% { background: rgba(52, 211, 153, .28); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .4); }
  100% { background: transparent; box-shadow: none; }
}

/* —— 右侧文件管理器（v1.9.1）—— */
.stg-files {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--bg1);
}
.stg-files-side {
  width: clamp(120px, 34%, 240px);
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg0);
  min-height: 0;
}
.stg-files-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--text3);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.stg-tree-toggle {
  margin-left: auto;
  width: 18px; height: 18px;
  border: none; background: none; color: var(--text3);
  cursor: pointer; border-radius: 4px;
  font-size: 13px; line-height: 1;
  transition: all var(--dur-fast) var(--ease-out);
}
.stg-tree-toggle:hover { color: var(--text); background: var(--bg3); }
/* 窄展区智能收起：树折叠成窄条给内容让位（v3.11.0 响应式），按钮翻转可展开 */
.stg-files.tree-collapsed .stg-files-side { width: 26px; }
.stg-files.tree-collapsed .stg-files-head b { display: none; }
.stg-files.tree-collapsed .stg-files-tree { display: none; }
.stg-files.tree-collapsed .stg-tree-toggle { transform: rotate(180deg); }
/* 预览（图片/PDF/二进制卡） */
.stg-preview-center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 14px; }
.stg-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-2); background: #fff; }
.stg-preview-frame { flex: 1; width: 100%; height: 100%; border: none; background: #fff; }
.stg-preview-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 32px; border: 1px dashed var(--line2); border-radius: var(--radius-lg); color: var(--text3); text-align: center; }
.stg-preview-card .stg-preview-ico { color: var(--ai); opacity: .7; }
.stg-preview-card .stg-preview-ico svg { width: 34px; height: 34px; }
.stg-preview-name { color: var(--text); font-size: 13px; word-break: break-all; }
.stg-preview-sub { font-size: 12px; }
.stg-files-head svg { width: 13px; height: 13px; color: var(--ai); }
.stg-files-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 4px;
}
.stg-files-tree .tr-row { color: var(--text2); }
.stg-files-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
}
.stg-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text3);
  font-size: 13px;
}
.stg-editor-empty i { font-style: normal; font-size: 11.5px; color: var(--text3); opacity: .7; }
/* 编辑器 */
.stg-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.stg-editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg0);
  flex: none;
}
.stg-editor-bar .se-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stg-editor-bar .se-name.dirty::after { content: ' •'; color: var(--amber); }
.stg-editor-bar button {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  transition: all .13s;
}
.stg-editor-bar button:hover { border-color: var(--ai-border); color: var(--text); }
.stg-editor-bar .se-save {
  background: rgba(151, 136, 255, .16);
  border-color: var(--ai-border);
  color: var(--ai);
  font-weight: 600;
}
.stg-editor-bar .se-save:hover { background: rgba(151, 136, 255, .28); }
.stg-editor textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: var(--bg1);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  padding: 12px 14px;
  tab-size: 2;
}
.stg-editor-status {
  padding: 4px 12px;
  font-size: 10.5px;
  color: var(--text3);
  border-top: 1px solid var(--line);
  background: var(--bg0);
  flex: none;
}
.stg-btn.active { background: rgba(151, 136, 255, .14); color: var(--ai); }

/* —— 代码编辑器（高亮/行号/tab 条）—— */
.stg-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 6px 0;
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex: none;
  scrollbar-width: thin;
}
.stg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 7px 7px 0 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  transition: all .12s;
}
.stg-tab:hover { background: var(--bg2); }
.stg-tab.active {
  background: var(--bg1);
  border-color: var(--line);
  border-bottom-color: var(--bg1);
  color: var(--text);
}
.stg-tab.dirty .stg-tab-name::after { content: ' ‚2'; color: var(--amber); }
.stg-tab-x {
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 9px;
  color: var(--text3);
}
.stg-tab-x:hover { background: rgba(248, 113, 113, .2); color: #f87171; }
.stg-editor-host {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  overflow: auto;
}
.stg-tree-toggle-open { display: none; margin-left: 8px; }
.stg-editor-status {
  padding: 4px 12px;
  font-size: 10.5px;
  color: var(--text3);
  border-top: 1px solid var(--line);
  background: var(--bg0);
  flex: none;
  font-family: var(--mono);
}
/* 覆盖层编辑器 */
.ce-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
  background: var(--bg1);
  overflow: hidden;
}
.ce-gutter {
  width: 46px;
  flex: none;
  overflow: hidden;
  padding: 12px 0;
  text-align: right;
  color: var(--text3);
  opacity: .65;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  user-select: none;
  border-right: 1px solid var(--line);
  background: var(--bg0);
}
.ce-gutter span { display: block; padding-right: 10px; }
.ce-gutter span.cur { color: var(--ai); background: rgba(151, 136, 255, .1); }
.ce-hl {
  position: absolute;
  inset: 0 0 0 46px;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
  pointer-events: none;
  word-break: break-all;
}
.ce-input {
  position: absolute;
  inset: 0 0 0 46px;
  margin: 0;
  padding: 12px 14px;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  border: none;
  outline: none;
  resize: none;
  white-space: pre;
  overflow: auto;
  word-break: break-all;
  z-index: 2;
}
.ce-input::selection { background: rgba(151, 136, 255, .3); color: transparent; }
/* 高亮 token 配色（墨穹主题） */
.ce-kw { color: #c792ea; font-weight: 600; }
.ce-str { color: #7ee787; }
.ce-cmt { color: #6a737d; font-style: italic; }
.ce-num { color: #79c0ff; }
.ce-fn { color: #d2a8ff; }
.ce-tag { color: #f97583; }
.ce-attr { color: #79c0ff; }

/* —— 展区工具栏：按功能分色（每个按钮专属身份色）—— */
.stg-btn { position: relative; }
#stg-files-mode { color: var(--jade); opacity: .8; }
#stg-files-mode:hover, #stg-files-mode.active { background: rgba(52, 211, 153, .14); color: var(--jade); opacity: 1; }
#stg-open-file { color: #79c0ff; opacity: .8; }
#stg-open-file:hover { background: rgba(121, 192, 255, .13); color: #79c0ff; opacity: 1; }
#stg-external { opacity: .7; }
#stg-external:hover { color: var(--text); opacity: 1; }
#stg-close { opacity: .7; }
#stg-close:hover { background: rgba(248, 113, 113, .16); color: #f87171; opacity: 1; }

/* —— 编辑器/文件管理器窄宽度自适应（展区内容器查询）—— */
#stage { container-type: inline-size; }
@container (max-width: 520px) {
  .stg-files-side { width: 148px; }
  .stg-tab { max-width: 120px; }
  .ce-gutter { width: 36px; }
  .ce-hl { left: 36px; }
  .ce-input { left: 36px; }
  .stg-editor-status { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container (max-width: 400px) {
  .stg-files-side { width: 110px; }
  .stg-tab { max-width: 88px; padding: 4px 5px 4px 7px; }
  .stg-tab .stg-tab-x { width: 11px; height: 11px; font-size: 8px; }
  .ce-gutter { width: 28px; }
  .ce-hl { left: 28px; padding: 10px 8px; }
  .ce-input { left: 28px; padding: 10px 8px; font-size: 11.5px; }
}

/* —— 账号登录表单（排版优化）—— */
.acct-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.acct-form .field input { height: 36px; }
.acct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.acct-actions .btn-primary, .acct-actions .btn-ghost { height: 36px; }

/* ═══ 智能分级适配：内容按宽度档位主动响应（不挤压、不遮盖、淡入淡出）═══ */

/* —— 侧栏分级：窄时 meta 隐藏、操作按钮图标化、搜索框紧凑 —— */
.sr-meta, .sb-fold { transition: opacity .18s var(--ease-out); }
body.sb-narrow .sr-meta { opacity: 0; }
body.sb-narrow .sr-actions .icon-btn { width: 22px; height: 22px; }
body.sb-narrow .sr-actions .icon-btn svg { width: 12px; height: 12px; }
body.sb-narrow .btn-new-chat span:last-child { display: none; }
body.sb-narrow .btn-new-chat { justify-content: center; padding: 0; gap: 0; }
body.sb-tiny .sb-search input { font-size: 11px; padding: 0 4px; }
body.sb-tiny .sb-search { padding: 5px 6px; }
/* 防遮盖：项目行元素弹性收缩顺序（标题先缩、操作按钮永不缩没） */
.session-row .sr-title { flex: 1 1 auto; min-width: 0; }
.session-row .sr-actions { flex: none; }
.session-row .sr-chev { flex: none; }

/* —— 聊天区第三档（<450）：输入区全面图标化 —— */
body.chat-tiny .cp-act-label, body.chat-tiny .cp-hint, body.chat-tiny .hd-chev { display: none !important; }
body.chat-tiny .cp-act { width: 34px; justify-content: center; padding: 0; }
body.chat-tiny .cp-act.cp-model.active-label-hidden { display: inline-flex; }
body.chat-tiny .send-btn { width: 38px; height: 38px; }
body.chat-tiny .msg-user-bubble { padding: 8px 12px; }
body.chat-tiny .ai-avatar { display: none; }
body.chat-tiny .item-ai .ai-body { margin-left: 0; }

/* —— 展区第四档（<340）：工具栏极简 —— */
@container (max-width: 340px) {
  .stg-tbar .stg-group:first-child { display: none; }
  .stg-tbar { gap: 3px; }
  #stg-url { font-size: 10.5px; }
  .stg-suggest { left: 10px; }
}
/* 分级切换的柔和过渡（关键元素） */
.cp-act, .send-btn, .stg-btn, .btn-new-chat, .sr-actions .icon-btn {
  transition: background .13s, color .13s, width .18s var(--ease-out), opacity .18s var(--ease-out);
}

/* ═══ 能力中心（Capability Hub）═══ */
.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.hub-stat.cache { border-color: var(--ok-border); background: var(--ok-bg); }
.hub-stat.cache b { color: var(--jade); }
.hub-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  background: var(--bg2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .15s;
}
.hub-stat:hover { border-color: var(--ai-border); background: var(--bg3); transform: translateY(-1px); }
.hub-stat b { font-size: var(--font-xl); font-weight: 600; color: var(--text); line-height: 1.2; }
.hub-stat span { font-size: var(--font-sm); color: var(--text3); }
.hub-stat span i { font-style: normal; color: var(--jade); }
.hub-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.hub-tab {
  padding: 5px 14px; border-radius: 99px;
  background: transparent; border: 1px solid var(--line);
  color: var(--text2); font-size: 12px; cursor: pointer;
  transition: all .13s;
}
.hub-tab:hover { border-color: var(--line2); color: var(--text); }
.hub-tab.active { background: rgba(151, 136, 255, .14); border-color: var(--ai-border); color: var(--ai); font-weight: 600; }
#hub-search {
  margin-left: auto;
  width: 140px; height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--line2);
  color: var(--text); font-size: 11.5px; outline: none;
}
#hub-search:focus { border-color: var(--ai-border); width: 180px; }
.hub-body { min-height: 200px; }
.hub-sec-label { padding: 10px 2px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; color: var(--text3); }
.hub-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  transition: all .13s;
}
.hub-row:hover { border-color: var(--line2); background: var(--bg3); }
.hub-row.draft { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .05); }
.hub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-main b { font-size: 12.5px; color: var(--text); }
.hub-desc { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-main i { font-style: normal; font-size: 10px; color: var(--text3); }
.hub-acts { display: flex; gap: 5px; flex: none; }
.hub-acts .btn-ghost.sm { padding: 3px 9px; font-size: 11px; }
.hub-acts .promote { color: var(--jade); border-color: rgba(52, 211, 153, .3); }
.hub-acts .promote:hover { background: rgba(52, 211, 153, .12); }
.hub-acts .danger { color: #f87171; border-color: rgba(248, 113, 113, .25); }
.hub-src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-xs); color: var(--text3); white-space: nowrap; }
.hub-src::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.hub-src.auto { color: var(--jade); }
.hub-src.manual { color: var(--ai); }
.hub-src.draft { color: var(--warn); }
.hub-src.workspace { color: var(--text3); }
.hub-risk { font-size: 10px; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.hub-risk.safe { background: var(--ok-bg); color: var(--ok); }
.hub-risk.write { background: var(--warn-bg); color: var(--warn); }
.hub-risk.exec { background: var(--err-bg); color: var(--err); }
.hub-mem { font-weight: 400; font-size: 12px; }
.hub-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 12px; }
.hub-tl { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.hub-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ai); }
.hub-tl-dot.draft { background: var(--jade); }
.hub-tl-dot.plugin { background: var(--amber); }
.hub-tl-dot.reflect { background: var(--text3); }
.hub-tl-text { flex: 1; font-size: 12px; color: var(--text2); }
.hub-tl i { font-style: normal; font-size: 10.5px; color: var(--text3); flex: none; }

/* 文件引用可点击（对话中的 `filename.ext`） */
.md-code { cursor: default; }
.md-code[data-clickable] { cursor: pointer; border-bottom: 1px dashed var(--ai-border); }
.md-code[data-clickable]:hover { background: rgba(151, 136, 255, .15); color: var(--ai); }


/* ═══ 账号页（大厂式：头像 hero + 积分条）═══ */
.acct-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--bg1); border: 1px solid var(--border); }
.acct-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ai), var(--jade));
  box-shadow: 0 4px 14px rgba(151, 136, 255, .3);
}
.acct-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-hero-txt b { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-hero-txt span { font-size: 11.5px; color: var(--text3); }
.acct-logout-mini { flex: none; height: 28px; padding: 0 12px; font-size: 11.5px; }
.acct-credits { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg1); border: 1px solid var(--border); }
.acct-credits-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.acct-credits-head span { font-size: 11.5px; color: var(--text3); }
.acct-credits-head b { font-size: 16px; font-weight: 800; color: var(--text); }
.acct-credits-bar { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.acct-credits-bar i { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--ai), var(--jade)); transition: width .5s var(--ease-out); }
.acct-credits.unlimited .acct-credits-bar { display: none; }

/* 模型菜单动态标签（后台 models 域 {id,label,tag} 的 tag） */
.mm-tag {
  flex: none; padding: 1px 7px; border-radius: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ai); background: rgba(151, 136, 255, .12); border: 1px solid rgba(151, 136, 255, .3);
}


/* ═══ 模型接入双栏（大厂设置式 master-detail）═══ */
.models-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.models-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.models-providers { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.models-providers::-webkit-scrollbar { width: 6px; }
.models-providers::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; }
.models-providers .provider-row { padding: 10px 12px; }
.models-detail { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.models-detail-h { margin: 0 0 2px; }
.models-add-btn { width: 100%; }
/* 服务商行：加激活态左条 */
.models-providers .provider-row.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: linear-gradient(180deg, var(--ai), var(--jade));
}

/* ═══ 账号 pane（登录 hero + 分节标题）═══ */
.acct-login-hero {
  padding: 18px 16px; border-radius: var(--radius-lg); margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(151, 136, 255, .14), rgba(52, 211, 153, .08)), var(--bg1);
  border: 1px solid var(--ai-border);
}
.acct-login-hero b { display: block; font-size: 15px; font-weight: 750; color: var(--text); margin-bottom: 4px; }
.acct-login-hero p { margin: 0; font-size: 12px; color: var(--text2); line-height: 1.6; }
.acct-form { display: flex; flex-direction: column; gap: 12px; }
.acct-form .field input { height: 38px; }
.acct-login-btn { height: 38px; width: 100%; font-size: 13px; }
.acct-reg-link { height: 32px; width: 100%; border: none; background: none; color: var(--text3); font-size: 12px; }
.acct-reg-link:hover { color: var(--ai); }
.sec-title { display: flex; align-items: center; gap: 8px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.st-pane .plan-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }


/* ═══ 账号 pane 排版收紧 ═══ */
#pane-account .st-h { margin-top: 20px; margin-bottom: 10px; }
#pane-account .bill-status { margin-top: 0; }
#pane-account .cfg-note { margin-top: 8px; }
#pane-account .acct-form { max-width: 460px; }
#pane-account .acct-credits { max-width: 460px; }
#pane-account .bill-status { max-width: 640px; }
#pane-account .plan-grid { max-width: 640px; }


/* ═══ 设置导航滑动高亮块（Sidebar 模式）═══ */
.st-nav { position: relative; }
.st-nav-ind {
  position: absolute; left: 10px; width: 0; height: 0;
  background: var(--bg3); border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: top .3s cubic-bezier(.3, 1.1, .35, 1), height .3s cubic-bezier(.3, 1.1, .35, 1), width .3s cubic-bezier(.3, 1.1, .35, 1), opacity .2s;
  opacity: 0; z-index: 0; pointer-events: none;
}
.st-nav-ind.on { opacity: 1; }
.st-item { position: relative; z-index: 1; background: none !important; border: none; opacity: .72; transition: color .2s, opacity .2s, background .15s; }
.st-item:not(.active):hover { opacity: 1; background: var(--bg2) !important; }
.st-item.active { opacity: 1; color: var(--text); background: none !important; }
.st-item.active svg { color: var(--jade); filter: drop-shadow(0 0 6px rgba(63, 216, 180, .35)); }
.st-item.active span:not(.st-badge) { font-weight: 550; }
.st-item.active .st-badge { box-shadow: 0 0 0 1px rgba(151, 136, 255, .25); }
/* 搜索无命中空态 */
.st-search-empty { display: block; padding: 14px 10px; font-size: 12px; color: var(--text3); text-align: center; }
.st-search-empty[hidden] { display: none; }

/* ═══ pane 切换内容淡入上移 ═══ */
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-pane { animation: pane-in .22s var(--ease-out); }

/* ═══ 背景类型分段器（滑动背景块）═══ */
.skin-seg {
  position: relative; display: flex; gap: 2px; padding: 3px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 12px;
}
.skin-seg-ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0;
  background: var(--bg3); border: 1px solid var(--line2); border-radius: 8px;
  transition: left .26s cubic-bezier(.3, 1.1, .35, 1), width .26s cubic-bezier(.3, 1.1, .35, 1);
  z-index: 0;
}
.skin-seg-item {
  position: relative; z-index: 1; flex: 1; height: 30px;
  border: none; background: none; color: var(--text3);
  font-size: 12.5px; cursor: pointer; border-radius: 8px;
  transition: color .2s;
}
.skin-seg-item:hover { color: var(--text2); }
.skin-seg-item.on { color: var(--text); font-weight: 650; }

/* ═══ 皮肤：拖拽导入区/色板/渐变 ═══ */
.skin-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px; border-radius: var(--radius-lg); cursor: pointer;
  border: 1.5px dashed var(--line2); background: var(--bg1);
  transition: all .18s var(--ease-out);
}
.skin-drop:hover, .skin-drop.over { border-color: var(--ai-border); background: rgba(151, 136, 255, .06); }
.skin-drop-ico {
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ai); background: rgba(151, 136, 255, .1); border: 1px solid rgba(151, 136, 255, .25);
}
.skin-drop b { font-size: 13px; color: var(--text); }
.skin-drop-fmt { font-size: 11px; color: var(--text2); letter-spacing: .03em; }
.skin-drop-hint { font-size: 10.5px; color: var(--text3); }
.skin-using { margin-top: 10px; font-size: 11.5px; color: var(--jade); }
.skin-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.skin-swatch {
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line2); transition: transform .15s, border-color .15s; position: relative;
}
.skin-swatch:hover { transform: scale(1.1); border-color: var(--ai-border); }
.skin-swatch-custom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; background: var(--bg2); overflow: hidden; }
.skin-swatch-custom input { width: 100%; height: 20px; border: none; cursor: pointer; background: none; }
.skin-swatch-custom span { font-size: 9.5px; color: var(--text3); }
.skin-grads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skin-grad {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg1);
  color: var(--text2); font-size: 11.5px;
  transition: all .15s var(--ease-out);
}
.skin-grad:hover { transform: translateY(-2px); border-color: var(--ai-border); }
.skin-grad.on { border-color: var(--ai-border); color: var(--text); box-shadow: 0 0 0 1px var(--ai-border); }
.skin-grad-chip { width: 100%; height: 44px; border-radius: 8px; display: block; }


/* ═══ 展区钉住（保留常驻）═══ */
.stg-pin { color: var(--text3); }
.stg-pin.on { color: var(--jade); background: rgba(52, 211, 153, .12); }
.stg-pin.on svg { filter: drop-shadow(0 0 4px rgba(52, 211, 153, .5)); }


/* ═══ 消息流大厂化微调（v2.9.1）═══ */
.item-tool .tool-row { border-radius: 12px; }
.item:hover .tool-row { border-color: var(--line2); }
.ai-md p { margin: 0 0 10px; }
.ai-md h1, .ai-md h2, .ai-md h3 { margin: 14px 0 8px; line-height: 1.4; }
.ai-md ul, .ai-md ol { margin: 8px 0; padding-left: 22px; }
.ai-md li { margin: 4px 0; }
.ai-md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
/* 用户气泡悬浮微亮 */
.msg-user-bubble:hover { border-color: rgba(151, 136, 255, .45); }
/* AI 消息进入动效统一 */
@keyframes rise-soft { from { opacity: 0; transform: translateY(6px); } }
.item { animation: rise-soft .26s var(--ease-out); }


/* ═══ 展区状态镜像（贾维斯一期）═══ */
.stg-mirror {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg0) 88%, transparent);
  backdrop-filter: blur(10px);
  animation: pane-in .24s var(--ease-out);
}
.sm-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.sm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 10px var(--ai); animation: q-pulse 1.2s ease-in-out infinite; }
.sm-title { font-size: 12.5px; font-weight: 650; color: var(--text); flex: 1; }
.sm-close { border: none; background: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.sm-close:hover { color: var(--text); background: var(--bg3); }
.sm-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.sm-step { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text2); }
.sm-step.cur { background: var(--ai-bg); color: var(--text); }
.sm-idx { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; background: var(--bg3); color: var(--text3); }
.sm-step.cur .sm-idx { background: var(--ai); color: #fff; }
/* 蜂群编排镜像（v3.3.0）：状态徽标复用 sm-idx 盒，文字放状态词 */
.sm-step .sm-idx { min-width: 20px; padding: 0 6px; border-radius: var(--radius-full); }
.sm-step.ok .sm-idx { background: var(--ok-bg); color: var(--jade); border: 1px solid var(--ok-border); }
.sm-step.bad .sm-idx { background: var(--err-bg); color: var(--coral); border: 1px solid var(--err-border); }
.sm-term, .sm-out { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.7; color: #9fe8c8; white-space: pre-wrap; word-break: break-all; }
.sm-term { color: var(--text2); margin-bottom: 6px; }
.sm-approve { text-align: left; }
.sm-tool { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.sm-risk { font-size: 10px; padding: 1px 8px; border-radius: 8px; background: rgba(248, 113, 113, .15); color: #f87171; }
.sm-args { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text2); overflow: auto; max-height: 220px; margin: 0 0 12px; }
.sm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-allow { height: 34px; border: none; border-radius: 9px; cursor: pointer; font-weight: 650; color: #fff; background: linear-gradient(135deg, var(--ai), var(--jade)); }
.sm-deny { height: 34px; border: none; border-radius: 9px; cursor: pointer; font-weight: 650; color: #f87171; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); }
.sm-allow:hover, .sm-deny:hover { filter: brightness(1.15); }


/* ═══ 文件树防切（自适应省略）═══ */
.stg-files-tree { overflow-x: hidden; }
.stg-files-tree .tr-row { overflow: hidden; }
.stg-files-tree .tr-row span, .stg-files-tree .tr-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ═══ 状态镜像二期：always 按钮 + diff 视图 ═══ */
.sm-always {
  height: 34px; border: none; border-radius: 9px; cursor: pointer; font-weight: 650;
  color: var(--jade); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3);
  grid-column: 1 / -1;
}
.sm-always:hover { filter: brightness(1.15); background: rgba(52, 211, 153, .18); }
.sm-diff { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.65; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; overflow: auto; max-height: 60vh; }
.sm-diff .dl { white-space: pre-wrap; word-break: break-all; color: var(--text2); }
.sm-diff .dl.add { color: #6ee7a0; background: rgba(52, 211, 153, .08); }
.sm-diff .dl.del { color: #f87171; background: rgba(248, 113, 113, .07); text-decoration: line-through; }


/* ═══ 语音输入录音态 ═══ */
.cp-voice.recording { color: #f87171 !important; animation: voice-pulse .8s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.3); } 50% { box-shadow: 0 0 0 6px rgba(248,113,113,.15); } }


/* ═══════════════ P0 体验修复（2026-09-05 UI 评审清单）═══════════════ */

/* P0-2 · 思考卡骨架占位：流式且文本 <20 字时显示（JS 切 hidden），把"等待感"变成可见形态 */
.think-skel { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 8px; }
.think-skel[hidden] { display: none; }
.think-skel span {
  height: 9px;
  border-radius: var(--radius-full);
  background-color: rgba(151, 136, 255, .09);
  background-image: linear-gradient(90deg, transparent, rgba(151, 136, 255, .2), transparent);
  background-repeat: no-repeat;
  background-size: 220px 100%;
  animation: think-skel-sweep 1.3s ease-in-out infinite;
}
.think-skel span:nth-child(1) { width: 100%; }
.think-skel span:nth-child(2) { width: 86%; animation-delay: .15s; }
.think-skel span:nth-child(3) { width: 60%; animation-delay: .3s; }
@keyframes think-skel-sweep { from { background-position-x: -220px } to { background-position-x: calc(100% + 220px) } }
:root[data-theme="light"] .think-skel span { background-color: rgba(109, 92, 230, .1); }
@media (prefers-reduced-motion: reduce) { .think-skel span { animation: none } }

/* P0-3 · 模型/权限菜单：描述列解除 45% 上限——名称列收为内容宽（上限 55%），描述取剩余全部宽度 */
.mm-name { flex: 0 1 auto; max-width: 55%; }
.mm-desc { flex: 1 1 auto; min-width: 0; max-width: none; text-align: right; }

/* P0-3 · 聊天列最小宽度：展区开启时聊天区不再被压瘪（此前 min-width:0 可被挤没）。
   420 与侧栏拖拽钳制（app.js sbClamp 的"聊天 ≥420"意图）、窗口 minWidth 980、展区 min 320 相容；
   空间不足时展区先让位（flex 改可收，收到 min-width 320 为止），420-450 区间由既有 chat-tiny 图标化档衔接。 */
#chat { min-width: 420px; }
#stage { flex: 0 1 auto; }

/* P0-3 · 对话区顶栏自适应：聊天区 <820px（开展区/窄窗）时收紧文字上限防截断重叠；
   <560px 进一步隐藏工作区路径（侧栏仍有同名入口）。容器查询作用于 #chat（inline-size）。 */
@container (max-width: 820px) {
  #hd-model-label { max-width: 170px; }
  .hd-ws { max-width: 120px; }
  .hd-title { max-width: 130px; }
}
@container (max-width: 560px) {
  .hd-ws { display: none; }
}

/* P0-2 · 当前动作行：思考卡头部实时显示"正在调用 X · 摘要…"（运行期仅最后一张思考卡点亮） */
.think-action { color: var(--text3); font-size: var(--font-sm); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.think-action[hidden] { display: none; }
.think.live .think-action { color: var(--ai); }

/* ═══ 工作区图谱（gx-*）：Canvas 力导向 overlay · 参数移植自旧项目定稿 ═══ */
.gx-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg0) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  animation: gx-in var(--dur-slow) var(--ease-out);
}
@keyframes gx-in { from { opacity: 0; transform: scale(.99) } }
.gx-head {
  display: flex; align-items: center; gap: var(--space-2);
  height: 52px; padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line); flex: none;
}
.gx-title { display: inline-flex; width: 18px; height: 18px; color: var(--ai); flex: none; }
.gx-title svg { width: 100%; height: 100%; }
.gx-name { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--text2); flex: none; }
.gx-stats { font-size: var(--font-sm); color: var(--text3); flex: none; }
.gx-ws { font-size: var(--font-xs); color: var(--text3); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.gx-flex { flex: 1; }
.gx-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text3); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gx-close:hover { background: var(--bg3); color: var(--text2); }
.gx-close svg { width: 15px; height: 15px; }
.gx-canvas { flex: 1; display: block; width: 100%; min-height: 0; cursor: grab; }
.gx-canvas:active { cursor: grabbing; }
.gx-legend {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg1) 78%, transparent); backdrop-filter: blur(8px);
  font-size: var(--font-xs); color: var(--text3); pointer-events: none; max-width: 86%;
}
.gx-lg-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gx-lg-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gx-lg-item i.gx-lg-line { width: 14px; height: 2px; border-radius: 1px; }
.gx-lg-sep { width: 1px; height: 10px; background: var(--line); flex: none; }
.gx-detail {
  position: absolute; right: 16px; bottom: 16px; width: 264px;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg1) 88%, transparent); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2); font-size: var(--font-sm);
  animation: gx-in var(--dur-base) var(--ease-out);
}
.gx-d-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gx-d-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gx-d-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.gx-d-badge { flex: none; font-size: var(--font-xs); }
.gx-d-path { margin-top: 5px; font-size: var(--font-xs); color: var(--text3); direction: rtl; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-d-meta { margin-top: 4px; font-size: var(--font-xs); color: var(--text3); }
.gx-d-tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.gx-d-tag { padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--radius-full); font-size: var(--font-xs); color: var(--text3); }
.gx-d-open {
  margin-top: 9px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text2); font-size: var(--font-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gx-d-open:hover { background: var(--bg3); border-color: var(--ai); }
.gx-d-open svg { width: 12px; height: 12px; }
.gx-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--font-md); color: var(--text3); pointer-events: none;
}
.gx-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); border-top-color: var(--ai);
  animation: gx-spin 1s linear infinite;
}
@keyframes gx-spin { to { transform: rotate(360deg) } }
.gx-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 0 var(--space-8);
}
.gx-empty b { font-size: var(--font-lg); color: var(--text2); }
.gx-empty span { font-size: var(--font-sm); color: var(--text3); max-width: 420px; }
.gx-loading[hidden], .gx-empty[hidden], .gx-detail[hidden] { display: none; }
/* P1-5：扫描失败卡（overlay 内重试）/ 聚焦按钮 / LOD 降级提示 */
.gx-error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 0 var(--space-8);
}
.gx-error b { font-size: var(--font-lg); color: var(--text2); }
.gx-err-msg { font-size: var(--font-sm); color: var(--text3); max-width: 460px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gx-retry {
  margin-top: 6px; padding: 5px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text2); font-size: var(--font-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gx-retry:hover { background: var(--bg3); border-color: var(--ai); }
.gx-focus {
  flex: none; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--radius-full);
  background: transparent; color: var(--text3); font-size: var(--font-xs); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gx-focus:hover { background: var(--bg3); border-color: var(--ai); color: var(--text2); }
.gx-lodtip { font-size: var(--font-xs); color: var(--text3); margin-left: auto; }
.gx-error[hidden], .gx-focus[hidden], .gx-lodtip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gx-overlay, .gx-detail { animation: none; }
}

/* ═══════════ v3.37.0 全局打磨层：焦点环 / 选区 / 统一缓动 ═══════════ */
/* 键盘导航焦点环（鼠标点击不触发，符合无障碍规范） */
:focus-visible { outline: 2px solid var(--ai-border); outline-offset: 1px; }
/* 统一文本选区色 */
::selection { background: rgba(151, 136, 255, .3); color: inherit; }
/* 高频交互件统一缓出曲线 */
.st-item, .stg-btn, .sb-fold, .sb-rail-btn, .icon-btn { transition-timing-function: var(--ease-out); }