/* Google Sans 5.3.2, latin, from the @fontsource/google-sans npm package;
   licence in fonts/google-sans-OFL.txt. */
@font-face { font-family: 'Google Sans'; src: url(fonts/google-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url(fonts/google-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url(fonts/google-sans-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Google Sans'; src: url(fonts/google-sans-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* Geist 5.3.0, latin, from the @fontsource/geist npm package; licence in
   fonts/geist-OFL.txt. The sidebar's font. */
@font-face { font-family: 'Geist'; src: url(fonts/geist-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fonts/geist-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fonts/geist-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
/* Fira Sans 5.3.0, latin, from the @fontsource/fira-sans npm package;
   licence in fonts/fira-sans-OFL.txt. */
@font-face { font-family: 'Fira Sans'; src: url(fonts/fira-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url(fonts/fira-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url(fonts/fira-sans-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url(fonts/fira-sans-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* Fira Code 5.3.0, latin, from the @fontsource/fira-code npm package, for
   code, the reply stats and other monospace text; licence in
   fonts/fira-code-OFL.txt. */
@font-face { font-family: 'Fira Code'; src: url(fonts/fira-code-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url(fonts/fira-code-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
/* Urbanist 1.303, the brand's typeface; licence in fonts/urbanist-OFL.txt. */
@font-face { font-family: 'Urbanist'; src: url(fonts/urbanist-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url(fonts/urbanist-500.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url(fonts/urbanist-600.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url(fonts/urbanist-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face {
  font-family: 'IBM Plex Sans';
  src: url(fonts/plex-sans.woff2) format('woff2');
  font-weight: 100 700;
  font-display: swap;
}

/* Design tokens: sage paper, a slightly deeper panel for the sidebar,
   hairline borders, and near-black ink as the accent. */
:root {
  --font-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: var(--font-side, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  --font-mono: 'Fira Code', ui-monospace, Menlo, monospace;
  --font-stats: var(--font-mono);
  /* The brand face, kept for Settings' font choice. */
  --font-display: var(--font-sans);
  /* Type scale: the only place font sizes are set. */
  --fs-3xs: calc(11px * var(--fs-scale, 1)); --fs-2xs: calc(12px * var(--fs-scale, 1)); --fs-xs: calc(13px * var(--fs-scale, 1));
  --fs-sm: calc(14px * var(--fs-scale, 1)); --fs-md: calc(15px * var(--fs-scale, 1)); --fs-lg: calc(17px * var(--fs-scale, 1));
  --fs-xl: calc(22px * var(--fs-scale, 1)); --fs-2xl: calc(27px * var(--fs-scale, 1)); --fs-3xl: calc(42px * var(--fs-scale, 1));
  --btn-h: 38px; --btn-h-sm: 32px;
  --radius: 14px; --radius-sm: 10px;
  --measure: 760px;
  --side-w: 248px; --rail-w: 64px;

  --bg: #f4f6f1; --side: #eef1ea; --surface: #fdfefb; --surface-2: #e9ebe4; --fill-strong: #e2e4dc;
  --border: #dee0d9; --border-strong: #c9ccc2;
  --text: #181912; --text-2: #575951; --text-3: #63655d; --text-4: #a3a59d;
  --ink: #181912; --on-ink: #fdfefb; --on-ink-2: #a3a59d;
  --accent: #181912; --accent-soft: #e9eae4; --accent-text: #181912; --mark: #181912; --on-accent: #ffffff;
  --hover: rgba(24, 25, 18, .05); --hover-ink: rgba(255, 255, 255, .12);
  --ok: #3f6212; --ok-soft: #e3e9d8; --warn: #9a5b00; --warn-soft: #f8eedb; --err: #b4232f; --err-soft: #f8e6e5; --info: #181912; --info-soft: #e9eae4;
  --shadow: none;
  --shadow-lg: 0 16px 48px rgba(24, 25, 18, .16), 0 2px 6px rgba(24, 25, 18, .06);
  --shadow-composer: 0 6px 24px -8px rgba(24, 25, 18, .12), 0 1px 2px rgba(24, 25, 18, .04);
  --scrim: rgba(24, 25, 18, .28);
  --code-bg: #f4f6f1; --code-head: transparent; --code-border: var(--border); --code-text: var(--text); --code-gutter: var(--text-4);
  --log-bg: #f4f6f1; --log-head: #fdfefb;
  --code-kw: #3f6212; --code-fn: #5b21b6; --code-str: #12776e; --code-num: #2c4fd8;
  --code-com: #63655d; --code-type: #9a3412; --code-key: #9a3412;
  --log-dim: #63655d; --log-ok: #3f6212; --log-info: #2c4fd8; --log-key: #9a3412;
  --log-string: #12776e; --log-number: #5b21b6; --log-path: #0e7490;
  /* chart series, in fixed order: the accent first */
  --chart-1: #3f6212; --chart-2: #c2410c; --chart-3: #2c4fd8; --chart-4: #b7791f;
  --chart-5: #be185d; --chart-6: #0e7490; --chart-7: #6d28d9; --chart-8: #8b8d84;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151613; --side: #1b1c18; --surface: #1f201c; --surface-2: #2a2b26; --fill-strong: #33352f;
    --border: #2e302a; --border-strong: #46483f;
    --text: #ecede6; --text-2: #b4b6ac; --text-3: #989a8f; --text-4: #62645c;
    --ink: #ecede6; --on-ink: #181912; --on-ink-2: #6a6c64;
    --accent: #ecede6; --accent-soft: #2a2b26; --accent-text: #ecede6; --mark: #ecede6; --on-accent: #181912;
    --hover: rgba(255, 255, 255, .05); --hover-ink: rgba(24, 25, 18, .1);
    --ok: #a3c77d; --ok-soft: #263219; --warn: #e8b25a; --warn-soft: #2e2512; --err: #f27b74; --err-soft: #3a1b19; --info: #ecede6; --info-soft: #2a2b26;
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-composer: 0 8px 28px -10px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .3);
    --scrim: rgba(0, 0, 0, .56);
    /* Code in dark mode: Catppuccin Mocha (palette MIT, catppuccin.com). */
    --code-bg: #1e1e2e; --code-head: #181825; --code-border: #313244; --code-text: #cdd6f4; --code-gutter: #6c7086;
    --log-bg: #1a1b17; --log-head: #1f201c;
    --code-kw: #cba6f7; --code-fn: #89b4fa; --code-str: #a6e3a1; --code-num: #fab387;
    --code-com: #9399b2; --code-type: #f9e2af; --code-key: #b4befe;
    --log-dim: #989a8f; --log-ok: #a3c77d; --log-info: #8fb0ff; --log-key: #f0a868;
    --log-string: #63cbbd; --log-number: #c6a8f7; --log-path: #67c6dd;
    --chart-1: #8db866; --chart-2: #f08a52; --chart-3: #7f9cff; --chart-4: #e0b252;
    --chart-5: #ec7fae; --chart-6: #4fc0d6; --chart-7: #ae8cf5; --chart-8: #a4a69b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151613; --side: #1b1c18; --surface: #1f201c; --surface-2: #2a2b26; --fill-strong: #33352f;
  --border: #2e302a; --border-strong: #46483f;
  --text: #ecede6; --text-2: #b4b6ac; --text-3: #989a8f; --text-4: #62645c;
  --ink: #ecede6; --on-ink: #181912; --on-ink-2: #6a6c64;
  --accent: #ecede6; --accent-soft: #2a2b26; --accent-text: #ecede6; --mark: #ecede6; --on-accent: #181912;
  --hover: rgba(255, 255, 255, .05); --hover-ink: rgba(24, 25, 18, .1);
  --ok: #a3c77d; --ok-soft: #263219; --warn: #e8b25a; --warn-soft: #2e2512; --err: #f27b74; --err-soft: #3a1b19; --info: #ecede6; --info-soft: #2a2b26;
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-composer: 0 8px 28px -10px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .3);
  --scrim: rgba(0, 0, 0, .56);
  /* Code in dark mode: Catppuccin Mocha (palette MIT, catppuccin.com). */
  --code-bg: #1e1e2e; --code-head: #181825; --code-border: #313244; --code-text: #cdd6f4; --code-gutter: #6c7086;
  --log-bg: #1a1b17; --log-head: #1f201c;
  --code-kw: #cba6f7; --code-fn: #89b4fa; --code-str: #a6e3a1; --code-num: #fab387;
  --code-com: #9399b2; --code-type: #f9e2af; --code-key: #b4befe;
  --log-dim: #989a8f; --log-ok: #a3c77d; --log-info: #8fb0ff; --log-key: #f0a868;
  --log-string: #63cbbd; --log-number: #c6a8f7; --log-path: #67c6dd;
  --chart-1: #8db866; --chart-2: #f08a52; --chart-3: #7f9cff; --chart-4: #e0b252;
  --chart-5: #ec7fae; --chart-6: #4fc0d6; --chart-7: #ae8cf5; --chart-8: #a4a69b;
  color-scheme: dark;
}

/* An accent chosen in Settings: the colour as given on light grounds,
   lightened on dark ones, with its soft fill and text colour derived. The
   reply mark and filled keys keep the colour as given, under white. */
:root[data-accent] {
  --accent: var(--accent-pick); --info: var(--accent-pick); --ok: var(--accent-pick); --mark: var(--accent-pick); --chart-1: var(--accent-pick);
  --accent-soft: color-mix(in oklab, var(--accent-pick) 12%, #fff);
  --accent-text: color-mix(in oklab, var(--accent-pick) 85%, #000); --info-soft: var(--accent-soft); --ok-soft: var(--accent-soft);
}
@media (prefers-color-scheme: dark) {
  :root[data-accent]:not([data-theme="light"]) {
    --accent: color-mix(in oklab, var(--accent-pick) 62%, #fff); --info: var(--accent); --ok: var(--accent); --chart-1: var(--accent);
    --accent-soft: color-mix(in oklab, var(--accent-pick) 24%, #1f201c);
    --accent-text: color-mix(in oklab, var(--accent-pick) 48%, #fff); --info-soft: var(--accent-soft); --ok-soft: var(--accent-soft);
  }
}
:root[data-accent][data-theme="dark"] {
  --accent: color-mix(in oklab, var(--accent-pick) 62%, #fff); --info: var(--accent); --ok: var(--accent); --chart-1: var(--accent);
  --accent-soft: color-mix(in oklab, var(--accent-pick) 24%, #1f201c);
  --accent-text: color-mix(in oklab, var(--accent-pick) 48%, #fff); --info-soft: var(--accent-soft); --ok-soft: var(--accent-soft);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: var(--fs-md)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  caret-color: var(--accent);
}
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* every drawn icon: one stroke, one weight */
.ico, button svg, a svg, .pal svg, .select-pop svg, .step svg, .tray svg, .att-chip svg, .drop-hint svg, .work svg, .msg-mark svg, .agent-icon svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Hover: one tint laid over a control's own background. */
:is(.btn, .icon-btn, .row a, .agent-go, .menu button, .step summary, .msg-actions button, .code-copy, .chip-x, .att-chip, .search-trigger, .collapse-btn, .select-trigger, .seg button, .subnav a, .starter, .settings-link, .title-btn, .sec-add, .work-head, .attach):hover:not(:disabled, [aria-disabled="true"]),
.menu button:focus-visible {
  background-image: linear-gradient(var(--hover-tint, var(--hover)), var(--hover-tint, var(--hover)));
}
.btn.primary, .btn.accent, .new-chat, .seg button.on { --hover-tint: var(--hover-ink); }

/* ---------- keys ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); min-width: 88px; padding: 0 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 500; font-size: var(--fs-sm); white-space: nowrap;
  transition: transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; color: var(--text-2); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.primary svg { color: var(--on-ink); }
.btn.accent { background: var(--mark); border-color: var(--mark); color: var(--on-accent); font-size: var(--fs-md); padding: 0 20px 0 16px; }
.btn.accent svg { color: var(--on-accent); stroke-width: 2; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--err); }
.btn.sm { height: var(--btn-h-sm); min-width: 72px; padding: 0 12px; font-size: var(--fs-xs); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--btn-h-sm); height: var(--btn-h-sm); padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
}
.icon-btn:hover { color: var(--text); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus-visible { outline-offset: 1px; }

.kbd {
  font: 500 var(--fs-3xs)/1 var(--font-mono); min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-2);
}
.keys { display: inline-flex; gap: 4px; }
/* A key hint in a row: a small keycap with room around its letters. */
.hint-keys {
  margin-left: auto; padding: 4px 7px; border-radius: 6px; white-space: nowrap; letter-spacing: .04em;
  font: 500 var(--fs-xs)/1 -apple-system, BlinkMacSystemFont, var(--font-sans); color: var(--text-2);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

/* ---------- shell: sidebar and top bar ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100dvh; transition: grid-template-columns .2s ease; }
:root[data-sidebar="rail"] .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
:root[data-sidebar="hidden"] .app { grid-template-columns: 0 minmax(0, 1fr); }
:root[data-sidebar="hidden"] .side { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.app-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.side {
  font-family: var(--font-ui);
  min-height: 0; padding: 12px 15px 14px; border-right: 1px solid var(--border); background: var(--side);
  display: flex; flex-direction: column; overflow: hidden;
}
/* The brand: the wordmark (its file holds its own clear space), or the
   mark in the icon rail; ink on light grounds, paper on dark. */
.brand { display: flex; align-items: center; gap: 10px; min-height: 54px; margin-bottom: 8px; }
.brand-home { display: flex; align-items: center; min-width: 0; margin-left: -1px; color: var(--text); text-decoration: none; border-radius: 8px; }
.brand-word { display: block; width: 70px; height: auto; }
.brand-mark { display: none; width: 30px; height: 30px; }
.brand-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-on-light { display: none; }
  :root:not([data-theme="light"]) .brand-word.brand-on-dark { display: block; }
}
:root[data-theme="dark"] .brand-on-light { display: none; }
:root[data-theme="dark"] .brand-word.brand-on-dark { display: block; }
.collapse-btn {
  margin-left: auto; margin-right: 4px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; flex: none;
  background: transparent; color: var(--text-2); display: grid; place-items: center;
}
.collapse-btn:hover { color: var(--text); }
.collapse-btn svg { width: 17px; height: 17px; stroke-width: 1.6; }

/* New chat: a filled ink key with its shortcut at the right. */
.new-chat {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 8px 0 13px; margin-bottom: 8px;
  border: 0; border-radius: var(--radius-sm); background-color: var(--ink); color: var(--on-ink);
  font-size: var(--fs-md); font-weight: 500; text-align: left; white-space: nowrap;
}
.new-chat svg { width: 17px; height: 17px; stroke-width: 1.7; }
.new-chat .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.new-chat .hint-keys { color: color-mix(in srgb, var(--on-ink) 82%, transparent); background: color-mix(in srgb, var(--on-ink) 14%, transparent); }
.new-chat:active { transform: translateY(1px); }

/* Search: a filled field that opens the command palette. */
.search-trigger {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 8px 0 14px;
  border: 0; border-radius: var(--radius-sm); background-color: var(--surface-2); color: var(--text-2); font-size: var(--fs-md);
}
.search-trigger svg { width: 15px; height: 15px; stroke-width: 2; }
.search-trigger-text { flex: 1; text-align: left; }

.side-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 22px -15px 0; padding: 0 15px 8px; }
/* Section labels: small capitals, spaced. */
.nav-sec {
  display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin: 0;
  padding: 0 6px 0 10px; font: 600 var(--fs-3xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.nav-sec a.lbl { color: inherit; text-decoration: none; border-radius: 4px; }
.nav-sec a.lbl:hover, .nav-sec a.lbl[aria-current] { color: var(--text); }
.sec-add {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); display: grid; place-items: center;
}
.sec-add:hover { color: var(--text); }
.sec-add svg { width: 11px; height: 11px; stroke-width: 2.6; }

.agent-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.agent-list li { display: flex; align-items: center; border-radius: 8px; position: relative; }
.agent-go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; height: 34px;
  border: 0; background: none; padding: 0 36px 0 11px; text-align: left; border-radius: 8px;
  color: var(--text); font-weight: 400; font-size: var(--fs-sm);
}
.agent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.agent-list li.active .agent-go { background-color: var(--fill-strong); }
.agent-go .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-edit { position: absolute; right: 2px; opacity: 0; width: 28px; height: 28px; }
.agent-list li:hover .agent-edit, .agent-edit:focus-visible { opacity: 1; }
.agent-edit svg { width: 14px; height: 14px; }
.agent-empty { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; padding: 4px 10px 2px; }

.chat-list { margin-top: 14px; }
.group + .group { margin-top: 14px; }
.group .nav-sec { margin-bottom: 4px; }
.row { position: relative; display: flex; align-items: center; border-radius: 8px; margin-bottom: 1px; }
.row a {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 34px;
  color: var(--text-2); text-decoration: none; padding: 0 34px 0 10px;
  font-size: var(--fs-sm); font-weight: 400; border-radius: 8px;
}
.row a:hover { color: var(--text); }
.row a .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.active a { background-color: var(--fill-strong); color: var(--text); }
.row-menu { position: absolute; right: 3px; opacity: 0; width: 28px; height: 28px; }
.row-menu svg { width: 15px; height: 15px; }
.row:hover .row-menu, .row-menu:focus-visible, .row-menu[aria-expanded="true"], .row.active .row-menu { opacity: 1; }
input.rename {
  flex: 1; min-width: 0; width: 100%; height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--surface); outline: none; font-size: var(--fs-sm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.list-empty { color: var(--text-3); font-size: var(--fs-xs); padding: 6px 10px; }

/* The foot: Settings, then who is signed in. */
.side a.side-version {
  display: block; margin-top: auto; padding: 2px 10px 8px; text-decoration: none;
  font: 400 var(--fs-3xs)/1.5 var(--font-mono); color: var(--text-3);
}
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.side-version:not([hidden]) + .side-foot { margin-top: 0; }
.settings-link {
  display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 8px 0 11px; border-radius: 8px;
  color: var(--text); font-size: var(--fs-md); text-decoration: none; white-space: nowrap;
}
.settings-link svg { width: 17px; height: 17px; stroke-width: 1.6; color: var(--text-2); }
.settings-link.active { background-color: var(--fill-strong); }
.user-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 4px 10px 0 12px; }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-text); font: 600 var(--fs-xs)/1 var(--font-ui);
}
.user-avatar svg { display: block; width: 100%; height: 100%; stroke: none; }
.user-who { display: grid; min-width: 0; line-height: 1.25; }
.user-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub { font: 400 var(--fs-3xs)/1.4 var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The icon rail: brand over its toggle, icons centred, chats left to Search. */
:root[data-sidebar="rail"] .side { padding: 14px 10px; }
:root[data-sidebar="rail"] .brand { flex-direction: column; gap: 10px; padding: 4px 0 6px; }
:root[data-sidebar="rail"] .brand-word { display: none !important; }
:root[data-sidebar="rail"] .brand-mark.brand-on-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-sidebar="rail"]:not([data-theme="light"]) .brand-mark.brand-on-light { display: none; }
  :root[data-sidebar="rail"]:not([data-theme="light"]) .brand-mark.brand-on-dark { display: block; }
}
:root[data-sidebar="rail"][data-theme="dark"] .brand-mark.brand-on-light { display: none; }
:root[data-sidebar="rail"][data-theme="dark"] .brand-mark.brand-on-dark { display: block; }
:root[data-sidebar="rail"] .collapse-btn { margin: 0; }
:root[data-sidebar="rail"] :is(.new-chat, .search-trigger, .settings-link) { justify-content: center; padding: 0; }
:root[data-sidebar="rail"] :is(.lbl, .hint-keys, .search-trigger-text, .agent-go .name, .agent-edit, .chat-list, .side-version, .user-who, .sec-add) { display: none; }
:root[data-sidebar="rail"] .side-scroll { margin: 14px -10px 0; padding: 0 10px 8px; }
:root[data-sidebar="rail"] .nav-sec { display: none; }
:root[data-sidebar="rail"] .agent-go { justify-content: center; padding: 0; }
:root[data-sidebar="rail"] .user-card { justify-content: center; padding: 4px 0 0; }

.top {
  position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 24px;
  background: var(--bg); border-bottom: 1px solid var(--border); font-family: var(--font-ui);
}
.top .icon-btn { width: 34px; height: 34px; }
.top .icon-btn svg { width: 18px; height: 18px; stroke-width: 1.6; }
.menu-btn { display: none; margin-left: -8px; }
:root[data-sidebar="hidden"] .menu-btn { display: inline-grid; }
.top-title { flex: 1; min-width: 0; display: flex; align-items: center; }
.top-name { font-size: var(--fs-md); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 34px; padding: 0 8px; margin-left: -8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
}
.title-btn svg { width: 14px; height: 14px; stroke-width: 2; color: var(--text-2); transition: transform .12s ease; }
.title-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.top-title input.rename { max-width: 420px; }
.back-btn { margin-left: -8px; margin-right: 6px; color: var(--text-2); }
.back-btn:hover { color: var(--text); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-md); }
.crumb { color: var(--text-2); text-decoration: none; white-space: nowrap; }
a.crumb:hover { color: var(--text); }
.crumb[aria-current] { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text-3, var(--text-2)); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Menus: a raised sheet of 34px rows. */
.menu {
  position: fixed; z-index: 50; min-width: 220px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); font-family: var(--font-ui);
}
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: var(--btn-h-sm); padding: 0 10px;
  border: 0; background: none; border-radius: 7px; color: var(--text);
  font-size: var(--fs-sm); text-align: left; white-space: nowrap;
}
.menu button svg { width: 15px; height: 15px; color: var(--text-2); }
.menu button:focus-visible { outline: none; }
.menu button.danger, .menu button.danger svg { color: var(--err); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 4px; }

/* Segmented keys: the chosen one filled with ink. */
.seg { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.seg button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
.seg button svg { width: 15px; height: 15px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--ink); color: var(--on-ink); }

/* Switch: a button with a 32 by 18 track. */
.switch { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; flex: none; }
.switch:hover { color: var(--text); }
.switch-track { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: var(--border-strong); transition: background .15s; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch[aria-checked="true"] .switch-track { background: var(--mark); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(14px); }
.switch:disabled { opacity: .6; cursor: progress; }

/* ---------- the chat ---------- */
.chat { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* The model picker: a filled chip, and a select list. */
.select-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 300px; height: 33px; padding: 0 10px 0 12px;
  border: 0; border-radius: 8px; background-color: var(--surface-2);
  color: var(--text-2); font: 500 var(--fs-sm)/normal var(--font-sans); text-align: left;
}
.select-trigger:hover:not(:disabled) { color: var(--text); }
/* In a form the trigger is drawn like the text inputs. */
.select-trigger.boxed {
  height: var(--btn-h); max-width: 360px; width: 100%; padding: 0 10px 0 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 400 var(--fs-sm)/normal var(--font-sans);
}
.select-trigger.boxed[aria-expanded="true"] { border-color: var(--accent); background: var(--surface); }
.plugin-field { display: grid; gap: 6px; margin-top: 10px; }
.plugin-field-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
.plugin-text .plugin-note { color: var(--warn); }
.select-trigger[aria-expanded="true"] { color: var(--text); }
.select-trigger:disabled { color: var(--text-3); cursor: not-allowed; }
.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chev { width: 14px; height: 14px; color: var(--text-2); stroke-width: 2; transition: transform .12s ease; }
.select-trigger[aria-expanded="true"] .select-chev { transform: rotate(180deg); }
.select-pop {
  position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); animation: select-in .12s ease;
}
@keyframes select-in { from { opacity: 0; transform: translateY(4px); } }
.select-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--text-3); flex: none; }
.select-search svg { width: 15px; height: 15px; stroke-width: 2; }
.select-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-sm); padding: 0; }
.select-search input::placeholder { color: var(--text-3); }
.select-list { padding: 4px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 4px; }
.select-group + .select-group { margin-top: 4px; }
.select-heading { padding: 8px 10px 4px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: 500; }
.select-heading:has(.mlogo) { display: flex; align-items: center; gap: 6px; }
.select-heading .mlogo, .select-heading .mlogo > * { width: 12px; height: 12px; }
.select-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 34px 7px 10px;
  border-radius: 7px; cursor: pointer; user-select: none;
}
.select-item.on { background: var(--surface-2); }
.select-item[aria-selected="true"] { font-weight: 500; }
.select-check { position: absolute; right: 10px; display: grid; color: var(--accent-text); }
.select-check svg { width: 15px; height: 15px; stroke-width: 2.2; }
/* Model makers' logos (logos/): one-colour ones are masks in the text
   colour, so they follow the theme; the others keep their own colours,
   which read on both themes. */
.mlogo { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; }
.mlogo > * { width: 16px; height: 16px; display: block; }
.mlogo.mono { background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.select-item .mlogo, .select-trigger .mlogo { color: var(--text); }
.select-trigger .mlogo, .select-trigger .mlogo > * { width: 14px; height: 14px; }
.select-logo:has(> .mlogo.none) { display: none; }
.select-logo { display: inline-grid; flex: none; }
.select-logo:empty { display: none; }
.pal-icon .mlogo { width: 18px; height: 18px; }
.pal-icon .mlogo > * { width: 18px; height: 18px; }
.select-empty { padding: 18px 12px; text-align: center; color: var(--text-2); font-size: var(--fs-xs); }

.scroller { flex: 1; min-height: 0; overflow-y: auto; }
.thread { max-width: calc(var(--measure) + 64px); margin: 0 auto; padding: 37px 32px 40px; }

/* empty state: the question, the composer and the starters sit together in the middle */
.chat.empty { justify-content: center; }
.chat.empty .scroller { flex: none; overflow: visible; }
.chat.empty .thread { padding-bottom: 28px; }
.chat.empty .composer-wrap { padding-bottom: 14vh; }
.welcome { text-align: center; display: grid; justify-items: center; }
.welcome h1 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; margin: 0 0 10px; text-wrap: balance; }
.welcome .lead { color: var(--text-2); font-size: var(--fs-md); margin: 0; max-width: 460px; }
/* Sample prompts between the greeting and the chat box. */
.samples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 4px; max-width: var(--measure); }
.sample {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 8px;
  border: 0; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 400;
  transition: color .12s ease, background-color .12s ease;
}
.sample:hover { background: var(--fill-strong); color: var(--text); }
.sample:active { transform: translateY(1px); }
.sample svg { width: 15px; height: 15px; color: var(--accent); stroke-width: 1.8; }
.starters { max-width: var(--measure); margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.starters:empty { display: none; }
.starter {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text-2); font-size: var(--fs-xs); font-weight: 400;
}
.starter:hover { color: var(--text); }
.starter > svg { width: 14px; height: 14px; margin-left: -2px; color: var(--accent); }

/* messages */
.msg { margin: 0 0 30px; }
.msg.user { position: relative; display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 30px; }
/* A message's keys sit in the gap under it, so they take no room. */
.msg.user .msg-actions { position: absolute; top: 100%; right: 0; margin-top: 0; }
.msg.user .bubble {
  background: var(--surface-2); color: var(--text);
  border-radius: 16px 16px 4px 16px;
  padding: 11px 16px; max-width: 85%;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* A reply: the green mark, then everything else aligned to the text. */
.msg.assistant { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; }
.msg-mark {
  width: 28px; height: 28px; margin-top: -2px; border-radius: 7px; display: grid; place-items: center;
  background: var(--mark); color: var(--on-accent);
}
.msg-mark svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.msg-main { min-width: 0; }
.msg.assistant .body { overflow-wrap: anywhere; }
.msg.assistant .body > * + * { margin-top: 16px; }
.msg-actions { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.msg.user .msg-actions { justify-content: flex-end; }
.msg.assistant .msg-actions { margin-left: -8px; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg.last .msg-actions { opacity: 1; }
.msg-actions button { width: 30px; height: 30px; }
.msg-actions button svg { width: 15px; height: 15px; }
.msg-actions button.done { color: var(--ok); }
/* Plain text on the reply's text edge; no box. It opens the stats popover. */
.msg-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 22px; margin-top: 12px; padding: 0;
  border: 0; background: none; border-radius: 4px; text-align: left;
  font: var(--fs-3xs)/1.4 var(--font-stats); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.msg-stats:hover, .msg-stats[aria-expanded="true"] { color: var(--text-2); }
.stats-pop { min-width: 240px; padding: 6px; }
.stats-pop:focus { outline: none; }
.stats-pop dl { display: grid; grid-template-columns: 1fr auto; column-gap: 28px; margin: 0; }
.stats-pop :is(dt, dd) { display: flex; align-items: center; min-height: 28px; margin: 0; }
.stats-pop dt { padding-left: 10px; font-size: var(--fs-xs); color: var(--text-2); }
.stats-pop dd { justify-content: flex-end; padding-right: 10px; font: var(--fs-2xs)/1.3 var(--font-stats); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-error {
  margin-top: 14px; padding: 12px 12px 12px 16px; border-radius: var(--radius-sm);
  background: var(--err-soft); color: var(--err); font-size: var(--fs-sm); font-weight: 500;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.msg-error.stopped { background: transparent; color: var(--text-3); padding: 0; font-weight: 400; font-size: var(--fs-xs); }
.msg-error.stopped .btn { height: 30px; min-width: 0; padding: 0 12px; font-size: var(--fs-xs); }

.edit-box { width: 100%; max-width: 85%; display: flex; flex-direction: column; gap: 10px; }
.edit-box textarea {
  width: 100%; resize: none; border: 1px solid var(--accent); border-radius: 16px;
  background: var(--surface); padding: 11px 16px; outline: none; min-height: 64px; line-height: 1.6;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.edit-box .acts { display: flex; justify-content: flex-end; gap: 8px; }

/* Before the first part arrives: a turning sparkle and a label with a
   light sweeping across it. */
.waiting { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; font-size: var(--fs-md); }
.waiting-spark { width: 15px; height: 15px; color: var(--accent); fill: currentColor; stroke: none; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.75); opacity: .6; } 100% { transform: rotate(180deg) scale(1); } }
.waiting-text {
  color: transparent; background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 40%, var(--text) 50%, var(--text-3) 60%, var(--text-3) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: sweep 1.8s linear infinite;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .waiting-text { color: var(--text-3); background: none; } }
/* A reply stream that was cut and is being opened again. */
.reconnecting { margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.reconnecting[hidden] { display: none; }

/* ---------- what the agent did: one card per run of steps ---------- */
.work { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.work-head {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 43px; padding: 0 14px 0 15px;
  border: 0; background-color: transparent; color: var(--text-2); font-size: var(--fs-sm); text-align: left;
}
.work-head > svg { margin-left: auto; width: 14px; height: 14px; stroke-width: 2; color: var(--text-2); transition: transform .15s ease; }
.work.folded .work-head > svg { transform: rotate(180deg); }
.work-icon { display: grid; place-items: center; width: 15px; height: 15px; color: var(--accent); }
.work-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.work[data-state="running"] .work-icon svg { fill: currentColor; stroke: none; width: 13px; height: 13px; animation: twinkle 1.6s ease-in-out infinite; }
.work[data-state="error"] .work-icon { color: var(--err); }
.work-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps { list-style: none; margin: 0; padding: 6px 0; border-top: 1px solid var(--border); }
.work.folded .steps { display: none; }
.step summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; min-height: 38px; padding: 0 15px;
  font-size: var(--fs-sm); color: var(--text-2);
}
.step summary::-webkit-details-marker { display: none; }
.step summary:focus-visible { outline-offset: -2px; }
.step .tile {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; position: relative;
  background: var(--surface-2); color: var(--text-2);
}
.step .tile svg { width: 13px; height: 13px; stroke-width: 1.9; }
.step.error .tile { color: var(--err); background: var(--err-soft); }
/* A running step's tile holds a spinning ring in place of its icon. */
.step.running .tile svg { display: none; }
.step.running .tile::after {
  content: ''; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
  border: 1.75px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }
/* Every row's verb column is as wide as the longest built-in verb, whatever
   the font, so the arguments line up; the hidden lines set that width. A
   longer tool name widens its own row, up to a cap. */
.verb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.verb::before, .verb::after { display: block; height: 0; visibility: hidden; }
.verb::before { content: 'Updated agent'; }
.verb::after { content: 'Listed agents'; }
.step-what { min-width: 0; display: flex; }
.step-what .arg { font: var(--fs-xs)/1.4 var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.step-what .peek { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.step-time { font: var(--fs-3xs)/1 var(--font-mono); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.step-body { padding: 4px 15px 12px calc(15px + 24px + 12px); display: grid; gap: 10px; }
.think-text { white-space: pre-wrap; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; max-height: 320px; overflow: auto; }
.step > .media-card, .step > .agent-card { margin: 2px 15px 10px calc(15px + 24px + 12px); }

/* framed log */
.logview { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--log-bg); }
.logview-head {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 3px 0 12px;
  background: var(--log-head); border-bottom: 1px solid var(--border);
  font: 400 var(--fs-3xs)/1 var(--font-mono); color: var(--text-2);
}
.logview-head .code-copy { margin-left: auto; }
.logview pre {
  margin: 0; padding: 10px 12px; max-height: 340px; overflow: auto;
  font: var(--fs-2xs)/1.65 var(--font-mono); white-space: pre; tab-size: 4; color: var(--text);
}
.logview.error .logview-head { color: var(--err); }

/* ---------- markdown ---------- */
.md { line-height: 1.65; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .codeblock, .md .table { margin: 0 0 16px; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.3; letter-spacing: -.015em; margin: 26px 0 10px; font-weight: 600; text-wrap: balance; }
.md h1 { font-size: 22px; } .md h2 { font-size: 19px; } .md h3 { font-size: 16.5px; } .md h4 { font-size: var(--fs-md); }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--text-3); }
.md li > ul, .md li > ol, .md li > p { margin: 4px 0; }
.md a { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 35%, transparent); text-underline-offset: 3px; }
.md a:hover { text-decoration-color: currentColor; }
.md strong { font-weight: 600; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.md blockquote { border-left: 1px solid var(--border-strong); padding: 2px 0 2px 16px; color: var(--text-2); }
.md code { font: .86em/1.5 var(--font-mono); background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }

/* A code block: a header with its file and Copy, numbered lines below. */
.codeblock { border: 1px solid var(--code-border); border-radius: 12px; overflow: hidden; background: var(--code-bg); }
.code-head {
  display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 10px 0 15px;
  border-bottom: 1px solid var(--code-border); background: var(--code-head); font: 400 var(--fs-2xs)/1 var(--font-mono);
}
.code-file { color: var(--code-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.code-lang { color: var(--text-3); white-space: nowrap; }
.code-body { display: flex; padding: 14px 0 16px; overflow-x: auto; }
.code-gutter {
  flex: none; min-width: 44px; padding: 0 16px 0 10px; text-align: right; white-space: pre; user-select: none;
  font: var(--fs-xs)/23px var(--font-mono); color: var(--code-gutter); font-variant-numeric: tabular-nums;
}
.md .code-body pre { margin: 0; padding: 0 16px 0 0; flex: 1; min-width: 0; background: none; border: 0; overflow: visible; }
.md pre code { border: 0; background: none; padding: 0; font: var(--fs-xs)/23px var(--font-mono); display: block; white-space: pre; tab-size: 4; color: var(--code-text); }
.code-copy {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; min-width: 26px; padding: 0 6px;
  border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 400 var(--fs-2xs)/1 var(--font-mono);
}
.code-copy svg { width: 13px; height: 13px; }
.code-copy:hover { color: var(--text); }
.code-copy.done { color: var(--ok); }
.md .table { overflow-x: auto; width: fit-content; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.md table { border-collapse: collapse; font-size: var(--fs-sm); }
.md th, .md td { border-bottom: 1px solid var(--border); padding: 6px 16px 6px 12px; text-align: left; vertical-align: top; }
.md tr:last-child td { border-bottom: 0; }
.md th { font-weight: 600; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.md td { font-variant-numeric: tabular-nums; }
/* Code colours: highlight.js token classes on the code palette, so both themes follow. */
.hljs-keyword, .hljs-literal, .hljs-selector-tag, .hljs-doctag { color: var(--code-kw); }
.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-addition, .hljs-selector-attr { color: var(--code-str); }
.hljs-number, .hljs-symbol, .hljs-variable.constant_ { color: var(--code-num); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--code-com); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-attr, .hljs-attribute, .hljs-name, .hljs-selector-class, .hljs-selector-id, .hljs-property, .hljs-built_in { color: var(--code-fn); }
.hljs-type, .hljs-link, .hljs-deletion { color: var(--code-type); }
.hljs-meta .hljs-string { color: var(--code-str); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; }

.md .task-list-container { padding-left: 4px; }
.md .task-list-item { list-style: none; }
.md .task-list-item-checkbox { margin: 0 8px 0 0; vertical-align: -2px; accent-color: var(--accent); }

/* Math: KaTeX draws it; texmath wraps inline math in eq and block math in section > eqn. */
.md eqn { display: block; overflow-x: auto; overflow-y: hidden; padding: 2px 0; margin: 0 0 14px; }
.md .katex { font-size: 1.1em; }
.md .katex-display { margin: 0; }

.md sup.footnote-ref a { text-decoration: none; font-size: .8em; }
.md .footnotes-sep { margin: 20px 0 12px; }
.md .footnotes { font-size: var(--fs-sm); color: var(--text-2); }
.md .footnote-backref { text-decoration: none; }

/* ---------- composer ---------- */
.composer-wrap { position: relative; padding: 0 32px 18px; flex: none; }
.composer {
  max-width: var(--measure); margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: var(--shadow-composer);
  padding: 20px 16px 15px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.composer textarea {
  display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent;
  max-height: 40vh; min-height: 2.6em; padding: 0 6px; line-height: 1.5; font-size: var(--fs-lg);
}
.composer textarea::placeholder { color: var(--text-3); }
.composer-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; min-height: 37px; }
.composer-agent { display: flex; align-items: center; gap: 7px; font: 500 var(--fs-sm)/1 var(--font-sans); color: var(--text-2); min-width: 0; height: 33px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--surface-2); }
.composer-agent:empty { display: none; }
.composer-agent > span { padding-right: 2px; }
.composer-agent > span:last-child { padding-right: 8px; }
.chip-x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--text-3); padding: 0; }
.chip-x svg { width: 14px; height: 14px; }
.send {
  width: 37px; height: 37px; flex: none; border: 0; border-radius: 9px;
  display: grid; place-items: center; background: var(--ink); color: var(--on-ink);
  transition: background-color .12s ease, color .12s ease;
}
.send:hover:not(:disabled) { background-image: linear-gradient(var(--hover-ink), var(--hover-ink)); }
.send:active:not(:disabled) { transform: translateY(1px); }
.send svg { stroke-width: 2; width: 16px; height: 16px; }
.send:disabled { background: var(--surface-2); color: var(--text-3); cursor: default; }
.send .i-stop { display: none; fill: currentColor; stroke: none; width: 14px; height: 14px; }
.streaming .send .i-send { display: none; }
.streaming .send .i-stop { display: block; }
.jump {
  position: absolute; left: 50%; top: -48px; transform: translateX(-50%);
  width: var(--btn-h-sm); height: var(--btn-h-sm); border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  box-shadow: var(--shadow-composer);
}
.warning { max-width: var(--measure); margin: 10px auto 0; font-size: var(--fs-2xs); color: var(--text-3); text-align: center; }
/* The attach key: a filled square that opens the file picker. */
.composer .attach { width: 33px; height: 33px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background-color: var(--surface-2); color: var(--text-2); }
.composer .attach:hover { color: var(--text); }
.composer .attach svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* ---------- sheets and toast ---------- */
.scrim { display: none; }
/* ---------- agent sheet ---------- */
.sheet {
  border: 0; border-radius: var(--radius); padding: 0;
  background: var(--surface); color: var(--text); width: min(600px, calc(100vw - 32px));
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}
.sheet::backdrop { background: var(--scrim); }
.sheet form { padding: 26px 26px 22px; display: grid; gap: 18px; }
.sheet h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
.field { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text); font-weight: 600; margin: 0; }
.field input, .field textarea, .field select {
  border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: var(--fs-md); font-weight: 400; color: var(--text); outline: none; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { resize: vertical; line-height: 1.55; min-height: 132px; font-size: var(--fs-sm); }
.field select { height: var(--btn-h); padding: 0 12px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field .hint { font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); }
.field-row { display: flex; gap: 14px; }
.field.grow { flex: 1; min-width: 0; }
.temp-field { width: 168px; }
.tools-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.tools-field legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; }
.tool-checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.check {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--text-2); cursor: pointer;
}
.check:has(input:checked) { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: 0 1px 0 var(--key-edge); }
.check b { font-weight: 600; color: var(--text); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
.sheet-actions { display: flex; align-items: center; gap: 10px; padding-top: 18px; margin-top: 2px; border-top: 1px solid var(--border); }
.spacer { flex: 1; }
.text-btn { border: 0; background: none; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; padding: 0 10px; height: var(--btn-h-sm); border-radius: 8px; }
.text-btn.danger { color: var(--err); }
.text-btn:hover { background-image: linear-gradient(var(--hover), var(--hover)); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1); z-index: 80;
  max-width: min(560px, calc(100vw - 32px));
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- attachments ---------- */
.tray { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tray-item {
  display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 240px; height: 46px; padding: 0 4px 0 5px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.tray-item.unseen { max-width: 300px; }
.tray-text .att-size { overflow: hidden; text-overflow: ellipsis; }
.tray-item.sending { position: relative; overflow: hidden; padding-right: 10px; }
.tray-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .tray-bar { transition: none; } }
.tray-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; background: var(--surface); }
.tray-icon { width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); }
.tray-icon svg { width: 18px; height: 18px; }
.tray-text { display: grid; min-width: 0; line-height: 1.3; }
.att-name { font-size: var(--fs-xs); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-size { font: var(--fs-2xs)/1.3 var(--font-mono); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.composer.busy .send { background: var(--surface-2); border-color: var(--border); color: var(--text-3); box-shadow: none; animation: breathe 1.4s ease-in-out infinite; }

.attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 85%; margin-bottom: 8px; }
.att-thumb {
  display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
}
.att-thumb img { display: block; height: 132px; max-width: 240px; width: auto; object-fit: cover; }
.att-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 280px; padding: 0 12px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface-2);
  color: var(--text); text-decoration: none;
}
.att-chip svg { width: 17px; height: 17px; color: var(--text-3); }
.att-chip .att-name { min-width: 0; }

.drop-hint {
  position: absolute; inset: 12px; z-index: 8; pointer-events: none;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent); backdrop-filter: blur(2px);
  color: var(--accent-text); font-weight: 600; font-size: var(--fs-md);
}
.drop-hint svg { width: 32px; height: 32px; }
.drop-hint.off { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text-2); }



/* ---------- pictures in replies: a card with a title and the file ---------- */
.media-card { display: block; padding: 16px 20px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.media-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.media-title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-md); line-height: 1.4; color: var(--text); }
.media-file { font: var(--fs-3xs)/1.4 var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.media-card img { display: block; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; border-radius: 6px; }
.media-card a { display: block; }
.step > .media-card img { max-height: 360px; }
/* An SVG file may have no size of its own; give it one so it shows. */
.media-card img[src$=".svg"] { width: min(100%, 420px); }

/* ---------- the Agents page ---------- */
.agents-page .page-inner { max-width: 1020px; padding: 50px 32px 64px; }
.page-head { display: flex; align-items: center; gap: 24px; margin-bottom: 34px; }
.page-head > div { flex: 1; min-width: 0; }
.page-sub { margin: 0; color: var(--text-2); font-size: var(--fs-md); }
.agent-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }
.agent-tile {
  position: relative; display: flex; flex-direction: column; min-height: 261px; padding: 20px 21px 21px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: border-color .15s ease;
}
.agent-tile:not(.add):hover { border-color: var(--border-strong); }
.agent-tile-top { display: flex; align-items: flex-start; gap: 8px; }
.agent-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); }
.agent-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.agent-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: var(--fs-3xs)/1 var(--font-mono); color: var(--text-3); padding-top: 14px; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.agent-state.running { color: var(--accent-text); }
.agent-state.running .state-dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } }
.agent-card-edit { position: absolute; top: 14px; right: 14px; opacity: 0; background: var(--surface); }
.agent-tile:hover .agent-card-edit, .agent-card-edit:focus-visible { opacity: 1; }
.agent-tile:hover .agent-state, .agent-tile:focus-within .agent-state { visibility: hidden; }
.agent-card-edit svg { width: 15px; height: 15px; }
/* The name is the card's key: its box covers the whole card. */
.agent-card-go { margin: 22px 0 0; padding: 0; border: 0; background: none; text-align: left; color: var(--text); font: 600 var(--fs-lg)/1.3 var(--font-ui); letter-spacing: -.01em; }
.agent-card-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.agent-card-go:focus-visible { outline: none; }
.agent-tile:has(.agent-card-go:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-card-edit { z-index: 1; }
.agent-desc {
  margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.agent-tags { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.agent-tags li { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font: var(--fs-3xs)/1 var(--font-mono); }
.agent-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font: var(--fs-3xs)/1 var(--font-mono); color: var(--text-3); }
.agent-tile.add { padding: 0; border: 1.5px dashed var(--border-strong); background: transparent; }
.agent-add {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 24px;
  border: 0; border-radius: 13px; background: none; color: var(--text-2); text-align: center;
}
.agent-add:hover { background-color: color-mix(in srgb, var(--surface) 60%, transparent); }
.add-box { width: 41px; height: 41px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); }
.add-box svg { width: 15px; height: 15px; stroke-width: 1.8; }
.add-title { margin-top: 18px; font-size: var(--fs-lg); font-weight: 500; color: var(--text-2); }
.add-line { margin-top: 8px; max-width: 230px; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-3); }

.md figure { margin: 0 0 14px; }
.chart { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px 8px; background: var(--surface); }
.chart figcaption { font-weight: 600; font-size: var(--fs-md); line-height: 1.4; margin: 0 0 10px; text-wrap: balance; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 4px; padding: 0; font-size: var(--fs-xs); color: var(--text-2); }
.md .chart-legend li { margin: 0; display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-svg .tick { fill: var(--text-3); font: 11.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.chart-svg .axis-label { fill: var(--text-2); font: 500 12.5px var(--font-ui); }
.chart-svg .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .bar { fill: var(--c); }
.chart-svg .dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.chart-svg .bar:hover, .chart-svg .dot:hover { filter: brightness(1.12); }
.s1 { --c: var(--chart-1); } .s2 { --c: var(--chart-2); } .s3 { --c: var(--chart-3); } .s4 { --c: var(--chart-4); }
.s5 { --c: var(--chart-5); } .s6 { --c: var(--chart-6); } .s7 { --c: var(--chart-7); } .s8 { --c: var(--chart-8); }
.chart-data { margin: 2px -4px 4px; }
.chart-data summary {
  display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 7px; cursor: pointer;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-2); list-style: none;
}
.chart-data summary::-webkit-details-marker { display: none; }
.chart-data summary:hover { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--text); }
.chart-data .table { margin: 6px 4px 8px; max-height: 280px; overflow: auto; }
.chart-error { margin: -6px 0 14px; font-size: var(--fs-xs); color: var(--err); }
.drawing { display: block; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
/* An SVG without its own size has none in an <img>: give it the width. */
.md .drawing img { width: 100%; max-width: 560px; max-height: 480px; margin: 0 auto; border: 0; border-radius: 4px; background: none; }
.webpage { display: block; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.webpage-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
.webpage-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webpage-act { padding: 3px 8px; border: 0; border-radius: 6px; background: none; color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: none; }
.webpage-act:hover { background: var(--hover); }
.webpage-box { display: block; height: 420px; }
.webpage.tall .webpage-box { height: 80vh; }
.webpage iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- settings: a page ---------- */
.page { flex: 1; min-height: 0; overflow-y: auto; }
.page-inner { max-width: 920px; margin: 0 auto; padding: 32px 32px 64px; }
.page h1 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; margin: 0 0 8px; }
.subnav { display: flex; gap: 4px; margin: 14px 0 24px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px var(--border); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 14px;
  color: var(--text-2); font-weight: 500; font-size: var(--fs-md); text-decoration: none;
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.subnav a svg { width: 16px; height: 16px; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.settings-body { display: grid; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px 4px; }
.card-head .btn { margin-left: auto; }
.card-sub { margin: 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 62ch; }
.set-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.set-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--border); }
.set-row:first-child { border-top: 0; }
.set-label { font-weight: 600; font-size: var(--fs-sm); }
.set-label small { display: block; font-weight: 400; color: var(--text-2); font-size: var(--fs-xs); margin-top: 2px; }
.set-control { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatch {
  position: relative; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0;
  background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); display: grid; place-items: center; color: #fff;
}
.swatch svg { width: 15px; height: 15px; stroke-width: 2.6; opacity: 0; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch[aria-checked="true"] svg { opacity: 1; }
.swatch:hover { transform: translateY(-1px); }
.custom-color { display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h-sm); padding: 0 10px 0 4px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; box-shadow: inset 0 1px 0 var(--key-hi), 0 1px 0 var(--key-edge); }
.custom-color.on { border-color: var(--ink); color: var(--text); }
.custom-color input { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.custom-color input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color input::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .12); border-radius: 6px; }

.plugin-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plugin { display: flex; gap: 16px; align-items: flex-start; padding: 16px 22px; border-top: 1px solid var(--border); }
.plugin:first-child { border-top: 0; }
.plugin-text, .agent-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.plugin-text b, .agent-text b { font-weight: 600; font-size: var(--fs-sm); }
.plugin-text p, .agent-text p { margin: 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.5; }
.agent-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plugin.off .plugin-text b { color: var(--text-2); }
.plugin-adds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plugin-adds li {
  font-size: var(--fs-2xs); font-weight: 500; color: var(--text-2); line-height: 1;
  padding: 5px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.empty-note { padding: 18px 22px 22px; color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.about-list { margin: 8px 0 0; padding: 0; }
.about-list > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 24px; padding: 14px 22px; border-top: 1px solid var(--border); }
.about-list > div:first-child { border-top: 0; }
.about-list dt { font-weight: 600; font-size: var(--fs-sm); }
.about-list dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.about-list code { font: var(--fs-xs)/1.5 var(--font-mono); color: var(--text); }
.keys-list { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- command palette ---------- */
.pal {
  position: fixed; inset: 12vh auto auto 50%; transform: translateX(-50%); margin: 0; padding: 0; border: 0;
  width: min(640px, calc(100vw - 32px)); max-height: none; display: none; flex-direction: column;
  background: var(--surface); color: var(--text); border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); overflow: hidden;
}
.pal[open] { display: flex; }
.pal::backdrop { background: var(--scrim); }
.pal-search { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.pal-search-icon { width: 16px; height: 16px; flex: none; margin: 0 8px; color: var(--text-3); stroke-width: 2; }
.pal-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-md); padding: 0; }
.pal-search input::placeholder { color: var(--text-3); }
.pal-list { max-height: min(400px, 56vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; scroll-padding: 8px; }
.pal-group + .pal-group { margin-top: 8px; }
.pal-heading { padding: 8px 8px 4px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: 500; }
.pal-item {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); cursor: pointer; user-select: none;
}
.pal-item.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.pal-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--text-2); }
.pal-icon svg { width: 16px; height: 16px; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pal-label mark { background: none; color: var(--accent-text); }
.pal-detail { margin-left: 8px; color: var(--text-3); font-weight: 400; font-size: var(--fs-xs); }
.pal-meta { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
.pal-meta .keys-list { gap: 4px; }
.pal-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; font-size: var(--fs-sm); }
.pal-empty span { color: var(--text-2); font-size: var(--fs-xs); }
.pal-foot { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-2xs); }
.pal-hint { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pal-hint .kbd:last-of-type { margin-right: 4px; }
.pal-foot-end { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .app, :root[data-sidebar] .app { grid-template-columns: minmax(0, 1fr); }
  .side, :root[data-sidebar] .side {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); height: 100dvh; z-index: 40; padding: 12px 15px 14px; border: 0;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: var(--shadow-lg);
  }
  .app.nav-open .side { transform: none; visibility: visible; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 30; }
  /* In the drawer the sidebar is always whole. */
  :root[data-sidebar="rail"] .brand { flex-direction: row; gap: 10px; padding: 0; }
  :root[data-sidebar="rail"] .brand-mark { display: none !important; }
  :root[data-sidebar="rail"] .brand-word.brand-on-light { display: block !important; }
  :root[data-sidebar="rail"][data-theme="dark"] .brand-word.brand-on-light { display: none !important; }
  :root[data-sidebar="rail"][data-theme="dark"] .brand-word.brand-on-dark { display: block !important; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root[data-sidebar="rail"]:not([data-theme="light"]) .brand-word.brand-on-light { display: none !important; }
  :root[data-sidebar="rail"]:not([data-theme="light"]) .brand-word.brand-on-dark { display: block !important; }
}
@media (max-width: 760px) {
  :root[data-sidebar="rail"] :is(.lbl, .hint-keys, .search-trigger-text, .agent-go .name, .chat-list, .user-who, .sec-add) { display: revert; }
  :root[data-sidebar="rail"] .nav-sec { display: flex; }
  :root[data-sidebar="rail"] .new-chat { justify-content: flex-start; padding: 0 12px 0 13px; }
  :root[data-sidebar="rail"] .search-trigger { justify-content: flex-start; padding: 0 14px; }
  :root[data-sidebar="rail"] .settings-link { justify-content: flex-start; padding: 0 12px 0 11px; }
  :root[data-sidebar="rail"] .agent-go { justify-content: flex-start; padding: 0 36px 0 11px; }
  :root[data-sidebar="rail"] .user-card { justify-content: flex-start; padding: 4px 10px 0 12px; }
  :root[data-sidebar="rail"] .side-scroll { margin: 22px -15px 0; padding: 0 15px 8px; }
  /* The key hints mean nothing on a touch screen. */
  .side .hint-keys { display: none !important; }
  .collapse-btn { display: none; }
  .menu-btn, :root[data-sidebar] .menu-btn { display: inline-grid; }
  .top { padding: 0 12px 0 16px; gap: 6px; }
  .top-actions { gap: 6px; }
  .select-trigger { max-width: 52vw; }
  .thread { padding: 22px 16px 32px; }
  .composer-wrap { padding: 0 12px 12px; }
  .composer { padding: 16px 12px 12px; }
  .msg.assistant { column-gap: 10px; grid-template-columns: 24px minmax(0, 1fr); }
  .msg-mark { width: 24px; height: 24px; border-radius: 6px; margin-top: 0; }
  .msg-mark svg { width: 15px; height: 15px; }
  .step summary { padding: 0 12px; column-gap: 10px; }
  .step-body { padding: 4px 12px 12px; }
  .step > :is(.media-card, .agent-card) { margin: 2px 12px 10px; }
  .msg.user .bubble, .edit-box, .attachments { max-width: 92%; }
  .att-thumb img { height: 104px; max-width: 180px; }
  .tray-item { max-width: 100%; }
  .welcome h1 { font-size: var(--fs-2xl); }
  .msg-actions { opacity: 1; }
  .tool-checks { grid-template-columns: minmax(0, 1fr); }
  .field-row { flex-wrap: wrap; }
  .temp-field { width: 100%; }
  .page-inner, .agents-page .page-inner { padding: 24px 16px 64px; }
  .page h1 { font-size: var(--fs-2xl); }
  .page-head { flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .agent-tile { min-height: 0; }
  /* Settings sections wrap onto a second line instead of scrolling out of sight. */
  .subnav { flex-wrap: wrap; overflow-x: visible; box-shadow: none; border-bottom: 1px solid var(--border); }
  .set-row, .about-list > div { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .card-head { padding: 16px 16px 4px; flex-wrap: wrap; }
  .plugin { padding: 14px 16px; }
  .pal { top: 16px; }
  .pal-list { max-height: calc(100dvh - 160px); }
  .pal-meta { display: none; }
  .pal-foot .pal-hint:not(.pal-foot-end) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- MCP servers ---------- */
.mcp-where { font: var(--fs-2xs)/1.5 var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.mcp-actions { display: flex; gap: 8px; margin-top: 6px; }
.mcp-check { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-check svg { width: 15px; height: 15px; flex: none; margin-top: 2px; stroke-width: 2.4; }
.mcp-check.ok svg { color: var(--ok); }
.mcp-check.bad { color: var(--err); }
.mcp-kind { display: grid; gap: 18px; }
.mcp-kind[hidden] { display: none; }
.mcp-result { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); max-height: 180px; overflow: auto; }
.field-note { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.field-note a { color: var(--accent-text); }
#agentMcp .field-note { grid-column: 1 / -1; }

/* An agent a chat saved, under the step that saved it. */
.agent-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; max-width: 520px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.agent-card .btn { flex: none; }
@media (max-width: 560px) { .agent-card { margin-left: 0; flex-wrap: wrap; } }
.mcp-kind textarea { min-height: 64px; font: var(--fs-xs)/1.6 var(--font-mono); }