/* Colours. Components use only the semantic --color-* tokens below; a theme is the set of values they take. js/theme.js puts data-theme="light|dark" on before the first paint (the Settings drawer picks it), so a new colour means a new token here, in both themes. */ :root { --message-font-size: 0.93rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); /* Lifetime of the transient accent line under a just-arrived assistant message. Home.razor's BranchLeafLineLifetime must stay >= the sum of these three, or the class is dropped mid-animation and the line vanishes with a jump. */ --branch-leaf-draw: 0.6s; --branch-leaf-hold: 5s; --branch-leaf-fade: 0.8s; /* Native checkboxes, radios, ranges and progress bars take the accent the user picked. */ accent-color: var(--color-accent-strong); } .host-gate { max-width: 54rem; margin: 8vh auto; padding: 1.5rem; } .host-gate h1 { margin: .5rem 0; } .host-gate > p { color: var(--color-text-muted); } .host-gate button, .host-gate select { padding: .55rem .8rem; font: inherit; } .host-gate button { cursor: pointer; } .host-gate-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 2rem 0 1.2rem; } .host-gate-downloads section { border: 1px solid var(--color-border-strong); background: var(--color-surface); border-radius: .8rem; padding: 1.2rem; } .host-gate-downloads h2 { margin-top: 0; font-size: 1.1rem; } .host-gate-downloads a { display: inline-block; margin-top: .5rem; padding: .55rem .8rem; background: var(--color-accent-strong); color: var(--color-bg); border-radius: .4rem; text-decoration: none; } .host-gate label { margin-right: .6rem; } .host-gate-error { color: var(--color-danger-text); } /* Selected text carries the accent too; a tint rather than a fill, so it reads in either theme. */ ::selection { background: color-mix(in srgb, var(--color-accent-strong) 35%, transparent); } :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces, from the deepest to the most raised. */ --color-bg-sunken: #111111; --color-bg-inset: #151515; --color-bg: #171717; --color-surface: #1c1c1c; --color-surface-raised: #242424; --color-input-bg: #121212; /* Fills: rows, chips and buttons at rest, hovered, pressed. */ --color-fill: #292929; --color-fill-hover: #2b2b2b; --color-fill-active: #333333; --color-fill-strong: #3a3a3a; --color-fill-stronger: #444444; /* Translucent layers for elements that sit on more than one surface. */ --color-overlay-faint: rgb(255 255 255 / 2%); --color-overlay-hover: rgb(255 255 255 / 6%); --color-overlay-active: rgb(255 255 255 / 9%); --color-overlay-sunken: rgb(0 0 0 / 28%); /* The one high-contrast control (Send) and what sits on it. */ --color-inverse: #f2f2f2; --color-inverse-hover: #ffffff; --color-inverse-active: #d4d4d4; --color-on-inverse: #202020; /* Text. text-faint is the lowest level that still reads (4.5:1); text-disabled is below it on purpose and is for placeholders and disabled controls only. */ --color-text-strong: #ffffff; --color-text: #ececec; --color-text-secondary: #d6d6d6; --color-text-muted: #aaaaaa; --color-text-subtle: #959595; --color-text-faint: #858585; --color-text-disabled: #707070; /* Borders. */ --color-border-subtle: #292929; --color-border: #383838; --color-border-strong: #484848; --color-border-stronger: #5c5c5c; --color-border-translucent: rgb(255 255 255 / 8%); /* Accent: interactive, focus, unread. */ --color-accent: #7eb4ed; --color-accent-strong: #4f91dc; --color-accent-text: #bcd7f5; --color-accent-bg: #252d38; --color-accent-bg-hover: #2f3d4f; --color-accent-bg-active: #35465b; --color-accent-fill: #345f91; --color-on-accent: #ffffff; /* Status colours: the base one is for icons and dots, -text for words. */ --color-danger: #e0665f; --color-danger-text: #ffabab; --color-danger-text-strong: #ff8a8a; --color-danger-bg: #3b292a; --color-danger-bg-hover: #4d3031; --color-danger-bg-active: #603838; --color-danger-border: #704346; --color-danger-border-strong: #8c5054; --color-warning: #d9a441; --color-warning-text: #e5c47a; --color-success: #5dc97c; --color-success-text: #a6dcb1; --color-success-border: #39744b; /* A finished run with an unread response. Its own token, not the accent: the accent is the user's to pick, and must not make "done" read like "needs you" or "failed". */ --color-unread: #4f91dc; /* The user's own messages: a tint of the accent the user picked, with a hairline of it, so a question stands apart from the answers without shouting. -inset is for what sits inside the bubble (code blocks, reference chips) and has to read on any accent. */ --color-user-bubble: color-mix(in srgb, var(--color-accent-strong) 16%, var(--color-bg)); --color-user-bubble-border: color-mix(in srgb, var(--color-accent-strong) 30%, transparent); --color-user-bubble-inset: rgb(0 0 0 / 28%); --color-diff-added-bg: color-mix(in srgb, var(--color-success) 10%, transparent); --color-diff-removed-bg: color-mix(in srgb, var(--color-danger) 10%, transparent); /* Search hits and the line under a review comment. */ --color-highlight-bg: #e6e6e6; --color-highlight-fg: #202020; /* Context window layers (the ring around the send button). Categorical, so they stay apart from the status colours; the message being typed takes the user's accent. */ --color-context-instructions: #9a9a94; --color-context-tools: #9d95e8; --color-context-history: #3fb58e; --color-context-draft: var(--color-accent-strong); --color-context-reserve: #d9a441; --color-context-overhead: #6f6f6a; /* Shadow and backdrop alphas are written for the dark theme and scaled here. */ --shadow-scale: 1; --scrim-scale: 1; } :root[data-theme="light"] { color-scheme: light; --color-bg-sunken: #f3f3f3; --color-bg-inset: #f6f6f6; --color-bg: #ffffff; --color-surface: #fafafa; --color-surface-raised: #ffffff; --color-input-bg: #ffffff; --color-fill: #f0f0f0; --color-fill-hover: #e9e9e9; --color-fill-active: #e2e2e2; --color-fill-strong: #d9d9d9; --color-fill-stronger: #cccccc; --color-overlay-faint: rgb(0 0 0 / 2%); --color-overlay-hover: rgb(0 0 0 / 5%); --color-overlay-active: rgb(0 0 0 / 8%); --color-overlay-sunken: rgb(0 0 0 / 4%); --color-inverse: #1f1f1f; --color-inverse-hover: #000000; --color-inverse-active: #3a3a3a; --color-on-inverse: #ffffff; --color-text-strong: #0f0f0f; --color-text: #1f1f1f; --color-text-secondary: #3d3d3d; --color-text-muted: #505050; --color-text-subtle: #5c5c5c; --color-text-faint: #646464; --color-text-disabled: #a3a3a3; --color-border-subtle: #ededed; --color-border: #e0e0e0; --color-border-strong: #cfcfcf; --color-border-stronger: #b3b3b3; --color-border-translucent: rgb(0 0 0 / 10%); --color-accent: #1a64b8; --color-accent-strong: #2a78d0; --color-accent-text: #1b5aa0; --color-accent-bg: #eaf2fd; --color-accent-bg-hover: #dce9fa; --color-accent-bg-active: #cddff6; --color-accent-fill: #2a78d0; --color-on-accent: #ffffff; --color-danger: #d0392f; --color-danger-text: #b3261e; --color-danger-text-strong: #8f1a13; --color-danger-bg: #fdeceb; --color-danger-bg-hover: #fbdcd9; --color-danger-bg-active: #f6c7c2; --color-danger-border: #efb4ae; --color-danger-border-strong: #de8a82; --color-warning: #b57700; --color-warning-text: #8a5a00; --color-success: #1f8f4a; --color-success-text: #17703a; --color-success-border: #9ed4b0; --color-unread: #2a78d0; --color-user-bubble: color-mix(in srgb, var(--color-accent-strong) 13%, var(--color-bg)); --color-user-bubble-border: color-mix(in srgb, var(--color-accent-strong) 22%, transparent); --color-user-bubble-inset: rgb(255 255 255 / 60%); --color-highlight-bg: #ffe08a; --color-highlight-fg: #1f1f1f; --color-context-instructions: #7d7c76; --color-context-tools: #6a61d0; --color-context-history: #16876a; --color-context-reserve: #b57700; --color-context-overhead: #b4b2a9; --shadow-scale: 0.3; --scrim-scale: 0.55; } /* Accent colour (Settings → Accent color). js/theme.js puts data-accent on . Blue is the hand-tuned palette in the theme blocks above; every other accent takes one swatch per hue and derives the --color-accent-* tokens from it, so the two themes stay in step without a second table of values. The swatches are also what the Settings picker paints. */ :root { --accent-swatch-blue: #2a78d0; --accent-swatch-teal: #0b7d89; --accent-swatch-green: #178760; --accent-swatch-amber: #9e670d; --accent-swatch-orange: #bd5a07; --accent-swatch-pink: #cc3494; --accent-swatch-purple: #9b4fcf; --accent-swatch-indigo: #6b58f5; } :root[data-accent="teal"] { --accent-swatch: var(--accent-swatch-teal); } :root[data-accent="green"] { --accent-swatch: var(--accent-swatch-green); } :root[data-accent="amber"] { --accent-swatch: var(--accent-swatch-amber); } :root[data-accent="orange"] { --accent-swatch: var(--accent-swatch-orange); } :root[data-accent="pink"] { --accent-swatch: var(--accent-swatch-pink); } :root[data-accent="purple"] { --accent-swatch: var(--accent-swatch-purple); } :root[data-accent="indigo"] { --accent-swatch: var(--accent-swatch-indigo); } :root[data-accent]:not([data-accent="blue"]) { --color-accent: color-mix(in srgb, var(--accent-swatch) 60%, #ffffff); --color-accent-strong: color-mix(in srgb, var(--accent-swatch) 80%, #ffffff); --color-accent-text: color-mix(in srgb, var(--accent-swatch) 30%, #ffffff); --color-accent-bg: color-mix(in srgb, var(--accent-swatch) 14%, var(--color-bg)); --color-accent-bg-hover: color-mix(in srgb, var(--accent-swatch) 24%, var(--color-bg)); --color-accent-bg-active: color-mix(in srgb, var(--accent-swatch) 32%, var(--color-bg)); --color-accent-fill: color-mix(in srgb, var(--accent-swatch) 75%, #000000); } :root[data-theme="light"][data-accent]:not([data-accent="blue"]) { --color-accent: color-mix(in srgb, var(--accent-swatch) 82%, #000000); --color-accent-strong: var(--accent-swatch); --color-accent-text: color-mix(in srgb, var(--accent-swatch) 72%, #000000); --color-accent-bg: color-mix(in srgb, var(--accent-swatch) 9%, var(--color-bg)); --color-accent-bg-hover: color-mix(in srgb, var(--accent-swatch) 15%, var(--color-bg)); --color-accent-bg-active: color-mix(in srgb, var(--accent-swatch) 21%, var(--color-bg)); --color-accent-fill: var(--accent-swatch); } .app-loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; background: var(--color-bg-sunken); color: var(--color-text); } .app-loading-mark { display: block; width: 3rem; height: 3rem; } .app-loading-copy { display: grid; justify-items: center; gap: 0.35rem; } .app-loading-copy strong { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; } .app-loading-copy span { color: var(--color-text-subtle); font-size: 0.85rem; } .app-loading-track { width: min(15rem, 58vw); height: 0.2rem; overflow: hidden; border-radius: 1rem; background: var(--color-fill-active); } .app-loading-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--color-accent-strong); animation: app-loading-progress 1.4s ease-in-out infinite; } @keyframes app-loading-progress { 0% { transform: translateX(-110%); } 55% { transform: translateX(95%); } 100% { transform: translateX(245%); } } @media (prefers-reduced-motion: reduce) { .app-loading-track span { animation: none; } .app-loading-track span { width: 65%; } } body { margin: 0; min-width: 320px; min-height: 100vh; } .legacy-shell { display: none; } .workspace-shell { position: relative; display: grid; --sidebar-width: 18rem; --sidebar-track: var(--sidebar-width); /* The divider takes no column of its own: the sidebar's border is the resting line, and the grab strip overlaps both sides of it. */ --left-divider: 0px; grid-template-columns: var(--sidebar-track) var(--left-divider) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100vw; height: 100vh; overflow: hidden; background: var(--color-bg); } .workspace-resizer { grid-column: 2; grid-row: 1; position: relative; z-index: 5; justify-self: start; width: 9px; margin-left: -5px; cursor: col-resize; background: transparent; touch-action: none; outline: none; } /* The accent line waits a moment, so a pointer that only crosses the divider does not flash it. */ .workspace-resizer::after { content: ""; position: absolute; inset: 0 auto 0 3px; width: 2px; background: var(--color-accent-strong); opacity: 0; transition: opacity 120ms ease 0ms; } .workspace-resizer:hover::after { opacity: 1; transition-delay: 150ms; } .workspace-resizer:focus-visible::after, .workspace-shell.is-resizing .workspace-resizer::after { opacity: 1; transition-delay: 0ms; } .workspace-shell.is-resizing { cursor: col-resize; user-select: none; } /* A hidden sidebar leaves a strip at the window's edge; resting on it shows the divider to drag the sidebar back out. The longer delay keeps a pointer passing to the screen edge from lighting it. */ .workspace-shell.sidebar-collapsed { --sidebar-track: 0px; } .workspace-shell.sidebar-collapsed .workspace-sidebar { visibility: hidden; border-right-color: transparent; } .workspace-shell.sidebar-collapsed .workspace-resizer { width: 6px; margin-left: 0; } .workspace-shell.sidebar-collapsed .workspace-resizer::after { inset: 0 auto 0 0; } .workspace-shell.sidebar-collapsed .workspace-resizer:hover::after { transition-delay: 250ms; } .workspace-shell.sidebar-collapsed .sidebar-toggle-button { color: var(--color-text-subtle); } .workspace-shell.sidebar-animating { transition: grid-template-columns 150ms ease; } .workspace-shell.sidebar-animating .workspace-sidebar { transition: visibility 0s linear 150ms; } .workspace-shell.sidebar-animating:not(.sidebar-collapsed) .workspace-sidebar { transition: none; } @media (prefers-reduced-motion: reduce) { .workspace-shell.sidebar-animating { transition: none; } } .workspace-sidebar { grid-column: 1; grid-row: 1; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; padding: 0; background: var(--color-bg-sunken); } .workspace-sidebar { border-right: 1px solid var(--color-border-subtle); } .sidebar-projects { /* One column for whatever marks a row — an icon, a status dot — so the labels beside them all start at the same x. A dot is less than half an icon's width, and without a shared slot the text next to it simply started wherever the mark happened to end. */ --nav-mark: 1rem; /* Indent for rows nested under a selected project (chat list, directory group, child directory rows). Defined here once so the indent stays consistent across all three and can be tuned in a single place. */ --sidebar-row-indent: 1.1rem; min-height: 0; overflow-y: auto; padding: 0.45rem 1rem 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .empty-hint, .workspace-composer span { color: var(--color-text-faint); font-size: 0.8rem; } /* The dot keeps its size and is centred in the shared mark slot, rather than being stretched to fill it — a status dot that big would read as a badge. */ .project-nav-row > .workspace-nav-item > .status-dot { margin-inline: calc((var(--nav-mark) - 0.35rem - 2px) / 2); } /* Reads as an action, not as a project: muted until pointed at, so the list below it stays the thing the eye lands on first. */ .new-project-action { border-radius: 0.5rem; color: var(--color-text-faint); } .new-project-action:hover, .new-project-action:focus-visible { background: var(--color-fill-hover); } .new-project-action .app-icon { width: var(--nav-mark); height: var(--nav-mark); flex: none; } .workspace-nav-item { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.3rem 0.55rem; text-align: left; background: transparent; border-color: transparent; font-size: 0.9rem; line-height: 1.25; } .nav-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-nav-row.selected { background: var(--color-fill-hover); } .project-nav-row.dragging, .chat-nav-row.dragging { opacity: 0.5; } .project-nav-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem 1.6rem 1.6rem; align-items: center; column-gap: 0.12rem; border-radius: 0.5rem; } .project-nav-row .workspace-nav-item { grid-column: 1 / -1; grid-row: 1; min-width: 0; } /* Targeted by their own class, not sibling position: nth-of-type counted buttons among same-tag siblings, which silently shifted whenever the first sibling toggled between a