  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* ── Light mode (default) — warm gold-tinted palette from Hermes brand ── */
  :root {
    --bg:#FEFCF7;--sidebar:#FAF7F0;--border:#E0D8C8;--border2:rgba(0,0,0,0.15);
    --text:#1A1610;--muted:#5C5344;--accent:#B8860B;--blue:#0288A8;--gold:#8B6508;--code-bg:#F5F0E5;
    --surface:#F3EEE3;--topbar-bg:rgba(250,247,240,.98);--main-bg:rgba(254,252,247,0.5);
    --focus-ring:rgba(184,134,11,.35);--focus-glow:rgba(184,134,11,.1);
    --input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.05);
    --strong:#0F0D08;--em:#5C5344;--code-text:#8b4513;--code-inline-bg:rgba(0,0,0,.06);--pre-text:#1A1610;
    --accent-hover:#996F08;--accent-bg:rgba(184,134,11,0.08);--accent-bg-strong:rgba(184,134,11,0.15);--accent-text:#8B6508;
    --error:#C62828;--success:#3D8B40;--warning:#E68A00;--info:#0288A8;
    --radius-sm:4px;--radius-md:8px;--radius-card:8px;--radius-lg:12px;--radius-pill:999px;
    --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
    --font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;
    --message-body-font-size:14px;--message-body-line-height:1.75;--message-code-font-size:12.5px;--message-pre-code-font-size:13px;--message-table-font-size:12px;
    --file-tree-toggle-width:10px;
    --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
    --surface-subtle:rgba(0,0,0,.025);--surface-subtle-hover:rgba(0,0,0,.045);
    --border-subtle:rgba(0,0,0,.08);--border-muted:rgba(0,0,0,.12);
    font-family:var(--font-ui);font-size:14px;line-height:1.6;
  }
  /* ── Font size modifiers ── */
  /* ── Font size preference: scale key UI text elements ── */
  /* Default is 14px (no attribute needed). Small=12px, Large=16px, Extra Large=18px. */
  /* We override the px values directly on key containers since most of the     */
  /* stylesheet uses hardcoded px — changing :root font-size alone only affects */
  /* the small number of em/rem values.                                         */
  :root[data-font-size="small"]{--message-body-font-size:12px;--message-code-font-size:10.5px;--message-pre-code-font-size:11px;--message-table-font-size:11px;font-size:12px;}
  :root[data-font-size="large"]{--message-body-font-size:16px;--message-code-font-size:14.5px;--message-pre-code-font-size:15px;--message-table-font-size:14px;font-size:16px;}
  :root[data-font-size="xlarge"]{--message-body-font-size:18px;--message-code-font-size:16px;--message-pre-code-font-size:16.5px;--message-table-font-size:16px;font-size:18px;}

  /* Sidebar session list */
  :root[data-font-size="small"] .session-item { font-size: 11px; }
  :root[data-font-size="large"] .session-item { font-size: 15px; }
  :root[data-font-size="xlarge"] .session-item { font-size: 17px; }
  :root[data-font-size="small"] .session-meta { font-size: 10px; }
  :root[data-font-size="large"] .session-meta { font-size: 13px; }
  :root[data-font-size="xlarge"] .session-meta { font-size: 15px; }
  :root[data-font-size="small"] .session-title-input { font-size: 11px; }
  :root[data-font-size="large"] .session-title-input { font-size: 15px; }
  :root[data-font-size="xlarge"] .session-title-input { font-size: 17px; }

  /* Chat message body */
  :root[data-font-size="small"] .msg-body { font-size: 12px; }
  :root[data-font-size="large"] .msg-body { font-size: 16px; }
  :root[data-font-size="xlarge"] .msg-body { font-size: 18px; }
  :root[data-font-size="small"] .msg-body h1 { font-size: 21px; }
  :root[data-font-size="large"] .msg-body h1 { font-size: 27px; }
  :root[data-font-size="xlarge"] .msg-body h1 { font-size: 30px; }
  :root[data-font-size="small"] .msg-body h2 { font-size: 17px; }
  :root[data-font-size="large"] .msg-body h2 { font-size: 23px; }
  :root[data-font-size="xlarge"] .msg-body h2 { font-size: 26px; }
  :root[data-font-size="small"] .msg-body h3 { font-size: 15px; }
  :root[data-font-size="large"] .msg-body h3 { font-size: 20px; }
  :root[data-font-size="xlarge"] .msg-body h3 { font-size: 22px; }
  :root[data-font-size="small"] .msg-body h4 { font-size: 13px; }
  :root[data-font-size="large"] .msg-body h4 { font-size: 17px; }
  :root[data-font-size="xlarge"] .msg-body h4 { font-size: 19px; }
  :root[data-font-size="small"] .msg-body h5 { font-size: 12px; }
  :root[data-font-size="large"] .msg-body h5 { font-size: 16px; }
  :root[data-font-size="xlarge"] .msg-body h5 { font-size: 18px; }
  :root[data-font-size="small"] .msg-body h6 { font-size: 11px; }
  :root[data-font-size="large"] .msg-body h6 { font-size: 15px; }
  :root[data-font-size="xlarge"] .msg-body h6 { font-size: 17px; }
  :root[data-font-size="small"] .msg-body code { font-size: 10.5px; }
  :root[data-font-size="large"] .msg-body code { font-size: 14.5px; }
  :root[data-font-size="xlarge"] .msg-body code { font-size: 16px; }
  :root[data-font-size="small"] .msg-body pre code { font-size: 11px; }
  :root[data-font-size="large"] .msg-body pre code { font-size: 15px; }
  :root[data-font-size="xlarge"] .msg-body pre code { font-size: 16.5px; }
  :root[data-font-size="small"] .msg-body table { font-size: 11px; }
  :root[data-font-size="large"] .msg-body table { font-size: 14px; }
  :root[data-font-size="xlarge"] .msg-body table { font-size: 16px; }

  /* Composer textarea (default is 16px in stylesheet) */
  :root[data-font-size="small"] #msg { font-size: 14px; }
  :root[data-font-size="large"] #msg { font-size: 18px; }
  :root[data-font-size="xlarge"] #msg { font-size: 20px; }

  /* Workspace file tree */
  :root[data-font-size="small"] .file-item { font-size: 11px; }
  :root[data-font-size="large"] .file-item { font-size: 14px; }
  :root[data-font-size="xlarge"] .file-item { font-size: 16px; }

  /* App-level base — keeps em/rem values scaling correctly */
  :root[data-font-size="small"] { font-size: 12px; }
  :root[data-font-size="large"] { font-size: 16px; }
  :root[data-font-size="xlarge"] { font-size: 18px; }
  /* ── Dark mode — navy-black + gold accent matching Hermes terminal ── */
  :root.dark {
    --bg:#0D0D1A;--sidebar:#141425;--border:#2A2A45;--border2:rgba(255,255,255,0.14);
    --text:#FFF8DC;--muted:#C0C0C0;--accent:#FFD700;--blue:#4DD0E1;--gold:#FFBF00;--code-bg:#1A1A2E;
    --surface:#1A1A2E;--topbar-bg:rgba(20,20,37,.98);--main-bg:rgba(13,13,26,0.5);
    --focus-ring:rgba(255,215,0,.35);--focus-glow:rgba(255,215,0,.08);
    --input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
    --strong:#fff;--em:#C0C0C0;--code-text:#f0c27f;--code-inline-bg:rgba(0,0,0,.35);--pre-text:#e2e8f0;
    --accent-hover:#FFBF00;--accent-bg:rgba(255,215,0,0.08);--accent-bg-strong:rgba(255,215,0,0.15);--accent-text:#FFD700;
    --error:#EF5350;--success:#4CAF50;--warning:#FFA726;--info:#4DD0E1;
    --surface-subtle:rgba(255,255,255,.025);--surface-subtle-hover:rgba(255,255,255,.045);
    --border-subtle:rgba(255,255,255,.075);--border-muted:rgba(255,255,255,.12);
  }
  /* ── Skin: Default (gold — matches base) ── */
  /* No overrides needed — :root and .dark already use gold accent */
  /* ── Skin: Ares (red) ── */
  :root[data-skin="ares"]{--accent:#C0392B;--accent-hover:#A93226;--accent-bg:rgba(192,57,43,0.08);--accent-bg-strong:rgba(192,57,43,0.15);--accent-text:#922B21;}
  :root.dark[data-skin="ares"]{--accent:#FF4444;--accent-hover:#CC3333;--accent-bg:rgba(255,68,68,0.08);--accent-bg-strong:rgba(255,68,68,0.15);--accent-text:#FF4444;}
  /* ── Skin: Mono (gray) ── */
  :root[data-skin="mono"]{--accent:#666666;--accent-hover:#555555;--accent-bg:rgba(102,102,102,0.08);--accent-bg-strong:rgba(102,102,102,0.15);--accent-text:#555555;}
  :root.dark[data-skin="mono"]{--accent:#CCCCCC;--accent-hover:#999999;--accent-bg:rgba(204,204,204,0.08);--accent-bg-strong:rgba(204,204,204,0.15);--accent-text:#CCCCCC;}
  /* ── Skin: Graphite (neutral workbench) ──
     Full palette rewrite with restrained graphite surfaces, soft contrast,
     and neutral action chrome. Uses native system fonts so it stays local,
     fast, and license-safe while feeling closer to modern code workbenches. */
  :root[data-skin="graphite"]{
    color-scheme:light;
    --bg:#FFFFFF;--sidebar:#F3F3F3;--surface:#FFFFFF;--surface-subtle:#F7F7F7;--surface-subtle-hover:#EFEFEF;
    --border:#E2E2E2;--border2:#CFCFCF;--border-subtle:#E8E8E8;--border-muted:#D6D6D6;
    --text:#242424;--strong:#111111;--muted:#707070;--em:#4F4F4F;
    --accent:#303030;--accent-hover:#171717;--accent-bg:rgba(0,0,0,0.07);--accent-bg-strong:rgba(0,0,0,0.13);--accent-text:#303030;
    --blue:#5F5F5F;--gold:#303030;--focus-ring:rgba(0,0,0,0.18);--focus-glow:rgba(0,0,0,0.06);
    --input-bg:#FFFFFF;--hover-bg:rgba(0,0,0,0.05);--code-bg:#F1F1F1;--code-inline-bg:rgba(0,0,0,0.06);--code-text:#242424;--pre-text:#242424;
    --topbar-bg:rgba(255,255,255,0.94);--main-bg:#FFFFFF;
    --error:#D44D4D;--success:#0F8F70;--warning:#B87916;--info:#55564F;
    --user-bubble-bg:#EFEFEF;--user-bubble-border:#DEDEDE;--user-bubble-text:#242424;--user-bubble-placeholder:#707070;
    --user-selection-bg:rgba(0,0,0,0.16);--user-selection-text:#111111;
    --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    font-family:var(--font-ui);
  }
  :root.dark[data-skin="graphite"]{
    color-scheme:dark;
    --bg:#151614;--sidebar:#242624;--surface:#1B1C1A;--surface-subtle:#20211F;--surface-subtle-hover:#292B28;
    --border:#343631;--border2:#4B4D47;--border-subtle:#2A2C28;--border-muted:#3D3F3A;
    --text:#ECEBE4;--strong:#FAF9F3;--muted:#A7A79D;--em:#D7D6CE;
    --accent:#D7D6CE;--accent-hover:#F4F3EC;--accent-bg:rgba(255,255,255,0.08);--accent-bg-strong:rgba(255,255,255,0.14);--accent-text:#D7D6CE;
    --blue:#C9C8C0;--gold:#D7D6CE;--focus-ring:rgba(244,243,236,0.22);--focus-glow:rgba(244,243,236,0.08);
    --input-bg:#1E1F1D;--hover-bg:rgba(255,255,255,0.06);--code-bg:#111210;--code-inline-bg:rgba(255,255,255,0.08);--code-text:#F1F0EA;--pre-text:#ECEBE4;
    --topbar-bg:rgba(21,22,20,0.92);--main-bg:#151614;
    --error:#FF6B6B;--success:#10A37F;--warning:#E6B15C;--info:#C9C8C0;
    --user-bubble-bg:#2E302D;--user-bubble-border:#454741;--user-bubble-text:#F4F3EC;--user-bubble-placeholder:#A7A79D;
    --user-selection-bg:rgba(255,255,255,0.18);--user-selection-text:#FAF9F3;
  }
  :root[data-skin="graphite"],
  :root[data-skin="graphite"] body{font-family:var(--font-ui)!important;font-weight:430;letter-spacing:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
  :root[data-skin="graphite"] .app-titlebar,
  :root[data-skin="graphite"] .rail,
  :root[data-skin="graphite"] .sidebar,
  :root[data-skin="graphite"] .rightpanel,
  :root[data-skin="graphite"] .topbar,
  :root[data-skin="graphite"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;}
  :root[data-skin="graphite"] .main,
  :root[data-skin="graphite"] .chat,
  :root[data-skin="graphite"] .panel-view{background:var(--bg)!important;}
  :root[data-skin="graphite"] .app-titlebar-title,
  :root[data-skin="graphite"] .topbar-title,
  :root[data-skin="graphite"] .settings-section-title{letter-spacing:0!important;font-weight:600;}
  :root[data-skin="graphite"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;}
  :root[data-skin="graphite"] .session-meta{font-size:10.5px;}
  :root[data-skin="graphite"][data-font-size="small"] .session-item{font-size:12px;}
  :root[data-skin="graphite"][data-font-size="small"] .session-meta{font-size:10px;}
  :root[data-skin="graphite"][data-font-size="large"] .session-item{font-size:13.5px;}
  :root[data-skin="graphite"][data-font-size="large"] .session-meta{font-size:12px;}
  :root[data-skin="graphite"][data-font-size="xlarge"] .session-item{font-size:14.5px;}
  :root[data-skin="graphite"][data-font-size="xlarge"] .session-meta{font-size:13px;}
  :root[data-skin="graphite"] .session-item.active{position:relative;padding:10px 12px 10px 18px;background:var(--surface-subtle-hover)!important;border:1px solid var(--border)!important;color:var(--text)!important;gap:8px;}
  :root[data-skin="graphite"] .session-item.active.streaming,
  :root[data-skin="graphite"] .session-item.active.unread,
  :root[data-skin="graphite"] .session-item.active.needs-attention,
  :root[data-skin="graphite"] .session-item.active:focus-within,
  :root[data-skin="graphite"] .session-item.active.menu-open{padding-right:40px;}
  @media (hover:hover){:root[data-skin="graphite"] .session-item.active:hover{padding-right:40px;}}
  :root[data-skin="graphite"] .session-item.active::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;border-radius:999px;background:color-mix(in srgb,var(--accent) 70%,var(--border2));opacity:.55;}
  :root[data-skin="graphite"] .session-item.active .session-title-row{gap:6px;}
  :root[data-skin="graphite"] .session-item.active .session-text{min-width:0;width:100%;}
  :root[data-skin="graphite"] .session-item.active .session-meta{margin-top:2px;}
  :root[data-skin="graphite"] .session-item.active .session-time{padding-left:4px;}
  :root[data-skin="graphite"] .session-item.active:hover .session-time:not(.is-hidden),
  :root[data-skin="graphite"] .session-item.active:focus-within .session-time:not(.is-hidden),
  :root[data-skin="graphite"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;}
  :root[data-skin="graphite"] .session-item.active .session-lineage-count{height:17px;padding:0 6px;margin-left:0;background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--border);}
  :root[data-skin="graphite"] .session-item.active .session-title,
  :root[data-skin="graphite"] .session-item.active .session-meta,
  :root[data-skin="graphite"] .session-item.active .session-preview,
  :root[data-skin="graphite"] .session-item.active *{color:inherit!important;}
  :root[data-skin="graphite"] .composer-box{background:var(--surface)!important;border-color:var(--border2)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,0.07);}
  :root.dark[data-skin="graphite"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);}
  :root[data-skin="graphite"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;}
  :root[data-skin="graphite"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;}
  :root[data-skin="graphite"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;}
  :root[data-skin="graphite"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;}
  :root[data-skin="graphite"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;}
  :root[data-skin="graphite"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;}
  :root[data-skin="graphite"] .msg-body code{font-size:.92em;}
  :root[data-skin="graphite"] .msg-body code,
  :root[data-skin="graphite"] .msg-body pre,
  :root[data-skin="graphite"] .msg-body table,
  :root[data-skin="graphite"] .preview-code,
  :root[data-skin="graphite"] .preview-md code,
  :root[data-skin="graphite"] .tool-card-name,
  :root[data-skin="graphite"] .tool-arg-key,
  :root[data-skin="graphite"] .tool-arg-val,
  :root[data-skin="graphite"] .tool-card-result pre,
  :root[data-skin="graphite"] .app-titlebar-sub{font-family:var(--font-mono)!important;}
  :root[data-skin="graphite"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;}
  :root[data-skin="graphite"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;}
  :root[data-skin="graphite"] .msg-row[data-role="user"] .msg-body{background:var(--user-bubble-bg)!important;border-color:var(--user-bubble-border)!important;border-radius:12px!important;color:var(--user-bubble-text)!important;}
  :root[data-skin="graphite"] .tool-card{background:var(--surface-subtle)!important;border-color:var(--border-muted)!important;border-left-color:var(--border2)!important;border-radius:8px!important;}
  :root[data-skin="graphite"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;}
  :root[data-skin="graphite"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;}
  :root[data-skin="graphite"] .tool-arg-key,
  :root[data-skin="graphite"] .tool-card-more,
  :root[data-skin="graphite"] .msg-body a{color:var(--accent-text)!important;}
  :root[data-skin="graphite"] .app-titlebar-icon rect,
  :root[data-skin="graphite"] .app-titlebar-icon path,
  :root[data-skin="graphite"] .app-titlebar-icon circle{color:var(--accent-text)!important;fill:var(--accent-text)!important;}
  :root[data-skin="graphite"] .workspace-panel-edge-toggle,
  :root[data-skin="graphite"] .scroll-to-bottom-btn,
  :root[data-skin="graphite"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;}
  :root.dark[data-skin="graphite"] .workspace-panel-edge-toggle,
  :root.dark[data-skin="graphite"] .scroll-to-bottom-btn,
  :root.dark[data-skin="graphite"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;}
  :root[data-skin="graphite"] #mainSettings .theme-pick-btn.active,
  :root[data-skin="graphite"] #mainSettings .skin-pick-btn.active,
  :root[data-skin="graphite"] #mainSettings .font-size-pick-btn.active{border-color:var(--border2)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;background:var(--surface)!important;}
  :root[data-skin="graphite"] .new-chat-btn,
  :root[data-skin="graphite"] button.send-btn:not(:disabled),
  :root[data-skin="graphite"] .btn.primary,
  :root[data-skin="graphite"] .update-primary,
  :root[data-skin="graphite"] .clarify-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:600!important;box-shadow:none!important;}
  :root.dark[data-skin="graphite"] .new-chat-btn,
  :root.dark[data-skin="graphite"] button.send-btn:not(:disabled),
  :root.dark[data-skin="graphite"] .btn.primary,
  :root.dark[data-skin="graphite"] .update-primary,
  :root.dark[data-skin="graphite"] .clarify-submit{color:#151614!important;}
  :root[data-skin="graphite"] .new-chat-btn:hover,
  :root[data-skin="graphite"] button.send-btn:not(:disabled):hover,
  :root[data-skin="graphite"] .btn.primary:hover,
  :root[data-skin="graphite"] .update-primary:hover,
  :root[data-skin="graphite"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;}
  /* ── Skin: Slate (blue-gray) ── */
  :root[data-skin="slate"]{--accent:#475569;--accent-hover:#334155;--accent-bg:rgba(71,85,105,0.08);--accent-bg-strong:rgba(71,85,105,0.15);--accent-text:#334155;}
  :root.dark[data-skin="slate"]{--accent:#94A3B8;--accent-hover:#64748B;--accent-bg:rgba(148,163,184,0.08);--accent-bg-strong:rgba(148,163,184,0.15);--accent-text:#94A3B8;}
  /* ── Skin: Poseidon (ocean blue) ── */
  :root[data-skin="poseidon"]{--accent:#0369A1;--accent-hover:#025080;--accent-bg:rgba(3,105,161,0.08);--accent-bg-strong:rgba(3,105,161,0.15);--accent-text:#025080;}
  :root.dark[data-skin="poseidon"]{--accent:#0EA5E9;--accent-hover:#0284C7;--accent-bg:rgba(14,165,233,0.08);--accent-bg-strong:rgba(14,165,233,0.15);--accent-text:#0EA5E9;}
  /* ── Skin: Sisyphus (purple) ── */
  :root[data-skin="sisyphus"]{--accent:#7C3AED;--accent-hover:#6D28D9;--accent-bg:rgba(124,58,237,0.08);--accent-bg-strong:rgba(124,58,237,0.15);--accent-text:#6D28D9;}
  :root.dark[data-skin="sisyphus"]{--accent:#A78BFA;--accent-hover:#8B5CF6;--accent-bg:rgba(167,139,250,0.08);--accent-bg-strong:rgba(167,139,250,0.15);--accent-text:#A78BFA;}
  /* ── Skin: Charizard (orange) ── */
  :root[data-skin="charizard"]{--accent:#EA580C;--accent-hover:#C2410C;--accent-bg:rgba(234,88,12,0.08);--accent-bg-strong:rgba(234,88,12,0.15);--accent-text:#C2410C;}
  :root.dark[data-skin="charizard"]{--accent:#FB923C;--accent-hover:#F97316;--accent-bg:rgba(251,146,60,0.08);--accent-bg-strong:rgba(251,146,60,0.15);--accent-text:#FB923C;}
  /* ── Skin: Sienna (warm clay & sand earth palette) ──
     Full palette rewrite (not just --accent): warm off-white surface,
     soft sand sidebar, clay accent. Sets --user-bubble-* for the redesigned
     user bubble block, mutes tool-card chrome to neutral, and bumps the
     reading column to a serif body for long-form prose. Opt-in via the
     Settings → Skin picker; default skin stays "default" (gold). */
  :root[data-skin="sienna"]{
    --bg:#FAF9F5;--sidebar:#F0EEE6;--surface:#FFFFFF;
    --border:#E7E4DB;--border2:#D7D3C7;
    --text:#1F1E1C;--muted:#6B6A63;--strong:#141311;--em:#3E3D39;
    --accent:#D97757;--accent-hover:#BF6545;--accent-text:#A55237;
    --accent-bg:rgba(217,119,87,0.09);--accent-bg-strong:rgba(217,119,87,0.18);
    --code-bg:#F5F3EC;--code-inline-bg:rgba(20,19,17,0.06);--code-text:#8A3E1A;--pre-text:#1F1E1C;
    --topbar-bg:rgba(250,249,245,0.96);--main-bg:rgba(250,249,245,0.55);
    --input-bg:rgba(20,19,17,0.035);--hover-bg:rgba(20,19,17,0.05);
    --focus-ring:rgba(217,119,87,0.3);--focus-glow:rgba(217,119,87,0.1);
    --blue:#2E6F9E;--gold:#A55237;
    --user-bubble-bg:#ECE9DF;--user-bubble-border:#DED9CC;
    --user-bubble-text:#1F1E1C;--user-bubble-placeholder:#6B6A63;
    --user-selection-bg:rgba(217,119,87,0.28);--user-selection-text:#1F1E1C;
  }
  :root.dark[data-skin="sienna"]{
    --bg:#1F1E1C;--sidebar:#262522;--surface:#2C2B28;
    --border:#3A3935;--border2:#4A4843;
    --text:#EDEBE3;--muted:#A3A197;--strong:#F7F5ED;--em:#C9C6BC;
    --accent:#E0896D;--accent-hover:#D97757;--accent-text:#E6A88A;
    --accent-bg:rgba(224,137,109,0.12);--accent-bg-strong:rgba(224,137,109,0.22);
    --code-bg:#2A2926;--code-inline-bg:rgba(255,255,255,0.07);--code-text:#F0B593;--pre-text:#EDEBE3;
    --topbar-bg:rgba(38,37,34,0.96);--main-bg:rgba(31,30,28,0.55);
    --input-bg:rgba(255,255,255,0.045);--hover-bg:rgba(255,255,255,0.07);
    --focus-ring:rgba(224,137,109,0.35);--focus-glow:rgba(224,137,109,0.1);
    --blue:#8BB8D6;--gold:#E6A88A;
    --user-bubble-bg:#34322E;--user-bubble-border:#42403B;
    --user-bubble-text:#EDEBE3;--user-bubble-placeholder:#A3A197;
    --user-selection-bg:rgba(224,137,109,0.3);--user-selection-text:#F7F5ED;
  }
  /* Specificity boosted to beat the :root:not(.dark) .new-chat-btn rule that
     sets color:var(--accent-text) — without this, the solid-accent background
     would collide with the inherited text color, producing clay-on-clay text. */
  :root[data-skin="sienna"]:not(.dark) .new-chat-btn,
  :root.dark[data-skin="sienna"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(20,19,17,0.08);}
  :root[data-skin="sienna"]:not(.dark) .new-chat-btn:hover,
  :root.dark[data-skin="sienna"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}
  /* Tool / thinking cards: mute the blue-ish Hermes highlights to neutral */
  :root[data-skin="sienna"] .tool-card{background:rgba(20,19,17,0.025);border-color:var(--border);border-radius:10px;}
  :root[data-skin="sienna"] .tool-card:hover{border-color:var(--border2);}
  :root[data-skin="sienna"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root[data-skin="sienna"] .tool-card-name{color:var(--muted);font-weight:500;}
  :root[data-skin="sienna"] .tool-arg-key{color:var(--accent-text);}
  :root[data-skin="sienna"] .tool-card-more{color:var(--accent-text);}
  :root[data-skin="sienna"] .tool-card-running-dot{background:var(--accent);}
  :root.dark[data-skin="sienna"] .tool-card{background:rgba(255,255,255,0.03);}
  /* User bubble: soft sand pill, not a saturated accent fill */
  :root[data-skin="sienna"] .msg-row[data-role="user"] .msg-body{border-radius:16px;padding:12px 16px;}
  :root[data-skin="sienna"] .msg-row[data-role="user"] .msg-body code{color:var(--user-bubble-text);background:rgba(20,19,17,0.08);}
  /* Send button pop and active session indicator */
  :root[data-skin="sienna"] button.send-btn {box-shadow:0 1px 3px rgba(217,119,87,0.3);}
  :root[data-skin="sienna"] button.send-btn:hover {box-shadow:0 2px 8px rgba(217,119,87,0.45);}
  :root[data-skin="sienna"] .session-item.active{border-left:2px solid var(--accent);}
  :root[data-skin="sienna"] .composer-box{border-radius:18px;}

  /* ── Skin: Catppuccin (Latte light / Mocha dark) ──
     Full palette rewrite using the Catppuccin mauve accent. Light mode maps
     to Latte, dark mode maps to Mocha, matching the Sienna-style single-skin
     pattern without adding a separate theme axis. Opt-in via Settings → Skin. */
  :root[data-skin="catppuccin"]{
    --bg:#EFF1F5;--sidebar:#E6E9EF;--surface:#FFFFFF;
    --border:#CCD0DA;--border2:#BCC0CC;
    --text:#4C4F69;--muted:#7C7F93;--strong:#1E1E2E;--em:#5C5F77;
    --accent:#8839EF;--accent-hover:#6C26D6;--accent-text:#8839EF;
    --accent-bg:rgba(136,57,239,0.09);--accent-bg-strong:rgba(136,57,239,0.18);
    --code-bg:#E6E9EF;--code-inline-bg:rgba(30,30,46,0.06);--code-text:#8839EF;--pre-text:#4C4F69;
    --topbar-bg:rgba(239,241,245,0.96);--main-bg:rgba(239,241,245,0.55);
    --input-bg:rgba(30,30,46,0.035);--hover-bg:rgba(30,30,46,0.05);
    --focus-ring:rgba(136,57,239,0.3);--focus-glow:rgba(136,57,239,0.1);
    --blue:#1E66F5;--gold:#DF8E1D;
    --user-bubble-bg:#E6E9EF;--user-bubble-border:#CCD0DA;
    --user-bubble-text:#4C4F69;--user-bubble-placeholder:#7C7F93;
    --user-selection-bg:rgba(136,57,239,0.24);--user-selection-text:#1E1E2E;
  }
  :root.dark[data-skin="catppuccin"]{
    --bg:#1E1E2E;--sidebar:#181825;--surface:#313244;
    --border:#45475A;--border2:#585B70;
    --text:#CDD6F4;--muted:#A6ADC8;--strong:#F5F5F5;--em:#BAC2DE;
    --accent:#CBA6F7;--accent-hover:#B4BEFE;--accent-text:#CBA6F7;
    --accent-bg:rgba(203,166,247,0.12);--accent-bg-strong:rgba(203,166,247,0.22);
    --code-bg:#181825;--code-inline-bg:rgba(255,255,255,0.07);--code-text:#CBA6F7;--pre-text:#CDD6F4;
    --topbar-bg:rgba(30,30,46,0.96);--main-bg:rgba(30,30,46,0.55);
    --input-bg:rgba(255,255,255,0.045);--hover-bg:rgba(255,255,255,0.07);
    --focus-ring:rgba(203,166,247,0.35);--focus-glow:rgba(203,166,247,0.1);
    --blue:#89B4FA;--gold:#F9E2AF;
    --user-bubble-bg:#313244;--user-bubble-border:#45475A;
    --user-bubble-text:#CDD6F4;--user-bubble-placeholder:#A6ADC8;
    --user-selection-bg:rgba(203,166,247,0.3);--user-selection-text:#1E1E2E;
  }
  :root[data-skin="catppuccin"]:not(.dark) .new-chat-btn,
  :root.dark[data-skin="catppuccin"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(136,57,239,0.24);}
  :root[data-skin="catppuccin"]:not(.dark) .new-chat-btn:hover,
  :root.dark[data-skin="catppuccin"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}
  :root[data-skin="catppuccin"] .tool-card{background:rgba(30,30,46,0.025);border-color:var(--border);}
  :root.dark[data-skin="catppuccin"] .tool-card{background:rgba(255,255,255,0.03);}
  :root[data-skin="catppuccin"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root[data-skin="catppuccin"] .tool-arg-key,
  :root[data-skin="catppuccin"] .tool-card-more{color:var(--accent-text);}
  :root[data-skin="catppuccin"] .tool-card-running-dot{background:var(--accent);}

  /* Skin: Hepburn — magenta-rose palette derived from the Hepburn TUI theme */
  :root[data-skin="hepburn"]{
    --bg:#fff3f7;--sidebar:#fbe4ed;--surface:#fff9fb;
    --border:#ecc8d5;--border2:rgba(242,120,173,0.18);
    --text:#3d1a28;--muted:#906270;--strong:#260912;--em:#72384a;
    --accent:#d44a7a;--accent-hover:#c6246a;--accent-text:#c6246a;
    --accent-bg:rgba(242,120,173,0.10);--accent-bg-strong:rgba(242,120,173,0.20);
    --code-bg:#fbe6ef;--code-inline-bg:rgba(242,120,173,0.12);--code-text:#d44a7a;--pre-text:#3d1a28;
    --topbar-bg:rgba(251,228,237,0.96);--main-bg:rgba(255,243,247,0.5);
    --input-bg:rgba(242,120,173,0.06);--hover-bg:rgba(242,120,173,0.08);
    --focus-ring:rgba(242,120,173,0.35);--focus-glow:rgba(242,120,173,0.12);
    --blue:#8671e5;--gold:#d44a7a;
    --error:#c0392b;--success:#3d8b40;--warning:#e67e22;--info:#8671e5;
    --surface-subtle:rgba(242,120,173,0.04);--surface-subtle-hover:rgba(242,120,173,0.08);
    --border-subtle:rgba(242,120,173,0.10);--border-muted:rgba(242,120,173,0.16);
  }
  :root.dark[data-skin="hepburn"]{
    --bg:#110a0f;--sidebar:#1e0f19;--surface:#241420;
    --border:#311a28;--border2:rgba(242,120,173,0.20);
    --text:#f2e4ee;--muted:#c8a4b8;--strong:#fcf4f8;--em:#e5c4d8;
    --accent:#f278ad;--accent-hover:#f5a0c5;--accent-text:#f278ad;
    --accent-bg:rgba(242,120,173,0.14);--accent-bg-strong:rgba(242,120,173,0.25);
    --code-bg:#1e0f19;--code-inline-bg:rgba(242,120,173,0.22);--code-text:#f5a0c5;--pre-text:#f2e4ee;
    --topbar-bg:rgba(30,15,25,0.96);--main-bg:rgba(17,10,15,0.5);
    --input-bg:rgba(242,120,173,0.08);--hover-bg:rgba(242,120,173,0.12);
    --focus-ring:rgba(242,120,173,0.45);--focus-glow:rgba(242,120,173,0.18);
    --blue:#8671e5;--gold:#ec5597;
    --error:#ff5c5c;--success:#6cd4a5;--warning:#f2b370;--info:#8671e5;
    --surface-subtle:rgba(242,120,173,0.05);--surface-subtle-hover:rgba(242,120,173,0.10);
    --border-subtle:rgba(242,120,173,0.12);--border-muted:rgba(242,120,173,0.22);
  }
  :root[data-skin="hepburn"]:not(.dark) .new-chat-btn,
  :root.dark[data-skin="hepburn"] .new-chat-btn{background:#ec5597;border-color:#ec5597;color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(236,85,151,0.3);}
  :root[data-skin="hepburn"]:not(.dark) .new-chat-btn:hover,
  :root.dark[data-skin="hepburn"] .new-chat-btn:hover{background:#c6246a;border-color:#c6246a;color:#fff;}
  :root[data-skin="hepburn"] .tool-card{background:rgba(242,120,173,0.04);border-color:var(--border);}
  :root.dark[data-skin="hepburn"] .tool-card{background:rgba(242,120,173,0.06);}
  :root[data-skin="hepburn"] .tool-card:hover{border-color:var(--accent-bg-strong);}
  :root[data-skin="hepburn"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root[data-skin="hepburn"] .tool-arg-key,
  :root[data-skin="hepburn"] .tool-card-more{color:var(--accent-text);}
  :root[data-skin="hepburn"] .tool-card-running-dot{background:var(--accent);}
  :root[data-skin="hepburn"] .send-btn{background:#ec5597;border-color:#ec5597;color:#fff;box-shadow:0 1px 3px rgba(236,85,151,0.3);}
  :root[data-skin="hepburn"] .send-btn:hover{background:#c6246a;border-color:#c6246a;color:#fff;box-shadow:0 2px 8px rgba(198,36,106,0.45);}
  :root[data-skin="hepburn"] .session-item.active{border-left:2px solid var(--accent);}

  /* ── Skin: Nous Research (steel blue, monospace, sharp corners, deep navy dark) ──
     Full palette rewrite inspired by the Nous Research visual identity.
     Monochromatic steel blue accent, monospace typography, near-sharp corners,
     dashed borders on structural elements, and deep navy dark mode.
     Opt-in via Settings → Skin picker. */
  :root[data-skin="nous"]{
    --bg:#FFFFFF;--sidebar:#F5F5F5;--border:#D0D8E0;--border2:rgba(0,0,0,0.15);
    --text:#1A2A3A;--muted:#6B7B8B;--accent:#4682B4;--blue:#4682B4;--gold:#4682B4;--code-bg:#F0F2F5;
    --surface:#FFFFFF;--topbar-bg:rgba(255,255,255,.98);--main-bg:rgba(255,255,255,0.5);
    --focus-ring:rgba(70,130,180,.3);--focus-glow:rgba(70,130,180,.08);
    --input-bg:rgba(0,0,0,.03);--hover-bg:rgba(0,0,0,.05);
    --strong:#0A1A2A;--em:#5C5344;--code-text:#2C5F88;--code-inline-bg:rgba(70,130,180,.08);--pre-text:#1A2A3A;
    --accent-hover:#3A6E9A;--accent-bg:rgba(70,130,180,0.06);--accent-bg-strong:rgba(70,130,180,0.12);--accent-text:#2C5F88;
    --error:#C62828;--success:#3D8B40;--warning:#E68A00;--info:#4682B4;
    --radius-sm:1px;--radius-md:2px;--radius-card:2px;--radius-lg:4px;
    --font-ui:"SF Mono","Roboto Mono","Courier New",monospace;
    --surface-subtle:rgba(0,0,0,.025);--surface-subtle-hover:rgba(0,0,0,.045);
    --border-subtle:rgba(0,0,0,.08);--border-muted:rgba(0,0,0,.12);
    font-family:var(--font-ui);font-size:14.5px;line-height:1.7;
  }
  :root.dark[data-skin="nous"]{
    --bg:#0A0E14;--sidebar:#0F1419;--border:#1E2A3A;--border2:rgba(255,255,255,0.14);
    --text:#C8D6E5;--muted:#5A6A7A;--accent:#4682B4;--blue:#4682B4;--gold:#4682B4;--code-bg:#111820;
    --surface:#111820;--topbar-bg:rgba(10,14,20,.98);--main-bg:rgba(10,14,20,0.5);
    --focus-ring:rgba(70,130,180,.3);--focus-glow:rgba(70,130,180,.08);
    --input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,255,255,.06);
    --strong:#E2E8F0;--em:#5A6A7A;--code-text:#7EB6E0;--code-inline-bg:rgba(70,130,180,.12);--pre-text:#C8D6E5;
    --accent-hover:#5A9AD0;--accent-bg:rgba(70,130,180,0.1);--accent-bg-strong:rgba(70,130,180,0.2);--accent-text:#7EB6E0;
    --error:#EF5350;--success:#4CAF50;--warning:#FFA726;--info:#4682B4;
    --surface-subtle:rgba(255,255,255,.025);--surface-subtle-hover:rgba(255,255,255,.045);
    --border-subtle:rgba(255,255,255,.075);--border-muted:rgba(255,255,255,.12);
  }
  /* ── Nous skin: component-level overrides ── */
  /* Topbar: dashed border */
  :root[data-skin="nous"] .topbar{border-bottom-style:dashed;}
  :root.dark[data-skin="nous"] .topbar{border-bottom-style:dashed;}
  /* Sidebar: dashed border */
  :root[data-skin="nous"] .sidebar{border-right-style:dashed;}
  :root.dark[data-skin="nous"] .sidebar{border-right-style:dashed;}
  /* Scrollbar: steel blue */
  :root[data-skin="nous"]::-webkit-scrollbar-thumb{background:rgba(70,130,180,.25);border-radius:3px;}
  :root[data-skin="nous"]::-webkit-scrollbar-thumb:hover{background:rgba(70,130,180,.4);}
  :root[data-skin="nous"]{scrollbar-width:thin;scrollbar-color:rgba(70,130,180,.25) transparent;}
  :root.dark[data-skin="nous"]::-webkit-scrollbar-thumb{background:rgba(70,130,180,.25);border-radius:3px;}
  :root.dark[data-skin="nous"]::-webkit-scrollbar-thumb:hover{background:rgba(70,130,180,.4);}
  :root.dark[data-skin="nous"]{scrollbar-width:thin;scrollbar-color:rgba(70,130,180,.25) transparent;}
  /* Tree viewer: blue family */
  :root[data-skin="nous"] .tree-key{color:#4682B4;}
  :root[data-skin="nous"] .tree-str{color:#7EB6E0;}
  :root[data-skin="nous"] .tree-num{color:#4682B4;}
  :root[data-skin="nous"] .tree-bool{color:#4682B4;}
  :root.dark[data-skin="nous"] .tree-key{color:#4682B4;}
  :root.dark[data-skin="nous"] .tree-str{color:#7EB6E0;}
  :root.dark[data-skin="nous"] .tree-num{color:#4682B4;}
  :root.dark[data-skin="nous"] .tree-bool{color:#4682B4;}
  /* Session badges/tags */
  :root[data-skin="nous"] .session-child-count{background:rgba(99,179,237,.16);color:#4682B4;}
  :root[data-skin="nous"] .session-child-count:hover{background:rgba(99,179,237,.26);color:#7EB6E0;}
  :root[data-skin="nous"] .session-tree-badge{background:rgba(99,179,237,.2);color:#4682B4;}
  :root[data-skin="nous"] .session-tag{background:rgba(99,179,237,.2);color:#4682B4;}
  :root.dark[data-skin="nous"] .session-child-count{background:rgba(99,179,237,.16);color:#4682B4;}
  :root.dark[data-skin="nous"] .session-child-count:hover{background:rgba(99,179,237,.26);color:#7EB6E0;}
  :root.dark[data-skin="nous"] .session-tree-badge{background:rgba(99,179,237,.2);color:#4682B4;}
  :root.dark[data-skin="nous"] .session-tag{background:rgba(99,179,237,.2);color:#4682B4;}
  /* Image lightbox */
  :root[data-skin="nous"] .img-lightbox-close:hover{background:rgba(70,130,180,.4);}
  :root.dark[data-skin="nous"] .img-lightbox-close:hover{background:rgba(70,130,180,.4);}
  :root[data-skin="nous"] .img-lightbox-nav:hover{background:rgba(70,130,180,.5);}
  :root.dark[data-skin="nous"] .img-lightbox-nav:hover{background:rgba(70,130,180,.5);}
  /* Diff blocks */
  :root[data-skin="nous"] .diff-block .diff-plus{color:#4682B4;}
  :root.dark[data-skin="nous"] .diff-block .diff-plus{color:#7EB6E0;}
  /* MCP status */
  :root[data-skin="nous"] .mcp-http{color:#4682B4;}
  :root[data-skin="nous"] .mcp-status-active{color:#4682B4;}
  :root.dark[data-skin="nous"] .mcp-http{color:#7EB6E0;}
  :root.dark[data-skin="nous"] .mcp-status-active{color:#7EB6E0;}

  /* ── Skin: Geist Contrast (Geist-inspired neutral precision) ──
     Dark mode uses a #FFF175 accent; solid accent controls use black
     foreground, while selected/navigation states stay neutral and restrained. */
  :root[data-skin="geist-contrast"]{
    color-scheme:light;
    --bg:#ffffff;--sidebar:#fafafa;--surface:#ffffff;--surface-subtle:#fafafa;--surface-subtle-hover:#f5f5f5;
    --main-bg:#ffffff;--topbar-bg:rgba(255,255,255,.92);
    --border:#eaeaea;--border2:#d4d4d4;--border-subtle:#ededed;--border-muted:#d4d4d4;
    --text:#111111;--strong:#000000;--muted:#666666;--em:#444444;
    --accent:#0070f3;--accent-hover:#005bd1;--accent-bg:rgba(0,112,243,.075);--accent-bg-strong:rgba(0,112,243,.16);--accent-text:#005bd1;
    --blue:#0070f3;--gold:#111111;--focus-ring:rgba(0,112,243,.28);--focus-glow:rgba(0,112,243,.08);
    --input-bg:#ffffff;--hover-bg:#f5f5f5;--code-bg:#fafafa;--code-inline-bg:#f5f5f5;--code-text:#111111;--pre-text:#111111;
    --error:#e5484d;--success:#007a45;--warning:#b45309;--info:#0070f3;
    --radius-sm:4px;--radius-md:6px;--radius-card:8px;--radius-lg:10px;
    --font-ui:"Geist","Geist Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  :root.dark[data-skin="geist-contrast"]{
    color-scheme:dark;
    --bg:#000000;--sidebar:#050505;--surface:#0a0a0a;--surface-subtle:#111111;--surface-subtle-hover:#171717;
    --main-bg:#000000;--topbar-bg:rgba(0,0,0,.88);
    --border:#262626;--border2:#3f3f3f;--border-subtle:#171717;--border-muted:#2a2a2a;
    --text:#ededed;--strong:#ffffff;--muted:#a1a1a1;--em:#d4d4d4;
    --accent:#FFF175;--accent-hover:#fff7a8;--accent-bg:rgba(255,241,117,.075);--accent-bg-strong:rgba(255,241,117,.14);--accent-text:#f5e65f;
    --blue:#FFF175;--gold:#FFF175;--focus-ring:rgba(255,241,117,.34);--focus-glow:rgba(255,241,117,.10);
    --input-bg:#0a0a0a;--hover-bg:#111111;--code-bg:#0a0a0a;--code-inline-bg:#171717;--code-text:#f5f5f5;--pre-text:#ededed;
    --error:#ff6369;--success:#3dd68c;--warning:#f5a524;--info:#FFF175;
  }
  :root[data-skin="geist-contrast"],
  :root[data-skin="geist-contrast"] body{font-family:var(--font-ui)!important;letter-spacing:-0.011em;background:var(--bg)!important;}
  :root[data-skin="geist-contrast"] .app-titlebar,
  :root[data-skin="geist-contrast"] .rail,
  :root[data-skin="geist-contrast"] .sidebar,
  :root[data-skin="geist-contrast"] .rightpanel,
  :root[data-skin="geist-contrast"] .topbar,
  :root[data-skin="geist-contrast"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;backdrop-filter:saturate(180%) blur(12px);}
  :root[data-skin="geist-contrast"] .main,
  :root[data-skin="geist-contrast"] .chat,
  :root[data-skin="geist-contrast"] .empty-state,
  :root[data-skin="geist-contrast"] .panel-view,
  :root[data-skin="geist-contrast"] .settings-section,
  :root[data-skin="geist-contrast"] .settings-card,
  :root[data-skin="geist-contrast"] .model-dropdown,
  :root[data-skin="geist-contrast"] .profile-menu,
  :root[data-skin="geist-contrast"] .session-actions-menu,
  :root[data-skin="geist-contrast"] .app-dialog,
  :root[data-skin="geist-contrast"] .kanban-modal,
  :root[data-skin="geist-contrast"] .cron-item,
  :root[data-skin="geist-contrast"] .tool-card,
  :root[data-skin="geist-contrast"] .msg-body pre,
  :root[data-skin="geist-contrast"] .preview-md pre,
  :root[data-skin="geist-contrast"] .composer-box{background:var(--surface)!important;border:none!important;box-shadow:none!important;}
  :root[data-skin="geist-contrast"] .session-item,
  :root[data-skin="geist-contrast"] .nav-tab,
  :root[data-skin="geist-contrast"] .rail-btn,
  :root[data-skin="geist-contrast"] .icon-btn,
  :root[data-skin="geist-contrast"] .panel-head-btn,
  :root[data-skin="geist-contrast"] .sm-btn,
  :root[data-skin="geist-contrast"] .btn,
  :root[data-skin="geist-contrast"] button,
  :root[data-skin="geist-contrast"] select,
  :root[data-skin="geist-contrast"] input,
  :root[data-skin="geist-contrast"] textarea,
  :root[data-skin="geist-contrast"] .chip,
  :root[data-skin="geist-contrast"] .project-chip,
  :root[data-skin="geist-contrast"] .profile-chip,
  :root[data-skin="geist-contrast"] .model-chip,
  :root[data-skin="geist-contrast"] .reasoning-chip,
  :root[data-skin="geist-contrast"] .app-dialog-btn{border-radius:6px!important;}
  :root[data-skin="geist-contrast"] .session-item:hover,
  :root[data-skin="geist-contrast"] .nav-tab:hover,
  :root[data-skin="geist-contrast"] .rail-btn:hover,
  :root[data-skin="geist-contrast"] .icon-btn:hover,
  :root[data-skin="geist-contrast"] .panel-head-btn:hover,
  :root[data-skin="geist-contrast"] .sm-btn:hover,
  :root[data-skin="geist-contrast"] .project-chip:hover,
  :root[data-skin="geist-contrast"] .chip:hover,
  :root[data-skin="geist-contrast"] .profile-opt:hover,
  :root[data-skin="geist-contrast"] .ws-opt:hover,
  :root[data-skin="geist-contrast"] .file-item:hover,
  :root[data-skin="geist-contrast"] .suggestion:hover{background:var(--hover-bg)!important;}
  :root[data-skin="geist-contrast"] .session-item.active,
  :root[data-skin="geist-contrast"] .nav-tab.active,
  :root[data-skin="geist-contrast"] .rail-btn.active,
  :root[data-skin="geist-contrast"] .project-chip.active,
  :root[data-skin="geist-contrast"] .profile-opt.active,
  :root[data-skin="geist-contrast"] .chip.model,
  :root[data-skin="geist-contrast"] .side-menu-item.active,
  :root[data-skin="geist-contrast"] .skin-pick-btn.active,
  :root[data-skin="geist-contrast"] .theme-pick-btn.active,
  :root[data-skin="geist-contrast"] .font-size-pick-btn.active{background:var(--surface-subtle)!important;border-color:var(--border2)!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px var(--border)!important;font-weight:500!important;}
  :root[data-skin="geist-contrast"] .session-item.active{position:relative;border:1px solid var(--border2)!important;}
  :root[data-skin="geist-contrast"] .session-item.active::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;border-radius:999px;background:var(--accent);}
  :root[data-skin="geist-contrast"] .session-item.active .session-title,
  :root[data-skin="geist-contrast"] .session-item.active .session-meta,
  :root[data-skin="geist-contrast"] .session-item.active .session-preview,
  :root[data-skin="geist-contrast"] .session-item.active *{color:inherit!important;}
  :root.dark[data-skin="geist-contrast"] .session-item.active,
  :root.dark[data-skin="geist-contrast"] .session-item.active *{color:var(--text)!important;}
  :root[data-skin="geist-contrast"] .nav-tab.active,
  :root[data-skin="geist-contrast"] .rail-btn.active{color:var(--accent-text)!important;}
  :root.dark[data-skin="geist-contrast"] .nav-tab.active svg,
  :root.dark[data-skin="geist-contrast"] .rail-btn.active svg,
  :root.dark[data-skin="geist-contrast"] .nav-tab.active [data-lucide],
  :root.dark[data-skin="geist-contrast"] .rail-btn.active [data-lucide]{color:var(--accent-text)!important;stroke:var(--accent-text)!important;}
  :root[data-skin="geist-contrast"] .profile-chip,
  :root[data-skin="geist-contrast"] .model-chip,
  :root[data-skin="geist-contrast"] .reasoning-chip,
  :root[data-skin="geist-contrast"] .composer-workspace-chip,
  :root[data-skin="geist-contrast"] .composer-profile-chip,
  :root[data-skin="geist-contrast"] .composer-model-chip{color:var(--muted)!important;border-color:transparent!important;background:transparent!important;}
  :root[data-skin="geist-contrast"] .profile-chip:hover,
  :root[data-skin="geist-contrast"] .model-chip:hover,
  :root[data-skin="geist-contrast"] .reasoning-chip:hover,
  :root[data-skin="geist-contrast"] .composer-workspace-chip:hover,
  :root[data-skin="geist-contrast"] .composer-profile-chip:hover,
  :root[data-skin="geist-contrast"] .composer-model-chip:hover{color:var(--text)!important;background:var(--surface-subtle)!important;border-color:var(--border)!important;}
  :root[data-skin="geist-contrast"] .new-chat-btn,
  :root[data-skin="geist-contrast"] button.send-btn:not(:disabled),
  :root[data-skin="geist-contrast"] .btn.primary,
  :root[data-skin="geist-contrast"] .update-primary,
  :root[data-skin="geist-contrast"] .app-dialog-btn.confirm,
  :root[data-skin="geist-contrast"] .approval-btn.once,
  :root[data-skin="geist-contrast"] .approval-btn.session,
  :root[data-skin="geist-contrast"] .clarify-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#050505!important;font-weight:600!important;box-shadow:none!important;}
  :root[data-skin="geist-contrast"]:not(.dark) .new-chat-btn,
  :root[data-skin="geist-contrast"]:not(.dark) button.send-btn:not(:disabled),
  :root[data-skin="geist-contrast"]:not(.dark) .btn.primary,
  :root[data-skin="geist-contrast"]:not(.dark) .update-primary,
  :root[data-skin="geist-contrast"]:not(.dark) .app-dialog-btn.confirm,
  :root[data-skin="geist-contrast"]:not(.dark) .approval-btn.once,
  :root[data-skin="geist-contrast"]:not(.dark) .approval-btn.session,
  :root[data-skin="geist-contrast"]:not(.dark) .clarify-submit{color:#ffffff!important;}
  :root[data-skin="geist-contrast"] .new-chat-btn:hover,
  :root[data-skin="geist-contrast"] button.send-btn:not(:disabled):hover,
  :root[data-skin="geist-contrast"] .btn.primary:hover,
  :root[data-skin="geist-contrast"] .update-primary:hover,
  :root[data-skin="geist-contrast"] .app-dialog-btn.confirm:hover,
  :root[data-skin="geist-contrast"] .approval-btn.once:hover,
  :root[data-skin="geist-contrast"] .approval-btn.session:hover,
  :root[data-skin="geist-contrast"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;transform:none!important;}
  :root[data-skin="geist-contrast"] button.send-btn:disabled{background:var(--surface-subtle)!important;border-color:var(--border)!important;color:var(--muted)!important;opacity:1!important;}
  :root.dark[data-skin="geist-contrast"] button.send-btn:disabled svg,
  :root.dark[data-skin="geist-contrast"] button.send-btn:disabled [data-lucide]{color:var(--muted)!important;stroke:var(--muted)!important;}
  :root[data-skin="geist-contrast"] .composer-box:focus-within{border-color:transparent!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none!important;}
  :root[data-skin="geist-contrast"] input:focus,
  :root[data-skin="geist-contrast"] textarea:focus,
  :root[data-skin="geist-contrast"] select:focus{border-color:var(--accent)!important;box-shadow:none!important;outline:none!important;}
  :root[data-skin="geist-contrast"] .app-dialog-input:focus,
  :root[data-skin="geist-contrast"] .sidebar-search input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none!important;}
  :root[data-skin="geist-contrast"] .logo,
  :root[data-skin="geist-contrast"] .sidebar-header .logo{background:var(--surface-subtle)!important;color:var(--accent-text)!important;border:1px solid var(--border2)!important;border-radius:8px!important;box-shadow:none!important;font-weight:650!important;}
  :root[data-skin="geist-contrast"] .app-titlebar-icon rect,
  :root[data-skin="geist-contrast"] .app-titlebar-icon path,
  :root[data-skin="geist-contrast"] .app-titlebar-icon circle{color:var(--accent-text)!important;fill:var(--accent-text)!important;}
  :root[data-skin="geist-contrast"] .msg-row[data-role="user"] .msg-body{background:var(--surface-subtle)!important;border:1px solid var(--border)!important;border-radius:10px!important;}
  :root[data-skin="geist-contrast"] .suggestion{background:var(--surface)!important;border-color:var(--border)!important;color:var(--muted)!important;transition:background .15s ease,border-color .15s ease,color .15s ease!important;}
  :root[data-skin="geist-contrast"] .suggestion:hover{border-color:var(--border2)!important;color:var(--text)!important;}
  :root[data-skin="geist-contrast"] .msg-body a,
  :root[data-skin="geist-contrast"] .preview-md a,
  :root[data-skin="geist-contrast"] .empty-state a,
  :root[data-skin="geist-contrast"] .tool-arg-key,
  :root[data-skin="geist-contrast"] .tool-card-more,
  :root[data-skin="geist-contrast"] .session-pin-indicator,
  :root[data-skin="geist-contrast"] .sidebar-date-header.pinned{color:var(--accent-text)!important;}
  :root[data-skin="geist-contrast"]::-webkit-scrollbar-thumb{background:var(--border2)!important;}
  :root[data-skin="geist-contrast"] ::selection{background:var(--accent-bg-strong);color:var(--strong);}
  /* ── Geist Contrast: composer fixes ── */
  /* Light mode: override white user-bubble-text so textarea text is black */
  :root[data-skin="geist-contrast"]:not(.dark){--user-bubble-text:#111111;}
  /* Remove scrollbar from textarea */
  :root[data-skin="geist-contrast"] textarea#msg{scrollbar-width:none;overflow-y:auto;}
  :root[data-skin="geist-contrast"] textarea#msg::-webkit-scrollbar{display:none;}

  /* ── Skin: Zeus ──
     OLED-near-black skin: replaces the default dark-blue/navy surfaces with warm
     near-blacks while keeping the gold accent unchanged. Borders are gold-tinted
     for warmth so the accent feels connected to the chrome.
     Dark-only — no light-mode variant. */
  :root.dark[data-skin="zeus"]{
    --bg:#0F0F0F;--sidebar:#111111;--surface:#181818;--code-bg:#181818;
    --topbar-bg:rgba(15,15,15,.98);--main-bg:rgba(15,15,15,0.6);
    --border:#2A2A1E;--border2:rgba(255,215,0,0.18);
    --input-bg:rgba(255,255,255,.04);--hover-bg:rgba(255,215,0,.06);
    --surface-subtle:rgba(255,255,255,.03);--surface-subtle-hover:rgba(255,255,255,.05);
    --border-subtle:rgba(255,215,0,.08);--border-muted:rgba(255,215,0,.14);
    --focus-ring:rgba(255,215,0,.4);--focus-glow:rgba(255,215,0,.1);
  }
  :root.dark[data-skin="zeus"] .topbar{background:#0F0F0F;border-bottom:1px solid rgba(255,215,0,0.15);}
  :root.dark[data-skin="zeus"] .sidebar{background:#111111;border-right:1px solid rgba(255,215,0,0.12);}
  :root.dark[data-skin="zeus"] .session-item.active{background:rgba(255,215,0,0.1);border-left:2px solid #FFD700;color:#FFD700;}
  :root.dark[data-skin="zeus"] .session-item:hover:not(.active){background:rgba(255,215,0,0.05);}
  :root.dark[data-skin="zeus"] .composer-box{background:#141414;border-color:rgba(255,215,0,0.2);}
  :root.dark[data-skin="zeus"] .msg-row[data-role="assistant"] .msg-body{background:#181818;border-color:rgba(255,215,0,0.1);}
  :root.dark[data-skin="zeus"] .msg-row[data-role="user"] .msg-body{background:#1C1600;border-color:rgba(255,215,0,0.25);}
  :root.dark[data-skin="zeus"] .app-dialog{background:linear-gradient(180deg,rgba(24,24,24,.99),rgba(15,15,15,.99));border-color:rgba(255,215,0,0.2);}
  :root.dark[data-skin="zeus"] .app-dialog-overlay{background:rgba(0,0,0,.72);}
  :root.dark[data-skin="zeus"] .kanban-modal{background:linear-gradient(180deg,rgba(24,24,24,.99),rgba(15,15,15,.99));border-color:rgba(255,215,0,0.2);}
  :root.dark[data-skin="zeus"] .kanban-modal-overlay{background:rgba(0,0,0,.72);}
  :root.dark[data-skin="zeus"] .kanban-board-switcher-menu{background:linear-gradient(180deg,rgba(24,24,24,.99),rgba(15,15,15,.99));border-color:rgba(255,215,0,0.15);}

  /* ═══ NEON — cyberpunk theme (dark-first) ═══ */
  :root[data-skin="neon"]{
    --bg:#F8F7FC;--sidebar:#F0EEF8;--border:#D8D4EC;--border2:rgba(0,0,0,0.12);
    --text:#1E1B2E;--muted:#6E6888;--accent:#9333EA;--blue:#7C3AED;--gold:#A855F7;--code-bg:#F0EDF8;
    --surface:#FFFFFF;--topbar-bg:rgba(248,247,252,.98);--main-bg:rgba(248,247,252,0.5);
    --focus-ring:rgba(147,51,234,.3);--focus-glow:rgba(147,51,234,.08);
    --input-bg:rgba(147,51,234,.03);--hover-bg:rgba(147,51,234,.05);
    --strong:#0D0B14;--em:#7C3AED;--code-text:#6D28D9;--code-inline-bg:rgba(147,51,234,.08);--pre-text:#1E1B2E;
    --accent-hover:#7E22CE;--accent-bg:rgba(147,51,234,0.06);--accent-bg-strong:rgba(147,51,234,0.12);--accent-text:#6D28D9;
    --error:#DC2626;--success:#059669;--warning:#D97706;--info:#7C3AED;
    --radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px;
    --font-ui:system-ui,-apple-system,sans-serif;
    --surface-subtle:rgba(147,51,234,.025);--surface-subtle-hover:rgba(147,51,234,.05);
    --border-subtle:rgba(147,51,234,.08);--border-muted:rgba(147,51,234,.12);
    --purple:#9333EA;
  }
  :root.dark[data-skin="neon"]{
    --bg:#08060d;--sidebar:#06040a;--border:#1c1633;--border2:rgba(179,71,255,0.15);
    --text:#d8d6f0;--muted:#6a6588;--accent:#b347ff;--blue:#a78bfa;--gold:#c084fc;--code-bg:#050308;
    --surface:#0f0d1a;--topbar-bg:rgba(8,6,13,.98);--main-bg:rgba(8,6,13,0.5);
    --focus-ring:rgba(179,71,255,.35);--focus-glow:rgba(179,71,255,.10);
    --input-bg:rgba(179,71,255,.04);--hover-bg:rgba(179,71,255,.06);
    --strong:#f0edff;--em:#00ddff;--code-text:#c8c0f0;--code-inline-bg:rgba(179,71,255,.10);--pre-text:#d8d6f0;
    --accent-hover:#c76bff;--accent-bg:rgba(179,71,255,0.10);--accent-bg-strong:rgba(179,71,255,0.20);--accent-text:#c8a0ff;
    --error:#ff4466;--success:#00dd88;--warning:#ffaa33;--info:#00ddff;
    --surface-subtle:rgba(179,71,255,.03);--surface-subtle-hover:rgba(179,71,255,.06);
    --border-subtle:rgba(179,71,255,.08);--border-muted:rgba(179,71,255,.12);
    --purple:#b347ff;
  }
  /* ── Neon skin: component-level overrides ── */
  /* Selection glow */
  :root.dark[data-skin="neon"] ::selection{background:rgba(179,71,255,0.35);color:#fff;}
  /* Topbar: purple bottom border with glow */
  :root.dark[data-skin="neon"] .app-titlebar{border-bottom-color:rgba(179,71,255,0.2);}
  /* Sidebar: subtle purple inset shadow */
  :root.dark[data-skin="neon"] .sidebar{box-shadow:inset -1px 0 30px rgba(179,71,255,0.03);}
  /* Inputs: purple glow on focus */
  :root.dark[data-skin="neon"] textarea:focus,
  :root.dark[data-skin="neon"] input[type="text"]:focus,
  :root.dark[data-skin="neon"] input[type="password"]:focus,
  :root.dark[data-skin="neon"] select:focus{box-shadow:0 0 16px rgba(179,71,255,0.2);}
  /* Send button: neon glow */
  :root.dark[data-skin="neon"] button.send-btn{box-shadow:0 0 14px rgba(179,71,255,0.25);}
  :root.dark[data-skin="neon"] button.send-btn:hover{box-shadow:0 0 24px rgba(179,71,255,0.45);}
  /* New chat button: purple gradient */
  :root.dark[data-skin="neon"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 12px rgba(179,71,255,0.2);}
  :root.dark[data-skin="neon"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 20px rgba(179,71,255,0.35);}
  /* Scrollbar: purple */
  :root.dark[data-skin="neon"]::-webkit-scrollbar-thumb{background:rgba(179,71,255,.18);border-radius:3px;}
  :root.dark[data-skin="neon"]::-webkit-scrollbar-thumb:hover{background:rgba(179,71,255,.30);}
  :root.dark[data-skin="neon"]{scrollbar-width:thin;scrollbar-color:rgba(179,71,255,.18) transparent;}
  /* Tool cards */
  :root.dark[data-skin="neon"] .tool-card{background:rgba(179,71,255,0.03);border-color:rgba(179,71,255,0.08);}
  :root.dark[data-skin="neon"] .tool-card:hover{border-color:rgba(179,71,255,0.2);}
  :root.dark[data-skin="neon"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root.dark[data-skin="neon"] .tool-card-name{color:var(--muted);font-weight:500;}
  :root.dark[data-skin="neon"] .tool-arg-key,
  :root.dark[data-skin="neon"] .tool-card-more{color:var(--accent-text);}
  :root.dark[data-skin="neon"] .tool-card-running-dot{background:var(--accent);}
  /* Tree viewer: purple family */
  :root.dark[data-skin="neon"] .tree-key{color:#b347ff;}
  :root.dark[data-skin="neon"] .tree-str{color:#c8a0ff;}
  :root.dark[data-skin="neon"] .tree-num{color:#00ddff;}
  :root.dark[data-skin="neon"] .tree-bool{color:#b347ff;}
  /* Session badges/tags */
  :root.dark[data-skin="neon"] .session-child-count{background:rgba(179,71,255,.16);color:#c8a0ff;}
  :root.dark[data-skin="neon"] .session-child-count:hover{background:rgba(179,71,255,.26);color:#d8c0ff;}
  :root.dark[data-skin="neon"] .session-tree-badge{background:rgba(179,71,255,.2);color:#c8a0ff;}
  :root.dark[data-skin="neon"] .session-tag{background:rgba(179,71,255,.2);color:#c8a0ff;}
  /* Diff blocks */
  :root.dark[data-skin="neon"] .diff-block .diff-plus{color:#b347ff;}
  /* MCP status */
  :root.dark[data-skin="neon"] .mcp-http{color:#c8a0ff;}
  :root.dark[data-skin="neon"] .mcp-status-active{color:#00dd88;}
  /* Image lightbox */
  :root.dark[data-skin="neon"] .img-lightbox-close:hover{background:rgba(179,71,255,.35);}
  /* Links: cyan with hover glow */
  :root.dark[data-skin="neon"] a{color:var(--info);transition:text-shadow 0.2s;}
  :root.dark[data-skin="neon"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);}

  /* ═══ VERDIGRIS — emerald/bronze dashboard palette (dark-only) ═══ */
  :root.dark[data-skin="verdigris"]{
    --bg:#0F1714;--sidebar:#121D18;--border:#22342C;--border2:rgba(200,154,90,0.10);
    --text:#F3ECDD;--muted:#A8B4A5;--accent:#C89A5A;--blue:#C89A5A;--gold:#C89A5A;--code-bg:#111B17;
    --surface:#16211C;--topbar-bg:rgba(15,23,20,.98);--main-bg:rgba(22,33,28,.55);
    --focus-ring:rgba(200,154,90,.30);--focus-glow:rgba(200,154,90,.10);
    --input-bg:rgba(255,255,255,.025);--hover-bg:rgba(255,255,255,.045);
    --strong:#FFF8EB;--em:#D8C5AA;--code-text:#D6AE74;--code-inline-bg:rgba(200,154,90,.08);--pre-text:#F3ECDD;
    --accent-hover:#D6AE74;--accent-bg:rgba(200,154,90,.08);--accent-bg-strong:rgba(200,154,90,.14);--accent-text:#E4C28D;
    --error:#D26A6A;--success:#719A68;--warning:#D1A45C;--info:#C89A5A;
    --radius-sm:1px;--radius-md:2px;--radius-card:2px;--radius-lg:4px;
    --surface-subtle:rgba(255,255,255,.02);--surface-subtle-hover:rgba(255,255,255,.04);
    --border-subtle:rgba(255,255,255,.06);--border-muted:rgba(255,255,255,.10);
  }
  /* ── Verdigris skin: component-level overrides ── */
  /* New chat button: gold */
  :root.dark[data-skin="verdigris"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#0F1714;font-weight:600;}
  :root.dark[data-skin="verdigris"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#0F1714;}
  /* Scrollbar: gold tint */
  :root.dark[data-skin="verdigris"]::-webkit-scrollbar-thumb{background:rgba(200,154,90,.20);border-radius:3px;}
  :root.dark[data-skin="verdigris"]::-webkit-scrollbar-thumb:hover{background:rgba(200,154,90,.35);}
  :root.dark[data-skin="verdigris"]{scrollbar-width:thin;scrollbar-color:rgba(200,154,90,.20) transparent;}
  /* Tool cards */
  :root.dark[data-skin="verdigris"] .tool-card{background:rgba(200,154,90,0.03);border-color:rgba(200,154,90,0.08);}
  :root.dark[data-skin="verdigris"] .tool-card:hover{border-color:rgba(200,154,90,0.18);}
  :root.dark[data-skin="verdigris"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root.dark[data-skin="verdigris"] .tool-arg-key,
  :root.dark[data-skin="verdigris"] .tool-card-more{color:var(--accent-text);}
  :root.dark[data-skin="verdigris"] .tool-card-running-dot{background:var(--accent);}
  /* Tree viewer: gold family */
  :root.dark[data-skin="verdigris"] .tree-key{color:#C89A5A;}
  :root.dark[data-skin="verdigris"] .tree-str{color:#E4C28D;}
  :root.dark[data-skin="verdigris"] .tree-num{color:#C89A5A;}
  :root.dark[data-skin="verdigris"] .tree-bool{color:#C89A5A;}
  /* Session badges/tags */
  :root.dark[data-skin="verdigris"] .session-child-count{background:rgba(200,154,90,.14);color:#E4C28D;}
  :root.dark[data-skin="verdigris"] .session-child-count:hover{background:rgba(200,154,90,.24);color:#F0D0A0;}
  :root.dark[data-skin="verdigris"] .session-tree-badge{background:rgba(200,154,90,.16);color:#E4C28D;}
  :root.dark[data-skin="verdigris"] .session-tag{background:rgba(200,154,90,.16);color:#E4C28D;}
  /* Diff blocks */
  :root.dark[data-skin="verdigris"] .diff-block .diff-plus{color:#C89A5A;}
  /* MCP status */
  :root.dark[data-skin="verdigris"] .mcp-http{color:#E4C28D;}
  :root.dark[data-skin="verdigris"] .mcp-status-active{color:#E4C28D;}
  /* Image lightbox */
  :root.dark[data-skin="verdigris"] .img-lightbox-close:hover{background:rgba(200,154,90,.35);}
  :root.dark[data-skin="verdigris"] .img-lightbox-nav:hover{background:rgba(200,154,90,.40);}

  /* #594: app-dialog light mode overrides — base styles use hardcoded dark gradients */
  :root:not(.dark) .app-dialog{
    background:linear-gradient(180deg,rgba(240,237,232,.99),rgba(228,224,216,.99));
    border-color:rgba(0,0,0,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.15);
  }
  :root:not(.dark) .app-dialog-input{
    background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.2);
  }
  :root:not(.dark) .app-dialog-input:focus{
    border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
  }
  :root:not(.dark) .app-dialog-close{
    background:rgba(0,0,0,.04);
  }
  :root:not(.dark) .app-dialog-close:hover{background:rgba(0,0,0,.09);}
  :root:not(.dark) .app-dialog-btn{background:rgba(0,0,0,.04);}
  :root:not(.dark) .app-dialog-btn:hover{background:rgba(0,0,0,.09);}
  :root:not(.dark) .app-dialog-btn.confirm{
    border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text);
  }
  :root:not(.dark) .app-dialog-btn.confirm:hover{background:var(--accent-bg-strong);}
  :root:not(.dark) .file-rename-input{
    background:rgba(0,0,0,.04);
  }
  :root:not(.dark) ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
  :root:not(.dark) ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
  :root:not(.dark) ::selection{background:var(--accent-bg-strong);}
  :root:not(.dark) *{scrollbar-color:rgba(0,0,0,.15) transparent;}
  /* ── Light mode: sidebar, roles, chips, active states ── */
  :root:not(.dark) .session-item{color:var(--muted);}
  :root:not(.dark) .session-item:hover{background:var(--hover-bg);color:var(--text);}
  :root:not(.dark) .session-item.active{background:var(--accent-bg);color:var(--accent-text);}
  :root:not(.dark) .session-item.active .session-title{color:var(--accent-text);}
  :root:not(.dark) .session-pin-indicator{color:var(--accent-text);}
  :root:not(.dark) .session-date-header.pinned{color:var(--accent-text);}
  :root:not(.dark) .session-actions-trigger.active,
  :root:not(.dark) .session-item.menu-open .session-actions-trigger{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
  :root:not(.dark) .session-action-opt.is-active{background:var(--accent-bg);}
  :root:not(.dark) .msg-role.user{color:var(--accent-text);}
  :root:not(.dark) .msg-role.assistant{color:var(--muted);}
  :root:not(.dark) .role-icon.user{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);}
  :root:not(.dark) .role-icon.assistant{background:var(--surface);color:var(--muted);border-color:var(--border);}
  :root:not(.dark) .project-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);}
  :root:not(.dark) .project-chip:hover{background:var(--hover-bg);color:var(--text);}
  :root:not(.dark) .project-chip.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);}
  :root:not(.dark) .chip{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);}
  :root:not(.dark) .chip.model{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  :root:not(.dark) .new-chat-btn{border-color:var(--accent-bg-strong);color:var(--accent-text);}
  :root:not(.dark) .new-chat-btn:hover{background:var(--accent-bg);}
  :root:not(.dark) .sidebar-search input{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.03);}
  :root:not(.dark) .sidebar-search input:focus{border-color:var(--accent);background:rgba(0,0,0,.02);}
  :root:not(.dark) .cron-item{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02);}
  :root:not(.dark) .sm-btn{border-color:rgba(0,0,0,.1);}
  :root:not(.dark) .sm-btn:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);}
  :root:not(.dark) select{border-color:rgba(0,0,0,.12);}
  :root:not(.dark) .composer-wrap{background:var(--sidebar);border-top:1px solid var(--border);}
  :root:not(.dark) .composer-wrap::before{background:linear-gradient(to bottom,transparent,var(--sidebar));}
  :root:not(.dark) .composer-box{background:var(--bg);border-color:rgba(0,0,0,.12);}
  :root:not(.dark) .composer-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
  :root:not(.dark) .suggestion{border-color:rgba(0,0,0,.08);}
  :root:not(.dark) .suggestion:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  :root:not(.dark) .tool-card{border-color:rgba(0,0,0,.08);}
  :root:not(.dark) .tool-card:hover{border-color:rgba(0,0,0,.15);}
  :root:not(.dark) .icon-btn:hover{background:rgba(0,0,0,.06);}
  :root:not(.dark) .panel-icon-btn:hover{background:rgba(0,0,0,.06);}
  :root:not(.dark) .file-item:hover{background:rgba(0,0,0,.04);}
  :root:not(.dark) .preview-md th{background:rgba(0,0,0,.04);}
  :root:not(.dark) .msg-body th{background:rgba(0,0,0,.04);}
  :root:not(.dark) .preview-md td{border-color:rgba(0,0,0,.08);}
  :root:not(.dark) .msg-body td{border-color:rgba(0,0,0,.08);}
  :root:not(.dark) .preview-badge.code{background:rgba(0,0,0,.05);}
  :root:not(.dark) .ctx-ring-center{background:var(--bg);color:var(--muted);}
  :root:not(.dark) .ctx-ring-track{stroke:rgba(0,0,0,.12);}
  :root:not(.dark) .ws-opt:hover{background:rgba(0,0,0,.05);}
  :root:not(.dark) .ws-row:hover{background:rgba(0,0,0,.04);}
  :root:not(.dark) .ws-drag-handle{color:#999;}
  :root:not(.dark) .ws-row.drag-over{background:rgba(0,0,0,.06);}
  :root:not(.dark) .profile-opt:hover{background:rgba(0,0,0,.05);}
  :root:not(.dark) .profile-opt.active{background:var(--accent-bg);}
  :root:not(.dark) .profile-chip{color:var(--accent-text)!important;}
  /* ── Light mode: Prism syntax token overrides (prism-tomorrow is dark-only) ── */
  :root:not(.dark) .token.comment,
  :root:not(.dark) .token.prolog,
  :root:not(.dark) .token.doctype,
  :root:not(.dark) .token.cdata{color:#7a7060;font-style:italic;}
  :root:not(.dark) .token.punctuation{color:#5a4e44;}
  :root:not(.dark) .token.namespace{opacity:.8;}
  :root:not(.dark) .token.property,
  :root:not(.dark) .token.tag,
  :root:not(.dark) .token.boolean,
  :root:not(.dark) .token.number,
  :root:not(.dark) .token.constant,
  :root:not(.dark) .token.symbol,
  :root:not(.dark) .token.deleted{color:#a0290a;}
  :root:not(.dark) .token.selector,
  :root:not(.dark) .token.attr-name,
  :root:not(.dark) .token.string,
  :root:not(.dark) .token.char,
  :root:not(.dark) .token.builtin,
  :root:not(.dark) .token.inserted{color:#276b30;}
  :root:not(.dark) .token.operator,
  :root:not(.dark) .token.entity,
  :root:not(.dark) .token.url,
  :root:not(.dark) .language-css .token.string,
  :root:not(.dark) .style .token.string{color:#5a3e8a;}
  :root:not(.dark) .token.atrule,
  :root:not(.dark) .token.attr-value,
  :root:not(.dark) .token.keyword{color:#2d6fa3;}
  :root:not(.dark) .token.function,
  :root:not(.dark) .token.class-name{color:#7a3a00;}
  :root:not(.dark) .token.regex,
  :root:not(.dark) .token.important,
  :root:not(.dark) .token.variable{color:#8a4a00;}
  :root:not(.dark) .token.important,
  :root:not(.dark) .token.bold{font-weight:bold;}
  :root:not(.dark) .token.italic{font-style:italic;}
  :root:not(.dark) .nav-tab:hover::after{background:var(--surface);border-color:var(--accent-bg-strong);color:var(--accent-text);}
  :root:not(.dark) .cron-status.disabled{background:rgba(0,0,0,.05);}
  :root:not(.dark) .cron-status.attention{background:rgba(217,119,6,.14);color:#b45309;}
  :root:not(.dark) .cron-btn{background:rgba(0,0,0,.04);}
  :root:not(.dark) .cron-btn:hover{background:rgba(0,0,0,.08);}
  /* ── Smooth dark mode transitions ── */
  body,header,footer,aside,nav,main,div,button,input,textarea,select{transition-property:background-color,border-color,color;transition-duration:.15s;transition-timing-function:ease;}
  :root{--app-titlebar-safe-top:0px;}
  .pwa-standalone{overscroll-behavior:none;}
  .pwa-standalone body{-webkit-tap-highlight-color:transparent;}
  .app-titlebar-new-chat{display:none;}
  .pwa-standalone .app-titlebar-reload{display:inline-flex;}
  .pwa-offline .app-titlebar::after{content:'';position:absolute;left:50%;bottom:5px;width:5px;height:5px;border-radius:999px;background:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 22%,transparent);transform:translateX(-50%);}
  .pwa-resumed .app-titlebar-title{animation:pwa-title-resume .6s ease-out;}
  @keyframes pwa-title-resume{0%{opacity:.65;}100%{opacity:1;}}
  @media (prefers-reduced-motion: reduce){.pwa-resumed .app-titlebar-title{animation:none;}}
  @supports (padding-top: env(safe-area-inset-top)){
    @media (display-mode: standalone), (display-mode: fullscreen){
      :root{--app-titlebar-safe-top:env(safe-area-inset-top,0px);}
    }
    /* Pull-to-refresh indicator for PWA standalone mode */
    .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:13px;color:var(--muted);pointer-events:none;opacity:0;transform:translateY(-100%);transition:opacity .2s,transform .2s;background:var(--bg);border-bottom:1px solid var(--border);}
    .pull-to-refresh-indicator.active{opacity:1;transform:translateY(0);}
    .pull-to-refresh-indicator .ptr-icon{display:inline-block;transition:transform .2s;font-size:16px;}
    .pull-to-refresh-indicator .ptr-icon.ready{transform:rotate(180deg);color:var(--accent);}
    /* Reload and mobile new-chat titlebar controls with shared icon-button styles */
    .app-titlebar-new-chat,
    .app-titlebar-reload{display:none;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;background:none;border:none;color:var(--muted);border-radius:8px;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s;}
    .app-titlebar-new-chat:hover,
    .app-titlebar-reload:hover{background:var(--hover-bg);color:var(--text);}
    @media (display-mode: standalone), (display-mode: fullscreen){
      :root{--app-titlebar-safe-top:env(safe-area-inset-top,0px);}
      .app-titlebar-reload{display:inline-flex;}
    }
  }
  html{background:var(--sidebar);}
  body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
  .layout{display:flex;width:100%;flex:1 1 auto;min-height:0;}
  .app-titlebar{display:flex;align-items:center;justify-content:center;height:38px;flex-shrink:0;background:var(--sidebar);border-bottom:1px solid var(--border);padding:0 12px;padding-top:var(--app-titlebar-safe-top);padding-left:max(12px,env(safe-area-inset-left,0));padding-right:max(12px,env(safe-area-inset-right,0));box-sizing:content-box;font-size:12px;color:var(--muted);user-select:none;-webkit-app-region:drag;position:relative;z-index:20;}
  .app-titlebar-inner{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;justify-content:center;}
  .system-health-panel.insights-card{display:flex;flex-direction:column;gap:12px;color:var(--muted);}
  .system-health-panel.unavailable{display:none;}
  .system-health-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .system-health-sub{font-size:11px;color:var(--muted);margin-top:-4px;}
  .system-health-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);opacity:.88;}
  .system-health-panel.loading .system-health-dot{background:var(--muted);box-shadow:none;opacity:.55;}
  .system-health-status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700;border:1px solid var(--border);color:var(--muted);background:var(--surface);white-space:nowrap;}
  .system-health-metrics{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;min-width:0;}
  .system-health-metric{min-width:0;display:flex;flex-direction:column;gap:5px;padding:10px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
  .system-health-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;line-height:1;color:var(--muted);}
  .system-health-value{font-variant-numeric:tabular-nums;color:var(--text);font-weight:650;}
  .system-health-bar{height:5px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);border:1px solid color-mix(in srgb,var(--border) 75%,transparent);}
  .system-health-bar-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transition:width .25s ease;}
  .system-health-foot{font-size:11px;color:var(--muted);line-height:1.45;opacity:.82;}
  .app-titlebar-icon{display:inline-flex;align-items:center;color:var(--accent);}
  .app-titlebar-title{font-size:12px;font-weight:600;color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
  .app-titlebar-sub{font-size:10px;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;font-family:'SF Mono',ui-monospace,monospace;white-space:nowrap;flex-shrink:0;}
  .app-titlebar-sub[hidden]{display:none;}
  .app-titlebar-hamburger,.app-titlebar-spacer{display:none;width:32px;height:32px;flex-shrink:0;}
  .app-titlebar-hamburger{-webkit-app-region:no-drag;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);border-radius:8px;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s;}
  .app-titlebar-hamburger:hover{background:var(--hover-bg);color:var(--text);}
  .sidebar{width:300px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;transition:width .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease;}
  .sidebar-header{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
  .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,var(--accent-hover),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px var(--accent-bg-strong);}
  .sidebar-header h1{font-size:15px;font-weight:600;}
  .sidebar-section{padding:14px 14px 8px;}
  .new-chat-btn{width:100%;padding:9px 12px;border-radius:9px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s;margin-bottom:8px;font-weight:500;}
  .new-chat-btn:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
  .session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;overscroll-behavior-y:contain;touch-action:pan-y;overflow-anchor:none;}
  .sidebar-search{position:relative;padding:8px 12px;flex-shrink:0;}
  .session-search-field{position:relative;display:flex;align-items:center;width:100%;}
  .sidebar-search input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 10px 7px 32px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;box-sizing:border-box;}
  .session-search input{padding-right:34px;}
  .sidebar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
  .sidebar-search input::placeholder{color:var(--muted);opacity:.7;}
  .sidebar-search-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);opacity:.7;pointer-events:none;}
  .session-search .sidebar-search-icon{left:10px;}
  .session-search .session-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:1;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:.78;}
  .session-search-clear[hidden]{display:none;}
  .session-search-clear svg{width:14px;height:14px;}
  .session-search-clear:hover,.session-search-clear:focus-visible{background:var(--hover);color:var(--text);opacity:1;}
  .session-search-clear:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  /* Inline session title edit */
  .session-title-input{flex:1;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px var(--accent-bg-strong);font-family:inherit;}
  /* padding-right was 86px to reserve space for the absolute-positioned
     timestamp + action button (which appears on hover). Now that .session-time
     lives in the flex flow of .session-title-row, the timestamp sits at the
     row's right edge naturally, so no reservation is needed at rest. The
     action button (.session-actions, position:absolute, 26x26 at right:6px)
     and attention indicator (26x26 at right:6px) still need 40px reserved
     when they're visible — covered by the hover / streaming / unread /
     menu-open / focus-within rule below. */
  .session-item{padding:8px 8px;margin-bottom:2px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);transition:background .15s,color .15s,transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .15s ease;display:flex;align-items:flex-start;gap:8px;min-width:0;position:relative;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform:translate3d(var(--session-swipe-offset,0),var(--session-reflow-offset,0),0);}
  .session-item.streaming,.session-item.unread,.session-item.needs-attention,.session-item:focus-within,.session-item.menu-open{padding-right:40px;}
  .session-item.needs-attention{box-shadow:inset 3px 0 0 var(--warning);background:color-mix(in srgb,var(--warning) 8%,transparent);}
  .session-item.attention-approval{box-shadow:inset 3px 0 0 var(--error);background:color-mix(in srgb,var(--error) 9%,transparent);}
  .session-item.attention-clarify{box-shadow:inset 3px 0 0 var(--warning);background:color-mix(in srgb,var(--warning) 8%,transparent);}
  @media (hover:hover){.session-item:hover{background:var(--hover-bg);color:var(--text);}}
  .session-item.long-pressing{background:var(--hover-bg);color:var(--text);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent);animation:session-long-press .4s cubic-bezier(.2,.8,.2,1) both;}
  .session-item.swiping-right{background:color-mix(in srgb,var(--warning) 16%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--warning) 48%,transparent);}
  .session-item.swiping-left{background:color-mix(in srgb,var(--error) 14%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--error) 48%,transparent);}
  .session-swipe-affordance{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:var(--session-swipe-reveal,0px);padding:0;box-sizing:border-box;opacity:0;overflow:hidden;transform:translate3d(calc(-1 * var(--session-swipe-offset,0px)),0,0);pointer-events:none;z-index:0;}
  .session-swipe-affordance-right{left:0;color:#fff;background:transparent;border-radius:0;align-items:flex-start;transform-origin:left center;--session-swipe-action-color:var(--warning);}
  .session-swipe-affordance-left{right:0;color:#fff;background:transparent;border-radius:0;align-items:flex-end;transform-origin:right center;--session-swipe-action-color:var(--error);}
  .session-item.swiping-right .session-swipe-affordance-right,.session-item.swiping-left .session-swipe-affordance-left{opacity:var(--session-swipe-progress,0);}
  .session-text,.session-state-indicator,.session-actions{z-index:1;}
  .session-swipe-action-stack{width:calc(var(--session-swipe-badge-size,34px) + var(--session-swipe-badge-stretch,0px));max-width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;}
  .session-swipe-badge{width:calc(var(--session-swipe-badge-size,34px) + var(--session-swipe-badge-stretch,0px));height:var(--session-swipe-badge-size,34px);border-radius:999px;background:var(--session-swipe-action-color);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;overflow:hidden;}
  .session-swipe-badge svg{display:block;width:var(--session-swipe-icon-size,18px);height:var(--session-swipe-icon-size,18px);stroke-width:2.2;}
  .session-swipe-label{min-width:58px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--muted);font-size:10px;font-weight:600;line-height:1;transform:scale(var(--session-swipe-label-scale,1));transform-origin:top center;}
  .session-swipe-affordance-right .session-swipe-action-stack{transform:translateX(6px);}
  .session-swipe-affordance-left .session-swipe-action-stack{transform:translateX(-6px);}
  .session-item.dragging{transition:background .15s,color .15s,box-shadow .15s ease;will-change:transform;}
  .session-item.session-reflowing{transition:background .15s,color .15s,transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .15s ease;will-change:transform;}
  .session-item.swipe-committed,
  .session-item.swipe-removing{transition:background .15s,color .15s,transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .15s ease;will-change:transform;}
  .session-item.swipe-removing{overflow:hidden;}
  .session-item.session-swipe-returning{animation:sessionSwipeReturn .5s cubic-bezier(.22,.61,.36,1) both;will-change:transform,opacity;}
  .session-item.swipe-committed .session-swipe-affordance{transition:opacity .18s ease,transform .18s ease;}
  /* Suppress hover highlight during drag to avoid visual noise mid-scroll */
  .session-item.dragging:hover{background:transparent;color:var(--muted);}
  .session-item.dragging.swiping-right{background:color-mix(in srgb,var(--warning) 16%,var(--surface));}
  .session-item.dragging.swiping-left{background:color-mix(in srgb,var(--error) 14%,var(--surface));}
  /* Restore hover padding-right only for mouse (hover:hover) devices.
     Touch/iPad (hover:none) must NOT expand padding-right on :hover —
     the expansion causes a layout-reflow mid-tap that moves session-actions
     under the finger, triggering stopPropagation and swallowing navigation. */
  @media (hover:hover){:root:not(.dark) .session-item:hover{background:var(--hover-bg);color:var(--text);}.session-item:hover{padding-right:40px;}}
  .session-item.active{background:var(--accent-bg);color:var(--accent);}
  .session-item.active.swiping-right{background:color-mix(in srgb,var(--warning) 20%,var(--accent-bg));}
  .session-item.active.swiping-left{background:color-mix(in srgb,var(--error) 18%,var(--accent-bg));}
  .session-item.archived .session-swipe-affordance-right{--session-swipe-action-color:var(--success);}
  .session-item.archived.swiping-right,.session-item.archived.dragging.swiping-right{background:color-mix(in srgb,var(--success) 16%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--success) 48%,transparent);}
  .session-item.active.archived.swiping-right{background:color-mix(in srgb,var(--success) 20%,var(--accent-bg));}
  .session-item.streaming .session-title{color:var(--accent);}
  .session-item.streaming .session-title-row{color:var(--text);}
  .session-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden;}
  .session-title-row{display:flex;align-items:center;gap:6px;min-width:0;}
  .session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);user-select:none;}
  .session-search-hit{border-radius:4px;background:var(--accent-bg);color:var(--accent-text);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .08em;}
  .session-search-preview{font-size:11px;line-height:1.35;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;opacity:.9;}
  .session-search-hit-preview{background:var(--accent-bg);color:var(--accent-text);}
  .session-item.active .session-title{color:var(--accent-text);}
  .session-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .session-item.active .session-search-preview{color:var(--accent-text);opacity:.72;}
  .session-item.active .session-search-hit{background:var(--accent-bg-strong);color:var(--accent-text);}
  .session-item.active .session-meta{color:var(--accent-text);opacity:.8;}
  .session-state-indicator{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:10px;height:10px;color:var(--accent);visibility:hidden;}
  .session-attention-indicator{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;z-index:1;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;}
  .session-item:hover .session-attention-indicator,.session-item:focus-within .session-attention-indicator,.session-item.menu-open .session-attention-indicator{opacity:0;visibility:hidden;}
  .session-state-indicator.is-streaming,.session-state-indicator.is-unread,.session-state-indicator.is-attention-approval,.session-state-indicator.is-attention-clarify,.session-state-indicator.is-attention-generic{visibility:visible;}
  .session-state-indicator.is-attention-approval{color:var(--error);}
  .session-state-indicator.is-attention-clarify{color:var(--warning);}
  .session-state-indicator.is-attention-generic{color:var(--warning);}
  .session-state-indicator::before{content:"";display:block;flex-shrink:0;}
  .session-state-indicator.is-streaming::before{
    width:100%;
    height:100%;
    border:2px solid transparent;
    border-top-color:currentColor;
    border-right-color:currentColor;
    border-radius:50%;
    animation:spin 1s linear infinite;
  }
  .session-state-indicator.is-unread::before{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
  }
  .session-state-indicator.is-attention-approval::before,.session-state-indicator.is-attention-clarify::before,.session-state-indicator.is-attention-generic::before{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent);
  }
  .session-attention-indicator.is-streaming::before{
    width:10px;
    height:10px;
  }
  .session-attention-indicator.is-unread::before{
    width:8px;
    height:8px;
  }
  /* Timestamp lives in the flex flow of .session-title-row (not absolute) so
     the title's flex:1 bound stops at the timestamp's left edge and stops
     running underneath it. margin-left:auto pushes it to the row's right
     edge, keeping the visual position the user already expects. */
  .session-time{
    display:inline-flex;
    margin-left:auto;
    color:var(--muted);
    font-size:10px;
    white-space:nowrap;
    flex-shrink:0;
  }
  .session-time.is-hidden{display:none;}
  .session-item:hover .session-time,.session-item:focus-within .session-time,.session-item.menu-open .session-time{display:none;}
  /* ── Session action trigger + dropdown ── */
  .session-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;}
  .session-item:hover .session-actions,.session-item:focus-within .session-actions,.session-item.menu-open .session-actions{opacity:1;pointer-events:auto;}
  .session-item.streaming:not(:hover):not(:focus-within):not(.menu-open) .session-actions,.session-item.unread:not(:hover):not(:focus-within):not(.menu-open) .session-actions{opacity:0;pointer-events:none;}
  .session-actions-trigger{width:26px;height:26px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s;}
  .session-actions-trigger:hover{background:var(--hover-bg);color:var(--text);}
  .session-actions-trigger.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--text);}
  .session-actions-trigger svg{display:block;}
  .session-action-menu{display:block;position:fixed;left:0;top:0;right:auto;bottom:auto;min-width:220px;max-width:min(280px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:999;overflow:hidden;max-height:calc(100vh - 16px);overflow-y:auto;transform-origin:top right;will-change:opacity,transform;}
  .session-action-menu.open-animated{animation:session-menu-in .45s cubic-bezier(.2,.8,.2,1);}
  .session-action-menu.open{display:block;}
  .session-action-opt{width:100%;background:none;border:none;text-align:left;font:inherit;color:var(--text);flex-direction:row!important;gap:0!important;padding:0!important;}
  .session-action-opt .ws-opt-action{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;padding:8px 14px;}
  .session-action-opt .ws-opt-icon{color:var(--muted);transition:color .12s,opacity .12s;flex-shrink:0;display:flex;align-items:center;width:16px;}
  .session-action-opt:hover .ws-opt-icon{color:var(--text);opacity:1;}
  .session-action-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .session-action-meta{font-size:11px;color:var(--muted);line-height:1.3;white-space:normal;opacity:.72;}
  .session-action-opt.is-active{background:var(--accent-bg);}
  .session-action-opt.is-disabled{opacity:.55;cursor:not-allowed;}
  .session-action-opt.is-disabled:hover{background:transparent;}
  .session-action-opt.danger:hover{background:rgba(239,83,80,.08);}
  .session-action-opt.danger .ws-opt-icon,.session-action-opt.danger .ws-opt-name{color:var(--error);}
  @media (prefers-reduced-motion:reduce){
    .session-action-menu{animation:none;will-change:auto;}
    .session-item,.session-item.dragging,.session-item.session-reflowing,.session-item.swipe-committed,.session-item.swipe-removing{transition:none;}
    .session-item.long-pressing,.session-item.session-swipe-returning{animation:none;}
    .session-item.session-list-flip-enter{animation:none;}
    .session-state-indicator.is-attention-approval:not(.is-streaming):not(.is-unread)::before{animation:none;}
  }
  /* Hide overlay during inline rename */
  .session-item:has(.session-title-input) .session-actions{display:none;}
  @keyframes session-menu-in{from{opacity:0;transform:translate3d(0,-4px,0) scale(.985);}to{opacity:1;transform:translate3d(0,0,0) scale(1);}}
  @keyframes session-long-press{from{filter:brightness(1);}to{filter:brightness(1.08);}}
  @keyframes sessionSwipeReturn{0%{opacity:.62;transform:translate3d(var(--session-swipe-return-offset,32px),var(--session-reflow-offset,0),0) scale(.985);}100%{opacity:1;transform:translate3d(0,var(--session-reflow-offset,0),0) scale(1);}}
  @keyframes newflash{0%{background:var(--accent-bg-strong);color:var(--accent);}100%{background:transparent;color:var(--muted);}}
  @keyframes sessionListFlipIn{0%{opacity:0;transform:perspective(700px) rotateX(-8deg) translateY(10px) scale(.985);}100%{opacity:1;transform:perspective(700px) rotateX(0) translateY(0) scale(1);}}
  @keyframes sessionAttentionPulse{0%,100%{filter:saturate(1);box-shadow:0 0 0 1px color-mix(in srgb,var(--error) 42%,transparent),0 0 0 0 color-mix(in srgb,var(--error) 18%,transparent);}50%{filter:saturate(1.12);box-shadow:0 0 0 1px color-mix(in srgb,var(--error) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--error) 10%,transparent);}}
  @keyframes spin{to{transform:rotate(360deg);}}
  .session-item.new-flash{animation:newflash 1.4s ease-out forwards;}
  .session-item.session-list-flip-enter{animation:sessionListFlipIn .28s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:center top;}
  /* Collapsible date group headers */
  .session-date-header{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px 4px;cursor:pointer;user-select:none;opacity:.8;transition:opacity .15s;}
  .session-date-header:hover{opacity:1;}
  .session-date-header.pinned{color:var(--accent);}

  /* ── Batch select mode ── */
  .session-select-toggle{font-size:11px;padding:6px 10px;color:var(--muted);cursor:pointer;text-align:center;opacity:.6;transition:opacity .15s;user-select:none;margin-top:4px;border-radius:6px;}
  .session-select-toggle:hover{opacity:1;background:var(--hover-bg);}
  .session-select-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;margin-bottom:4px;flex-shrink:0;}
  .batch-exit-btn{width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0;flex-shrink:0;}
  .batch-exit-btn:hover{background:var(--hover-bg);color:var(--text);}
  .batch-select-all-btn{font-size:11px;border:none;border-radius:6px;background:transparent;color:var(--accent);cursor:pointer;padding:3px 8px;font-weight:600;}
  .batch-select-all-btn:hover{background:var(--accent-bg);}
  .session-select-cb-wrapper{display:flex;align-items:center;flex-shrink:0;padding:2px;}
  .session-select-cb{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0;}
  .session-item.selected{background:var(--accent-bg);color:var(--accent-text);}
  .session-item.selected .session-title{color:var(--accent-text);}
  .session-item.selected .session-meta{color:var(--accent-text);opacity:.8;}
  .batch-action-bar{display:none;margin:0 10px 8px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);align-items:stretch;gap:6px;font-size:12px;flex-wrap:wrap;}
  .batch-count{font-weight:600;color:var(--accent);width:100%;white-space:nowrap;}
  .batch-action-btn{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;padding:6px 8px;font-size:12px;font-weight:500;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;flex:1 1 auto;}
  .batch-action-btn:hover{background:var(--hover-bg);border-color:var(--border2);}
  .batch-action-btn-danger{color:var(--error,#e94560);border-color:var(--error,#e94560);}
  .batch-action-btn-danger:hover{background:rgba(233,69,96,.1);}
  .session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;transform:rotate(0deg);}
  .session-date-caret.collapsed{transform:rotate(-90deg);}
  .app-dialog-overlay{position:fixed;inset:0;background:rgba(7,12,19,.62);backdrop-filter:blur(6px);z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;}
  .app-dialog{width:min(460px,100%);background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));border:1px solid var(--accent-bg-strong);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.45);padding:18px 18px 16px;color:var(--text);}
  .app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
  .app-dialog-title{font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--text);}
  .app-dialog-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;transition:background .15s,color .15s;}
  .app-dialog-close:hover{background:rgba(255,255,255,.09);color:var(--text);}
  .app-dialog-desc{font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-wrap;}
  .app-dialog-input{width:100%;margin-top:14px;padding:11px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:10px;color:var(--text);font-size:14px;outline:none;box-sizing:border-box;}
  .app-dialog-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
  .app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap;}
  .app-dialog-btn{display:inline-flex;align-items:center;justify-content:center;min-width:104px;padding:10px 14px;border-radius:10px;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;}
  .app-dialog-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);}
  .app-dialog-btn.confirm{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text);}
  .app-dialog-btn.confirm:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
  .app-dialog-btn.confirm.danger{border-color:var(--error);background:rgba(239,83,80,.12);color:var(--error);}
  .app-dialog-btn.confirm.danger:hover{background:rgba(239,83,80,.2);border-color:var(--error);}
  .app-dialog-btn:focus-visible,.app-dialog-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .toast{pointer-events:none;position:fixed;top:24px;right:24px;left:auto;bottom:auto;transform:translateY(-6px);display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--surface));color:var(--accent-text);font-size:13px;font-weight:500;padding:10px 12px 10px 16px;border-radius:10px;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 6px 24px rgba(0,0,0,.12);letter-spacing:.01em;max-width:min(520px,calc(100vw - 48px));}
  .toast.show{opacity:1;transform:translateY(0);pointer-events:auto;}
  .toast.success{background:color-mix(in srgb,var(--success) 14%,var(--surface));border-color:color-mix(in srgb,var(--success) 45%,var(--surface));color:var(--success);}
  .toast.error{background:color-mix(in srgb,var(--error) 14%,var(--surface));border-color:color-mix(in srgb,var(--error) 45%,var(--surface));color:var(--error);}
  .toast-message{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap;}
  .toast-copy,.toast-dismiss{border:1px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:4px 8px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;opacity:.85;}
  .toast-copy:hover,.toast-copy:focus-visible,.toast-dismiss:hover,.toast-dismiss:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent);outline:none;}
  .toast.warning{background:color-mix(in srgb,var(--warning) 14%,var(--surface));border-color:color-mix(in srgb,var(--warning) 45%,var(--surface));color:var(--warning);}
  .onboarding-overlay{position:fixed;inset:0;z-index:1050;background:rgba(7,12,19,.78);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;}
  .onboarding-card{width:min(980px,100%);max-height:min(760px,94vh);overflow:auto;border:1px solid var(--accent-bg-strong);border-radius:24px;background:linear-gradient(180deg,rgba(20,30,44,.98),rgba(11,17,27,.98));box-shadow:0 24px 80px rgba(0,0,0,.45);}
  .onboarding-shell{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);}
  .onboarding-sidebar{padding:28px 24px;border-right:1px solid var(--border);background:linear-gradient(180deg,var(--accent-bg),transparent);}
  .onboarding-sidebar h2{font-size:26px;line-height:1.15;margin-top:10px;margin-bottom:12px;letter-spacing:-.03em;}
  .onboarding-badge{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;background:var(--accent-bg);color:var(--accent-text);}
  .onboarding-sidebar p{font-size:13px;color:var(--muted);line-height:1.7;}
  .onboarding-steps{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
  .onboarding-step{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid transparent;background:rgba(255,255,255,.02);}
  .onboarding-step.active{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .onboarding-step.done{background:var(--accent-bg);}
  .onboarding-step-index{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.08);color:var(--text);flex-shrink:0;}
  .onboarding-step.done .onboarding-step-index{background:var(--accent-bg-strong);color:var(--accent-text);}
  .onboarding-step.active .onboarding-step-index{background:var(--accent-bg);color:var(--accent-text);}
  .onboarding-step-title{font-size:13px;font-weight:700;color:var(--text);}
  .onboarding-step-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
  .onboarding-main{padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;min-width:0;}
  .onboarding-status{display:none;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;border:1px solid var(--border2);background:rgba(255,255,255,.04);}
  .onboarding-status.info{color:var(--text);}
  .onboarding-status.success{color:var(--accent-text);border-color:var(--accent-bg);background:var(--accent-bg);}
  .onboarding-status.warn{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .onboarding-body{display:flex;flex-direction:column;gap:16px;}
  .onboarding-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
  .onboarding-check{padding:14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:5px;}
  .onboarding-check strong{font-size:13px;color:var(--text);}
  .onboarding-check span{font-size:12px;color:var(--muted);line-height:1.5;}
  .onboarding-check.ok{border-color:var(--accent-bg);background:var(--accent-bg);}
  .onboarding-check.warn{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .onboarding-field{display:flex;flex-direction:column;gap:6px;}
  .onboarding-field span{font-size:12px;font-weight:700;color:var(--text);}
  .onboarding-field input,.onboarding-field select{margin-bottom:0;padding:10px 12px;border-radius:10px;font-size:13px;background:var(--input-bg);border:1px solid var(--border2);color:var(--text);}
  .onboarding-copy{font-size:12px;color:var(--muted);line-height:1.7;}
  /* Onboarding probe (#1499) — Test connection button + status banner */
  .onboarding-probe-row{display:flex;justify-content:flex-end;margin-top:-2px;}
  .onboarding-probe-btn{padding:6px 12px;font-size:12px;font-weight:600;border-radius:8px;background:var(--input-bg);border:1px solid var(--border2);color:var(--text);cursor:pointer;}
  .onboarding-probe-btn:hover:not(:disabled){border-color:var(--accent);}
  .onboarding-probe-btn:disabled{opacity:.55;cursor:wait;}
  .onboarding-probe-banner{margin:6px 0 0;padding:8px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--input-bg);}
  .onboarding-probe-banner.onboarding-probe-ok{border-color:#1f8a4f;color:#9ce0b4;background:rgba(31,138,79,.12);}
  .onboarding-probe-banner.onboarding-probe-probing{color:var(--muted);}
  .onboarding-probe-banner.onboarding-probe-error{border-color:#9c3a3a;color:#f5a3a3;background:rgba(156,58,58,.12);}
  /* Onboarding api-key keyless hint (#1499 third sub-bug) — subtle muted text */
  /* sized below the input so it reads as inline help, not a banner. */
  .onboarding-api-key-help{margin:4px 0 0;font-size:11px;color:var(--muted);font-style:italic;}
  .onboarding-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
  .onboarding-summary div{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);display:flex;flex-direction:column;gap:5px;}
  .onboarding-summary strong{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  .onboarding-summary span{font-size:13px;color:var(--text);word-break:break-word;}
  .onboarding-oauth-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:4px;}
  .onboarding-oauth-card p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5;}
  .onboarding-oauth-card strong{font-size:13px;color:var(--text);}
  .onboarding-oauth-card code{font-size:12px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;}
  .onboarding-oauth-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
  .onboarding-oauth-ready{border-color:var(--accent-bg);background:var(--accent-bg);}
  .onboarding-oauth-ready .onboarding-oauth-icon{color:var(--accent);}
  .onboarding-oauth-pending{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .onboarding-oauth-pending .onboarding-oauth-icon{color:#c9a84c;}
  .onboarding-actions{display:flex;justify-content:space-between;gap:10px;margin-top:auto;}
  .onboarding-actions .sm-btn{padding:10px 16px;}
  .reconnect-banner{display:none;background:var(--surface);border:1px solid var(--accent-bg-strong);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--accent-text);display:none;align-items:center;justify-content:space-between;gap:12px;}
  .reconnect-banner.visible{display:flex;}
  .reconnect-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--accent-bg-strong);border:1px solid var(--accent-bg-strong);color:var(--accent-text);cursor:pointer;}
  .reconnect-btn:hover{background:var(--accent-bg-strong);}
  .offline-banner{position:fixed;left:0;right:0;top:0;z-index:1200;display:none;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,var(--surface));background:color-mix(in srgb,var(--surface) 88%,var(--accent));color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.22);backdrop-filter:blur(10px);}
  .offline-banner.visible{display:flex;}
  .offline-copy{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;line-height:1.35;}
  .offline-copy strong{color:var(--accent-text);font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
  .offline-copy span{color:var(--muted);}
  .offline-action{flex-shrink:0;padding:7px 13px;border-radius:9px;border:1px solid var(--accent-bg-strong);background:var(--accent-bg);color:var(--accent-text);font-size:12px;font-weight:700;cursor:pointer;}
  .offline-action:hover{background:var(--accent-bg-strong);}
  .offline-action[disabled]{cursor:wait;opacity:.65;}
  .agent-health-banner{position:sticky;bottom:0;z-index:4;display:none;align-items:center;justify-content:space-between;gap:12px;margin:10px auto 0;max-width:var(--msg-max);width:calc(100% - 40px);padding:12px 16px;border:1px solid color-mix(in srgb,var(--error) 55%,var(--surface));border-radius:12px;background:color-mix(in srgb,var(--error) 14%,var(--surface));color:var(--text);box-shadow:0 10px 32px rgba(0,0,0,.16);}
  .agent-health-banner.visible{display:flex;}
  .agent-health-copy{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;line-height:1.35;}
  .agent-health-copy strong{color:var(--error);font-size:13px;}
  .agent-health-copy span{color:var(--muted);}
  .agent-health-dismiss{flex-shrink:0;padding:6px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--error) 45%,var(--surface));background:color-mix(in srgb,var(--error) 10%,var(--surface));color:var(--error);font-size:12px;font-weight:600;cursor:pointer;}
  .agent-health-dismiss:hover{background:color-mix(in srgb,var(--error) 18%,var(--surface));}
  /* ── Update banner ── */
  .update-banner{display:none;background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;width:calc(100% - 24px);box-sizing:border-box;font-size:13px;color:var(--accent-text);align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;overflow-wrap:anywhere;}
  .update-banner.visible{display:flex;}
  #updateMsg,#updateWhatsNewLinks,#updateSummaryPanel,#updateSummaryDiffLinks{max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
  #updateSummaryPanel{max-height:min(34vh,260px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;}
  #updateWhatsNewLinks{white-space:normal!important;margin-left:0!important;}
  .update-banner>div:last-child{margin-left:auto;}
  @media (max-width:600px){.update-banner{width:calc(100% - 16px);padding:10px 12px;gap:10px;}.update-banner>div:last-child{width:100%;justify-content:flex-end;}}
  .update-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);cursor:pointer;transition:background .15s;}
  .update-btn:hover{background:var(--accent-bg-strong);}
  .update-primary{background:var(--accent-bg-strong);border-color:var(--accent);}
  .update-btn:disabled{opacity:0.5;cursor:not-allowed;}
  /* ── Composer flyout (approval/clarify slide up from behind composer) ── */
  .composer-flyout{position:relative;height:0;z-index:1;}
  .composer-wrap.terminal-dock-visible .composer-flyout{z-index:4;}
  /* ── Approval card ── */
  .approval-card{position:absolute;left:0;right:0;bottom:-24px;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;}
  .approval-card.visible{pointer-events:auto;z-index:3;}
  .approval-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--accent-bg-strong);border-radius:14px;padding:16px 18px 40px;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.32,.72,.16,1),opacity .25s ease;}
  .approval-card.visible .approval-inner{transform:translateY(0);opacity:1;}
  .approval-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--error);}
  .approval-collapse{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border2);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;padding:0;cursor:pointer;}
  .approval-collapse:hover{color:var(--text);border-color:var(--accent-bg-strong);}
  .approval-collapse svg{width:14px;height:14px;display:block;}
  .approval-collapse:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
  .approval-card.collapsed{max-height:56px;bottom:8px;}
  .approval-card.collapsed .approval-inner{max-height:48px;overflow:hidden;padding:10px 14px;}
  .approval-card.collapsed .approval-header{margin-bottom:0;}
  .approval-card.collapsed .approval-desc,.approval-card.collapsed .approval-cmd,.approval-card.collapsed .approval-counter,.approval-card.collapsed .approval-btns{display:none;}
  .approval-desc{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.5;}
  .approval-cmd{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:var(--pre-text);white-space:pre-wrap;word-break:break-all;margin-bottom:14px;max-height:120px;overflow-y:auto;}
  .approval-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .approval-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
  .approval-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2);}
  .approval-btn:active{transform:translateY(0);box-shadow:none;}
  .approval-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
  /* ── YOLO skip-all button (approval-btn variant) ── */
  .approval-btn.yolo{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.3);color:#f59e0b;}
  .approval-btn.yolo:hover{background:rgba(245,158,11,0.22);border-color:rgba(245,158,11,0.5);color:#fbbf24;}
  /* ── YOLO pill in composer footer ── */
  .yolo-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.35);cursor:pointer;transition:all .15s;line-height:1.4;white-space:nowrap;}
  .yolo-pill:hover{background:rgba(245,158,11,0.25);border-color:rgba(245,158,11,0.5);transform:translateY(-1px);}
  .yolo-pill:active{transform:translateY(0);}
  .yolo-pill-icon{font-size:12px;}
  .yolo-pill-label{font-size:10px;}
  /* ── Queue flyout (same slide-up pattern as approval-card) ── */
  .queue-card{position:absolute;left:0;right:0;bottom:0;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;z-index:2;}
  .queue-card.visible{pointer-events:auto;}
  /* When queue is visible, add bottom padding to messages so last bubble isn't covered */
  .messages.queue-open{padding-bottom:var(--queue-card-height,280px);}
  /* Terminal flyout reserves transcript space so recent messages stay readable above it. */
  .messages.terminal-open{padding-bottom:var(--terminal-card-height,320px);scroll-padding-bottom:var(--terminal-card-height,320px);transition:padding-bottom .26s cubic-bezier(.2,.8,.2,1);}
  .messages.terminal-collapsed{padding-bottom:var(--terminal-dock-height,72px);scroll-padding-bottom:var(--terminal-dock-height,72px);transition:padding-bottom .22s cubic-bezier(.2,.8,.2,1);}
  .messages.handoff-dock-visible{padding-bottom:var(--handoff-dock-height,72px);scroll-padding-bottom:var(--handoff-dock-height,72px);transition:padding-bottom .22s cubic-bezier(.2,.8,.2,1);}
  .messages.clarify-open{padding-bottom:var(--clarify-card-height,320px);scroll-padding-bottom:var(--clarify-card-height,320px);transition:padding-bottom .22s cubic-bezier(.2,.8,.2,1);}
  .messages.clarify-collapsed{padding-bottom:var(--clarify-dock-height,72px);scroll-padding-bottom:var(--clarify-dock-height,72px);}
  .messages.approval-open{padding-bottom:var(--approval-card-height,260px);scroll-padding-bottom:var(--approval-card-height,260px);transition:padding-bottom .22s cubic-bezier(.2,.8,.2,1);}
  .messages.approval-collapsed{padding-bottom:var(--approval-dock-height,72px);scroll-padding-bottom:var(--approval-dock-height,72px);}
  .messages.terminal-expanding-from-dock{transition:none!important;}
  .queue-card-inner{background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;contain:paint;transform:translateY(100%);opacity:0;transition:transform .35s cubic-bezier(.32,.72,.16,1),opacity .2s ease;overflow:hidden;max-height:240px;overflow-y:auto;padding-bottom:4px;}
  .queue-card.visible .queue-card-inner{transform:translateY(0);opacity:1;}
  .queue-card-header{display:flex;align-items:center;gap:8px;padding:9px 14px 8px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  .queue-card-header-actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
  .queue-card-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--muted);font-size:11px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;}
  .queue-card-btn:hover{background:var(--hover-bg);color:var(--text);}
  .queue-card-icon-btn{display:inline-flex;align-items:center;padding:3px;border-radius:5px;border:none;background:none;color:var(--muted);cursor:pointer;opacity:.5;transition:opacity .12s,background .12s;}
  .queue-card-icon-btn:hover{opacity:1;background:var(--hover-bg);}
  .queue-card-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:grab;}
  .queue-card-row:last-child{border-bottom:none;}
  .queue-card-row:hover{background:color-mix(in srgb,var(--hover-bg) 50%,transparent);}
  .queue-card-drag{color:var(--muted);opacity:.3;flex-shrink:0;line-height:0;}
  .queue-card-text{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;cursor:text;min-width:0;}
  .queue-card-text:focus{white-space:pre-wrap;overflow:auto;text-overflow:clip;}
  .queue-card-badges{display:flex;align-items:center;gap:5px;flex-shrink:0;font-size:10px;color:var(--muted);opacity:.6;}
  .queue-card-file-badge{display:flex;align-items:center;gap:2px;}
  .approval-btn-icon{font-size:13px;line-height:1;}
  .approval-btn-label{line-height:1;}
  .approval-kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:4px;font-size:10px;font-family:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--muted);line-height:1.4;margin-left:2px;}
  .approval-btn.once{border-color:var(--accent);color:var(--accent-text);background:var(--accent-bg);}
  .approval-btn.once:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
  .approval-btn.session{border-color:var(--accent-bg-strong);color:var(--accent-text);}
  .approval-btn.session:hover{background:var(--accent-bg);border-color:var(--accent);}
  .approval-btn.always{border-color:var(--accent-bg-strong);color:var(--accent-text);}
  .approval-btn.always:hover{background:var(--accent-bg);border-color:var(--accent);}
  .approval-btn.deny{border-color:var(--error);color:var(--error);}
  .approval-btn.deny:hover{background:rgba(239,83,80,.12);border-color:var(--error);}
  .approval-btn.loading{opacity:.7;cursor:wait;}
  /* ── Clarify card ── */
  .clarify-card{position:absolute;left:0;right:0;bottom:-24px;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;overflow:hidden;pointer-events:none;max-height:clamp(180px,min(68vh,calc(100vh - 220px)),420px);}
  .clarify-card.visible{pointer-events:auto;}
  .clarify-card .clarify-inner{max-height:clamp(180px,min(68vh,calc(100vh - 220px)),420px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.32,.72,.16,1),opacity .25s ease,max-height .2s ease;}
  @supports (height:100dvh){.clarify-card,.clarify-card .clarify-inner{max-height:clamp(180px,min(68dvh,calc(100dvh - 220px)),420px);}}
  .clarify-card.visible .clarify-inner{transform:translateY(0);opacity:1;}
  .clarify-inner{background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--accent-bg-strong);border-radius:12px;padding:12px 14px 36px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset;}
  .clarify-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.01em;}
  .clarify-countdown{margin-left:auto;min-width:42px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700;}
  .clarify-collapse{margin-left:4px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border2);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;padding:0;cursor:pointer;}
  .clarify-collapse:hover,.clarify-collapse:focus-visible{color:var(--text);border-color:var(--accent-bg-strong);outline:none;}
  .clarify-collapse svg{width:14px;height:14px;display:block;}
  .clarify-countdown.urgent{color:var(--error);box-shadow:inset 0 -2px 0 var(--error);border-radius:2px;}
  .clarify-question{font-size:14px;color:var(--text);line-height:1.7;white-space:pre-wrap;margin-bottom:12px;}
  .clarify-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
  .clarify-choice{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid var(--accent-bg-strong);background:var(--accent-bg);color:var(--accent-text);cursor:pointer;transition:all .15s;white-space:normal;text-align:left;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;}
  .clarify-choice:hover{background:var(--accent-bg-strong);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.18);}
  .clarify-choice:focus-visible{outline:2px solid var(--accent-bg);outline-offset:2px;}
  .clarify-choice-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:var(--accent-bg-strong);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:11px;font-weight:800;flex-shrink:0;line-height:1;}
  .clarify-choice-badge.other{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
  .clarify-choice-text{flex:1;line-height:1.45;min-width:0;}
  .clarify-choice.other{border-color:var(--accent-bg-strong);color:var(--accent-text);background:var(--accent-bg);}
  .clarify-choice.other:hover{background:var(--accent-bg-strong);border-color:var(--accent);}
  .clarify-response{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .clarify-input{flex:1;min-width:220px;padding:10px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);font:inherit;outline:none;transition:all .15s;}
  .clarify-input:focus{border-color:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg);background:var(--hover-bg);}
  .clarify-submit{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:10px 14px;border-radius:8px;border:1px solid var(--accent-bg-strong);background:var(--accent-bg);color:var(--accent-text);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;}
  .clarify-submit:hover{background:var(--accent-bg-strong);transform:translateY(-1px);}
  .clarify-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
  .clarify-submit.loading{opacity:.75;cursor:wait;}
  .clarify-hint{margin-top:8px;font-size:11px;line-height:1.45;color:var(--muted);}
  .clarify-card.visible .clarify-question{padding-left:1px;}
  .clarify-card.collapsed{max-height:56px;bottom:8px;}
  .clarify-card.collapsed .clarify-inner{max-height:48px;overflow:hidden;padding:10px 14px;}
  .clarify-card.collapsed .clarify-header{margin-bottom:0;}
  .clarify-card.collapsed .clarify-question,.clarify-card.collapsed .clarify-choices,.clarify-card.collapsed .clarify-response,.clarify-card.collapsed .clarify-hint{display:none;}
  /* Left rail (desktop primary navigation) */
  .rail{display:none;width:48px;flex-shrink:0;flex-direction:column;align-items:center;gap:4px;padding:8px 0;background:var(--sidebar);border-right:1px solid var(--border);}
  .rail-btn{width:36px;height:36px;border-radius:8px;border:none;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:color .15s,background .15s;flex-shrink:0;padding:0;}
  .rail-btn:hover{color:var(--text);background:var(--hover-bg);}
  .rail-btn.active{color:var(--accent-text);background:var(--accent-bg);}
.rail-btn.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 2px 2px 0;}
  /* Custom tooltip — replaces native title="" for faster, more polished display.
     Native browser tooltips have a ~1.5s hover delay that reads as "no tooltip
     exists" (#1775). Our custom tooltip appears at ~150ms hover, dismisses
     instantly, and renders above all sidebar/panel stacking contexts. */
  /* Usage: add data-tooltip="Label" and class="has-tooltip". For i18n, pair
     with data-i18n-title; static/i18n.js will sync the localized value into
     data-tooltip and clear any stale native title attribute. */
  /* Design choice: no arrow/caret. At 11px text size and 5px arrow size the
     triangle reads as visual noise rather than a connector — VS Code, Slack,
     and Linear's rail tooltips also skip the arrow. Spatial proximity (8px
     gap) is enough to associate the tooltip with the trigger. */
  .has-tooltip{position:relative;}
  .has-tooltip::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--accent-bg-strong);color:var(--text);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:1500;box-shadow:0 8px 24px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04) inset;opacity:0;transition:opacity .14s ease;transition-delay:0s;}
  .has-tooltip:hover::after,.has-tooltip:focus-visible::after{opacity:1;transition-delay:.15s;}
  /* For bottom-positioned tooltips (panel header buttons, non-rail elements) */
  .has-tooltip--bottom::after{left:50%;top:auto;bottom:auto;transform:translateX(-50%);top:calc(100% + 8px);}
  /* For bottom-positioned tooltips on a trigger that sits flush with its
     container's right edge — anchors the tooltip's RIGHT edge to the trigger
     so the label extends inward (to the left) instead of overflowing past the
     panel edge. Used for the `+` New conversation button at the right of the
     chat panel header. Pairs with `--bottom`; do not apply both. */
  .has-tooltip--bottom-right::after{left:auto;right:0;top:calc(100% + 8px);bottom:auto;transform:none;}
  /* For right-edge elements (e.g. send button) — tooltip flips to the LEFT
     of the trigger so it doesn't extend past the viewport edge. */
  .has-tooltip--left::after{left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%);}
  @media(prefers-reduced-motion:reduce){.has-tooltip::after{transition:none;transition-delay:0s;}}
.rail-spacer{flex:1;min-height:8px;}
.rail .nav-tab{flex:0 0 auto;padding:0;font-size:inherit;border-bottom:none;overflow:visible;}
/* Note: previously this block had `.rail .nav-tab:hover::after { content: none }`
   to suppress the legacy `.nav-tab:hover::after { content: attr(data-label) }`
   tooltip (line ~681 below) on the desktop rail. After v0.51.17 migrated the
   rail to the custom `.has-tooltip` system, that suppression rule survived and
   blocked the new tooltips because `.rail .nav-tab:hover::after` (specificity
   0,3,1) outweighs `.has-tooltip:hover::after` (0,2,1) and `content:none`
   removes the pseudo-element entirely. Solution: scope the legacy
   `.nav-tab:hover::after` data-label tooltip to `.sidebar-nav` (mobile) only
   (see line ~681). The rail rule is no longer needed. */
  .rail .nav-tab.active::before{content:'';position:absolute;left:-6px;top:50%;bottom:auto;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 2px 2px 0;}
  .dashboard-link{position:relative;}
  .dashboard-link-visible{display:flex!important;}
  .dashboard-external-badge{position:absolute;right:5px;top:5px;width:9px;height:9px;border-radius:2px;border:1px solid var(--accent);background:var(--sidebar);box-shadow:0 0 0 2px var(--sidebar);opacity:.95;}
  .dashboard-external-badge::after{content:'';position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);}
  .sidebar-nav .dashboard-external-badge{right:8px;top:7px;width:8px;height:8px;}
  @media(min-width:641px){.rail{display:flex;}.sidebar > .sidebar-nav{display:none;}}
  /* Sidebar navigation tabs */
  .sidebar-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:6px 8px 0;gap:2px;}
  .nav-tab{flex:1;padding:10px 4px 8px;font-size:20px;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:color .15s;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
  .nav-tab:hover{color:var(--text);}
  /* Legacy hover-tooltip — kept for the mobile `.sidebar-nav` only, where it
     positions ABOVE the trigger (the bar is at the top of the sidebar so a
     bottom-positioned tooltip would sink into the panel content). The desktop
     `.rail` buttons opt out of this rule so the `.has-tooltip` system can run
     unobstructed; rail buttons carry no `data-label`, so an unscoped rule
     would render an empty styled box on hover. */
  .sidebar-nav .nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
  .nav-tab.active{color:var(--accent-text);}
  .nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;}
  /* Panel content areas (swapped by tab) */
  .panel-view{display:none;flex:1;overflow:hidden;flex-direction:column;}
  .panel-view.active{display:flex;}
  /* Cron panel */
  .cron-list{flex:1;overflow-y:auto;padding:8px;}
  .cron-gateway-notice{margin:8px 8px 0;}
  .cron-item{width:100%;min-width:0;box-sizing:border-box;border-radius:10px;border:1px solid var(--border);margin-bottom:6px;overflow:hidden;transition:border-color .15s,background .15s;background:rgba(255,255,255,.02);cursor:pointer;}
  .cron-item:hover{border-color:var(--border2);}
  .cron-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;}
  .cron-name{flex:1;font-size:13px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cron-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;flex-shrink:0;}
  .cron-profile-badge{font-size:10px;font-weight:650;padding:2px 7px;border-radius:99px;flex-shrink:0;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--border);color:var(--muted);background:var(--surface-subtle);}
  .cron-status.active{background:rgba(34,197,94,.15);color:var(--success);}
  .cron-status.paused{background:var(--accent-bg-strong);color:var(--accent-text);}
  .cron-status.disabled{background:rgba(255,255,255,.07);color:var(--muted);}
  .cron-status.error{background:rgba(239,83,80,.12);color:var(--error);}
  .cron-status.attention{background:rgba(245,158,11,.16);color:rgba(245,158,11,.95);}
  .cron-body{display:none;padding:0 12px 10px;border-top:1px solid var(--border);overflow:hidden;}
  .cron-body.open{display:block;}
  .cron-schedule{font-size:11px;color:var(--muted);margin:8px 0 6px;}
  .cron-prompt{font-size:11px;color:var(--muted);line-height:1.55;max-height:80px;overflow-y:auto;background:rgba(0,0,0,.2);padding:6px 8px;border-radius:6px;white-space:pre-wrap;margin-bottom:8px;box-sizing:border-box;}
  .cron-actions{display:flex;gap:6px;margin-bottom:8px;}
  .cron-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;}
  .cron-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
  .cron-btn.run{border-color:var(--accent-bg);color:var(--accent-text);}
  .cron-btn.run:hover{background:var(--accent-bg);}
  .cron-btn.pause{border-color:var(--accent-bg-strong);color:var(--accent-text);}
  .cron-last{font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:8px;max-height:220px;overflow-y:auto;white-space:pre-wrap;line-height:1.5;word-break:break-word;}
  .cron-last-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
  /* Skills panel */
  .skills-list{flex:1;overflow-y:auto;padding:0 8px 8px;}
  .skills-category{margin-bottom:4px;}
  .skills-cat-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 6px 4px;cursor:pointer;display:flex;align-items:center;gap:2px;user-select:none;}
  .skills-cat-header:hover{color:var(--text);}
  .cat-chevron{flex-shrink:0;width:12px;height:12px;}
  .skill-item{width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;overflow:hidden;max-height:200px;opacity:1;}
  .skill-item:hover{background:var(--hover-bg);color:var(--text);}
  .skill-item.active{background:var(--accent-bg);color:var(--accent-text);}
  .skill-name{font-weight:500;flex-shrink:0;}
  .skill-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;opacity:.7;}
  .skill-item.disabled{opacity:.5;}
  .skill-item.disabled .skill-name{opacity:.45;}
  .skill-toggle{flex-shrink:0;width:28px;height:14px;border-radius:7px;border:1px solid var(--border2);background:var(--border);cursor:pointer;position:relative;transition:all .15s;margin-top:3px;}
  .skill-toggle.enabled{background:var(--accent-bg-strong);border-color:var(--accent);}
  .skill-toggle::after{content:'';position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform .15s;}
  .skill-toggle.enabled::after{transform:translateX(14px);background:var(--accent-text);}
  /* Memory panel */
  .memory-panel{flex:1;overflow-y:auto;padding:12px;}
  .memory-section{margin-bottom:16px;}
  .memory-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}
  .memory-mtime{font-size:10px;font-weight:400;text-transform:none;opacity:.6;}
  .memory-content{font-size:12px;line-height:1.7;color:var(--text);}
  .memory-content p{margin-bottom:6px;}
  .memory-empty{color:var(--muted);font-size:12px;font-style:italic;}
  .memory-detail-mtime{font-size:11px;color:var(--muted);opacity:.7;margin-bottom:12px;}
  .notes-source-card{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);padding:14px 16px;margin:0 0 12px;}
  .notes-source-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
  .notes-source-tools{margin:10px 0 0 18px;padding:0;color:var(--muted);font-size:12px;line-height:1.55;}
  .notes-search-card{gap:12px;}
  .notes-search-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .notes-search-form select,.notes-search-form input{min-height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);padding:6px 10px;}
  .notes-search-form input{flex:1;min-width:220px;}
  .notes-search-form button{min-height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
  .notes-search-form button:hover{border-color:var(--accent);color:var(--accent);background:var(--panel-soft);}
  .notes-search-form button:disabled{opacity:.55;cursor:default;}
  .notes-search-results{display:grid;gap:8px;}
  .notes-ai-recent-list{display:grid;gap:8px;margin-top:10px;}
  .notes-ai-recent-head strong{display:inline-flex;align-items:center;gap:7px;}
  .notes-ai-recent-item span{display:inline-flex;align-items:center;gap:6px;}
  .notes-result-card{display:grid;gap:4px;width:100%;text-align:left;border:1px solid var(--border);border-radius:12px;background:var(--panel-soft);color:var(--text);padding:10px 12px;cursor:pointer;}
  .notes-result-card:hover{border-color:var(--accent);}
  .notes-result-card span{color:var(--muted);font-size:.9rem;}
  .notes-preview-card .memory-content{max-height:420px;overflow:auto;}
.field-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;opacity:.8;}
  select{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 28px 8px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
  select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);}
  optgroup{color:var(--muted);font-size:11px;font-weight:700;}
  option{background:var(--bg);color:var(--text);padding:6px;}
  .sidebar-actions{display:flex;gap:6px;}
  .sm-btn{flex:1;padding:8px 0;border-radius:8px;font-size:11px;font-weight:500;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
  .sm-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);border-color:rgba(255,255,255,.15);}
  .sm-btn:disabled{opacity:.45;cursor:not-allowed;}
  /* Help tab (Settings → Help): icon-led resource cards (#3518) */
  .help-cards{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
  .help-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--border2);border-radius:10px;background:var(--input-bg);transition:border-color .15s,background .15s;}
  .help-card:hover{border-color:var(--accent);}
  .help-card-icon{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--accent-soft,rgba(255,255,255,.06));color:var(--accent);}
  .help-card-body{min-width:0;flex:1;}
  .help-card-title{font-size:13.5px;font-weight:650;color:var(--text);margin-bottom:3px;}
  .help-card-desc{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:11px;}
  .help-card-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:7px 13px;border-radius:7px;font-size:12px;font-weight:600;background:var(--input-bg);border:1px solid var(--border);color:var(--text);transition:all .15s;}
  /* On hover the button fills with --accent; text must contrast against that fill.
     --accent-text is an accent-on-background link color (often == --accent), so using
     it here produces same-color text on the accent fill (invisible — e.g. slate/gold/
     ares/mono dark). --bg is the page background, which --accent is designed to contrast
     against, so background-colored text on an accent fill stays readable in every theme. */
  .help-card-link:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);}
  .help-card-link:hover svg{opacity:1;}
  .help-card-link svg{flex:0 0 auto;opacity:.8;}
  .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;background:var(--main-bg);}
  .topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--topbar-bg);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:10;}
  .topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-meta{font-size:11px;color:var(--muted);margin-top:3px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
  .chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--border2);color:var(--muted);font-weight:500;}
  .workspace-toggle-btn{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer;}
  .workspace-toggle-btn.active{color:var(--accent-text);border-color:var(--accent-bg);background:var(--accent-bg);}
  .workspace-toggle-btn:disabled{opacity:.38;cursor:not-allowed;}
  .chip.model{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .messages-shell{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;}
  .messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:0;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;overflow-anchor:none;}
  /* Overlay scroll controls so they do not affect the transcript's native scroll geometry. */
  .scroll-to-bottom-btn{position:absolute;right:20px;bottom:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border2);background:var(--code-bg);color:var(--muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:10;transition:color .12s,border-color .12s,background .12s,transform .12s;}
  .scroll-to-bottom-btn:hover{color:var(--text);border-color:var(--border);background:var(--hover-bg);}
  .scroll-to-bottom-btn.scroll-to-bottom-btn--new-message{width:auto;min-width:32px;max-width:min(220px,calc(100% - 40px));border-radius:999px;font-size:12px;font-weight:600;gap:5px;padding:0 11px;color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
  .scroll-to-bottom-btn.scroll-to-bottom-btn--new-message .session-jump-btn__text{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .session-jump-btn__text{display:none;}
  .session-jump-btn{position:absolute;right:20px;height:32px;border-radius:999px;border:1px solid var(--border2);background:var(--code-bg);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:11;transition:color .12s,border-color .12s,background .12s,opacity .12s,transform .12s;}
  .session-jump-btn:hover{color:var(--text);border-color:var(--border);background:var(--hover-bg);transform:translateY(-1px);}
  .session-jump-btn--start{top:16px;}
  .messages.session-nav-enabled .scroll-to-bottom-btn{width:auto;min-width:32px;border-radius:999px;font-size:12px;font-weight:600;gap:5px;padding:0 11px;}
  .messages.session-nav-enabled .scroll-to-bottom-btn:hover{transform:translateY(-1px);}
  .messages.session-nav-enabled .session-jump-btn__text{display:inline;}
  .messages-inner{margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
  @media(min-width:1400px){.messages-inner{max-width:1100px;}}
  @media(min-width:1800px){.messages-inner{max-width:1200px;}}
  .msg-row{padding:10px 0;}
  .msg-row+.msg-row{border-top:none;}
  /* Steer indicator: transient banner below messages, removed on renderMessages rebuild */
  .steer-indicator{display:flex;align-items:baseline;gap:8px;padding:10px 0;opacity:.65;font-style:italic;color:var(--accent-text);}
  .steer-indicator .steer-body{white-space:pre-wrap;word-break:break-word;}
  .steer-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:4px;padding:1px 6px;vertical-align:middle;line-height:1.6;font-style:normal;flex-shrink:0;}
  .msg-role{font-size:12px;font-weight:500;letter-spacing:.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
  .msg-role.user{color:var(--accent);}
  .msg-role.assistant{color:var(--accent-text);opacity:.6;}
  .role-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
  .role-icon.user{background:var(--accent-bg);color:var(--accent-text);border:1px solid var(--accent-bg-strong);}
  .role-icon.assistant{background:var(--accent-bg-strong);color:var(--accent-text);border:1px solid var(--accent-bg-strong);}
  .msg-body{font-size:var(--message-body-font-size);line-height:var(--message-body-line-height);color:var(--text);padding-left:30px;max-width:680px;overflow-wrap:anywhere;}
  .msg-body p{margin-bottom:10px;}.msg-body p:last-child{margin-bottom:0;}
  .msg-body td p,.msg-body th p{margin:0;}
  .msg-body ul,.msg-body ol{margin:6px 0 10px 20px;}.msg-body li{margin-bottom:3px;}
  .msg-body h1,.msg-body h2,.msg-body h3,.msg-body h4,.msg-body h5,.msg-body h6{font-weight:700;color:var(--strong,var(--text));line-height:1.3;}
  .msg-body h1{font-size:24px;margin:24px 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px;}
  .msg-body h2{font-size:20px;margin:22px 0 10px;border-bottom:1px solid var(--border);padding-bottom:4px;}
  .msg-body h3{font-size:17px;margin:20px 0 8px;}
  .msg-body h4{font-size:15px;margin:18px 0 8px;}
  .msg-body h5{font-size:14px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:0.04em;}
  .msg-body h6{font-size:13px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  /* First-heading-of-message: collapse the top margin so it doesn't push the
     entire message down (the row already has spacing). */
  .msg-body > h1:first-child,.msg-body > h2:first-child,.msg-body > h3:first-child,
  .msg-body > h4:first-child,.msg-body > h5:first-child,.msg-body > h6:first-child{margin-top:0;}
  .msg-body strong{color:var(--strong);font-weight:600;}.msg-body em{color:var(--em);font-style:italic;}
  .msg-body code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:var(--message-code-font-size);background:var(--code-inline-bg);padding:1px 5px;border-radius:4px;color:var(--code-text);}
  .msg-body pre{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:10px 0;}
  .msg-body pre code{background:none;padding:0;border-radius:0;color:var(--pre-text);font-size:var(--message-pre-code-font-size);line-height:1.6;}
  .provider-error-details{margin:12px 0 0;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
  .provider-error-details>summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;padding:8px 12px;}
  .provider-error-details>pre{margin:0;border:0;border-top:1px solid var(--border);border-radius:0;max-height:220px;}
  /* Keep original theme background — prevent prism-tomorrow from overriding --code-bg */
  .msg-body pre[class*="language-"],.msg-body pre code[class*="language-"]{background:var(--code-bg) !important;}
  /* Fix #1463: Prism YAML grammar collapses newlines inside token spans — force pre */
  .msg-body pre code.language-yaml .token{white-space:pre !important;}
  @media(max-width:700px){
    .msg-body pre,.preview-md pre{white-space:pre-wrap !important;overflow-x:hidden !important;overflow-wrap:anywhere !important;}
    .msg-body pre code,.preview-md pre code{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:break-word !important;}
    .msg-body pre code .token,.preview-md pre code .token{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:inherit !important;}
    .diff-block .diff-line{white-space:pre-wrap !important;overflow-wrap:anywhere !important;word-break:break-word !important;}
  }
  .pre-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px 8px;background:var(--input-bg);border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
  .pre-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.4;}
  .msg-body .pre-header+pre{border-radius:0 0 10px 10px;border-top:none;margin-top:0;}
  /* Diff/patch viewer */
  .diff-block{margin:0;counter-reset:diff-line;}
  .diff-block .diff-line{display:block;padding:0 16px;min-height:1.4em;white-space:pre;}
  .diff-block .diff-plus{background:rgba(34,197,94,.1);color:#22c55e;}
  .diff-block .diff-minus{background:rgba(239,68,68,.1);color:#ef4444;}
  .diff-block .diff-hunk{color:var(--muted);font-style:italic;background:rgba(99,102,241,.06);}
  .diff-inline-load{color:var(--muted);font-size:13px;padding:8px 12px;border:1px dashed var(--border);border-radius:8px;margin:6px 0;}
  .diff-inline{margin:6px 0;}
  .diff-inline-error{color:#ef4444;font-size:13px;padding:8px 12px;border:1px solid rgba(239,68,68,.2);border-radius:8px;margin:6px 0;}
  /* JSON/YAML tree viewer */
  .code-tree-wrap{position:relative;}
  .tree-view{padding:4px 0;font-family:'JetBrains Mono',monospace;font-size:13px;}
  .tree-hidden{display:none;}
  .tree-toggle-btn{background:none;border:1px solid var(--border);border-radius:4px;padding:1px 8px;font-size:10px;color:var(--muted);cursor:pointer;font-weight:600;}
  .tree-toggle-btn:hover{color:var(--text);border-color:var(--muted);}
  .tree-node{padding-left:16px;}
  .tree-collapsible{cursor:pointer;user-select:none;color:var(--muted);}
  .tree-collapsible:hover{color:var(--text);}
  .tree-bracket{color:var(--muted);}
  .tree-count{color:var(--muted);font-size:11px;margin:0 2px;}
  .tree-children{border-left:1px solid var(--border);margin-left:8px;}
  .tree-collapsed{display:none;}
  .tree-key{color:#60a5fa;font-weight:600;}
  .tree-colon{color:var(--muted);}
  .tree-str{color:#4ade80;}
  .tree-num{color:#60a5fa;}
  .tree-bool{color:#fbbf24;}
  .tree-null{color:var(--muted);font-style:italic;}
  .tree-comma{color:var(--muted);}
  .tree-item{line-height:1.6;}
  .msg-body blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--muted);font-style:italic;margin:10px 0;}
  .msg-body blockquote p{margin:0;}
  .msg-body a{color:var(--blue);text-decoration:underline;}
  .msg-body hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
  .msg-body table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;}
  .msg-body th{background:rgba(255,255,255,.07);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
  .msg-body td{padding:5px 10px;border:1px solid rgba(255,255,255,.06);}
  .msg-body tr:nth-child(even){background:rgba(255,255,255,.03);}
  .markdown-table-filter{display:block;width:min(260px,100%);margin:8px 0 4px;padding:5px 8px;border:1px solid var(--border2);border-radius:6px;background:var(--input-bg);color:var(--text);font:inherit;font-size:12px;}
  .markdown-table-filter:focus{outline:1px solid var(--accent);outline-offset:1px;}
  .markdown-table-sort{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:20px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:left;cursor:pointer;}
  .markdown-table-sort:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}
  .markdown-table-sort-label{min-width:0;}
  .markdown-table-sort-indicator{flex:0 0 10px;color:var(--muted);font-size:10px;line-height:1;text-align:center;}
  /* Neutral (unsorted) affordance: a faint up/down glyph so it's discoverable
     that the header is clickable/sortable. Becomes a solid ▲/▼ when active. */
  .markdown-table-sort-indicator::before{content:"\2195";opacity:0.45;}
  .markdown-table-sort:hover .markdown-table-sort-indicator::before{opacity:0.8;}
  .msg-body th[aria-sort="ascending"] .markdown-table-sort-indicator::before{content:"\25B2";opacity:1;}
  .msg-body th[aria-sort="descending"] .markdown-table-sort-indicator::before{content:"\25BC";opacity:1;}
  /* Mobile: tables are already width-constrained at <=640px and tapping a tiny
     squished header to sort is impractical on a phone. Reserving width for the
     sort glyph + the filter row made narrow headers wrap MORE than the plain
     table did (regression). So below the mobile breakpoint, render headers as
     plain text — no reserved glyph width, no filter row — matching the
     pre-feature mobile layout exactly. Sortable/filter stays a desktop/tablet
     affordance where it has room and a pointer. */
  @media (max-width: 640px){
    .markdown-table-sort{display:inline;width:auto;gap:0;min-height:0;}
    .markdown-table-sort-indicator{display:none;}
    .markdown-table-filter{display:none;}
  }
  /* #486: inline code inside table cells needs scaled sizing to avoid overflow/clipping */
  .msg-body td code,.msg-body th code{font-size:0.85em;padding:1px 4px;vertical-align:baseline;}
  /* KaTeX math rendering */
  .katex-block{display:block;text-align:center;margin:12px 0;overflow-x:auto;}
  .katex-inline{display:inline;}
  .katex-block .katex-html{text-align:center;}
  .msg-body .katex{font-size:1.1em;}
  .msg-body .katex-display{margin:8px 0;}
  .msg-files{display:flex;flex-wrap:wrap;gap:6px;padding-left:30px;margin-bottom:10px;}
  .msg-file-badge{display:flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--accent-text);}
  /* MEDIA: inline image rendering (feat #450) */
  .msg-media-img{display:inline-block;width:120px;height:90px;border-radius:6px;margin:3px 4px 3px 0;cursor:zoom-in;object-fit:cover;border:1px solid var(--border);vertical-align:bottom;transition:opacity .15s;}
  .msg-media-img:hover{opacity:.85;}
  .img-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:lb-in .15s ease;}
  @keyframes lb-in{from{opacity:0}to{opacity:1}}
  .img-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 48px rgba(0,0,0,.6);cursor:default;}
  .img-lightbox-close{position:absolute;top:16px;right:20px;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
  .img-lightbox-close:hover{background:rgba(255,255,255,.22);}
  .img-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s;z-index:1;opacity:.6;}
  .img-lightbox-nav:hover{background:rgba(255,255,255,.28);opacity:1;}
  .img-lightbox-nav-prev{left:16px;}
  .img-lightbox-nav-next{right:16px;}
  .img-lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:14px;padding:4px 14px;border-radius:12px;pointer-events:none;}
  .msg-media-link{display:inline-flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:6px;padding:4px 10px;font-size:13px;color:var(--accent-text);text-decoration:none;}
  .msg-media-link:hover{background:var(--accent-bg-strong);}
  /* Generated local image artifact (#3220): clean inline image with a
     hover/focus-revealed Download button overlaid top-right. The image keeps
     its .msg-media-img lightbox-on-click behavior; no permanent card chrome —
     matches the ChatGPT/Claude/Gemini pattern of letting the image be the hero. */
  .msg-artifact-image{position:relative;display:inline-block;width:fit-content;max-width:min(360px,100%);vertical-align:bottom;margin:6px 4px 6px 0;line-height:0;}
  /* Generated images are the subject of the message, not a small attachment
     thumbnail — render them prominently at natural aspect ratio (the base
     .msg-media-img is a cropped 120x90 upload thumbnail). Capped + responsive so
     they never overflow the message column or a mobile viewport. Lightbox-on-click
     (cursor:zoom-in) is preserved. */
  .msg-artifact-image .msg-media-img{margin:0;display:block;width:auto;height:auto;max-width:min(360px,100%);max-height:360px;object-fit:contain;border-radius:8px;cursor:zoom-in;}
  .msg-artifact-download{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.25);box-shadow:0 1px 4px rgba(0,0,0,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;text-decoration:none;opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s,background .12s;pointer-events:none;}
  .msg-artifact-image:hover .msg-artifact-download,.msg-artifact-image:focus-within .msg-artifact-download{opacity:1;transform:translateY(0);pointer-events:auto;}
  .msg-artifact-download:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.4);}
  .msg-artifact-download:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--accent-bg-strong);outline-offset:1px;}
  @media (hover:none){.msg-artifact-download{opacity:1;pointer-events:auto;transform:none;}}

  /* ── Inline SVG rendering ── */
  .msg-media-svg{display:block;max-width:100%;height:auto;border-radius:6px;margin:6px 0;border:1px solid var(--border);background:var(--surface);}
  .msg-media-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px;user-select:none;}

  /* ── Inline audio/video media editor with speed controls ── */
  .msg-media-editor{display:flex;flex-direction:column;gap:8px;width:min(520px,100%);max-width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin:6px 0;}
  .msg-media-editor--audio{min-width:min(360px,100%);}
  .msg-media-player{width:100%;display:block;border-radius:8px;}
  .msg-media-video.msg-media-player{max-height:320px;object-fit:contain;background:#000;border:1px solid var(--border2);}
  .msg-media-audio.msg-media-player{height:36px;background:transparent;}
  .msg-media-meta{display:flex;align-items:center;gap:8px;min-width:0;font-size:11px;color:var(--muted);}
  .msg-media-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .media-speed-controls{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
  .media-speed-btn{border:1px solid var(--border2);background:var(--input-bg);color:var(--muted);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
  .media-speed-btn:hover{background:var(--hover-bg);color:var(--text);}
  .media-speed-btn.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}

  /* ── Composer attachment chips for media ── */
  .attach-thumb--svg{background:var(--surface);padding:2px;border-radius:4px;}
  .attach-chip--audio,.attach-chip--video{flex-direction:column;gap:4px;align-items:flex-start;padding:8px 10px;}
  .attach-chip--audio audio,.attach-chip--video video{width:100%;max-width:320px;border-radius:4px;}
  .attach-chip-media{font-size:12px;font-weight:600;color:var(--muted);}

  /* ── CSV table rendering ── */
  .csv-table-wrap{margin:6px 0;overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
  .csv-table{width:100%;border-collapse:collapse;font-size:13px;}
  .csv-table thead{position:sticky;top:0;z-index:1;}
  .csv-table th{background:var(--hover-bg);font-weight:600;text-align:left;padding:8px 12px;border-bottom:2px solid var(--border2);white-space:nowrap;user-select:none;}
  .csv-table td{padding:6px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
  .csv-table tbody tr:last-child td{border-bottom:none;}
  .csv-table tbody tr:hover{background:var(--hover-bg);}

  /* ── Excalidraw inline embed ── */
  .excalidraw-embed-wrap{margin:6px 0;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;}
  .excalidraw-canvas{padding:12px;overflow:auto;max-height:500px;}
  .excalidraw-svg{display:block;width:100%;height:auto;max-height:460px;}
  .excalidraw-empty{color:var(--muted);font-size:13px;padding:20px;text-align:center;}
  .excalidraw-open-link{font-size:11px;color:var(--accent);text-decoration:none;margin-left:auto;white-space:nowrap;}
  .excalidraw-open-link:hover{text-decoration:underline;}
  .thinking{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;padding-left:30px;}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.3;animation:pulse 1.4s ease-in-out infinite;}
  .dot:nth-child(2){animation-delay:.22s;}.dot:nth-child(3){animation-delay:.44s;}
  @keyframes pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:.8;transform:scale(1)}}
  .empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted);}
  .empty-state.no-suggestions .suggestion-grid{display:none}
  .empty-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--accent-bg),var(--accent-bg));border:1px solid var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--accent-text);margin-bottom:4px;box-shadow:0 4px 20px var(--accent-bg);}
  .empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;}
  .empty-state p{font-size:14px;text-align:center;max-width:320px;}
  .suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}
  .suggestion{padding:12px 14px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
  .suggestion:hover{background:var(--accent-bg);color:var(--text);border-color:var(--accent-bg);transform:translateX(2px);}
  /* ── Composer ── */
  .composer-wrap{padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
  .composer-box{max-width:clamp(780px,60vw,1100px);margin:0 auto;background:linear-gradient(var(--input-bg),var(--input-bg)),var(--bg);border:1px solid var(--border2);border-radius:16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;position:relative;z-index:2;}
  .composer-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
  .composer-wrap.drag-over .composer-box{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
  .drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:10px;background:linear-gradient(var(--input-bg),var(--input-bg)),var(--bg);border:2px dashed var(--accent);border-radius:16px;font-size:13.5px;font-weight:600;color:var(--accent-text);pointer-events:none;z-index:30;flex-direction:column;text-align:center;padding:8px;}
  .composer-wrap.drag-over .drop-hint{display:flex;}
  .drop-hint svg{opacity:.85;}
  .attach-tray{display:none;flex-wrap:wrap;gap:6px;padding:10px 14px 0;}
  .attach-tray.has-files{display:flex;}
  .attach-chip{display:flex;align-items:center;gap:5px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--accent-text);}
  .attach-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 3px;}
  .attach-chip button:hover{color:var(--accent);}
  .file-input-visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;overflow:hidden;}
  /* Image attachment chips show a thumbnail preview instead of a paperclip chip */
  .attach-chip--image{background:transparent;border-color:var(--border);padding:3px;border-radius:6px;}
  .attach-chip--audio,.attach-chip--video{max-width:260px;}
  .attach-media-icon{display:inline-flex;align-items:center;color:var(--accent-text);}
  .attach-chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .attach-thumb{width:56px;height:56px;object-fit:cover;border-radius:4px;display:block;cursor:zoom-in;transition:filter .12s ease, transform .12s ease;}
  @media (hover: hover) {
    .attach-thumb:hover{filter:brightness(1.05);transform:scale(1.04);}
  }
  textarea#msg{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:16px;line-height:1.65;padding:12px 16px 6px;resize:none;min-height:44px;max-height:200px;font-family:inherit;}
  textarea#msg::placeholder{color:var(--muted);}
  .composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 10px;position:relative;container-type:inline-size;container-name:composer-footer;}
  .composer-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .composer-left::-webkit-scrollbar{display:none;}
  .composer-divider{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;}
  /* Composer footer chip wraps share position:relative + flex:0 0 auto so
     they keep their natural width and let .composer-left handle overflow
     via horizontal scroll. flex-shrink:0 here is what fixes #2740 (chips
     were compressing past their content and visually overlapping). Each
     wrap declares its own display / gap below as needed. */
  .composer-profile-wrap,
  .composer-ws-wrap,
  .composer-reasoning-wrap,
  .composer-toolsets-wrap,
  .composer-model-wrap{position:relative;flex:0 0 auto;}
  .composer-profile-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
  .composer-profile-chip:hover{background-color:var(--hover-bg);}
  .composer-profile-chip.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
  .composer-profile-chip.switching{opacity:.65;cursor:wait;pointer-events:none;}
  .composer-profile-chip.switching .composer-profile-icon::after{content:'';display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px;}
  .composer-profile-chip.switching .composer-profile-icon{position:relative;}
  .composer-profile-icon,.composer-profile-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
  .composer-profile-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-ws-wrap{display:flex;align-items:center;gap:4px;}
  .composer-workspace-group{display:inline-flex;align-items:stretch;max-width:284px;border-radius:999px;overflow:hidden;background-color:transparent;border:1px solid var(--border2);transition:background-color .15s,border-color .15s;}
  .composer-workspace-group:hover{background-color:var(--hover-bg);}
  .composer-workspace-group:hover{border-color:var(--border2);}
  .composer-workspace-group:hover .composer-workspace-files-btn,
  .composer-workspace-group:hover .composer-workspace-chip{color:var(--text);}
  .composer-workspace-files-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px 8px 12px;background-color:transparent;border:none;border-left:1px solid transparent;border-radius:999px 0 0 999px;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
  .composer-workspace-files-btn:disabled{opacity:.45;cursor:not-allowed;}
  .composer-workspace-files-btn.active{color:var(--accent-text);background:var(--accent-bg);}
  .composer-workspace-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:200px;padding:8px 12px 8px 10px;border:none;border-left:1px solid transparent;border-radius:0 999px 999px 0;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,border-color .15s;}
  .composer-workspace-group:hover .composer-workspace-files-btn+.composer-workspace-chip{border-left-color:var(--border2);}
  .composer-workspace-chip:disabled{opacity:.45;cursor:not-allowed;}
  .composer-workspace-chip.active{color:var(--text);background:var(--accent-bg);}
  .composer-workspace-icon,.composer-workspace-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
  .composer-workspace-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-reasoning-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
  .composer-reasoning-chip.inactive{opacity:.78;}
  .composer-reasoning-chip:hover{color:var(--text);background-color:var(--hover-bg);}
  .composer-reasoning-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}
  .composer-reasoning-icon,.composer-reasoning-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
  .composer-reasoning-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-reasoning-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:140px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;padding:4px;overflow:hidden;}
  .composer-reasoning-dropdown.open{display:block;}
  .reasoning-option{padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap;transition:background-color .12s;}
  .reasoning-option:hover{background:rgba(255,255,255,.07);}
  .reasoning-option.selected{background:var(--accent-bg);}
  /* Toolsets chip — session-level toolset override (#493) */
  .composer-toolsets-wrap{display:none;}
  .composer-toolsets-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
  .composer-toolsets-chip:hover{color:var(--text);background-color:var(--hover-bg);}
  .composer-toolsets-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}
  .composer-toolsets-chip.has-custom{color:var(--accent);border-color:var(--accent-bg);}
  .composer-toolsets-icon,.composer-toolsets-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
  .composer-toolsets-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-toolsets-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:260px;max-width:320px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;padding:12px;overflow:hidden;}
  .composer-toolsets-dropdown.open{display:block;}
  .toolsets-dropdown-desc{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.4;}
  .toolsets-dropdown-state{font-size:12px;color:var(--text);margin-bottom:10px;padding:6px 10px;background:var(--hover-bg);border-radius:6px;word-break:break-all;}
  .toolsets-dropdown-input-row{margin-bottom:10px;}
  .toolsets-input{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);font-size:13px;outline:none;transition:border-color .15s;}
  .toolsets-input:focus{border-color:var(--accent);}
  .toolsets-input::placeholder{color:var(--muted);opacity:.7;}
  .toolsets-dropdown-actions{display:flex;gap:8px;justify-content:flex-end;}
  .toolsets-action-btn{padding:6px 14px;border-radius:6px;border:none;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .12s,color .12s;}
  .toolsets-apply-btn{background:var(--accent);color:#fff;}
  .toolsets-apply-btn:hover{opacity:.9;}
  .toolsets-clear-btn{background:transparent;color:var(--muted);border:1px solid var(--border2);}
  .toolsets-clear-btn:hover{background:var(--hover-bg);color:var(--text);}
  .composer-model-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
  .composer-model-chip:hover{color:var(--text);background-color:var(--hover-bg);}
  .composer-model-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}
  .composer-model-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-model-icon,.composer-model-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
  .composer-model-select{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
  .provider-quota-chip{display:inline-flex;align-items:center;gap:6px;height:34px;max-width:150px;padding:7px 10px;border:1px solid var(--border2);border-radius:999px;background:rgba(34,197,94,.10);color:var(--text);font-size:11px;font-weight:650;line-height:1;white-space:nowrap;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
  .provider-quota-chip[hidden]{display:none!important;}
  .provider-quota-chip:hover{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.35);}
  .provider-quota-chip-dot{width:6px;height:6px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12);flex:0 0 auto;}
  .provider-quota-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Hide the ambient quota chip below 1400px — the composer footer already
     has profile + workspace + model picker + reasoning + media + send and
     was getting cramped (model picker truncating from "Claude Sonnet 4 7"
     to "Claude Sonnet 4", workspace dropping more text) once the chip
     squeezed in. Mobile users get provider info via the dedicated
     mobile-config drawer; laptop desktop users can find quota in
     Settings → Providers (the chip's onclick target). Show only on wide
     desktop where there's genuine room. Aron's standing position on
     composer real estate (PR #1721, May 13 2026) reinforces this.

     Using 1399.98px rather than 1400px to avoid the one-pixel boundary
     overlap with the existing @media (min-width:1400px) `.messages-inner`
     rule at line 893 — at exactly 1400px both would fire, so the chip
     was hidden AT the wide-desktop boundary where it should first appear. */
  @media (max-width:1399.98px){
    .provider-quota-chip{display:none!important;}
  }
  /* Increased specificity (.icon-btn.composer-mobile-config-btn) to win the cascade
     against the later-in-source `.icon-btn { display:flex }` rule that this element
     also matches. Without this, the button shows at desktop width — see #1381 review. */
  .icon-btn.composer-mobile-config-btn{display:none;}
  .composer-mobile-config-btn.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--text);opacity:1;}
  .composer-mobile-config-panel{display:none;position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:180;padding:8px;gap:8px;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:0 -6px 28px rgba(0,0,0,.35);overflow:visible;}
  .composer-mobile-config-action{box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer;overflow:hidden;}
  .composer-mobile-config-action.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--text);}
  .composer-mobile-config-copy{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2;}
  /* The kicker labels (WORKSPACE / MODEL / REASONING / CONTEXT) duplicate the
     meaning the row icon already conveys, and at iPhone 14 width (390px) the
     ~60px copy column truncates them. Hide them inside the open panel — the
     icon + value gives a cleaner two-row layout per pill. The .context row
     keeps its kicker because it stretches to 100% width and has more value
     content (usage / tokens / threshold). See #1381 review feedback. */
  .composer-mobile-config-action:not(.composer-mobile-context-action) .composer-mobile-config-kicker{display:none;}
  .composer-mobile-config-kicker{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  .composer-mobile-config-value{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .composer-mobile-context-action{flex:1 0 100%;align-items:flex-start;cursor:default;overflow:visible;}
  .composer-mobile-context-copy{flex:1 1 auto;gap:2px;}
  .composer-mobile-context-detail{font-size:11px;color:var(--muted);white-space:normal;line-height:1.25;}
  .composer-mobile-context-compress{flex:0 0 auto;width:auto;max-width:128px;align-self:center;text-align:center;white-space:normal;}
  .composer-mobile-context-action.ctx-mid .composer-mobile-config-value{color:var(--warning);}
  .composer-mobile-context-action.ctx-high .composer-mobile-config-value{color:var(--error);}
  .composer-mobile-context-action.ctx-high .composer-mobile-context-compress{border-color:var(--error);color:var(--error);}
  .composer-right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
  .composer-status{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;}
  /* Context usage indicator */
  .ctx-indicator-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ctx-indicator{width:34px;height:34px;padding:0;border:none;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;}
  .ctx-indicator:hover{opacity:.88;transform:translateY(-1px);}
  .ctx-ring{position:relative;display:flex;width:24px;height:24px;align-items:center;justify-content:center;}
  .ctx-ring-svg{position:absolute;inset:0;width:24px;height:24px;transform:rotate(-90deg);}
  .ctx-ring-track,.ctx-ring-value{fill:none;stroke-width:3;}
  .ctx-ring-track{stroke:rgba(255,255,255,.12);}
  .ctx-ring-value{stroke:var(--muted);stroke-linecap:round;stroke-dasharray:61.261056745;stroke-dashoffset:61.261056745;transition:stroke-dashoffset .45s ease,stroke .25s ease;}
  .ctx-ring-center{position:relative;display:flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:999px;background:var(--bg);font-size:8px;font-weight:600;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;}
  .ctx-indicator.ctx-mid .ctx-ring-value{stroke:var(--warning);}
  .ctx-indicator.ctx-high .ctx-ring-value{stroke:var(--error);}
  .ctx-tooltip{position:absolute;right:0;bottom:calc(100% + 10px);min-width:210px;max-width:250px;padding:10px 12px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:11px;line-height:1.45;color:var(--muted);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30;}
  .ctx-tooltip::after{content:'';position:absolute;right:10px;top:100%;border-width:6px 6px 0 6px;border-style:solid;border-color:var(--surface) transparent transparent transparent;}
  .ctx-indicator-wrap:hover .ctx-tooltip,.ctx-indicator-wrap:focus-within .ctx-tooltip,.ctx-tooltip-active{opacity:1;transform:translateY(0);pointer-events:auto;}
  .ctx-tooltip-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;}
  .ctx-tooltip-line+.ctx-tooltip-line{margin-top:3px;}
  .ctx-tooltip-compress{margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);}
  .ctx-compress-btn{width:100%;padding:6px 10px;border:1px solid var(--border2);border-radius:8px;background:rgba(255,255,255,.05);color:var(--text);font-size:11px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s;}
  .ctx-compress-btn:hover{background:rgba(255,255,255,.1);border-color:var(--accent);}
  .ctx-indicator.ctx-high .ctx-compress-btn{border-color:var(--error);color:var(--error);}
  .ctx-indicator.ctx-high .ctx-compress-btn:hover{background:rgba(239,83,80,.12);}
  .cancel-btn{width:34px;height:34px;border-radius:50%;background:var(--error);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 10px rgba(0,0,0,.18);}
  .cancel-btn:hover{background:var(--error);transform:scale(1.06);box-shadow:0 4px 14px rgba(0,0,0,.25);filter:brightness(1.1);}
  .cancel-btn:active{transform:scale(.96);}
  .icon-btn{width:34px;height:34px;border-radius:8px;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;}
  .icon-btn{opacity:.75;}
  .icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text);opacity:1;}
  .mic-btn{transition:color .15s,background .15s;}
  .mic-btn.recording{color:var(--error);background:rgba(239,83,80,.12);animation:mic-pulse 1.2s ease-in-out infinite;}
  @keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,83,80,.3);}50%{box-shadow:0 0 0 6px rgba(239,83,80,0);}}
  .mic-status{font-size:11px;color:var(--error);padding:4px 12px;display:flex;align-items:center;gap:6px;}
  .mic-dot{width:6px;height:6px;border-radius:50%;background:var(--error);animation:mic-pulse 1.2s ease-in-out infinite;flex-shrink:0;}

  /* ── Turn-based voice mode (#1333) ── */
  .voice-mode-btn{transition:color .15s,background .15s;}
  .voice-mode-btn.active{color:var(--accent);background:rgba(var(--accent-rgb,99,102,241),.15);}
  .voice-mode-btn.active svg{filter:drop-shadow(0 0 3px rgba(var(--accent-rgb,99,102,241),.5));}
  .voice-mode-bar{font-size:11px;padding:4px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.05);}
  .voice-mode-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .voice-mode-indicator.listening{background:var(--error);animation:voice-mode-pulse 1s ease-in-out infinite;}
  .voice-mode-indicator.speaking{background:var(--accent);animation:voice-mode-pulse 1.5s ease-in-out infinite;}
  .voice-mode-indicator.thinking{background:var(--warning,#f59e0b);animation:voice-mode-pulse 2s ease-in-out infinite;}
  .voice-mode-label{color:var(--muted);font-size:11px;}
  @keyframes voice-mode-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.85);}}
  .status-text{font-size:11px;color:var(--muted);padding-left:4px;}
  .send-btn{width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 8px var(--accent-bg-strong);}
  .send-btn.stop,.send-btn.interrupt{background:var(--error);box-shadow:0 2px 10px rgba(0,0,0,.18);}
  .send-btn.steer{background:var(--purple,#8b5cf6);box-shadow:0 2px 10px rgba(139,92,246,.25);}
  .send-btn.queue{background:var(--accent);}
  .send-btn:hover{background:var(--accent-hover);transform:scale(1.08);box-shadow:0 4px 14px var(--accent-bg-strong);}
  .send-btn.stop:hover,.send-btn.interrupt:hover{background:var(--error);box-shadow:0 4px 14px rgba(0,0,0,.25);filter:brightness(1.1);}
  .send-btn.steer:hover{background:var(--purple,#8b5cf6);box-shadow:0 4px 14px rgba(139,92,246,.3);filter:brightness(1.08);}
  .send-btn:active{transform:scale(0.95);box-shadow:0 1px 4px var(--accent-bg);}
  .send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
  .send-btn.visible{animation:send-pop-in .18s cubic-bezier(.34,1.56,.64,1) forwards;}
  .composer-terminal-panel{position:absolute;left:0;right:0;bottom:-24px;width:min(calc(100% - 64px),720px);margin:0 auto;box-sizing:border-box;overflow:hidden;pointer-events:none;z-index:1;}
  .composer-terminal-panel.is-open,.composer-terminal-panel.is-collapsed{pointer-events:auto;}
  .composer-terminal-panel[hidden]{display:none!important;}
  .composer-terminal-inner{height:var(--composer-terminal-height,260px);min-height:180px;max-height:min(520px,50vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border2);border-radius:14px;background:var(--surface);box-shadow:0 12px 32px rgba(0,0,0,.22);padding-bottom:38px;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.32,.72,.16,1),opacity .25s ease;}
  .composer-terminal-panel.is-open .composer-terminal-inner{transform:translateY(0);opacity:1;}
  .composer-terminal-panel.is-expanding-from-dock .composer-terminal-inner{transition:opacity .18s ease;}
  .composer-terminal-panel.is-collapsed{bottom:-2px;width:min(calc(100% - 112px),560px);overflow:visible;z-index:4;}
  .composer-terminal-panel.is-collapsed .composer-terminal-inner{position:absolute;opacity:0;pointer-events:none;transform:translateY(100%);}
  .composer-terminal-dock{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.16);padding:7px 9px 7px 12px;backdrop-filter:blur(10px);transform:translateY(100%);opacity:0;transition:transform .32s cubic-bezier(.32,.72,.16,1),opacity .2s ease;}
  .composer-terminal-panel.is-collapsed .composer-terminal-dock{transform:translateY(0);opacity:.94;}
  .composer-terminal-dock[hidden]{display:none!important;}
  .composer-terminal-dock-title{min-width:0;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
  .composer-terminal-dock-dot{width:7px;height:7px;border-radius:999px;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 16%,transparent);flex:0 0 auto;}

  /* ── Handoff hint bar ── */
  .handoff-hint-container{position:absolute;left:0;right:0;bottom:-2px;width:min(calc(100% - 112px),560px);margin:0 auto;box-sizing:border-box;overflow:visible;pointer-events:none;z-index:3;}
  .handoff-hint-container.is-visible{pointer-events:auto;}
  .handoff-hint-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;border:1px solid var(--border);border-bottom:none;border-radius:13px 13px 0 0;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.16);backdrop-filter:blur(10px);padding:7px 12px 9px;cursor:pointer;transform:translateY(100%);opacity:0;transition:transform .32s cubic-bezier(.32,.72,.16,1),opacity .2s ease,background .15s ease,border-color .15s ease;}
  .handoff-hint-container.is-visible .handoff-hint-bar{transform:translateY(0);opacity:.94;}
  .handoff-hint-bar:hover{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:color-mix(in srgb,var(--border) 70%,var(--accent));}
  .handoff-hint-bar[hidden]{display:none!important;}
  .handoff-hint-text{min-width:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;}
  .handoff-hint-dot{width:7px;height:7px;border-radius:999px;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 16%,transparent);flex:0 0 auto;}
  .handoff-hint-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);text-transform:none;letter-spacing:0;font-weight:700;font-size:12px;}
  .handoff-hint-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;}
  .handoff-hint-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .handoff-hint-action,.handoff-hint-dismiss{border:none;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;line-height:1.2;padding:4px 6px;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease;}
  .handoff-hint-action:hover,.handoff-hint-dismiss:hover{background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--text);}
  #terminalDockWorkspaceLabel{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;}
  .composer-terminal-resize-handle{height:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:ns-resize;touch-action:none;background:linear-gradient(to bottom,rgba(255,255,255,.04),transparent);}
  .composer-terminal-resize-handle::before{content:"";width:52px;height:4px;border-radius:999px;background:var(--border2);opacity:.72;transition:opacity .15s,background .15s;}
  .composer-terminal-resize-handle:hover::before,.composer-terminal-resize-handle:focus-visible::before{opacity:1;background:var(--muted);}
  .composer-terminal-inner.is-resizing{transition:none;user-select:none;}
  .composer-terminal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.025);}
  .composer-terminal-title{min-width:0;display:flex;align-items:center;gap:6px;color:var(--text);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
  .composer-terminal-dot{color:var(--muted);font-weight:400;}
  #terminalWorkspaceLabel{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;}
  .composer-terminal-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .composer-terminal-action{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;padding:5px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:color .15s,background .15s,border-color .15s;}
  .composer-terminal-action:hover{color:var(--text);background:var(--hover-bg);border-color:var(--border2);}
  .composer-terminal-viewport{flex:1;min-height:0;overflow:hidden;background:var(--code-bg);padding:8px 10px;color:var(--pre-text);cursor:text;}
  .composer-terminal-surface{width:100%;height:100%;min-height:0;}
  .composer-terminal-surface .xterm{height:100%;padding:0;}
  .composer-terminal-surface .xterm-viewport{background:transparent!important;}
  .composer-terminal-surface .xterm-screen{height:100%;}
  @keyframes send-pop-in{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
  .upload-bar-wrap{display:none;height:3px;background:var(--hover-bg);border-radius:0 0 16px 16px;overflow:hidden;}
  .upload-bar-wrap.active{display:block;}
  .upload-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));width:0%;transition:width .3s ease;}
  /* container-type/name lets descendants run @container queries against the
     panel's width so the header can collapse less-essential elements as the
     user resizes the panel narrower. */
  .rightpanel{width:300px;background:var(--sidebar);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-width:0;opacity:1;transform:translateX(0);transform-origin:right center;transition:width .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease;container-type:inline-size;container-name:rightpanel;}
  .panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;overflow:visible;}
  .workspace-panel-title-group{grid-column:1;grid-row:1;display:flex;align-items:center;min-width:0;}
  .workspace-panel-title-group > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .workspace-panel-heading{cursor:default;border-radius:6px;padding:2px 4px;margin:-2px -4px;}
  .workspace-panel-heading.workspace-panel-heading--enabled{cursor:pointer;}
  .workspace-panel-heading.workspace-panel-heading--enabled:hover,
  .workspace-panel-heading.workspace-panel-heading--enabled:focus-visible{color:var(--text);background:var(--hover-bg);outline:none;}
  .git-badge{grid-column:1 / -1;grid-row:2;justify-self:start;font-size:9px;font-weight:600;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;letter-spacing:.02em;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;overflow:hidden;min-width:0;max-width:100%;}
  .topbar-source-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--accent-bg);color:var(--accent-text);font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:middle;}
  .git-badge.dirty{color:var(--accent-text);background:var(--accent-bg);}
  .panel-actions{grid-column:2;grid-row:1;display:flex;gap:4px;flex-shrink:0;margin-left:auto;}

  /* Crisp display:none at narrow widths so the header doesn't show a sliver
     of an ellipsised label or git badge — icons survive longest. */
  @container rightpanel (max-width: 220px){
    .git-badge{display:none !important;}
  }
  @container rightpanel (max-width: 160px){
    .workspace-panel-title-group{display:none;}
  }
  .panel-icon-btn{width:24px;height:24px;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
  .panel-icon-btn:hover{background:var(--hover-bg);color:var(--text);}
  .panel-icon-btn:disabled{opacity:.35;cursor:not-allowed;}
  .panel-icon-btn:disabled:hover{background:none;color:var(--muted);}
  /* File row actions (shown on hover) */
  /* file-item-actions removed: delete button is now a flex child */
  .file-action-btn{width:20px;height:20px;background:rgba(0,0,0,.4);border:none;border-radius:4px;color:var(--muted);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;}
  .file-action-btn:hover{color:var(--accent);}
  /* Breadcrumb navigation */
  .breadcrumb-bar{display:flex;align-items:center;gap:2px;padding:6px 12px;font-size:12px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;white-space:nowrap;}
  /* ── Workspace prefs kebab menu (#1793) ─────────────────────────── */
  /* Replaces the always-visible "Show hidden files" inline row that used
     to sit below the breadcrumb. The toggle now lives behind the kebab
     button in the panel-actions row; the small indicator next to the
     panel heading flags the non-default "hidden files visible" state. */
  .workspace-hidden-indicator{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 7px 2px 6px;background:var(--hover-bg);color:var(--muted);font-size:10px;line-height:1.3;border-radius:8px;cursor:pointer;user-select:none;font-weight:600;letter-spacing:.02em;text-transform:none;flex-shrink:0;transition:background .12s,color .12s;border:1px solid var(--border);}
  .workspace-hidden-indicator:hover{background:var(--accent-bg);color:var(--text);border-color:var(--accent-bg-strong,var(--border2));}
  .workspace-hidden-indicator[hidden]{display:none;}
  .workspace-hidden-indicator svg{flex-shrink:0;opacity:.85;}
  /* On narrow workspace panels (the default 300px width), hide the chip
     entirely — the kebab dot (rendered absolute over the kebab icon) is
     enough of a "non-default state" signal and costs zero horizontal
     space. The tooltip on the kebab itself still labels what's going on.
     On wider panels (resized by the user, or some future layout that
     gives the panel more room), the full chip with text appears alongside
     the heading. Uses the existing `rightpanel` container declared on
     .rightpanel. */
  @container rightpanel (max-width: 420px){
    .workspace-hidden-indicator{display:none!important;}
  }
  .workspace-panel-edge-toggle{position:fixed;right:10px;top:50%;transform:translateY(-50%) translateX(12px);z-index:120;width:34px;height:44px;border:1px solid var(--border2);border-radius:999px;background:var(--surface);color:var(--muted);box-shadow:0 10px 28px rgba(0,0,0,.22);display:none;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease,color .15s ease,background .15s ease,border-color .15s ease;}
  .workspace-panel-edge-toggle:hover{color:var(--text);background:var(--hover-bg);border-color:var(--accent);}
  .workspace-panel-edge-toggle:disabled{opacity:.3;cursor:not-allowed;transform:translateY(-50%);}
  /* Small accent dot on the kebab button when a non-default pref is on */
  #btnWorkspacePrefs{position:relative;}
  #btnWorkspacePrefs .workspace-prefs-dot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent-text);box-shadow:0 0 0 1.5px var(--surface);pointer-events:none;}
  #btnWorkspacePrefs .workspace-prefs-dot[hidden]{display:none;}
  #btnWorkspacePrefs.active{background:var(--accent-bg);color:var(--text);}
  /* Floating menu — pattern shared with .session-action-menu but scoped */
  .workspace-prefs-menu{display:block;position:fixed;left:0;top:0;min-width:240px;max-width:min(280px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.32);z-index:999;overflow:hidden;}
  .workspace-prefs-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;color:var(--text);cursor:pointer;font-size:13px;line-height:1.35;user-select:none;transition:background .12s;}
  .workspace-prefs-item:hover{background:var(--hover-bg);}
  .workspace-prefs-item input{flex-shrink:0;width:14px;height:14px;margin:2px 0 0;accent-color:var(--accent-text);cursor:pointer;}
  .workspace-prefs-item .workspace-prefs-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .workspace-prefs-item .workspace-prefs-name{font-weight:500;}
  .workspace-prefs-item .workspace-prefs-meta{font-size:11px;color:var(--muted);line-height:1.35;opacity:.85;}
  .breadcrumb-seg{padding:1px 3px;border-radius:3px;}
  .breadcrumb-link{color:var(--muted);cursor:pointer;transition:color .12s;}
  .breadcrumb-link:hover{color:var(--text);background:var(--hover-bg);}
  .breadcrumb-current{color:var(--text);font-weight:500;}
  .breadcrumb-sep{color:var(--border);margin:0 1px;font-size:11px;}
  .file-tree{flex:1;overflow-y:auto;padding:8px;}
  .file-tree.drag-over-upload{outline:2px dashed var(--blue,#3b82f6);outline-offset:-2px;border-radius:6px;}
  .file-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .12s;min-width:0;}
  .file-item:hover{background:var(--hover-bg);color:var(--text);}
  .file-item.active{background:var(--accent-bg);color:var(--accent-text);}
  .file-item.dragging{opacity:.35;border:1px dashed var(--accent-bg-strong);}
  .file-item.drag-over,.breadcrumb-seg.drag-over{background:var(--accent-bg);color:var(--accent-text);outline:1px solid var(--accent-bg-strong);outline-offset:-1px;}
  .file-item.drag-over-upload,.breadcrumb-seg.drag-over-upload{background:var(--blue,#3b82f6);color:#fff;outline:1px dashed rgba(255,255,255,.5);outline-offset:-1px;}
  .file-tree-toggle{font-size:10px;color:var(--muted);flex-shrink:0;width:var(--file-tree-toggle-width);text-align:center;line-height:1;}
  .file-tree-toggle-placeholder{display:inline-block;flex:0 0 var(--file-tree-toggle-width);width:var(--file-tree-toggle-width);line-height:1;}
  .file-item.file-empty{color:var(--muted);opacity:.5;font-style:italic;cursor:default;font-size:11px;}
  .file-item.file-empty:hover{background:none;color:var(--muted);}
  .preview-area{flex:1;overflow:auto;padding:14px;flex-direction:column;gap:8px;display:none;opacity:0;transition:opacity .15s;}
  .preview-area.visible{display:flex;opacity:1;}
  .preview-path{font-size:11px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);flex-shrink:0;}
  .preview-code{font-family:"SF Mono","Fira Code",ui-monospace,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--pre-text);}
  /* Workspace preview syntax highlighting (#3337): Prism's prism-tomorrow theme
     styles BOTH pre[class*="language-"] and code[class*="language-"] with its own
     gray background + padding. Prism propagates the language-* class onto the
     <pre> (.preview-code), so without overriding the <pre> too you get a gray
     prism frame around the navy var(--code-bg) <code> — a jarring two-tone block
     on dark themes. Mirror the chat-code-block fix (.msg-body pre[class*=...]):
     force BOTH surfaces to var(--code-bg) so the code panel reads as one tone. */
  .preview-code[class*="language-"],.preview-code code[class*="language-"]{background:var(--code-bg) !important;}
  /* Image preview */
  .preview-img-wrap{display:flex;align-items:center;justify-content:center;flex:1;padding:8px 0;min-height:0;}
  .preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.4);}
  .preview-media-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:12px 0;}
  .preview-media-wrap .msg-media-editor{width:100%;max-width:100%;background:var(--surface);}
  .preview-media-wrap .msg-media-video{max-height:60vh;}
  .preview-pdf-wrap{display:flex;flex:1;min-height:360px;border:1px solid var(--border2);border-radius:8px;overflow:hidden;background:#fff;}
  .preview-pdf-frame{width:100%;height:100%;min-height:70vh;border:none;background:#fff;}
  /* Markdown rendered preview */
  .preview-md{font-size:13px;line-height:1.7;color:var(--text);flex:1;overflow-y:auto;min-height:0;}
  .preview-md p{margin-bottom:10px;}.preview-md p:last-child{margin-bottom:0;}
  .preview-md h1,.preview-md h2,.preview-md h3,.preview-md h4,.preview-md h5,.preview-md h6{font-weight:700;color:var(--strong,var(--text));line-height:1.3;}
  .preview-md h1{font-size:24px;margin:24px 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px;}
  .preview-md h2{font-size:20px;margin:22px 0 10px;border-bottom:1px solid var(--border);padding-bottom:4px;}
  .preview-md h3{font-size:17px;margin:20px 0 8px;}
  .preview-md h4{font-size:15px;margin:18px 0 8px;}
  .preview-md h5{font-size:14px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:0.04em;}
  .preview-md h6{font-size:13px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  .preview-md ul,.preview-md ol{margin:4px 0 10px 18px;}.preview-md li{margin-bottom:3px;}
  .preview-md code{font-family:"SF Mono",ui-monospace,monospace;font-size:11.5px;background:var(--code-inline-bg);padding:1px 5px;border-radius:4px;color:var(--code-text);}
  .preview-md pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0;}
  .preview-md pre code{background:none;padding:0;color:var(--pre-text);font-size:11.5px;line-height:1.55;}
  /* Keep original theme background — prevent prism-tomorrow from overriding --code-bg */
  .preview-md pre[class*="language-"],.preview-md pre code[class*="language-"]{background:var(--code-bg) !important;}
  /* Fix #1463: Prism YAML grammar collapses newlines inside token spans — force pre */
  .preview-md pre code.language-yaml .token{white-space:pre !important;}
  .preview-md blockquote{border-left:3px solid var(--blue);padding-left:12px;color:var(--muted);font-style:italic;margin:8px 0;}
  .preview-md blockquote p{margin:0;}
  .preview-md strong{color:var(--strong);font-weight:600;}.preview-md em{color:var(--em);}
  .preview-md a{color:var(--blue);text-decoration:underline;}
  .preview-md hr{border:none;border-top:1px solid var(--border);margin:12px 0;}
  .preview-md table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;}
  .preview-md th{background:var(--hover-bg);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
  .preview-md td{padding:5px 10px;border:1px solid var(--border2);}
  .preview-md tr:nth-child(even){background:var(--code-inline-bg);}
  /* #486: inline code inside table cells needs scaled sizing to avoid overflow/clipping */
  .preview-md td code,.preview-md th code{font-size:0.85em;padding:1px 4px;vertical-align:baseline;}
  /* File type badge in preview path bar */
  .preview-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-left:8px;text-transform:uppercase;letter-spacing:.06em;}
  .preview-badge.img,.preview-badge.image,.preview-badge.audio,.preview-badge.video{background:var(--accent-bg);color:var(--accent-text);}
  .preview-badge.pdf{background:rgba(239,68,68,.12);color:#f87171;}
  .preview-badge.md{background:var(--accent-bg-strong);color:var(--accent-text);}
  .preview-badge.code{background:var(--hover-bg);color:var(--muted);}
  ::-webkit-scrollbar{width:4px;height:4px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;transition:background .2s}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
  /* ── Desktop: hide mobile-only elements ── */
  .mobile-hamburger{display:none;}
  .mobile-files-btn{display:none!important;}
  .mobile-overlay{display:none;}

  @media(min-width:901px){
    html[data-workspace-panel="closed"] .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
    .layout.workspace-panel-collapsed .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
    html[data-workspace-panel="closed"] .workspace-panel-edge-toggle{display:inline-flex;opacity:1;pointer-events:auto;transform:translateY(-50%);}
    html[data-workspace-panel="open"] .workspace-panel-edge-toggle{display:none;}
  }

  /* Sidebar collapse breakpoint matches `_isDesktopWidth()` (min-width:641px) so
     clicking the active rail icon in the tablet-portrait band (641–900px) actually
     produces a visual change rather than silently flipping a class while CSS sits
     out at @901. The rail itself becomes visible at min-width:641px, so any width
     where the user can click the rail should also be a width where the collapse
     rule applies. :not(.mobile-open) excludes the slide-in overlay below 641px. */
  @media(min-width:641px){
    .layout.sidebar-collapsed .sidebar:not(.mobile-open){width:0 !important;min-width:0;opacity:0;transform:translateX(-14px);border-right-color:transparent;pointer-events:none;overflow:hidden;}
    .layout.sidebar-collapsed .sidebar .resize-handle{display:none;}
    /* Flash prevention: an inline <script> in index.html sets this dataset on
       <html> BEFORE the stylesheet loads, so the collapsed state paints from
       frame 0 with zero flicker on cold loads. boot.js clears it once JS owns the state. */
    html[data-sidebar-collapsed="1"] .sidebar:not(.mobile-open){width:0 !important;min-width:0;opacity:0;transform:translateX(-14px);border-right-color:transparent;pointer-events:none;overflow:hidden;transition:none;}
  }

  @media(max-width:900px){
    .workspace-panel-edge-toggle{display:none!important;}
    .rightpanel{display:none}
    .workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
  }

  @container composer-footer (max-width: 700px){
    /* Stage 1: remove long workspace/model text first to avoid clipping.
       The left sidebar + panel layout can consume width before right panel opens, so this
       must be container-driven and independent of panel state. */
    .composer-workspace-label,
    #composerWorkspaceLabel,
    .composer-model-label,
    .composer-model-chevron,
    #composerModelLabel{display:none;}

    .composer-workspace-chip,
    .composer-model-chip{max-width:52px;min-width:44px;min-height:44px;padding:6px;justify-content:center;gap:0;font-size:11px;}
    .composer-workspace-group{min-height:44px;}
    .composer-workspace-files-btn{min-width:44px;padding:6px 8px;}
    .composer-divider{display:none;}
    .ctx-indicator-wrap{display:none!important;}
    .ctx-indicator-wrap{display:none!important;}
  }

  @container composer-footer (max-width: 520px){
    /* Stage 2: full icon-only for tighter widths. Container-width compaction is needed
       when side panels narrow the composer even though the viewport is not a phone. */
    .composer-left{gap:10px;overflow-x:auto;overflow-y:hidden;}
    .composer-left > *{flex-shrink:0;}
    .composer-profile-wrap,
    .composer-ws-wrap{flex:0 0 auto;}
    .composer-profile-label,
    .composer-workspace-label,
    .composer-model-label,
    .composer-reasoning-label,
    .composer-profile-chevron,
    .composer-workspace-chevron,
    .composer-model-chevron,
    .composer-reasoning-chevron,
    #composerProfileLabel,
    #composerWorkspaceLabel,
    #composerModelLabel,
    #composerReasoningLabel{display:none;}

    .composer-profile-chip,
    .composer-model-chip,
    .composer-reasoning-chip{box-sizing:border-box;width:44px;height:44px;max-width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;gap:0;font-size:11px;}

    .composer-workspace-group{box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;min-height:44px;overflow:hidden;border:none;background:transparent;border-radius:8px;}
    .composer-workspace-files-btn{box-sizing:border-box;width:44px;min-width:44px;max-width:44px;padding:0;border-radius:8px;}
    .composer-workspace-chip{display:none!important;}
    .composer-left > .composer-model-wrap,
    .composer-left > .composer-reasoning-wrap,
    .composer-left > .composer-toolsets-wrap{display:none!important;}
    /* Saved prompts is a desktop-only composer affordance — too much for the
       narrow mobile composer (Nathan 2026-06-09). Hide the button + popup. */
    #btnSavedPrompts,.saved-prompts-popup{display:none!important;}
    .composer-mobile-config-btn{box-sizing:border-box;position:relative;display:inline-flex!important;width:44px;height:44px;min-width:44px;min-height:44px;flex-shrink:0;}
    .composer-mobile-config-panel.open{display:flex;}
    .composer-mobile-config-action{flex:1 1 0;min-height:44px;min-width:0;background:var(--input-bg);border-color:var(--border);}
    .composer-mobile-context-action{flex:1 0 100%;}
    .composer-divider{display:none;}
  }

  /* Show session-toolsets chip ONLY when the composer-footer container is wide
     enough to comfortably accommodate it (workspace+model+reasoning+profile+
     toolsets+context-ring+send all need room to breathe, see #1431). At
     narrower container widths the chip is hidden by the base rule above —
     the underlying state and /api/session/toolsets endpoint continue to work
     for scripted callers regardless of UI visibility. Uses display:block to
     match sibling wraps (.composer-profile-wrap, .composer-model-wrap, etc.)
     rather than display:flex — the chip child has its own inline-flex layout. */
  @container composer-footer (min-width: 1100px) {
    .composer-toolsets-wrap{display:block;}
  }

  @media(max-width:640px){
    /* Viewport-phone rules handle app chrome and touch sizing; they intentionally
       overlap the container compact rules for actual phones. */
    /* ── Sidebar: slide-in overlay instead of hidden ── */
    .sidebar{position:fixed;left:-320px;top:0;bottom:0;width:min(320px, 100vw);z-index:200;
      transition:left .25s ease;}
    .sidebar.mobile-open{left:0;}
    .sidebar .resize-handle{display:none;}
    /* Hamburger button (in app titlebar on mobile) */
    .app-titlebar{justify-content:space-between;}
    .app-titlebar-hamburger,.app-titlebar-spacer{display:flex;}
    .app-titlebar-new-chat{display:inline-flex;}
    .app-titlebar-inner{flex:1 1 auto;}
    .system-health-panel.insights-card{gap:10px;padding:12px;}
    .system-health-head{align-items:flex-start;}
    .system-health-metrics{grid-template-columns:1fr;gap:8px;}
    .system-health-label{font-size:10px;gap:4px;}
    .system-health-bar{height:4px;}
    /* Overlay backdrop */
    .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
      z-index:199;-webkit-tap-highlight-color:transparent;}
    .mobile-overlay.visible{display:block;}
    /* Files button in topbar */
    .workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
    /* Right panel: slide-over from right */
    .rightpanel{display:flex!important;position:fixed;
      --mobile-rightpanel-width:min(300px, 100vw);
      right:calc(-1 * var(--mobile-rightpanel-width))!important;
      top:0;bottom:0;width:var(--mobile-rightpanel-width)!important;max-width:100vw!important;z-index:200;padding-top:var(--app-titlebar-safe-top);box-sizing:border-box;transition:right .25s ease;
      box-shadow:none!important;}
    .rightpanel.mobile-open{right:0!important;box-shadow:-4px 0 24px rgba(0,0,0,.4)!important;}
    .rightpanel .resize-handle{display:none;}
    .rightpanel .panel-header{row-gap:8px;}
    .rightpanel .panel-actions{align-items:center;gap:8px;}
    /* Topbar adjustments */
    .topbar{padding:8px 12px;gap:8px;}
    .topbar-title{font-size:14px;}
    .topbar-meta{display:none;}
    .topbar-chips{flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .topbar-chips .chip,.topbar-chips .ws-chip,.topbar-chips button{font-size:11px!important;padding:4px 8px!important;white-space:nowrap;}
    .settings-main{padding:18px 16px;}
    .hermes-action-grid{grid-template-columns:1fr;}
    .messages-inner{padding:12px 10px 20px;}
    .msg-body{padding-left:0;max-width:100%;}
    .msg-role{font-size:12px;}
    .composer-wrap{padding:8px 10px 12px!important;}
    .composer-box{border-radius:12px;}
    .composer-box textarea{min-height:40px;}
    .composer-footer{padding:6px 8px 8px!important;gap:6px;flex-wrap:nowrap;align-items:center;}
    .composer-left{flex:1 1 auto;width:auto;flex-wrap:nowrap;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;max-height:none;row-gap:0;-webkit-overflow-scrolling:touch;}
    .composer-left > *{flex-shrink:0;}
    .composer-profile-wrap,
    .composer-ws-wrap{flex:0 0 auto;}
    .composer-right{flex:0 0 auto;width:auto;justify-content:flex-end;gap:6px;min-width:0;}
    /* icon-only composer chips below 640px */
    .composer-profile-label,
    .composer-workspace-label,
    .composer-model-label,
    .composer-reasoning-label,
    .composer-profile-chevron,
    .composer-workspace-chevron,
    .composer-model-chevron,
    .composer-reasoning-chevron,
    #composerProfileLabel,
    #composerWorkspaceLabel,
    #composerModelLabel,
    #composerReasoningLabel{display:none;}
    .composer-profile-chip,
    .composer-model-chip,
    .composer-reasoning-chip{box-sizing:border-box;width:44px;height:44px;max-width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;gap:0;font-size:11px;}
    .composer-workspace-group{box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;min-height:44px;overflow:hidden;border:none;background:transparent;border-radius:8px;}
    .composer-workspace-files-btn{box-sizing:border-box;width:44px;min-width:44px;max-width:44px;padding:0;border-radius:8px;}
    .composer-workspace-chip{display:none!important;}
    .composer-left > .composer-model-wrap,
    .composer-left > .composer-reasoning-wrap,
    .composer-left > .composer-toolsets-wrap{display:none!important;}
    /* Saved prompts is a desktop-only composer affordance — too much for the
       narrow mobile composer (Nathan 2026-06-09). Hide the button + popup. */
    #btnSavedPrompts,.saved-prompts-popup{display:none!important;}
    .composer-mobile-config-btn{box-sizing:border-box;position:relative;display:inline-flex!important;width:44px;height:44px;min-width:44px;min-height:44px;flex-shrink:0;}
    .composer-mobile-config-panel.open{display:flex;}
    .composer-mobile-config-action{box-sizing:border-box;flex:1 1 0;min-height:44px;min-width:0;background:var(--input-bg);border-color:var(--border);}
    .composer-mobile-context-action{flex:1 0 100%;}
    /* icon-only composer chips continue below mobile widths */
    .composer-divider{display:none;}
    .composer-status{flex:0 1 auto;min-width:0;max-width:96px;font-size:10px;text-align:right;}
    .send-btn{width:44px;height:44px;}
    .ctx-indicator-wrap{display:none!important;}
    .ctx-indicator{width:44px;height:44px;}
    .ctx-tooltip{right:-4px;min-width:190px;max-width:220px;}
    .composer-terminal-panel{width:calc(100% - 20px);}
    .composer-terminal-panel.is-collapsed{bottom:-1px;width:calc(100% - 28px);}
    .handoff-hint-container{bottom:-2px;width:calc(100% - 28px);}
    .composer-terminal-inner{height:var(--composer-terminal-height,190px);min-height:140px;max-height:min(300px,44vh);border-radius:12px;padding-bottom:28px;}
    .composer-terminal-dock{min-height:40px;padding:6px 7px 6px 10px;border-radius:12px;gap:8px;}
    .composer-terminal-dock-title{font-size:11px;}
    .composer-terminal-resize-handle{height:10px;cursor:default;}
    .composer-terminal-header{padding:7px 8px;}
    .composer-terminal-actions{gap:2px;overflow-x:auto;}
    .composer-terminal-action{padding:5px 7px;font-size:10px;white-space:nowrap;}
    #terminalWorkspaceLabel{max-width:110px;}
    #terminalDockWorkspaceLabel{max-width:96px;}
    .sidebar-nav{position:absolute;left:0;top:0;bottom:0;width:52px;display:flex;flex-direction:column;gap:4px;padding:8px 4px;border-right:1px solid var(--border);border-bottom:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
    .sidebar-nav .nav-tab{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:0;border-bottom:0;border-radius:10px;}
    .sidebar-nav .nav-tab svg{width:20px;height:20px;}
    .sidebar-nav .nav-tab.active{background:var(--accent-bg);}
    .sidebar-nav .nav-tab.active::before{left:-4px;top:50%;bottom:auto;transform:translateY(-50%);width:3px;height:16px;border-radius:0 2px 2px 0;}
    .sidebar .panel-view{height:100%;margin-left:52px;}
    .sidebar .panel-icon-btn{min-width:44px;min-height:44px;width:auto;height:auto;}
    /* Touch targets — minimum 44px */
    .icon-btn,.mic-btn,.voice-mode-btn{min-width:44px;min-height:44px;}
    .session-item{min-height:44px;padding:10px 40px 10px 12px;}
    .session-item.streaming,.session-item.unread{padding-right:40px;}
    .session-actions{opacity:1;pointer-events:auto;}
    /* Empty state */
    .empty-state h2{font-size:18px;}
    .empty-state p{font-size:13px;}
    .suggestion-grid{max-width:100%!important;}
    .suggestion{font-size:12px;padding:10px 12px;}
  }

  @media (hover:none) and (pointer:coarse){
    .session-actions{display:none;}
    .session-item{padding-right:6px;}
    .session-item.streaming,.session-item.unread{padding-right:40px;}
    .session-item:focus-within,.session-item.menu-open{padding-right:6px;}
  }

  @media (max-width: 340px){
    /* Extreme legacy-phone widths (e.g. 320px) cannot fit five 44px
       left-side touch targets plus the fixed send button with the normal
       phone spacing. Keep the single-row hierarchy and 44px targets, but
       tighten only the inter-button gutters so the config button remains
       fully visible instead of sliding under the send button. */
    .composer-wrap{padding-left:8px!important;padding-right:8px!important;}
    .composer-footer{gap:4px;}
    .composer-left{gap:2px;}
  }

  @media (max-width: 640px){
    /* Approval card */
    .approval-card{padding-left:10px;padding-right:10px;}
    .approval-btns{gap:6px;}
    .approval-btn{padding:8px 12px;font-size:12px;min-height:44px;}
    .approval-kbd{display:none;}
    /* Clarify card */
    .clarify-card{padding-left:10px;padding-right:10px;max-height:clamp(180px,min(62vh,calc(100vh - 180px)),360px);}
    .clarify-card .clarify-inner{max-height:clamp(180px,min(62vh,calc(100vh - 180px)),360px);}
    @supports (height:100dvh){.clarify-card,.clarify-card .clarify-inner{max-height:clamp(180px,min(62dvh,calc(100dvh - 180px)),360px);}}
    .clarify-inner{padding:12px 12px 13px;}
    .clarify-response{flex-direction:column;align-items:stretch;}
    .clarify-input,.clarify-submit{width:100%;min-height:44px;}
    .clarify-choice{min-height:44px;}
    .clarify-choice-badge{min-width:22px;height:22px;}
    .app-dialog-overlay{padding:12px;}
    .app-dialog{width:100%;padding:16px 16px 14px;border-radius:16px;}
    .app-dialog-actions{flex-direction:column-reverse;align-items:stretch;}
    .app-dialog-btn{width:100%;min-height:44px;}
    /* Tool cards */
    .tool-card{margin-left:0!important;font-size:12px;}
    .onboarding-overlay{padding:12px;}
    .onboarding-shell{grid-template-columns:1fr;}
    .onboarding-sidebar{border-right:none;border-bottom:1px solid var(--border);padding:22px 18px;}
    .onboarding-main{padding:20px 18px 18px;}
    .onboarding-actions{flex-direction:column-reverse;}
    .onboarding-actions .sm-btn{width:100%;min-height:44px;}
    /* Login page responsive */
    .card{width:90vw;max-width:320px;padding:28px 24px;}
  }


/* ── Workspace dropdown (topbar) ── */
.ws-chip{user-select:none;}
.ws-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;right:0;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
.ws-dropdown.open{display:block;}
.ws-dropdown-footer{left:0;right:auto;bottom:calc(100% + 4px);min-width:280px;max-width:min(420px,calc(100vw - 32px));}
.model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
.model-dropdown.open{display:block;}
.model-scope-note{position:sticky;top:0;z-index:2;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px;font-weight:650;line-height:1.4;background:color-mix(in srgb,var(--surface) 82%,var(--accent-bg));box-shadow:0 1px 0 rgba(0,0,0,.12);}
.model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;border-top:1px solid var(--border2);margin-top:2px;}
.model-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
.model-opt:hover{background:rgba(255,255,255,.07);}
.model-opt.is-highlighted{background:rgba(255,255,255,.1);outline:1px solid var(--border2);outline-offset:-1px;}
.model-opt.active{background:var(--accent-bg);}
.model-opt.active.is-highlighted{background:var(--accent-bg);outline:1px solid var(--accent);outline-offset:-1px;}
.model-opt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;}
.model-opt-name{display:block;font-size:13px;color:var(--text);font-weight:500;line-height:1.25;}
.model-opt-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border:1px solid transparent;}
.model-opt-badge--primary{background:rgba(50,184,198,.16);border-color:rgba(50,184,198,.32);color:#8fe7ef;}
.model-opt-badge--fallback{background:rgba(255,184,77,.14);border-color:rgba(255,184,77,.28);color:#ffd18a;}
.model-opt-id{display:block;font-size:10px;color:var(--muted);line-height:1.3;opacity:.72;word-break:break-word;}
.model-provider-hint{margin:2px 14px 6px;padding:7px 9px;border:1px solid var(--border2);border-radius:7px;background:color-mix(in srgb,var(--surface) 90%,var(--warning));color:var(--muted);font-size:11px;line-height:1.35;}
.model-opt-provider{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--border2);margin-left:auto;white-space:nowrap;flex-shrink:0;}
.model-custom-sep{padding-top:4px;border-top:1px solid var(--border);margin-top:4px;}
.model-custom-row{display:flex;align-items:center;gap:6px;padding:6px 10px 8px;}
.model-custom-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;}
.model-search-row{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;}
.model-search-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:6px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;}
.model-search-input:focus{border-color:var(--accent);}
.model-search-clear{flex-shrink:0;width:22px;height:22px;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;font-size:10px;}
.model-search-clear:hover{color:var(--text);border-color:var(--border);}
.model-custom-input:focus{border-color:var(--accent);}
.model-custom-btn{flex-shrink:0;width:24px;height:24px;border:1px solid var(--border2);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;}
.model-custom-btn:hover{color:var(--accent-text);border-color:var(--accent-bg);}
.ws-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.ws-opt:hover{background:rgba(255,255,255,.07);}
.ws-opt.active{background:var(--accent-bg);}
.ws-opt-name{display:block;font-size:13px;color:var(--text);font-weight:500;line-height:1.25;white-space:normal;overflow:hidden;text-overflow:ellipsis;}
.ws-opt-path{display:block;font-size:10px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:normal;opacity:.72;word-break:break-word;}
.ws-divider{height:1px;background:var(--border);margin:4px 0;}
.ws-manage{color:var(--muted);font-size:12px;}
.ws-opt-action{display:flex;flex-direction:row;align-items:center;gap:8px;}
.ws-search-row{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;}
.ws-search-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:6px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;}
.ws-search-input:focus{border-color:var(--accent);}
.ws-search-clear{flex-shrink:0;width:22px;height:22px;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;font-size:10px;}
.ws-search-clear:hover{color:var(--text);border-color:var(--border);}
.ws-list-container{overflow-y:auto;max-height:260px;}
.ws-no-results{padding:12px 14px;text-align:center;color:var(--muted);font-size:12px;}
.ws-opt-icon{display:inline-flex;align-items:center;justify-content:center;opacity:.82;flex-shrink:0;}
.ws-opt-meta{font-size:11px;color:var(--muted);}
/* ── Workspace management panel ── */
.ws-row{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s,color .15s,opacity .15s;}
.ws-row:hover{background:var(--surface);color:var(--text);}
.ws-row.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
.ws-row-info{flex:1;min-width:0;}
.ws-row-name{font-size:13px;font-weight:500;color:inherit;}
.ws-row-path{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-row.active .ws-row-path{color:var(--accent-text);opacity:.8;}
.ws-row-actions{display:flex;gap:4px;flex-shrink:0;}
.ws-drag-handle{display:flex;align-items:center;justify-content:center;opacity:.25;flex-shrink:0;cursor:grab;transition:opacity .15s;color:var(--muted);padding:2px;}
.ws-row:hover .ws-drag-handle{opacity:.55;}
.ws-drag-handle:active{cursor:grabbing;}
.ws-row.dragging{opacity:.35;border:1px dashed var(--accent-bg-strong);}
.ws-row.drag-over{border-color:var(--accent-text);background:var(--accent-bg);}
.ws-action-btn{padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.ws-action-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
/* ── Profile dropdown + management panel ── */
.profile-chip{user-select:none;color:var(--accent-text)!important;}
.profile-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:260px;max-width:min(260px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
.profile-dropdown.open{display:block;}
.profile-opt{padding:10px 14px;cursor:pointer;transition:background .12s;}
.profile-opt:hover{background:rgba(255,255,255,.07);}
.profile-opt.active{background:var(--accent-bg);}
.profile-opt-name{font-size:13px;color:var(--text);font-weight:500;}
.profile-opt-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.profile-opt-badge{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.profile-opt-badge.running{background:#4caf50;box-shadow:0 0 4px rgba(76,175,80,.5);}
.profile-opt-badge.stopped{background:rgba(255,255,255,.2);}
.profile-card{padding:8px 10px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s,color .15s;}
.profile-card:hover{background:var(--surface);color:var(--text);}
.profile-card.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
.profile-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.profile-card-name{font-size:13px;font-weight:600;color:inherit;}
.profile-card-name.is-active{color:var(--accent-text);}
.profile-card-meta{font-size:11px;color:var(--muted);margin-top:3px;padding-left:12px;}
.profile-card.active .profile-card-meta{color:var(--accent-text);opacity:.8;}
.profile-card-actions{display:flex;gap:4px;flex-shrink:0;}
/* ── Slash command autocomplete dropdown ── */
.cmd-dropdown{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 4px);width:auto;max-width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -8px 24px rgba(0,0,0,.4);z-index:200;max-height:240px;overflow-y:auto;}
.cmd-dropdown.open{display:block;}
.cmd-item{padding:8px 14px;cursor:pointer;transition:background .12s;}
.cmd-item:hover{background:rgba(255,255,255,.07);}
.cmd-item.selected{background:var(--accent-bg);outline:1px solid var(--accent-bg-strong);}
.cmd-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cmd-item-name{font-size:13px;color:var(--text);font-weight:500;}
.cmd-item-parent{color:var(--muted);font-weight:400;}
.cmd-item-subarg{font-weight:600;}
.cmd-item-path-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;}
.cmd-item-arg{color:var(--muted);font-weight:400;font-style:italic;}
.cmd-item-desc{font-size:11px;color:var(--muted);margin-top:1px;}
.cmd-item-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid var(--border2);color:var(--muted);background:var(--hover-bg);}
.cmd-item-badge-skill{color:var(--accent-text);background:var(--accent-bg);border-color:var(--accent-bg-strong);}
.ws-action-btn.danger:hover{background:rgba(239,83,80,.1);color:var(--error);border-color:var(--error);}
.ws-add-row{display:flex;gap:8px;align-items:center;padding:10px 0 4px;}
.ws-add-input-wrap{flex:1;min-width:0;}
.ws-suggestions{margin:0 0 6px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.22);max-height:220px;overflow:auto;}
.ws-suggest-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--text);text-align:left;font-size:12px;cursor:pointer;}
.ws-suggest-item:hover{background:rgba(255,255,255,.08);}
.ws-suggest-item.active{background:var(--accent-bg);outline:1px solid var(--accent-bg-strong);outline-offset:-1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
.ws-suggest-leaf{font-size:13px;font-weight:600;color:var(--text);}
.ws-suggest-parent{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ws-suggest-item.active .ws-suggest-leaf{color:var(--accent-text);}
.ws-suggest-item.active .ws-suggest-parent{color:var(--text);}
/* ── Message action buttons (copy, edit, retry) ── */
.msg-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s;margin-left:auto;}
.msg-row:hover .msg-actions{opacity:1;}
.msg-action-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:5px;transition:color .12s,background .12s;line-height:1;}
.msg-action-btn:hover{color:var(--accent-text);background:var(--accent-bg);}
.selected-text-reply-btn{position:fixed;z-index:1200;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:2px solid var(--accent);border-radius:999px;background:var(--bg);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.26),0 0 0 1px var(--surface);font-size:12px;font-weight:700;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease,background .12s ease,border-color .12s ease;user-select:none;}
.selected-text-reply-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.selected-text-reply-btn:hover{background:var(--accent-bg);border-color:var(--accent-hover);}
.selected-text-reply-btn:focus-visible{background:var(--accent-bg);border-color:var(--accent-hover);outline:2px solid var(--focus-ring);outline-offset:2px;}
/* TTS speaker button: hidden by default, shown when TTS is enabled.
 * Use body-class selector instead of JS inline-style so the rule survives
 * subsequent renderMd() passes and is not subject to inline-style cascade
 * collisions with the .msg-action-btn parent (#1409). */
.msg-tts-btn{display:none;}
body.tts-enabled .msg-tts-btn{display:inline-flex;align-items:center;}
.msg-tts-btn[data-speaking="1"]{color:var(--accent);animation:tts-pulse 1s ease-in-out infinite;}
@keyframes tts-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Edit message inline ── */
.msg-edit-area{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--accent-bg);border-radius:8px;color:var(--text);padding:10px 12px;font-size:14px;font-family:inherit;line-height:1.6;resize:none;outline:none;min-height:60px;box-sizing:border-box;box-shadow:0 0 0 3px var(--accent-bg);margin-top:4px;}
.msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
.msg-edit-send{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.msg-edit-send:hover{opacity:.85;}
.msg-edit-cancel{background:var(--hover-bg);color:var(--muted);border:1px solid var(--border2);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
.msg-edit-cancel:hover{background:rgba(255,255,255,.1);}

/* ── Clear conversation chip ── */
.clear-btn{background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:11px;padding:4px 10px;cursor:pointer;transition:background .15s;}
.clear-btn:hover{background:var(--accent-bg-strong);}

/* ── Copy button on messages ── */
/* msg-copy-btn styles moved to msg-action-btn */
/* ── Nav tab nowrap ── */
/* nav-tab-nowrap-handled-above */

/* ── Final polish additions ── */

/* Smooth hover on file items */


/* Sidebar section padding: give the session-section breathing room */
.sidebar-section{padding:10px 12px 6px;}

/* New chat btn icon - align nicely */
.new-chat-btn svg{flex-shrink:0;opacity:.8;}

/* Session list: group header spacing */
.session-list > div[style]{padding-left:12px;}

/* Preview path bar: flex row with nice gap */
.preview-path{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;min-width:0;}
.preview-path #previewPathText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-path #previewBadge{flex-shrink:0;white-space:nowrap;}
.preview-path #btnDownloadFile,.preview-path #btnEditFile,.preview-path #btnRenderMarkdownAnyway{flex-shrink:0;white-space:nowrap;}

/* Preview badge typography */
.preview-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* Approval buttons: tab stops */
.approval-btn:focus{outline:2px solid var(--blue);outline-offset:2px;}
.clarify-choice:focus,.clarify-submit:focus,.clarify-input:focus{outline:2px solid var(--blue);outline-offset:2px;}

/* Message role: breathing room between icon and name */
.msg-role > span{line-height:1;}

/* Composer wrap: slightly less padding on smaller heights */
.composer-wrap{padding:10px 20px 14px;position:relative;z-index:10;}
.composer-wrap::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;}

/* Cron status badges: pill shape refinement */
.cron-status{border-radius:99px;font-size:10px;letter-spacing:.04em;}

/* Right panel icons: tighter */
.panel-actions{gap:2px;}

/* Topbar: border should match the subtle sidebar border */
:root.dark .topbar{border-bottom:1px solid rgba(255,255,255,.07);}



/* Suggestion grid: consistent width */
.suggestion-grid{width:100%;max-width:400px;}

/* Empty state: add subtle gradient behind logo */
.empty-state{background:radial-gradient(ellipse at 50% 20%,var(--accent-bg) 0%,transparent 60%);}

/* Remove old status-text from composer (kept for error messages only) */
.status-text{font-size:11px;color:var(--muted);padding-left:2px;display:none;}

/* Sidebar workspace display */
#sidebarWsDisplay:hover{background:rgba(255,255,255,.05);}
#sidebarWsDisplay:hover #sidebarWsName{color:var(--blue);}

/* Date group headers in session list */
.session-list > div[style*="uppercase"] {
  padding: 8px 10px 3px !important;
  font-size: 10px !important;
}
/* Right panel file tree: more padding for breathing room */

/* Composer footer: even spacing */
.composer-footer { padding: 4px 10px 8px; }

/* ── File tree: clean delete button via CSS hover ── */
.file-del-btn{
  flex-shrink:0;
  width:0;height:16px;
  overflow:hidden;
  background:none;border:none;
  color:var(--muted);cursor:pointer;
  font-size:13px;font-weight:300;
  opacity:0;
  transition:width .12s,opacity .12s,color .12s;
  padding:0;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.file-item:hover .file-del-btn{ width:16px;opacity:1;margin-left:2px; }
.file-del-btn:hover{ color:var(--accent); }

/* file-name must be a flex child that can shrink to zero */
.file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 0;
  min-width:0;
}

/* file-size: never wraps, shrinks away gracefully */
.file-size{
  flex-shrink:0;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
  margin-left:4px;
  font-variant-numeric:tabular-nums;
}

/* file-icon: never shrinks */
.file-icon{
  flex-shrink:0;
  font-size:13px;
  opacity:.7;
  line-height:1;
}

/* ── Resizable panels ── */
.resize-handle{
  position:absolute;
  top:0;bottom:0;
  width:5px;
  cursor:col-resize;
  z-index:10;
  transition:background .15s;
}
.resize-handle:hover,.resize-handle.dragging{background:var(--accent);}
/* Desktop-only: position:relative for sidebar/rightpanel resize handles.
   Must be scoped to min-width:641px so it doesn't override the mobile
   position:fixed slide-in overlay set in the max-width:640px @media block above. */
@media(min-width:641px){
  .sidebar{position:relative;}
  .rightpanel{position:relative;}
}
.sidebar .resize-handle{right:-2px;}
.rightpanel .resize-handle{left:-2px;}
/* Prevent text selection during drag */
body.resizing{user-select:none;cursor:col-resize;}
body.resizing .sidebar{transition:none!important;}

/* ── Tool call cards ── */
/* Running indicator dot (pulsing) */
@keyframes wlpulse{0%,100%{box-shadow:0 0 0 0 var(--accent-bg-strong);}50%{box-shadow:0 0 0 5px rgba(255,215,0,0);}}
.tool-card-running-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  opacity:1;
  flex-shrink:0;
  vertical-align:middle;
  animation:wlpulse 1.3s ease-in-out infinite;
}
.tl-rundot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:wlpulse 1.3s ease-in-out infinite;}
/* Show more button inside tool card result */
.tool-card-more{background:none;border:none;color:var(--blue);font-size:10px;cursor:pointer;padding:3px 0 0;opacity:.7;display:block;}
.tool-card-more:hover{opacity:1;}
/* Subagent cards: indented with accent border */
.tool-card.tool-card-subagent{border-left:0;margin-left:0;}
/* Token usage badge below assistant messages */
.msg-usage{font-size:11px;color:var(--muted);opacity:.6;margin-top:2px;padding-left:42px;}
.msg-usage:hover{opacity:1;}
/* Skill picker (cron create form) */
.skill-picker-wrap{position:relative;}
.skill-picker-dropdown{position:absolute;left:0;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:6px;z-index:1100;max-height:180px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.skill-opt{padding:6px 10px;cursor:pointer;font-size:12px;color:var(--muted);transition:background .1s;}
.skill-opt:hover{background:rgba(255,255,255,.08);color:var(--text);}
.skill-picker-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.skill-tag{background:var(--accent-bg);border:1px solid var(--accent-bg);border-radius:12px;padding:2px 8px;font-size:11px;color:var(--accent-text);display:flex;align-items:center;gap:4px;}
.remove-tag{cursor:pointer;opacity:.6;font-size:13px;line-height:1;}
.remove-tag:hover{opacity:1;color:var(--accent);}
/* Skill frontmatter (collapsible metadata) */
.skill-frontmatter{margin-bottom:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;}
.skill-frontmatter>summary{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer;user-select:none;list-style:none;}
.skill-frontmatter>summary::-webkit-details-marker{display:none;}
.skill-frontmatter>summary:hover{color:var(--text);}
.skill-frontmatter[open]>summary{border-bottom:1px solid var(--border);}
.skill-frontmatter pre{margin:0;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text);background:transparent;overflow-x:auto;}
/* Skill linked files section */
.skill-linked-files{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
.skill-linked-section{margin-bottom:8px;}
.skill-linked-section h4{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
.skill-linked-file{display:block;font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--blue);text-decoration:none;}
.skill-linked-file:hover{background:var(--hover-bg);}
.tool-card-row{margin:0;padding:1px 0;}
.tool-call-group{margin:4px 0 4px var(--msg-rail);max-width:var(--msg-max);border-left:1px solid var(--border-subtle);}
.tool-call-group-summary{width:100%;display:flex;align-items:center;gap:7px;padding:3px 8px;margin-left:-8px;border:0;background:transparent;color:var(--muted);cursor:pointer;text-align:left;font:inherit;font-size:13px;line-height:1.45;border-radius:7px;}
.tool-call-group-summary:hover{background:var(--hover-bg);color:var(--text);}
.tool-call-group-duration{margin-left:auto;opacity:.62;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tool-call-group-chevron{margin-left:auto;opacity:.4;display:inline-flex;transition:transform .18s ease;}
.tool-call-group:not(.tool-call-group-collapsed) .tool-call-group-chevron,
.agent-activity-group:not(.tool-call-group-collapsed) .tool-call-group-chevron{transform:rotate(90deg);}
.tool-call-group-body{display:block;padding-left:var(--space-3);}
.tool-call-group.tool-call-group-collapsed .tool-call-group-body,
.agent-activity-group.tool-call-group-collapsed .tool-call-group-body{display:none;}
.activity{padding-left:var(--msg-rail);margin:4px 0 14px;max-width:var(--msg-max);}
.tool-worklog-group{
  margin:4px 0 14px var(--msg-rail);
  border-left:0;
}
.live-worklog{
  margin:4px 0 14px;
  max-width:var(--msg-max);
}
.tool-worklog-group.activity{
  margin:4px 0 14px;
}
.tool-worklog-summary{
  display:inline-flex;
  max-width:100%;
  min-width:0;
  align-items:center;
  gap:9px;
  padding:5px 8px;
  border-radius:8px;
  margin:0 0 0 -8px;
  border:0;
  color:var(--muted);
  font-size:var(--message-body-font-size);
  font-weight:500;
  line-height:var(--message-body-line-height);
  letter-spacing:0;
}
.as-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.45;flex-shrink:0;}
.tool-worklog-summary .tool-worklog-label{
  color:var(--muted);
  font-family:inherit;
  font-size:var(--message-body-font-size);
  font-weight:500;
  line-height:var(--message-body-line-height);
  letter-spacing:0;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tool-worklog-summary .tool-call-group-duration{
  margin-left:2px;
  flex-shrink:0;
}
.tool-worklog-summary .tool-call-group-chevron{
  margin-left:0;
}
.tool-worklog-running-label{display:none;color:var(--accent-text);font-family:'SF Mono',ui-monospace,monospace;font-size:12px;font-weight:600;line-height:1.4;}
.tool-worklog-group[data-tool-worklog-running="1"] .tool-worklog-running-label{display:inline-flex;}
.tool-worklog-body{
  padding-left:0;
}
.activity-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .34s ease,opacity .22s ease;}
.activity.open .activity-body{max-height:none;overflow:visible;opacity:1;margin-top:10px;}
.tool-worklog-list{
  --worklog-rail:24px;
  margin:3px 0 0 0;
  padding-left:0;
  border-left:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.live-worklog .tool-worklog-list{
  --worklog-rail:var(--msg-rail);
}
.wl-step-tools{
  padding-left:var(--msg-rail);
  margin-bottom:12px;
}
.activity-body .wl-reason,
.tool-worklog-list > .wl-reason{
  padding-left:var(--worklog-rail);
}
.activity-body .wl-step-tools,
.tool-worklog-list > .wl-step-tools{
  padding-left:var(--worklog-rail);
}
.tool-worklog-list .tool-card-row{
  margin:0;
}
.tool-worklog-list .tool-card,
:root[data-skin] .tool-worklog-list .tool-card,
:root[data-skin] .tool-worklog-list .tool-card:hover,
:root[data-skin] .tool-worklog-list .tool-card-running{
  margin:0;
  border:0;
  border-left:0;
  border-radius:0;
  background:transparent;
}
.tool-worklog-list .tool-card-row + .tool-card-row{
  border-top:0;
}
.tool-worklog-list .tool-card-header,
.tl-head{
  display:flex;
  align-items:center;
  padding:3px 8px;
  margin-left:-8px;
  border-radius:7px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  gap:7px;
}
.tool-worklog-list .tool-card-name,
.tl-verb{
  flex-shrink:0;
  color:var(--muted);
  font-family:inherit;
  font-size:var(--message-body-font-size);
  font-weight:400;
  line-height:var(--message-body-line-height);
  letter-spacing:0;
  position:relative;
  opacity:.56;
}
.tool-worklog-list .tool-card-title,
.tl-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--message-body-font-size);
  font-weight:400;
  opacity:.42;
}
.tool-worklog-list .tool-card-header:hover .tool-card-title,
.tl-head:hover .tl-title{
  opacity:.66;
}
.tool-worklog-list .tool-card-result pre{
  margin:0;
}
.tool-worklog-list > .agent-activity-thinking{
  margin:0;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card,
:root[data-skin] .tool-worklog-list > .agent-activity-thinking .thinking-card,
:root[data-skin] .tool-worklog-list > .agent-activity-thinking .thinking-card:hover{
  margin:0;
  max-width:none;
  border:0;
  border-radius:0;
  background:transparent;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card-header{
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 8px;
  margin-left:-8px;
  border-radius:7px;
  color:var(--muted);
  font-size:var(--message-body-font-size);
  font-weight:400;
  line-height:var(--message-body-line-height);
  opacity:.56;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card-header:hover{
  background:var(--hover-bg);
  color:var(--text);
  opacity:1;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card-label{
  font-weight:400;
  letter-spacing:0;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card-icon,
.tool-worklog-list > .agent-activity-thinking .thinking-copy-btn,
.tool-worklog-list > .agent-activity-thinking .thinking-card-toggle{
  color:var(--muted);
  opacity:.4;
}
.tool-worklog-list > .agent-activity-thinking .thinking-card.open .thinking-card-body{
  margin-top:4px;
  padding:6px 8px 7px 8px;
  border-top-color:transparent;
  border-radius:8px;
  background:var(--code-bg);
}
.tool-worklog-list > .agent-activity-thinking .thinking-card-body pre{
  font-family:var(--font-mono);
  font-size:var(--message-body-font-size);
  line-height:var(--message-body-line-height);
  color:var(--muted);
}
.wl-reason{
  color:var(--text);
  font-size:var(--message-body-font-size);
  line-height:var(--message-body-line-height);
  padding-left:var(--msg-rail);
  margin-bottom:12px;
  max-width:var(--msg-max);
  overflow-wrap:anywhere;
}
.wl-reason p{margin:0 0 6px;}
.wl-reason p:last-child{margin-bottom:0;}
.wl-reason ul,
.wl-reason ol{
  margin:6px 0 6px 0;
  padding-left:1.35em;
  list-style-position:outside;
}
.wl-reason li{
  margin:2px 0;
  padding-left:.15em;
}
.assistant-segment-worklog-source{
  display:none!important;
}
.tool-worklog-tool-group,
.tool-group{
  max-width:560px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}
.tool-worklog-tool-group-head,
.tool-group-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 8px;
  margin-left:-8px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  text-align:left;
  font:inherit;
  font-size:var(--message-body-font-size);
  line-height:var(--message-body-line-height);
  border-radius:7px;
  opacity:.68;
}
.tool-worklog-tool-group-head:hover,
.tool-group-head:hover{background:var(--hover-bg);color:var(--muted);opacity:.86;}
.tool-worklog-tool-group-label,
.tg-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-worklog-tool-group-running,
.tg-run{display:none;color:var(--accent-text);font-family:'SF Mono',ui-monospace,monospace;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;}
.tool-worklog-tool-group-body,
.tool-group-body{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.tool-worklog-tool-group.open .tool-worklog-tool-group-body,
.tool-group.open .tool-group-body{max-height:1600px;}
.tool-worklog-tool-group-collapsed .tool-worklog-tool-group-body,
.tool-worklog-tool-group-collapsed .tool-group-body{max-height:0;}
.tool-worklog-tool-group-collapsed .tool-call-group-chevron,
.tool-worklog-tool-group-collapsed .tg-caret{transform:none!important;}
.tool-worklog-tool-group.open .tool-call-group-chevron,
.tool-group.open .tg-caret{transform:rotate(90deg);}
.tool-worklog-tool-group-rows,
.tg-rows{
  margin:3px 0 0 5px;
  padding-left:14px;
  border-left:1px solid var(--border-subtle);
  display:flex;
  flex-direction:column;
  gap:1px;
}
.tool-worklog-tool-group-body .tool-card,
.tool-group-body .tl{max-width:none;}
.agent-activity-status{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:var(--space-2);padding:5px 0;color:var(--muted);font-size:var(--font-size-xs);line-height:1.45;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 60%,transparent);}
.agent-activity-status:last-child{border-bottom:0;}
.agent-activity-status-icon{display:inline-flex;align-items:center;justify-content:center;min-height:18px;opacity:.72;color:var(--muted);}
.agent-activity-status-copy{display:flex;flex-direction:column;min-width:0;gap:1px;}
.agent-activity-status-label{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.agent-activity-status-detail{color:var(--muted);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.agent-activity-status-time{font-variant-numeric:tabular-nums;opacity:.55;white-space:nowrap;}
.agent-activity-status-waiting .agent-activity-status-label{color:var(--muted);}
.agent-activity-status-error .agent-activity-status-label{color:var(--error);}
.tool-call-group-label{font-weight:600;color:var(--muted);position:relative;display:inline-block;overflow:hidden;}
.tool-call-group[data-live-tool-call-group="1"] .tool-call-group-label{
  color:var(--muted);
}
@media (prefers-reduced-motion: reduce){
  .tool-card-running-dot{
    animation:none;
  }
}
.tool-card{background:var(--surface-subtle);border:1px solid var(--border);border-left:2px solid var(--border-muted);border-radius:8px;margin:0;overflow:hidden;transition:border-color .15s,background .15s;}
.tl{background:transparent;border:0;border-left:0;border-radius:0;margin:0;overflow:visible;transition:none;}
.tool-card.tool-card-subagent{border-left:0;margin-left:0;}
.tool-card:hover,.tl:hover{border-color:transparent;background:transparent;}
.tool-card-running,.tl.running{border-color:transparent;background:transparent;}
.tool-card-header,.tl-head{display:flex;align-items:center;gap:7px;padding:3px 8px;margin-left:-8px;border-radius:7px;cursor:pointer;user-select:none;color:var(--muted);font-size:var(--message-body-font-size);line-height:var(--message-body-line-height);min-width:0;}
.tool-card-header:hover,.tl-head:hover{background:var(--hover-bg);color:var(--text);}
.tool-card-running .tool-card-header,.tl.running .tl-head{cursor:default;}
.tool-card-icon{display:none;}
.tool-card-name,.tl-verb{font-size:var(--message-body-font-size);font-weight:400;color:var(--muted);font-family:inherit;flex-shrink:0;opacity:.56;}
.tool-card-running .tl-verb,.tl.running .tl-verb{color:var(--accent-text);font-weight:600;opacity:1;}
.tool-card-title,.tl-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:var(--font-mono);font-size:var(--message-body-font-size);font-weight:400;opacity:.42;}
.tl-diff{display:inline-flex;gap:5px;flex-shrink:0;font-family:var(--font-mono);font-size:12px;}
.tl-add{color:var(--success);}
.tl-del{color:var(--error);}
.tool-card-header:hover .tool-card-title,.tl-head:hover .tl-title{opacity:.66;}
.tool-card-preview{display:none;}
.tool-card-duration{display:none;font-size:var(--font-size-xs);color:var(--muted);opacity:.72;white-space:nowrap;margin-left:auto;}
.tool-card-toggle,.tl-caret{margin-left:auto;font-size:10px;color:var(--muted);opacity:.4;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;}
.tool-card.open .tool-card-toggle,.tl.open .tl-caret{transform:rotate(90deg);}
.tool-card-detail,.tl-detail{display:block;max-height:0;opacity:0;overflow:hidden;border-top:1px solid transparent;padding:0;margin-left:0;transition:max-height .26s ease,opacity .2s ease,padding .22s ease,border-top-color .22s ease;background:var(--code-bg);border-radius:8px;}
.tool-card.open .tool-card-detail,.tl.open .tl-detail{max-height:320px;opacity:1;padding:0;border-top-color:transparent;overflow:auto;margin-top:4px;}
.tl-detail-inner{padding:9px 12px 11px;}
.tool-card-args{margin-bottom:6px;}
.tool-card-args div{font-size:var(--message-code-font-size);line-height:1.6;}
.tool-arg-key{color:var(--blue);font-family:'SF Mono',ui-monospace,monospace;font-size:var(--message-code-font-size);display:block;margin-bottom:2px;}
.tool-arg-val{color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;font-size:var(--message-code-font-size);white-space:pre-wrap;word-break:break-word;display:block;overflow-x:auto;}
.tool-card-result pre{font-size:var(--message-code-font-size);color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow-y:auto;margin:0;line-height:1.55;}

/* ── Transparent Stream event rows ── */
/* Inline rhythm: transparent stream events are transcript metadata inside an
   assistant turn, not first-class cards. Keep them inspectable but visually
   below assistant prose unless hovered, focused, or expanded. */
.transparent-event-controls{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px var(--msg-rail);
  max-width:var(--msg-max);
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}
.transparent-event-controls-label{font-weight:600;color:var(--muted);}
.transparent-event-action,
.transparent-event-control{
  cursor:pointer;
  color:var(--muted);
  opacity:.78;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
}
.transparent-event-action:hover,
.transparent-event-control:hover{color:var(--text);opacity:1;text-decoration-color:currentColor;}
.transparent-event-row{
  margin:0 0 1px var(--msg-rail);
  max-width:var(--msg-max);
  width:calc(100% - var(--msg-rail));
  border:1px solid transparent;
  border-left:1px solid transparent;
  border-radius:6px;
  background:transparent;
  overflow:hidden;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,opacity .22s ease;
}
/* Only animate entrance for rows in the LIVE turn — putting the animation on the
   base row class replayed the whole transcript's shimmer on every renderMessages
   rebuild. (Trifecta finding V9.) */
#liveAssistantTurn .transparent-event-row{animation:transparent-event-enter .18s ease-out both;}
.transparent-event-row[data-event-type="thinking"]{
  background:transparent;
  border-color:transparent;
  border-left-color:transparent;
}
.transparent-event-row[data-expanded="1"]{
  border-color:var(--border-subtle);
  background:color-mix(in srgb,var(--surface-subtle) 62%,transparent);
  box-shadow:none;
}
.transparent-event-row:hover,
.transparent-event-row:focus-within{
  border-color:var(--border-subtle);
  background:color-mix(in srgb,var(--surface-subtle) 48%,transparent);
}
/* Transparent Stream: both tool AND thinking inner cards must reset to a flat,
   transparent row. The thinking-card previously kept its base accent-bg/border/
   radius/msg-rail chrome (it was the heaviest object in the stream — Frank's
   complaint, trifecta V1). The scoped !important also beats the per-skin
   `:root[data-skin] .tool-card{...!important}` rules (graphite/sienna/catppuccin/
   hepburn/neon/verdigris) that otherwise re-card every row (trifecta V3). */
.transparent-event-row .tool-card,
.transparent-event-row .tool-card:hover,
.transparent-event-row .tool-card-running,
.transparent-event-row .thinking-card,
.transparent-event-row .thinking-card:hover,
:root[data-skin] .transparent-event-row .tool-card,
:root[data-skin] .transparent-event-row .tool-card:hover,
:root[data-skin] .transparent-event-row .tool-card-running,
:root[data-skin] .transparent-event-row .thinking-card,
:root[data-skin] .transparent-event-row .thinking-card:hover{
  border:0!important;
  border-left:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  margin:0!important;
  max-width:none!important;
  overflow:visible;
}
.transparent-event-row .tool-card-header,
.transparent-event-row .thinking-card-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  min-height:19px;
  padding:1px 4px 1px 7px;
  margin-left:0;
  border-radius:0;
  color:var(--muted);
  transition:background .18s ease,color .18s ease;
}
.transparent-event-row .tool-card-header:hover,
.transparent-event-row .thinking-card-header:hover{background:var(--hover-bg);color:var(--text);}
.transparent-event-row .tool-card-icon,
.transparent-event-row .thinking-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;height:14px;
  flex-shrink:0;
  opacity:.7;
}
.transparent-event-row .tool-card-icon{order:1;}
.transparent-event-row .tool-card-icon svg,
.transparent-event-row .thinking-card-icon svg{width:11px;height:11px;}
.transparent-event-row .tool-card-name{
  font-weight:600;
  color:var(--muted);
  opacity:.86;
  font-size:11.5px;
  order:2;
  flex-shrink:0;
  max-width:40%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transparent-event-row .tool-card-title,
.transparent-event-row .tool-card-preview{
  display:inline;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  opacity:.74;
  font-size:11.5px;
  order:3;
}
.transparent-event-row .thinking-card-label{
  display:inline;
  flex:0 0 auto;
  color:var(--muted);
  opacity:.88;
  font-size:11.5px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transparent-event-thinking-preview{
  display:inline;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  opacity:.6;
  font-size:.85em;
}
.transparent-event-status{
  flex-shrink:0;
  order:4;
  color:var(--muted);
  opacity:.64;
  font-size:10px;
  font-weight:500;
  letter-spacing:.02em;
  padding:1px 5px;
  border-radius:6px;
  background:transparent;
}
/* Failed / running / interrupted must be legible — a failure in a long trace was
   previously invisible (only a muted .64 badge), a regression vs the old card's
   accent. (Trifecta finding V2.) */
.transparent-event-status[data-status="failed"]{color:var(--error,#e5484d);opacity:1;font-weight:600;}
.transparent-event-status[data-status="running"]{color:var(--accent-text);opacity:.95;font-weight:600;}
.transparent-event-status[data-status="interrupted"]{color:var(--warning,var(--muted));opacity:.95;font-weight:600;}
.transparent-event-row[data-event-status="Failed"]{
  border-left-color:color-mix(in srgb,var(--error,#e5484d) 55%,transparent)!important;
}
.transparent-event-row[data-event-status="Failed"]:hover,
.transparent-event-row[data-event-status="Failed"][data-expanded="1"]{
  border-left-color:color-mix(in srgb,var(--error,#e5484d) 70%,transparent)!important;
}
.transparent-event-copy{
  border:0;
  background:transparent;
  color:var(--muted);
  opacity:.28;
  padding:1px 2px;
  cursor:pointer;
  flex-shrink:0;
  order:9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  transition:opacity .18s ease,color .18s ease;
}
.transparent-event-copy:hover,
.transparent-event-copy:focus-visible{opacity:1;color:var(--text);background:transparent;}
.transparent-event-row .tool-card-toggle,
.transparent-event-row .thinking-card-toggle{
  order:10;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;height:14px;
  opacity:.34;
  transition:opacity .18s ease,transform .22s ease;
}
.transparent-event-row:hover .transparent-event-copy,
.transparent-event-row:focus-within .transparent-event-copy,
.transparent-event-row:hover .tool-card-toggle,
.transparent-event-row:focus-within .tool-card-toggle,
.transparent-event-row:hover .thinking-card-toggle,
.transparent-event-row:focus-within .thinking-card-toggle{opacity:.76;}
.transparent-event-row .tool-card:hover .tool-card-toggle,
.transparent-event-row .thinking-card:hover .thinking-card-toggle{opacity:1;}
.transparent-event-row .tool-card.open .tool-card-toggle,
.transparent-event-row .thinking-card.open .thinking-card-toggle{transform:rotate(90deg);opacity:.9;}
.transparent-event-progress{
  position:relative;
  height:1px;
  background:transparent;
  border-radius:0 0 6px 6px;
  overflow:hidden;
  margin:0 -1px -1px -1px;
}
.transparent-event-progress::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:color-mix(in srgb,var(--muted) 42%,transparent);
  box-shadow:none;
  opacity:0;
  border-radius:inherit;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.transparent-event-progress[data-progress-running="1"]::before{opacity:.55;animation:transparent-progress-shimmer 1.6s ease-in-out infinite;}
.transparent-event-progress[data-progress-percent]::before{width:var(--transparent-progress-percent,0%);}
.transparent-event-progress::after{
  content:none;
}
@keyframes transparent-progress-shimmer{
  0%{left:0;right:100%;}
  100%{left:100%;right:0;}
}
.transparent-event-row + .transparent-event-row::before{
  content:none;
}
.transparent-detail-modes{
  display:flex;
  gap:10px;
  padding:4px 8px 0;
  color:var(--muted);
  font-size:10.5px;
}
.transparent-detail-mode{cursor:pointer;opacity:.72;padding:2px 4px 3px;transition:opacity .18s ease,color .18s ease,box-shadow .18s ease;}
.transparent-detail-mode.active{color:var(--text);opacity:1;font-weight:600;box-shadow:inset 0 -1px 0 var(--accent);}
.transparent-event-row .tool-card-detail,
.transparent-event-row .thinking-card-body{
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0;
  margin:0;
  border-top:1px solid transparent;
  background:transparent;
  transform:translateY(-1px);
  transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,transform .24s ease,border-top-color .2s ease,padding .22s ease;
}
.transparent-event-row .tool-card.open .tool-card-detail,
.transparent-event-row .thinking-card.open .thinking-card-body{
  max-height:520px;
  opacity:1;
  transform:translateY(0);
  border-top-color:var(--border-subtle);
  padding:1px 0 3px;
  overflow:auto;
}
.transparent-event-row .thinking-card.open .thinking-card-body{
  border-top-color:transparent;
  padding:0 0 3px;
}
.transparent-event-row .tool-card-detail > *,
.transparent-event-row .thinking-card-body > *{min-height:0;}
.transparent-event-row .tool-card-args,
.transparent-event-row .tool-card-result{padding:4px 7px 4px 9px;}
.transparent-event-row .tool-card-detail[data-transparent-detail-mode="output"] .tool-card-args{display:none;}
.transparent-event-row .tool-card-args{margin-bottom:0;}
/* Compact inline args: key beside value (not stacked), no per-pair rules — the
   stacked column layout made offset=735 consume two ruled lines and read like a
   form. Restores the old .tool-card-args density. (Trifecta V4/V5.) */
.transparent-event-row .tool-arg-pair{display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:1px 0;border-bottom:0;}
.transparent-event-row .tool-arg-key{flex:0 0 auto;min-width:54px;color:var(--muted);font-size:10px;font-family:var(--font-mono);letter-spacing:.01em;opacity:.85;}
.transparent-event-row .tool-arg-val{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:var(--message-code-font-size);color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
/* Flatten the output box into a quiet left-rail instead of a second bordered
   card, so args + output read as ONE expanded zone, not two disjoint cards.
   max-height:none kills the nested scrollbar — the detail's own scroll owns it. */
.transparent-event-row .tool-card-result pre{
  background:transparent;
  border:0;
  border-left:2px solid var(--border-subtle);
  border-radius:0;
  padding:2px 0 2px 9px;
  margin:0;
  max-height:none;
  color:var(--muted);
  line-height:1.5;
}
.transparent-event-row .thinking-card-body pre{
  background:transparent;
  border:0;
  border-radius:0;
  margin-top:0;
  padding:0 8px 6px 27px;
  color:var(--muted);
  line-height:1.5;
}
@media(max-width:600px){
  .transparent-event-controls,
  .transparent-event-row{margin-left:0;width:100%;max-width:none;}
  /* Larger header tap targets on mobile (the 19px desktop header is a poor
     touch target). (Trifecta finding V10.) */
  .transparent-event-row .tool-card-header,
  .transparent-event-row .thinking-card-header{min-height:30px;padding:5px 8px;}
  .transparent-detail-mode{padding:4px 6px 5px;}
}
@keyframes transparent-event-enter{
  from{opacity:0;transform:translateY(2px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── Old-event fading (transparent mode: medium → low) ─────────────── */
/* ── Old-event fading (transparent mode, LIVE turn only — gated in JS) ───── */
.transparent-event-row[data-transparent-fade="1"]{opacity:.86;}
.transparent-event-row[data-transparent-fade="2"]{opacity:.76;}
.transparent-event-row[data-transparent-fade="3"]{opacity:.68;}
.transparent-event-row[data-transparent-fade="4"]{opacity:.6;}
.transparent-event-row[data-transparent-fade="5"]{opacity:.54;}
.transparent-event-row[data-transparent-fade]{transition:opacity .22s ease;}
.transparent-event-row[data-transparent-fade]:hover{opacity:1;}

/* ── Collapsible Hermes chat name tag ───────── */
.assistant-turn[data-transparent-turn-collapsed="1"] .transparent-event-row,
.assistant-turn[data-transparent-turn-collapsed="1"] .transparent-event-controls{
  display:none;
}
.assistant-turn .msg-role.assistant{cursor:pointer;user-select:none;}
.assistant-turn .msg-role.assistant .transparent-turn-chevron{
  display:inline-block;margin-left:6px;opacity:.6;
  transition:transform .2s ease;
}
.assistant-turn[data-transparent-turn-collapsed="1"] .msg-role.assistant .transparent-turn-chevron{
  transform:rotate(-90deg);
}

/* ── Turn footer (transparent mode: elapsed · tokens · TTFT · status) ─ */
/* Mirrors the live run-status line for settled turns in transparent
   mode. Shows duration, first-token time, token usage, and final
   status. Lives OUTSIDE assistant-turn-blocks so it stays visible even
   when the event rows are collapsed. Tight offset and small font to
   keep the visual rhythm with the event cards above it. */
.transparent-turn-footer{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:2px 0 2px var(--msg-rail);
  max-width:var(--msg-max);
  font-size:11.5px;color:var(--muted);line-height:1.3;
  font-variant-numeric:tabular-nums;
  padding:2px 4px;
}
.transparent-turn-footer .lf-time{color:var(--text);}
.transparent-turn-footer .lf-sep{opacity:.4;}
.transparent-turn-footer .lf-status{color:var(--muted);opacity:.85;}
.transparent-turn-footer .lf-ttft{color:var(--accent);opacity:.9;}
.transparent-turn-footer .lf-tokens{font-variant-numeric:tabular-nums;}

/* ── Manual compression cards (transient transcript-local feedback) ── */
.live-compression-cards{
  display:none;
  max-width:800px;
  width:100%;
  margin:0 auto;
  padding:0 24px;
}
/* LiveFooter: inline stream spark · elapsed · tokens · status */
.live-run-status{display:flex;align-items:center;gap:8px;padding-left:0;margin:2px 0 6px;margin-left:var(--msg-rail);max-width:var(--msg-max);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;}
.live-footer{display:flex;align-items:center;gap:8px;padding-left:var(--worklog-rail);margin:2px 0 6px;margin-left:0;max-width:var(--msg-max);font-size:13px;color:var(--muted);}
.live-run-status[hidden]{display:none;}
.lf-spark{color:var(--accent);font-size:13px;display:inline-block;animation:lfspin 1.7s linear infinite;line-height:1;}
@keyframes lfspin{to{transform:rotate(360deg);}}
.live-run-status-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lf-time{color:var(--text);font-variant-numeric:tabular-nums;}
.lf-sep{opacity:.4;}
.lf-tokens{font-variant-numeric:tabular-nums;}
.lf-status{color:var(--muted);opacity:.85;}
@media(max-width:600px){
  .live-run-status{padding-left:0;font-size:12px;}
  .live-footer{padding-left:var(--worklog-rail);font-size:12px;}
}
.compression-block{
  display:flex;
  flex-direction:column;
  width:100%;
}
.compression-turn{
  width:100%;
}
.compression-turn-blocks{
  display:flex;
  flex-direction:column;
}

.compression-card-row{
  margin:0;
  padding:0;
}
.compression-card-row + .compression-card-row{
  margin-top:4px;
}
.tool-card-compress-command{
  background:rgba(201,168,76,.02);
  border-color:rgba(201,168,76,.16);
}
.tool-card-compress-command .tool-card-name{
  color:var(--gold);
  font-weight:600;
}
.tool-card-compress-running{
  background:rgba(124,185,255,.04);
  border-color:rgba(124,185,255,.24);
}
.tool-card-compress-running .tool-card-name{
  color:var(--blue);
}
.tool-card-compress-error{
  background:rgba(248,113,113,.05);
  border-color:rgba(248,113,113,.28);
}
.tool-card-compress-error .tool-card-name{
  color:#fca5a5;
}
.tool-card-compress-complete{
  background:rgba(78,201,132,.05);
  border-color:rgba(78,201,132,.18);
}
.tool-card-compress-complete .tool-card-name{
  color:#4ec984;
}
.auto-compression-divider-row{
  padding:7px 0 8px;
}
.auto-compression-divider{
  display:grid;
  grid-template-columns:minmax(32px,1fr) auto minmax(32px,1fr);
  align-items:center;
  gap:10px;
  color:var(--muted);
  opacity:.72;
  user-select:none;
  pointer-events:none;
}
.auto-compression-divider-line{
  height:1px;
  background:color-mix(in srgb,var(--border-subtle) 75%,transparent);
}
.auto-compression-divider-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  font-size:calc(var(--message-body-font-size) * .92);
  font-weight:400!important;
  line-height:1.2;
  white-space:nowrap;
}
.auto-compression-divider-label svg{
  width:13px;
  height:13px;
  opacity:.78;
}
.auto-compression-divider-done{
  opacity:.82;
}
.auto-compression-divider-done .auto-compression-divider-label{
  color:var(--muted);
}
.tool-card-compress-reference{
  background:rgba(124,185,255,.04);
  border-color:rgba(124,185,255,.18);
}
.tool-card-compress-reference:hover{
  border-color:rgba(124,185,255,.28);
}
.tool-card-compress-reference .tool-card-name{
  color:var(--blue);
}
.tool-card-handoff-summary{
  background:rgba(124,185,255,.04);
  border-color:rgba(124,185,255,.18);
}
.tool-card-handoff-summary .tool-card-name{
  color:var(--blue);
}
.tool-card-handoff-summary .tool-card-preview{
  margin-left:10px;
}
.handoff-summary-fallback-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  font-style:normal;
}
.handoff-summary-body{
  color:var(--text);
  font-size:var(--font-size-sm);
  line-height:1.65;
}
.handoff-summary-body p{
  margin:0 0 8px;
}
.handoff-summary-body p:last-child{
  margin-bottom:0;
}
.handoff-summary-body ul,
.handoff-summary-body ol{
  margin:4px 0 4px 20px;
}
.handoff-summary-body li{
  margin:3px 0;
}
.handoff-summary-body strong{
  color:var(--strong);
}
.handoff-summary-body code{
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:.92em;
  background:var(--code-inline-bg);
  color:var(--code-text);
  padding:1px 5px;
  border-radius:4px;
}

.compression-row{
  margin:0 0 4px;
  padding:0;
}
.compression-card{
  margin-left:var(--msg-rail);
  max-width:var(--msg-max);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.compression-card-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  user-select:none;
}
.compression-card-icon{
  font-size:13px;
  flex-shrink:0;
  opacity:.82;
}
.compression-card-bubbles{
  display:inline-flex;
  gap:3px;
  align-items:center;
  flex-shrink:0;
}
.compression-card-bubbles span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  opacity:.45;
  animation:compressionPulse 1.05s ease-in-out infinite;
}
.compression-card-bubbles span:nth-child(2){animation-delay:.14s;}
.compression-card-bubbles span:nth-child(3){animation-delay:.28s;}
@keyframes compressionPulse{
  0%,80%,100%{transform:translateY(0);opacity:.35;}
  40%{transform:translateY(-1px);opacity:1;}
}
.compression-card-label{
  font-size:11px;
  font-weight:700;
  font-family:'SF Mono',ui-monospace,monospace;
  letter-spacing:.03em;
  color:var(--muted);
  flex-shrink:0;
}
.compression-card-command{
  font-size:11px;
  color:var(--text);
  font-family:'SF Mono',ui-monospace,monospace;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.compression-card-body{
  padding:0 12px 8px 40px;
  font-size:11px;
  line-height:1.55;
  color:var(--muted);
}
.compression-card-body .compression-note{
  display:block;
  margin-top:2px;
  opacity:.82;
}
.compression-card-command-row{
  border-color:rgba(201,168,76,.22);
  background:rgba(201,168,76,.04);
}
.compression-card-command-row .compression-card-label{color:var(--gold);}
.compression-card-running-row{
  border-color:rgba(124,185,255,.24);
  background:rgba(124,185,255,.04);
}
.compression-card-running-row .compression-card-label{color:var(--blue);}
.compression-card-error-row{
  border-color:rgba(248,113,113,.28);
  background:rgba(248,113,113,.05);
}
.compression-card-error-row .compression-card-label{color:#fca5a5;}
.compression-card-focus{
  margin-top:3px;
  opacity:.85;
}
.compression-card-focus .compression-card-focus-label{
  color:var(--muted);
  font-family:'SF Mono',ui-monospace,monospace;
}
.compression-card-error-body{
  color:#fecaca;
}
.compression-reference-row{
  margin-top:0;
}
.compression-reference-card{
  margin-left:var(--msg-rail);
  max-width:var(--msg-max);
  border-radius:8px;
  overflow:hidden;
  background:rgba(124,185,255,.04);
  border:1px solid rgba(124,185,255,.18);
  transition:border-color .15s, background .15s;
}
.compression-reference-card:hover{border-color:rgba(124,185,255,.28);}
.compression-reference-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  cursor:pointer;
  user-select:none;
}
.compression-reference-icon{
  font-size:13px;
  flex-shrink:0;
  opacity:.82;
  color:var(--blue);
}
.compression-reference-label,
.compression-reference-kind{
  font-size:11px;
  font-weight:700;
  font-family:'SF Mono',ui-monospace,monospace;
  letter-spacing:.03em;
  flex-shrink:0;
  white-space:nowrap;
}
.compression-reference-label{color:var(--blue);}
.compression-reference-kind{color:var(--gold);}
.compression-reference-preview{
  font-size:11px;
  color:var(--muted);
  opacity:.72;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compression-reference-toggle{
  font-size:10px;
  color:var(--muted);
  opacity:.55;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform-origin:center;
  transition:transform .18s ease;
}
.compression-reference-card.open .compression-reference-toggle{
  transform:rotate(90deg);
}
.compression-reference-copy{
  flex-shrink:0;
  opacity:.65;
}
.compression-reference-body{
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 12px;
  transition:max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
  border-top:1px solid transparent;
}
.compression-reference-card.open .compression-reference-body{
  max-height:none;
  overflow:visible;
  opacity:1;
  padding:8px 12px 10px;
  border-top-color:rgba(124,185,255,.1);
}
.compression-reference-body pre{
  margin:0;
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:11px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--muted);
}

.compression-complete-card{
  background:rgba(78,201,132,.05);
  border:1px solid rgba(78,201,132,.18);
  border-radius:8px;
  padding:0;
  margin-left:var(--msg-rail);
  max-width:var(--msg-max);
  transition:border-color .15s, background .15s;
}
.compression-complete-card:hover{
  border-color:rgba(78,201,132,.3);
  background:rgba(78,201,132,.07);
}
.compression-complete-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  cursor:pointer;
  user-select:none;
  color:#4ec984;
  font-size:12px;
  font-weight:600;
  opacity:.88;
}
.compression-complete-header:hover{opacity:1;}
.compression-complete-icon{opacity:.78;flex-shrink:0;}
.compression-complete-label{
  font-size:11px;
  font-weight:700;
  font-family:'SF Mono',ui-monospace,monospace;
  letter-spacing:.03em;
  flex-shrink:0;
}
.compression-complete-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:11px;
}
.compression-complete-toggle{
  margin-left:auto;
  font-size:10px;
  color:var(--muted);
  opacity:.55;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform-origin:center;
  transition:transform .18s ease;
}
.compression-complete-card.open .compression-complete-toggle{
  transform:rotate(90deg);
}
.compression-complete-body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 12px;
  border-top:1px solid transparent;
  transition:max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.compression-complete-card.open .compression-complete-body{
  max-height:220px;
  opacity:1;
  padding:8px 12px;
  border-top-color:rgba(78,201,132,.12);
}

/* ── Scrollbar polish ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

/* ── Settings view (rail cog → sidebar menu + main pane) ── */
/* --border-subtle: used inside cards for softer dividers than the
   outer --border; resolves cleanly in both light+dark via color-mix. */
:root{--border-subtle:color-mix(in srgb, var(--border) 60%, transparent);}
:root.dark{--border-subtle:color-mix(in srgb, var(--border) 60%, transparent);}
/* ── Generalized main-view switching ──
   <main class="main"> holds multiple sibling #main* containers (one per view).
   Exactly one is visible at a time; chat is the default when no showing-*
   class is set. Adding a new view needs: a #main<Name> sibling with
   class="main-view", inclusion in the hidden-by-default list, and a
   main.main.showing-<name> > #main<Name> { display:flex } rule. */
.main-view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--bg);}
main.main > #mainChat,
main.main > #mainSettings,
main.main > #mainSkills,
main.main > #mainMemory,
main.main > #mainTasks,
main.main > #mainKanban,
main.main > #mainWorkspaces,
main.main > #mainProfiles,
main.main > #mainInsights,
main.main > #mainLogs{display:none;}
main.main:not(.showing-settings):not(.showing-skills):not(.showing-memory):not(.showing-tasks):not(.showing-kanban):not(.showing-workspaces):not(.showing-profiles):not(.showing-insights):not(.showing-logs):not(.showing-plugin) > #mainChat{display:flex;}
main.main.showing-settings > #mainSettings{display:flex;overflow-y:auto;}
main.main.showing-skills > #mainSkills{display:flex;}
main.main.showing-memory > #mainMemory{display:flex;}
main.main.showing-tasks > #mainTasks{display:flex;}
main.main.showing-kanban > #mainKanban{display:flex;overflow-y:auto;}
main.main.showing-workspaces > #mainWorkspaces{display:flex;}
main.main.showing-profiles > #mainProfiles{display:flex;}
main.main.showing-logs > #mainLogs{display:flex;}
main.main.showing-plugin > #mainPlugin{display:flex;}
main.main > #mainPlugin{display:none;}
#mainPlugin .main-view-body{flex:1;display:flex;flex-direction:column;overflow:hidden;}
#pluginPageContainer{flex:1;display:flex;flex-direction:column;min-height:0;}
#mainSettings{overflow-y:auto;}

/* Sidebar menu (lives in the left sidebar under the cog panel) */
.panel-view#panelSettings{gap:0;padding:0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:41px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;}
.panel-head-actions{display:flex;align-items:center;gap:4px;text-transform:none;letter-spacing:normal;}
.panel-head-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:6px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;}
.panel-head-btn:hover{background:var(--accent-bg);color:var(--accent-text);}
.panel-head-btn:disabled,.panel-head-btn[aria-busy="true"]{opacity:.5;cursor:wait;}
.panel-head-btn:disabled:hover,.panel-head-btn[aria-busy="true"]:hover{background:transparent;color:var(--muted);}
.app-titlebar-new-chat:disabled,.app-titlebar-new-chat[aria-busy="true"]{opacity:.5;cursor:wait;}
.app-titlebar-new-chat:disabled:hover,.app-titlebar-new-chat[aria-busy="true"]:hover{background:transparent;color:var(--muted);}
.panel-head-btn svg{width:14px;height:14px;display:block;}
.panel-head-sub{padding:6px 12px 8px;font-size:11px;color:var(--muted);flex-shrink:0;}
.side-menu{display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto;}
.side-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:none;background:transparent;color:var(--text);cursor:pointer;text-align:left;font-size:13px;font-weight:500;transition:background .15s,color .15s;width:100%;}
.side-menu-item:hover{background:var(--surface);}
.side-menu-item.active{background:var(--accent-bg);color:var(--accent-text);}
.side-menu-item.active svg{color:var(--accent-text);}
.side-menu-item svg{flex-shrink:0;width:16px;height:16px;opacity:.9;}

/* Main canvas: centered, comfortable max-width */
.settings-main{padding:24px;max-width:768px;width:100%;margin:0 auto;min-width:0;}
.settings-pane{display:none;}
.settings-pane.active{display:block;}

/* Page-style section header (title + subtitle + optional badge). */
.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.settings-section-title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3;margin-bottom:4px;}
.settings-section-meta{font-size:13px;color:var(--muted);line-height:1.55;}
.settings-version-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;font-family:'SF Mono',ui-monospace,SFMono-Regular,Menlo,monospace;flex-shrink:0;align-self:flex-start;letter-spacing:.02em;}
#checkUpdatesBlock{display:inline-flex;align-items:center;gap:0.5em;font-size:12px;flex-shrink:0;align-self:flex-start;flex-wrap:wrap;}
#checkUpdatesBlock .btn-tiny{padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s,color .15s;}
#checkUpdatesBlock .btn-tiny:hover{border-color:var(--accent);color:var(--accent);}
#checkUpdatesBlock .btn-tiny:disabled{opacity:.5;cursor:default;}
#checkUpdatesBlock .btn-tiny .spinner-xs{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:spin .6s linear infinite;display:none;}
#checkUpdatesStatus{font-size:11px;font-weight:500;white-space:nowrap;flex-basis:100%;margin-top:0.25em;}

/* Each logical form row is a card surface. Stack with comfortable gap. */
#mainSettings .settings-field{margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar);}
#mainSettings .settings-field:last-of-type{margin-bottom:16px;}
#mainSettings .settings-field > label{display:block;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--muted);margin-bottom:6px;}
/* Checkbox rows use inline flex labels — don't turn them into stacked caps */
#mainSettings .settings-field > label[style*="display:flex"]{color:var(--text);font-size:13px;font-weight:500;margin-bottom:0;}
#mainSettings .settings-field > div[style*="color:var(--muted)"],
#mainSettings .settings-field > div[style*="color: var(--muted)"]{font-size:12px;color:var(--muted);line-height:1.5;}

/* Sidebar tab visibility — hide nav-tab and matching rail-btn when toggled off by user */
.nav-tab-hidden{display:none!important;}

/* Tab visibility chips in Settings > Appearance */
.tab-visibility-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.tab-visibility-chip{font-size:12px;line-height:1;padding:5px 10px;border-radius:var(--radius-pill,999px);border:1px solid var(--accent,var(--link));background:var(--accent,var(--link));color:#1a1a1a;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,opacity .15s,transform .15s;white-space:nowrap;user-select:none;}
.tab-visibility-chip[draggable="true"]{cursor:grab;}
.tab-visibility-chip.dragging{opacity:.55;cursor:grabbing;transform:scale(.96);}
.tab-visibility-chip.drag-over{outline:2px solid var(--link,var(--accent));outline-offset:2px;}
.tab-visibility-chip:hover{filter:brightness(0.92);}
.tab-visibility-chip:focus-visible{outline:2px solid var(--link,var(--accent));outline-offset:2px;}
.tab-visibility-chip.chip-off{background:transparent;color:var(--muted);border-color:var(--border);font-weight:400;}
.tab-visibility-chip.chip-off:hover{border-color:var(--muted);color:var(--text);}

/* Selects & text/password inputs — uniform. Uses !important to win
   over legacy inline styles that were written for the modal era. */
#mainSettings select,
#mainSettings input[type="text"],
#mainSettings input[type="password"]{
  background:var(--bg)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  padding:8px 12px!important;
  font-size:13px!important;
  width:100%;
  transition:border-color .15s,box-shadow .15s;
}
#mainSettings select:focus,
#mainSettings input[type="text"]:focus,
#mainSettings input[type="password"]:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-bg);outline:none;}
#mainSettings input:disabled,
#mainSettings select:disabled{opacity:.6;cursor:not-allowed;}

/* Quick-action grid in Conversation pane — outlined card buttons. */
.hermes-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.settings-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--sidebar);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.settings-action-btn:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
.settings-action-btn.danger{color:var(--error,#e05);border-color:color-mix(in srgb,var(--error,#e05) 30%,transparent);}
.settings-action-btn.danger:hover{background:color-mix(in srgb,var(--error,#e05) 8%,transparent);border-color:var(--error,#e05);color:var(--error,#e05);}
.settings-action-btn:disabled,.settings-action-btn.disabled{opacity:.45;cursor:not-allowed;}
.settings-action-btn:disabled:hover,.settings-action-btn.disabled:hover{background:var(--sidebar);border-color:var(--border);color:var(--text);}

/* Primary save buttons (Appearance / Preferences "Save Settings"). */
#mainSettings .settings-btn,
#mainSettings .sm-btn[onclick^="saveSettings"]{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:13px;transition:background .15s,border-color .15s,opacity .15s;}
#mainSettings .settings-btn:hover,
#mainSettings .sm-btn[onclick^="saveSettings"]:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* Appearance autosave status line (in-place feedback while changing theme/skin/font size). */
#mainSettings .settings-autosave-status{
  margin-top:10px;
  min-height:18px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
#mainSettings .settings-autosave-status.is-saving{color:var(--muted);}
#mainSettings .settings-autosave-status.is-saved{color:var(--success);}
#mainSettings .settings-autosave-status.is-failed{color:var(--error);}
#mainSettings .settings-autosave-status button{
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  border-radius:6px;
  padding:4px 10px;
  cursor:pointer;
  margin-left:4px;
}
#mainSettings .settings-autosave-status button:hover{
  background:var(--accent-hover);
}

/* Secondary sm-btn fallback (Sign out / Disable auth) — neutral outline. */
#mainSettings .sm-btn{border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;}
#mainSettings .sm-btn:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
/* Neutralise legacy inline accent tints so secondary buttons stay theme-safe */
#mainSettings #btnDisableAuth[style],
#mainSettings #btnSignOut[style]{color:var(--text)!important;border-color:var(--border)!important;}
#mainSettings #btnDisableAuth:hover,
#mainSettings #btnSignOut:hover{color:var(--accent-text)!important;border-color:var(--accent-bg-strong)!important;}

/* MCP Server Management */
.mcp-server-row{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;position:relative;font-size:12px;background:var(--surface);}
.mcp-server-row:hover{background:var(--code-bg);}
.mcp-server-row-head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
.mcp-server-name{font-weight:600;color:var(--text);}
.mcp-server-detail{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.mcp-server-meta{display:flex;gap:10px;color:var(--muted);font-size:11px;}
.mcp-transport-badge,.mcp-status-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:999px;flex-shrink:0;}
.mcp-stdio{background:rgba(99,102,241,.12);color:#818cf8;}
.mcp-unknown{background:rgba(161,161,170,.12);color:#a1a1aa;}
.mcp-http{background:rgba(34,197,94,.12);color:#4ade80;}
.mcp-status-active{background:rgba(34,197,94,.12);color:#4ade80;}
.mcp-status-configured{background:rgba(245,158,11,.12);color:#f59e0b;}
.mcp-status-disabled{background:rgba(161,161,170,.12);color:#a1a1aa;}
.mcp-status-invalid_config,.mcp-status-unknown{background:rgba(239,68,68,.12);color:#f87171;}
.mcp-tool-count{color:var(--text);}
.mcp-toggle-btn{font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:opacity .15s;}
.mcp-toggle-btn:hover{opacity:.8;}
.mcp-toggle-enabled{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.3);}
.mcp-toggle-disabled{background:rgba(161,161,170,.12);color:#a1a1aa;border-color:rgba(161,161,170,.25);}
.mcp-readonly-note,.mcp-restart-hint{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.45;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;padding:8px 10px;}
.mcp-tool-search{width:100%;margin:0 0 8px 0;padding:8px 10px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:8px;font-size:12px;outline:none;}
.mcp-tool-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg-soft);}
.mcp-tool-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.35;flex-wrap:wrap;}
.mcp-tool-summary{min-width:0;}
.mcp-tool-page-size{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);font-size:11px;}
.mcp-tool-page-size select{appearance:none;border:1px solid var(--border2);background:var(--code-bg);color:var(--text);border-radius:7px;padding:4px 22px 4px 8px;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;}
.mcp-tool-empty-detail{display:inline-block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.35;}
.mcp-tool-list{max-height:min(52vh,560px);overflow:auto;padding-right:3px;scrollbar-gutter:stable;}
.mcp-tool-row{display:flex;flex-direction:column;gap:5px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12px;background:var(--surface);}
.mcp-tool-name{font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.mcp-tool-server{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--code-bg);border:1px solid var(--border2);border-radius:999px;padding:2px 6px;}
.mcp-tool-schema{margin:2px 0 0 0;padding:7px 8px;white-space:pre-wrap;max-height:140px;overflow:auto;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--muted);font-size:11px;line-height:1.45;}
.mcp-tool-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;}
.mcp-tool-page-label{color:var(--muted);font-size:11px;min-width:44px;text-align:center;}
.mcp-tool-page-btn{border:1px solid var(--border2);background:var(--code-bg);color:var(--text);border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;}
.mcp-tool-page-btn:hover:not(:disabled){border-color:var(--accent-bg-strong);color:var(--accent-text);}
.mcp-tool-page-btn:disabled{opacity:.45;cursor:not-allowed;}

/* Picker grids (theme / skin / font-size): make the card chrome use
   tokens so all skins flip correctly. */
#mainSettings .theme-pick-btn,
#mainSettings .skin-pick-btn,
#mainSettings .font-size-pick-btn{background:var(--bg)!important;border-color:var(--border)!important;}
#mainSettings .theme-pick-btn:hover,
#mainSettings .skin-pick-btn:hover,
#mainSettings .font-size-pick-btn:hover{border-color:var(--accent-bg-strong)!important;background:var(--surface)!important;}
/* Active/selected state for picker cards — must use !important to beat the base border-color:var(--border)!important rule above */
#mainSettings .theme-pick-btn.active,
#mainSettings .skin-pick-btn.active,
#mainSettings .font-size-pick-btn.active{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent-bg-strong)!important;background:var(--surface)!important;}
#mainSettings .chat-activity-mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px;}
#mainSettings .chat-activity-mode-btn{min-height:34px;padding:7px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;}
#mainSettings .chat-activity-mode-btn:hover{border-color:var(--accent-bg-strong);color:var(--text);background:var(--hover-bg);}
#mainSettings .chat-activity-mode-btn.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent-bg-strong);}

/* Responsive: tighten canvas on small screens. */
@media (max-width: 768px){
  .settings-main{padding:16px 12px;}
  .settings-section-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .settings-section-title{font-size:16px;}
  #checkUpdatesBlock{flex-wrap:wrap;row-gap:6px;width:100%;}
  .settings-version-badge{white-space:nowrap;}
  .hermes-action-grid{grid-template-columns:1fr;}
  #mainSettings .settings-field{padding:14px;}
  #mainSettings .chat-activity-mode-toggle{grid-template-columns:1fr;}
}

/* ── Provider cards (Settings → Providers) ──
   Matches hermes-desktop LLM Providers panel. Card uses --sidebar (surface-1),
   hover rows use --surface (surface-2). Body divider uses a subtle tint. */
#providersList{gap:12px;}
.provider-quota-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,var(--surface),var(--sidebar));
  padding:12px 16px;
  margin-bottom:12px;
  min-width:0;
}
.provider-quota-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.provider-quota-title{font-size:13px;font-weight:650;color:var(--text);line-height:1.2;}
.provider-quota-subtitle{font-size:11px;color:var(--muted);line-height:1.3;margin-top:2px;}
.provider-quota-checked{font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:2px;}
.provider-quota-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.provider-quota-badge{font-size:10.5px;font-weight:650;text-transform:capitalize;padding:2px 8px;border-radius:999px;background:var(--accent-bg);color:var(--accent-text);white-space:nowrap;}
.provider-quota-refresh{appearance:none;border:1px solid var(--border);border-radius:999px;background:var(--sidebar);color:var(--text);font-size:11px;font-weight:650;line-height:1;padding:5px 9px;cursor:pointer;white-space:nowrap;}
.provider-quota-refresh:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.provider-quota-refresh:disabled{opacity:.65;cursor:wait;}
.provider-quota-body{display:flex;flex-wrap:wrap;gap:8px;min-width:0;}
.provider-quota-metric{flex:1;min-width:88px;border:1px solid var(--border);border-radius:8px;background:var(--sidebar);padding:8px 10px;}
.provider-quota-metric span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px;}
.provider-quota-metric strong{display:block;font-size:14px;color:var(--text);font-weight:650;}
.provider-quota-metric small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:3px;}
.provider-quota-window-detail{opacity:.9;}
.provider-quota-window{min-width:132px;}
.provider-quota-details{display:flex;flex-wrap:wrap;gap:6px;width:100%;}
.provider-quota-details span{font-size:11px;line-height:1.35;color:var(--muted);border:1px solid var(--border);border-radius:999px;background:var(--sidebar);padding:4px 8px;}
.provider-quota-message{font-size:12px;color:var(--muted);line-height:1.45;}
.provider-quota-pool{width:100%;min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--sidebar);overflow:hidden;}
.provider-quota-pool summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:9px 10px;font-size:12px;color:var(--text);font-weight:650;}
.provider-quota-pool summary::-webkit-details-marker{display:none;}
.provider-quota-pool-summary-label{display:flex;align-items:center;gap:7px;min-width:0;}
.provider-quota-pool-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .16s ease;opacity:.75;flex:0 0 auto;}
.provider-quota-pool[open] .provider-quota-pool-chevron{transform:rotate(45deg);}
.provider-quota-pool summary strong{font-size:11px;color:var(--muted);font-weight:600;text-align:right;}
.provider-quota-pool-plans{padding:0 10px 8px;font-size:11px;color:var(--muted);}
.provider-quota-pool-rows{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px;min-width:0;}
.provider-quota-pool-row{border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:8px;min-width:0;}
.provider-quota-pool-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:12px;line-height:1.3;}
.provider-quota-pool-row-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.provider-quota-pool-row-head strong{font-size:10px;text-transform:capitalize;border-radius:999px;padding:2px 7px;background:var(--accent-bg);color:var(--accent-text);white-space:nowrap;}
.provider-quota-pool-row-available .provider-quota-pool-row-head strong{background:rgba(34,197,94,.12);color:#16a34a;}
:root.dark .provider-quota-pool-row-available .provider-quota-pool-row-head strong{background:rgba(34,197,94,.16);color:#4ade80;}
.provider-quota-pool-row-exhausted .provider-quota-pool-row-head strong{background:rgba(234,179,8,.12);color:var(--warning);}
.provider-quota-pool-windows{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px;}
.provider-quota-pool-window{min-width:0;border:1px solid var(--border);border-radius:7px;background:var(--sidebar);padding:7px 8px;}
.provider-quota-pool-window span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px;}
.provider-quota-pool-window strong{display:block;font-size:13px;color:var(--text);font-weight:650;}
.provider-quota-pool-window small{display:block;font-size:10px;color:var(--muted);line-height:1.3;margin-top:2px;}
.provider-quota-pool-note{font-size:11px;color:var(--muted);line-height:1.4;}
.provider-quota-pool-details{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.provider-quota-pool-details span{font-size:10.5px;line-height:1.3;color:var(--muted);border:1px solid var(--border);border-radius:999px;background:var(--sidebar);padding:3px 7px;}
.provider-quota-card-available .provider-quota-badge{background:rgba(34,197,94,.12);color:#16a34a;}
:root.dark .provider-quota-card-available .provider-quota-badge{background:rgba(34,197,94,.16);color:#4ade80;}
.provider-quota-card-no_key .provider-quota-badge,.provider-quota-card-unsupported .provider-quota-badge{background:rgba(234,179,8,.12);color:var(--warning);}
.provider-quota-card-invalid_key .provider-quota-badge{background:color-mix(in srgb,var(--error) 12%,transparent);color:var(--error);}
@media (max-width: 520px){
  .provider-quota-card{padding:12px;}
  .provider-quota-header{flex-wrap:wrap;}
  .provider-quota-body{flex-direction:column;}
  .provider-quota-metric{width:100%;min-width:0;flex:none;}
  .provider-quota-window{min-width:0;}
  .provider-quota-pool summary{align-items:flex-start;flex-direction:column;gap:4px;}
  .provider-quota-pool summary strong{text-align:left;}
  .provider-quota-pool-rows{padding:0 8px 8px;}
  .provider-quota-pool-row{padding:8px;}
  .provider-quota-pool-row-head{align-items:flex-start;flex-wrap:wrap;}
  .provider-quota-metric small,.provider-quota-pool-window small{overflow-wrap:anywhere;}
  .provider-quota-details span,.provider-quota-pool-details span{max-width:100%;white-space:normal;}
  .provider-quota-pool-row-head span{white-space:normal;}
  .provider-quota-pool-windows{grid-template-columns:1fr;}
}
.provider-cost-chart-wrap{width:100%;margin-top:12px;}
.provider-cost-chart-title{font-size:11px;font-weight:650;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.provider-cost-chart-pace{font-weight:400;color:var(--text);}
.provider-cost-chart-bars{height:80px;}
.provider-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--sidebar);
  overflow:hidden;
  margin-bottom:12px;
  transition:border-color .15s ease;
}
.provider-card:last-child{margin-bottom:0;}
.provider-card-header{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:12px 16px;
  background:transparent;border:0;
  color:var(--text);
  text-align:left;cursor:pointer;
  font:inherit;
  transition:background .15s ease;
}
.provider-card-header:hover{background:var(--surface);}
.provider-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.provider-card-name{font-size:13px;font-weight:500;color:var(--text);line-height:1.2;}
.provider-card-meta{font-size:11px;color:var(--muted);line-height:1.2;opacity:.82;}
.provider-card-badge{
  flex-shrink:0;
  font-size:10.5px;font-weight:500;
  padding:2px 8px;border-radius:999px;
  /* Literal tailwind green-500/10 + green-600 to match desktop reference */
  background:rgba(34,197,94,.12);
  color:#16a34a;
  letter-spacing:.01em;
}
:root.dark .provider-card-badge{background:rgba(34,197,94,.16);color:#4ade80;}
.provider-card-chevron{
  flex-shrink:0;color:var(--muted);
  transition:transform .2s ease;
}
.provider-card.open .provider-card-chevron{transform:rotate(180deg);}
.provider-card-body{
  display:none;
  padding:12px 16px 16px;
  border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.provider-card.open .provider-card-body{display:block;}
.provider-card-hint{font-size:12px;color:var(--muted);line-height:1.4;}
.provider-card-field{display:flex;flex-direction:column;gap:6px;}
.provider-card-label{
  font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:.02em;
}
.provider-card-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.provider-card-input{
  flex:1;min-width:160px;
  padding:8px 10px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.provider-card-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.provider-card-btn{
  padding:7px 12px;
  font-size:12px;font-weight:500;
  border-radius:8px;
  border:1px solid transparent;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.provider-card-btn:hover{background:var(--hover-bg);}
.provider-card-btn:disabled{opacity:.45;cursor:not-allowed;}
.provider-card-btn-ghost{background:var(--surface);}
.provider-card-btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
:root.dark .provider-card-btn-primary{color:#0A0908;}
.provider-card-btn-primary:hover:not(:disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.provider-card-btn-danger{
  color:var(--error);
  background:transparent;
}
.provider-card-btn-danger:hover{
  background:color-mix(in srgb, var(--error) 10%, transparent);
}


/* ── Plugin visibility cards ── */
#pluginsList{gap:12px;}
.plugin-card .provider-card-body{display:block;}
.plugin-card-header{cursor:default;}
.plugin-card-header:hover{background:transparent;}
.plugin-card-badge-disabled{background:var(--surface);color:var(--muted);}
.plugin-hook-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.plugin-hook-badge{display:inline-flex;align-items:center;border:1px solid var(--border2);background:var(--code-bg);color:var(--text);border-radius:999px;padding:3px 8px;font-size:11px;font-family:var(--font-mono);}
.plugin-hook-empty{font-size:12px;color:var(--muted);font-style:italic;}
.plugin-card-footer{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.plugin-card-footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.plugin-toggle-label{font-size:12px;color:var(--muted);}
.plugin-toggle-switch{position:relative;display:inline-block;width:32px;height:18px;flex-shrink:0;}
.plugin-toggle-switch input{opacity:0;width:0;height:0;}
.plugin-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border2);border-radius:9px;transition:background .2s;}
.plugin-toggle-slider::before{content:'';position:absolute;height:12px;width:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.45);}
.plugin-toggle-switch input:checked+.plugin-toggle-slider{background:var(--accent);}
.plugin-toggle-switch input:checked+.plugin-toggle-slider::before{transform:translateX(14px);}
/* Ghost/outline button: --accent-text is not guaranteed to contrast against
   --accent in every theme (e.g. it equals --accent in the default gold theme,
   which renders invisible text on a filled block). Use the accent as the text +
   border colour on the card's own surface, which is always legible. */
.plugin-open-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;}
.plugin-open-btn:hover{background:var(--accent);color:var(--bg);}

/* ── Provider model tags ── */
.provider-card-models{
  margin-bottom:10px;
  display:flex;flex-direction:column;gap:6px;
}
.provider-card-model-tags{
  display:flex;flex-wrap:wrap;gap:4px;
}
.provider-card-model-tag{
  display:inline-block;
  padding:2px 8px;
  font-size:10.5px;font-family:ui-monospace,SFMono-Regular,\"SF Mono\",Menlo,Consolas,monospace;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  line-height:1.5;
  user-select:all;
}
/* "+N more" disclosure pill — appended when a provider's catalog is trimmed
   for UI scannability (#1567 — Nous Portal large-tier accounts ship 100s of
   models). Visually distinct from a real model tag so users don't think it's
   a model id; muted dashed border, italic, no user-select. */
.provider-card-model-tag-more{
  font-style:italic;
  border-style:dashed;
  user-select:none;
  cursor:help;
}

/* ── Session pin indicator (inline, only when pinned) ── */
.session-pin-indicator{
  flex-shrink:0;
  width:10px;
  height:10px;
  color:var(--accent);
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.session-pin-indicator svg{width:10px;height:10px;}

/* ── Fork lineage indicator (inline, subtle until row focus/hover) ── */
.session-branch-indicator,
.session-worktree-indicator{
  flex-shrink:0;
  width:12px;
  height:12px;
  color:var(--muted);
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.35;
  pointer-events:none;
  transition:opacity .15s ease,color .15s ease;
}
.session-branch-indicator svg,
.session-worktree-indicator svg{width:12px;height:12px;}
.session-item:hover .session-branch-indicator,
.session-item:hover .session-worktree-indicator,
.session-item:focus-within .session-branch-indicator,
.session-item:focus-within .session-worktree-indicator,
.session-item.menu-open .session-branch-indicator{
  opacity:.85;
  color:var(--text);
}
.session-item.menu-open .session-worktree-indicator{
  opacity:.85;
  color:var(--text);
}
.session-item.active .session-branch-indicator,
.session-item.active .session-worktree-indicator{color:var(--accent-text);}

/* ── Cron alert badge ── */
.cron-badge{position:absolute;top:2px;right:2px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;padding:0 3px;}
.cron-new-dot{width:7px;height:7px;border-radius:50%;background:var(--success,#22c55e);flex-shrink:0;animation:cron-dot-pulse 2s ease-in-out infinite;}
.cron-agent-badge{flex-shrink:0;font-size:12px;line-height:1;}
.cron-script-badge{flex-shrink:0;font-size:12px;line-height:1;opacity:.92;}
.cron-script-job-banner{margin-bottom:12px;}
.cron-script-job-banner .detail-alert-title{font-weight:600;}
.detail-script{background:var(--sidebar);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;white-space:pre-wrap;line-height:1.55;color:var(--text);font-family:'SF Mono',ui-monospace,monospace;word-break:break-word;}
.detail-hint{font-size:11px;color:var(--muted);line-height:1.5;}
.cron-script-card .detail-hint,.cron-script-card-hint{margin-top:8px;}
.detail-badge.cron-mode-badge.script{background:rgba(148,163,184,.14);color:var(--text-secondary);}
.detail-badge.cron-mode-badge.agent{background:rgba(99,179,237,.14);color:#90cdf4;}
@keyframes cron-dot-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.has-new-run{border-color:var(--success,#22c55e)!important;box-shadow:0 0 0 1px var(--success,#22c55e);}

/* ── Background error banner ── */
/* ── Archived sessions ── */
.session-item.archived{opacity:.5;}
.session-item.archived .session-title{font-style:italic;}

/* ── Subagent session tree (#494) ── */
.session-lineage-count{display:inline-flex;align-items:center;justify-content:center;height:16px;font-size:10px;font-weight:600;padding:0 6px;border-radius:999px;background:rgba(148,163,184,.14);color:var(--muted);margin-left:6px;flex-shrink:0;user-select:none;cursor:default;}
.session-lineage-count.expandable{cursor:pointer;}
.session-lineage-count.expandable:hover{background:rgba(148,163,184,.24);color:var(--text);}
.session-item.active .session-lineage-count{color:var(--accent-text);background:rgba(255,255,255,.14);}
.session-lineage-segments{display:flex;flex-direction:column;gap:3px;margin-top:6px;margin-left:12px;padding-left:8px;border-left:1px dashed rgba(148,163,184,.22);}
.session-lineage-segment{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;text-align:left;padding:3px 4px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.session-lineage-segment:hover,.session-lineage-segment.active{background:rgba(148,163,184,.12);color:var(--text);}
.session-child-count{display:inline-flex;align-items:center;justify-content:center;height:16px;font-size:10px;font-weight:600;padding:0 6px;border-radius:999px;background:rgba(99,179,237,.16);color:#63b3ed;margin-left:6px;flex-shrink:0;user-select:none;cursor:pointer;}
.session-child-count:hover{background:rgba(99,179,237,.26);color:#90cdf4;}
.session-child-sessions{display:flex;flex-direction:column;gap:3px;margin-top:6px;margin-left:12px;padding-left:8px;border-left:1px solid var(--border,rgba(255,255,255,.1));}
.session-child-session{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;text-align:left;padding:3px 4px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.session-child-session:hover,.session-child-session.active{background:rgba(255,255,255,.06);color:var(--text);}
.session-tree-children{margin-left:16px;border-left:1px solid var(--border,rgba(255,255,255,.1));padding-left:4px;}
.session-tree-child.session-item{font-size:12px;opacity:.85;border-radius:6px;padding:6px 8px;}
.session-tree-child.session-item:hover{opacity:1;}
.session-tree-child.session-item.active{opacity:1;}
.session-tree-child.session-item .session-meta{font-size:10px;}
.session-tree-caret{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;cursor:pointer;color:var(--muted);flex-shrink:0;transition:transform .15s;user-select:none;border-radius:3px;margin-right:2px;}
.session-tree-caret:hover{color:var(--text);background:rgba(255,255,255,.06);}
.session-tree-caret.collapsed{transform:none;}
.session-tree-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;font-size:9px;font-weight:700;padding:0 4px;border-radius:8px;background:rgba(99,179,237,.2);color:#63b3ed;margin-left:auto;flex-shrink:0;user-select:none;}

/* ── Session tags ── */
.session-tag{display:inline-block;font-size:9px;font-weight:600;padding:1px 5px;margin-left:4px;border-radius:3px;background:rgba(99,179,237,.2);color:#63b3ed;cursor:pointer;vertical-align:middle;}
.session-tag:hover{background:rgba(99,179,237,.35);}

/* ── File rename input ── */
.file-rename-input{background:rgba(255,255,255,.08);border:1px solid var(--accent);border-radius:4px;color:var(--text);font-size:12px;padding:1px 4px;width:100%;outline:none;min-width:0;}

/* ── Message timestamps ── */
.msg-time{font-size:10px;color:var(--muted);opacity:.6;margin-left:6px;}
.msg-role:hover .msg-time{opacity:1;}

/* ── Mermaid diagrams ── */
.mermaid-block{background:var(--code-bg);border-radius:8px;padding:16px;margin:8px 0;overflow-x:auto;}
.mermaid-rendered{background:transparent;padding:8px 0;}
.mermaid-rendered svg{max-width:100%;height:auto;}

/* ── Session projects ── */
.session-source-tabs{display:flex;gap:4px;padding:4px 10px 8px;flex-shrink:0;}
.session-source-tab{flex:1;min-width:0;border:1px solid var(--border2);border-radius:10px;background:var(--input-bg);color:var(--muted);font-size:10px;font-weight:700;line-height:1.2;padding:5px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s;}
.session-source-tab:hover{background:rgba(255,255,255,.08);color:var(--text);}
.session-source-tab.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg);}
.session-empty-note{padding:20px 14px;color:var(--muted);font-size:12px;text-align:center;opacity:.7;}
.project-bar{display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:wrap;align-items:center;flex-shrink:0;}
.project-chip{font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;cursor:pointer;border:1px solid var(--border2);background:var(--input-bg);color:var(--muted);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;}
.project-chip:hover{background:rgba(255,255,255,.08);color:var(--text);}
.project-chip.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg);}
.project-chip.long-pressing{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);transform:scale(1.05);}
/* "Unassigned" filter chip — dashed border distinguishes it from real
   project chips so it reads as a meta-filter ("things without a project")
   rather than another project. Keeps full color treatment in the active
   state so it's still obviously selected. */
.project-chip.no-project{border-style:dashed;}
.project-chip .color-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
.project-create-btn{font-size:10px;padding:3px 6px;border-radius:12px;cursor:pointer;border:1px dashed var(--border2);background:none;color:var(--muted);opacity:.6;transition:all .15s;}
.project-create-btn:hover{opacity:1;border-color:var(--blue);color:var(--blue);}
.project-create-input{font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid var(--accent-bg);background:var(--surface);color:var(--text);outline:none;min-width:40px;max-width:180px;width:auto;font-family:inherit;box-shadow:0 0 0 2px var(--accent-bg);}
.project-picker{position:absolute;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:8px;padding:4px;z-index:30;min-width:160px;max-width:220px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.batch-action-bar .batch-project-picker{position:static;right:auto;top:auto;min-width:100%;max-width:none;width:100%;box-shadow:none;margin-top:2px;background:var(--input-bg);}
.project-picker-item{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;color:var(--muted);transition:all .1s;display:flex;align-items:center;gap:6px;}
.project-picker-item:hover{background:rgba(255,255,255,.08);color:var(--text);}
.project-picker-item.active{color:var(--blue);}
.project-picker-create{color:var(--blue);opacity:.7;border-top:1px solid var(--border2);margin-top:2px;padding-top:6px;}
.project-picker-create:hover{opacity:1;background:var(--accent-bg);}
/* Lives as a flex sibling in .session-title-row (between title and time);
   the row's gap:6px handles spacing, no margin/vertical-align needed. */
.session-project-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;}

/* ── Saved prompts popup ── */
.saved-prompts-popup{position:absolute;bottom:calc(100% + 8px);left:0;min-width:280px;max-width:380px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:200;flex-direction:column;gap:2px;padding:6px;}
.saved-prompt-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;}
.saved-prompt-row:hover{background:var(--hover-bg);}
.saved-prompt-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.saved-prompt-delete{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--muted);padding:2px;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.saved-prompt-delete:hover{color:var(--danger,#f56565);background:rgba(245,101,101,.12);}
.saved-prompt-add-row{padding:6px 4px 2px;border-top:1px solid var(--border);margin-top:4px;}
.saved-prompt-save-btn{width:100%;padding:6px 10px;border-radius:6px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent-text);font-size:12px;font-weight:600;cursor:pointer;text-align:center;}
.saved-prompt-save-btn:hover{background:var(--accent-bg-strong);}
.saved-prompts-empty,.saved-prompts-loading{padding:12px 10px;font-size:12px;color:var(--muted);text-align:center;}

/* ── Code copy button ── */
.code-copy-btn{background:var(--hover-bg);border:1px solid var(--border2);border-radius:4px;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;transition:all .15s;line-height:1.3;}
.code-copy-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}

/* ── Tool card expand/collapse toggle ── */
.tool-cards-toggle{margin:4px 0 2px 40px;display:flex;gap:8px;}
.tool-cards-toggle button{background:none;border:none;color:var(--blue);font-size:10px;cursor:pointer;opacity:.6;padding:0;}
.tool-cards-toggle button:hover{opacity:1;text-decoration:underline;}

/* ── Thinking/reasoning card: structural sub-selectors. ──
   The canonical visual rules (background, border, padding, max-height,
   etc.) live in the consolidated block further down (around line 1320).
   Only sub-element selectors that the consolidated block doesn't cover
   (label, toggle, rotate animation) are kept here. ── */
.thinking-card-label{font-weight:600;letter-spacing:.02em;}
.thinking-card-btn-row{margin-left:auto;display:inline-flex;align-items:center;gap:6px;}
.thinking-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--accent-text);opacity:.72;cursor:pointer;transition:background .15s,color .15s,opacity .15s;}
.thinking-copy-btn:hover,.thinking-copy-btn:focus-visible{background:var(--accent-bg-strong);opacity:1;outline:none;}
.thinking-card-toggle{font-size:10px;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;}
.thinking-card.open .thinking-card-toggle{transform:rotate(90deg);}

.bg-error-banner{background:rgba(229,62,62,.15);border:1px solid rgba(229,62,62,.3);color:#fca5a5;padding:8px 16px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0;}

/* ── CLI / Agent session items in sidebar ── */
.session-item.cli-session {
  padding-right: 6px;
}
/* Source chip (pill) in the sidebar title row */
.session-source-chip {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-text);
  opacity: .65;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.12);
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
  flex-shrink: 0;
  line-height: 1.4;
  white-space: nowrap;
}
.session-item:not(.read-only-session):hover .session-source-chip {
  display: none;
}
.session-item.read-only-session:hover .session-source-chip {
  opacity: .85;
}
.session-item.menu-open .session-source-chip {
  display: none;
}
/* Source-specific colors for gateway sessions */
.session-item.cli-session[data-source-key="telegram"] { border-left-color: rgba(0, 136, 204, 0.55); }
.session-source-chip[data-source-key="telegram"] { color: rgba(0, 136, 204, 0.85); background: rgba(0, 136, 204, 0.12); }
.session-item.cli-session[data-source-key="discord"] { border-left-color: #5865F2; }
.session-source-chip[data-source-key="discord"] { color: #5865F2; background: rgba(88, 101, 242, 0.12); }
.session-item.cli-session[data-source-key="slack"] { border-left-color: #4A154B; }
.session-source-chip[data-source-key="slack"] { color: #4A154B; background: rgba(74, 21, 75, 0.12); }
.session-item.cli-session[data-source-key="claude_code"] { border-left-color: rgba(217, 119, 6, 0.65); }
.session-source-chip[data-source-key="claude_code"] { color: rgba(217, 119, 6, 0.85); background: rgba(217, 119, 6, 0.12); }

/* ═══════════════════════════════════════════════════════════════════
   Messages redesign — additive overrides for the transcript area.
   Fixes the issues catalogued in docs/ui-ux/index.html:
     • single indent rail (one var, one column)
     • quieter thinking card (was louder than the answer)
     • user-message bubble so user vs. assistant reads at a glance
     • persistent affordances (timestamps, actions, usage always visible)
     • unified widths (body + tool cards share one max)
     • tamed inline-code colour (no longer outshouts links)
     • streaming cursor at end of live assistant body
     • [data-error="1"] marker for error bubbles
     • .msg-date-sep for day-change separators
     • tighter type scale (11/12/13/14/16 — no more 10/10.5/12.5)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --msg-rail: 0;
  --msg-max: 780px;
  --user-bubble-bg: var(--accent);
  --user-bubble-border: var(--accent-hover);
  --user-bubble-text: #fff;
  --user-bubble-placeholder: rgba(255,255,255,.7);
  --user-selection-bg: rgba(0,0,0,.22);
  --user-selection-text: #fff;
}
/* Dark mode: keep user bubbles dark; skin remains a tint via border/fill. */
:root.dark {
  --user-bubble-bg: var(--accent-bg-strong);
  --user-bubble-border: var(--accent-bg-strong);
  --user-bubble-text: var(--text);
  --user-bubble-placeholder: var(--muted);
  --user-selection-bg: rgba(255,255,255,.18);
  --user-selection-text: var(--text);
}

/* Inline code: stop shouting orange; inherit strong text colour instead */
.msg-body code { color: var(--strong); background: var(--code-inline-bg); font-size: var(--message-code-font-size); }

/* ── Unified indent rail — every child of a turn lines up on --msg-rail ── */
.msg-row { padding: 12px 0; }
.msg-body { padding-left: var(--msg-rail); padding-top: 8px; max-width: var(--msg-max); }
.msg-body code,
.msg-body pre,
.msg-body table { font-family: 'SF Mono', ui-monospace, monospace; }
.msg-body:empty { display: none; }
.assistant-turn { width: 100%; }
.assistant-turn-blocks { display: flex; flex-direction: column; }
.status-card{margin:8px 0 8px var(--msg-rail);max-width:min(var(--msg-max),760px);border:1px solid var(--border-subtle);background:var(--surface-subtle);border-radius:var(--radius-card);box-shadow:0 10px 24px rgba(0,0,0,.05);overflow:hidden;}
.status-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-subtle-hover),var(--surface-subtle));}
.status-card-title-wrap{min-width:0;}
.status-card-title{font-weight:650;color:var(--text);font-size:14px;letter-spacing:.01em;}
.status-card-subtitle{font-size:12px;color:var(--muted);margin-top:3px;}
.status-card-session-copy{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:5px 9px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-family:var(--font-mono);cursor:pointer;max-width:230px;}
.status-card-session-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.status-card-session-copy:hover,.status-card-session-copy.copied{color:var(--accent-text);border-color:var(--accent-bg-strong);background:var(--accent-bg);}
.status-card-grid{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:0;border-top:0;}
.status-card-row{display:contents;}
.status-card-label,.status-card-value{padding:9px 16px;border-top:1px solid var(--border-subtle);font-size:13px;line-height:1.4;}
.status-card-row:first-child .status-card-label,.status-card-row:first-child .status-card-value{border-top:0;}
.status-card-label{color:var(--muted);font-weight:550;background:rgba(0,0,0,.015);}
.status-card-value{color:var(--text);word-break:break-word;font-family:var(--font-mono);}
@media (max-width:700px){.status-card{margin-left:0;}.status-card-head{flex-direction:column;}.status-card-session-copy{max-width:100%;}.status-card-grid{grid-template-columns:1fr;}.status-card-label{padding-bottom:2px;border-top:1px solid var(--border-subtle);}.status-card-value{padding-top:2px;border-top:0;}}
.assistant-segment-anchor { display: none; }

/* ── Classic conversation layout: user right, half-width; assistant left ── */
.msg-row[data-role="user"] { align-self: flex-end; max-width: 60%; }
@media (max-width: 900px) { .msg-row[data-role="user"] { max-width: 78%; } }
@media (max-width: 600px) { .msg-row[data-role="user"] { max-width: 90%; } }
/* Hide the entire "empty tool-anchor" assistant row (content='' with
   tool_calls). renderMessages keeps it in the DOM so tool cards can anchor
   to it, but visually it adds a ghost "Hermes" header above the tool cards.
   With the row hidden the transition from live → settled on 'done' is
   seamless. */
.msg-row[data-role="assistant"]:has(> .msg-body:empty) { padding: 0; margin: 0; }
.msg-row[data-role="assistant"]:has(> .msg-body:empty) .msg-role,
.msg-row[data-role="assistant"]:has(> .msg-body:empty) .msg-files { display: none; }
.msg-files { padding-left: var(--msg-rail); }
.msg-usage { padding-left: var(--msg-rail); opacity: 1; margin-top: 6px; font-size: 11px; }
.tool-card { margin-left: var(--msg-rail); max-width: var(--msg-max); }
.thinking-card { margin-left: var(--msg-rail); max-width: var(--msg-max); }
.agent-activity-group .tool-card,
.agent-activity-group .thinking-card { margin-left: 0; max-width: none; }
.agent-activity-thinking { margin: 2px 0; }
.tool-cards-toggle { margin-left: var(--msg-rail); }
.msg-row[data-editing="1"] { width: 100%; }
.msg-row[data-editing="1"] .msg-edit-area,
.msg-row[data-editing="1"] .msg-edit-bar { margin-left: var(--msg-rail); }

/* Quieter, always-visible role header (smaller avatar, always-visible timestamp) */
.msg-role { font-size: 11px; font-weight: 500; margin-bottom: 6px; opacity: .8; letter-spacing: 0; }
.msg-role:hover { opacity: 1; }
.role-icon { width: 20px; height: 20px; font-size: 9px; }
.msg-tps-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.msg-time { opacity: .65; font-size: 10px; }
.msg-role:hover .msg-time { opacity: 1; }

/* Persistent action toolbar: subtle at rest, full on hover */
.msg-actions { opacity: .25; }
.msg-row:hover .msg-actions { opacity: 1; }
.assistant-turn:hover .msg-actions { opacity: 1; }

/* ── User message: right-aligned bubble; no avatar/label — position identifies sender ── */
.msg-row[data-role="user"] .msg-body {
  background: var(--user-bubble-bg);
  border: 1px solid var(--user-bubble-border);
  border-radius: 14px;
  padding: 10px 14px;
  margin-left: 0;
  padding-left: 14px;
  max-width: none;
  color: var(--user-bubble-text);
  overflow-wrap: anywhere;
}
.msg-row[data-role="user"] .msg-body::selection,
.msg-row[data-role="user"] .msg-body *::selection {
  background: var(--user-selection-bg);
  color: var(--user-selection-text);
}
.msg-row[data-role="user"] .msg-body::-moz-selection,
.msg-row[data-role="user"] .msg-body *::-moz-selection {
  background: var(--user-selection-bg);
  color: var(--user-selection-text);
}
.msg-row[data-role="user"] .msg-body code { color: var(--user-bubble-text); background: rgba(0,0,0,.1); }
.msg-row[data-role="user"] .msg-body a { color: var(--user-bubble-text); text-decoration: underline; }
.msg-row[data-role="user"] .msg-files { padding-left: 0; margin-left: 0; justify-content: flex-end; }
.msg-row[data-role="user"][data-editing="1"] .msg-edit-area { background: var(--user-bubble-bg); border-color: var(--user-bubble-border); color: var(--user-bubble-text); box-shadow: 0 0 0 3px var(--focus-ring); }
.msg-row[data-role="user"][data-editing="1"] .msg-edit-area::placeholder { color: var(--user-bubble-placeholder); }

/* Turn boundary: right alignment already separates user turns — keep only vertical spacing */
.msg-row + .msg-row[data-role="user"] {
  border-top: none;
  margin-top: 10px;
  padding-top: 12px;
}

/* ── Message footer: actions (and user timestamp) sit below the bubble ── */
.msg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.msg-foot .msg-actions { opacity: 1; margin-left: 0; }
.msg-foot .msg-time { font-size: 10.5px; opacity: .75; }
.msg-question-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.msg-question-jump-btn:hover,
.msg-question-jump-btn:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--hover-bg);
  outline: none;
}
.msg-question-highlight .msg-body {
  animation: question-highlight-pulse 1.6s ease-out;
}
@keyframes question-highlight-pulse {
  0% { box-shadow: 0 0 0 0 var(--focus-ring); }
  35% { box-shadow: 0 0 0 5px var(--focus-ring); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (max-width: 600px) {
  .msg-question-jump-btn { display: none; }
}
.msg-foot-with-usage {
  justify-content: flex-start;
  gap: 8px;
}
.msg-usage-inline,
.msg-duration-inline,
.msg-gateway-inline,
.gateway-failover-inline,
.msg-model-warning-inline {
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.gateway-failover-inline {
  color: var(--accent);
  opacity: .9;
}
.msg-model-warning-inline {
  color: var(--error);
  opacity: .95;
  font-weight: 600;
}
.msg-foot-with-usage .msg-time,
.msg-foot-with-usage .msg-actions {
  opacity: 0;
  transition: opacity .15s;
}
.msg-foot-with-usage .msg-time {
  margin-left: 4px;
}
.msg-foot-with-usage .msg-actions {
  margin-left: 2px;
}

/* User footer: visible only on row hover (bubble identifies sender without needing persistent chrome) */
.msg-row[data-role="user"] .msg-foot {
  opacity: 0;
  transition: opacity .15s;
  padding-right: 2px;
}
.msg-row[data-role="user"]:hover .msg-foot,
.msg-row[data-role="user"]:focus-within .msg-foot { opacity: 1; }

/* Assistant footer: left-aligned under the body rail, subtle at rest */
.msg-row[data-role="assistant"] .msg-foot,
.assistant-turn .msg-foot {
  justify-content: flex-start;
  padding-left: var(--msg-rail);
  max-width: var(--msg-max);
  opacity: 0;
  transition: opacity .15s;
}
.msg-row[data-role="assistant"]:hover .msg-foot,
.assistant-turn:hover .msg-foot,
.assistant-turn:focus-within .msg-foot { opacity: 1; }
.assistant-turn .msg-foot-with-usage,
.msg-row[data-role="assistant"] .msg-foot-with-usage {
  opacity: 1;
}
.assistant-turn:hover .msg-foot-with-usage .msg-time,
.assistant-turn:hover .msg-foot-with-usage .msg-actions,
.assistant-turn:focus-within .msg-foot-with-usage .msg-time,
.assistant-turn:focus-within .msg-foot-with-usage .msg-actions,
.msg-row[data-role="assistant"]:hover .msg-foot-with-usage .msg-time,
.msg-row[data-role="assistant"]:hover .msg-foot-with-usage .msg-actions {
  opacity: 1;
}

/* Hide footer while editing to keep the edit bar the only footer-level affordance */
.msg-row[data-editing="1"] .msg-foot { display: none; }

/* Empty tool-anchor rows: hide footer alongside role/files so the row stays invisible */
.msg-row[data-role="assistant"]:has(.msg-body:empty) .msg-foot { display: none; }

/* ── Thinking card: quieter than before (no background panel) but still
   clearly a gold-accented affordance so users know it's collapsible. ── */
.thinking-card {
  background: var(--accent-bg);
  border: 1px solid var(--accent-bg-strong);
  border-radius: 8px;
  padding: 0;
  margin: 3px 0 3px var(--msg-rail);
  transition: border-color .15s, background .15s;
}
.thinking-card:hover {
  border-color: var(--accent-hover);
  background: var(--accent-bg);
}
.thinking-card-header { display:flex; align-items:center; gap:8px; padding: 5px 10px; color: var(--accent-text); font-size: 12px; font-weight: 600; opacity: .85; }
.thinking-card-header:hover { opacity: 1; }
.thinking-card-icon { opacity: .7; }
.thinking-card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 12px;
  border-top: 1px solid transparent;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease, border-top-color .22s ease;
}
.thinking-card.open .thinking-card-body { max-height: 260px; overflow-y: auto; opacity: 1; padding: 8px 12px; border-top-color: var(--accent-bg-strong); }
.thinking-card-body pre { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ── Tool cards: quiet disclosure rows ── */
.tool-card { background:transparent;border:0;border-left:0;border-radius:0;margin-top:0;margin-bottom:0; }
.tool-card-header { display:flex;align-items:center;gap:7px;padding:3px 8px;margin-left:-8px;border-radius:7px; }
.tool-card-name { font-size: 13px; }
.tool-card-preview { display:none; }

/* ── Streaming cursor at the end of the live assistant body ── */
@keyframes hermes-cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
#toolRunningRow { margin-top: 10px; }
[data-live-assistant="1"]:last-child .msg-body > :last-child::after,
[data-live-assistant="1"]:last-child .msg-body:not(:has(> *))::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--blue);
  border-radius: 1px;
  margin-left: 3px;
  vertical-align: -0.16em;
  animation: hermes-cursor-blink 1.05s steps(2, start) infinite;
}

/* ── Error state: distinct red-accent card, not italic emphasis ── */
.msg-row[data-error="1"] .msg-body,
.assistant-segment[data-error="1"] .msg-body {
  background: rgba(239,83,80,.06);
  border: 1px solid rgba(239,83,80,.2);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-left: var(--msg-rail);
  max-width: calc(var(--msg-max) - 40px);
  color: var(--text);
}
.msg-row[data-error="1"] .msg-body em,
.msg-row[data-error="1"] .msg-body p em,
.assistant-segment[data-error="1"] .msg-body em,
.assistant-segment[data-error="1"] .msg-body p em { font-style: normal; color: inherit; }
.msg-row[data-error="1"] .msg-role,
.assistant-segment[data-error="1"] .msg-role { color: var(--accent); opacity: 1; }
.msg-row[data-error="1"] .role-icon,
.assistant-segment[data-error="1"] .role-icon { background: rgba(239,83,80,.12); color: var(--error); border-color: var(--error); }

/* ── Day-change separator ── */
.load-older-indicator{cursor:pointer;color:var(--accent-text,var(--blue));font-size:13px;padding:10px 0;text-align:center;user-select:none;}
.load-older-indicator:hover{opacity:.75;}
.message-window-load-earlier{align-self:center;margin:4px auto 14px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);}
.message-window-load-earlier:hover{background:var(--hover-bg);border-color:var(--accent);}
.msg-date-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 10px; padding: 0 var(--msg-rail);
  color: var(--muted); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; opacity: .55;
}
.msg-date-sep::before, .msg-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Widths: collapse messages-inner to match content column ── */
.messages-inner { max-width: var(--msg-max); }
@media (min-width: 1400px) { .messages-inner { max-width: calc(var(--msg-max) + 40px); } }
@media (min-width: 1800px) { .messages-inner { max-width: calc(var(--msg-max) + 80px); } }

@media (max-width: 700px) {
  .msg-role { margin-bottom: 4px; }
  .msg-row[data-role="user"] .msg-body { padding: 8px 12px; }
  .msg-row[data-error="1"] .msg-body { padding: 8px 12px; }
}

/* ── Shared main-view tokens (used by #mainSkills, #mainTasks, #mainWorkspaces, #mainProfiles) ── */
.main-view-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:41px;padding:8px 32px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg);position:relative;z-index:10;
}
.main-view-title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main-view-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.main-view-body{flex:1;min-height:0;overflow-y:auto;padding:24px 32px;}
.main-view-content{max-width:960px;margin:0 auto;width:100%;}
.main-view-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:40px 24px;color:var(--muted);text-align:center;
}
.main-view-empty-icon{color:var(--muted);opacity:.35;}
.main-view-empty-title{font-size:18px;font-weight:600;color:var(--text);margin-top:4px;}
.main-view-empty-sub{font-size:13px;color:var(--muted);line-height:1.55;max-width:420px;}

/* Hide header title/actions entirely when empty state is active */
main.main > .main-view:not([id="mainChat"]):not([id="mainSettings"]) .main-view-header:has(.main-view-title:empty){display:none;}

/* Skill-file breadcrumb (shown when clicking a linked file) */
.skill-file-breadcrumb{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle,var(--border));}
.skill-file-back{font-size:12px;color:var(--accent-text);text-decoration:none;font-weight:500;}
.skill-file-back:hover{text-decoration:underline;}
.skill-file-path{font-size:12px;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;}
.skill-file-code{background:var(--sidebar);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12px;overflow:auto;max-width:960px;margin:0 auto;}

@media(max-width:700px){
  .main-view-header{padding:8px 16px;}
  .main-view-body{padding:16px;}
}

/* ── Shared detail-card styling (cron / workspace / profile detail pages) ── */
.detail-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px 18px;margin-bottom:16px;}
.detail-card-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.detail-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start;}
.detail-row:last-child{border-bottom:none;}
.detail-row-label{flex:0 0 140px;color:var(--muted);font-size:12px;}
.detail-row-value{flex:1;min-width:0;color:var(--text);word-break:break-word;}
.detail-row-value code{background:var(--sidebar);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:12px;font-family:'SF Mono',ui-monospace,monospace;}
.detail-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border);color:var(--muted);}
.detail-badge.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong,var(--accent-bg));}
.detail-badge.ok{background:rgba(100,200,100,.12);color:rgba(100,200,100,.95);border-color:rgba(100,200,100,.3);}
.detail-badge.warn{background:rgba(220,140,60,.12);color:rgba(220,140,60,.95);border-color:rgba(220,140,60,.3);}
.detail-badge.err{background:rgba(220,80,80,.12);color:rgba(220,80,80,.95);border-color:rgba(220,80,80,.3);}
.detail-badge.running{background:rgba(59,130,246,.12);color:rgba(96,165,250,.95);border-color:rgba(96,165,250,.3);}
.detail-badge.running::before{content:'';display:inline-block;width:10px;height:10px;border:2px solid rgba(96,165,250,.4);border-top-color:rgba(96,165,250,.95);border-radius:50%;margin-right:6px;vertical-align:middle;animation:cron-spinner .6s linear infinite;}
@keyframes cron-spinner{to{transform:rotate(360deg);}}
.detail-alert{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);border-radius:8px;padding:12px 14px;margin-bottom:16px;color:var(--text);}
.detail-alert-title{font-size:12px;font-weight:700;color:rgba(245,158,11,.98);text-transform:uppercase;letter-spacing:0;margin-bottom:6px;}
.detail-alert p{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--text);}
.detail-alert p:last-child{margin-bottom:0;}
.detail-alert-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

/* Cron running indicator */
.cron-running-indicator{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:12px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:8px;font-size:13px;color:var(--text);}
.cron-watch-spinner{width:14px;height:14px;border:2px solid rgba(59,130,246,.3);border-top-color:rgba(59,130,246,.9);border-radius:50%;animation:cron-spin .8s linear infinite;flex-shrink:0;}
@keyframes cron-spin{to{transform:rotate(360deg)}}
.cron-watch-elapsed{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;}
.detail-card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.detail-expand-toggle{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:6px;padding:3px 8px;font-size:11px;line-height:1.3;cursor:pointer;}
.detail-expand-toggle:hover{color:var(--text);border-color:var(--accent);}
.detail-prompt{background:var(--sidebar);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;white-space:pre-wrap;line-height:1.55;color:var(--text);font-family:'SF Mono',ui-monospace,monospace;max-height:240px;overflow-y:auto;}
.detail-prompt.expanded{max-height:none;overflow-y:visible;}
.detail-run-item{border-top:1px solid var(--border);padding:8px 0;}
.detail-run-item:first-child{border-top:none;}
.detail-run-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;color:var(--muted);}
.detail-run-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.detail-run-body{display:none;margin-top:6px;font-size:12px;color:var(--muted);white-space:pre-wrap;line-height:1.5;max-height:260px;overflow-y:auto;background:var(--sidebar);border:1px solid var(--border);border-radius:6px;padding:8px 10px;}
.detail-run-item.open .detail-run-body{display:block;}
.detail-run-body.expanded{max-height:none;overflow-y:visible;}
.workspace-panel-tabs{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);}
.workspace-panel-tab{flex:1;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:7px;padding:5px 8px;font-size:12px;cursor:pointer;}
.workspace-panel-tab.active{background:var(--surface-subtle);color:var(--text);border-color:var(--border2);}
.workspace-artifacts{flex:1;overflow:auto;padding:8px;}
.workspace-artifact-empty{padding:16px 8px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center;}
.workspace-artifact-item{display:block;width:100%;text-align:left;background:var(--surface-subtle);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;}
.workspace-artifact-item:hover{border-color:var(--accent);}
.workspace-artifact-path{font-family:'SF Mono',ui-monospace,monospace;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.workspace-artifact-meta{margin-top:3px;color:var(--muted);font-size:11px;}
.workspace-artifacts-count{opacity:.65;font-size:11px;}
.rightpanel[data-active-tab="artifacts"] .breadcrumb-bar,.rightpanel[data-active-tab="artifacts"] .file-tree,.rightpanel[data-active-tab="artifacts"] #wsEmptyState{display:none!important;}
.rightpanel[data-active-tab="artifacts"] .workspace-artifacts{display:block;}
.rightpanel[data-active-tab="files"] .workspace-artifacts{display:none!important;}
.cron-run-usage-strip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--text-secondary);font-size:11px;opacity:.72;white-space:nowrap;}
.cron-run-usage-footer{display:flex;margin:8px 0 0 0;padding-top:8px;border-top:1px solid var(--border-subtle);}
.cron-item.active,.ws-row.active,.profile-card.active{background:var(--accent-bg);}
.cron-item.active .cron-name,.ws-row.active .ws-row-name,.profile-card.active .profile-card-name{color:var(--accent-text);}

/* ── Shared in-main form (create/edit) for skills/tasks/workspaces/profiles ── */
.detail-form{display:flex;flex-direction:column;gap:14px;}
.detail-form-row{display:flex;flex-direction:column;gap:6px;}
.detail-form-row > label{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em;}
.detail-form-row input[type="text"],
.detail-form-row input[type="password"],
.detail-form-row input:not([type]),
.detail-form-row select,
.detail-form-row textarea{
  width:100%;box-sizing:border-box;
  background:var(--sidebar);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:9px 11px;font-size:13px;outline:none;
  font-family:inherit;line-height:1.5;
  transition:border-color .15s,background .15s;
}
.detail-form-row input[type="text"]:focus,
.detail-form-row input[type="password"]:focus,
.detail-form-row input:not([type]):focus,
.detail-form-row select:focus,
.detail-form-row textarea:focus{border-color:var(--accent,var(--accent-bg-strong,var(--border)));}
.detail-form-row input:disabled{opacity:.6;cursor:not-allowed;}
.detail-form-row textarea{resize:vertical;font-family:'SF Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;}
.detail-form-row .detail-form-hint{font-size:11px;color:var(--muted);line-height:1.5;}
.detail-form-warning{font-size:11px;line-height:1.5;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:rgba(245,158,11,.98);border-radius:8px;padding:8px 10px;}
.cron-once-warning{margin-top:2px;}
.detail-form-row label.detail-form-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;font-weight:400;}
.detail-form-row label.detail-form-check input{accent-color:var(--accent,var(--link));}
.detail-form-error{font-size:12px;color:var(--error,#e05);padding:8px 10px;border:1px solid color-mix(in srgb,var(--error,#e05) 35%,transparent);background:color-mix(in srgb,var(--error,#e05) 8%,transparent);border-radius:8px;line-height:1.5;}
:root.dark{--panel-head-primary-fg:var(--bg);}
.panel-head-btn.primary{background:var(--accent,var(--link));color:var(--panel-head-primary-fg,#fff);border:none;}
.panel-head-btn.primary:hover{background:var(--accent-hover,var(--accent,var(--link)));color:var(--panel-head-primary-fg,#fff);}
.panel-head-btn.primary svg{color:var(--panel-head-primary-fg,#fff);}
/* Skill-picker inside in-main forms reuses the sidebar styles but needs light tweaks */
.detail-form-row .skill-picker-wrap{position:relative;}
.detail-form-row .skill-picker-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;}

/* Mobile: message controls always visible on touch screens (no hover available) */
@media(max-width:640px){
  .msg-row[data-role="user"] .msg-foot,
  .msg-row[data-role="assistant"] .msg-foot,
  .assistant-turn .msg-foot{opacity:1;}
  .msg-actions{opacity:1;}
}

/* ── /btw ephemeral side-question bubble ── */
.msg-row-btw {
  border-left: 3px solid var(--accent-bg-strong);
  border-radius: 8px;
  background: var(--accent-bg);
  margin: 6px 0 6px var(--msg-rail);
  padding: 8px 12px;
}
.msg-row-btw .msg-body { font-size: 14px; line-height: 1.75; }
.msg-btw-label {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 4px;
  opacity: .8;
}
.msg-btw-answer {
  margin-top: 6px;
  border-top: 1px solid var(--accent-bg-strong);
  padding-top: 6px;
}

/* ── /background badge in composer footer ── */
.bg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-bg-strong);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 600;
}

  /* Queue pill outer: identical wrapper to .queue-card — max-width+padding positions the pill at card-inner width */
  .queue-pill-outer{display:none;max-width:var(--msg-max);margin:0 auto;padding:0 20px;box-sizing:border-box;width:100%;}
  .queue-pill-outer.show{display:block;animation:queuePillIn .18s ease;}
  @keyframes queuePillIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
  /* Queue pill button: fills the outer slot, styled like queue-card-inner */
  .queue-pill{display:flex;width:100%;box-sizing:border-box;align-items:center;gap:8px;padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;text-align:left;}
  .queue-pill:hover{background:color-mix(in srgb,var(--hover-bg) 60%,var(--surface));}
  .queue-pill-count{color:var(--text);}
  .queue-pill-chevron{margin-left:auto;opacity:.5;}

/* ── Mobile: prevent iOS auto-zoom on input focus ─────────────────────────
   iOS Safari zooms in when a focused input/select has font-size < 16px.
   This media query targets touch-primary devices (phones and tablets) and
   bumps all interactive inputs to the minimum non-zoom threshold.
   The textarea#msg composer is already 16px; the sidebar search, rename
   inputs, settings selects, and dialog inputs are not.  (#1167)
──────────────────────────────────────────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  input,textarea,select{font-size:max(16px,1em)!important;}
}

/* ── PDF preview ─────────────────────────────────────────────────────────── */
.pdf-preview-wrap{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin:4px 0;background:var(--surface);}
.pdf-preview-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--surface-2);font-size:12px;font-weight:600;}
.pdf-preview-header a{color:var(--accent);text-decoration:none;font-weight:500;}
.pdf-preview-header a:hover{text-decoration:underline;}
.pdf-preview-body{display:flex;justify-content:center;padding:8px;background:#fff;border-radius:0 0 6px 6px;max-height:500px;overflow:hidden;}
.pdf-preview-canvas{max-width:100%;height:auto;border-radius:2px;}
.pdf-preview-fallback{padding:8px;font-size:13px;}
.pdf-preview-spinner{animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

/* ── HTML sandbox preview ────────────────────────────────────────────────── */
.html-preview-wrap{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin:4px 0;background:var(--surface);}
.html-preview-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--surface-2);font-size:12px;font-weight:600;}
.html-preview-header a{color:var(--accent);text-decoration:none;font-weight:500;}
.html-preview-header a:hover{text-decoration:underline;}
.html-preview-iframe{width:100%;height:400px;border:none;display:block;background:#fff;}
.html-preview-fallback{padding:8px;font-size:13px;}
.html-preview-spinner{animation:pulse 1.5s ease-in-out infinite;}

/* ── Insights panel (#464) ────────────────────────────────────────────────── */
main.main.showing-insights > #mainInsights{display:flex;overflow-y:auto;}
.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px;}
.insights-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px;}
.insights-stat-value{font-size:22px;font-weight:700;color:var(--text);}
.insights-stat-label{font-size:11px;color:var(--muted);margin-top:4px;}
.insights-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.insights-card{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:16px;}
.wiki-status-card{margin-bottom:16px;}
.wiki-status-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.wiki-status-sub{font-size:11px;color:var(--muted);margin-top:-4px;}
.wiki-status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700;border:1px solid var(--border);color:var(--muted);background:var(--surface);}
.wiki-status-badge.ok{color:var(--accent-text);background:var(--accent-bg);border-color:var(--accent-bg-strong);}
.wiki-status-badge.warn{color:#e8a030;background:rgba(232,160,48,.12);border-color:rgba(232,160,48,.28);}
.wiki-status-badge.err{color:var(--error,#e05);background:color-mix(in srgb,var(--error,#e05) 10%,transparent);border-color:color-mix(in srgb,var(--error,#e05) 30%,transparent);}
.wiki-status-note{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:12px;}
.wiki-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px;}
.wiki-status-grid div{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);min-width:0;}
.wiki-status-grid span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.wiki-status-grid strong{font-size:13px;color:var(--text);font-weight:650;overflow-wrap:anywhere;}
.wiki-status-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;}
.wiki-status-footer a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap;}
.wiki-status-footer a:hover{text-decoration:underline;}
.skill-usage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.skill-usage-sub{font-size:11px;color:var(--muted);margin-top:-4px;}
.skill-usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px;}
.skill-usage-grid div{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);min-width:0;}
.skill-usage-grid span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.skill-usage-grid strong{font-size:13px;color:var(--text);font-weight:650;overflow-wrap:anywhere;}
.skill-usage-table .insights-table-head,
.skill-usage-table .insights-table-row{grid-template-columns:minmax(90px,1.5fr) 60px 60px 58px 52px;gap:8px;align-items:center;}
.insights-card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;}
.insights-table{width:100%;font-size:12px;}
.insights-table-head{display:grid;grid-template-columns:1fr 80px;padding:4px 0;border-bottom:1px solid var(--border);font-weight:600;color:var(--muted);font-size:11px;}
.insights-table-row{display:grid;grid-template-columns:1fr 80px;padding:6px 0;border-bottom:1px solid var(--border,.05);}
.insights-model-table .insights-table-head,.insights-model-table .insights-table-row{grid-template-columns:minmax(90px,1.5fr) 64px 76px 74px 52px;gap:8px;align-items:center;}
.insights-model-cost,.insights-model-tokens{font-variant-numeric:tabular-nums;}
.insights-model-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.insights-empty{font-size:12px;color:var(--muted);padding:12px 0;}
.insights-daily-token-chart{height:180px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:end;padding:6px 0 2px;border-bottom:1px solid var(--border);overflow:hidden;max-width:100%;}
.insights-daily-bar{min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;}
.insights-daily-stack{height:150px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--border,.15);border-radius:4px;overflow:hidden;}
.insights-daily-bar-input{background:var(--accent);min-height:0;}
.insights-daily-bar-output{background:color-mix(in srgb,var(--accent) 55%,var(--text));min-height:0;}
.insights-daily-bar span{height:14px;font-size:9px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;}
.insights-daily-legend{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:11px;color:var(--muted);}
.insights-daily-legend span{display:inline-flex;align-items:center;gap:5px;}
.insights-daily-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}
.insights-daily-legend-input{background:var(--accent);}
.insights-daily-legend-output{background:color-mix(in srgb,var(--accent) 55%,var(--text));}
.insights-bars{display:flex;flex-direction:column;gap:6px;}
.insights-bar-row{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;}
.insights-bar-label{font-size:11px;color:var(--muted);text-align:right;}
.insights-bar-track{height:16px;background:var(--border,.15);border-radius:4px;overflow:hidden;}
.insights-bar-fill{height:100%;background:var(--accent);border-radius:4px;min-width:2px;transition:width .3s;}
.insights-bar-fill.peak{background:#f6ad55;}
.insights-bar-value{font-size:11px;color:var(--text);}
.insights-token-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px;border-bottom:1px solid var(--border,.05);}
.insights-token-label{color:var(--muted);}
.insights-token-value{font-weight:600;}

/* ── Mobile layout for Token Breakdown + Models (issue #2104) ───────────── */
@media (max-width: 640px) {
  .insights-usage-grid {
    grid-template-columns: 1fr;
  }
  .insights-usage-grid .insights-card {
    min-width: 0;
    overflow-x: auto;
  }
  .insights-model-table {
    min-width: 320px;
  }
}

/* ── Checkpoints / Rollback UI (#466) ─────────────────────────────────────── */
.checkpoint-list{display:flex;flex-direction:column;gap:8px;}
.checkpoint-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;font-size:12px;}
.checkpoint-item-actions{display:flex;gap:6px;}
.checkpoint-item-actions button{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:4px;}
.checkpoint-item-actions button:hover{color:var(--accent);background:rgba(255,255,255,.06);}
.checkpoint-item-actions button.danger:hover{color:#fc8181;}
.checkpoint-diff{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;}
.checkpoint-diff-modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;}
.checkpoint-diff-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);}
.checkpoint-diff-body{padding:12px 16px;overflow-y:auto;flex:1;}
.checkpoint-diff-body pre{font-size:11px;line-height:1.4;white-space:pre-wrap;word-break:break-all;}

/* ── Kanban native board (read-only MVP) ── */
.kanban-filter-stack{display:flex;flex-direction:column;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);}
.kanban-filter-stack select{width:100%;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:12px;}
.kanban-check{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;}
.kanban-summary{padding:8px 12px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border);}
.kanban-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;}
.kanban-list-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;}
.kanban-list-item:hover{border-color:var(--accent);background:var(--hover);}
.kanban-list-status{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.kanban-list-title{font-size:13px;font-weight:600;line-height:1.35;}
.kanban-board-wrap{flex:1;min-height:0;overflow:auto;padding:16px;background:var(--bg);}
.kanban-board{display:flex;gap:12px;min-height:100%;overflow-x:auto;padding-bottom:8px;}
.kanban-column{display:flex;flex-direction:column;min-width:260px;max-width:320px;flex:1;background:var(--panel);border:1px solid var(--border);border-radius:10px;min-height:240px;}
.kanban-column-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);}
.kanban-count{font-size:11px;color:var(--muted);background:var(--input-bg);border:1px solid var(--border);border-radius:999px;padding:1px 7px;}
.kanban-column-body{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:0;overflow-y:auto;}
.kanban-card{border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:10px;cursor:pointer;box-shadow:var(--shadow-sm);}
.kanban-card:hover,.kanban-card.selected{border-color:var(--accent);}
.kanban-card-title{font-size:13px;font-weight:650;color:var(--text);line-height:1.35;margin-bottom:6px;}
.kanban-card-body{font-size:12px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.kanban-meta{font-size:11px;color:var(--muted);line-height:1.35;}
.kanban-readonly{font-size:11px;color:var(--muted);margin-top:6px;}

/* Multi-board switcher in the main panel header.
   Renders next to the "Board" title as `Default ▾` when at least one
   non-default board exists, opens a click-anchored menu listing all
   boards, current first, with per-status total badges. */
.main-view-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.kanban-board-switcher{position:relative;display:inline-block;}
.kanban-board-switcher[hidden]{display:none;}
.kanban-board-switcher-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  border-radius:8px;
  font:inherit;font-size:12px;font-weight:550;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.kanban-board-switcher-toggle:hover{border-color:var(--accent);color:var(--accent);}
.kanban-board-switcher-toggle[aria-expanded="true"]{border-color:var(--accent);}
.kanban-board-switcher-icon{font-size:14px;line-height:1;display:inline-block;min-width:14px;text-align:center;}
.kanban-board-switcher-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kanban-board-switcher-menu{
  position:absolute;top:calc(100% + 4px);left:0;
  min-width:240px;max-width:320px;
  background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));
  border:1px solid var(--accent-bg-strong, var(--border));
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  padding:6px;
  z-index:150;
  max-height:60vh;
  overflow-y:auto;
}
:root:not(.dark) .kanban-board-switcher-menu{
  background:linear-gradient(180deg,#fff,#f5f0e8);
  border-color:rgba(0,0,0,.18);
}
.kanban-board-switcher-menu[hidden]{display:none;}
.kanban-board-switcher-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border:0;background:transparent;color:var(--text);
  border-radius:6px;cursor:pointer;text-align:left;font:inherit;font-size:12px;
  transition:background .15s;
}
.kanban-board-switcher-item:hover,
.kanban-board-switcher-item:focus{background:var(--accent-bg);outline:none;}
.kanban-board-switcher-item.is-current{font-weight:650;}
.kanban-board-switcher-item-icon{
  display:block;
  font-size:14px;line-height:1.15;
  flex:0 1 auto;
  min-width:18px;max-width:7.5rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;
}
.kanban-board-switcher-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kanban-board-switcher-item-count{
  flex-shrink:0;font-size:10px;color:var(--muted);
  padding:2px 6px;border-radius:8px;background:var(--input-bg);
}
.kanban-board-switcher-item.is-current .kanban-board-switcher-item-count{
  background:var(--accent-bg);color:var(--accent-text);
}
.kanban-board-switcher-divider{height:1px;background:var(--border);margin:6px 0;}
.kanban-board-switcher-action{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border:0;background:transparent;color:var(--muted);
  border-radius:6px;cursor:pointer;text-align:left;font:inherit;font-size:11px;
  transition:background .15s,color .15s;
}
.kanban-board-switcher-action:hover{background:var(--accent-bg);color:var(--accent-text);}
.kanban-board-switcher-action.danger:hover{background:rgba(255,95,95,.12);color:var(--danger);}
.kanban-board-switcher-action svg{width:14px;height:14px;flex-shrink:0;}

/* Modal forms for create/rename board — use the same visual language as
   the app-dialog overlay (linear-gradient panel, accent border) so it
   feels native to the WebUI rather than a one-off bridge UI. */
.kanban-modal-overlay{
  position:fixed;inset:0;background:rgba(7,12,19,.62);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:1100;padding:24px;
}
.kanban-modal-overlay[hidden]{display:none;}
.kanban-modal{
  width:min(460px,100%);
  background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));
  border:1px solid var(--accent-bg-strong, var(--border));
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:18px 18px 16px;
  color:var(--text);
  box-sizing:border-box;
}
:root:not(.dark) .kanban-modal{
  background:linear-gradient(180deg,#fff,#f5f0e8);
  border-color:rgba(0,0,0,.18);
}
.kanban-modal h3{margin:0 0 14px;font-size:15px;font-weight:650;color:var(--text);}
.kanban-modal-row{margin-bottom:10px;}
.kanban-modal-row label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:500;}
.kanban-modal-row input[type="text"],
.kanban-modal-row input[type="number"],
.kanban-modal-row input[type="color"],
.kanban-modal-row select,
.kanban-modal-row textarea{
  width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:8px 10px;font:inherit;font-size:13px;box-sizing:border-box;
}
/* Native select chevron — make sure the dropdown reads as a dropdown, not as
   a flat text input. Custom SVG arrow + appearance:none for cross-browser
   consistency in dark theme. */
.kanban-modal-row select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:16px;
}
.kanban-modal-row select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.kanban-modal-row input:focus,
.kanban-modal-row select:focus,
.kanban-modal-row textarea:focus{
  outline:none;border-color:var(--accent, #FFD700);
}
.kanban-modal-row textarea{min-height:60px;resize:vertical;}
.kanban-modal-row input[type="color"]{height:36px;padding:2px;cursor:pointer;}
.kanban-modal-row-inline{display:flex;gap:10px;}
.kanban-modal-row-inline > *{flex:1;min-width:0;}
.kanban-modal-hint{font-size:11px;color:var(--muted);line-height:1.5;margin-top:6px;}
.kanban-status-original-hint{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}
.kanban-modal-hint code{background:var(--input-bg);padding:1px 5px;border-radius:4px;font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:11px;color:var(--text);}
.kanban-modal-hint em{color:var(--text);font-style:normal;font-weight:600;}
.kanban-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.kanban-modal-error{
  color:var(--danger,var(--error,#f87171));
  font-size:12px;font-weight:500;margin-top:8px;min-height:14px;
}
.kanban-modal-error:not(:empty){
  padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--danger,var(--error,#f87171)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--danger,var(--error,#f87171)) 35%,transparent);
}
.kanban-empty{padding:12px;color:var(--muted);font-size:12px;text-align:center;border:1px dashed var(--border);border-radius:8px;}

.kanban-new-task-row{display:flex;gap:6px;align-items:center;}
.kanban-new-task-row input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 8px;font:inherit;font-size:12px;}
.kanban-task-preview{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel);}
.kanban-task-preview-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.kanban-back-btn{flex-shrink:0;font-size:11px;padding:4px 8px;}
.kanban-edit-btn{flex-shrink:0;font-size:11px;padding:4px 10px;margin-left:auto;}
.kanban-task-preview-title{flex:1;font-size:14px;font-weight:650;color:var(--text);margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Run dispatcher button: visually distinct from the dry-run preview ▶ button
   sitting next to it so users can tell at a glance which one actually spawns
   workers.  Uses the accent border + tinted background but keeps the
   panel-head sizing so it doesn't stand out as inconsistent.  See PR for
   #1968 / kanban edit+run gap fix. */
.kanban-run-dispatch-btn{
  border-color:color-mix(in srgb,var(--accent,#FFD700) 60%,var(--border));
  background:color-mix(in srgb,var(--accent,#FFD700) 14%,transparent);
  color:var(--accent,#FFD700);
}
.kanban-run-dispatch-btn:hover{
  background:color-mix(in srgb,var(--accent,#FFD700) 24%,transparent);
}
.kanban-task-preview-body{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:6px;}
.kanban-status-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;}
.kanban-status-actions .btn{font-size:11px;padding:4px 8px;}
/* Generic styled buttons used throughout the Kanban panel. The Kanban PR
   stack standardised on `.btn` / `.btn.secondary` class names but never
   shipped the matching CSS, so without these rules buttons fall back to
   the browser's default beveled appearance which clashes with the dark
   theme. Scoped to kanban-* parent containers so the rules cannot affect
   any other panel that happens to use those class names later. */
.kanban-pane .btn,
.kanban-bulk-bar .btn,
.kanban-new-task-row .btn,
.kanban-task-preview .btn,
.kanban-comment-form .btn,
.kanban-modal .btn{
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  border-radius:6px;
  padding:6px 12px;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.kanban-pane .btn:hover,
.kanban-bulk-bar .btn:hover,
.kanban-new-task-row .btn:hover,
.kanban-task-preview .btn:hover,
.kanban-comment-form .btn:hover,
.kanban-modal .btn:hover{border-color:var(--accent);color:var(--accent);}
.kanban-pane .btn:disabled,
.kanban-bulk-bar .btn:disabled,
.kanban-new-task-row .btn:disabled,
.kanban-task-preview .btn:disabled,
.kanban-comment-form .btn:disabled,
.kanban-modal .btn:disabled{opacity:.5;cursor:default;}
.kanban-pane .btn.secondary,
.kanban-bulk-bar .btn.secondary,
.kanban-new-task-row .btn.secondary,
.kanban-task-preview .btn.secondary,
.kanban-comment-form .btn.secondary,
.kanban-modal .btn.secondary{background:transparent;}
.kanban-pane .btn.danger,
.kanban-task-preview .btn.danger,
.kanban-modal .btn.danger{color:var(--danger);border-color:rgba(255,95,95,.4);}
.kanban-pane .btn.danger:hover,
.kanban-task-preview .btn.danger:hover,
.kanban-modal .btn.danger:hover{background:rgba(255,95,95,.1);color:var(--danger);}
/* Primary CTA inside the kanban modal — accent-tinted to make Save vs.
   Cancel visually distinct (was nearly identical before). */
.kanban-modal .btn.primary{
  border-color:var(--accent, #FFD700);
  background:var(--accent-bg, rgba(255,215,0,.12));
  color:var(--accent-text, var(--accent, #FFD700));
  font-weight:600;
}
.kanban-modal .btn.primary:hover{
  background:var(--accent-bg-strong, rgba(255,215,0,.22));
  border-color:var(--accent, #FFD700);
  color:var(--accent-text, var(--accent, #FFD700));
}
.kanban-comment-form{display:flex;gap:8px;align-items:flex-end;margin-top:12px;}
.kanban-comment-form textarea{flex:1;min-height:42px;resize:vertical;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px;font:inherit;font-size:12px;}

.kanban-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px;}
.kanban-detail-section{border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:10px;min-width:0;}
.kanban-detail-section h3{font-size:12px;font-weight:650;color:var(--text);margin:0 0 8px;}
.kanban-detail-row{padding:8px 0;border-top:1px solid var(--border);}
.kanban-detail-row:first-of-type{border-top:0;padding-top:0;}
.kanban-detail-row-main{font-size:12px;color:var(--text);line-height:1.45;}.kanban-detail-row-main .hermes-kanban-md p:last-child{margin-bottom:0;}
.kanban-detail-row-meta{font-size:10px;color:var(--muted);margin-top:4px;}
.kanban-detail-pre{font-size:11px;line-height:1.4;white-space:pre-wrap;word-break:break-word;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;padding:6px;margin:6px 0 0;color:var(--muted);}
.kanban-detail-empty{font-size:12px;color:var(--muted);}
.kanban-detail-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:var(--muted);}
.kanban-detail-links-grid code{display:inline-block;margin:4px 4px 0 0;padding:2px 5px;border-radius:5px;background:var(--input-bg);border:1px solid var(--border);color:var(--text);}

.kanban-stats{font-size:12px;color:var(--muted);padding:2px 0}
.kanban-stats-grid{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.kanban-stat-cell{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--input-bg);padding:2px 7px;}
.kanban-stat-cell.total{color:var(--text);}
.kanban-bulk-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kanban-bulk-bar select{flex:1;min-width:96px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:12px}

.kanban-profile-lanes{display:flex;flex-direction:column;gap:18px;min-width:100%}
.kanban-profile-lane{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);padding:10px}
.kanban-profile-lane-head{display:flex;justify-content:space-between;align-items:center;color:var(--text);font-size:13px;font-weight:600;margin-bottom:8px}
.kanban-board-in-lane{min-height:0;overflow-x:auto}
.kanban-card-topline{display:flex;gap:6px;align-items:center;margin-bottom:4px;font-size:10px;color:var(--muted)}
.kanban-card-id{font-family:var(--mono);opacity:.8}
.kanban-badge{border:1px solid var(--border);border-radius:999px;padding:1px 6px;font-size:10px;color:var(--muted)}
.kanban-badge.priority{color:var(--accent)}
.kanban-badge.tenant{color:var(--text)}
.kanban-card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px}
.kanban-card-assignee{color:var(--accent)}
.kanban-card-unassigned{opacity:.75}
.kanban-card-actions{display:flex;gap:4px;margin-top:8px;opacity:.85;flex-wrap:wrap}
.kanban-card-action{border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:6px;padding:2px 6px;font-size:10px;cursor:pointer}
.kanban-card-action.danger{color:var(--danger)}
.kanban-card-stale-amber{border-color:rgba(245,197,66,.55)}
.kanban-card-stale-red{border-color:rgba(255,95,95,.65)}
.kanban-column.drop-target{outline:2px solid var(--accent);outline-offset:-2px}
.hermes-kanban-md p{margin:0 0 4px}.hermes-kanban-md code{font-family:var(--mono);font-size:.95em}.hermes-kanban-md h1,.hermes-kanban-md h2,.hermes-kanban-md h3,.hermes-kanban-md h4,.hermes-kanban-md h5,.hermes-kanban-md h6{margin:10px 0 4px;font-weight:650;color:var(--text)}.hermes-kanban-md h1{font-size:15px}.hermes-kanban-md h2{font-size:14px}.hermes-kanban-md h3{font-size:13px}.hermes-kanban-md h4,.hermes-kanban-md h5,.hermes-kanban-md h6{font-size:12px}.hermes-kanban-md ul,.hermes-kanban-md ol{margin:4px 0;padding-left:20px}.hermes-kanban-md li{margin:2px 0}.hermes-kanban-md li.checked{opacity:.6}.hermes-kanban-md li input[type=checkbox]{margin:0 4px 0 0;vertical-align:middle}.hermes-kanban-md table{border-collapse:collapse;margin:6px 0;font-size:11px;width:100%}.hermes-kanban-md td{border:1px solid var(--border);padding:4px 6px;vertical-align:top}.hermes-kanban-md blockquote{margin:4px 0;padding:2px 8px;border-left:3px solid var(--accent);color:var(--muted);font-size:12px}.hermes-kanban-md pre{background:var(--input-bg);border:1px solid var(--border);border-radius:6px;padding:8px;margin:6px 0;overflow-x:auto;font-size:11px;line-height:1.4;color:var(--text)}.hermes-kanban-md hr{border:none;border-top:1px solid var(--border);margin:8px 0}

@media (max-width: 640px){
  .kanban-board{scroll-snap-type:x mandatory;}
  .kanban-column{min-width:82vw;scroll-snap-align:start;}
  .kanban-task-preview-header{align-items:flex-start;flex-direction:column;}
  .kanban-comment-form{flex-direction:column;align-items:stretch;}
  .kanban-stats-grid{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
  /* Multi-board: keep the switcher row tight on narrow screens, and
     widen the dropdown menu so its action labels don't truncate. */
  .main-view-title-row{gap:6px;}
  .kanban-board-switcher-toggle{padding:3px 8px;font-size:11px;}
  .kanban-board-switcher-name{max-width:140px;}
  .kanban-board-switcher-menu{
    min-width:min(280px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
  }
  /* Modal scales to viewport width on phones with reasonable padding. */
  .kanban-modal-overlay{padding:12px;}
  .kanban-modal{padding:16px 16px 14px;border-radius:14px;}
  .kanban-modal-row-inline{flex-direction:column;gap:0;}
}

/* ── Logs panel (#1455) ───────────────────────────────────────────────────── */
main.main.showing-logs > #mainLogs{display:flex;}
.logs-control-panel{display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;}
.logs-control-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.logs-control-panel select{width:100%;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12px;}
.logs-check-row{display:flex;align-items:center;gap:8px;color:var(--text);font-size:12px;line-height:1.4;}
.logs-check-row input{accent-color:var(--accent);}
.logs-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.logs-copy:hover{background:var(--hover-bg);border-color:var(--border2);}
.logs-copy.compact{padding:6px 10px;white-space:nowrap;}
.logs-status{font-size:12px;color:var(--muted);margin-top:3px;font-family:'SF Mono',ui-monospace,monospace;}
.logs-main-body{padding:18px 24px;}
.logs-content{max-width:1200px;}
.logs-output{min-height:320px;max-height:calc(100vh - 170px);overflow:auto;background:var(--code-bg);border:1px solid var(--border);border-radius:12px;padding:12px 0;font-family:'SF Mono','Fira Code',ui-monospace,monospace;font-size:12px;line-height:1.55;color:var(--pre-text);white-space:pre;}
.logs-output.wrap{white-space:pre-wrap;overflow-wrap:anywhere;}
.log-line{padding:0 14px;min-height:1.55em;border-left:3px solid transparent;}
.log-line:hover{background:rgba(255,255,255,.04);}
.log-line-error{color:var(--error,#ef4444);border-left-color:var(--error,#ef4444);background:color-mix(in srgb,var(--error,#ef4444) 8%,transparent);}
.log-line-warning{color:#f59e0b;border-left-color:#f59e0b;background:rgba(245,158,11,.08);}
.log-line-info{color:var(--pre-text);}
.log-line-debug{color:var(--muted);opacity:.75;}
.logs-empty,.logs-hint{margin:8px 14px;padding:12px;border:1px solid var(--border);border-radius:8px;color:var(--muted);background:var(--surface);white-space:normal;font-family:var(--font-ui,system-ui,sans-serif);font-size:12px;}
.logs-hint.warn{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);}

/* OpenWebUI-style streaming word fade (opt-in via Settings → Preferences).
   Opacity-only fade with JS-paced word/paragraph reveal. */
.stream-fade-active .stream-fade-word{display:inline;}
.stream-fade-word.is-new{animation:stream-fade-word-in var(--stream-fade-ms,240ms) cubic-bezier(.2,.7,.2,1) both;will-change:opacity;}
@keyframes stream-fade-word-in{0%{opacity:0;}45%{opacity:.45;}100%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.stream-fade-word.is-new{animation:none;will-change:auto;}}
[data-live-assistant="1"]:last-child .msg-body.stream-fade-active > :last-child::after,
[data-live-assistant="1"]:last-child .msg-body.stream-fade-active:not(:has(> *))::after{display:none;content:none;}

/* ── RTL chat layout (salvaged from PR #1721 by @malulian) ────────────────────
 * Triggered by .chat-content-rtl on <html>. Affects ONLY the chat messages
 * area and composer input, not the sidebar, workspace panel, settings panel,
 * or any other UI element. Direction objection from design review (PR #1721
 * comment by @aronprins, May 13 2026) honored: no composer button — the
 * toggle lives in Settings → Preferences only.
 *
 * Code blocks, inline code, and pre-formatted blocks stay LTR even when RTL
 * is active — Arabic/Hebrew users still write English code, command lines,
 * URLs, and JSON the same way English users do. Flipping those would render
 * code mirrored (e.g. `()fn()` instead of `fn()`) which is the salvage's
 * critical bug fix vs the original PR #1721 implementation.
 */
.chat-content-rtl .msg-row{
  direction:rtl;
  text-align:right;
  unicode-bidi:plaintext;
}
.chat-content-rtl .msg-body{
  text-align:start;
}
.chat-content-rtl .msg-body th,
.chat-content-rtl .csv-table th,
.chat-content-rtl .csv-table td{
  text-align:right;
}
.chat-content-rtl .tool-call-group-summary{
  text-align:right;
}
.chat-content-rtl textarea#msg,
.chat-content-rtl #msg{
  direction:rtl;
  text-align:right;
  unicode-bidi:plaintext;
}
/* Force code/pre/tt back to LTR — Arabic users still write English code. */
.chat-content-rtl .msg-body pre,
.chat-content-rtl .msg-body code,
.chat-content-rtl .msg-body kbd,
.chat-content-rtl .msg-body samp,
.chat-content-rtl .msg-body tt,
.chat-content-rtl .msg-body .hljs,
.chat-content-rtl .msg-body .code-block,
.chat-content-rtl .msg-body .code-block *,
.chat-content-rtl .msg-body pre *{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}
/* Force LTR for content classes that render English-by-design even in chat:
   KaTeX equations (math is LTR-only in standard notation), diff hunks
   (file paths + line numbers), CSV tables (column order must stay
   left-to-right), and skill file paths. */
.chat-content-rtl .msg-body .katex,
.chat-content-rtl .msg-body .katex-block,
.chat-content-rtl .msg-body .katex-display,
.chat-content-rtl .msg-body .katex-html,
.chat-content-rtl .msg-body .katex-inline,
.chat-content-rtl .msg-body .diff-block,
.chat-content-rtl .msg-body .diff-block *,
.chat-content-rtl .msg-body .csv-table-wrap,
.chat-content-rtl .msg-body .csv-table,
.chat-content-rtl .msg-body .csv-table *,
.chat-content-rtl .msg-body .skill-file-path{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}
/* Tool-call content (commands, paths, JSON) stays LTR. */
.chat-content-rtl .tool-call-group-body,
.chat-content-rtl .tool-call-group-body *,
.chat-content-rtl .tool-result,
.chat-content-rtl .tool-result *{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}

/* Cap composer width on very wide displays so the chip-cluster gap stays bounded */
@media (min-width:1600px) {
  .composer-box{max-width:1600px;margin:0 auto;}
}

#composerMobileCtxBadge { display: none !important; }

/* Interim progress note collapse (#2403) */
.interim-collapsed { display: none; }
.interim-collapse-toggle {
  cursor: pointer;
  color: var(--accent-color, #4a9eff);
  font-size: 0.85em;
  margin: 4px 0;
  display: block;
}
.interim-collapse-toggle:hover { text-decoration: underline; }

/* ── Conversation Outline Panel (#2124) ─────────────────────────────────── */
#outlineToggleBtn{
  position:fixed;bottom:120px;right:calc(var(--outline-workspace-offset, 0px) + 20px);z-index:9999;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  font-size:16px;line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
html[data-conversation-outline="enabled"] #outlineToggleBtn:not([hidden]){display:flex;}
#outlineToggleBtn:hover{background:var(--accent-bg);border-color:var(--accent-bg-strong);color:var(--accent-text);}
#outlinePanelWrapper{
  position:fixed;right:calc(var(--outline-workspace-offset, 0px) + 20px);bottom:170px;width:320px;
  max-height:50vh;z-index:9998;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden;
}
/* The id selector's display:flex outranks the UA [hidden]{display:none}, so the
   hidden attribute alone won't hide the panel — restore it explicitly. */
#outlinePanelWrapper[hidden]{display:none;}
.outline-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 8px;border-bottom:1px solid var(--border2);
  font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;flex-shrink:0;
}
.outline-close-btn{
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:16px;line-height:1;padding:0 2px;
}
.outline-close-btn:hover{color:var(--text);}
#outlinePanel{overflow-y:auto;flex:1;}
.outline-entry{
  display:flex;align-items:baseline;gap:8px;
  width:100%;padding:7px 12px;
  background:none;border:none;border-bottom:1px solid var(--border-subtle);
  cursor:pointer;text-align:left;color:var(--text);
  transition:background .12s ease;
}
.outline-entry:last-child{border-bottom:none;}
.outline-entry:hover{background:var(--accent-bg);}
.outline-entry-num{
  font-size:11px;font-weight:600;color:var(--muted);
  min-width:18px;flex-shrink:0;
}
.outline-entry-text{font-size:13px;line-height:1.4;word-break:break-word;}
.outline-empty{
  padding:16px 12px;font-size:13px;color:var(--muted);text-align:center;
}
/* Flash animation when jumping to a message */
@keyframes outline-flash{
  0%{background:var(--accent-bg-strong);}
  100%{background:transparent;}
}
.outline-jump-flash{animation:outline-flash 1.2s ease-out forwards;}
@media(max-width:900px){
  #outlineToggleBtn,#outlinePanelWrapper{display:none!important;}
}
