/* CloudCLI / claudecodeui visual system — tokens from vendor/claudecodeui/src/index.css */

:root {
  --background: 44 22% 96%;
  --foreground: 36 25% 4%;
  --card: 0 0% 100%;
  --card-foreground: 36 25% 4%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 44 15% 91%;
  --secondary-foreground: 36 15% 18%;
  --muted: 44 15% 91%;
  /* 40 5% 44% on 96% bg ≈ 4.4:1 — 低于 AA 正文阈值，小字号很费力 */
  --muted-foreground: 40 6% 33%;
  --accent: 44 15% 91%;
  --accent-foreground: 36 15% 18%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 44 14% 87%;
  --input: 44 14% 87%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
  --ok: 142 65% 30%;
  --warn: 25 95% 53%;
  /* G 批修正：--destructive/--warn 是给按钮底色/色条设计的，直接当文字色
     在暗色主题上对比度仅 ~1.5:1。文字用途一律用 *-text 变体。 */
  --destructive-text: 0 72% 40%;
  --warn-text: 25 90% 35%;
  --sidebar-width: 288px;
  --nav-glass-bg: 44 22% 96% / 0.7;
  --nav-glass-blur: 20px;
  --nav-glass-saturate: 1.8;
  --nav-tab-glow: 221.2 83.2% 53.3% / 0.18;
  --nav-tab-ring: 221.2 83.2% 53.3% / 0.10;
  --nav-float-shadow: 0 0% 0% / 0.06;
  --nav-float-ring: 44 14% 87% / 0.5;
  --nav-divider-color: 44 14% 87% / 0.5;
  --nav-input-bg: 44 15% 91% / 0.5;
  --nav-input-focus-ring: 221.2 83.2% 53.3% / 0.22;
  --mobile-nav-height: 52px;
  --mobile-nav-padding: 20px;
  --wordmark-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* D7: card surfaces — one step above --background, with a real border.
     The light-theme card is white-on-gray so the border carries the
     distinction: border-vs-card ≈ 1.9. */
  --surface-1: 44 20% 99%;
  --surface-2: 44 15% 95%;
  --surface-border: 44 14% 72%;
}

/* H3: Shoelace token bridge —— 把 --sl-* 映射到我们已有的 token 表达式。
   六套主题（html[data-theme] / html.dark）重定义 --background/--card/... 后
   这些映射自动跟随，不需要按主题再写一份；未映射的 --sl-* 仍由 Shoelace
   light.css 兜底、.sl-theme-dark 下由 dark.css 覆盖。 */
:root {
  --sl-font-sans: inherit;
  --sl-panel-background-color: hsl(var(--card));
  --sl-panel-border-color: hsl(var(--border));
  --sl-color-neutral-0: hsl(var(--background));
  --sl-color-neutral-1000: hsl(var(--foreground));
  --sl-overlay-background-color: rgb(0 0 0 / 0.45);
  --sl-input-background-color: hsl(var(--background));
  --sl-input-background-color-hover: hsl(var(--background));
  --sl-input-background-color-focus: hsl(var(--background));
  --sl-input-border-color: hsl(var(--input));
  --sl-input-border-color-hover: hsl(var(--primary));
  --sl-input-border-color-focus: hsl(var(--primary));
  --sl-input-color: hsl(var(--foreground));
  --sl-input-placeholder-color: hsl(var(--muted-foreground));
  --sl-color-primary-500: hsl(var(--primary));
  --sl-color-primary-600: hsl(var(--primary));
  --sl-color-primary-700: hsl(var(--primary));
  --sl-color-danger-500: hsl(var(--destructive));
  --sl-color-danger-600: hsl(var(--destructive));
  --sl-color-danger-700: hsl(var(--destructive));
  --sl-focus-ring-color: hsl(var(--ring) / 0.45);
  --sl-border-radius-small: 6px;
  --sl-border-radius-medium: 8px;
  --sl-shadow-x-large: 0 12px 40px rgb(0 0 0 / 0.4);
  /* H3-d: sl-menu-item 的 hover 底用 neutral-100、正文用 neutral-700 —— 映到
     现有 surface-2/foreground；tooltip 是反色气泡，显式钉 foreground/background
     反色对（neutral-0 已映给 --background，直接沿用会暗底暗字不可读）。 */
  --sl-color-neutral-100: hsl(var(--surface-2));
  --sl-color-neutral-700: hsl(var(--foreground));
  --sl-tooltip-background-color: hsl(var(--foreground));
  --sl-tooltip-color: hsl(var(--background));
}

html.dark,
.dark {
  --background: 0 0% 8%;
  --foreground: 40 8% 93%;
  --card: 0 0% 12%;
  --card-foreground: 40 8% 93%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 0 0% 8%;
  --secondary: 0 0% 17%;
  --secondary-foreground: 40 8% 93%;
  --muted: 0 0% 17%;
  --muted-foreground: 0 0% 70%;
  --accent: 0 0% 17%;
  --accent-foreground: 40 8% 93%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 40 8% 93%;
  --border: 0 0% 17%;
  --input: 0 0% 23%;
  --ring: 217.2 91.2% 59.8%;
  --ok: 142 70% 45%;
  --destructive-text: 0 72% 72%;
  --warn-text: 35 95% 62%;
  --nav-glass-bg: 0 0% 12% / 0.55;
  --nav-glass-blur: 24px;
  --nav-glass-saturate: 1.6;
  --nav-tab-glow: 217.2 91.2% 59.8% / 0.25;
  --nav-tab-ring: 217.2 91.2% 59.8% / 0.15;
  --nav-float-shadow: 0 0% 0% / 0.35;
  --nav-float-ring: 0 0% 17% / 0.3;
  --nav-divider-color: 0 0% 17% / 0.5;
  --nav-input-bg: 0 0% 17% / 0.5;
  --nav-input-focus-ring: 217.2 91.2% 59.8% / 0.25;
  /* D7: card surfaces — one step above --background, with a real border.
     Tuned so card-vs-bg ≥1.25 and border-vs-card ≥1.6 (WCAG luminance). */
  --surface-1: 0 0% 16%;
  --surface-2: 0 0% 20%;
  --surface-border: 0 0% 30%;
}

/* G3: 追加主题 —— html[data-theme] 只覆盖必要 token；暗色主题在 JS 侧
   同时挂 .dark 类（老 CSS 的 .dark .cap-chip 等选择器依赖）。
   每套主题正文对比 ≥4.5:1、surface-border vs surface-1 ≥1.6:1（见 g3-theme.mjs）。 */

html[data-theme="midnight"] {
  --background: 222 30% 9%;
  --foreground: 215 20% 92%;
  --card: 222 25% 14%;
  --card-foreground: 215 20% 92%;
  --primary: 210 100% 66%;
  --primary-foreground: 222 30% 9%;
  --secondary: 222 22% 18%;
  --secondary-foreground: 215 20% 92%;
  --muted: 222 20% 18%;
  --muted-foreground: 218 13% 72%;
  --accent: 222 22% 18%;
  --accent-foreground: 215 20% 92%;
  --destructive: 0 72% 62%;
  --destructive-foreground: 215 20% 92%;
  --border: 222 20% 22%;
  --input: 222 18% 28%;
  --ring: 210 100% 66%;
  --ok: 142 60% 50%;
  --warn: 30 90% 58%;
  --destructive-text: 0 72% 72%;
  --warn-text: 35 95% 62%;
  --surface-1: 222 25% 14%;
  --surface-2: 222 22% 18%;
  --surface-border: 222 20% 30%;
  --nav-glass-bg: 222 30% 9% / 0.55;
  --nav-tab-glow: 210 100% 66% / 0.25;
  --nav-tab-ring: 210 100% 66% / 0.15;
  --nav-float-shadow: 0 0% 0% / 0.35;
  --nav-float-ring: 222 20% 22% / 0.3;
  --nav-divider-color: 222 20% 22% / 0.5;
  --nav-input-bg: 222 22% 18% / 0.5;
  --nav-input-focus-ring: 210 100% 66% / 0.25;
}

html[data-theme="forest"] {
  --background: 150 14% 9%;
  --foreground: 120 10% 90%;
  --card: 150 14% 14%;
  --card-foreground: 120 10% 90%;
  --primary: 152 60% 48%;
  --primary-foreground: 150 14% 9%;
  --secondary: 150 12% 18%;
  --secondary-foreground: 120 10% 90%;
  --muted: 150 12% 17%;
  --muted-foreground: 140 8% 70%;
  --accent: 150 12% 18%;
  --accent-foreground: 120 10% 90%;
  --destructive: 0 70% 60%;
  --destructive-foreground: 120 10% 90%;
  --border: 150 12% 21%;
  --input: 150 10% 26%;
  --ring: 152 60% 48%;
  --ok: 152 60% 45%;
  --warn: 35 90% 55%;
  --destructive-text: 0 72% 72%;
  --warn-text: 35 95% 62%;
  --surface-1: 150 14% 14%;
  --surface-2: 150 12% 18%;
  --surface-border: 150 10% 32%;
  --nav-glass-bg: 150 14% 9% / 0.55;
  --nav-tab-glow: 152 60% 48% / 0.25;
  --nav-tab-ring: 152 60% 48% / 0.15;
  --nav-float-shadow: 0 0% 0% / 0.35;
  --nav-float-ring: 150 12% 21% / 0.3;
  --nav-divider-color: 150 12% 21% / 0.5;
  --nav-input-bg: 150 12% 18% / 0.5;
  --nav-input-focus-ring: 152 60% 48% / 0.25;
}

html[data-theme="mocha"] {
  --background: 25 14% 10%;
  --foreground: 30 15% 88%;
  --card: 25 14% 15%;
  --card-foreground: 30 15% 88%;
  --primary: 28 85% 60%;
  --primary-foreground: 25 14% 10%;
  --secondary: 25 12% 19%;
  --secondary-foreground: 30 15% 88%;
  --muted: 25 12% 18%;
  --muted-foreground: 28 11% 71%;
  --accent: 25 12% 19%;
  --accent-foreground: 30 15% 88%;
  --destructive: 0 70% 62%;
  --destructive-foreground: 30 15% 88%;
  --border: 25 12% 23%;
  --input: 25 10% 28%;
  --ring: 28 85% 60%;
  --ok: 142 55% 48%;
  --warn: 20 90% 58%;
  --destructive-text: 8 75% 70%;
  --warn-text: 33 92% 60%;
  --surface-1: 25 14% 15%;
  --surface-2: 25 12% 19%;
  --surface-border: 25 12% 32%;
  --nav-glass-bg: 25 14% 10% / 0.55;
  --nav-tab-glow: 28 85% 60% / 0.25;
  --nav-tab-ring: 28 85% 60% / 0.15;
  --nav-float-shadow: 0 0% 0% / 0.35;
  --nav-float-ring: 25 12% 23% / 0.3;
  --nav-divider-color: 25 12% 23% / 0.5;
  --nav-input-bg: 25 12% 19% / 0.5;
  --nav-input-focus-ring: 28 85% 60% / 0.25;
}

html[data-theme="paper"] {
  --background: 40 30% 97%;
  --foreground: 30 20% 15%;
  --card: 40 25% 99%;
  --card-foreground: 30 20% 15%;
  --primary: 221 70% 45%;
  --primary-foreground: 40 30% 97%;
  --secondary: 40 15% 92%;
  --secondary-foreground: 30 20% 18%;
  --muted: 40 15% 92%;
  --muted-foreground: 35 8% 33%;
  --accent: 40 15% 92%;
  --accent-foreground: 30 20% 18%;
  --destructive: 0 75% 50%;
  --destructive-foreground: 40 30% 97%;
  --border: 40 15% 85%;
  --input: 40 15% 85%;
  --ring: 221 70% 45%;
  --ok: 142 65% 30%;
  --warn: 25 90% 50%;
  --destructive-text: 0 72% 40%;
  --warn-text: 25 90% 35%;
  --surface-1: 40 25% 99%;
  --surface-2: 40 18% 94%;
  --surface-border: 40 15% 70%;
  --nav-glass-bg: 40 30% 97% / 0.7;
  --nav-tab-glow: 221 70% 45% / 0.18;
  --nav-tab-ring: 221 70% 45% / 0.10;
  --nav-float-shadow: 0 0% 0% / 0.06;
  --nav-float-ring: 40 15% 85% / 0.5;
  --nav-divider-color: 40 15% 85% / 0.5;
  --nav-input-bg: 40 15% 92% / 0.5;
  --nav-input-focus-ring: 221 70% 45% / 0.22;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body.app-shell {
  display: flex;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Encode Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
.muted { color: hsl(var(--muted-foreground)); font-size: 12px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.btn-ghost, .btn-outline, .btn-primary, .btn-danger, .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.btn-ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
}
.btn-ghost:hover { background: hsl(var(--accent) / 0.8); color: hsl(var(--foreground)); }
.btn-outline {
  background: hsl(var(--background));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.12);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-danger {
  background: transparent;
  color: hsl(var(--destructive-text));
  border-color: hsl(var(--destructive) / 0.45);
}
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-icon { width: 28px; height: 28px; padding: 0; border-radius: 8px; }
.btn-icon svg, .footer-link svg, .pill svg, .git-tab svg, .footer-link svg { width: 14px; height: 14px; }

#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 180ms ease, transform 180ms ease;
}
body.sidebar-collapsed #sidebar { width: 0; overflow: hidden; border: 0; }
.expand-fab {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  box-shadow: 0 4px 16px hsl(0 0% 0% / 0.3);
}
.expand-fab svg { width: 16px; height: 16px; }
.expand-fab:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / 0.5); }
body.sidebar-collapsed .expand-fab { display: inline-flex; }
.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.2);
  flex-shrink: 0;
}
.logo-mark svg { width: 14px; height: 14px; }
.wordmark {
  font-family: var(--wordmark-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.header-actions { display: flex; gap: 2px; flex-shrink: 0; }
.sidebar-search, .file-search-wrap {
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 10px;
  height: 36px;
}
.nav-search-input {
  background: hsl(var(--nav-input-bg));
}
.nav-search-input:focus-within {
  background: hsl(var(--background));
  box-shadow: 0 0 0 2px hsl(var(--nav-input-focus-ring));
}
.sidebar-search input, .file-search-wrap input {
  border: 0;
  background: transparent;
  width: 100%;
  outline: none;
  padding: 0;
}
.search-icon { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.nav-divider {
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(90deg, transparent, hsl(var(--nav-divider-color)) 20%, hsl(var(--nav-divider-color)) 80%, transparent);
}
.sidebar-section { padding: 8px 8px 0; min-height: 0; overflow: auto; flex: 1; }
.sidebar-section h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 4px 8px 8px;
}
.project-list { display: flex; flex-direction: column; gap: 4px; }
/* 合并树：Agent(.project-row) → 项目组(.project-row.sub) → 会话(.session-row.leaf) */
.agent-node { display: flex; flex-direction: column; gap: 2px; }
.session-row.leaf {
  margin-left: 34px;
  padding: 6px 10px;
  border-left: 1px solid hsl(var(--border));
  border-radius: 0 8px 8px 0;
}
.session-group .tree-empty { padding-left: 46px; }
.project-row, .session-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.project-row:hover, .session-row:hover, .file-tree div:hover { background: hsl(var(--accent) / 0.8); }
.project-row.active, .session-row.active, .file-tree div.active {
  background: hsl(var(--background));
  box-shadow: 0 1px 0 hsl(var(--border) / 0.5);
}
.project-row .name, .session-row .name { font-size: 13px; font-weight: 500; }
/* F1.3: 会话名/项目名永远单行 —— 24 字的中文标题在窄侧栏会折成两行，
   行高一跳整棵树就散了。超出用省略号，完整名字在行的 title 提示里。 */
.project-row .name, .session-row .name,
.project-row .name-text, .session-row .name-text,
.session-main .muted {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.session-main .name { display: flex; align-items: center; gap: 0; min-width: 0; }
.session-main .name .name-text { flex: 1; min-width: 0; }
.session-row { align-items: center; }
.session-main { flex: 1; min-width: 0; }
.row-add {
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
}
.project-row:hover .row-add, .session-group:hover .row-add { opacity: 1; }
.row-add:hover { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); }
.project-row { align-items: center; }
.project-row.sub {
  margin-left: 22px;
  padding: 6px 10px;
  border-left: 1px solid hsl(var(--border));
  border-radius: 0 8px 8px 0;
}
.session-group { margin-bottom: 2px; }
.group-count { flex-shrink: 0; font-size: 11px; }
/* H2.1: Codex 式项目树 —— 折叠 chevron / 空组占位 / 菜单只读注释 */
.tree-toggle {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tree-toggle .row-icon { margin-top: 0; transition: transform 0.15s ease; }
.tree-toggle.open .row-icon { transform: rotate(90deg); }
.tree-empty { margin: 0; padding: 2px 10px 6px 34px; font-size: 12px; }
.menu-note {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  padding: 4px 8px;
  cursor: default;
  user-select: none;
}
.row-icon { width: 14px; height: 14px; margin-top: 2px; color: hsl(var(--muted-foreground)); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 4px; flex-shrink: 0; }
.dot.on { background: hsl(var(--ok)); }
.dot.off { background: hsl(var(--muted-foreground)); }
/* H1.4: 状态点与文字拉开间距；.session-main .name 内 dot 垂直居中 */
.session-main .name .dot, .project-row .dot { margin-top: 0; margin-right: 8px; vertical-align: middle; }
.sidebar-footer {
  margin-top: auto;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: hsl(var(--foreground));
  font-size: 13px;
}
.footer-link:hover { background: hsl(var(--accent) / 0.8); }
.theme-switch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid hsl(var(--primary));
  background: hsl(var(--primary));
  align-self: flex-start;
  margin-left: 10px;
}
html:not(.dark) .theme-switch {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}
.theme-knob {
  position: absolute;
  top: 2px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 180ms ease;
}
html:not(.dark) .theme-knob { left: 2px; background: hsl(var(--foreground) / 0.7); }
.theme-knob svg { width: 12px; height: 12px; }
.icon-sun { display: none; }
html:not(.dark) .icon-sun { display: block; color: white; }
html:not(.dark) .icon-moon { display: none; }
.icon-moon { color: hsl(var(--primary)); }

/* G3: 主题网格（设置页） */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.theme-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface-1));
  color: hsl(var(--foreground));
  font-size: 12px;
  text-align: left;
}
.theme-swatch.active { border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring) / 0.5); }
.theme-swatch .swatch-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  border: 1px solid hsl(var(--border));
  /* 内嵌该主题的 bg+primary 预览（JS 内联两个色值） */
  background: linear-gradient(135deg, var(--swatch-bg) 55%, var(--swatch-primary) 55%);
}

#workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: hsl(var(--background));
}
.workspace-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.workspace-title { min-width: 0; flex: 0 1 18rem; }
.workspace-title h2 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border) / 0.4);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / 0.04);
  min-width: max-content;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}
.pill.active, .pill[aria-selected="true"] {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08), 0 0 0 1px hsl(var(--border) / 0.5);
}
.workspace-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge {
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}
.badge.running { border-color: hsl(var(--primary) / 0.4); color: hsl(var(--primary)); }
.badge.awaiting { border-color: hsl(var(--warn) / 0.5); color: hsl(var(--warn-text)); }
.badge.error { border-color: hsl(var(--destructive) / 0.5); color: hsl(var(--destructive-text)); }
.badge:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; }

.view { display: none; min-height: 0; flex: 1; }
.view.active { display: flex; flex-direction: column; min-height: 0; }
#view-chat.active { flex: 1; }

.timeline {
  flex: 1;
  overflow: auto;
  padding: 20px 16px 8px;
}
.chat-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: hsl(var(--muted-foreground));
}
.chat-empty .logo-mark { width: 48px; height: 48px; border-radius: 12px; }
.chat-empty .btn-primary { margin-top: 8px; height: 36px; padding: 0 16px; }
.chat-message { margin-bottom: 12px; word-wrap: break-word; overflow-wrap: break-word; }
.chat-message.user {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px;
}
.user-bubble {
  max-width: min(640px, 85%);
  border-radius: 16px;
  border-bottom-right-radius: 6px;
  border: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--muted) / 0.6);
  padding: 8px 16px;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: 14px;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
}
html.dark .user-bubble { background: hsl(0 0% 18% / 0.6); }
.chat-message.assistant { padding: 0 16px; max-width: 860px; }
.assistant-body { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; color: hsl(var(--foreground)); }
.assistant-body.md-on { white-space: normal; }
/* D8: markdown children of assistant bodies — kept compact, one level above
   tool/think cards in the visual hierarchy */
.assistant-body .md-p { margin: 0 0 8px; }
.assistant-body .md-p:last-child { margin-bottom: 0; }
.assistant-body .md-h { margin: 12px 0 6px; line-height: 1.35; color: hsl(var(--foreground)); }
.assistant-body .md-h1 { font-size: 19px; }
.assistant-body .md-h2 { font-size: 17px; }
.assistant-body .md-h3 { font-size: 15.5px; }
.assistant-body .md-h4, .assistant-body .md-h5, .assistant-body .md-h6 { font-size: 14.5px; }
.assistant-body .md-list { margin: 4px 0 8px; padding-left: 22px; }
.assistant-body .md-list li { margin: 2px 0; }
.assistant-body .md-nested { margin: 2px 0 2px; }
.assistant-body .md-pre {
  position: relative;
  margin: 6px 0 10px;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--surface-border));
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 420px;
  overflow: auto;
}
.assistant-body pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}
.assistant-body .md-copy { position: absolute; top: 6px; right: 6px; }
.assistant-body .md-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--surface-border) / 0.6);
  border-radius: 4px;
  padding: 0 4px;
}
.assistant-body .md-quote {
  margin: 6px 0 8px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid hsl(var(--surface-border));
  color: hsl(var(--muted-foreground));
}
.assistant-body .md-hr { border: 0; border-top: 1px solid hsl(var(--surface-border)); margin: 12px 0; }
.assistant-body a { color: hsl(var(--primary)); }
.chat-message.error { padding: 0 16px; max-width: 860px; }
.error-body {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: hsl(var(--destructive-text));
  background: hsl(var(--destructive) / 0.08);
  border: 1px solid hsl(var(--destructive) / 0.3);
  border-radius: 8px;
  padding: 8px 12px;
}
.tool-chip.pulse { animation: chip-pulse 1.2s ease-in-out infinite; }
@keyframes chip-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 999px;
  padding: 4px 10px;
}

.chat-composer-shell {
  position: relative;
  flex-shrink: 0;
  padding: 0 16px 24px;
}
.chat-activity-tab {
  margin: 0 auto;
  max-width: 868px;
  display: inline-flex;
  height: 32px;
  align-items: center;
  border: 1px solid hsl(var(--border));
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 12px;
  font-size: 12px;
  background: hsl(var(--card));
}
.chat-activity-tab.hidden { display: none; }
.prompt-input {
  position: relative;
  max-width: 868px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid hsl(var(--border) / 0.5);
  background: hsl(var(--card) / 0.8);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.06);
  /* 不能有 backdrop-filter/transform —— 会把盒内 position:fixed 的
     sl-popup 包含块劫持到本元素，配合 overflow:hidden 把 tooltip 裁掉。
     毛玻璃在这里本来就没效果（没有内容从 composer 底下滚过）。 */
}
.prompt-input:focus-within {
  border-color: hsl(var(--primary) / 0.3);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15), 0 4px 12px hsl(0 0% 0% / 0.08);
}
#prompt {
  display: block;
  width: 100%;
  resize: none;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  min-height: 48px;
  max-height: 300px;
}
.prompt-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid hsl(var(--border) / 0.3);
  padding: 8px 12px;
}
.prompt-input-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tool-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
/* H3: 工具条里是 sl-select —— combobox part 承载原 select 的无边框紧凑样式。 */
.tool-select sl-select::part(combobox) {
  border: 0;
  background: transparent;
  padding: 4px 4px;
  border-radius: 6px;
  min-height: 0;
  box-shadow: none;
  font-size: 12px;
}
.tool-select sl-select::part(combobox):hover { background: hsl(var(--accent)); }
#ctx-1m { --width: 30px; --height: 16px; --thumb-size: 12px; }
/* 模型下拉：长模型 ID 的选项文字缩小并单行省略，不再折成两行。 */
#model sl-option::part(label),
#settings-model sl-option::part(label) {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#model::part(display-input), #settings-model::part(display-input) { font-size: 11px; }
.send-btn { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; position: relative; }
.send-btn svg { width: 16px; height: 16px; }
.send-btn .act-send, .send-btn .act-stop { display: none; }
.send-btn.is-send .act-send { display: block; }
.send-btn.is-stop .act-stop { display: block; }
.send-btn.is-stop.has-pending::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--primary));
  border: 2px solid hsl(var(--background));
}
.busy-mode { font-size: 11px; }
.busy-mode sl-select::part(combobox) { font-size: 11px; padding: 1px 4px; }

.overflow-menu { position: relative; }
/* H3-d: 菜单 = sl-dropdown + sl-menu。trigger 是 slot="trigger" 的 sl-button；
   面板定位交给 sl-popup（不用 hoist —— hoist 会把 panel 传送出 .row-menu，
   行内 locator 查不到 sl-menu-item）。升级完成前藏住菜单，避免未定义的
   sl-menu-item 以普通元素形态闪现在行内。 */
.overflow-menu:not(:defined) .overflow-items { display: none; }
.overflow-menu .row-edit { cursor: pointer; user-select: none; letter-spacing: 1px; }
.overflow-menu .row-edit::part(base) { border: 0; background: transparent; padding: 4px 5px; }
.overflow-menu .overflow-items { min-width: 110px; }
.overflow-menu .overflow-items::part(base) {
  padding: 6px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--background));
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.25);
}
.overflow-menu .overflow-items sl-menu-item::part(base) { text-align: left; }

.chat-message.queued { opacity: 0.65; }
.chat-message.queued .user-bubble { font-style: normal; }
.queue-tag {
  margin-left: 8px;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  align-self: center;
}
.queue-x {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
}
.queue-x:hover { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive-text)); }

/* B3: background tasks chip + drawer */
.tasks-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.tasks-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--primary));
  animation: chip-pulse 1.4s ease-in-out infinite;
}
.tasks-drawer {
  position: absolute;
  top: 100%;
  right: 12px;
  width: 380px;
  max-width: calc(100vw - 24px);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--background));
  box-shadow: 0 12px 32px hsl(0 0% 0% / 0.3);
  z-index: 45;
  padding: 8px;
}
.tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-top: 1px solid hsl(var(--border) / 0.4);
  font-size: 12.5px;
}
.task-row.stale { background: hsl(45 90% 50% / 0.08); }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta, .task-activity { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* H2.2: 抽屉里的「运行中的子 Agent」一节 */
.tasks-subhead {
  margin-top: 10px;
  padding: 6px 4px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  border-top: 1px dashed hsl(var(--border));
}
.subagent-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-top: 1px solid hsl(var(--border) / 0.4);
  font-size: 12.5px;
}
/* H2.3: TodoWrite 任务清单 —— 吸附在时间线顶部的折叠面板 */
/* 历史分页：切会话只拉最新一页事件，更早的按需向上翻。sticky 在时间线顶部。 */
.history-more {
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  margin: 6px auto 0;
  padding: 4px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--surface-2, var(--card)));
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  cursor: pointer;
}
.history-more:hover:not(:disabled) { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / 0.5); }
.history-more:disabled { opacity: 0.6; cursor: default; }
.todo-panel {
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(var(--surface-1, var(--background)));
  border-bottom: 1px solid hsl(var(--surface-border, var(--border)));
  font-size: 12px;
}
.todo-panel summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  list-style: none;
}
.todo-panel summary::-webkit-details-marker { display: none; }
.todo-panel summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid hsl(var(--muted-foreground));
  border-bottom: 1.5px solid hsl(var(--muted-foreground));
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.todo-panel[open] summary::before { transform: rotate(45deg); }
#todo-items { padding: 0 12px 8px; }
.todo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: hsl(var(--muted-foreground));
}
.todo-item[data-status="completed"] { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.todo-item[data-status="completed"] .done-icon { color: hsl(142 60% 45%); text-decoration: none; }
.todo-item[data-status="in_progress"] { color: hsl(var(--foreground)); font-weight: 600; }
.todo-item .pending-icon { color: hsl(var(--muted-foreground)); opacity: 0.7; }
/* K2: 时间线里的正文块是定位元素（hover 出「复制」按钮），DOM 上又排在头部
   之后 —— 不给头部 z-index，正文就会盖住 ⋯ 菜单面板，菜单项点不动。 */
.workspace-header { position: relative; z-index: 20; }

/* B5: command cards */
.tool-card.cmd-card .tool-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cmd-body { padding: 8px 10px; display: grid; gap: 8px; }
/* D6: full command only renders when the summary truncated it */
.cmd-full {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  white-space: pre-wrap;
  background: hsl(var(--surface-2));
  border-radius: 6px;
  padding: 6px 8px;
}
/* D6: summary-row affordances — exit badge, duration, copy */
.cmd-exit {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 4px;
  color: hsl(142 60% 45%);
  background: hsl(142 60% 45% / 0.12);
}
.cmd-exit.err { color: hsl(var(--destructive-text)); background: hsl(var(--destructive) / 0.12); }
.cmd-dur { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.cmd-copy {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 10.5px;
  cursor: pointer;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.cmd-copy:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.cmd-out pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
  background: hsl(var(--surface-2));
  border-radius: 6px;
  padding: 6px 8px;
}
.cmd-out pre.err { color: hsl(var(--destructive-text)); }
.cmd-expand {
  border: 0;
  background: none;
  color: hsl(var(--primary));
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 0 0;
}
.cmd-meta { font-size: 11px; }
.cmd-meta.hidden { display: none; }
.cmd-meta.err { color: hsl(var(--destructive-text)); }
.tool-card.error > summary .tool-name { color: hsl(var(--destructive-text)); }

/* C3: write_file diff preview in the risk banner */
.diff-slot { margin: 6px 0; }
.diff-head { font-size: 11.5px; margin-bottom: 4px; }
.diff-view {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  border: 1px solid hsl(var(--surface-border));
  border-radius: 6px;
  padding: 6px 8px;
  background: hsl(var(--surface-2));
}
.diff-view span { display: block; white-space: pre-wrap; word-break: break-all; }
.diff-add { color: hsl(var(--ok)); background: hsl(var(--ok) / 0.10); }
.diff-del { color: hsl(var(--destructive-text)); background: hsl(var(--destructive) / 0.08); }
.diff-same { color: hsl(var(--muted-foreground)); }
/* G2: 摘要/横幅里的 +A −D 上色（token 化，随主题变） */
.stat-add { color: hsl(var(--ok)); font-weight: 600; }
.stat-del { color: hsl(var(--destructive-text)); font-weight: 600; }

/* C1: live output tail inside a running command card */
.cmd-tail {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
  white-space: pre-wrap;
  word-break: break-word;
}
.cmd-tail::before {
  content: "▸ ";
  color: hsl(var(--primary));
}

.risk-banner {
  margin: 12px 16px 0;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 12px 16px;
  background: hsl(var(--card));
  font-size: 14px;
}
.risk-banner.hidden { display: none; }
.risk-banner code {
  background: hsl(var(--muted));
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
}
.risk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.risk-actions [data-act="once"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
}
.risk-actions [data-act="deny"],
.risk-actions [data-act="remember"] {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  padding: 6px 12px;
}

.split { display: grid; grid-template-columns: 280px 1fr; min-height: 0; height: 100%; }
.file-tree-pane { border-right: 1px solid hsl(var(--border)); overflow: auto; display: flex; flex-direction: column; }
.pane-header, .git-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.pane-header h2, .git-header h2 { font-size: 14px; }
.file-tree { overflow: auto; padding: 8px; flex: 1; }
.file-tree div { padding: 6px 8px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.file-tree svg { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
#editor {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  background: hsl(var(--background));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 16px;
}
.editor-pane { display: flex; flex-direction: column; min-width: 0; }

.git-tabs { display: flex; overflow-x: auto; }
.git-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 500;
}
.git-tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
.git-output, .shell-output {
  flex: 1;
  margin: 0;
  overflow: auto;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  font-size: 13px;
}
.shell-output {
  background: #0c0c0c;
  color: #e6e6e6;
  min-height: 240px;
}
.shell-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid hsl(var(--border));
  background: #0c0c0c;
}
.shell-prompt { color: hsl(var(--ok)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#shell-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #e6e6e6;
  outline: none;
  padding: 8px 0;
}

.pane-tools { display: flex; align-items: center; gap: 8px; }
.agent-select { max-width: 220px; }
.agent-select::part(combobox) {
  height: 30px;
  min-height: 30px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 12px;
  box-shadow: none;
  font-size: 12px;
  padding: 0 8px;
}

.perm-scroll { overflow: auto; padding-bottom: 24px; }
.perm-hero { margin: 16px 16px 4px; }
.perm-hero h2 { font-size: 17px; }
.perm-hero p { margin-top: 4px; }
.perm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; padding: 12px 16px 0; }
.perm-block {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  padding: 14px;
}
.perm-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.perm-block-title svg { width: 18px; height: 18px; color: hsl(var(--ok)); }
.perm-block-title.blocked-title svg { color: hsl(var(--destructive-text)); }
.perm-hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 0 0 10px; }
.mini-title { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.mini-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  cursor: pointer;
}
.perm-danger {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid hsl(25 95% 53% / 0.35);
  background: hsl(25 95% 53% / 0.08);
}
.perm-danger label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.warn-icon { width: 20px; height: 20px; color: hsl(var(--warn-text)); flex-shrink: 0; }
.perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: hsl(var(--primary));
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.perm-toggle svg { width: 14px; height: 14px; }
.perm-levels { border: 0; display: grid; gap: 8px; padding: 0; margin: 0; }
.layer-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--background));
  cursor: pointer;
}
.layer-card input { margin-top: 3px; }
.layer-card.active { border-color: hsl(var(--primary) / 0.6); background: hsl(var(--primary) / 0.06); }
.layer-main { display: grid; gap: 4px; }
.cap-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cap-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid hsl(142 70% 45% / 0.4);
  background: hsl(142 70% 45% / 0.1);
  color: hsl(142 70% 30%);
}
.dark .cap-chip { color: hsl(142 70% 70%); }
.cap-chip.confirm { border-color: hsl(25 95% 53% / 0.4); background: hsl(25 95% 53% / 0.1); color: hsl(25 80% 35%); }
.dark .cap-chip.confirm { color: hsl(35 90% 70%); }
.perm-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed hsl(var(--border));
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.perm-advanced { margin: 14px 16px 0; border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 10px 14px; }
.perm-advanced summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.perm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 12px; }
.chips, .add-row, .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.add-row { margin: 8px 0; }
.add-row input {
  flex: 1;
  height: 36px;
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  background: hsl(var(--background));
  padding: 0 12px;
}
.rule-list { display: grid; gap: 8px; margin-top: 8px; }
.rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid hsl(142 70% 45% / 0.35);
  background: hsl(142 70% 45% / 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.rule-list.blocked .rule {
  border-color: hsl(var(--destructive) / 0.4);
  background: hsl(var(--destructive) / 0.08);
}
#remembered-list .rule {
  border-color: hsl(25 95% 53% / 0.4);
  background: hsl(25 95% 53% / 0.08);
}
/* H1.2: 归档管理行 */
.rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
}
.rule-row .rule-main { min-width: 0; }
.rule-row .rule-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-row .rule-ops { display: flex; gap: 6px; flex-shrink: 0; }
/* H1.1: 自绘模态（原生 <dialog>） */
/* H3: 宿主是 <sl-dialog> —— 面板/遮罩在 shadow DOM 里，样式打到 parts 上。
   class 名保留（ui-smoke 等用 .ui-dialog .ui-dialog-ok 选择器）。 */
sl-dialog.ui-dialog { --width: min(440px, calc(100vw - 32px)); }
sl-dialog.ui-dialog::part(panel) {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--surface-1));
  color: hsl(var(--foreground));
  min-width: 320px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.4);
}
sl-dialog.ui-dialog::part(overlay) { background: rgb(0 0 0 / 0.45); }
sl-dialog.ui-dialog::part(body) { padding: 16px; }
sl-dialog.ui-dialog::part(footer) { padding: 0 16px 16px; }
.ui-dialog-card { display: grid; gap: 12px; }
.ui-dialog-msg { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ui-dialog-input { width: 100%; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* H1.3/H1.5: 行内重命名输入框 */
.rename-input {
  width: 100%;
  min-width: 0;
  padding: 1px 6px;
  font: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 5px;
}
.overflow-items sl-menu-item:is(.danger-item, .btn-danger)::part(base) { color: hsl(var(--destructive-text)); }
.perm-actions { padding: 14px 16px 0; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
}
.settings-row > span { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.settings-hint { margin: -2px 0 6px; font-size: 11.5px; line-height: 1.5; color: hsl(var(--muted-foreground) / 0.75); }
.acct-usage { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 260px; }
.acct-usage .usage-bar { flex: 1; height: 6px; border-radius: 3px; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--surface-border) / 0.4); overflow: hidden; }
.acct-usage .usage-bar i { display: block; height: 100%; border-radius: 3px; background: hsl(var(--primary)); }
.acct-usage .usage-bar i.hot { background: hsl(var(--destructive)); }
.settings-row select, .settings-row input {
  height: 32px;
  min-width: 170px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0 8px;
  font-size: 12px;
}
/* H3: 设置行里的 sl-select / sl-input / sl-switch */
.settings-row sl-select, .settings-row sl-input { min-width: 170px; }
.settings-row sl-select::part(combobox) {
  height: 32px;
  min-height: 32px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0 8px;
  font-size: 12px;
  box-shadow: none;
}
.settings-row sl-input::part(base) {
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  box-shadow: none;
}
.settings-row sl-input::part(input) { color: hsl(var(--foreground)); font-size: 12px; }
.settings-row sl-switch { --width: 36px; --height: 20px; --thumb-size: 16px; font-size: 12px; }
/* H3: sl-select 的 <optgroup> 替代物 —— 分组小标题 */
.select-group { display: block; padding: 6px 10px 2px; font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); }
/* H2.2: 子 Agent 配置项卡片 */
.subagent-item {
  display: grid;
  gap: 6px;
  padding: 8px;
  margin-top: 8px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--surface-2, var(--background)));
}
.subagent-item input, .subagent-item select, .subagent-item textarea {
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
}
.subagent-item .btn-danger { justify-self: end; }
.mode-icon { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
#perm-mode::part(combobox) {
  height: 30px;
  min-height: 30px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 12px;
  padding: 0 6px;
  box-shadow: none;
}
#perm-mode[disabled] { opacity: 0.45; }

/* ── Codex-style motion ── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.view.active { animation: fade-in 160ms ease-out; }
.project-row, .session-row, .pill, .btn-primary, .btn-outline, .btn-ghost, .btn-danger, .layer-card, .mini-btn, .chips button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}
/* transform 会形成堆叠上下文，把行内 sl-dropdown 面板的 z-index 困在行内，
   导致后一行的隐藏按钮盖住面板项。菜单打开期间不做位移动画。 */
.project-row:hover:not(:has(.row-menu[open])), .session-row:hover:not(:has(.row-menu[open])) { transform: translateX(2px); }
.btn-primary:hover, .btn-outline:hover { box-shadow: 0 2px 10px hsl(var(--primary) / 0.25); }
.btn-primary:active, .btn-outline:active, .btn-danger:active, .pill:active { transform: scale(0.97); }
#sidebar { transition: width 200ms ease; }
.risk-banner { animation: rise-in 220ms ease-out; }
.toast { transition: opacity 250ms ease, transform 250ms ease; }

.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, 90vw);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--destructive) / 0.5);
  color: hsl(var(--foreground));
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.25);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  word-break: break-word;
}
.toast.show { opacity: 1; transform: none; }
.toast.info { border-color: hsl(var(--primary) / 0.5); }

.nav-glass {
  background: hsl(var(--nav-glass-bg));
  backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
}
.mobile-nav-float {
  box-shadow: 0 -1px 20px hsl(var(--nav-float-shadow)), 0 0 0 1px hsl(var(--nav-float-ring));
}
.mobile-nav { display: none; }
.mobile-only { display: none; }

@media (max-width: 860px) {
  body.app-shell { display: block; }
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
  }
  body.sidebar-open #sidebar { transform: none; width: min(88vw, 320px); }
  .desktop-only { display: none; }
  .mobile-only { display: inline-flex; }
  .workspace-header { flex-wrap: wrap; }
  .workspace-actions { width: 100%; margin-left: 0; }
  .split, .perm-columns, .perm-grid { grid-template-columns: 1fr; }
  .mobile-nav {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: var(--mobile-nav-height);
    border-radius: 16px;
    justify-content: space-around;
    align-items: center;
    z-index: 30;
  }
  .mobile-nav button {
    background: transparent;
    border: 0;
    color: hsl(var(--muted-foreground));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
  }
  .mobile-nav button.active { color: hsl(var(--primary)); }
  .mobile-nav svg { width: 18px; height: 18px; }
  .chat-composer-shell { padding-bottom: calc(var(--mobile-nav-height) + 28px); }
}

/* ===== chat-8: tool calls, interrupt, dir picker ===== */
.hidden { display: none !important; }

.tool-card {
  margin: 2px 0;
  border: 1px solid hsl(var(--surface-border));
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: hsl(var(--surface-1));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.22);
  overflow: hidden;
  max-width: 860px;
}
/* D7: state reads at a glance — Cursor-style left color bar. The done bar is
   theme-tuned: deep green on light cards, brighter green on dark cards, both
   clearing 3:1 against the card surface. */
.tool-card.running { border-left-color: hsl(var(--primary)); }
.tool-card.done { border-left-color: hsl(142 65% 32%); }
html.dark .tool-card.done { border-left-color: hsl(142 60% 48%); }
.tool-card.error { border-left-color: hsl(var(--destructive-text)); }
.tool-card summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
  color: hsl(var(--muted-foreground));
  user-select: none;
}
.tool-card summary::-webkit-details-marker { display: none; }
.tool-card summary .row-icon { width: 14px; height: 14px; flex-shrink: 0; }
.tool-card .tool-name { font-weight: 600; color: hsl(var(--foreground) / 0.9); }
.tool-card summary code {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* D7: turn rows share the assistant column's padding so cards align with body text */
.turn-row { padding: 0 16px; }
.tool-card pre {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid hsl(var(--surface-border) / 0.5);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
  color: hsl(var(--foreground) / 0.85);
  background: hsl(var(--surface-2));
}
/* D4: per-tool expandable body — read_file meta + list truncation live here */
.tool-body { padding: 6px 12px 10px; border-top: 1px solid hsl(var(--border) / 0.4); }
.tool-body .tool-meta { font-size: 11.5px; padding: 2px 0 6px; }
.tool-body pre { border-top: 0; padding: 4px 0 2px; max-height: 160px; }
.tool-body .diff-view { border-top: 0; padding: 4px 0 2px; }
.tool-open-file { margin-top: 4px; }
.tool-body .err { color: hsl(var(--destructive-text)); }
/* H2.2: 子 Agent 卡 —— 左边框强调色 + 转发的子正文/子思考 */
.tool-card.subagent-card { border-left-color: hsl(var(--primary)); }
.subagent-meta { font-size: 11.5px; padding: 2px 0 6px; }
.subagent-body, .subagent-think, .subagent-result {
  border-top: 0;
  padding: 4px 0 2px;
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  white-space: pre-wrap;
}
.subagent-think { font-style: italic; }
.tool-card.running { border-color: hsl(var(--primary) / 0.55); }
.tool-card.running::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.7), transparent);
  background-size: 200% 100%;
  animation: tool-sweep 1.6s linear infinite;
}
.tool-card.running summary {
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.10), transparent);
  background-size: 200% 100%;
  animation: tool-sweep 1.6s linear infinite;
}
@keyframes tool-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.tool-spin { animation: spin 900ms linear infinite; color: hsl(var(--primary)); }
.tool-card .done-icon { color: hsl(142 60% 45%); }
.tool-card .tool-timer { margin-left: auto; font-size: 11px; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; }
.tool-card.error { border-color: hsl(var(--destructive) / 0.5); border-left-color: hsl(var(--destructive-text)); }
.tool-pulse { animation: chip-pulse 1.2s ease-in-out infinite; color: hsl(var(--primary)); }

/* D7: thinking cards sit one surface level below tool cards */
.think-card {
  margin: 4px 0 10px 8px;
  border: 1px dashed hsl(var(--surface-border));
  border-left: 2px dashed hsl(var(--surface-border));
  border-radius: 10px;
  background: hsl(var(--surface-1) / 0.6);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.22);
  overflow: hidden;
  max-width: 860px;
}
.think-card summary .think-ico { width: 14px; height: 14px; flex: none; opacity: 0.8; }
/* 上游加密思考（redacted thinking）：只有 token 计数没有明文 —— 一条灰条 */
.think-redacted {
  margin: 4px 0 10px 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: hsl(var(--muted-foreground) / 0.75);
  border-left: 2px dashed hsl(var(--surface-border));
}
.think-card summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
  color: hsl(var(--muted-foreground));
  user-select: none;
}
.think-card summary::-webkit-details-marker { display: none; }
.think-card .think-timer { font-size: 11px; color: hsl(var(--muted-foreground) / 0.8); font-variant-numeric: tabular-nums; }
.think-body {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px dashed hsl(var(--border) / 0.4);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
  color: hsl(var(--muted-foreground));
}
.process-state.running, #process-state.running { animation: chip-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tool-card.running::before, .tool-card.running summary, .tool-spin, .tool-pulse, .think-card summary {
    animation: none !important;
  }
  .tool-card.running { border-color: hsl(var(--primary) / 0.6); border-left-color: hsl(var(--primary)); }
}

.row-edit {
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
}
/* H3-d: .row-edit 现在是 sl-button 宿主 —— 可视样式打在 ::part(base) 上。 */
.row-edit::part(base) {
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  padding: 4px 5px;
  border-radius: 6px;
}
.row-edit .row-icon, .row-add .row-icon { width: 13px; height: 13px; }
.project-row:hover .row-edit { opacity: 1; }
.row-edit:hover::part(base) { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); }
.project-row.sub .muted { font-size: 11px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 0% / 0.45);
  backdrop-filter: blur(2px);
}
.modal-card {
  width: min(560px, calc(100vw - 32px));
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 18px;
  box-shadow: 0 16px 48px hsl(0 0% 0% / 0.35);
  animation: rise-in 180ms ease-out;
}
.modal-title { font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.modal-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.modal-actions input { flex: 1; }
.dir-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.dir-crumb code {
  flex: 1;
  background: hsl(var(--muted) / 0.4);
  border-radius: 6px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.dir-roots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dir-root {
  border: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.25);
  color: hsl(var(--foreground));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-root:hover { background: hsl(var(--muted) / 0.5); }
.dir-root.active {
  background: hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
}
.dir-list {
  flex: 1;
  min-height: 140px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: 10px;
}
.dir-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid hsl(var(--border) / 0.3);
}
.dir-row:last-child { border-bottom: 0; }
.dir-row:hover { background: hsl(var(--muted) / 0.4); }
.dir-row .row-icon { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.dir-row .muted { margin-left: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-new { display: flex; gap: 8px; }
.dir-new sl-input { flex: 1; }
.dir-new sl-input::part(base), .modal-actions sl-input::part(base) {
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--background));
  box-shadow: none;
}
.dir-new sl-input::part(input), .modal-actions sl-input::part(input) {
  color: hsl(var(--foreground));
  font-size: 13px;
}
.modal-actions sl-input { flex: 1; }

/* D11: context-usage ring + hover popover */
.usage-ring-wrap { position: relative; display: inline-flex; align-items: center; }
/* 上下文环旁的 5 小时订阅用量条（设置页可关） */
.rate-limits {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
}
.rate-limits .rl-bar {
  width: 42px;
  height: 5px;
  border-radius: 3px;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--surface-border) / 0.4);
  overflow: hidden;
}
.rate-limits .rl-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: hsl(var(--primary));
}
.rate-limits .rl-bar i.hot { background: hsl(var(--destructive)); }
.rate-limits .rl-label {
  font-size: 10.5px;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-ring {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  font: inherit;
}
.usage-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.usage-ring .ring-track { fill: none; stroke: hsl(var(--surface-2)); stroke-width: 3; }
.usage-ring .ring-fill {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 56.55;
  stroke-dashoffset: 56.55;
  transition: stroke-dashoffset 300ms ease, stroke 200ms ease;
}
.usage-ring .ring-fill.warn { stroke: hsl(var(--warn)); }
.usage-ring .ring-fill.danger { stroke: hsl(var(--destructive)); }
.usage-pct { font-size: 11px; font-variant-numeric: tabular-nums; min-width: 30px; }
.usage-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  min-width: 240px;
  max-width: min(420px, 92vw);
  max-height: 55vh;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid hsl(var(--surface-border));
  border-radius: 8px;
  background: hsl(var(--surface-1));
  box-shadow: 0 6px 20px hsl(0 0% 0% / 0.35);
  font-size: 12px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms;
}
/* 弹出层挂在 .chat-composer-shell（无 overflow 裁剪）下，用 :has() 反查 ring 的
   hover/focus 状态 —— 不能再放在 .prompt-input 里（overflow:hidden + backdrop-filter
   会把它裁掉/盖住）。 */
.chat-composer-shell:has(.usage-ring:is(:hover, :focus-visible)) .usage-pop { opacity: 1; visibility: visible; }

/* D12: Codex-style divider for model/effort switches */
.turn-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.turn-divider::before,
.turn-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid hsl(var(--surface-border));
}
.turn-divider > span {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* F1.1: 压缩分隔符比模型/effort 切换更重要，给它 accent 色 */
.turn-divider[data-tone="compact"] > span { color: hsl(var(--primary)); }

/* E1.3: per-turn footer — status · duration · token usage */
.turn-footer {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  margin: 4px 16px 10px;
  display: flex;
  gap: 8px;
}
.turn-footer[data-status="error"] { color: hsl(var(--destructive-text)); }
.turn-footer[data-status="stopped"] { color: hsl(var(--warn-text)); }
.turn-footer[data-status="timeout"] { color: hsl(var(--warn-text)); }

/* E4.1: ask_user question card — 多题列表 + 回答后折叠为紧凑摘要 */
.ask-card {
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid hsl(var(--surface-border));
  border-radius: 10px;
  background: hsl(var(--surface-1));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ask-card .ask-qlist { display: flex; flex-direction: column; gap: 4px; }
.ask-card .ask-q {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px dashed hsl(var(--border) / 0.7);
}
.ask-card .ask-q:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ask-card .ask-question { font-size: 13.5px; font-weight: 600; color: hsl(var(--foreground)); }
.ask-card .ask-header {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--surface-border));
  border-radius: 4px;
  padding: 0 5px;
  vertical-align: 1px;
}
.ask-card .ask-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-card .ask-opt.picked { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.ask-card .ask-opt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 8px; border: 1px solid hsl(var(--surface-border)); border-radius: 6px; }
.ask-card .ask-text {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 13px;
}
.ask-card .ask-answer { font-size: 12.5px; }
.ask-card .ask-answer:empty { display: none; }
.ask-card .ask-line { display: flex; align-items: baseline; gap: 6px; line-height: 1.5; }
.ask-card .ask-line + .ask-line { margin-top: 3px; }
.ask-card .ask-line-q {
  color: hsl(var(--muted-foreground));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.ask-card .ask-line-a { font-weight: 500; color: hsl(var(--foreground)); }
/* 回答后折叠：控件/按钮整段隐藏，只留摘要行。 */
.ask-card.answered { padding: 8px 12px; gap: 0; }
.ask-card.answered .ask-qlist, .ask-card.answered .ask-actions { display: none; }

/* E4.2: attach bar + drop highlight */
.attach-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 0; }
.attach-bar.hidden { display: none; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid hsl(var(--surface-border));
  border-radius: 999px;
  background: hsl(var(--surface-2));
  font-size: 12px;
}
.attach-chip.outside { border-color: hsl(var(--warn) / 0.6); color: hsl(var(--warn-text)); }
.attach-chip button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; }
.prompt-input.drop-target { outline: 2px dashed hsl(var(--primary)); outline-offset: 2px; }

/* H2.3: 输入框上方悬浮的子 Agent 状态条 + 上弹进度面板 */
.subagent-bar {
  position: relative;
  max-width: var(--chat-col-max, 868px);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 4px;
}
.subagent-bar.hidden { display: none; }
.subagent-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid hsl(var(--surface-border));
  border-radius: 999px;
  background: hsl(var(--card));
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  box-shadow: 0 1px 4px hsl(0 0% 0% / 0.08);
  white-space: nowrap;
}
.subagent-chip:hover { border-color: hsl(var(--primary) / 0.4); color: hsl(var(--foreground)); }
.subagent-chip .caret { transition: transform 0.15s; flex-shrink: 0; }
.subagent-chip.open .caret { transform: rotate(180deg); }
.subagent-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
  animation: subagent-pulse 1.2s ease-in-out infinite;
}
@keyframes subagent-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.subagent-pop {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 300px;
  max-width: 480px;
  max-height: 300px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--surface-border));
  border-radius: 12px;
  box-shadow: 0 8px 28px hsl(0 0% 0% / 0.18);
  padding: 6px;
}
.subagent-pop.hidden { display: none; }
.subagent-pop-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
}
.subagent-pop-row:hover { background: hsl(var(--surface-2)); }
.subagent-pop-main { flex: 1; min-width: 0; }
.subagent-pop-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.subagent-pop-desc { font-size: 12px; color: hsl(var(--foreground) / 0.85); margin-top: 3px; line-height: 1.4; }
.subagent-pop-latest {
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tool-card.flash { outline: 2px solid hsl(var(--primary) / 0.5); outline-offset: 2px; transition: outline-color 0.3s; }

/* 运行中工具卡的停止按钮 + 子代理模型徽章 */
.tool-stop {
  border: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.tool-stop:hover { border-color: hsl(var(--warn) / 0.6); color: hsl(var(--warn-text, hsl(25 95% 55%))); }
.tool-stop.danger:hover { border-color: hsl(var(--destructive, hsl(0 84% 60%)) / 0.7); color: hsl(var(--destructive, hsl(0 84% 60%))); }
.tool-stop.hidden { display: none; }
.subagent-model {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-weight: 600;
  margin-left: 2px;
}

/* E5: identity badge + admin page */
.me-badge { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.me-badge a { color: hsl(var(--primary)); font-size: 12.5px; }
.admin-body { min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 24px; }
.admin-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.admin-header h1 { font-size: 20px; margin: 0; }
.admin-denied { padding: 24px; text-align: center; color: hsl(var(--muted-foreground)); }
.admin-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-actions sl-input::part(base) { border: 1px solid hsl(var(--input)); border-radius: 6px; background: hsl(var(--background)); box-shadow: none; }
.admin-actions sl-input::part(input) { padding: 6px 10px; color: hsl(var(--foreground)); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid hsl(var(--surface-border)); }
.admin-table .u-ops button { margin-right: 6px; }
.admin-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.admin-login-form { display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.admin-login-form sl-input::part(base) { border: 1px solid hsl(var(--input)); border-radius: 6px; background: hsl(var(--background)); box-shadow: none; }
.admin-login-form sl-input::part(input) { padding: 6px 10px; color: hsl(var(--foreground)); }
.admin-table tr.is-me td { background: hsl(var(--accent) / 0.12); }
#token-dialog { max-width: 720px; padding: 20px; border: 1px solid hsl(var(--surface-border)); border-radius: 10px; background: hsl(var(--surface-1, var(--background))); color: hsl(var(--foreground)); }
#token-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.token-reveal dt { font-weight: 600; margin-top: 10px; }
.token-reveal dd { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; }
.token-reveal code { word-break: break-all; font-size: 12px; }

/* F2/F5: agent version badge + row ⋯ menu */
.agent-ver { margin-left: 6px; font-size: 11px; }
.agent-ver.stale { color: hsl(var(--warn-text)); font-weight: 600; }
.row-menu { flex-shrink: 0; }
.row-menu .row-edit { display: inline-flex; align-items: center; justify-content: center; opacity: 0; }
.project-row:hover .row-menu .row-edit, .session-group:hover .row-menu .row-edit, .row-menu[open] .row-edit { opacity: 1; }
.row-menu .overflow-items { min-width: 150px; }
/* H3-d: sl-menu-item 文字/hover 颜色走 token bridge（neutral-700→foreground、
   neutral-100→surface-2），这里只补密度参数。 */
.row-menu .overflow-items sl-menu-item::part(base) {
  color: hsl(var(--foreground));
  font-size: 12.5px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

/* ===== J-U3 / A8: 回合版面 —— 正文是焦点，过程退居其后 ===== */

/* A8: 时间线与输入框共用同一条居中栏。原先正文左对齐 860px、用户气泡贴最右、
   输入框居中 868px，宽屏下三段各在各的位置，读起来像三块不相干的东西。 */
/* J-U4: 900px 的固定栏在宽屏上显得又小又不协调（用户实测）。改成跟随窗口
   延伸，只留一个很宽的上限防止超宽屏上行长到没法读。时间线与输入框共用
   同一个变量 —— 改一处两边一起动，不会再各走各的。 */
:root { --chat-col-max: 1600px; }
.timeline > .turn-row,
.timeline > .chat-message,
.timeline > .chat-empty {
  width: 100%;
  max-width: var(--chat-col-max);
  margin-left: auto;
  margin-right: auto;
}
.prompt-input,
.chat-activity-tab,
.attach-bar { max-width: var(--chat-col-max); }
.turn-row { padding: 0 16px; }
.chat-message.assistant,
.chat-message.error { padding: 0; max-width: none; }
.chat-message.user { padding: 0; }
.tool-card, .think-card { max-width: none; }

/* U3-A: 最终正文卡片化 —— 浅底 + 左强调条，一眼认得出「这是答案」。 */
.assistant-body {
  padding: 14px 18px;
  margin: 2px 0 4px;
  border: 1px solid hsl(var(--surface-border) / 0.6);
  border-left: 3px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--surface-1) / 0.5);
  font-size: 15px;
  line-height: 1.75;
}
/* 定稿后才点亮强调条：流式到一半的半截内容不该看着像最终答案。 */
.assistant-body.is-final { border-left-color: hsl(var(--primary) / 0.6); }

/* U3-B: 过程降级 —— 更小、更紧凑。卡面颜色保持不动：对比度是无障碍底线
   （D7 断言守着 card/bg），而「退居其后」已由上面的折叠条达成。 */
.tool-card { font-size: 12px; box-shadow: none; }
.tool-card > summary { padding: 5px 10px; font-size: 12px; }
.think-card { box-shadow: none; margin: 3px 0 6px 8px; }
.think-card > summary { padding: 5px 10px; font-size: 12px; }

/* 回合过程折叠条：结束后把连续的思考/工具收成一行。 */
.turn-process { margin: 4px 0 8px; }
.turn-process > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px dashed hsl(var(--surface-border));
  border-radius: 999px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.turn-process > summary::-webkit-details-marker { display: none; }
.turn-process > summary:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--primary) / 0.06);
}
.turn-process > summary .row-icon { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }
.turn-process .process-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-process > .process-body { display: none; }
.turn-process[open] > .process-body {
  display: block;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 1px dashed hsl(var(--surface-border));
}


/* ---- K2 对话流 --------------------------------------------------------- */
/* 时间线里的文本必须可选中 —— 复制是基本功能，不能被渲染层的重排打断。 */
.timeline, .timeline * { user-select: text; }
.timeline button, .timeline summary, .timeline .row-icon, .timeline .think-ico { user-select: none; }

.chat-message.assistant { position: relative; }
.msg-tools { position: absolute; top: -4px; right: 6px; opacity: 0; transition: opacity 120ms ease; }
.chat-message.assistant:hover .msg-tools,
.msg-tools:focus-within { opacity: 1; }
.msg-copy {
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--surface-border));
  background: hsl(var(--surface-1));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.msg-copy:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* 「正在写」与「写完了」肉眼可分：流式中带一枚呼吸光标。 */
.chat-message.assistant.streaming .assistant-body::after {
  content: "▍";
  color: hsl(var(--primary));
  animation: chip-pulse 1s ease-in-out infinite;
}

/* 思考卡折起来时也要看得见有思考 —— 摘要行直接印前 64 字。 */
.think-card summary .think-label { flex: none; }
.think-peek {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: hsl(var(--muted-foreground) / 0.75);
}
.think-card[open] .think-peek { display: none; }

/* 回合结束时还挂着的工具卡（进程被杀/超时）—— 标黄，不装成「完成」。 */
.tool-card.orphan { border-left-color: hsl(var(--warn)); }
.tool-card.orphan > summary .tool-name { color: hsl(var(--warn-text)); }

.chat-message.tool.tone-warn .tool-chip {
  color: hsl(var(--warn-text));
  border-color: hsl(var(--warn) / 0.45);
  background: hsl(var(--warn) / 0.12);
}
.chat-message.tool.tone-compact .tool-chip {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
}

.todo-item .todo-text { overflow-wrap: anywhere; }
.todo-item .row-icon { width: 13px; height: 13px; flex: none; }
.chat-empty .logo-mark svg { width: 22px; height: 22px; }