/* GENERATED by demo/desktop/sync.sh from Eaon Desktop's renderer stylesheets.
   Do not edit by hand: change Desktop, then re-run the script. */

/* ---- tokens.css ---- */
/*
 * Design tokens.
 *
 * Colour is driven by four user-editable values per theme — accent, background,
 * foreground and contrast — exactly as the Appearance settings page exposes them.
 * Every surface in the app is mixed from those, so changing the background or
 * dragging the contrast slider re-tones the whole UI coherently.
 */

:root {
  /* ---- Metrics (measured from the design frames) ---- */
  --sidebar-w: 252px;
  /* The sidebar floats as a rounded panel; this is the gutter around it. */
  --sidebar-gap: 8px;
  --r-panel: 14px;
  /* Space the native window controls occupy over the page, per edge. Every
     draggable header derives its padding from these rather than hardcoding a
     number — moving the controls once left four rules 7px too tight.

     macOS puts its traffic lights top-LEFT: they start at
     trafficLightPosition.x (20) and are three 12pt buttons 20pt apart, ending
     at 72, plus 10px of breathing room. Nothing is reserved on the right.
     Windows overrides these below — its caption buttons are on the other side. */
  --window-controls-left: 82px;
  --window-controls-right: 0px;
  --titlebar-h: 36px;
  --nav-row-h: 27px;
  --composer-w: 552px;
  --composer-chat-w: 640px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-composer: 18px;
  --r-pill: 999px;

  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-xxs: 11px;
  --fs-title: 28px;
  --fs-h1: 30px;
  --fs-h2: 15px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 160ms;

  /* ---- Motion ----
     Three tiers. Enters are springs; the bigger the thing that moves, the
     slower the tier. Only the largest tier carries any bounce — short travel
     lands exactly, with no overshoot to distract from what actually changed.
     Exits are plain tweens one tier quicker, so a dismissal reads as crisp and
     final rather than replaying the entrance backwards.
     Motion is information here, never decoration. */
  --spring-fast: linear(0.0000, 0.0180, 0.0632, 0.1250, 0.1957, 0.2700, 0.3441, 0.4157, 0.4831, 0.5455, 0.6024, 0.6537, 0.6996, 0.7404, 0.7763, 0.8077, 0.8352, 0.8591, 0.8797, 0.8976, 0.9129, 0.9261, 0.9373, 0.9469, 0.9551, 0.9621, 0.9681, 0.9731, 0.9773, 0.9809, 0.9840, 0.9866, 1.0000);
  --spring-moderate: linear(0.0000, 0.0180, 0.0632, 0.1250, 0.1957, 0.2700, 0.3441, 0.4157, 0.4831, 0.5455, 0.6024, 0.6537, 0.6996, 0.7404, 0.7763, 0.8077, 0.8352, 0.8591, 0.8797, 0.8976, 0.9129, 0.9261, 0.9373, 0.9469, 0.9551, 0.9621, 0.9681, 0.9731, 0.9773, 0.9809, 0.9840, 0.9866, 1.0000);
  --spring-slow: linear(0.0000, 0.0233, 0.0813, 0.1601, 0.2491, 0.3412, 0.4312, 0.5160, 0.5936, 0.6630, 0.7239, 0.7765, 0.8213, 0.8589, 0.8901, 0.9157, 0.9364, 0.9530, 0.9661, 0.9763, 0.9841, 0.9900, 0.9944, 0.9975, 0.9998, 1.0012, 1.0022, 1.0027, 1.0029, 1.0030, 1.0028, 1.0026, 1.0000);
  --dur-spring-fast: 80ms;
  --dur-spring: 160ms;
  --dur-spring-slow: 240ms;
  /* Exits: quicker, no bounce. */
  --exit-fast: 60ms;
  --exit-moderate: 120ms;
  --exit-slow: 160ms;
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* Cascade delay between siblings in a staggered reveal. */
  --stagger: 26ms;

  --shadow-menu: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 10px 32px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.4);

  /* These were once a fixed warm tone (#d97757) held deliberately apart from
     the app's accent to match a reference design. That read as a bug in
     practice: primary buttons, provider toggles, radio dots and usage bars
     came out salmon in an otherwise blue app, and they ignored the accent the
     user picked in Appearance. They now derive from --accent like every other
     accented token, so the whole app re-tones together.

     Kept as their own names rather than inlined at the ~16 call sites: the
     grouping still marks which surfaces these are, and makes diverging again a
     one-line change. The mixes match `.btn--accent`'s hover convention in
     controls.css so the two stay visually identical. */
  --provider-accent: var(--accent);
  --provider-accent-strong: color-mix(in srgb, var(--accent), #000 12%);
  --provider-accent-soft: color-mix(in srgb, var(--accent), transparent 86%);
}

/* ---------- Dark (default) ---------- */
:root,
[data-theme='dark'] {
  --bg: #111111;
  --fg: #fcfcfc;
  --accent: #0169cc;
  --contrast: 60;

  /* Positive lift = lighter than the canvas. */
  --lift-color: #ffffff;
  --sink-color: #000000;
  --u: calc(var(--contrast) * 0.055%);

  --canvas: color-mix(in srgb, var(--bg), var(--sink-color) 22%);
  --sidebar: var(--bg);
  --surface-1: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.6));
  --surface-2: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 2.6));
  --surface-3: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 4.2));
  --surface-4: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 6));
  --sunken: color-mix(in srgb, var(--bg), var(--sink-color) 34%);

  --hover: rgba(255, 255, 255, 0.055);
  --hover-strong: rgba(255, 255, 255, 0.09);
  --active: rgba(255, 255, 255, 0.13);

  --border: color-mix(in srgb, var(--bg), var(--lift-color) 8%);
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Translucent so `.menu`'s backdrop-filter has something to frost. */
  --menu-bg: color-mix(in srgb, var(--surface-3), transparent 24%);

  --text: var(--fg);
  --text-2: color-mix(in srgb, var(--fg), var(--bg) 38%);
  --text-3: color-mix(in srgb, var(--fg), var(--bg) 58%);
  --text-4: color-mix(in srgb, var(--fg), var(--bg) 72%);

  --toggle-on: var(--accent);
  --toggle-off: #3a3a3c;
  --toggle-knob: #ffffff;
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.14);
  /* Lifted off the accent so links stay legible against a dark canvas. */
  --link: color-mix(in srgb, var(--accent), #ffffff 26%);
  --send-bg: #b4b4b4;
  --send-fg: #1a1a1a;
  --focus-ring: color-mix(in srgb, var(--accent), transparent 10%);
  --scrollbar: rgba(255, 255, 255, 0.16);
  --code-bg: #0d0d0d;
  /* Diff green/red are fixed hues rather than accent mixes: added and removed
     have to stay green and red whatever accent the theme picks, or the diff
     stops being readable at a glance. Backgrounds are kept faint so a run of
     changed lines does not out-shout the code sitting on them. */
  --diff-add-fg: #3fb950;
  --diff-add-bg: rgba(63, 185, 80, 0.11);
  --diff-del-fg: #f85149;
  --diff-del-bg: rgba(248, 81, 73, 0.11);
  color-scheme: dark;
}

/* ---------- Light ---------- */
[data-theme='light'] {
  --bg: #ffffff;
  --fg: #1a1c1f;
  --accent: #339cff;
  --contrast: 45;

  --lift-color: #000000;
  --sink-color: #000000;
  --u: calc(var(--contrast) * 0.055%);

  --canvas: var(--bg);
  --sidebar: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.1));
  --surface-1: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.5));
  --surface-2: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 2.4));
  --surface-3: #ffffff;
  --surface-4: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.2));
  --sunken: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.8));

  --hover: rgba(0, 0, 0, 0.045);
  --hover-strong: rgba(0, 0, 0, 0.07);
  --active: rgba(0, 0, 0, 0.1);

  --border: rgba(0, 0, 0, 0.1);
  --border-soft: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.16);

  --menu-bg: color-mix(in srgb, var(--surface-3), transparent 18%);

  --text: var(--fg);
  --text-2: color-mix(in srgb, var(--fg), var(--bg) 34%);
  --text-3: color-mix(in srgb, var(--fg), var(--bg) 52%);
  --text-4: color-mix(in srgb, var(--fg), var(--bg) 66%);

  --toggle-on: var(--accent);
  --toggle-off: #d8d8dc;
  --toggle-knob: #ffffff;
  --danger: #e5342a;
  --danger-soft: rgba(229, 52, 42, 0.1);
  --link: color-mix(in srgb, var(--accent), #000000 18%);
  --send-bg: #1a1a1a;
  --send-fg: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent), transparent 10%);
  --scrollbar: rgba(0, 0, 0, 0.2);
  --code-bg: #f6f6f6;
  /* Darker inks than the dark theme's: the same greens and reds wash out to
     pastel against white and stop reading as added/removed. */
  --diff-add-fg: #1a7f37;
  --diff-add-bg: rgba(26, 127, 55, 0.1);
  --diff-del-fg: #cf222e;
  --diff-del-bg: rgba(207, 34, 46, 0.09);
  --shadow-menu: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 10px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.22), 0 2px 12px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

/* ---------- Windows ---------- */

/* The Window Controls Overlay draws minimise/maximise/close over the page at
   the top RIGHT, so the reservation flips sides: nothing is needed on the left
   (the sidebar panel starts at the window edge), and the main header has to
   keep its own buttons clear of the caption strip. 138px is the three 46px
   buttons Windows draws at 100% scale. */
body[data-platform='win32'] {
  --window-controls-left: 0px;
  --window-controls-right: 138px;
}

/* ---- app.css ---- */
/* Reset, application shell, title bar and sidebar. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  /* The window's one and only background. `.sidebar`, `.main` and `.settings`
     used to paint their own, which meant any difference between them showed up
     as a seam down the edge of the sidebar — exactly what the translucent state
     produced, since the gutter mixed in vibrancy and `.main` did not. Painting
     it once here makes a seam impossible, and vibrancy still shows through at
     the same 18% because this element is the bottom of the rendered frame. */
  background: var(--canvas);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-translucent='on'] {
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
}

body[data-font-smoothing='off'] {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body[data-pointer='on'] button,
body[data-pointer='on'] [role='button'],
body[data-pointer='on'] a,
body[data-pointer='on'] label {
  cursor: pointer;
}

body[data-reduce-motion='on'] *,
body[data-reduce-motion='on'] *::before,
body[data-reduce-motion='on'] *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

::selection {
  background: color-mix(in srgb, var(--accent), transparent 55%);
}

/* ---- Scrollbars: only visible while the area is hovered ---- */
.scroll {
  overflow-y: auto;
}
.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.scroll:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  background-clip: padding-box;
}
.scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- Shell ---------------- */

.app {
  display: flex;
  height: 100%;
  /* Transparent: `body` paints the window. */
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Just the gutter around the floating panel — `body` paints it. */
  padding: var(--sidebar-gap);
  user-select: none;
  overflow: hidden;
  transition: flex-basis 240ms var(--ease), width 240ms var(--ease), padding 240ms var(--ease);
}


.sidebar__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* A raised surface rather than `--sidebar`: that token is tuned for a panel
     sitting flush at `--bg`, which in the dark theme is only three values off
     `--canvas` and left the curve almost invisible. `--surface-1` is the
     token that already means "one step above the canvas". */
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  /* Rounded corners only clip children that are actually painted inside; the
     menus anchored in here portal to the body, so nothing gets cut off. */
  overflow: hidden;
}


/* Collapse — the sidebar's own width eases to zero (an accordion on the
   horizontal axis) while its content slides and fades out in the same
   direction it's collapsing, rather than just clipping abruptly. */
.sidebar[data-open='false'] {
  flex-basis: 0;
  width: 0;
  min-width: 0;
  padding: 0;
}

.sidebar__content {
  width: calc(var(--sidebar-w) - var(--sidebar-gap) * 2);
  min-width: calc(var(--sidebar-w) - var(--sidebar-gap) * 2);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 160ms var(--ease), transform 240ms var(--ease);
}

.sidebar[data-open='false'] .sidebar__content {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.drag {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}

/* ---------------- Title bar ---------------- */

.titlebar {
  height: var(--titlebar-h);
  flex: 0 0 var(--titlebar-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 75px;
  -webkit-app-region: drag;
}

/* Inside the floating panel the traffic lights sit at window x 20..72 (three
   12pt buttons, 20pt apart, from trafficLightPosition). The row itself starts
   --sidebar-gap in from the window edge, so reserving 82px of window space
   leaves the same 10px breathing room the flush titlebar had. Controls are
   right-aligned so they sit at the far edge of the panel rather than crowding
   the lights. */
.sidebar__panel .titlebar {
  justify-content: flex-end;
  /* max() so this collapses to a plain 8px on Windows, where the left
     reservation is zero and the controls live on the other side. */
  padding: 0 8px 0 max(8px, calc(var(--window-controls-left) - var(--sidebar-gap)));
}

.titlebar--collapsed {
  padding-left: max(14px, var(--window-controls-left));
  padding-right: calc(10px + var(--window-controls-right));
}

.titlebar--main {
  padding: 0 12px 0 14px;
  justify-content: space-between;
}

.icon-btn {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  flex: none;
  -webkit-app-region: no-drag;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.icon-btn:disabled {
  color: var(--text-4);
  opacity: 0.5;
}
.icon-btn[data-active='true'] {
  background: var(--hover-strong);
  color: var(--text);
}

/* ---------------- Sidebar header ---------------- */



/* ---------------- Sidebar body ---------------- */

.sidebar__body {
  flex: 1;
  min-height: 0;
  padding: 0 7px;
  overflow-y: auto;
}

/* Chat ⇄ Work, in the window's top bar.
   Sits in a sunken track so the raised option reads as the selected one without
   needing an accent fill, which would fight the accent already spent on primary
   actions. The header is a drag region, so the buttons opt back out of it or
   they would move the window instead of switching mode. */
.mode-switch {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  -webkit-app-region: no-drag;
}
.mode-switch__option {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: calc(var(--r-lg) - 4px);
  color: var(--text-2);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mode-switch__option:hover {
  color: var(--text);
}
.mode-switch__option[data-active] {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.mode-switch__option svg {
  flex: none;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.mode-switch__option[data-active] svg {
  color: var(--text);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: var(--nav-row-h);
  padding: 0 8px 0 6px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.nav-item:hover {
  background: var(--hover);
}
.nav-item[data-active='true'] {
  background: var(--surface-2);
}
.nav-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-2);
  width: 16px;
}
.nav-item[data-active='true'] .nav-item__icon {
  color: var(--text);
}
.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item__trail {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-3);
  opacity: 0;
}
.nav-item:hover .nav-item__trail,
.nav-item__trail[data-always='true'] {
  opacity: 1;
}

.sidebar__section {
  padding: 0 8px;
  margin: 18px 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: -0.005em;
}

.sidebar__empty {
  padding: 0 8px;
  height: var(--nav-row-h);
  display: flex;
  align-items: center;
  font-size: var(--fs-base);
  color: var(--text-4);
}

.sidebar__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 8px 10px 7px;
}
/* Eaon Work keeps Settings out of the scrollable nav list (see
   .eaonbrain/eaon-work-mode.md) and pins it in the footer instead, next to
   Help — that needs the two ends pushed apart rather than flush right. */
.sidebar__footer[data-split='true'] {
  justify-content: space-between;
}
.footer-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  transition: background var(--dur) var(--ease);
}
.footer-item:hover {
  background: var(--hover);
}

/* Leading window-controls cluster shown when the sidebar is hidden; always
   rendered inline inside the screen's own draggable header row, never as a
   second overlapping drag region. */
.collapsed-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  margin-right: 6px;
}

.spinner {
  animation: spin 900ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Text that shimmers while the model is working. */
.shimmer {
  background: linear-gradient(90deg, var(--text-4) 20%, var(--text) 45%, var(--text-4) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -40% 0;
  }
}

/* ---- Staggered list entrance ------------------------------------
   Chat rows cascade in when the list is rebuilt (switching workspace,
   loading history) so the order is readable instead of everything
   appearing at once. Keyed rows are reused across re-renders, so this
   plays on mount only — not on every streamed token. */
.nav-item--staggered {
  animation: nav-row-in var(--dur-spring-fast) var(--spring-fast) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

/* ---------------- Sidebar density ---------------- */

/* The reference sidebar runs a step smaller than the app's base scale — the
   nav is a dense index, not body copy. Scoped to `.sidebar` so the settings
   navigation, which reuses `.nav-item`, keeps the base size. */
.sidebar .nav-item {
  font-size: var(--fs-sm);
}
.sidebar .sidebar__section {
  font-size: var(--fs-xs);
}
.sidebar .sidebar__empty {
  font-size: var(--fs-xs);
}

/* ---- chat.css ---- */
/* Home hero, composer, tray and the conversation view. */

.home {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 0;
}

.home__title {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 30px;
  text-align: center;
}
.home__icon {
  color: var(--text-3);
  margin-bottom: 18px;
}

/* Eaon Work's suggestion cards (see .eaonbrain/eaon-work-mode.md) — wired to
   settings.general.suggestedPrompts, which existed but was unused before. */
.suggestions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: var(--composer-w);
  max-width: calc(100% - 48px);
  margin: 0 0 20px;
}
.suggestion-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  min-height: 104px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.suggestion-card:hover {
  background: var(--surface-2);
}
.suggestion-card__label {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-2);
  white-space: pre-line;
}

/* ---------------- Composer ---------------- */

.composer-stack {
  width: var(--composer-w);
  max-width: calc(100% - 48px);
  position: relative;
}

.composer-stack--chat {
  width: var(--composer-chat-w);
}

/* Eaon Work's project-folder picker, stacked above .composer the same way
   .tray stacks below it — negative margin equal to the padding tucks the
   shared edge behind the composer's rounded corner (z-index 2 > 1). */
.project-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 0 -18px;
  padding: 0 16px 18px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
}
.project-bar__pick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  transition: color var(--dur) var(--ease);
}
.project-bar__pick:hover {
  color: var(--text);
}
.project-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-bar__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.project-bar__status:hover {
  background: var(--hover-strong);
  color: var(--text-2);
}
.project-bar__status[data-error='true'] {
  color: var(--danger);
}

.composer {
  position: relative;
  z-index: 2;
  background: var(--surface-2);
  border-radius: var(--r-composer);
  padding: 0 5px 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.composer:focus-within {
  box-shadow: 0 0 0 1px var(--border-strong);
}

.composer__input {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  outline: none;
  padding: 13px 11px 8px;
  min-height: 46px;
  max-height: 320px;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  overflow-y: auto;
  scrollbar-width: none;
}
.composer__input::placeholder {
  color: var(--text-3);
}
.composer__input::-webkit-scrollbar {
  display: none;
}

.composer__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  flex: none;
}
.composer__spacer {
  flex: 1;
}

.composer__round {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.composer__round:hover,
.composer__round[data-open='true'] {
  background: var(--surface-4);
  color: var(--text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover,
.chip[data-open='true'] {
  background: var(--surface-4);
  color: var(--text);
}
.chip__icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex: none;
}
.chip--model {
  gap: 7px;
  padding-right: 8px;
  /* Model ids are unbounded ("nemotron 3 super 120b extended"), and with
     `white-space: nowrap` on .chip an unbounded one pushed the whole toolbar
     out of shape. Cap the chip and let the name ellipsize; the effort label
     stays fixed so it is the name that gives way, not the setting. */
  min-width: 0;
  max-width: 220px;
}
.chip--model .chip__model {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip--model .chip__effort {
  color: var(--text-2);
  flex: none;
}

.send {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--send-bg);
  color: var(--send-fg);
  display: grid;
  place-items: center;
  flex: none;
  margin-left: 2px;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.send:disabled {
  opacity: 0.45;
}
.send:not(:disabled):hover {
  background: color-mix(in srgb, var(--send-bg), var(--lift-color) 25%);
}
.send:not(:disabled):active {
  transform: scale(0.94);
}
.send--stop {
  background: var(--fg);
  color: var(--bg);
}

/* ---------------- Tray tucked under the composer ---------------- */

.tray {
  position: relative;
  z-index: 1;
  margin: -18px 11px 0;
  height: 51px;
  padding: 18px 12px 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tray__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tray__btn:hover,
.tray__btn[data-open='true'] {
  background: var(--hover-strong);
  color: var(--text);
}
.tray__spacer {
  flex: 1;
}

.plugin-stack {
  display: flex;
  align-items: center;
}
.plugin-stack > * {
  margin-right: -3px;
  border-radius: 4px;
}
.plugin-stack > *:last-child {
  margin-right: 0;
}

/* ---------------- Conversation ---------------- */

.chat-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  /* Keep this row's own buttons out from under the Windows caption
     buttons, which are drawn over the page at the top right. Zero on
     macOS, where the traffic lights are on the other side. */
  padding-right: calc(12px + var(--window-controls-right));
  -webkit-app-region: drag;
  /* Offset by the sidebar gutter so this row lands on the same baseline as the
     floating panel's titlebar (and the traffic lights) rather than sitting 8px
     higher against the window edge. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding-top: var(--sidebar-gap);
}
.chat-header[data-collapsed='true'] {
  padding-left: max(16px, calc(var(--window-controls-left) + 3px));
}
.chat-header__title {
  font-size: var(--fs-base);
  color: var(--text);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header__spacer {
  flex: 1;
}
.chat-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  -webkit-app-region: no-drag;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 12px;
}

.thread__inner {
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.msg--user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--surface-2);
  border-radius: 18px;
  padding: 8px 15px;
  font-size: var(--fs-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--assistant {
  align-self: stretch;
  font-size: var(--fs-base);
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg__reasoning {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

.msg__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-sm);
}

.msg__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-base);
}

.composer-dock {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 8px 0 13px;
}

.msg__actions {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.msg-row:hover .msg__actions {
  opacity: 1;
}

/* The composer sheds its labels when it gets narrow (e.g. browser panel open). */
.composer-stack {
  container-type: inline-size;
}
@container (max-width: 430px) {
  .chip__label,
  .chip--model .chip__effort {
    display: none;
  }
  .chip {
    padding: 0 6px;
  }
  .tray__btn {
    padding: 0 6px;
  }
}

/* ==================================================================
   Motion: thinking orb, thinking steps, message entrances.
   Every animation here reports state — what is running, what arrived,
   in what order. All of it collapses to nothing under reduce-motion
   via the global rule in app.css.
   ================================================================== */

/* ---- Thinking steps -------------------------------------------- */

.thinking {
  align-self: stretch;
  margin-bottom: 4px;
}

.thinking__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 8px 0 6px;
  margin-left: -6px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.thinking__summary:hover {
  background: var(--hover);
  color: var(--text);
}

.thinking__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  flex: none;
}

.thinking__chevron {
  color: var(--text-3);
  transition: transform var(--dur-spring-fast) var(--spring-fast);
}
.thinking__chevron[data-open='true'] {
  transform: rotate(90deg);
}

/* Height animates via grid-template-rows, which unlike max-age hacks lands on
   the content's real height with no magic numbers and no clipping. */
.thinking__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-spring-slow) var(--spring-slow);
}
.thinking__body[data-open='true'] {
  grid-template-rows: 1fr;
}
.thinking__list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.thinking__body[data-open='true'] .thinking__list {
  padding: 6px 0 2px;
}

.thinking__step {
  display: flex;
  gap: 10px;
  padding: 0 0 2px;
  /* Cascade: each step arrives just after the one above it, so the order the
     work happened in is legible at a glance. */
  animation: step-in var(--dur-spring-slow) var(--spring-slow) backwards;
  animation-delay: calc(var(--i) * var(--stagger));
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.thinking__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 12px;
  padding-top: 5px;
}
.thinking__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-4);
  flex: none;
  transition: background var(--dur) var(--ease), transform var(--dur-spring-fast) var(--spring-fast);
}
.thinking__step[data-active='true'] .thinking__bullet {
  background: var(--provider-accent);
  transform: scale(1.35);
}
.thinking__connector {
  flex: 1;
  width: 1.5px;
  margin: 4px 0 0;
  border-radius: 1px;
  background: var(--border);
  min-height: 10px;
}

.thinking__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-bottom: 8px;
}
.thinking__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.thinking__label code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--surface-2);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  color: var(--text);
}
.thinking__detail {
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Message entrances ------------------------------------------ */

/* New turns rise into place so it's obvious where content appeared, rather
   than it materialising and leaving the eye to hunt for it. */
.msg-row {
  animation: msg-in var(--dur-spring) var(--spring-moderate) backwards;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* The user's own message comes from the composer, so it enters from lower and
   slightly scaled — the direction it physically travelled. */
.msg--user {
  animation: user-msg-in var(--dur-spring-fast) var(--spring-fast) backwards;
}
@keyframes user-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

/* ---- Send / stop morph ------------------------------------------ */

.send svg {
  animation: send-icon-in var(--dur-spring-fast) var(--spring-fast);
}
@keyframes send-icon-in {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
  }
}

/* ---- Streaming caret --------------------------------------------
   A caret on the last line while tokens are still arriving, so a slow
   or paused stream is distinguishable from a finished one. */
/* On the last paragraph rather than the message: the reply is a stack of
   blocks now, so a caret on the container sat alone under the final code block
   or tool call instead of trailing the sentence being written. It is suppressed
   entirely when the reply currently ends in something other than prose, where
   there is no line for it to trail. */
.msg--assistant[data-streaming='true'] > .md__p:last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--provider-accent);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

/* Each block resolves through a soft blur as it arrives. Only while streaming,
   and only on mount — a block already on screen keeps its identity as its text
   grows, so this plays once per block rather than on every token. Reopening a
   finished chat replays nothing. */
.msg--assistant[data-streaming='true'] > * {
  animation: block-resolve 280ms var(--spring-moderate) both;
}
@keyframes block-resolve {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg--assistant[data-streaming='true'] > * {
    animation: none;
  }
}
@keyframes caret-blink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
}

/* ---- agent.css ---- */
/*
 * Agent transcript: Markdown, code, diffs and tool calls.
 *
 * Everything here mixes from the same four theme values as the rest of the app
 * (see tokens.css), so a coding turn re-tones with the picked theme instead of
 * being a hard-coded dark slab in the middle of a light window. Motion follows
 * the house rule — springs on enter, quicker plain tweens on exit, and only
 * where the movement carries information.
 */

/* ---------- Markdown ---------- */

.md__p {
  margin: 0 0 10px;
}
.md__p:last-child {
  margin-bottom: 0;
}
.md__heading {
  margin: 16px 0 8px;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.35;
}
.md__heading:first-child {
  margin-top: 0;
}
.md__list {
  margin: 0 0 10px;
  padding-left: 22px;
}
.md__list li {
  margin: 3px 0;
}
.md__list li::marker {
  color: var(--text-3);
}
.md__quote {
  margin: 0 0 10px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-2);
}
.md__rule {
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.md__code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--sunken);
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.92em;
  /* Long identifiers must not push the bubble wider than the column. */
  overflow-wrap: anywhere;
}

/* ---------- Code block ---------- */

.code-block {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--sunken);
  overflow: hidden;
}
.code-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.code-block__lang {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.code-block__copy {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: var(--fs-xxs);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.code-block__copy:hover {
  background: var(--hover);
  color: var(--text);
}
.code-block__body {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  /* Wrapping code silently changes what it says, so it scrolls instead. */
  white-space: pre;
  tab-size: 2;
}

/* ---------- Diff ---------- */

.diff {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--sunken);
  overflow: hidden;
}
.diff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xxs);
}
.diff__file {
  font-family: var(--font-mono);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.diff__stat {
  display: flex;
  flex: none;
  gap: 8px;
  font-family: var(--font-mono);
}
.diff__stat-add {
  color: var(--diff-add-fg);
}
.diff__stat-del {
  color: var(--diff-del-fg);
}
.diff__body {
  max-height: 340px;
  overflow: auto;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.diff__row {
  display: flex;
  gap: 8px;
  padding: 0 10px;
  white-space: pre;
}
.diff__row[data-kind='add'] {
  background: var(--diff-add-bg);
}
.diff__row[data-kind='del'] {
  background: var(--diff-del-bg);
}
.diff__marker {
  flex: none;
  width: 8px;
  color: var(--text-3);
  user-select: none;
}
.diff__row[data-kind='add'] .diff__marker {
  color: var(--diff-add-fg);
}
.diff__row[data-kind='del'] .diff__marker {
  color: var(--diff-del-fg);
}
.diff__text {
  min-width: 0;
}

/* ---------- Tool call ---------- */

.tool {
  margin: 0 0 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow: hidden;
  /* Enters on a spring; a tool call appearing is information (the agent just
     did something), so it gets movement rather than a plain fade. */
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}
@keyframes tool-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.tool__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px 0 10px;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.tool__head:hover {
  background: var(--hover);
}
.tool__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.tool[data-status='error'] .tool__glyph,
.tool[data-status='denied'] .tool__glyph {
  color: var(--danger);
}
.tool__label {
  flex: none;
  color: var(--text);
  font-size: var(--fs-sm);
}
.tool__detail {
  min-width: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool__spacer {
  flex: 1;
}
.tool__done {
  flex: none;
  color: var(--text-3);
}
.tool__chevron {
  flex: none;
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.tool[data-open] .tool__chevron {
  transform: rotate(90deg);
}
.tool__panel {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-soft);
  animation: tool-panel-in var(--dur-spring) var(--spring-fast) both;
}
@keyframes tool-panel-in {
  from {
    opacity: 0;
  }
}
.tool__output {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tool__waiting {
  padding: 2px 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ---- controls.css ---- */
/* Menus, popovers, modals and form controls. */

.layer {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.layer--transparent {
  background: transparent;
}
.layer--scrim {
  background: rgba(0, 0, 0, 0.42);
  display: grid;
  place-items: center;
  animation: fade var(--dur) var(--ease);
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

.menu {
  position: fixed;
  min-width: 180px;
  /* A menu must never grow into a full-height wall of text. Provider model
     lists run to 100+ entries, and letting the surface match that pinned it to
     the top of the window and ran it off the bottom. Capped, it scrolls
     instead — and the Popover's placement math gets a sane height to work
     with, so it can still flip and clamp correctly. */
  max-height: min(340px, calc(100vh - 24px));
  overflow-y: auto;
  background: var(--menu-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
  padding: 5px;
  z-index: 101;
  animation: pop var(--dur-spring-fast) var(--spring-fast);
  transform-origin: var(--pop-origin, top center);
  scrollbar-width: none;
}
.menu::-webkit-scrollbar {
  display: none;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.menu__header a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 9px 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.menu__label {
  padding: 6px 9px 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.menu__sep {
  height: 1px;
  background: var(--border-strong);
  margin: 5px 0;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text);
  text-align: left;
  transition: background 90ms var(--ease);
}
.menu__item:hover:not(:disabled),
.menu__item[data-open='true'],
.menu__item[data-highlight='true'] {
  background: var(--hover-strong);
}
.menu__item:disabled {
  color: var(--text-4);
}
.menu__item--tall {
  align-items: flex-start;
  padding-top: 7px;
  padding-bottom: 7px;
}
.menu__item-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-2);
  width: 18px;
}
.menu__item--tall .menu__item-icon {
  margin-top: 1px;
}
.menu__item-body {
  flex: 1;
  min-width: 0;
}
.menu__item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu__item-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 1px;
}
.menu__item-hint {
  /* Was `flex: none`, which let a long value (a model id like "nemotron 3
     super 120b extended") push the row's own label clean out of the flex box —
     the "Model" row rendered with no "Model" on it. Shrink and ellipsize
     instead, and never take more than half the row, so the label always wins. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.menu__item-check {
  flex: none;
  color: var(--text);
  display: grid;
  place-items: center;
  width: 16px;
}
.menu__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 8px;
  color: var(--text-3);
  /* The menu itself is the scroll container, so without this the search field
     scrolls away from a long list — exactly when it is most needed. */
  position: sticky;
  top: -5px;
  z-index: 1;
  margin: -5px -5px 0;
  padding: 9px 14px 8px;
  /* Opaque on purpose. `--menu-bg` is deliberately translucent so `.menu`'s
     backdrop-filter has something to frost — but that frosts what is behind
     the *whole menu* and does nothing for the menu's own scrolling children,
     so painting this header with it left the list legible through the search
     field. Giving the header its own backdrop-filter does not fix it either:
     Chromium will not sample same-stacking-context scrolled siblings into a
     nested backdrop root, so the bleed only softened.
     `--surface-3` is the solid colour `--menu-bg` is mixed from, so this reads
     as the same material while actually blocking what scrolls beneath it. */
  background: var(--surface-3);
}
.menu__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-base);
  color: var(--text);
}
.menu__search input::placeholder {
  color: var(--text-3);
}
.menu__empty {
  padding: 4px 9px 10px;
  font-size: var(--fs-base);
  color: var(--text-3);
}

/* ---------------- Modal ---------------- */

.modal {
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--surface-3);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
  padding: 22px 22px 18px;
  position: relative;
  animation: pop var(--dur-spring-slow) var(--spring-slow);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-2);
}
.modal__close:hover {
  background: var(--hover);
  color: var(--text);
}
.modal__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 8px;
}
.modal__body {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 22px;
}
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.modal__field {
  width: 100%;
  margin-bottom: 20px;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--surface-4);
}
.btn:disabled {
  opacity: 0.45;
}
.btn--primary {
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
}
.btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fg), var(--bg) 14%);
}
.btn--accent {
  background: var(--toggle-on);
  color: #fff;
}
.btn--accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--toggle-on), #000 12%);
}
.btn--ghost {
  background: none;
  color: var(--text-2);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger-soft), var(--danger) 14%);
}
.btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-xs);
}

/* ---------------- Toggle switch ---------------- */

.switch {
  width: 30px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--toggle-off);
  position: relative;
  flex: none;
  transition: background 180ms var(--ease);
}
.switch[data-on='true'] {
  background: var(--toggle-on);
}
.switch[data-dimmed='true'] {
  opacity: 0.45;
}
.switch:disabled {
  cursor: default;
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--toggle-knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 180ms var(--ease);
}
.switch[data-on='true'] .switch__knob {
  transform: translateX(12px);
}

/* ---------------- Segmented control ---------------- */

.segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.segment__item {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment__item:hover {
  color: var(--text-2);
}
.segment__item[data-active='true'] {
  background: var(--surface-3);
  color: var(--text);
}

/* ---------------- Select ---------------- */

.select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.select:hover,
.select[data-open='true'] {
  background: var(--surface-4);
}
.select__chevron {
  color: var(--text-3);
  display: grid;
  place-items: center;
}

/* ---------------- Inputs ---------------- */

.input {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.input:focus {
  border-color: color-mix(in srgb, var(--toggle-on), transparent 30%);
}
.input::placeholder {
  color: var(--text-3);
}

textarea.input {
  height: auto;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
  min-height: 96px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-field__icon {
  position: absolute;
  left: 13px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
}
.search-field input::placeholder {
  color: var(--text-3);
}
.search-field input:focus {
  border-color: var(--border-strong);
}
.search-field--sm input {
  height: 34px;
  border-radius: var(--r-sm);
  padding-left: 34px;
  font-size: var(--fs-sm);
}
.search-field--sm .search-field__icon {
  left: 11px;
}
.search-field--pill input {
  border-radius: var(--r-pill);
  height: 34px;
  padding-left: 36px;
  background: var(--surface-2);
}
.search-field--pill .search-field__icon {
  left: 12px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.stepper input {
  width: 54px;
  height: 30px;
  text-align: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  color: var(--text);
  outline: none;
  font-size: var(--fs-sm);
}

/* ---------------- Slider ---------------- */

.slider {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--toggle-on) 0 var(--fill, 50%),
    var(--surface-4) var(--fill, 50%) 100%
  );
  outline: none;
}
.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: default;
}
.slider__value {
  font-size: var(--fs-sm);
  color: var(--text-2);
  min-width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Keycap ---------------- */

.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 0.5px solid var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.keycap--empty {
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  min-width: 128px;
  justify-content: flex-start;
  border: 1px solid var(--border-soft);
}
.color-chip__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex: none;
}

.tooltip-text {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.menu__item-title > span + span {
  color: var(--text-3);
}

/* ---------------- Downloads panel ---------------- */

.downloads-panel {
  width: 320px;
  max-height: min(420px, calc(100vh - 24px));
}

.downloads-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px 34px;
  color: var(--text-3);
  text-align: center;
}
.downloads-empty p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.45;
}

.downloads-list {
  display: flex;
  flex-direction: column;
}

.download-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 9px;
  border-radius: var(--r-sm);
}
.download-row + .download-row {
  border-top: 1px solid var(--border-soft);
}
.download-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.download-row__body {
  flex: 1;
  min-width: 0;
}
.download-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.download-row__title {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-row__pct {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.download-row__subtitle {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-row__bar {
  height: 3px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.download-row__bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 200ms var(--ease);
}

/* Wraps the header's Downloads button so the progress ring can sit centred
   around it — slightly larger than the button itself — without affecting the
   button's own size or its place in the header's flex layout. */
.download-btn-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}
.download-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.download-ring circle:last-child {
  transition: stroke-dashoffset 200ms var(--ease);
}

/* ---------------- Update toast ---------------- */

.update-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 320px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-menu);
  animation: pop var(--dur-spring-slow) var(--spring-slow);
  transform-origin: bottom right;
}
.update-toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent);
}
.update-toast__body {
  flex: 1;
  min-width: 0;
}
.update-toast__title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.update-toast__desc {
  margin: 3px 0 11px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.4;
}
.update-toast__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.update-toast__close {
  flex: none;
  margin: -4px -4px 0 0;
}

/* ---- pages.css ---- */
/* Plugin directory, skills, integration manager and the built-in browser. */

:root {
  --page-w: 620px;
  --page-narrow: 572px;
  --page-wide: 900px;
}

.page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 20px;
  /* Keep this row's own buttons out from under the Windows caption
     buttons, which are drawn over the page at the top right. Zero on
     macOS, where the traffic lights are on the other side. */
  padding-right: calc(12px + var(--window-controls-right));
  -webkit-app-region: drag;
  /* Offset by the sidebar gutter so this row lands on the same baseline as the
     floating panel's titlebar (and the traffic lights) rather than sitting 8px
     higher against the window edge. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding-top: var(--sidebar-gap);
}
.page__bar[data-collapsed='true'] {
  padding-left: max(16px, calc(var(--window-controls-left) + 3px));
}
.page__bar .segment,
.page__bar .btn,
.page__bar .icon-btn {
  -webkit-app-region: no-drag;
}
.page__bar-spacer {
  flex: 1;
}

.page__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 80px;
}

.page__inner {
  width: var(--page-w);
  max-width: 100%;
  margin: 0 auto;
}
.page__inner--narrow {
  width: var(--page-narrow);
}
.page__inner--wide {
  width: var(--page-wide);
}

.page__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 21px 0 0;
}
.page__subtitle {
  font-size: var(--fs-base);
  color: var(--text-2);
  margin: 10px 0 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 34px 0 14px;
}
.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.section-head--ruled {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.installed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 4px;
}

.icon-tile {
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.icon-tile--selected {
  outline: 1.5px solid var(--toggle-on);
  outline-offset: 2px;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
}

.entry {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
  padding: 10px 0;
  min-height: 58px;
  text-align: left;
  width: 100%;
}
.entry__body {
  flex: 1;
  min-width: 0;
}
.entry__title {
  font-size: var(--fs-base);
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry__desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.entry__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
}

.more-line {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin: 14px 0 26px;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}
.avatar-stack > * {
  margin-right: -8px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--canvas);
}
.avatar-stack > *:last-child {
  margin-right: 0;
}

.see-more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-base);
  color: var(--text-2);
  padding: 12px 0 4px;
}
.see-more:hover {
  color: var(--text);
}

/* ---- Integration manager (Plugins / MCPs / Skills with toggles) ---- */

.manager__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 26px;
}
.manager__tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Harmless outside a draggable header; needed when used inside .chat-header. */
  -webkit-app-region: no-drag;
}
.manager__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.manager__tab:hover {
  color: var(--text-2);
}
.manager__tab[data-active='true'] {
  background: var(--surface-2);
  color: var(--text);
}
.manager__tab-count {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.manager__search {
  margin-left: auto;
  width: 210px;
  flex: none;
}

.manager__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 0;
}
.manager__row-label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  flex: none;
}

/* ---- Server card ---- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: 48px;
}
.card__row + .card__row {
  border-top: 1px solid var(--border);
}
.card__row-body {
  flex: 1;
  min-width: 0;
}
.card__row-title {
  font-size: var(--fs-base);
  color: var(--text);
}
.card__row-desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}
.card__row-trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  color: var(--text-3);
  text-align: center;
}
.empty-state__icon {
  color: var(--text-2);
  margin-bottom: 10px;
}
.empty-state__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.empty-state__body {
  font-size: var(--fs-base);
  color: var(--text-3);
}

/* ---------------- Built-in browser panel ---------------- */

.browser {
  width: 46%;
  min-width: 320px;
  max-width: 720px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-left: 1px solid var(--border-soft);
}

.browser__tabs {
  height: var(--titlebar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  -webkit-app-region: drag;
}
.browser__tabs .icon-btn,
.browser__tab {
  -webkit-app-region: no-drag;
}
.browser__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  max-width: 200px;
  padding: 0 6px 0 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser__tab[data-active='false'] {
  background: transparent;
  color: var(--text-3);
}
.browser__tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser__tab-close {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--text-3);
  flex: none;
}
.browser__tab-close:hover {
  background: var(--hover-strong);
  color: var(--text);
}

.browser__toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 10px;
}
.browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  margin: 0 6px;
}
.browser__url input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser__url input::placeholder {
  color: var(--text-3);
}

.browser__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 12px 8px;
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.browser__banner-body {
  flex: 1;
  min-width: 0;
}
.browser__banner-title {
  font-size: var(--fs-base);
}
.browser__banner-desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.browser__view {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--canvas);
}
.browser__view webview {
  flex: 1;
  border: 0;
}

/* ---- Pull requests (Eaon Work) — real data from the gh CLI ---- */

.pr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.pr-page .chat-header {
  gap: 14px;
}
.pr-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
}
.pr-search .search-field {
  flex: 1;
}
.pr-shell {
  flex: 1;
  min-height: 0;
  display: flex;
}
.pr-list {
  width: 360px;
  flex: none;
  overflow-y: auto;
  padding: 0 10px 24px;
  border-right: 1px solid var(--border-soft);
}
.pr-list__group {
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin: 14px 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.pr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 16px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.pr-empty--error {
  color: var(--danger);
}

.pr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.pr-row:hover {
  background: var(--hover);
}
.pr-row[data-active='true'] {
  background: var(--surface-2);
}
.pr-row__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-3);
  margin-top: 2px;
}
.pr-row__dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--canvas);
}
.pr-row__body {
  flex: 1;
  min-width: 0;
}
.pr-row__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pr-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-base);
  color: var(--text);
}
.pr-row__time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.pr-row__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.pr-row__repo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-row__branch {
  color: var(--text-3);
}
.pr-row__stats {
  flex: none;
  font-family: var(--font-mono);
}
.pr-row__open {
  flex: none;
  opacity: 0;
}
.pr-row:hover .pr-row__open {
  opacity: 1;
}

.pr-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pr-detail__empty {
  color: var(--text-3);
  font-size: var(--fs-h2);
}
.pr-detail__card {
  width: 100%;
  max-width: 460px;
}
.pr-detail__repo {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.pr-detail__title {
  font-size: 20px;
  font-weight: 500;
  margin: 6px 0 12px;
}
.pr-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-transform: capitalize;
}

/* ---------------- Models (local model hub) ---------------- */

.models-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.models-bar .search-field {
  flex: 1;
}
.models-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.models-toggle span {
  cursor: default;
}
.models-spacer {
  flex: 1;
}

.models-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 0;
  color: var(--text-3);
  font-size: var(--fs-base);
}
.models-empty--error {
  color: var(--danger);
}

.model-card {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.model-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.model-card__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.model-card__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.model-card__size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.model-fits {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.model-fits[data-fits='true'] {
  color: #34d399;
  background: rgba(52, 211, 153, 0.14);
}
.model-fits[data-fits='false'] {
  color: var(--text-3);
  background: var(--surface-2);
}
.model-dl-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.model-dl-btn:hover:not(:disabled) {
  background: var(--surface-4);
}
.model-dl-btn:disabled {
  opacity: 0.7;
}
.model-dl-btn--done {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  cursor: default;
}
.model-card__downloaded {
  display: flex;
  align-items: center;
  gap: 6px;
}
.model-downloaded-list {
  margin-top: 4px;
  margin-bottom: 14px;
}
.model-downloaded-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.model-downloaded-row:last-child {
  border-bottom: 0;
}
.model-downloaded-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.model-downloaded-row__size {
  flex: none;
  color: var(--text-3);
}
.model-card__error {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.model-card__desc {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.model-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.model-card__author {
  color: var(--text-2);
}
.model-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.model-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.model-variants-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.model-variants-btn:hover {
  color: var(--text);
}

.model-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-bottom: 22px;
}
.model-detail__back:hover {
  color: var(--text);
}
.model-detail__byline {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.model-detail__desc {
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 0 16px;
}
.model-detail__tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.variants-table {
  margin-top: 4px;
}
.variants-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px 70px 130px;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.variants-table__row--head {
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
}
.variants-table__version {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.variants-table__no-fit {
  color: var(--text-4);
}
.variants-table__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.variants-table__done {
  color: var(--text-3);
}
.variants-table__pct {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.variants-table__error {
  color: var(--danger);
  max-width: 220px;
}

/* ---- settings.css ---- */
/* The settings window: left navigation column and the settings body. */

:root {
  --settings-w: 664px;
}

.settings {
  display: flex;
  height: 100%;
  /* Transparent: `body` paints the window — see app.css. */
}

.settings__nav {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Just the gutter — the panel inside paints, and `body` paints behind it.
     Matches the app's floating sidebar so the left column reads the same
     whether you are in the app or in settings. */
  padding: var(--sidebar-gap);
  user-select: none;
}

/* Same floating card as `.sidebar__panel` in app.css. */
.settings__nav-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}

/* The traffic lights sit inside this row, so it has to be tall enough to hold
   them with room to breathe: they end at y 32 and this row runs to y 44 once
   the panel's 8px top inset is counted. At the old 36px the "Back to app"
   button started 4px under the buttons and read as if it were colliding. */
.settings__nav-top {
  height: var(--titlebar-h);
  flex: none;
  -webkit-app-region: drag;
}

.settings__back {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  margin: 0 7px 4px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-2);
  width: calc(100% - 14px);
  text-align: left;
}
.settings__back:hover {
  background: var(--hover);
  color: var(--text);
}

.settings__search {
  padding: 0 12px 8px;
}

.settings__nav-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 7px 16px;
}

.settings__group {
  padding: 0 8px;
  margin: 12px 0 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.settings__group:first-child {
  margin-top: 4px;
}

.settings__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings__titlebar {
  /* Matches the nav panel's inset row so both columns start together. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  flex: none;
  -webkit-app-region: drag;
}
.settings__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 90px;
}
.settings__inner {
  width: var(--settings-w);
  max-width: 100%;
  margin: 0 auto;
}

.settings__h1 {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 15px 0 0;
}
.settings__lede {
  font-size: var(--fs-base);
  color: var(--text-2);
  margin: 10px 0 0;
}

.settings__section {
  margin-top: 30px;
}
.settings__section-label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  min-height: 52px;
}
.row + .row {
  border-top: 1px solid var(--border);
}
.row__body {
  flex: 1;
  min-width: 0;
}
.row__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.row__desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.45;
}
.row__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.row--stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

/* Theme picker */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 14px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.theme-card__preview {
  width: 100%;
  aspect-ratio: 213 / 148;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  display: flex;
}
.theme-card[data-active='true'] .theme-card__preview {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}
.theme-card__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.theme-card[data-active='true'] .theme-card__label {
  color: var(--text);
}
.theme-card__half {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.theme-card__bar {
  height: 7px;
  border-radius: 3px;
}
.theme-card__panel {
  margin-top: auto;
  border-radius: 6px 6px 0 0;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 62px;
}

/* Diff preview under the theme picker */

.diff-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.diff-preview__side {
  padding: 8px 0;
  overflow: hidden;
}
.diff-preview__line {
  display: flex;
  gap: 12px;
  padding: 0 12px;
  white-space: pre;
}
.diff-preview__num {
  color: var(--text-4);
  min-width: 14px;
  text-align: right;
  flex: none;
}
.diff-preview__line[data-mark='del'] {
  background: rgba(255, 69, 58, 0.12);
  box-shadow: inset 3px 0 0 var(--danger);
}
.diff-preview__line[data-mark='add'] {
  background: rgba(48, 209, 88, 0.12);
  box-shadow: inset 3px 0 0 #30d158;
}
.tok-key {
  color: #c792ea;
}
.tok-str {
  color: #7ec699;
}
.tok-num {
  color: #f78c6c;
}
.tok-name {
  color: #82aaff;
}
.tok-punc {
  color: var(--text-3);
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--danger-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: 12px;
}
.banner__icon {
  color: var(--danger);
  flex: none;
  margin-top: 1px;
}

.dock-choice {
  display: flex;
  gap: 10px;
}
.dock-choice__item {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  overflow: hidden;
}
.dock-choice__item[data-active='true'] {
  outline: 1.5px solid var(--fg);
  outline-offset: 2px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  min-height: 52px;
}
.shortcut-row + .shortcut-row {
  border-top: 1px solid var(--border);
}
.shortcut-row__body {
  flex: 1;
  min-width: 0;
}
.shortcut-row__keys {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.shortcut-row__key {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kv {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 12px;
}

.provider-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}
.provider-card__name {
  font-size: var(--fs-base);
  font-weight: 500;
}
.provider-card__meta {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 2px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs);
  background: var(--surface-3);
  color: var(--text-2);
}
.badge--ok {
  background: rgba(48, 209, 88, 0.16);
  color: #4ade80;
}
.badge--warn {
  background: var(--danger-soft);
  color: var(--danger);
}
.key-input {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.key-input .input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.model-pill {
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

/* ==================================================================
   Model Providers — full-bleed two-pane layout (list + detail), and
   the "Add Custom Provider" modal. Accents come from --provider-accent,
   which now derives from the app's theme accent (see tokens.css) — it
   used to be a fixed warm hex, which read as a bug against a blue app.
   ================================================================== */

.providers-shell {
  display: flex;
  height: 100%;
  min-height: 0;
}

.providers-list {
  width: 300px;
  flex: none;
  overflow-y: auto;
  padding: 0 10px 24px;
  border-right: 1px solid var(--border-soft);
}

.providers-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 8px 18px;
  position: sticky;
  top: 0;
  background: var(--canvas);
  z-index: 1;
}

.providers-list__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.providers-list__group {
  padding: 0 8px;
  margin: 16px 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.providers-list__group:first-of-type {
  margin-top: 0;
}

.provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 8px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.provider-row:hover {
  background: var(--hover);
}
.provider-row[data-active='true'] {
  background: var(--surface-2);
}
.provider-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row__badge {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}

.providers-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 30px 32px 80px;
}

.provider-detail__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.provider-detail__name {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-detail__section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.provider-detail__section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 8px;
}
.provider-detail__section-desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 14px;
}

.key-field {
  position: relative;
  display: flex;
  align-items: center;
}
.key-field input {
  width: 100%;
  height: 40px;
  padding: 0 76px 0 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text);
  outline: none;
}
.key-field input:focus {
  border-color: var(--provider-accent);
}
.key-field input::placeholder {
  color: var(--text-3);
  font-family: var(--font-ui);
  letter-spacing: normal;
}
.key-field__actions {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.provider-detail__advanced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.provider-detail__hint {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: none;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.pill-btn:hover {
  background: var(--hover);
}

.provider-detail__advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-label {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 6px;
}
.fallback-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-detail__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.provider-detail__section-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 0;
}
.model-row + .model-row {
  border-top: 1px solid var(--border);
}
.model-row__name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.model-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.model-row__spacer {
  flex: 1;
}
.model-row__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.model-row:hover .model-row__actions {
  opacity: 1;
}
.model-row__star[data-on='true'] {
  color: var(--provider-accent);
}

.add-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
}

.empty-models {
  padding: 18px 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---- Radio (API format choice in the Add Custom Provider modal) ---- */

.radio-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-base);
  color: var(--text);
}
.radio-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color var(--dur) var(--ease);
}
.radio-dot[data-on='true'] {
  border-color: var(--provider-accent);
}
.radio-dot__fill {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--provider-accent);
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
}
.radio-dot[data-on='true'] .radio-dot__fill {
  transform: scale(1);
}

/* ---- Provider-accent button variants (used only in this area) ---- */

.btn--provider {
  background: var(--provider-accent);
  color: #fff;
}
.btn--provider:hover:not(:disabled) {
  background: var(--provider-accent-strong);
}
.btn--provider-ghost {
  background: none;
  color: var(--provider-accent);
}
.btn--provider-ghost:hover:not(:disabled) {
  background: var(--provider-accent-soft);
}

.provider-detail__header .switch[data-on='true'] {
  background: var(--provider-accent);
}

.settings__full {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---- System Monitor: stat values and usage bars ---- */

.stat-value {
  font-size: var(--fs-base);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.usage {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.usage__track {
  width: 74px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  overflow: hidden;
  flex: none;
}
.usage__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--provider-accent);
  transition: width 400ms var(--ease);
}
.usage__value {
  font-size: var(--fs-base);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: right;
}

/* ---------------- Colour theme picker ---------------- */

.theme-swatch-grid {
  display: grid;
  /* Auto-fit rather than a fixed count so the row reflows instead of squashing
     when the settings pane narrows. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.theme-swatch__preview {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-swatch:hover .theme-swatch__preview {
  border-color: var(--border-strong);
}
.theme-swatch[data-active] .theme-swatch__preview {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}
.theme-swatch__side {
  width: 34%;
  flex: none;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-swatch__body {
  flex: 1;
  min-width: 0;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-swatch__bar {
  height: 5px;
  border-radius: 2.5px;
  flex: none;
}
.theme-swatch__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  margin-bottom: 2px;
}
.theme-swatch__pill {
  margin-top: auto;
  align-self: flex-end;
  width: 30%;
  height: 8px;
  border-radius: 4px;
  flex: none;
}
.theme-swatch__name {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.theme-swatch[data-active] .theme-swatch__name {
  color: var(--text);
}


/* ---------------- Plugin catalog ---------------- */

.plugin-list {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.plugin-row-group + .plugin-row-group {
  border-top: 1px solid var(--border);
}

.plugin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  min-height: 60px;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.plugin-row:hover {
  background: var(--hover);
}
.plugin-row__logo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.plugin-row__logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.plugin-row__fallback {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.plugin-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plugin-row__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.plugin-row__desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.plugin-row__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.plugin-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}
.plugin-row__chevron {
  flex: none;
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.plugin-row__chevron[data-open] {
  transform: rotate(180deg);
}

.plugin-row__panel {
  padding: 0 16px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugin-row__form {
  display: flex;
  gap: 8px;
}
.plugin-row__form .input {
  flex: 1;
  min-width: 0;
}
.plugin-row__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.plugin-row__note--error {
  color: var(--danger);
}
.plugin-row__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--link);
}
.plugin-row__link:hover {
  text-decoration: underline;
}