*, *::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; } /* Chat message role header (model name / icon / TPS / timestamp) */ :root[data-font-size="small"] .msg-role { font-size: 10px; } :root[data-font-size="large"] .msg-role { font-size: 13px; } :root[data-font-size="xlarge"] .msg-role { font-size: 15px; } :root[data-font-size="small"] .role-icon { width: 18px; height: 18px; font-size: 8px; } :root[data-font-size="large"] .role-icon { width: 22px; height: 22px; font-size: 10px; } :root[data-font-size="xlarge"] .role-icon { width: 24px; height: 24px; font-size: 11px; } :root[data-font-size="small"] .msg-role-name { font-size: 11px; } :root[data-font-size="large"] .msg-role-name { font-size: 14px; } :root[data-font-size="xlarge"] .msg-role-name { font-size: 16px; } :root[data-font-size="small"] .msg-tps-inline { font-size: 9.5px; } :root[data-font-size="large"] .msg-tps-inline { font-size: 12.5px; } :root[data-font-size="xlarge"] .msg-tps-inline { font-size: 14.5px; } :root[data-font-size="small"] .msg-role .msg-time { font-size: 9px; } :root[data-font-size="large"] .msg-role .msg-time { font-size: 12px; } :root[data-font-size="xlarge"] .msg-role .msg-time { font-size: 14px; } /* 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"] .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: Codex (OpenAI terminal IDE) ── Full palette rewrite with minimal editor surfaces, crisp contrast, and restrained OpenAI green action chrome. Uses native system fonts so it stays local, fast, and license-safe while feeling closer to modern code workbenches. */ :root[data-skin="codex"]{ color-scheme:light; --bg:#FFFFFF;--sidebar:#F3F3F3;--surface:#FFFFFF;--surface-subtle:#F1F1F1;--surface-subtle-hover:#E9E9E9; --border:#E0E0E0;--border2:#C8C8C8;--border-subtle:#E8E8E8;--border-muted:#DADADA; --text:#252523;--strong:#111110;--muted:#6A6A68;--em:#3A3A38; --accent:#2E7A60;--accent-hover:#1D6850;--accent-bg:rgba(46,122,96,0.08);--accent-bg-strong:rgba(46,122,96,0.16);--accent-text:#1D6850; --blue:#4D8DFF;--gold:#2E7A60;--focus-ring:rgba(46,122,96,0.25);--focus-glow:rgba(46,122,96,0.10); --input-bg:#FFFFFF;--hover-bg:rgba(0,0,0,0.04);--code-bg:#F3F3F3;--code-inline-bg:rgba(0,0,0,0.06);--code-text:#252523;--pre-text:#252523; --topbar-bg:rgba(255,255,255,0.96);--main-bg:#FFFFFF; --error:#D92D20;--success:#2E7A60;--warning:#B87916;--info:#4D8DFF; --user-bubble-bg:#EBEBEB;--user-bubble-border:#D9D9D9;--user-bubble-text:#252523;--user-bubble-placeholder:#6A6A68; --user-selection-bg:rgba(46,122,96,0.20);--user-selection-text:#0D0D0D; --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="codex"]{ 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:#72B39A;--accent-hover:#84BEA8;--accent-bg:rgba(114,179,154,0.10);--accent-bg-strong:rgba(114,179,154,0.18);--accent-text:#84BEA8; --blue:#C9C8C0;--gold:#72B39A;--focus-ring:rgba(114,179,154,0.30);--focus-glow:rgba(114,179,154,0.12); --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:#72B39A;--warning:#E6B15C;--info:#C9C8C0; --user-bubble-bg:#2E302D;--user-bubble-border:#454741;--user-bubble-text:#F4F3EC;--user-bubble-placeholder:#A7A79D; --user-selection-bg:rgba(114,179,154,0.22);--user-selection-text:#FAF9F3; } :root[data-skin="codex"], :root[data-skin="codex"] 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="codex"] .app-titlebar, :root[data-skin="codex"] .rail, :root[data-skin="codex"] .sidebar, :root[data-skin="codex"] .rightpanel, :root[data-skin="codex"] .topbar, :root[data-skin="codex"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} :root[data-skin="codex"] .main, :root[data-skin="codex"] .chat, :root[data-skin="codex"] .panel-view{background:var(--bg)!important;} :root[data-skin="codex"] .app-titlebar-title, :root[data-skin="codex"] .topbar-title, :root[data-skin="codex"] .settings-section-title{letter-spacing:0!important;font-weight:600;} :root[data-skin="codex"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} :root[data-skin="codex"] .session-meta{font-size:10.5px;} :root[data-skin="codex"][data-font-size="small"] .session-item{font-size:12px;} :root[data-skin="codex"][data-font-size="small"] .session-meta{font-size:10px;} :root[data-skin="codex"][data-font-size="large"] .session-item{font-size:13.5px;} :root[data-skin="codex"][data-font-size="large"] .session-meta{font-size:12px;} :root[data-skin="codex"][data-font-size="xlarge"] .session-item{font-size:14.5px;} :root[data-skin="codex"][data-font-size="xlarge"] .session-meta{font-size:13px;} :root[data-skin="codex"] .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="codex"] .session-item.active.streaming, :root[data-skin="codex"] .session-item.active.unread, :root[data-skin="codex"] .session-item.active.needs-attention, :root[data-skin="codex"] .session-item.active:focus-within, :root[data-skin="codex"] .session-item.active.menu-open{padding-right:40px;} @media (hover:hover){:root[data-skin="codex"] .session-item.active:hover{padding-right:40px;}} :root[data-skin="codex"] .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="codex"] .session-item.active .session-title-row{gap:6px;} :root[data-skin="codex"] .session-item.active .session-text{min-width:0;width:100%;} :root[data-skin="codex"] .session-item.active .session-meta{margin-top:2px;} :root[data-skin="codex"] .session-item.active .session-time{padding-left:4px;} :root[data-skin="codex"] .session-item.active:hover .session-time:not(.is-hidden), :root[data-skin="codex"] .session-item.active:focus-within .session-time:not(.is-hidden), :root[data-skin="codex"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} :root[data-skin="codex"] .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="codex"] .session-item.active .session-title, :root[data-skin="codex"] .session-item.active .session-meta, :root[data-skin="codex"] .session-item.active .session-preview, :root[data-skin="codex"] .session-item.active *{color:inherit!important;} :root[data-skin="codex"] .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="codex"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} :root[data-skin="codex"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} :root[data-skin="codex"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} :root[data-skin="codex"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} :root[data-skin="codex"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} :root[data-skin="codex"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} :root[data-skin="codex"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} :root[data-skin="codex"] .msg-body code{font-size:.92em;} :root[data-skin="codex"] .msg-body code, :root[data-skin="codex"] .msg-body pre, :root[data-skin="codex"] .msg-body table, :root[data-skin="codex"] .preview-code, :root[data-skin="codex"] .preview-md code, :root[data-skin="codex"] .tool-card-name, :root[data-skin="codex"] .tool-arg-key, :root[data-skin="codex"] .tool-arg-val, :root[data-skin="codex"] .tool-card-result pre, :root[data-skin="codex"] .app-titlebar-sub{font-family:var(--font-mono)!important;} :root[data-skin="codex"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} :root[data-skin="codex"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} :root[data-skin="codex"] .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="codex"] .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="codex"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} :root[data-skin="codex"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} :root[data-skin="codex"] .tool-arg-key, :root[data-skin="codex"] .tool-card-more, :root[data-skin="codex"] .msg-body a{color:var(--accent-text)!important;} :root[data-skin="codex"] .workspace-panel-edge-toggle, :root[data-skin="codex"] .scroll-to-bottom-btn, :root[data-skin="codex"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} :root.dark[data-skin="codex"] .workspace-panel-edge-toggle, :root.dark[data-skin="codex"] .scroll-to-bottom-btn, :root.dark[data-skin="codex"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} :root[data-skin="codex"] #mainSettings .theme-pick-btn.active, :root[data-skin="codex"] #mainSettings .skin-pick-btn.active, :root[data-skin="codex"] #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="codex"] .new-chat-btn, :root[data-skin="codex"] button.send-btn:not(:disabled), :root[data-skin="codex"] .btn.primary, :root[data-skin="codex"] .update-primary, :root[data-skin="codex"] .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="codex"] .new-chat-btn, :root.dark[data-skin="codex"] button.send-btn:not(:disabled), :root.dark[data-skin="codex"] .btn.primary, :root.dark[data-skin="codex"] .update-primary, :root.dark[data-skin="codex"] .clarify-submit{color:#0D0D0D!important;} :root[data-skin="codex"] .new-chat-btn:hover, :root[data-skin="codex"] button.send-btn:not(:disabled):hover, :root[data-skin="codex"] .btn.primary:hover, :root[data-skin="codex"] .update-primary:hover, :root[data-skin="codex"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} /* ── Skin: Terracotta (warm IDE) ── Full palette rewrite with Anthropic-inspired warm neutrals, soft contrast, and muted Claude orange action chrome. Uses native system fonts so it stays local, fast, and license-safe while feeling closer to modern code workbenches. */ :root[data-skin="terracotta"]{ color-scheme:light; --bg:#FAF9F5;--sidebar:#F0EEE6;--surface:#FFFEFA;--surface-subtle:#F7F4EC;--surface-subtle-hover:#EEE9DE; --border:#E8E6DC;--border2:#D7D2C4;--border-subtle:#F0EDE4;--border-muted:#DDD8CA; --text:#30302E;--strong:#141413;--muted:#87867F;--em:#3D3D3A; --accent:#D97757;--accent-hover:#C76345;--accent-bg:rgba(217,119,87,0.10);--accent-bg-strong:rgba(217,119,87,0.18);--accent-text:#A94F35; --blue:#6396D6;--gold:#D97757;--focus-ring:rgba(217,119,87,0.28);--focus-glow:rgba(217,119,87,0.10); --input-bg:#FFFEFA;--hover-bg:rgba(48,48,46,0.05);--code-bg:#F0EEE6;--code-inline-bg:rgba(48,48,46,0.065);--code-text:#30302E;--pre-text:#30302E; --topbar-bg:rgba(250,249,245,0.96);--main-bg:#FAF9F5; --error:#C15F3C;--success:#6EA100;--warning:#B87916;--info:#6396D6; --user-bubble-bg:#F0EEE6;--user-bubble-border:#E2DED2;--user-bubble-text:#30302E;--user-bubble-placeholder:#87867F; --user-selection-bg:rgba(217,119,87,0.24);--user-selection-text:#141413; --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="terracotta"]{ color-scheme:dark; --bg:#141413;--sidebar:#1E1D1A;--surface:#191917;--surface-subtle:#20201D;--surface-subtle-hover:#2A2925; --border:#34332E;--border2:#4A473F;--border-subtle:#292824;--border-muted:#3D3A34; --text:#EDEAE0;--strong:#FAF9F5;--muted:#B0AEA5;--em:#D8D4C8; --accent:#D97757;--accent-hover:#E69072;--accent-bg:rgba(217,119,87,0.11);--accent-bg-strong:rgba(217,119,87,0.20);--accent-text:#E69072; --blue:#7BA7DE;--gold:#D97757;--focus-ring:rgba(217,119,87,0.30);--focus-glow:rgba(217,119,87,0.12); --input-bg:#191917;--hover-bg:rgba(237,234,224,0.055);--code-bg:#10100F;--code-inline-bg:rgba(237,234,224,0.08);--code-text:#F0EEE6;--pre-text:#EDEAE0; --topbar-bg:rgba(20,20,19,0.94);--main-bg:#141413; --error:#F08A6F;--success:#9BCB5A;--warning:#E6B15C;--info:#7BA7DE; --user-bubble-bg:#282620;--user-bubble-border:#464238;--user-bubble-text:#FAF9F5;--user-bubble-placeholder:#B0AEA5; --user-selection-bg:rgba(217,119,87,0.24);--user-selection-text:#FAF9F5; } :root[data-skin="terracotta"], :root[data-skin="terracotta"] 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="terracotta"] .app-titlebar, :root[data-skin="terracotta"] .rail, :root[data-skin="terracotta"] .sidebar, :root[data-skin="terracotta"] .rightpanel, :root[data-skin="terracotta"] .topbar, :root[data-skin="terracotta"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} :root[data-skin="terracotta"] .main, :root[data-skin="terracotta"] .chat, :root[data-skin="terracotta"] .panel-view{background:var(--bg)!important;} :root[data-skin="terracotta"] .app-titlebar-title, :root[data-skin="terracotta"] .topbar-title, :root[data-skin="terracotta"] .settings-section-title{letter-spacing:0!important;font-weight:600;} :root[data-skin="terracotta"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} :root[data-skin="terracotta"] .session-meta{font-size:10.5px;} :root[data-skin="terracotta"][data-font-size="small"] .session-item{font-size:12px;} :root[data-skin="terracotta"][data-font-size="small"] .session-meta{font-size:10px;} :root[data-skin="terracotta"][data-font-size="large"] .session-item{font-size:13.5px;} :root[data-skin="terracotta"][data-font-size="large"] .session-meta{font-size:12px;} :root[data-skin="terracotta"][data-font-size="xlarge"] .session-item{font-size:14.5px;} :root[data-skin="terracotta"][data-font-size="xlarge"] .session-meta{font-size:13px;} :root[data-skin="terracotta"] .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="terracotta"] .session-item.active.streaming, :root[data-skin="terracotta"] .session-item.active.unread, :root[data-skin="terracotta"] .session-item.active.needs-attention, :root[data-skin="terracotta"] .session-item.active:focus-within, :root[data-skin="terracotta"] .session-item.active.menu-open{padding-right:40px;} @media (hover:hover){:root[data-skin="terracotta"] .session-item.active:hover{padding-right:40px;}} :root[data-skin="terracotta"] .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="terracotta"] .session-item.active .session-title-row{gap:6px;} :root[data-skin="terracotta"] .session-item.active .session-text{min-width:0;width:100%;} :root[data-skin="terracotta"] .session-item.active .session-meta{margin-top:2px;} :root[data-skin="terracotta"] .session-item.active .session-time{padding-left:4px;} :root[data-skin="terracotta"] .session-item.active:hover .session-time:not(.is-hidden), :root[data-skin="terracotta"] .session-item.active:focus-within .session-time:not(.is-hidden), :root[data-skin="terracotta"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} :root[data-skin="terracotta"] .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="terracotta"] .session-item.active .session-title, :root[data-skin="terracotta"] .session-item.active .session-meta, :root[data-skin="terracotta"] .session-item.active .session-preview, :root[data-skin="terracotta"] .session-item.active *{color:inherit!important;} :root[data-skin="terracotta"] .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="terracotta"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} :root[data-skin="terracotta"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} :root[data-skin="terracotta"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} :root[data-skin="terracotta"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} :root[data-skin="terracotta"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} :root[data-skin="terracotta"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} :root[data-skin="terracotta"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} :root[data-skin="terracotta"] .msg-body code{font-size:.92em;} :root[data-skin="terracotta"] .msg-body code, :root[data-skin="terracotta"] .msg-body pre, :root[data-skin="terracotta"] .msg-body table, :root[data-skin="terracotta"] .preview-code, :root[data-skin="terracotta"] .preview-md code, :root[data-skin="terracotta"] .tool-card-name, :root[data-skin="terracotta"] .tool-arg-key, :root[data-skin="terracotta"] .tool-arg-val, :root[data-skin="terracotta"] .tool-card-result pre, :root[data-skin="terracotta"] .app-titlebar-sub{font-family:var(--font-mono)!important;} :root[data-skin="terracotta"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} :root[data-skin="terracotta"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} :root[data-skin="terracotta"] .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="terracotta"] .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="terracotta"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} :root[data-skin="terracotta"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} :root[data-skin="terracotta"] .tool-arg-key, :root[data-skin="terracotta"] .tool-card-more, :root[data-skin="terracotta"] .msg-body a{color:var(--accent-text)!important;} :root[data-skin="terracotta"] .workspace-panel-edge-toggle, :root[data-skin="terracotta"] .scroll-to-bottom-btn, :root[data-skin="terracotta"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} :root.dark[data-skin="terracotta"] .workspace-panel-edge-toggle, :root.dark[data-skin="terracotta"] .scroll-to-bottom-btn, :root.dark[data-skin="terracotta"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} :root[data-skin="terracotta"] #mainSettings .theme-pick-btn.active, :root[data-skin="terracotta"] #mainSettings .skin-pick-btn.active, :root[data-skin="terracotta"] #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="terracotta"] .new-chat-btn, :root[data-skin="terracotta"] button.send-btn:not(:disabled), :root[data-skin="terracotta"] .btn.primary, :root[data-skin="terracotta"] .update-primary, :root[data-skin="terracotta"] .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="terracotta"] .new-chat-btn, :root.dark[data-skin="terracotta"] button.send-btn:not(:disabled), :root.dark[data-skin="terracotta"] .btn.primary, :root.dark[data-skin="terracotta"] .update-primary, :root.dark[data-skin="terracotta"] .clarify-submit{color:#141413!important;} :root[data-skin="terracotta"] .new-chat-btn:hover, :root[data-skin="terracotta"] button.send-btn:not(:disabled):hover, :root[data-skin="terracotta"] .btn.primary:hover, :root[data-skin="terracotta"] .update-primary:hover, :root[data-skin="terracotta"] .clarify-submit:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;} /* ── Skin: GitHub (Graphite with GitHub accents) ── Full palette rewrite with restrained graphite surfaces, soft contrast, and GitHub Primer-inspired action chrome. Uses native system fonts so it stays local, fast, and license-safe while feeling closer to modern code workbenches. */ :root[data-skin="github"]{ 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:#0969DA;--accent-hover:#0550AE;--accent-bg:#DDF4FF;--accent-bg-strong:rgba(9,105,218,0.18);--accent-text:#0969DA; --blue:#0969DA;--gold:#0969DA;--focus-ring:rgba(9,105,218,0.30);--focus-glow:rgba(9,105,218,0.10); --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:#D1242F;--success:#1A7F37;--warning:#9A6700;--info:#0969DA; --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="github"]{ 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:#4493F8;--accent-hover:#58A6FF;--accent-bg:rgba(56,139,253,0.10);--accent-bg-strong:rgba(31,111,235,0.24);--accent-text:#58A6FF; --blue:#58A6FF;--gold:#4493F8;--focus-ring:rgba(31,111,235,0.34);--focus-glow:rgba(31,111,235,0.12); --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:#FF7B72;--success:#3FB950;--warning:#D29922;--info:#58A6FF; --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="github"], :root[data-skin="github"] 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="github"] .app-titlebar, :root[data-skin="github"] .rail, :root[data-skin="github"] .sidebar, :root[data-skin="github"] .rightpanel, :root[data-skin="github"] .topbar, :root[data-skin="github"] .composer-wrap{background:var(--sidebar)!important;border-color:var(--border)!important;box-shadow:none!important;} :root[data-skin="github"] .main, :root[data-skin="github"] .chat, :root[data-skin="github"] .panel-view{background:var(--bg)!important;} :root[data-skin="github"] .app-titlebar-title, :root[data-skin="github"] .topbar-title, :root[data-skin="github"] .settings-section-title{letter-spacing:0!important;font-weight:600;} :root[data-skin="github"] .session-item{border-radius:8px;font-size:12.5px;line-height:1.42;} :root[data-skin="github"] .session-meta{font-size:10.5px;} :root[data-skin="github"][data-font-size="small"] .session-item{font-size:12px;} :root[data-skin="github"][data-font-size="small"] .session-meta{font-size:10px;} :root[data-skin="github"][data-font-size="large"] .session-item{font-size:13.5px;} :root[data-skin="github"][data-font-size="large"] .session-meta{font-size:12px;} :root[data-skin="github"][data-font-size="xlarge"] .session-item{font-size:14.5px;} :root[data-skin="github"][data-font-size="xlarge"] .session-meta{font-size:13px;} :root[data-skin="github"] .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="github"] .session-item.active.streaming, :root[data-skin="github"] .session-item.active.unread, :root[data-skin="github"] .session-item.active.needs-attention, :root[data-skin="github"] .session-item.active:focus-within, :root[data-skin="github"] .session-item.active.menu-open{padding-right:40px;} @media (hover:hover){:root[data-skin="github"] .session-item.active:hover{padding-right:40px;}} :root[data-skin="github"] .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="github"] .session-item.active .session-title-row{gap:6px;} :root[data-skin="github"] .session-item.active .session-text{min-width:0;width:100%;} :root[data-skin="github"] .session-item.active .session-meta{margin-top:2px;} :root[data-skin="github"] .session-item.active .session-time{padding-left:4px;} :root[data-skin="github"] .session-item.active:hover .session-time:not(.is-hidden), :root[data-skin="github"] .session-item.active:focus-within .session-time:not(.is-hidden), :root[data-skin="github"] .session-item.active.menu-open .session-time:not(.is-hidden){display:inline-flex;visibility:hidden;} :root[data-skin="github"] .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="github"] .session-item.active .session-title, :root[data-skin="github"] .session-item.active .session-meta, :root[data-skin="github"] .session-item.active .session-preview, :root[data-skin="github"] .session-item.active *{color:inherit!important;} :root[data-skin="github"] .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="github"] .composer-box{box-shadow:0 1px 2px rgba(0,0,0,0.28);} :root[data-skin="github"] .composer-box:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--focus-ring)!important;} :root[data-skin="github"] textarea#msg{font-family:var(--font-ui)!important;font-size:14px;font-weight:430;letter-spacing:0;line-height:1.45;} :root[data-skin="github"] .msg-body{font-family:var(--font-ui);font-size:13px;font-weight:430;letter-spacing:0;line-height:1.6;} :root[data-skin="github"][data-font-size="small"] .msg-body{font-size:11.5px;line-height:1.6;} :root[data-skin="github"][data-font-size="large"] .msg-body{font-size:15px;line-height:1.62;} :root[data-skin="github"][data-font-size="xlarge"] .msg-body{font-size:17px;line-height:1.62;} :root[data-skin="github"] .msg-body code{font-size:.92em;} :root[data-skin="github"] .msg-body code, :root[data-skin="github"] .msg-body pre, :root[data-skin="github"] .msg-body table, :root[data-skin="github"] .preview-code, :root[data-skin="github"] .preview-md code, :root[data-skin="github"] .tool-card-name, :root[data-skin="github"] .tool-arg-key, :root[data-skin="github"] .tool-arg-val, :root[data-skin="github"] .tool-card-result pre, :root[data-skin="github"] .app-titlebar-sub{font-family:var(--font-mono)!important;} :root[data-skin="github"] .pre-header{background:var(--code-bg);border-color:var(--border-muted);border-bottom:0;} :root[data-skin="github"] .pre-header+pre{border-color:var(--border-muted);border-top:1px solid var(--border-muted);margin-top:0;} :root[data-skin="github"] .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="github"] .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="github"] .tool-card:hover{background:var(--surface-subtle-hover)!important;border-color:var(--border2)!important;} :root[data-skin="github"] .tool-card-running{background:var(--accent-bg)!important;border-color:var(--accent-bg-strong)!important;} :root[data-skin="github"] .tool-arg-key, :root[data-skin="github"] .tool-card-more, :root[data-skin="github"] .msg-body a{color:var(--accent-text)!important;} :root[data-skin="github"] .workspace-panel-edge-toggle, :root[data-skin="github"] .scroll-to-bottom-btn, :root[data-skin="github"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.08)!important;background:var(--surface)!important;} :root.dark[data-skin="github"] .workspace-panel-edge-toggle, :root.dark[data-skin="github"] .scroll-to-bottom-btn, :root.dark[data-skin="github"] .session-jump-btn{box-shadow:0 1px 2px rgba(0,0,0,0.28)!important;} :root[data-skin="github"] #mainSettings .theme-pick-btn.active, :root[data-skin="github"] #mainSettings .skin-pick-btn.active, :root[data-skin="github"] #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="github"] .new-chat-btn, :root[data-skin="github"] button.send-btn:not(:disabled), :root[data-skin="github"] .btn.primary, :root[data-skin="github"] .update-primary, :root[data-skin="github"] .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="github"] .new-chat-btn, :root.dark[data-skin="github"] button.send-btn:not(:disabled), :root.dark[data-skin="github"] .btn.primary, :root.dark[data-skin="github"] .update-primary, :root.dark[data-skin="github"] .clarify-submit{color:#151614!important;} :root[data-skin="github"] .new-chat-btn:hover, :root[data-skin="github"] button.send-btn:not(:disabled):hover, :root[data-skin="github"] .btn.primary:hover, :root[data-skin="github"] .update-primary:hover, :root[data-skin="github"] .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"] .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);} /* ═══ NEON SOFT — lighter dark-mode surfaces with the same neon purple/cyan palette ═══ */ :root[data-skin="neon-soft"]{ --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-soft"]{ --bg:#181428;--sidebar:#141024;--border:#2a2448;--border2:rgba(179,71,255,0.15); --text:#e8e6f8;--muted:#8a85aa;--accent:#b347ff;--blue:#a78bfa;--gold:#c084fc;--code-bg:#121020; --surface:#1c1732;--topbar-bg:rgba(24,20,40,.98);--main-bg:rgba(24,20,40,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:#f8f6ff;--em:#00ddff;--code-text:#c8c0f0;--code-inline-bg:rgba(179,71,255,.10);--pre-text:#e8e6f8; --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 Soft: component-level overrides (same as Neon, targeting neon-soft) */ :root.dark[data-skin="neon-soft"] ::selection{background:rgba(179,71,255,0.35);color:#fff;} :root.dark[data-skin="neon-soft"] .app-titlebar{border-bottom-color:rgba(179,71,255,0.2);} :root.dark[data-skin="neon-soft"] .sidebar{box-shadow:inset -1px 0 30px rgba(179,71,255,0.03);} :root.dark[data-skin="neon-soft"] textarea:focus, :root.dark[data-skin="neon-soft"] input[type="text"]:focus, :root.dark[data-skin="neon-soft"] input[type="password"]:focus, :root.dark[data-skin="neon-soft"] select:focus{box-shadow:0 0 16px rgba(179,71,255,0.2);} :root.dark[data-skin="neon-soft"] button.send-btn{box-shadow:0 0 14px rgba(179,71,255,0.25);} :root.dark[data-skin="neon-soft"] button.send-btn:hover{box-shadow:0 0 24px rgba(179,71,255,0.45);} :root.dark[data-skin="neon-soft"] .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-soft"] .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);} :root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb{background:rgba(179,71,255,.18);border-radius:3px;} :root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb:hover{background:rgba(179,71,255,.30);} :root.dark[data-skin="neon-soft"]{scrollbar-width:thin;scrollbar-color:rgba(179,71,255,.18) transparent;} :root.dark[data-skin="neon-soft"] .tool-card{background:rgba(179,71,255,0.03);border-color:rgba(179,71,255,0.08);} :root.dark[data-skin="neon-soft"] .tool-card:hover{border-color:rgba(179,71,255,0.2);} :root.dark[data-skin="neon-soft"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);} :root.dark[data-skin="neon-soft"] .tool-card-name{color:var(--muted);font-weight:500;} :root.dark[data-skin="neon-soft"] .tool-arg-key, :root.dark[data-skin="neon-soft"] .tool-card-more{color:var(--accent-text);} :root.dark[data-skin="neon-soft"] .tool-card-running-dot{background:var(--accent);} :root.dark[data-skin="neon-soft"] .tree-key{color:#b347ff;} :root.dark[data-skin="neon-soft"] .tree-str{color:#c8a0ff;} :root.dark[data-skin="neon-soft"] .tree-num{color:#00ddff;} :root.dark[data-skin="neon-soft"] .tree-bool{color:#b347ff;} :root.dark[data-skin="neon-soft"] .session-child-count{background:rgba(179,71,255,.16);color:#c8a0ff;} :root.dark[data-skin="neon-soft"] .session-child-count:hover{background:rgba(179,71,255,.26);color:#d8c0ff;} :root.dark[data-skin="neon-soft"] .session-tree-badge{background:rgba(179,71,255,.2);color:#c8a0ff;} :root.dark[data-skin="neon-soft"] .session-tag{background:rgba(179,71,255,.2);color:#c8a0ff;} :root.dark[data-skin="neon-soft"] .diff-block .diff-plus{color:#b347ff;} :root.dark[data-skin="neon-soft"] .mcp-http{color:#c8a0ff;} :root.dark[data-skin="neon-soft"] .mcp-status-active{color:#00dd88;} :root.dark[data-skin="neon-soft"] .img-lightbox-close:hover{background:rgba(179,71,255,.35);} :root.dark[data-skin="neon-soft"] a{color:var(--info);transition:text-shadow 0.2s;} :root.dark[data-skin="neon-soft"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);} /* ═══ NEON PAINT — cyberpunk noodle bar: hot pink + electric cyan + warm amber on deep purple-gray ═══ */ :root[data-skin="neon-paint"]{ --bg:#F5F0FF;--sidebar:#EDE6F8;--border:#D4C8EE;--border2:rgba(0,0,0,0.12); --text:#1A1028;--muted:#6E5A88;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#EDE6F8; --surface:#FFFFFF;--topbar-bg:rgba(245,240,255,.98);--main-bg:rgba(245,240,255,0.5); --focus-ring:rgba(255,45,149,.3);--focus-glow:rgba(255,45,149,.08); --input-bg:rgba(255,45,149,.03);--hover-bg:rgba(255,45,149,.05); --strong:#0D0518;--em:#00E5FF;--code-text:#D81B60;--code-inline-bg:rgba(255,45,149,.08);--pre-text:#1A1028; --accent-hover:#E91E80;--accent-bg:rgba(255,45,149,0.06);--accent-bg-strong:rgba(255,45,149,0.12);--accent-text:#C2185B; --error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF; --radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px; --font-ui:system-ui,-apple-system,sans-serif; --surface-subtle:rgba(255,45,149,.025);--surface-subtle-hover:rgba(255,45,149,.05); --border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12); --purple:#FF2D95; } :root.dark[data-skin="neon-paint"]{ --bg:#0D0A16;--sidebar:#0A0712;--border:#2a1f40;--border2:rgba(255,45,149,0.15); --text:#f0e8ff;--muted:#9a8ab8;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#080510; --surface:#12101e;--topbar-bg:rgba(13,10,22,.98);--main-bg:rgba(13,10,22,0.5); --focus-ring:rgba(255,45,149,.4);--focus-glow:rgba(255,45,149,.12); --input-bg:rgba(255,45,149,.04);--hover-bg:rgba(255,45,149,.06); --strong:#fff5ff;--em:#00E5FF;--code-text:#f0c0e8;--code-inline-bg:rgba(255,45,149,.12);--pre-text:#f0e8ff; --accent-hover:#FF59A8;--accent-bg:rgba(255,45,149,0.10);--accent-bg-strong:rgba(255,45,149,0.20);--accent-text:#FF80BF; --error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF; --surface-subtle:rgba(255,45,149,.03);--surface-subtle-hover:rgba(255,45,149,.06); --border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12); --purple:#FF2D95; } /* Neon Paint: component-level overrides */ :root.dark[data-skin="neon-paint"] ::selection{background:rgba(255,45,149,0.4);color:#fff;} :root.dark[data-skin="neon-paint"] .app-titlebar{border-bottom-color:rgba(255,45,149,0.25);} :root.dark[data-skin="neon-paint"] .sidebar{box-shadow:inset -1px 0 30px rgba(255,45,149,0.04);} :root.dark[data-skin="neon-paint"] textarea:focus, :root.dark[data-skin="neon-paint"] input[type="text"]:focus, :root.dark[data-skin="neon-paint"] input[type="password"]:focus, :root.dark[data-skin="neon-paint"] select:focus{box-shadow:0 0 18px rgba(255,45,149,0.25);} :root.dark[data-skin="neon-paint"] button.send-btn{box-shadow:0 0 16px rgba(255,45,149,0.3);} :root.dark[data-skin="neon-paint"] button.send-btn:hover{box-shadow:0 0 28px rgba(255,45,149,0.5);} :root.dark[data-skin="neon-paint"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 14px rgba(255,45,149,0.25);} :root.dark[data-skin="neon-paint"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 24px rgba(255,45,149,0.4);} :root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb{background:rgba(255,45,149,.20);border-radius:3px;} :root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb:hover{background:rgba(255,45,149,.35);} :root.dark[data-skin="neon-paint"]{scrollbar-width:thin;scrollbar-color:rgba(255,45,149,.20) transparent;} :root.dark[data-skin="neon-paint"] .tool-card{background:rgba(255,45,149,0.03);border-color:rgba(255,45,149,0.08);} :root.dark[data-skin="neon-paint"] .tool-card:hover{border-color:rgba(255,45,149,0.25);} :root.dark[data-skin="neon-paint"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);} :root.dark[data-skin="neon-paint"] .tool-card-name{color:var(--muted);font-weight:500;} :root.dark[data-skin="neon-paint"] .tool-arg-key, :root.dark[data-skin="neon-paint"] .tool-card-more{color:var(--accent-text);} :root.dark[data-skin="neon-paint"] .tool-card-running-dot{background:var(--accent);} :root.dark[data-skin="neon-paint"] .tree-key{color:#FF2D95;} :root.dark[data-skin="neon-paint"] .tree-str{color:#FF80BF;} :root.dark[data-skin="neon-paint"] .tree-num{color:#00E5FF;} :root.dark[data-skin="neon-paint"] .tree-bool{color:#FF2D95;} :root.dark[data-skin="neon-paint"] .session-child-count{background:rgba(255,45,149,.16);color:#FF80BF;} :root.dark[data-skin="neon-paint"] .session-child-count:hover{background:rgba(255,45,149,.28);color:#FFA0D0;} :root.dark[data-skin="neon-paint"] .session-tree-badge{background:rgba(255,45,149,.2);color:#FF80BF;} :root.dark[data-skin="neon-paint"] .session-tag{background:rgba(255,45,149,.2);color:#FF80BF;} :root.dark[data-skin="neon-paint"] .diff-block .diff-plus{color:#FF2D95;} :root.dark[data-skin="neon-paint"] .mcp-http{color:#FF80BF;} :root.dark[data-skin="neon-paint"] .mcp-status-active{color:#00E676;} :root.dark[data-skin="neon-paint"] .img-lightbox-close:hover{background:rgba(255,45,149,.35);} :root.dark[data-skin="neon-paint"] a{color:var(--info);transition:text-shadow 0.2s;} :root.dark[data-skin="neon-paint"] a:hover{text-shadow:0 0 10px rgba(0,229,255,0.5);} /* ═══ 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);} .composer-selection-chips{display:flex;flex-direction:column;gap:8px;max-width:clamp(780px,60vw,1100px);width:100%;box-sizing:border-box;margin:0 auto;padding:8px 0 0;min-height:0;max-height:min(32vh,280px);overflow-y:auto;scrollbar-gutter:stable;} .composer-selection-chips[hidden]{display:none;} .selection-context-card{display:flex;gap:10px;align-items:stretch;border:1px solid var(--border2);border-radius:12px;background:linear-gradient(135deg,var(--surface-subtle),rgba(255,255,255,.015));box-shadow:0 1px 0 rgba(255,255,255,.03) inset;color:var(--text);overflow:hidden;} .selection-context-accent{width:3px;flex:0 0 3px;background:var(--accent);opacity:.82;} .selection-context-body{min-width:0;flex:1;padding:9px 10px 9px 0;} .selection-context-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;} .selection-context-name{appearance:none;border:0;background:transparent;color:var(--accent-text);font-size:11px;font-weight:700;line-height:1.2;padding:3px 4px;min-height:24px;max-width:min(260px,65vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:left;} .selection-context-name:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;} .selection-context-name:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px;} .selection-context-remove{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 5px;flex:0 0 auto;} .selection-context-remove:hover{color:var(--text);background:var(--hover-bg);border-color:var(--border);} .selection-context-remove:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;} .selection-context-quote{margin:0;color:var(--muted);font-family:var(--font-ui);font-size:12.5px;line-height:1.45;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;} .selection-chip-edit{font-size:11px;border:1px solid var(--accent);outline:none;border-radius:6px;padding:2px 6px;background:var(--surface);color:var(--text);width:130px;max-width:70vw;} .selection-chip-edit:focus{box-shadow:0 0 0 2px var(--focus-ring);} @media (min-width:1600px){.composer-selection-chips{max-width:1600px;}} @media (hover:none) and (pointer:coarse){.composer-selection-chips{max-height:min(28dvh,220px);}.selection-context-name,.selection-context-remove{min-height:44px;}.selection-context-remove{min-width:44px;}} .sent-selection-context{margin:10px 0 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--user-bubble-border) 72%,var(--accent) 28%);border-left:3px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--user-bubble-bg) 86%,var(--accent-bg) 14%);} .sent-selection-context-label{margin-bottom:5px;color:var(--accent-text);font-size:11px;font-weight:750;line-height:1.25;letter-spacing:.01em;} .sent-selection-context-quote{margin:0;color:var(--user-bubble-text);font-size:.94em;line-height:1.5;white-space:pre-wrap;opacity:.88;} :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;} /* Live assistant content is updated token-by-token. The global div color/background transition above makes each streamed markdown rewrite briefly fade/flash on light themes. Keep theme transitions elsewhere, but make the live turn paint instantly. */ #liveAssistantTurn, #liveAssistantTurn *, #thinkingRow, #thinkingRow *, .assistant-segment[data-live-assistant="1"], .assistant-segment[data-live-assistant="1"] *, .agent-activity-thinking[data-thinking-active="1"], .agent-activity-thinking[data-thinking-active="1"] *, .agent-activity-thinking[data-live-thinking="1"], .agent-activity-thinking[data-live-thinking="1"] *, .live-worklog[data-live-worklog-shell="1"], .live-worklog[data-live-worklog-shell="1"] *{transition-property:none!important;transition-duration:0s!important;transition-delay:0s!important;} :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);} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;} 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-left{display:flex;align-items:center;gap:4px;} .app-titlebar-inner{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;justify-content:center;} /* Profile switcher — optional, opt-in via settings; sits in the titlebar left flex group */ .app-titlebar-profile{display:inline-flex;align-items:center;gap:4px;height:28px;flex-shrink:0;background:none;border:1px solid var(--border2);color:var(--muted);border-radius:6px;cursor:pointer;padding:0 8px;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s,border-color .15s;font-size:11px;font-weight:500;white-space:nowrap;-webkit-app-region:no-drag;} .app-titlebar-profile:hover{background:var(--hover-bg);color:var(--text);border-color:var(--border);} .app-titlebar-profile.active{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg-strong);} .app-titlebar-profile.switching{opacity:.6;pointer-events:none;} .app-titlebar-profile-icon{display:inline-flex;align-items:center;flex-shrink:0;} .app-titlebar-profile-label{max-width:80px;overflow:hidden;text-overflow:ellipsis;} .app-titlebar-profile-chevron{display:inline-flex;align-items:center;flex-shrink:0;opacity:.5;} .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-title-popover{position:fixed;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.18);word-break:break-word;line-height:1.4;max-width:calc(100vw - 16px);pointer-events:auto;} .app-titlebar-hamburger,.app-titlebar-spacer{display:none;width:44px;height:44px;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.loading{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-child-session-fork.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);}} /* ── Loading skeletons (profile switch + cold load) ───────────────────────── A restrained shimmer that mirrors the real row anatomy so the transition into loaded content is seamless. Uses theme tokens so it adapts to light/dark/skins automatically. (#4662 Phase 1) */ .skeleton-list{padding:2px 0;} .skeleton-group-label{height:9px;width:58px;margin:10px 10px 6px;border-radius:var(--radius-pill); background:var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent));opacity:.5;} .skeleton-group-label:first-child{margin-top:6px;} /* Single-line rows that mirror the real .session-item: a title bar with a short right-aligned timestamp bar. Keeps row height + rhythm aligned so the swap to real content doesn't shift the layout. */ .skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px;margin-bottom:2px;border-radius:8px;min-height:17px;} .skeleton-bar{height:10px;border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 0%, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 28%, var(--skeleton-sheen,color-mix(in srgb,var(--text) 24%,transparent)) 50%, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 72%, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 100%); background-size:200% 100%;animation:skeletonSheen 1.25s ease-in-out infinite;} .skeleton-row .skeleton-title{min-width:0;} .skeleton-row .skeleton-stamp{height:8px;width:16px;flex:0 0 auto;opacity:.55;} /* Tree-row skeleton for the workspace file panel */ .skeleton-tree{padding:8px;} .skeleton-tree-row{display:flex;align-items:center;gap:8px;height:28px;padding:0 2px;} .skeleton-tree-row .skeleton-glyph{width:13px;height:13px;border-radius:3px;flex:0 0 auto; background:linear-gradient(90deg, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 0%, var(--skeleton-sheen,color-mix(in srgb,var(--text) 24%,transparent)) 50%, var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 100%); animation:skeletonSheen 1.25s ease-in-out infinite;background-size:200% 100%;} .skeleton-tree-row .skeleton-name{min-width:0;} .skeleton-tree-row .skeleton-size{height:8px;width:22px;flex:0 0 auto;margin-left:auto;opacity:.5;} /* Gentle entrance so the skeleton itself doesn't pop in harshly. The per-row stagger delay is set inline in JS (showSessionListSkeleton), because group-label siblings are interleaved with rows so a CSS :nth-child stagger would skip most rows. */ .skeleton-row,.skeleton-tree-row{animation:skeletonFadeIn .22s ease both;} /* Group labels rest at opacity:.5 (see base rule). The shared skeletonFadeIn ends at opacity:1 with fill-mode:both, which would override that resting .5 for the full time the skeleton is on screen — so labels get a dedicated fade that ends at .5. The static opacity:.5 on the base rule remains for the reduced-motion path (animation:none) below. (@rodboev/greptile review, #4662) */ .skeleton-group-label{animation:skeletonFadeInDim .22s ease both;} @keyframes skeletonSheen{0%{background-position:200% 0;}100%{background-position:-200% 0;}} @keyframes skeletonFadeIn{from{opacity:0;}to{opacity:1;}} @keyframes skeletonFadeInDim{from{opacity:0;}to{opacity:.5;}} :root{--skeleton-base:color-mix(in srgb,var(--text) 8%,transparent);--skeleton-sheen:color-mix(in srgb,var(--text) 22%,transparent);} :root.dark{--skeleton-base:color-mix(in srgb,#fff 6%,transparent);--skeleton-sheen:color-mix(in srgb,#fff 20%,transparent);} @media (prefers-reduced-motion:reduce){ .skeleton-bar,.skeleton-tree-row .skeleton-glyph{animation:none;background:var(--skeleton-base,color-mix(in srgb,var(--text) 10%,transparent));} .skeleton-row,.skeleton-tree-row,.skeleton-group-label{animation:none;} } /* #4717: empty-profile skeleton. When the target profile is known to have zero conversations, showSessionListSkeleton() renders a single quiet hint bar instead of a fake content list, so the switch resolves calmly to the real empty state without a misleading "loading conversations" flash. */ .skeleton-list-empty{padding:14px 10px;} .skeleton-empty-hint{height:9px;width:42px;border-radius:var(--radius-pill); background:var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)); opacity:.4;animation:skeletonEmptyHintFadeIn .22s ease both;} /* Dedicated fade that ENDS at the resting .4 (not .5): the shared skeletonFadeInDim ends at .5 with fill-mode:both, which would override the static opacity:.4 above and leave the animated and reduced-motion paths at different rest opacities. This keeps both at .4. (greptile #4748) */ @keyframes skeletonEmptyHintFadeIn{from{opacity:0;}to{opacity:.4;}} @media (prefers-reduced-motion:reduce){.skeleton-empty-hint{animation:none;}} .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:2px solid color-mix(in srgb,var(--error) 65%,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));} .agent-health-actions{display:flex;gap:8px;flex-shrink:0;} .agent-health-restart{flex-shrink:0;padding:6px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--surface));background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:background-color .15s;} .agent-health-restart:hover{background:color-mix(in srgb,var(--accent) 25%,var(--surface));} .agent-health-restart:disabled{opacity:0.5;cursor:not-allowed;} /* ── 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,#updateSummaryScroll,#updateSummaryDiffLinks{max-width:100%;overflow-wrap:anywhere;word-break:break-word;} #updateSummaryScroll{max-height:min(34vh,260px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;} #updateSummaryPanel.update-summary-expanded #updateSummaryScroll{max-height:min(75vh,560px);} @media (max-width:600px){#updateSummaryPanel.update-summary-expanded #updateSummaryScroll{max-height:min(82vh,640px);}} .update-summary-toggle{font-size:11px;color:var(--accent);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;} #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[hidden],.clarify-card[hidden]{display:none!important;} .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-dismiss{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-dismiss:hover{color:var(--text);border-color:var(--accent-bg-strong);} .approval-dismiss svg{width:14px;height:14px;display:block;} .approval-dismiss: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,.nav-action-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-paused-section{margin:8px 0 0;border-top:1px solid var(--border);padding-top:6px;} .cron-paused-summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--muted);padding:6px 4px;letter-spacing:.02em;text-transform:uppercase;list-style:none;outline:none;user-select:none;} .cron-paused-summary::-webkit-details-marker{display:none;} .cron-paused-summary::before{content:"▸";display:inline-block;width:12px;color:var(--muted);transition:transform .12s ease;} .cron-paused-section[open] > .cron-paused-summary::before{transform:rotate(90deg);} .cron-paused-summary:hover{color:var(--text);} .cron-paused-inner{margin-top:4px;} .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;overflow-x:hidden;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:auto;} @media (hover:hover) and (pointer:fine){.messages{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;} /* Steer recovery bar: dismissible after failure, same lifecycle as steer-indicator */ .steer-recovery{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;margin:0.25rem 0;border-radius:var(--radius-md);background:var(--surface-subtle);font-size:0.85rem} .steer-recovery-label{flex:1;min-width:0;color:var(--text)} .steer-recovery button{padding:0.25rem 0.75rem;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:0.8rem;line-height:1.4;white-space:nowrap} .steer-recovery button:hover{background:var(--hover-bg);color:var(--text)} .steer-recovery-retry{border-color:var(--accent);color:var(--accent);font-weight:600} .steer-recovery-retry:hover{color:var(--accent)} .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;contain:content;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;} .msg-body pre.md-source-block,.preview-md pre.md-source-block{white-space:pre-wrap;overflow-x:hidden;overflow-wrap:anywhere;} .msg-body pre.md-source-block code,.preview-md pre.md-source-block code{display:block;white-space:inherit;overflow-wrap:anywhere;word-break:break-word;} .msg-body pre.md-source-block code .token,.preview-md pre.md-source-block code .token{white-space:inherit;overflow-wrap:anywhere;word-break:inherit;} .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;} .process-wakeup-row{padding:6px 0;} .process-wakeup-notice{margin:8px 0 8px var(--msg-rail);max-width:min(var(--msg-max),760px);padding:8px 10px;border:1px solid var(--border);border-left:2px solid var(--accent-bg-strong);border-radius:9px;background:var(--surface-subtle,var(--hover-bg));color:var(--muted);} .process-wakeup-label{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);} .process-wakeup-label svg{width:13px;height:13px;flex:0 0 auto;} .process-wakeup-row .msg-body.process-wakeup-body{padding-left:0;max-width:none;color:var(--muted);} .process-wakeup-row .msg-body pre.process-wakeup-text{margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;} .process-wakeup-row .msg-foot{padding-left:0;margin-top:5px;} @media(max-width:700px){.process-wakeup-notice{margin-left:0;}} /* 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;} .mermaid-viewer{display:flex;flex-direction:column;gap:6px;max-width:100%;min-width:0;} .mermaid-viewer-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;align-items:center;flex-shrink:0;} .mermaid-viewer-btn{width:28px;height:28px;border:1px solid var(--border2);border-radius:6px;background:var(--input-bg);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;flex:0 0 auto;padding:0;} .mermaid-viewer-btn:hover{background:var(--hover-bg);color:var(--text);} .mermaid-viewer-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .mermaid-viewer-viewport{position:relative;overflow:hidden;max-width:100%;border:1px solid var(--border);border-radius:8px;background:var(--code-bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;} .mermaid-viewer-viewport.is-panning{cursor:grabbing;} .mermaid-viewer--inline .mermaid-viewer-viewport{width:100%;max-height:70vh;} @media (max-width: 640px){ .mermaid-viewer--inline .mermaid-viewer-viewport{min-height:min(200px,70vh);} } .mermaid-viewer--lightbox .mermaid-viewer-viewport{max-width:90vw;max-height:90vh;border:none;box-shadow:0 8px 48px rgba(0,0,0,.6);} .mermaid-viewer-canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;} .mermaid-viewer-svg{display:block;width:100%;height:100%;} .img-lightbox .mermaid-lightbox-svg{background:var(--code-bg);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-preview-header{justify-content:space-between;flex-wrap:wrap;row-gap:6px;} .csv-preview-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .csv-download-link{margin-left:auto;text-transform:none;letter-spacing:0;font-size:12px;} .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-state brand mark: a free-breathing winged caduceus with a soft "spirit" bloom behind it — no app-icon tile. Glow + mark gradient are tuned separately for dark vs light themes (see --logo-glow / .hm-g* below). */ .empty-logo{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:10px;background:none;border:none;border-radius:0;box-shadow:none;} .empty-logo::before{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;background:var(--logo-glow);z-index:0;pointer-events:none;} .empty-logo svg{position:relative;z-index:1;width:88px;height:88px;display:block;} /* Light themes (default :root): deeper, richer gradient holds contrast on a pale background; cooler, restrained bloom. */ :root .empty-logo .hm-g0{stop-color:#0AA6CC;} :root .empty-logo .hm-g1{stop-color:#1E63D6;} :root{--logo-glow:radial-gradient(circle,rgba(30,99,214,0.15) 0%,rgba(10,166,204,0.07) 45%,transparent 70%);} /* Dark themes: bright cyan→blue mark with a luminous bloom. */ :root.dark .empty-logo .hm-g0{stop-color:#08EBF1;} :root.dark .empty-logo .hm-g1{stop-color:#3889FD;} :root.dark{--logo-glow:radial-gradient(circle,rgba(8,235,241,0.20) 0%,rgba(56,137,253,0.15) 38%,transparent 72%);} @media (prefers-reduced-motion: no-preference){ .empty-logo svg{animation:emptyLogoRise .5s ease-out both;} @keyframes emptyLogoRise{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}} } .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:5px;max-width:none;padding:8px 10px;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-chevron{display:none;} .composer-reasoning-label{display:inline-flex;align-items:center;justify-content:center;min-width:1.6ch;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;} .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:4px;height:30px;max-width:120px;padding:5px 8px;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;} /* 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-panel.open{display:flex;} .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;} button,.icon-btn,.panel-icon-btn,.send-btn,.approval-btn,[onclick]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .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 
 (.preview-code), so without overriding the 
 too you get a gray
     prism frame around the navy var(--code-bg)  — 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;}
  .pwa-sidebar-edge-guard{display:none;}

  @media(min-width:901px){
    html[data-workspace-panel="closed"] .rightpanel{width:0 !important;min-width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
    .layout.workspace-panel-collapsed .rightpanel{width:0 !important;min-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;}
    /* Keep the center readable before the rails hit their resize floor. */
    .main{flex:1 1 420px;min-width:420px;}
    .sidebar{flex-shrink:1;min-width:180px;}
    .rightpanel{flex-shrink:1;min-width:180px;}
  }

  /* 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