@sanqianx/claude-ai-workbench 0.11.0 → 0.12.0

package/apps/agent-terminal/app.css

@@ -1,566 +1,566 @@
-/* Agent Terminal — desktop-flat theme.
-   Design scale: spacing 4/8/12/16/24 · type 11/12.5/13/15/18 · radius 6/9/13 (+pills)
-   control heights 26/30/36 (22px micro icon buttons) · two shadow levels:
-   --shadow-1 hover/floating, --shadow-2 popovers & modals. */
-
-/* ===== tokens ===== */
-:root {
-  --page:#0d0d0d; --side:#0d0d0d; --surface:#1a1a1a; --surface2:#242424;
-  --line:#242424; --line2:#303030; --pop:#1f1f1f;
-  --text:#ececec; --muted:#909090; --faint:#5f5f5f;
-  --good:#4cc38a; --warn:#e2b466; --bad:#f08080; --accent:#e8863c; --blue:#4f8ef7;
-  --good-soft:rgba(76,195,138,.12); --bad-soft:rgba(240,128,128,.1);
-  --blue-soft:rgba(79,142,247,.14); --accent-soft:rgba(232,134,60,.14);
-  --focus:rgba(79,142,247,.55); --focus-line:rgba(79,142,247,.45);
-  --code-bg:#141417; --code-line:#26262b;
-  --shadow-1:0 2px 10px rgba(0,0,0,.3);
-  --shadow-2:0 12px 32px rgba(0,0,0,.55);
-}
-body.light {
-  --page:#f7f7f7; --side:#f7f7f7; --surface:#ececec; --surface2:#e2e2e2;
-  --line:#dcdcdc; --line2:#c9c9c9; --pop:#ffffff;
-  --text:#1c1c1c; --muted:#666666; --faint:#9a9a9a;
-  --good:#258263; --warn:#9d6e21; --bad:#bd4e4e; --accent:#c26a1e; --blue:#2f6fd0;
-  --good-soft:rgba(37,130,99,.12); --bad-soft:rgba(189,78,78,.1);
-  --blue-soft:rgba(47,111,208,.12); --accent-soft:rgba(194,106,30,.12);
-  --focus:rgba(47,111,208,.5); --focus-line:rgba(47,111,208,.45);
-  --code-bg:#f2f3f5; --code-line:#dfe1e6;
-  --shadow-1:0 2px 10px rgba(30,30,30,.1);
-  --shadow-2:0 12px 32px rgba(30,30,30,.18);
-}
-
-/* ===== base ===== */
-* { box-sizing:border-box; }
-[hidden] { display:none !important; }
-body { margin:0; overflow:hidden; background:var(--page); color:var(--text);
-  font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
-button, input, textarea, select { font:inherit; }
-button { cursor:pointer; color:inherit; }
-:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
-.fin:focus-visible, .pop-search:focus-visible, .composer textarea:focus-visible { outline:none; }
-.view { display:none; height:100vh; }
-.view.active { display:flex; }
-.linklike { border:0; color:var(--blue); background:transparent; padding:0; font-size:inherit; }
-.linklike:hover { text-decoration:underline; }
-
-/* Shared micro-interaction: every flat interactive surface eases its state change. */
-.session, .proj-item, .add-proj, .stab, .mgmt-item, .pop-item, .bar-btn, .ghost, .new-session,
-.act-btn, .foot-btn, .io-copy, .bubble-copy, .cb-copy, .attachment-remove, .del,
-.path-row .browse, .cta, .btn-allow, .btn-deny, .jump-latest, .send, .toggle-caret {
-  transition:background-color .12s ease, color .12s ease, border-color .12s ease, filter .12s ease, transform .06s ease;
-}
-
-/* ===== generic buttons ===== */
-.ghost { display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px;
-  border:0; color:var(--muted); background:transparent; font-size:12.5px; border-radius:6px; }
-.ghost:hover { color:var(--text); background:var(--surface); }
-
-/* ===== 侧栏 ===== */
-.sidebar { display:flex; flex-direction:column; width:264px; flex:0 0 auto;
-  background:var(--side); border-right:1px solid var(--line); }
-.brand { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; }
-.brand h1 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:700; }
-.brand h1 svg.ics { width:15px; height:15px; color:var(--accent); }
-.brand .ver { color:var(--faint); font-size:11px; }
-.new-session { display:flex; align-items:center; gap:8px; height:30px; margin:4px 12px 8px;
-  padding:0 12px; border:1px solid var(--line2); border-radius:9px; color:var(--muted);
-  background:var(--surface); text-align:left; font-size:12.5px; }
-.new-session:hover { color:var(--text); background:var(--surface2); border-color:var(--line2); }
-.session-scroll { flex:1; overflow-y:auto; padding:4px 12px 12px; }
-.group-label { margin:16px 4px 4px; color:var(--faint); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
-
-/* 项目行:折叠箭头 + 名称 + 悬浮操作。激活项目以左侧主色条标记。 */
-.proj-item { display:flex; align-items:center; gap:8px; width:100%; height:26px; padding:0 8px;
-  border:0; border-radius:6px; color:var(--text); background:transparent;
-  font-size:12.5px; font-weight:600; text-align:left; }
-.proj-item:hover { background:var(--surface); }
-.proj.active > .proj-item { background:var(--surface); box-shadow:inset 2px 0 0 var(--accent); }
-.p-caret { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px;
-  flex:0 0 auto; color:var(--faint); transition:transform .15s ease; }
-.p-caret.closed { transform:rotate(-90deg); }
-.proj-item .p-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.toggle-caret { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px;
-  flex:0 0 auto; color:inherit; transition:transform .15s ease; }
-.toggle-caret.closed { transform:rotate(-90deg); }
-.sess-list { padding:0 0 4px; }
-.sess-list .session { padding-left:24px; }
-.session { display:flex; align-items:center; gap:8px; width:100%; height:26px; padding:0 8px;
-  border:0; border-radius:6px; background:transparent; color:var(--muted); text-align:left; font-size:12.5px; }
-.session:hover { background:var(--surface); color:var(--text); }
-.session.active { background:var(--surface2); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); }
-.session .s-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.session .when { margin-left:auto; color:var(--faint); font-size:11px; flex:0 0 auto; }
-.session:hover > .when { display:none; }
-.agent-badge { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
-  width:18px; height:18px; border-radius:6px; color:#fff; font-size:11px; font-weight:700; }
-.agent-badge.claude-code { background:#c9642d; }
-.agent-badge.codex { background:#2e7d5b; }
-.agent-badge.zcode { background:#6d5bd0; }
-.agent-badge.opencode { background:#33739e; }
-.add-proj { display:flex; align-items:center; gap:8px; width:100%; height:26px; margin:4px 0 0;
-  padding:0 8px; border:0; border-radius:6px; color:var(--muted); background:transparent;
-  font-size:12.5px; text-align:left; }
-.add-proj:hover { color:var(--text); background:var(--surface); }
-.proj-empty { padding:4px 8px 8px 24px; color:var(--faint); font-size:11px; }
-
-/* 侧栏空态:SVG 图标组合的插画式提示,不依赖外部资源。 */
-.side-empty { display:grid; justify-items:center; gap:4px; margin:8px 4px 12px; padding:16px 12px;
-  border:1px dashed var(--line2); border-radius:9px; color:var(--faint); font-size:12.5px; text-align:center; }
-.side-empty-art { display:flex; align-items:center; justify-content:center; width:40px; height:40px;
-  border-radius:9px; background:var(--surface); color:var(--faint); }
-.side-empty-sub { font-size:11px; }
-
-.row-acts { display:none; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto; }
-.session:hover > .row-acts, .proj-item:hover > .row-acts { display:inline-flex; }
-.act-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
-  padding:0; border:0; color:var(--muted); background:transparent; border-radius:6px; user-select:none; }
-.act-btn:hover { color:var(--text); background:var(--surface2); }
-.act-btn.danger:hover { color:var(--bad); background:var(--bad-soft); }
-
-/* 归档区:分隔线 + 可折叠标题 + 计数徽标。 */
-.arch-toggle { display:flex; align-items:center; gap:4px; width:calc(100% - 8px); margin:16px 0 4px;
-  padding:8px 4px 4px; border:0; border-top:1px solid var(--line); background:transparent;
-  color:var(--faint); font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-align:left; }
-.arch-toggle:hover { color:var(--muted); }
-.arch-count { margin-left:4px; padding:0 4px; border-radius:99px; background:var(--surface);
-  color:var(--faint); font-size:11px; letter-spacing:0; }
-.arch-list .session .s-title { color:var(--muted); }
-.arch-list .agent-badge { opacity:.75; }
-.sidebar-foot { display:flex; align-items:center; gap:8px; padding:12px 16px;
-  border-top:1px solid var(--line); color:var(--faint); font-size:11px; }
-.sidebar-foot .ghost { padding:0 4px; }
-.dot { display:inline-block; width:7px; height:7px; flex:0 0 auto; border-radius:99px; background:var(--good); }
-.dot.run { animation:pulse 1.4s infinite; }
-@keyframes pulse { 50% { opacity:.4; } }
-
-/* ===== 主区 ===== */
-.main { display:flex; flex-direction:column; flex:1; min-width:0; position:relative; }
-.top-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 24px 8px; }
-.top-strip .t { font-weight:600; font-size:13px; }
-.session-provider { color:var(--faint); font-size:11px; overflow:hidden; text-overflow:ellipsis;
-  white-space:nowrap; min-width:0; }
-.top-strip .st { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:4px 12px;
-  border-radius:99px; color:#9db8ff; background:var(--blue-soft); font-size:12.5px; }
-body.light .top-strip .st { color:#2f5fd0; }
-
-/* ===== 消息流(ZCode 风格:过程折叠,正文直出)===== */
-.stream { flex:1; overflow-y:auto; padding:8px 24px 24px; }
-.col { max-width:860px; margin:0 auto; }
-.empty-hint { text-align:center; color:var(--muted); margin-top:18vh; font-size:13px; line-height:1.7; }
-.empty-hint .big { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
-.hint-wrap { position:relative; display:inline-flex; }
-.hint-art { display:flex; align-items:center; justify-content:center; width:56px; height:56px;
-  border-radius:13px; border:1px solid var(--line); background:var(--surface); color:var(--muted); }
-.hint-art svg { width:24px; height:24px; }
-.hint-art svg, .hint-spark svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
-.hint-spark { position:absolute; top:-6px; right:-8px; display:flex; align-items:center; justify-content:center;
-  width:20px; height:20px; border-radius:99px; background:var(--surface2); color:var(--accent); box-shadow:var(--shadow-1); }
-.hint-spark svg { width:11px; height:11px; }
-.empty-hint p { margin:4px 0 0; }
-
-/* 用户消息:轻量右置色块(尾部小圆角);AI 消息:全宽白板。 */
-.msg.user { display:grid; justify-items:end; margin:24px 0 12px; }
-.bubble { max-width:82%; padding:8px 12px; border:1px solid var(--line); border-radius:13px 13px 4px 13px;
-  background:var(--surface2); color:var(--text); font-size:13px; line-height:1.65;
-  white-space:pre-wrap; overflow-wrap:anywhere; }
-body.light .bubble { background:var(--surface); }
-.msg.ai { margin:12px 0 16px; }
-.msg.ai p { margin:0 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
-.msg.ai .dim { color:var(--muted); }
-
-/* 回合折叠区:头部即计时行(工作中 X 秒 → 已工作 X 秒) */
-.proc { margin:4px 0 12px; user-select:none; }
-.proc > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
-  color:var(--muted); font-size:12.5px; padding:4px 8px; margin-left:-8px; border-radius:6px; }
-.proc > summary:hover { color:var(--text); background:var(--surface); }
-.proc > summary::-webkit-details-marker { display:none; }
-.proc .caret { display:inline-flex; color:var(--faint); transition:transform .15s ease; }
-.proc[open] > summary .caret { transform:rotate(90deg); }
-.proc .p-meta { color:var(--faint); }
-.proc-steps { display:grid; gap:2px; margin:2px 0 8px 16px; padding-left:12px; border-left:1px solid var(--line); }
-.turn-note { display:flex; align-items:center; gap:8px; margin:4px 0 16px; color:var(--faint); font-size:12.5px; }
-
-/* 过程行:思考分段 / 工具步骤 / 备注行 */
-.think-seg { margin:4px 0 8px; }
-.think-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; padding:2px 0; }
-.t-glyph { color:var(--faint); }
-.t-meta { color:var(--faint); font-size:12.5px; }
-.think-body { color:var(--faint); font-size:12.5px; line-height:1.65; white-space:pre-wrap;
-  overflow-wrap:anywhere; margin:2px 0 4px 16px; max-height:280px; overflow-y:auto; }
-.step { color:var(--muted); font-size:12.5px; }
-.step > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
-  flex-wrap:wrap; padding:4px 0; min-width:0; }
-.step > summary::-webkit-details-marker { display:none; }
-.s-caret { display:inline-flex; color:var(--faint); flex:0 0 auto; transition:transform .15s ease; }
-.step[open] > summary .s-caret { transform:rotate(90deg); }
-.s-dot { width:8px; height:8px; flex:0 0 auto; border-radius:99px; background:var(--blue); }
-.step.failed .s-dot { background:var(--bad); }
-.step.note .s-dot { background:var(--faint); }
-.s-name { font-weight:600; color:var(--text); font-size:12.5px; }
-.s-desc { color:var(--faint); font-size:12.5px; overflow:hidden; text-overflow:ellipsis;
-  white-space:nowrap; min-width:0; max-width:60%; }
-.s-meta { color:var(--faint); font-size:12.5px; margin-left:auto; flex:0 0 auto; }
-.s-meta.failed { color:var(--bad); }
-.step-body { display:grid; gap:8px; margin:2px 0 12px 16px; }
-.step-line { display:flex; align-items:center; gap:8px; color:var(--faint); font-size:12.5px; padding:2px 0; }
-.step-line .s-dot { width:6px; height:6px; background:var(--warn); }
-
-/* 输入/输出卡片:语言标签 + 复制按钮 + 语法高亮 */
-.io-card { border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden; }
-.io-head { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 0 12px; }
-.io-tag { display:inline-flex; align-items:center; gap:4px; color:var(--faint); font-size:11px;
-  letter-spacing:.05em; text-transform:uppercase; }
-.io-brace { font:11px Consolas,monospace; color:var(--muted); }
-.io-copy { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
-  border:0; color:var(--faint); background:transparent; border-radius:6px; }
-.io-copy:hover { color:var(--text); background:var(--surface2); }
-.io-card pre { margin:0; padding:4px 12px 8px; color:var(--muted);
-  font:12.5px/1.6 Consolas,"Microsoft YaHei",monospace; white-space:pre-wrap;
-  overflow-wrap:anywhere; max-height:320px; overflow-y:auto; }
-.j-key { color:#7aa2f7; }
-.j-str { color:#9ece6a; }
-.j-num { color:#e0af68; }
-.j-bool { color:#bb9af7; }
-body.light .j-key { color:#2f5fd0; }
-body.light .j-str { color:#3a7d3a; }
-body.light .j-num { color:#9d6e21; }
-body.light .j-bool { color:#7a4fb3; }
-.file-changes { display:grid; gap:4px; font-size:12.5px; }
-.file-change { display:flex; gap:8px; align-items:baseline; min-width:0; }
-.file-path { min-width:0; overflow-wrap:anywhere; }
-.diff-add { color:var(--good); }
-.diff-remove { color:var(--bad); }
-
-/* 用户气泡复制按钮 */
-.bubble-copy { display:inline-flex; align-items:center; justify-content:center; height:22px;
-  min-width:26px; margin:4px 2px 0 auto; border:0; color:var(--faint); background:transparent;
-  border-radius:6px; }
-.bubble-copy:hover { color:var(--text); background:var(--surface2); }
-.copied .ic { color:var(--good); }
-
-/* 最终消息操作条:复制 / 重试 / 模型 · 时间 */
-.msg-foot { display:flex; align-items:center; gap:2px; margin:4px 0 16px; }
-.foot-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:24px;
-  border:0; color:var(--faint); background:transparent; border-radius:6px; }
-.foot-btn:hover { color:var(--text); background:var(--surface2); }
-.foot-time { color:var(--faint); font-size:11px; margin-left:8px; }
-
-/* 回合文件变更汇总 */
-.turn-diffs { margin:4px 0 16px; }
-.turn-diffs-head { display:flex; align-items:center; gap:8px; padding:2px 0 4px; }
-.td-label { color:var(--muted); font-size:12.5px; font-weight:600; }
-.td-count { display:inline-flex; align-items:center; gap:8px; font:11px Consolas,monospace; }
-.td-approx { font-style:normal; color:var(--faint); font-size:11px; }
-.turn-diffs-list { padding:0 0 0 12px; display:grid; gap:2px; }
-.td-row { display:flex; gap:8px; align-items:baseline; justify-content:space-between;
-  font-size:12.5px; color:var(--faint); }
-.td-rowcount { font:11px Consolas,monospace; color:var(--faint); flex:0 0 auto; }
-.td-more { color:var(--faint); }
-
-/* 工具行参数徽章与运行态 shimmer */
-.s-args { display:inline-flex; gap:4px; }
-.s-args i { font-style:normal; font:11px Consolas,"Microsoft YaHei",monospace; color:var(--faint);
-  background:var(--surface2); padding:1px 4px; border-radius:99px; }
-.s-meta.running { background:linear-gradient(90deg, var(--faint) 25%, var(--text) 50%, var(--faint) 75%);
-  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
-  animation:shimmer 1.6s linear infinite; }
-@keyframes shimmer { to { background-position:-200% 0; } }
-
-/* 回到底部悬浮按钮 */
-.jump-latest { position:absolute; right:24px; bottom:136px; z-index:5; display:inline-flex;
-  align-items:center; gap:4px; height:26px; padding:0 12px; border:1px solid var(--line2);
-  border-radius:99px; background:var(--pop); color:var(--muted); font-size:12.5px;
-  box-shadow:var(--shadow-2); }
-.jump-latest:hover { color:var(--text); background:var(--surface); }
-
-/* 助手正文 markdown */
-.md-body { font-size:15px; line-height:1.7; color:#d8d8d8; overflow-wrap:anywhere; }
-body.light .md-body { color:var(--text); }
-.md-body.streaming::after { content:"▍"; animation:pulse 1s infinite; color:var(--text); }
-.md-body p { margin:0 0 12px; white-space:pre-wrap; }
-.md-body p:last-child { margin-bottom:0; }
-.md-body h3, .md-body h4, .md-body h5, .md-body h6 { margin:16px 0 8px; font-size:15px; font-weight:650; }
-.md-body h3 { font-size:18px; }
-.md-body h5, .md-body h6 { font-weight:600; color:var(--muted); }
-.md-body ul, .md-body ol { margin:0 0 12px; padding-left:24px; }
-.md-body li { margin:4px 0; }
-.md-body blockquote { margin:0 0 12px; padding:4px 12px; border-left:2px solid var(--line2); color:var(--muted); }
-.md-body hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
-.md-body strong { color:var(--text); font-weight:650; }
-.md-body code { padding:1px 4px; border-radius:6px; background:rgba(255,255,255,.07);
-  font:12.5px/1.5 Consolas,"Microsoft YaHei",monospace; }
-body.light .md-body code { background:rgba(0,0,0,.06); }
-.md-body a { color:var(--blue); }
-.codeblock { margin:0 0 12px; border:1px solid var(--code-line); border-radius:9px;
-  background:var(--code-bg); overflow:hidden; }
-.cb-head { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 4px 12px;
-  border-bottom:1px solid var(--code-line); }
-.cb-lang { color:var(--faint); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
-.cb-copy { display:inline-flex; align-items:center; height:22px; padding:0 4px; border:0;
-  color:var(--muted); background:transparent; font-size:11px; border-radius:6px; }
-.cb-copy:hover { color:var(--text); background:var(--surface2); }
-.codeblock pre { margin:0; padding:8px 12px; overflow-x:auto; }
-.codeblock code { font:12.5px/1.65 Consolas,"Microsoft YaHei",monospace; background:transparent;
-  padding:0; color:#cfd8ea; }
-body.light .codeblock code { color:#24304a; }
-
-/* 权限确认卡 */
-.perm { display:flex; align-items:center; gap:12px; margin:16px 0; padding:12px 16px;
-  border:1px solid var(--line); border-radius:13px; background:var(--surface); }
-.perm.settled { display:inline-flex; margin:4px 0; padding:0; background:transparent; border:0; }
-.perm.settled .p-title { font-weight:400; color:var(--faint); font-size:12.5px; }
-.perm.settled .p-sub, .perm.settled .p-icon { display:none; }
-.perm.settled .p-state { font-size:12.5px; }
-.perm .p-icon { flex:0 0 auto; color:var(--warn); display:inline-flex; }
-.perm .p-body { flex:1; min-width:0; }
-.perm .p-title { font-size:13px; font-weight:600; }
-.perm .p-sub { margin-top:2px; color:var(--muted); font-size:11px; font-family:Consolas,monospace; overflow-wrap:anywhere; }
-.perm .p-actions { display:flex; gap:8px; }
-.perm .btn-allow { height:30px; padding:0 16px; border:0; border-radius:9px; color:#161616;
-  background:var(--accent); font-weight:650; font-size:12.5px; }
-.perm .btn-allow:hover { filter:brightness(1.08); }
-body.light .perm .btn-allow { color:#fff; }
-.perm .btn-deny { height:30px; padding:0 12px; border:0; border-radius:9px; color:var(--muted);
-  background:transparent; font-size:12.5px; }
-.perm .btn-deny:hover { color:var(--bad); }
-.perm .p-state { color:var(--muted); font-size:12.5px; }
-.perm .p-state.no { color:var(--bad); }
-
-/* 附件托盘:缩略图统一 48px,移除按钮悬浮于角标 */
-.attach-tray { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:-8px 0 12px; }
-.attach-tray img { width:48px; height:48px; object-fit:cover; display:block;
-  border-radius:9px; border:1px solid var(--line); }
-.attachment-item { position:relative; display:flex; align-items:center; gap:4px; max-width:100%; }
-.attachment-file { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 8px;
-  border:1px solid var(--line); border-radius:9px; background:var(--surface);
-  color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
-.attachment-remove { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
-  border:0; border-radius:99px; background:transparent; color:var(--muted); }
-.attachment-item.img .attachment-remove { position:absolute; top:-6px; right:-6px;
-  background:var(--surface2); box-shadow:var(--shadow-1); z-index:1; }
-.attachment-remove:hover { color:var(--bad); background:var(--surface2); }
-.composer .attach-tray { justify-content:flex-start; margin:0 0 8px; }
-
-/* ===== 底部输入容器 ===== */
-.composer-wrap { padding:8px 24px 16px; }
-.composer { max-width:860px; margin:0 auto; border-radius:13px; background:var(--surface);
-  border:1px solid var(--line); padding:12px 12px 8px;
-  transition:border-color .15s ease, box-shadow .15s ease; }
-.composer:focus-within { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
-.composer textarea { width:100%; min-height:22px; max-height:150px; padding:2px 2px 8px; border:0;
-  color:var(--text); background:transparent; resize:none; outline:none; font:13px/1.6 inherit; }
-.composer textarea::placeholder { color:var(--faint); }
-.cmdrow { display:flex; align-items:center; gap:4px; }
-.bar-btn { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 8px;
-  border:0; border-radius:6px; color:var(--muted); background:transparent;
-  font-size:12.5px; white-space:nowrap; }
-.bar-btn:hover { background:var(--surface2); color:var(--text); }
-.bar-btn .chev { display:inline-flex; color:var(--faint); }
-#model-label { max-width:min(34vw,330px); overflow:hidden; text-overflow:ellipsis; }
-.bar-btn.plus .ic { width:15px; height:15px; }
-.bar-btn.mode { color:var(--text); }
-.bar-btn.mode .shield { display:inline-flex; filter:grayscale(1); opacity:.85; }
-.bar-btn.mode.accent { color:var(--accent); }
-.bar-btn.mode.accent .shield { filter:none; opacity:1; }
-.cmd-spacer { flex:1; }
-.ring { display:inline-block; width:13px; height:13px; flex:0 0 auto; margin:0 8px 0 0;
-  border:2px solid var(--faint); border-top-color:var(--text); border-right-color:var(--text);
-  border-radius:50%; transform:rotate(-35deg); animation:spin 1s linear infinite; }
-.ctx-mini { position:relative; width:54px; height:4px; margin:0 2px; border-radius:99px;
-  background:var(--surface2); overflow:hidden; }
-.ctx-mini i { position:absolute; top:0; bottom:0; left:0; border-radius:99px;
-  background:linear-gradient(90deg, var(--good), var(--warn)); }
-@keyframes spin { to { transform:rotate(325deg); } }
-.send { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
-  border:0; border-radius:99px; background:var(--accent); }
-.send:hover { filter:brightness(1.1); }
-.send:active { transform:scale(.94); }
-.send .up, .send .sq { color:#161616; }
-.send .up { display:inline-flex; align-items:center; justify-content:center; }
-.send .sq { width:10px; height:10px; border-radius:2px; background:#161616; }
-body.light .send .up { color:#fff; }
-body.light .send .sq { background:#fff; }
-
-/* ===== 弹出层 ===== */
-.anchor { position:relative; display:inline-flex; }
-.pop { position:absolute; bottom:calc(100% + 8px); z-index:40; min-width:240px; padding:4px;
-  border-radius:13px; background:var(--pop); border:1px solid var(--line2);
-  box-shadow:var(--shadow-2); animation:pop-in .12s ease; }
-.pop[hidden] { display:none; }
-.pop.from-left { left:0; } .pop.from-right { right:0; }
-.pop-group { display:flex; align-items:center; gap:8px; padding:8px 8px 4px; color:var(--muted); font-size:12.5px; }
-.tag { display:inline-flex; align-items:center; padding:1px 8px; border-radius:6px;
-  background:var(--surface2); color:var(--muted); font-size:11px; }
-.pop-item { display:flex; align-items:center; gap:8px; width:100%; padding:4px 8px; border:0;
-  border-radius:6px; color:var(--text); background:transparent; font-size:13px; text-align:left; }
-.pop-item:hover:not(:disabled) { background:var(--surface2); }
-.pop-item:disabled { opacity:.4; cursor:not-allowed; }
-/* Whole menu scrolls as one — no nested inner scrollbar. */
-#pop-model { max-height:min(560px,76vh); max-width:min(480px,90vw); overflow:auto; }
-.pop-item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.pop-item .check { display:inline-flex; color:var(--blue); visibility:hidden; }
-.pop-item.selected .check { visibility:visible; }
-.pop-item.selected .grow { font-weight:600; }
-.pop-item.muted { color:var(--muted); }
-.pop-sep { height:1px; margin:4px; background:var(--line); }
-.ctx-pop { width:360px; padding:16px; }
-.ctx-head { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
-.ctx-head .num { color:var(--muted); }
-.bar { height:5px; margin:8px 0 12px; border-radius:99px; background:var(--surface2); overflow:hidden; }
-.bar > i { display:block; height:100%; border-radius:99px; background:var(--blue); }
-.ctx-row { display:flex; justify-content:space-between; padding:4px 0; color:var(--muted); font-size:12.5px; }
-.ctx-sep { height:1px; margin:8px 0; background:var(--line); }
-
-/* ===== 设置页 ===== */
-.settings-wrap { display:flex; flex:1; min-width:0; }
-.settings-nav { width:190px; flex:0 0 auto; padding:16px 8px; border-right:1px solid var(--line); }
-.settings-nav strong { display:block; padding:0 12px 12px; font-size:13px; }
-.settings-back { margin:0 0 12px; padding-left:0; }
-.stab { width:100%; height:30px; margin:1px 0; padding:0 12px; border:0; border-radius:6px;
-  color:var(--muted); background:transparent; text-align:left; font-size:12.5px; }
-.stab:hover { color:var(--text); background:var(--surface); }
-.stab.active { color:var(--text); background:var(--surface2); box-shadow:inset 2px 0 0 var(--accent); }
-.settings-body { flex:1; overflow-y:auto; padding:24px; }
-.settings-body h2 { margin:0 0 4px; font-size:18px; }
-.settings-body .sub { margin:0 0 24px; color:var(--muted); font-size:12.5px; }
-.spanel { display:none; } .spanel.active { display:block; }
-.prov-cols { display:grid; grid-template-columns:210px minmax(0,1fr); gap:12px; align-items:start; }
-.mgmt-side { padding:8px; border-radius:13px; background:var(--surface); border:1px solid var(--line); }
-.mgmt-group { padding:8px 8px 4px; color:var(--faint); font-size:11px; }
-.mgmt-item { display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px;
-  border:0; border-radius:6px; color:var(--text); background:transparent; font-size:13px; text-align:left; }
-.mgmt-item:hover { background:var(--surface2); }
-.mgmt-item.active { background:var(--surface2); }
-.mgmt-item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.mgmt-item .dot { width:6px; height:6px; }
-.mgmt-item .dot.off { background:var(--faint); }
-.mgmt-detail { min-height:380px; padding:24px; border-radius:13px; background:var(--surface);
-  border:1px solid var(--line); }
-.empty-models { padding:24px 0; color:var(--faint); font-size:12.5px; text-align:center; }
-.pd { display:none; } .pd.active { display:block; }
-.pd-head { display:flex; align-items:center; gap:8px; }
-.pd-head h3 { margin:0; font-size:15px; }
-.status-chip { display:inline-flex; align-items:center; height:22px; padding:0 12px; border-radius:99px;
-  font-size:11px; color:var(--good); background:var(--good-soft); }
-.status-chip.off { color:var(--muted); background:var(--surface2); }
-.pd-head .sp { flex:1; }
-.pd-head .del { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
-  border:0; border-radius:6px; color:var(--muted); background:transparent; }
-.pd-head .del:hover { color:var(--bad); background:var(--bad-soft); }
-.f { display:grid; gap:8px; margin-top:16px; }
-.f > label { color:var(--text); font-size:12.5px; }
-.field-note { color:var(--muted); font-size:11px; }
-.fin { width:100%; height:36px; padding:0 12px; border:1px solid var(--line2); border-radius:9px;
-  color:var(--text); background:var(--page); font-size:13px; outline:none;
-  transition:border-color .12s ease, box-shadow .12s ease; }
-.fin:focus { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
-.fin::placeholder { color:var(--faint); }
-.key-row { position:relative; }
-.key-row .fin { padding-right:42px; }
-.eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); display:inline-flex;
-  align-items:center; justify-content:center; width:26px; height:26px; border:0; border-radius:6px;
-  color:var(--muted); background:transparent; }
-.eye:hover { color:var(--text); background:var(--surface2); }
-.pd-foot { display:flex; align-items:center; gap:8px; margin-top:24px; }
-.pd-foot .note { flex:1; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; }
-.cta { height:30px; padding:0 16px; border:0; border-radius:9px; color:#161616;
-  background:var(--accent); font-weight:650; font-size:12.5px; }
-.cta:hover { filter:brightness(1.08); }
-body.light .cta { color:#fff; }
-.cta[disabled] { opacity:.45; cursor:not-allowed; filter:none; }
-.agent-card { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; padding:16px;
-  border-radius:13px; background:var(--surface); border:1px solid var(--line); }
-.agent-card.missing { opacity:.55; }
-.agent-card .agent-badge { width:22px; height:22px; font-size:11px; }
-.agent-card .a-body { flex:1; min-width:0; }
-.agent-card .a-name { display:flex; align-items:center; gap:8px; font-weight:650; font-size:13px; }
-.agent-card .a-meta { margin-top:4px; color:var(--muted); font-size:11px; }
-.cap-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
-.chip { display:inline-flex; align-items:center; padding:1px 8px; border-radius:99px;
-  background:var(--surface2); color:var(--muted); font-size:11px; }
-.chip.good { color:var(--good); background:var(--good-soft); }
-.cap-chips .chip.off { color:var(--faint); opacity:.6; }
-.auth-note { margin:16px 0 0; padding:2px 0 2px 16px; border-left:2px solid var(--line2);
-  color:var(--muted); font-size:12.5px; }
-
-/* ===== 弹窗 / 提示 ===== */
-.modal { position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
-  background:rgba(0,0,0,.55); }
-.modal.open { display:flex; animation:fade-in .12s ease; }
-body.light .modal { background:rgba(20,20,20,.35); }
-.modal-box { width:min(470px,92vw); border-radius:13px; background:var(--pop);
-  border:1px solid var(--line2); padding:24px; box-shadow:var(--shadow-2); }
-.modal.open .modal-box { animation:modal-in .14s cubic-bezier(.2,.9,.3,1); }
-.modal-box h3 { margin:0 0 4px; font-size:15px; }
-.modal-box .sub { margin:0 0 16px; color:var(--muted); font-size:12.5px; }
-.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
-.form-error { margin-top:12px; padding:8px 12px; border-radius:9px; color:var(--bad);
-  background:var(--bad-soft); font-size:12.5px; border:1px solid rgba(240,128,128,.2); }
-body.light .form-error { border-color:rgba(189,78,78,.2); }
-/* 添加项目弹窗:路径输入 + 系统浏览按钮同行 */
-.path-row { display:flex; gap:8px; align-items:stretch; }
-.path-row .fin { flex:1; min-width:0; width:auto; }
-.path-row .browse { flex:0 0 auto; display:inline-flex; align-items:center; height:36px; padding:0 12px;
-  border:1px solid var(--line2); border-radius:9px; }
-.path-row .browse:hover { background:var(--surface); border-color:var(--faint); }
-.path-row .browse:disabled { opacity:.45; cursor:not-allowed; }
-
-/* Toast:类型化配色 + 图标,底部居中堆叠,进入/退出动画。 */
-.toast-host { position:fixed; bottom:24px; left:0; right:0; z-index:90; display:flex;
-  flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
-.toast { pointer-events:auto; display:flex; align-items:center; gap:8px; max-width:min(480px,90vw);
-  padding:8px 16px; border-radius:9px; border:1px solid var(--line2); background:var(--pop);
-  color:var(--text); font-size:12.5px; box-shadow:var(--shadow-2); animation:toast-in .16s ease; }
-.toast .ic { color:var(--muted); }
-.toast.good .ic { color:var(--good); }
-.toast.bad .ic { color:var(--bad); }
-.toast.leaving { animation:toast-out .15s ease forwards; }
-
-.pop-search { width:100%; height:30px; padding:0 8px; margin-bottom:4px; border:1px solid var(--line2);
-  border-radius:6px; color:var(--text); background:var(--page); font-size:12.5px; outline:none;
-  transition:border-color .12s ease, box-shadow .12s ease; }
-.pop-search:focus { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
-
-/* Themed scrollbars: slim rounded thumb, no track chrome or arrow buttons. */
-* { scrollbar-width: thin; scrollbar-color: #3f3f3f transparent; }
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
-::-webkit-scrollbar-thumb { background: #3f3f3f; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
-::-webkit-scrollbar-thumb:hover { background: #525252; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
-::-webkit-scrollbar-corner { background: transparent; }
-body.light * { scrollbar-color: #c4c4c4 transparent; }
-body.light ::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
-body.light ::-webkit-scrollbar-thumb:hover { background: #adadad; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
-.f[hidden] { display:none; }
-
-/* ===================== icon system & runtime polish ===================== */
-.ic { display:inline-flex; flex:0 0 auto; vertical-align:-2px; color:inherit; }
-.ic svg, svg.ics { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8;
-  stroke-linecap:round; stroke-linejoin:round; }
-svg.ics { width:13px; height:13px; flex:0 0 auto; }
-#open-settings, #btn-rescan { display:inline-flex; align-items:center; }
-
-/* Thinking hint: shown while the driver streams nothing yet (reasoning phase). */
-.think-hint { display:flex; align-items:center; gap:8px; margin:12px 2px; color:var(--muted); font-size:12.5px; }
-
-/* Unified error row replaces the bare ⚠ paragraph. */
-.msg.ai.error { display:flex; gap:8px; align-items:flex-start; margin:16px 0; padding:8px 12px;
-  border:1px solid rgba(255,96,96,.3); background:var(--bad-soft); border-radius:9px;
-  color:#ff9c9c; font-size:13px; line-height:1.5; }
-.msg.ai.error .ic { margin-top:2px; }
-body.light .msg.ai.error { color:#b42318; border-color:rgba(180,35,24,.25); background:rgba(180,35,24,.05); }
-
-/* Gentle reveal when a fold opens; hover feedback on rows. */
-.proc[open] > .proc-steps, .step[open] > .step-body { animation:fade-in .18s ease; }
-@keyframes fade-in { from { opacity:0; transform:translateY(-3px); } }
-@keyframes pop-in { from { opacity:0; transform:translateY(4px); } }
-@keyframes modal-in { from { opacity:0; transform:translateY(6px) scale(.985); } }
-@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }
-@keyframes toast-out { to { opacity:0; transform:translateY(6px); } }
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
+/* Agent Terminal — desktop-flat theme.
+   Design scale: spacing 4/8/12/16/24 · type 11/12.5/13/15/18 · radius 6/9/13 (+pills)
+   control heights 26/30/36 (22px micro icon buttons) · two shadow levels:
+   --shadow-1 hover/floating, --shadow-2 popovers & modals. */
+
+/* ===== tokens ===== */
+:root {
+  --page:#0d0d0d; --side:#0d0d0d; --surface:#1a1a1a; --surface2:#242424;
+  --line:#242424; --line2:#303030; --pop:#1f1f1f;
+  --text:#ececec; --muted:#909090; --faint:#5f5f5f;
+  --good:#4cc38a; --warn:#e2b466; --bad:#f08080; --accent:#e8863c; --blue:#4f8ef7;
+  --good-soft:rgba(76,195,138,.12); --bad-soft:rgba(240,128,128,.1);
+  --blue-soft:rgba(79,142,247,.14); --accent-soft:rgba(232,134,60,.14);
+  --focus:rgba(79,142,247,.55); --focus-line:rgba(79,142,247,.45);
+  --code-bg:#141417; --code-line:#26262b;
+  --shadow-1:0 2px 10px rgba(0,0,0,.3);
+  --shadow-2:0 12px 32px rgba(0,0,0,.55);
+}
+body.light {
+  --page:#f7f7f7; --side:#f7f7f7; --surface:#ececec; --surface2:#e2e2e2;
+  --line:#dcdcdc; --line2:#c9c9c9; --pop:#ffffff;
+  --text:#1c1c1c; --muted:#666666; --faint:#9a9a9a;
+  --good:#258263; --warn:#9d6e21; --bad:#bd4e4e; --accent:#c26a1e; --blue:#2f6fd0;
+  --good-soft:rgba(37,130,99,.12); --bad-soft:rgba(189,78,78,.1);
+  --blue-soft:rgba(47,111,208,.12); --accent-soft:rgba(194,106,30,.12);
+  --focus:rgba(47,111,208,.5); --focus-line:rgba(47,111,208,.45);
+  --code-bg:#f2f3f5; --code-line:#dfe1e6;
+  --shadow-1:0 2px 10px rgba(30,30,30,.1);
+  --shadow-2:0 12px 32px rgba(30,30,30,.18);
+}
+
+/* ===== base ===== */
+* { box-sizing:border-box; }
+[hidden] { display:none !important; }
+body { margin:0; overflow:hidden; background:var(--page); color:var(--text);
+  font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
+button, input, textarea, select { font:inherit; }
+button { cursor:pointer; color:inherit; }
+:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
+.fin:focus-visible, .pop-search:focus-visible, .composer textarea:focus-visible { outline:none; }
+.view { display:none; height:100vh; }
+.view.active { display:flex; }
+.linklike { border:0; color:var(--blue); background:transparent; padding:0; font-size:inherit; }
+.linklike:hover { text-decoration:underline; }
+
+/* Shared micro-interaction: every flat interactive surface eases its state change. */
+.session, .proj-item, .add-proj, .stab, .mgmt-item, .pop-item, .bar-btn, .ghost, .new-session,
+.act-btn, .foot-btn, .io-copy, .bubble-copy, .cb-copy, .attachment-remove, .del,
+.path-row .browse, .cta, .btn-allow, .btn-deny, .jump-latest, .send, .toggle-caret {
+  transition:background-color .12s ease, color .12s ease, border-color .12s ease, filter .12s ease, transform .06s ease;
+}
+
+/* ===== generic buttons ===== */
+.ghost { display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px;
+  border:0; color:var(--muted); background:transparent; font-size:12.5px; border-radius:6px; }
+.ghost:hover { color:var(--text); background:var(--surface); }
+
+/* ===== 侧栏 ===== */
+.sidebar { display:flex; flex-direction:column; width:264px; flex:0 0 auto;
+  background:var(--side); border-right:1px solid var(--line); }
+.brand { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; }
+.brand h1 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:700; }
+.brand h1 svg.ics { width:15px; height:15px; color:var(--accent); }
+.brand .ver { color:var(--faint); font-size:11px; }
+.new-session { display:flex; align-items:center; gap:8px; height:30px; margin:4px 12px 8px;
+  padding:0 12px; border:1px solid var(--line2); border-radius:9px; color:var(--muted);
+  background:var(--surface); text-align:left; font-size:12.5px; }
+.new-session:hover { color:var(--text); background:var(--surface2); border-color:var(--line2); }
+.session-scroll { flex:1; overflow-y:auto; padding:4px 12px 12px; }
+.group-label { margin:16px 4px 4px; color:var(--faint); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
+
+/* 项目行:折叠箭头 + 名称 + 悬浮操作。激活项目以左侧主色条标记。 */
+.proj-item { display:flex; align-items:center; gap:8px; width:100%; height:26px; padding:0 8px;
+  border:0; border-radius:6px; color:var(--text); background:transparent;
+  font-size:12.5px; font-weight:600; text-align:left; }
+.proj-item:hover { background:var(--surface); }
+.proj.active > .proj-item { background:var(--surface); box-shadow:inset 2px 0 0 var(--accent); }
+.p-caret { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px;
+  flex:0 0 auto; color:var(--faint); transition:transform .15s ease; }
+.p-caret.closed { transform:rotate(-90deg); }
+.proj-item .p-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.toggle-caret { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px;
+  flex:0 0 auto; color:inherit; transition:transform .15s ease; }
+.toggle-caret.closed { transform:rotate(-90deg); }
+.sess-list { padding:0 0 4px; }
+.sess-list .session { padding-left:24px; }
+.session { display:flex; align-items:center; gap:8px; width:100%; height:26px; padding:0 8px;
+  border:0; border-radius:6px; background:transparent; color:var(--muted); text-align:left; font-size:12.5px; }
+.session:hover { background:var(--surface); color:var(--text); }
+.session.active { background:var(--surface2); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); }
+.session .s-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.session .when { margin-left:auto; color:var(--faint); font-size:11px; flex:0 0 auto; }
+.session:hover > .when { display:none; }
+.agent-badge { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
+  width:18px; height:18px; border-radius:6px; color:#fff; font-size:11px; font-weight:700; }
+.agent-badge.claude-code { background:#c9642d; }
+.agent-badge.codex { background:#2e7d5b; }
+.agent-badge.zcode { background:#6d5bd0; }
+.agent-badge.opencode { background:#33739e; }
+.add-proj { display:flex; align-items:center; gap:8px; width:100%; height:26px; margin:4px 0 0;
+  padding:0 8px; border:0; border-radius:6px; color:var(--muted); background:transparent;
+  font-size:12.5px; text-align:left; }
+.add-proj:hover { color:var(--text); background:var(--surface); }
+.proj-empty { padding:4px 8px 8px 24px; color:var(--faint); font-size:11px; }
+
+/* 侧栏空态:SVG 图标组合的插画式提示,不依赖外部资源。 */
+.side-empty { display:grid; justify-items:center; gap:4px; margin:8px 4px 12px; padding:16px 12px;
+  border:1px dashed var(--line2); border-radius:9px; color:var(--faint); font-size:12.5px; text-align:center; }
+.side-empty-art { display:flex; align-items:center; justify-content:center; width:40px; height:40px;
+  border-radius:9px; background:var(--surface); color:var(--faint); }
+.side-empty-sub { font-size:11px; }
+
+.row-acts { display:none; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto; }
+.session:hover > .row-acts, .proj-item:hover > .row-acts { display:inline-flex; }
+.act-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
+  padding:0; border:0; color:var(--muted); background:transparent; border-radius:6px; user-select:none; }
+.act-btn:hover { color:var(--text); background:var(--surface2); }
+.act-btn.danger:hover { color:var(--bad); background:var(--bad-soft); }
+
+/* 归档区:分隔线 + 可折叠标题 + 计数徽标。 */
+.arch-toggle { display:flex; align-items:center; gap:4px; width:calc(100% - 8px); margin:16px 0 4px;
+  padding:8px 4px 4px; border:0; border-top:1px solid var(--line); background:transparent;
+  color:var(--faint); font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-align:left; }
+.arch-toggle:hover { color:var(--muted); }
+.arch-count { margin-left:4px; padding:0 4px; border-radius:99px; background:var(--surface);
+  color:var(--faint); font-size:11px; letter-spacing:0; }
+.arch-list .session .s-title { color:var(--muted); }
+.arch-list .agent-badge { opacity:.75; }
+.sidebar-foot { display:flex; align-items:center; gap:8px; padding:12px 16px;
+  border-top:1px solid var(--line); color:var(--faint); font-size:11px; }
+.sidebar-foot .ghost { padding:0 4px; }
+.dot { display:inline-block; width:7px; height:7px; flex:0 0 auto; border-radius:99px; background:var(--good); }
+.dot.run { animation:pulse 1.4s infinite; }
+@keyframes pulse { 50% { opacity:.4; } }
+
+/* ===== 主区 ===== */
+.main { display:flex; flex-direction:column; flex:1; min-width:0; position:relative; }
+.top-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 24px 8px; }
+.top-strip .t { font-weight:600; font-size:13px; }
+.session-provider { color:var(--faint); font-size:11px; overflow:hidden; text-overflow:ellipsis;
+  white-space:nowrap; min-width:0; }
+.top-strip .st { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:4px 12px;
+  border-radius:99px; color:#9db8ff; background:var(--blue-soft); font-size:12.5px; }
+body.light .top-strip .st { color:#2f5fd0; }
+
+/* ===== 消息流(ZCode 风格:过程折叠,正文直出)===== */
+.stream { flex:1; overflow-y:auto; padding:8px 24px 24px; }
+.col { max-width:860px; margin:0 auto; }
+.empty-hint { text-align:center; color:var(--muted); margin-top:18vh; font-size:13px; line-height:1.7; }
+.empty-hint .big { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
+.hint-wrap { position:relative; display:inline-flex; }
+.hint-art { display:flex; align-items:center; justify-content:center; width:56px; height:56px;
+  border-radius:13px; border:1px solid var(--line); background:var(--surface); color:var(--muted); }
+.hint-art svg { width:24px; height:24px; }
+.hint-art svg, .hint-spark svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
+.hint-spark { position:absolute; top:-6px; right:-8px; display:flex; align-items:center; justify-content:center;
+  width:20px; height:20px; border-radius:99px; background:var(--surface2); color:var(--accent); box-shadow:var(--shadow-1); }
+.hint-spark svg { width:11px; height:11px; }
+.empty-hint p { margin:4px 0 0; }
+
+/* 用户消息:轻量右置色块(尾部小圆角);AI 消息:全宽白板。 */
+.msg.user { display:grid; justify-items:end; margin:24px 0 12px; }
+.bubble { max-width:82%; padding:8px 12px; border:1px solid var(--line); border-radius:13px 13px 4px 13px;
+  background:var(--surface2); color:var(--text); font-size:13px; line-height:1.65;
+  white-space:pre-wrap; overflow-wrap:anywhere; }
+body.light .bubble { background:var(--surface); }
+.msg.ai { margin:12px 0 16px; }
+.msg.ai p { margin:0 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
+.msg.ai .dim { color:var(--muted); }
+
+/* 回合折叠区:头部即计时行(工作中 X 秒 → 已工作 X 秒) */
+.proc { margin:4px 0 12px; user-select:none; }
+.proc > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
+  color:var(--muted); font-size:12.5px; padding:4px 8px; margin-left:-8px; border-radius:6px; }
+.proc > summary:hover { color:var(--text); background:var(--surface); }
+.proc > summary::-webkit-details-marker { display:none; }
+.proc .caret { display:inline-flex; color:var(--faint); transition:transform .15s ease; }
+.proc[open] > summary .caret { transform:rotate(90deg); }
+.proc .p-meta { color:var(--faint); }
+.proc-steps { display:grid; gap:2px; margin:2px 0 8px 16px; padding-left:12px; border-left:1px solid var(--line); }
+.turn-note { display:flex; align-items:center; gap:8px; margin:4px 0 16px; color:var(--faint); font-size:12.5px; }
+
+/* 过程行:思考分段 / 工具步骤 / 备注行 */
+.think-seg { margin:4px 0 8px; }
+.think-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; padding:2px 0; }
+.t-glyph { color:var(--faint); }
+.t-meta { color:var(--faint); font-size:12.5px; }
+.think-body { color:var(--faint); font-size:12.5px; line-height:1.65; white-space:pre-wrap;
+  overflow-wrap:anywhere; margin:2px 0 4px 16px; max-height:280px; overflow-y:auto; }
+.step { color:var(--muted); font-size:12.5px; }
+.step > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
+  flex-wrap:wrap; padding:4px 0; min-width:0; }
+.step > summary::-webkit-details-marker { display:none; }
+.s-caret { display:inline-flex; color:var(--faint); flex:0 0 auto; transition:transform .15s ease; }
+.step[open] > summary .s-caret { transform:rotate(90deg); }
+.s-dot { width:8px; height:8px; flex:0 0 auto; border-radius:99px; background:var(--blue); }
+.step.failed .s-dot { background:var(--bad); }
+.step.note .s-dot { background:var(--faint); }
+.s-name { font-weight:600; color:var(--text); font-size:12.5px; }
+.s-desc { color:var(--faint); font-size:12.5px; overflow:hidden; text-overflow:ellipsis;
+  white-space:nowrap; min-width:0; max-width:60%; }
+.s-meta { color:var(--faint); font-size:12.5px; margin-left:auto; flex:0 0 auto; }
+.s-meta.failed { color:var(--bad); }
+.step-body { display:grid; gap:8px; margin:2px 0 12px 16px; }
+.step-line { display:flex; align-items:center; gap:8px; color:var(--faint); font-size:12.5px; padding:2px 0; }
+.step-line .s-dot { width:6px; height:6px; background:var(--warn); }
+
+/* 输入/输出卡片:语言标签 + 复制按钮 + 语法高亮 */
+.io-card { border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden; }
+.io-head { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 0 12px; }
+.io-tag { display:inline-flex; align-items:center; gap:4px; color:var(--faint); font-size:11px;
+  letter-spacing:.05em; text-transform:uppercase; }
+.io-brace { font:11px Consolas,monospace; color:var(--muted); }
+.io-copy { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
+  border:0; color:var(--faint); background:transparent; border-radius:6px; }
+.io-copy:hover { color:var(--text); background:var(--surface2); }
+.io-card pre { margin:0; padding:4px 12px 8px; color:var(--muted);
+  font:12.5px/1.6 Consolas,"Microsoft YaHei",monospace; white-space:pre-wrap;
+  overflow-wrap:anywhere; max-height:320px; overflow-y:auto; }
+.j-key { color:#7aa2f7; }
+.j-str { color:#9ece6a; }
+.j-num { color:#e0af68; }
+.j-bool { color:#bb9af7; }
+body.light .j-key { color:#2f5fd0; }
+body.light .j-str { color:#3a7d3a; }
+body.light .j-num { color:#9d6e21; }
+body.light .j-bool { color:#7a4fb3; }
+.file-changes { display:grid; gap:4px; font-size:12.5px; }
+.file-change { display:flex; gap:8px; align-items:baseline; min-width:0; }
+.file-path { min-width:0; overflow-wrap:anywhere; }
+.diff-add { color:var(--good); }
+.diff-remove { color:var(--bad); }
+
+/* 用户气泡复制按钮 */
+.bubble-copy { display:inline-flex; align-items:center; justify-content:center; height:22px;
+  min-width:26px; margin:4px 2px 0 auto; border:0; color:var(--faint); background:transparent;
+  border-radius:6px; }
+.bubble-copy:hover { color:var(--text); background:var(--surface2); }
+.copied .ic { color:var(--good); }
+
+/* 最终消息操作条:复制 / 重试 / 模型 · 时间 */
+.msg-foot { display:flex; align-items:center; gap:2px; margin:4px 0 16px; }
+.foot-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:24px;
+  border:0; color:var(--faint); background:transparent; border-radius:6px; }
+.foot-btn:hover { color:var(--text); background:var(--surface2); }
+.foot-time { color:var(--faint); font-size:11px; margin-left:8px; }
+
+/* 回合文件变更汇总 */
+.turn-diffs { margin:4px 0 16px; }
+.turn-diffs-head { display:flex; align-items:center; gap:8px; padding:2px 0 4px; }
+.td-label { color:var(--muted); font-size:12.5px; font-weight:600; }
+.td-count { display:inline-flex; align-items:center; gap:8px; font:11px Consolas,monospace; }
+.td-approx { font-style:normal; color:var(--faint); font-size:11px; }
+.turn-diffs-list { padding:0 0 0 12px; display:grid; gap:2px; }
+.td-row { display:flex; gap:8px; align-items:baseline; justify-content:space-between;
+  font-size:12.5px; color:var(--faint); }
+.td-rowcount { font:11px Consolas,monospace; color:var(--faint); flex:0 0 auto; }
+.td-more { color:var(--faint); }
+
+/* 工具行参数徽章与运行态 shimmer */
+.s-args { display:inline-flex; gap:4px; }
+.s-args i { font-style:normal; font:11px Consolas,"Microsoft YaHei",monospace; color:var(--faint);
+  background:var(--surface2); padding:1px 4px; border-radius:99px; }
+.s-meta.running { background:linear-gradient(90deg, var(--faint) 25%, var(--text) 50%, var(--faint) 75%);
+  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
+  animation:shimmer 1.6s linear infinite; }
+@keyframes shimmer { to { background-position:-200% 0; } }
+
+/* 回到底部悬浮按钮 */
+.jump-latest { position:absolute; right:24px; bottom:136px; z-index:5; display:inline-flex;
+  align-items:center; gap:4px; height:26px; padding:0 12px; border:1px solid var(--line2);
+  border-radius:99px; background:var(--pop); color:var(--muted); font-size:12.5px;
+  box-shadow:var(--shadow-2); }
+.jump-latest:hover { color:var(--text); background:var(--surface); }
+
+/* 助手正文 markdown */
+.md-body { font-size:15px; line-height:1.7; color:#d8d8d8; overflow-wrap:anywhere; }
+body.light .md-body { color:var(--text); }
+.md-body.streaming::after { content:"▍"; animation:pulse 1s infinite; color:var(--text); }
+.md-body p { margin:0 0 12px; white-space:pre-wrap; }
+.md-body p:last-child { margin-bottom:0; }
+.md-body h3, .md-body h4, .md-body h5, .md-body h6 { margin:16px 0 8px; font-size:15px; font-weight:650; }
+.md-body h3 { font-size:18px; }
+.md-body h5, .md-body h6 { font-weight:600; color:var(--muted); }
+.md-body ul, .md-body ol { margin:0 0 12px; padding-left:24px; }
+.md-body li { margin:4px 0; }
+.md-body blockquote { margin:0 0 12px; padding:4px 12px; border-left:2px solid var(--line2); color:var(--muted); }
+.md-body hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
+.md-body strong { color:var(--text); font-weight:650; }
+.md-body code { padding:1px 4px; border-radius:6px; background:rgba(255,255,255,.07);
+  font:12.5px/1.5 Consolas,"Microsoft YaHei",monospace; }
+body.light .md-body code { background:rgba(0,0,0,.06); }
+.md-body a { color:var(--blue); }
+.codeblock { margin:0 0 12px; border:1px solid var(--code-line); border-radius:9px;
+  background:var(--code-bg); overflow:hidden; }
+.cb-head { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 4px 12px;
+  border-bottom:1px solid var(--code-line); }
+.cb-lang { color:var(--faint); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
+.cb-copy { display:inline-flex; align-items:center; height:22px; padding:0 4px; border:0;
+  color:var(--muted); background:transparent; font-size:11px; border-radius:6px; }
+.cb-copy:hover { color:var(--text); background:var(--surface2); }
+.codeblock pre { margin:0; padding:8px 12px; overflow-x:auto; }
+.codeblock code { font:12.5px/1.65 Consolas,"Microsoft YaHei",monospace; background:transparent;
+  padding:0; color:#cfd8ea; }
+body.light .codeblock code { color:#24304a; }
+
+/* 权限确认卡 */
+.perm { display:flex; align-items:center; gap:12px; margin:16px 0; padding:12px 16px;
+  border:1px solid var(--line); border-radius:13px; background:var(--surface); }
+.perm.settled { display:inline-flex; margin:4px 0; padding:0; background:transparent; border:0; }
+.perm.settled .p-title { font-weight:400; color:var(--faint); font-size:12.5px; }
+.perm.settled .p-sub, .perm.settled .p-icon { display:none; }
+.perm.settled .p-state { font-size:12.5px; }
+.perm .p-icon { flex:0 0 auto; color:var(--warn); display:inline-flex; }
+.perm .p-body { flex:1; min-width:0; }
+.perm .p-title { font-size:13px; font-weight:600; }
+.perm .p-sub { margin-top:2px; color:var(--muted); font-size:11px; font-family:Consolas,monospace; overflow-wrap:anywhere; }
+.perm .p-actions { display:flex; gap:8px; }
+.perm .btn-allow { height:30px; padding:0 16px; border:0; border-radius:9px; color:#161616;
+  background:var(--accent); font-weight:650; font-size:12.5px; }
+.perm .btn-allow:hover { filter:brightness(1.08); }
+body.light .perm .btn-allow { color:#fff; }
+.perm .btn-deny { height:30px; padding:0 12px; border:0; border-radius:9px; color:var(--muted);
+  background:transparent; font-size:12.5px; }
+.perm .btn-deny:hover { color:var(--bad); }
+.perm .p-state { color:var(--muted); font-size:12.5px; }
+.perm .p-state.no { color:var(--bad); }
+
+/* 附件托盘:缩略图统一 48px,移除按钮悬浮于角标 */
+.attach-tray { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:-8px 0 12px; }
+.attach-tray img { width:48px; height:48px; object-fit:cover; display:block;
+  border-radius:9px; border:1px solid var(--line); }
+.attachment-item { position:relative; display:flex; align-items:center; gap:4px; max-width:100%; }
+.attachment-file { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 8px;
+  border:1px solid var(--line); border-radius:9px; background:var(--surface);
+  color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
+.attachment-remove { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
+  border:0; border-radius:99px; background:transparent; color:var(--muted); }
+.attachment-item.img .attachment-remove { position:absolute; top:-6px; right:-6px;
+  background:var(--surface2); box-shadow:var(--shadow-1); z-index:1; }
+.attachment-remove:hover { color:var(--bad); background:var(--surface2); }
+.composer .attach-tray { justify-content:flex-start; margin:0 0 8px; }
+
+/* ===== 底部输入容器 ===== */
+.composer-wrap { padding:8px 24px 16px; }
+.composer { max-width:860px; margin:0 auto; border-radius:13px; background:var(--surface);
+  border:1px solid var(--line); padding:12px 12px 8px;
+  transition:border-color .15s ease, box-shadow .15s ease; }
+.composer:focus-within { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
+.composer textarea { width:100%; min-height:22px; max-height:150px; padding:2px 2px 8px; border:0;
+  color:var(--text); background:transparent; resize:none; outline:none; font:13px/1.6 inherit; }
+.composer textarea::placeholder { color:var(--faint); }
+.cmdrow { display:flex; align-items:center; gap:4px; }
+.bar-btn { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 8px;
+  border:0; border-radius:6px; color:var(--muted); background:transparent;
+  font-size:12.5px; white-space:nowrap; }
+.bar-btn:hover { background:var(--surface2); color:var(--text); }
+.bar-btn .chev { display:inline-flex; color:var(--faint); }
+#model-label { max-width:min(34vw,330px); overflow:hidden; text-overflow:ellipsis; }
+.bar-btn.plus .ic { width:15px; height:15px; }
+.bar-btn.mode { color:var(--text); }
+.bar-btn.mode .shield { display:inline-flex; filter:grayscale(1); opacity:.85; }
+.bar-btn.mode.accent { color:var(--accent); }
+.bar-btn.mode.accent .shield { filter:none; opacity:1; }
+.cmd-spacer { flex:1; }
+.ring { display:inline-block; width:13px; height:13px; flex:0 0 auto; margin:0 8px 0 0;
+  border:2px solid var(--faint); border-top-color:var(--text); border-right-color:var(--text);
+  border-radius:50%; transform:rotate(-35deg); animation:spin 1s linear infinite; }
+.ctx-mini { position:relative; width:54px; height:4px; margin:0 2px; border-radius:99px;
+  background:var(--surface2); overflow:hidden; }
+.ctx-mini i { position:absolute; top:0; bottom:0; left:0; border-radius:99px;
+  background:linear-gradient(90deg, var(--good), var(--warn)); }
+@keyframes spin { to { transform:rotate(325deg); } }
+.send { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
+  border:0; border-radius:99px; background:var(--accent); }
+.send:hover { filter:brightness(1.1); }
+.send:active { transform:scale(.94); }
+.send .up, .send .sq { color:#161616; }
+.send .up { display:inline-flex; align-items:center; justify-content:center; }
+.send .sq { width:10px; height:10px; border-radius:2px; background:#161616; }
+body.light .send .up { color:#fff; }
+body.light .send .sq { background:#fff; }
+
+/* ===== 弹出层 ===== */
+.anchor { position:relative; display:inline-flex; }
+.pop { position:absolute; bottom:calc(100% + 8px); z-index:40; min-width:240px; padding:4px;
+  border-radius:13px; background:var(--pop); border:1px solid var(--line2);
+  box-shadow:var(--shadow-2); animation:pop-in .12s ease; }
+.pop[hidden] { display:none; }
+.pop.from-left { left:0; } .pop.from-right { right:0; }
+.pop-group { display:flex; align-items:center; gap:8px; padding:8px 8px 4px; color:var(--muted); font-size:12.5px; }
+.tag { display:inline-flex; align-items:center; padding:1px 8px; border-radius:6px;
+  background:var(--surface2); color:var(--muted); font-size:11px; }
+.pop-item { display:flex; align-items:center; gap:8px; width:100%; padding:4px 8px; border:0;
+  border-radius:6px; color:var(--text); background:transparent; font-size:13px; text-align:left; }
+.pop-item:hover:not(:disabled) { background:var(--surface2); }
+.pop-item:disabled { opacity:.4; cursor:not-allowed; }
+/* Whole menu scrolls as one — no nested inner scrollbar. */
+#pop-model { max-height:min(560px,76vh); max-width:min(480px,90vw); overflow:auto; }
+.pop-item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pop-item .check { display:inline-flex; color:var(--blue); visibility:hidden; }
+.pop-item.selected .check { visibility:visible; }
+.pop-item.selected .grow { font-weight:600; }
+.pop-item.muted { color:var(--muted); }
+.pop-sep { height:1px; margin:4px; background:var(--line); }
+.ctx-pop { width:360px; padding:16px; }
+.ctx-head { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
+.ctx-head .num { color:var(--muted); }
+.bar { height:5px; margin:8px 0 12px; border-radius:99px; background:var(--surface2); overflow:hidden; }
+.bar > i { display:block; height:100%; border-radius:99px; background:var(--blue); }
+.ctx-row { display:flex; justify-content:space-between; padding:4px 0; color:var(--muted); font-size:12.5px; }
+.ctx-sep { height:1px; margin:8px 0; background:var(--line); }
+
+/* ===== 设置页 ===== */
+.settings-wrap { display:flex; flex:1; min-width:0; }
+.settings-nav { width:190px; flex:0 0 auto; padding:16px 8px; border-right:1px solid var(--line); }
+.settings-nav strong { display:block; padding:0 12px 12px; font-size:13px; }
+.settings-back { margin:0 0 12px; padding-left:0; }
+.stab { width:100%; height:30px; margin:1px 0; padding:0 12px; border:0; border-radius:6px;
+  color:var(--muted); background:transparent; text-align:left; font-size:12.5px; }
+.stab:hover { color:var(--text); background:var(--surface); }
+.stab.active { color:var(--text); background:var(--surface2); box-shadow:inset 2px 0 0 var(--accent); }
+.settings-body { flex:1; overflow-y:auto; padding:24px; }
+.settings-body h2 { margin:0 0 4px; font-size:18px; }
+.settings-body .sub { margin:0 0 24px; color:var(--muted); font-size:12.5px; }
+.spanel { display:none; } .spanel.active { display:block; }
+.prov-cols { display:grid; grid-template-columns:210px minmax(0,1fr); gap:12px; align-items:start; }
+.mgmt-side { padding:8px; border-radius:13px; background:var(--surface); border:1px solid var(--line); }
+.mgmt-group { padding:8px 8px 4px; color:var(--faint); font-size:11px; }
+.mgmt-item { display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px;
+  border:0; border-radius:6px; color:var(--text); background:transparent; font-size:13px; text-align:left; }
+.mgmt-item:hover { background:var(--surface2); }
+.mgmt-item.active { background:var(--surface2); }
+.mgmt-item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.mgmt-item .dot { width:6px; height:6px; }
+.mgmt-item .dot.off { background:var(--faint); }
+.mgmt-detail { min-height:380px; padding:24px; border-radius:13px; background:var(--surface);
+  border:1px solid var(--line); }
+.empty-models { padding:24px 0; color:var(--faint); font-size:12.5px; text-align:center; }
+.pd { display:none; } .pd.active { display:block; }
+.pd-head { display:flex; align-items:center; gap:8px; }
+.pd-head h3 { margin:0; font-size:15px; }
+.status-chip { display:inline-flex; align-items:center; height:22px; padding:0 12px; border-radius:99px;
+  font-size:11px; color:var(--good); background:var(--good-soft); }
+.status-chip.off { color:var(--muted); background:var(--surface2); }
+.pd-head .sp { flex:1; }
+.pd-head .del { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
+  border:0; border-radius:6px; color:var(--muted); background:transparent; }
+.pd-head .del:hover { color:var(--bad); background:var(--bad-soft); }
+.f { display:grid; gap:8px; margin-top:16px; }
+.f > label { color:var(--text); font-size:12.5px; }
+.field-note { color:var(--muted); font-size:11px; }
+.fin { width:100%; height:36px; padding:0 12px; border:1px solid var(--line2); border-radius:9px;
+  color:var(--text); background:var(--page); font-size:13px; outline:none;
+  transition:border-color .12s ease, box-shadow .12s ease; }
+.fin:focus { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
+.fin::placeholder { color:var(--faint); }
+.key-row { position:relative; }
+.key-row .fin { padding-right:42px; }
+.eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); display:inline-flex;
+  align-items:center; justify-content:center; width:26px; height:26px; border:0; border-radius:6px;
+  color:var(--muted); background:transparent; }
+.eye:hover { color:var(--text); background:var(--surface2); }
+.pd-foot { display:flex; align-items:center; gap:8px; margin-top:24px; }
+.pd-foot .note { flex:1; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; }
+.cta { height:30px; padding:0 16px; border:0; border-radius:9px; color:#161616;
+  background:var(--accent); font-weight:650; font-size:12.5px; }
+.cta:hover { filter:brightness(1.08); }
+body.light .cta { color:#fff; }
+.cta[disabled] { opacity:.45; cursor:not-allowed; filter:none; }
+.agent-card { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; padding:16px;
+  border-radius:13px; background:var(--surface); border:1px solid var(--line); }
+.agent-card.missing { opacity:.55; }
+.agent-card .agent-badge { width:22px; height:22px; font-size:11px; }
+.agent-card .a-body { flex:1; min-width:0; }
+.agent-card .a-name { display:flex; align-items:center; gap:8px; font-weight:650; font-size:13px; }
+.agent-card .a-meta { margin-top:4px; color:var(--muted); font-size:11px; }
+.cap-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
+.chip { display:inline-flex; align-items:center; padding:1px 8px; border-radius:99px;
+  background:var(--surface2); color:var(--muted); font-size:11px; }
+.chip.good { color:var(--good); background:var(--good-soft); }
+.cap-chips .chip.off { color:var(--faint); opacity:.6; }
+.auth-note { margin:16px 0 0; padding:2px 0 2px 16px; border-left:2px solid var(--line2);
+  color:var(--muted); font-size:12.5px; }
+
+/* ===== 弹窗 / 提示 ===== */
+.modal { position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
+  background:rgba(0,0,0,.55); }
+.modal.open { display:flex; animation:fade-in .12s ease; }
+body.light .modal { background:rgba(20,20,20,.35); }
+.modal-box { width:min(470px,92vw); border-radius:13px; background:var(--pop);
+  border:1px solid var(--line2); padding:24px; box-shadow:var(--shadow-2); }
+.modal.open .modal-box { animation:modal-in .14s cubic-bezier(.2,.9,.3,1); }
+.modal-box h3 { margin:0 0 4px; font-size:15px; }
+.modal-box .sub { margin:0 0 16px; color:var(--muted); font-size:12.5px; }
+.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
+.form-error { margin-top:12px; padding:8px 12px; border-radius:9px; color:var(--bad);
+  background:var(--bad-soft); font-size:12.5px; border:1px solid rgba(240,128,128,.2); }
+body.light .form-error { border-color:rgba(189,78,78,.2); }
+/* 添加项目弹窗:路径输入 + 系统浏览按钮同行 */
+.path-row { display:flex; gap:8px; align-items:stretch; }
+.path-row .fin { flex:1; min-width:0; width:auto; }
+.path-row .browse { flex:0 0 auto; display:inline-flex; align-items:center; height:36px; padding:0 12px;
+  border:1px solid var(--line2); border-radius:9px; }
+.path-row .browse:hover { background:var(--surface); border-color:var(--faint); }
+.path-row .browse:disabled { opacity:.45; cursor:not-allowed; }
+
+/* Toast:类型化配色 + 图标,底部居中堆叠,进入/退出动画。 */
+.toast-host { position:fixed; bottom:24px; left:0; right:0; z-index:90; display:flex;
+  flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
+.toast { pointer-events:auto; display:flex; align-items:center; gap:8px; max-width:min(480px,90vw);
+  padding:8px 16px; border-radius:9px; border:1px solid var(--line2); background:var(--pop);
+  color:var(--text); font-size:12.5px; box-shadow:var(--shadow-2); animation:toast-in .16s ease; }
+.toast .ic { color:var(--muted); }
+.toast.good .ic { color:var(--good); }
+.toast.bad .ic { color:var(--bad); }
+.toast.leaving { animation:toast-out .15s ease forwards; }
+
+.pop-search { width:100%; height:30px; padding:0 8px; margin-bottom:4px; border:1px solid var(--line2);
+  border-radius:6px; color:var(--text); background:var(--page); font-size:12.5px; outline:none;
+  transition:border-color .12s ease, box-shadow .12s ease; }
+.pop-search:focus { border-color:var(--focus-line); box-shadow:0 0 0 3px var(--blue-soft); }
+
+/* Themed scrollbars: slim rounded thumb, no track chrome or arrow buttons. */
+* { scrollbar-width: thin; scrollbar-color: #3f3f3f transparent; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+::-webkit-scrollbar-thumb { background: #3f3f3f; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: #525252; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-corner { background: transparent; }
+body.light * { scrollbar-color: #c4c4c4 transparent; }
+body.light ::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
+body.light ::-webkit-scrollbar-thumb:hover { background: #adadad; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
+.f[hidden] { display:none; }
+
+/* ===================== icon system & runtime polish ===================== */
+.ic { display:inline-flex; flex:0 0 auto; vertical-align:-2px; color:inherit; }
+.ic svg, svg.ics { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8;
+  stroke-linecap:round; stroke-linejoin:round; }
+svg.ics { width:13px; height:13px; flex:0 0 auto; }
+#open-settings, #btn-rescan { display:inline-flex; align-items:center; }
+
+/* Thinking hint: shown while the driver streams nothing yet (reasoning phase). */
+.think-hint { display:flex; align-items:center; gap:8px; margin:12px 2px; color:var(--muted); font-size:12.5px; }
+
+/* Unified error row replaces the bare ⚠ paragraph. */
+.msg.ai.error { display:flex; gap:8px; align-items:flex-start; margin:16px 0; padding:8px 12px;
+  border:1px solid rgba(255,96,96,.3); background:var(--bad-soft); border-radius:9px;
+  color:#ff9c9c; font-size:13px; line-height:1.5; }
+.msg.ai.error .ic { margin-top:2px; }
+body.light .msg.ai.error { color:#b42318; border-color:rgba(180,35,24,.25); background:rgba(180,35,24,.05); }
+
+/* Gentle reveal when a fold opens; hover feedback on rows. */
+.proc[open] > .proc-steps, .step[open] > .step-body { animation:fade-in .18s ease; }
+@keyframes fade-in { from { opacity:0; transform:translateY(-3px); } }
+@keyframes pop-in { from { opacity:0; transform:translateY(4px); } }
+@keyframes modal-in { from { opacity:0; transform:translateY(6px) scale(.985); } }
+@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }
+@keyframes toast-out { to { opacity:0; transform:translateY(6px); } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
 }
 
 /* ===== embed 模式（被知识库壳嵌入）：折叠左侧项目栏，由壳 postMessage 控制 ===== */