base.css

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* A class like .panel-empty { display: flex } outranks the UA [hidden] rule,
   so el.hidden = true silently fails to hide it. Force it. */
[hidden] {
  display: none !important;
}
/* Selected text must stay readable in every theme *and* while the window is
   unfocused. Leaving ::selection to the UA does not achieve that: Chromium's
   inactive-selection fallback paints a flat light grey and keeps the text's own
   colour, so dark-theme --text-primary all but disappears behind the highlight
   the moment focus moves elsewhere. An author ::selection is used for both the
   active and inactive state, so declaring one fixes the unfocused case too.
   The pair is neutral, not accent-derived — see the tokens for why (#1423). */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
html,
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background: var(--bg-base);
  /* Desktop-app chrome (tabs, sidebars, footers) should not highlight on drag. */
  user-select: none;
  -webkit-user-select: none;
}
/* Theme every scroll container's scrollbar to match the surface (inherited by
   all descendants). --border tracks the active theme, so light and dark stay
   in sync without per-scroller rules. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Default link treatment. The UA blue/purple pair is illegible on the dark
   surfaces and clashes with the accent; give every theme a link tier with
   comfortable contrast. Component-specific link classes still win on
   specificity. */
a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
/* Regions where copying text is intentional: text the user authors (inputs) and
   agent/tool *content* — rendered markdown answers, reasoning, tool output, and
   the terminal. Pure chrome (permission prompts, dialogs, labels) stays
   non-selectable so drag-selecting content doesn't sweep up UI text. */
input,
textarea,
select,
[contenteditable='true'],
.message-text,
.message-reasoning-text,
.tool-result,
.tool-args pre,
.attachment-preview-text,
.hook-test-stream pre,
.hook-card-raw-pre,
.terminal-container,
.agent-task-output-panel,
.monaco-editor .view-lines {
  user-select: text;
  -webkit-user-select: text;
}

/* Keep native password semantics and request Chromium's filled-circle mask
   instead of exposing the inherited font's literal period glyph. */
input[type='password'] {
  -webkit-text-security: disc;
}
/* Monaco gutter chrome stays non-selectable even inside editors */
.monaco-editor .margin,
.monaco-editor .line-numbers {
  user-select: none;
  -webkit-user-select: none;
}
.split-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Callout surfaces, shared by every block that used to carry an accent rail.

   Two materials, one shape (see `prototypes/side-highlight` — "M, the mix"):

   - **plate** — a flat 9% wash of the block's severity hue. Prose the agent
     wrote: GitHub alerts and blockquotes. It is part of the answer, so it gets
     a plain surface.
   - **hatch** — the same plate rendered as a texture rather than a tint. Copse
     annotating its own turn: thinking, review, comparison. Not part of the
     answer, and the material is what says so without spending a fourth hue or
     a fourth shape. The low-opacity texture keeps the surface quiet even
     when the commentary spans several lines.

   Components select their material and mix `--sev` at the use site, sharing
   the tuning values below rather than inheriting a finished background.

   The 8px pitch is a visual choice, not an anti-aliasing guarantee. At 135deg
   the horizontal repeat is 8 * sqrt(2) CSS pixels, so divisibility by four
   does not align the stripes with the device pixel grid. Recheck fractional
   display scales and zoom when changing the pitch or line width. */
:root {
  /* Neutral default: a block that forgets to set --sev gets a legible grey
     rather than an invalid background that computes away to transparent. */
  --sev: var(--text-secondary);
  /* What travels is the tuning, not the finished background. A custom property
     is substituted where it is *declared*, so one holding the whole
     `color-mix(… var(--sev) …)` would freeze this root's grey into its computed
     value and inherit that grey everywhere, however each block sets --sev. So
     the numbers live here and the colour is mixed at each use site. */
  --callout-plate-fill: 9%;
  --callout-hatch-line: 11%;
  --callout-hatch-fill: 3%;
  --callout-hatch-pitch: 8px;
}
/* A decorative texture needs a degradation path, or it becomes the thing that
   disappears into the page for the people who need it most. The lines go to
   nothing and the wash comes up to the plate's weight: commentary keeps a
   surface and loses only its distinction from content. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --callout-hatch-line: 0%;
    --callout-hatch-fill: var(--callout-plate-fill);
  }
}