*, *::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,Lines 1–500 of 7215. Load more
*, *::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,