:root { --bg: #f8f9fb; --panel: #eef1f5; --line: #d9dee6; --fg: #1c2230; --muted: #555e72; --faint: #6b7385; --accent: #2f55cc; --tool: #0f6e66; --err: #b3261e; --raise: #ffffff; /* the one surface that sits above the page: the composer, dialogs */ --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --bg-soft: var(--panel); --mono: ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, monospace; --sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif; /* Radius is a small, deliberate scale. Components use these semantic tokens instead of accumulating one-off values, so nested surfaces keep their hierarchy at every viewport. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-bubble: 18px; --r-composer: 24px; --r-pill: 999px; --fs-small: .875rem; /* One type scale, in rem, so the browser's own font-size setting still applies. Nothing below 0.8125rem/13px: that was the floor the old 10-11px metadata kept falling through. */ --fs-meta: .8125rem; /* timestamps, counts, badges */ --fs-ui: .9375rem; /* controls, labels, list rows */ --fs-body: 1.0625rem; /* the transcript itself */ /* Minimum hit target. Every interactive element is at least this tall, which is what drives the bar height and the row padding rather than the reverse. */ --tap: 2.25rem; --bar: 3rem; --measure: 46rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14171d; --panel: #1b1f27; --line: #2f3542; --fg: #e6e9ef; --muted: #a3abbb; --faint: #8b93a3; --accent: #8ea6ff; --tool: #5fd4c4; --err: #f4a19a; --raise: #20252f; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } /* The two panes below the header, previously body's own direct children and row-flexed themselves. Split out so header can run the full page width as one top bar instead of being confined to the main column beside it. */ #shell { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* The one top bar, full page width, above both panes. Centered on the row's own cross axis -- the same rule at every width, which is what keeps menu, title, status and settings sitting on one clean line whether the header is 512px or 1514px wide. This only reads as clean because #status below is pinned to a single line: two mismatched buttons and two lines of status text fighting over "centered" is what baseline alignment used to paper over, one font's metrics at a time, instead of removing the actual cause. */ header { height: var(--bar); flex-shrink: 0; padding: 0 .875rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line); } header h1 { font-size: 1rem; margin: 0 .25rem 0 0; font-weight: 650; flex-shrink: 0; letter-spacing: -.01em; } header button { border-color: transparent; background: none; color: var(--muted); } header button:hover { background: var(--panel); border-color: transparent; color: var(--fg); } header button.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; } header button.active:hover { background: var(--accent-soft); } header .grow { flex: 1; } /* #status is a long, dynamic string -- model id plus a tool count -- that fits fine on a wide header and does not on a narrow one. Flex items don't shrink past their own content width by default (min-width:auto), so without help here it wraps to a second line instead: the header grows past its own fixed height, and every other child's baseline alignment goes with it -- which is what made the whole bar look wrong, not just this one span. One line, truncated, is what a status string is for anyway; the model and tool count are both one click away in settings if cut off. */ #status { font-size: var(--fs-meta); color: var(--muted); font-family: var(--mono); min-width: 3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* One focus ring for everything, drawn outside the element so a dense row does not clip it. Keyboard only -- the mouse never sees it. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } button { font: inherit; font-size: var(--fs-ui); line-height: 1.2; min-height: var(--tap); padding: .375rem .75rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--raise); color: var(--fg); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } button:hover { border-color: var(--faint); } button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 550; } button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: transparent; } button:disabled { opacity: .55; cursor: default; } input, textarea, select { font: inherit; font-size: var(--fs-ui); width: 100%; min-height: var(--tap); padding: .375rem .625rem; color: var(--fg); background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-sm); resize: vertical; transition: border-color .12s, box-shadow .12s; } input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); cursor: pointer; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea#systemPrompt, textarea#mcpText { font-family: var(--mono); font-size: var(--fs-ui); } label { font-size: var(--fs-ui); color: var(--muted); display: block; margin-bottom: .25rem; } /* history sidebar -- scoped to #side, not the bare tag: the right rail and the outline minimap are