/* Relay — design tokens.
 *
 * One neutral system, one accent, three surface tiers, three elevations.
 * Light and dark are two hand-tuned palettes, never one derived from the
 * other, and every token below exists in both.
 *
 *   stage   --bg          the page
 *   tier 1  --surface-1   cards, panels
 *   tier 2  --surface-2   insets, table heads, hover rows
 *   tier 3  --surface-3   elevated: modals, popovers
 */

:root {
  /* ---- stage & text -------------------------------------------------- */
  --bg: #f6f7f9;              /* the stage: warm-neutral off-white */
  --fg: #101623;              /* body copy — 16.5:1 on the stage */
  --fg-strong: #05070d;       /* headlines, emphasis */
  --fg-soft: #414b59;         /* secondary copy — 8.9:1 */
  --muted: #5f6875;           /* meta, labels, captions — 5.3:1 */
  --line: #e1e4ea;            /* component borders, row separators */
  --line-strong: #c9cfd9;     /* emphasised border / control edge */
  --line-subtle: #eef0f4;     /* faintest separator */
  --hairline: #e8eaef;        /* fine internal rules (tables, lists, dl) */
  --hairline-w: 1px;
  --hairline-border: var(--hairline-w) solid var(--hairline);

  /* ---- surfaces (three tiers) --------------------------------------- */
  --card: #ffffff;            /* tier 1 */
  --card-2: #fafbfc;          /* tier 2 — insets, table heads, hovers */
  --rail: #eef0f3;            /* rail / recessed strips */
  --surface-1: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #ffffff;

  /* ---- accent (exactly one) ----------------------------------------- */
  --accent: #2563eb;
  --accent-soft: #eff6ff;      /* tinted fill */
  --accent-strong: #1d4ed8;    /* accent text on a light fill */
  --accent-faint: #f5f9ff;    /* barely-there wash */
  --accent-line: rgba(37, 99, 235, 0.24);
  --accent-ring: rgba(37, 99, 235, 0.28);
  --accent-fill: #2563eb;      /* solid button fill (white label) */
  --accent-fill-hover: #1d4ed8;
  --on-accent: #ffffff;

  /* ---- semantic status (never colour-only: pair with a dot/label) --- */
  --up: #047857;
  --unstable: #b45309;
  --down: #dc2626;
  --danger: #dc2626;
  --warn: #b45309;

  /* ---- code ---------------------------------------------------------- */
  --code-bg: #f2f4f8;

  /* ---- focus --------------------------------------------------------- */
  --focus: #2563eb;

  /* ---- overlays ------------------------------------------------------ */
  --scrim: rgba(14, 19, 32, 0.44);

  /* ---- segmented control (the workspace tabs) ------------------------ */
  --seg-bg: #eef0f4;           /* recessed groove */
  --seg-active: #ffffff;      /* raised pill */
  --seg-shadow: 0 1px 2px rgba(16, 22, 35, 0.10), 0 0 0 1px rgba(16, 22, 35, 0.05);

  /* ---- elevation (three steps, quiet) ------------------------------- */
  --btn-shadow: 0 1px 2px rgba(16, 22, 35, 0.14), 0 8px 18px -10px rgba(37, 99, 235, 0.55);
  --shadow: 0 1px 2px rgba(16, 22, 35, 0.05), 0 6px 18px -8px rgba(16, 22, 35, 0.10);
  --elev-1: 0 1px 2px rgba(16, 22, 35, 0.06);
  --elev-2: 0 2px 6px -2px rgba(16, 22, 35, 0.08), 0 10px 24px -12px rgba(16, 22, 35, 0.14);
  --elev-3: 0 28px 64px -20px rgba(16, 22, 35, 0.24), 0 10px 26px -14px rgba(16, 22, 35, 0.14);

  /* ---- radius scale --------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --tap: 36px;

  /* ---- spacing (4px grid) --------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ---- motion (one vocabulary) ---------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- typography scale ---------------------------------------------- */
  --fs-2xs: 0.72rem;   /* 11.5px badges/timestamps only */
  --fs-xs: 0.78rem;    /* 12.5px labels, meta */
  --fs-sm: 0.84rem;    /* 13.4px secondary, buttons */
  --fs-base: 0.92rem;  /* 14.7px body */
  --fs-md: 1rem;       /* 16px card titles, emphasis */
  --fs-lg: 1.15rem;    /* modal titles, section heads */
  --fs-xl: 1.3rem;     /* sub-hero */
  --fs-hero: clamp(2.1rem, 5.2vw, 3.1rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --track-caps: 0.06em;
  --lh-tight: 1.25;
  --lh-body: 1.6;

  /* Icons: one stroke weight + optical sizing everywhere. */
  --ico-stroke: 1.8;
  --ico-sm: 17px;
  --ico-md: 19px;
  --ico-lg: 22px;

  /* Restrained elevation system — clean surfaces without loud specular or saturation */
  --glass-bg: var(--surface-1);
  --glass-bg-subtle: var(--surface-2);
  --glass-bg-elevated: var(--surface-3);
  --glass-border: var(--line);
  --glass-border-subtle: var(--hairline);
  --glass-blur: none;
  --glass-blur-heavy: none;
  --glass-blur-card: none;
  --glass-specular: var(--elev-1);
  --glass-specular-elevated: var(--elev-3);
}

:root[data-theme="dark"] {
  /* ---- stage & text -------------------------------------------------- */
  --bg: #0d0e11;
  --fg: #e9eaee;
  --fg-strong: #ffffff;
  --fg-soft: #a5abb5;
  --muted: #8b9099;
  --line: #282b32;
  --line-strong: #373b45;
  --line-subtle: rgba(255, 255, 255, 0.06);
  --hairline: #23252b;
  --hairline-w: 1px;
  --hairline-border: var(--hairline-w) solid var(--hairline);

  /* ---- surfaces ------------------------------------------------------ */
  --card: #141518;
  --card-2: #18191e;
  --rail: #0e0f12;
  --surface-1: #141518;
  --surface-2: #18191e;
  --surface-3: #1d1f26;

  /* ---- accent -------------------------------------------------------- */
  --accent: #4f8df7;
  --accent-soft: #172033;
  --accent-strong: #93c5fd;
  --accent-faint: #121a2b;
  --accent-line: rgba(79, 141, 247, 0.32);
  --accent-ring: rgba(79, 141, 247, 0.34);
  --accent-fill: #2a63e0;
  --accent-fill-hover: #2159c9;
  --on-accent: #ffffff;

  /* ---- semantic status ----------------------------------------------- */
  --up: #34d399;
  --unstable: #fbbf24;
  --down: #f87171;
  --danger: #f87171;
  --warn: #fbbf24;

  /* ---- code ---------------------------------------------------------- */
  --code-bg: #101115;

  /* ---- focus --------------------------------------------------------- */
  --focus: #4f8df7;

  /* ---- overlays ------------------------------------------------------ */
  --scrim: rgba(0, 0, 0, 0.66);

  /* ---- segmented control --------------------------------------------- */
  --seg-bg: #0b0c0f;
  --seg-active: #26282f;
  --seg-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- elevation ----------------------------------------------------- */
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 22px -12px rgba(79, 141, 247, 0.6);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.035);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 6px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --elev-3: 0 30px 72px -22px rgba(0, 0, 0, 0.75), 0 12px 28px -14px rgba(0, 0, 0, 0.5);

  --glass-bg: var(--surface-1);
  --glass-bg-subtle: var(--surface-2);
  --glass-bg-elevated: var(--surface-3);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-subtle: var(--hairline);
  --glass-specular: var(--elev-1);
  --glass-specular-elevated: var(--elev-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e11;
    --fg: #e9eaee;
    --fg-strong: #ffffff;
    --fg-soft: #a5abb5;
    --muted: #8b9099;
    --line: #282b32;
    --line-strong: #373b45;
    --line-subtle: rgba(255, 255, 255, 0.06);
    --hairline: #23252b;
    --hairline-w: 1px;
    --hairline-border: var(--hairline-w) solid var(--hairline);

    --card: #141518;
    --card-2: #18191e;
    --rail: #0e0f12;
    --surface-1: #141518;
    --surface-2: #18191e;
    --surface-3: #1d1f26;

    --accent: #4f8df7;
    --accent-soft: #172033;
    --accent-strong: #93c5fd;
    --accent-faint: #121a2b;
    --accent-line: rgba(79, 141, 247, 0.32);
    --accent-ring: rgba(79, 141, 247, 0.34);
    --accent-fill: #2a63e0;
    --accent-fill-hover: #2159c9;
    --on-accent: #ffffff;

    --up: #34d399;
    --unstable: #fbbf24;
    --down: #f87171;
    --danger: #f87171;
    --warn: #fbbf24;

    --code-bg: #101115;

    --focus: #4f8df7;

    --scrim: rgba(0, 0, 0, 0.66);

    --seg-bg: #0b0c0f;
    --seg-active: #26282f;
    --seg-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 22px -12px rgba(79, 141, 247, 0.6);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.035);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --elev-2: 0 6px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --elev-3: 0 30px 72px -22px rgba(0, 0, 0, 0.75), 0 12px 28px -14px rgba(0, 0, 0, 0.5);

    --glass-bg: var(--surface-1);
    --glass-bg-subtle: var(--surface-2);
    --glass-bg-elevated: var(--surface-3);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-border-subtle: var(--hairline);
    --glass-specular: var(--elev-1);
    --glass-specular-elevated: var(--elev-3);
  }
}

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* One scrollbar language everywhere: thin, neutral, only visible on hover. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: none;
  color: var(--fg);
  font: var(--fw-regular) var(--fs-base)/var(--lh-body) "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.011em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  display: none !important;
  content: none !important;
}
@keyframes aurora-drift {
  0%   { transform: none; }
  100% { transform: none; }
}
:root[data-glass="off"] body::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Selection: one accent wash, readable in both themes. */
::selection {
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  color: var(--fg-strong);
}
::-moz-selection {
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  color: var(--fg-strong);
}

/* Headings: one scale, one rhythm, balanced wrapping. */
h1, h2, h3, h4 { text-wrap: balance; }
h1, h2, h3 { color: var(--fg-strong); }
h4 {
  color: var(--fg-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
p { text-wrap: pretty; }

/* One global focus ring — keyboard visibility everywhere.
   `outline` follows the element's own radius, so no border-radius is set
   here (doing so used to flatten every focused button to 4px). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; /* inputs draw their own border + ring */
}

/* Icon defaults: legible optical size + confident stroke. Inline <svg> icons
   outside .pg-ico get these too, so nothing renders hairline-thin. */
svg:not(.spark):not(.model-brand-svg):not([data-raw-size]) {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pg-ico {
  width: var(--ico-md); height: var(--ico-md);
}
button svg, .linkish svg, .ghost svg, .lbl svg, .acct-h svg, .pg-feature-ico svg, .adm-card-ico svg {
  stroke-width: var(--ico-stroke);
}

:root[data-theme="dark"] body {
  background-image: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image: none;
  }
}

body.overlay-open { overflow: hidden; }

code, .mono, kbd {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  letter-spacing: -0.01em;
  font-variant-ligatures: none;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* --- type scale -------------------------------------------------------
   hero > section > card title > body > meta > caption */
h1 {
  font-size: var(--fs-hero); line-height: 1.06;
  margin: var(--sp-5) 0 var(--sp-3);
  letter-spacing: -0.032em; font-weight: var(--fw-bold);
}
h2 {
  font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-2);
  letter-spacing: -0.02em; font-weight: var(--fw-semibold);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
h2:first-child { margin-top: var(--sp-4); }
h3 {
  font-size: var(--fs-md); letter-spacing: -0.014em;
  font-weight: var(--fw-semibold); color: var(--fg-strong);
}
.sub {
  color: var(--fg-soft); max-width: 62ch; font-size: var(--fs-md);
  line-height: 1.55; margin: 0;
}
.muted { color: var(--muted); font-size: var(--fs-sm); }
.count { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.warn-text { color: var(--warn); }
.lbl {
  display: block; font-size: var(--fs-xs); letter-spacing: var(--track-caps);
  color: var(--fg-soft); margin: var(--sp-3) 0 var(--sp-1);
  text-transform: uppercase; font-weight: var(--fw-semibold);
}
.lbl-inline { font-size: var(--fs-xs); color: var(--muted); }
.legend { margin-top: var(--sp-3); max-width: 92ch; color: var(--fg-soft); font-size: var(--fs-sm); }

/* Section kicker — the small caps line above a hero or a group. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--muted);
}

/* Empty states read as designed, not accidental. */
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--fg) 1.5%, transparent);
  color: var(--fg-soft);
}
.empty-state p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); }
.empty-state .empty-ico { width: 26px; height: 26px; color: var(--muted); opacity: 0.75; }
.empty { padding: var(--sp-2) var(--sp-1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--surface-3); color: var(--fg-strong);
  border: 1px solid var(--line-strong);
  padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none;
  box-shadow: var(--elev-2);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ header */
/* A floating island: brand + workspace tabs + account controls in one pill.
   Solid surface, hairline edge, one soft shadow — no blur, no glass. */
.site-head {
  position: sticky; top: 12px;
  display: flex; justify-content: center;
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 50; padding: 0 16px;
  /* clicks fall through empty areas onto the underlying canvas */
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out);
}
.site-head .head-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  width: auto; max-width: 100%; min-height: 40px; height: 40px; margin: 0; padding: 4px 6px 4px 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  box-shadow: var(--elev-2);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-head .brand {
  display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold);
  font-size: 0.88rem; letter-spacing: -0.015em; white-space: nowrap; margin-right: 2px;
}
.site-head .brand-mark {
  width: 20px; height: 20px; border-radius: 6px; flex: none; object-fit: cover;
  transition: transform var(--dur-fast) var(--ease-out);
}
.site-head .brand:hover .brand-mark { transform: scale(1.06); }
.site-head .brand span { color: var(--muted); font-weight: var(--fw-regular); }

.site-head-sep {
  width: 1px; height: 16px; background: var(--line); margin: 0 3px; flex: none;
}

/* --- workspace tabs: a recessed groove with one raised pill ------------ */
#tabs {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 2px;
  background: var(--seg-bg);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 2px;
  position: relative;
}
#tabs a {
  color: var(--muted);
  text-decoration: none; font-size: 0.8125rem; font-weight: var(--fw-medium);
  font-family: inherit;
  padding: 5px 13px; border-radius: 9999px;
  border: 1px solid transparent;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#tabs a:hover {
  color: var(--fg-strong);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
}
#tabs a[aria-selected="true"] {
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  background: var(--seg-active);
  border-color: var(--hairline);
  box-shadow: var(--seg-shadow);
}
#tabs a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#tabs::after,
#tabs a::after,
#tabs.has-indicator::after {
  display: none !important;
  content: none !important;
}

.head-side { display: flex; align-items: center; gap: 4px; margin-left: 2px; }
.site-head .note { display: none; }
#island-settings { display: none; }
body:has(#panel-playground:not([hidden])) #island-settings { display: none !important; }
body:has(#panel-playground:not([hidden])) .site-head #auto-refresh { display: none !important; }

/* Icon buttons inside the island: quiet until touched. */
.site-head .icobtn {
  width: 30px; height: 30px; min-height: 30px; min-width: 30px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.site-head .icobtn:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  color: var(--fg-strong);
  border-color: transparent;
}
.site-head .icobtn:active { transform: scale(0.94); }
.site-head .icobtn:focus-visible { outline-offset: -2px; }

.icobtn {
  width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--fg-soft);
  border-radius: var(--r-sm); font-size: 1rem; cursor: pointer; flex: none;
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icobtn:hover {
  border-color: var(--line-strong);
  background: var(--surface-1);
  color: var(--fg-strong);
}
.icobtn:active { transform: scale(0.95); }
.icobtn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.icobtn .pg-theme-glyph svg { width: var(--ico-sm); height: var(--ico-sm); }
.icobtn[aria-pressed="false"] { color: var(--muted); }

@keyframes icospin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.icobtn.is-refreshing {
  animation: icospin 0.75s linear infinite;
  pointer-events: none;
}
.pg-pick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0;
}
.pg-pick-bar p { margin: 0; }
.pg-pick-refresh {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- surfaces */
/* Three tiers, one hairline, one soft shadow: cards never sit flat on the
   stage and never float without an edge. */
.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pad { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.pad .pg-sep.first { border-top: none; margin-top: 0; padding-top: 0; }

/* --- buttons -----------------------------------------------------------
   One base look (secondary) plus four intents. Every button answers to
   hover / focus-visible / active / disabled. */
button, .ghost, .filelabel {
  cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: none;
  border-radius: var(--r-sm); min-height: var(--tap);
  letter-spacing: 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button:hover, .ghost:hover, .filelabel:hover {
  border-color: var(--line-strong);
  background: var(--surface-1);
  color: var(--fg-strong);
  box-shadow: var(--elev-1);
}
button:active, .ghost:active { transform: scale(0.98); }
button:disabled, .ghost:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
button.danger, .ghost.danger {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 45%, var(--line));
  background: color-mix(in oklab, var(--danger) 8%, transparent);
}
button.danger:hover, .ghost.danger:hover {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 62%, var(--line));
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  box-shadow: none;
}
.filelabel { display: inline-flex; align-items: center; }

/* Quiet variant: a secondary action that recedes until hovered. */
.ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--fg-soft);
}
.ghost:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--fg-strong);
}

/* --- button intents ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; white-space: nowrap;
}
.btn svg { flex: none; }

.btn-primary {
  background: var(--accent-fill);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover {
  background: var(--accent-fill-hover);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
}
.btn-primary:active { transform: translateY(1px) scale(0.99); }

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--fg);
}
.btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--line-strong);
  color: var(--fg-strong);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-soft);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--fg-strong);
  box-shadow: none;
}

.btn-danger {
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: color-mix(in oklab, var(--danger) 45%, transparent);
  color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover {
  background: color-mix(in oklab, var(--danger) 18%, transparent);
  border-color: color-mix(in oklab, var(--danger) 65%, transparent);
  color: var(--danger);
  box-shadow: none;
}

/* --- form controls ----------------------------------------------------- */
input[type="search"], input[type="text"], input[type="password"], input[type="number"],
input:not([type]), textarea, select {
  width: 100%; padding: 8px 12px;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--fg); font: inherit; font-size: var(--fs-sm); margin: 4px 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent);
  background: var(--surface-1);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:disabled, textarea:disabled, select:disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--surface-2);
}
input[readonly] { background: var(--surface-1); color: var(--muted); }
textarea { resize: vertical; }
input[type="range"] { padding: 0; accent-color: var(--accent); }
input[type="checkbox"], select { accent-color: var(--accent); }

/* Native select arrow, drawn from currentColor so it follows the theme.
   The extra specificity beats the compact paddings the filters/toolbars set. */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.row2 { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.row2 > input { flex: 1 1 180px; }
.row2 > button { flex: none; }

.banner {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  box-shadow: var(--elev-1);
  margin: var(--sp-3) 0;
  color: var(--fg-soft); font-size: var(--fs-sm);
}
.banner.error {
  border-color: color-mix(in oklab, var(--danger) 45%, var(--line));
  background: color-mix(in oklab, var(--danger) 8%, var(--surface-2));
  color: var(--danger);
}

/* ------------------------------------------------------------------- hero */
/* One breath: kicker, headline, one supporting line, then the endpoints. */
/* These are fallbacks: the hero block is free to carry its own classes, so
   every rule here is written at single-class specificity and can be
   overridden by one class on the element. */
.hero { margin-top: var(--sp-2); }
.hero :where(h1) {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.034em;
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: var(--sp-4) 0 var(--sp-3);
}
.hero :where(.sub) {
  max-width: 58ch;
  color: var(--fg-soft);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0;
}
.hero :where(.hero-actions) {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  margin-top: var(--sp-4);
}
.hero :where(.hero-eyebrow) {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--sp-2);
}

/* The endpoint table: a scannable list of paths, aligned and tabular. */
.ep-table {
  width: 100%; margin: var(--sp-5) 0 var(--sp-6);
  border-collapse: separate; border-spacing: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ep-table:hover {
  border-color: var(--line);
  box-shadow: var(--elev-2);
}
.ep-table tr + tr th, .ep-table tr + tr td { border-top: 1px solid var(--hairline); }
.ep-table tr { transition: background var(--dur-fast) var(--ease-out); }
.ep-table tr:hover { background: color-mix(in oklab, var(--fg) 3%, transparent); }
.ep-table th {
  text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--track-caps); color: var(--muted);
  font-weight: var(--fw-semibold); text-transform: uppercase; padding: 13px 16px; width: 92px;
  vertical-align: middle;
}
/* Only row headers stay on one line; a spanning group header may wrap. */
.ep-table th[scope="row"] { white-space: nowrap; }
.ep-table td { padding: 11px 8px; min-width: 0; vertical-align: middle; }
.ep-table td:first-of-type { width: auto; }
.ep-table code {
  display: inline-block; max-width: 100%; overflow-x: auto; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 9px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ep-table td:last-child { padding-right: 14px; width: 84px; text-align: right; }
.ep-table .ghost.copy {
  min-height: 26px; padding: 2px 10px; font-size: 0.75rem; border-radius: var(--r-xs);
  font-family: "Geist Mono", monospace; font-weight: var(--fw-medium);
  background: transparent; border-color: var(--hairline);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ep-table .ghost.copy:hover {
  background: var(--surface-2); color: var(--fg-strong); border-color: var(--line-strong);
  box-shadow: none;
}

/* --------------------------------------------------------- provider cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.pcard {
  position: relative;
  padding: 15px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg);
  box-shadow: var(--glass-specular);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.pcard::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 16%, transparent), transparent);
  pointer-events: none;
}
.pcard:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .pcard:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.pcard-head { display: flex; align-items: center; gap: 10px; }
.pname-btn {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  padding: 4px 4px; margin: 0; min-height: 0; font-size: 0.94rem; font-weight: 600;
  font-family: "Geist Mono", ui-monospace, monospace; color: var(--fg); border-radius: 6px;
  cursor: pointer;
  transition: color 150ms ease;
}
.pname-btn:hover { color: var(--accent); }
.pcard-head .switch { margin-left: auto; }
.pcard .stat { font-size: 0.81rem; margin: 7px 0 3px; color: var(--muted); font-family: "Geist Mono", monospace; }
.pcard-foot { margin: 6px 0 0; font-size: 0.74rem; font-family: "Geist Mono", monospace; }
.spark-wrap { height: 30px; }
.spark { display: block; overflow: visible; }
.sp-bar.up { fill: var(--up); }
.sp-bar.unstable { fill: var(--unstable); }
.sp-bar.down { fill: var(--down); }
.bars.tall { height: 48px; }

.skeleton-card, .skeleton-row { position: relative; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); min-height: 92px; }
.skeleton-row { min-height: 38px; border-radius: var(--radius-sm); margin: 6px 0; }
.skeleton-card::after, .skeleton-row::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 7%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- filters */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.search-wrap { position: relative; flex: 1 1 320px; max-width: 460px; }
.search-wrap input { margin: 0; padding-right: 42px; }
.keyhint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; color: var(--muted);
  font-size: 0.72rem; pointer-events: none; font-family: "Geist Mono", monospace;
}
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.88rem; color: var(--muted); }
.filters select, .filters input[type="search"] { width: auto; margin: 0; padding: 6px 10px; }
.check { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; margin: 0; }
.check input { width: auto; margin: 0; }
.chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-soft);
  border-radius: 999px; padding: 5px 13px; font-size: var(--fs-xs); min-height: 32px;
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: var(--fw-medium); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); background: var(--surface-1); color: var(--fg-strong); }
/* Selected state uses the one accent — interactive state is never a second hue. */
.chip.on, .chip[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent-strong);
  border-color: var(--accent-line); box-shadow: none;
}

/* --- gateway explorer: one composed filter card instead of scattered rows */
.explorer-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--glass-specular);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  margin: 12px 0 4px;
}
.explorer-card .toolbar { margin: 0; }
.explorer-top { flex-wrap: nowrap; }
.explorer-top .search-wrap { flex: 1 1 auto; max-width: none; }
.explorer-top select {
  /* hugs its own options (the shared input rule sets width: 100%, which made
     this select as wide as the toolbar and push it past the card's edge) */
  flex: 0 1 auto; width: auto; min-width: 0;
  min-height: 38px; margin: 0;
  border-radius: 10px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8rem;
}
.explorer-card .search-wrap input { min-height: 38px; border-radius: 10px; }
.explorer-controls { padding-top: 12px; border-top: 1px solid var(--glass-border-subtle); }
.explorer-note { margin: 0; font-size: 0.78rem; }
.explorer-note:empty { display: none; }

/* --- progressive disclosure for provider & visibility filters */
.explorer-filter-details {
  position: relative;
  display: inline-flex;
}
.explorer-filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.explorer-filter-summary::-webkit-details-marker {
  display: none;
}
.explorer-filter-details[open] .explorer-filter-summary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.explorer-filter-details[open] .explorer-filter-summary .pg-chev {
  transform: rotate(180deg);
}
.explorer-filter-expand {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 320px;
  max-width: min(560px, 90vw);
  max-height: 380px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: pg-menu-pop 140ms ease;
}
:root[data-theme="dark"] .explorer-filter-expand {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .explorer-filter-expand {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
}
.explorer-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.explorer-filter-sublabel {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* one control language: chips, checks and selects share a height */
.chip { min-height: 32px; padding: 5px 14px; font-size: 0.78rem; }
.check input[type="checkbox"] {
  width: 15px; height: 15px; margin: 0; flex: none;
  accent-color: var(--accent); cursor: pointer;
}

/* ------------------------------------------------------------- model rows */
.list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); transition: background 140ms ease, transform 140ms ease;
}
.model-row {
  display: grid; grid-template-columns: 22px 34px 28px 96px minmax(0, 1fr) auto 54px 92px;
  align-items: center; gap: 10px; min-height: 44px; border-radius: 8px; margin: 1px 0;
  border: 1px solid transparent;
}
.model-row:hover {
  background: color-mix(in oklab, var(--fg) 3.5%, transparent);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--line));
}
.cat-row { grid-template-columns: 104px minmax(0, 1fr) auto 54px 62px 92px; }
.mrow .mid { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .pname {
  background: none; border: none; padding: 2px 0; margin: 0; min-height: 0;
  color: var(--accent); font-size: 0.78rem; font-family: "Geist Mono", ui-monospace, monospace;
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; cursor: pointer;
}
.mrow .pname:hover { text-decoration: underline; }
.mrow .ctx { font-size: 0.76rem; text-align: right; font-family: "Geist Mono", monospace; color: var(--muted); }
.mrow .badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.row-actions .linkish {
  background: none; border: 1px solid transparent; padding: 3px 8px; margin: 0; min-height: 26px;
  border-radius: 6px; font-family: "Geist Mono", monospace; font-size: 0.76rem;
  transition: all 140ms ease;
}
.row-actions .linkish:hover {
  background: var(--card-2); border-color: var(--line); color: var(--fg-strong);
  text-decoration: none;
}
.offrow { opacity: 0.45; }
.offrow .mid { text-decoration: line-through; }
.more-row { display: flex; justify-content: center; margin: 16px 0; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; padding: 2px 8px;
  color: var(--muted); white-space: nowrap; font-family: "Geist Mono", monospace;
  letter-spacing: -0.01em; font-weight: 500;
  transition: all 120ms ease;
}
.badge.free, .badge.reach {
  border-color: color-mix(in oklab, var(--up) 45%, var(--line)); color: var(--up);
  background: color-mix(in oklab, var(--up) 10%, transparent);
}
.badge.new {
  border-color: color-mix(in oklab, var(--focus) 45%, var(--line)); color: var(--focus);
  background: color-mix(in oklab, var(--focus) 10%, transparent);
}
.badge.warn {
  border-color: color-mix(in oklab, var(--warn) 45%, var(--line)); color: var(--warn);
  background: color-mix(in oklab, var(--warn) 10%, transparent);
}
.badge.dup {
  border-color: color-mix(in oklab, var(--focus) 30%, var(--line)); color: var(--focus);
  background: color-mix(in oklab, var(--focus) 7%, transparent);
}
.badge.price {
  border: none; padding: 0; font-weight: 600;
}
.linkish { text-decoration: underline; cursor: pointer; color: inherit; }
.warn-text { color: var(--warn); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); opacity: 0.45; }
.dot.up, .sp-bar.up { background: var(--up); }
.dot.unstable { background: var(--unstable); }
.dot.down { background: var(--down); }
.dot.up, .dot.unstable, .dot.down { opacity: 1; }
.dot.unknown { background: var(--muted); opacity: 0.3; }
.dotbtn {
  border: none; background: none; padding: 4px; margin: 0; min-height: 0; min-width: 22px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.dotbtn:hover { background: var(--card-2); }

.switch {
  width: 36px; height: 22px; padding: 0; min-height: 0; border-radius: 999px;
  background: var(--line-strong); border: 1px solid transparent; position: relative; flex: none;
  transition: background 0.16s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--card); transition: left 0.16s cubic-bezier(0.2, 0.9, 0.25, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.switch.on { background: var(--up); }
.switch.on::after { left: 16px; }

.starbtn {
  border: none; background: none; color: var(--muted); padding: 4px 2px; margin: 0;
  min-height: 0; font-size: 0.95rem; line-height: 1; border-radius: 6px;
  transition: color 150ms ease, transform 120ms ease;
}
.starbtn:hover { transform: scale(1.15); }
.starbtn.on { color: var(--unstable); }

/* ----------------------------------------------------------------- tables */
/* One table language: sticky head, hairline rows, no zebra, tabular figures. */
.htable, .table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sm); margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.htable thead th, .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.htable th, .htable td, .table th, .table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.htable tbody tr, .table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.htable tbody tr:hover, .table tbody tr:hover {
  background: color-mix(in oklab, var(--fg) 3.5%, transparent);
}
.htable tbody tr:last-child td, .table tbody tr:last-child td { border-bottom: none; }
.htable .num, .table .num {
  text-align: right;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.mmodal-list {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); margin: 10px 0;
}
.mmodal-list .mrow { padding: 4px 12px; gap: 8px; }
.mmodal-list .badges { margin-left: auto; }
.msearch { margin: 10px 0 2px; }

/* --- code blocks -------------------------------------------------------- */
.codeblock {
  padding: var(--sp-4); overflow: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: var(--code-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  color: var(--fg);
  white-space: pre-wrap;
  max-height: 420px;
  tab-size: 2;
}
pre code { font-size: inherit; }

details summary { cursor: pointer; }
.detail .bars { height: 44px; }
.warn-text { color: var(--warn); }

/* --------------------------------------------------------------- overlays */
/* Scrim + panel. The panel is the only thing allowed to float. */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim);
  padding: var(--sp-5);
  animation: overlay-fade var(--dur-base) var(--ease-out);
}
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative; width: min(680px, 100%); max-height: min(84vh, 900px); overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-3);
  animation: modal-pop var(--dur-base) var(--ease-out);
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.modal-title {
  margin: 0 44px 0 0;
  font-size: var(--fs-lg); letter-spacing: -0.02em;
  font-weight: var(--fw-semibold); color: var(--fg-strong);
}
.modal-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.modal-body { color: var(--fg-soft); }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding-top: var(--sp-4); margin-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  padding: 0; min-height: 34px; border-radius: 999px;
  background: transparent; border-color: transparent; color: var(--muted);
}
.modal-x:hover { background: var(--surface-2); border-color: var(--hairline); color: var(--fg-strong); }
.confirm-card { width: min(460px, 100%); }
.confirm-actions {
  justify-content: flex-end;
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.confirm-actions > button { flex: none; min-width: 110px; }

/* --- toasts ------------------------------------------------------------- */
.toasts {
  position: fixed; bottom: 18px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--fg-strong); color: var(--bg);
  padding: 10px 15px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  box-shadow: var(--elev-3);
  display: flex; gap: 10px; align-items: center;
  animation: toast-in var(--dur-base) var(--ease-out);
  letter-spacing: -0.01em;
}
.toast-error { background: var(--danger); color: #ffffff; }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base), transform var(--dur-base); }
.toast-action {
  background: none; border: 1px solid currentColor; color: inherit;
  padding: 3px 9px; min-height: 26px; font-size: 0.8rem; border-radius: var(--r-xs);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* --- narrow screens ----------------------------------------------------- */
@media (max-width: 560px) {
  .overlay { padding: var(--sp-3); }
  .modal-card {
    width: 100%;
    max-height: min(88vh, 860px);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
  }
  .modal-x { top: 8px; right: 8px; }
  .toasts { bottom: 12px; right: 12px; left: 12px; max-width: none; }
}

/* ------------------------------------------------------------- playground
   Full-bleed, viewport-anchored app: an 80px icon rail plus a main canvas.
   Scoped tokens below; every colour derives from the global neutral palette.

   The floating island stays put on every tab, the playground included, so
   Gateway / Playground / Admin are always one click away. Phones are the
   exception — there the pill would land on the playground's own header and
   steps aside instead (see the 980px query below). */
body:has(#panel-playground:not([hidden])) { overflow: hidden; }
/* the island floats over the playground too — same pill on every tab */
body:has(#panel-playground:not([hidden])) .site-head {
  position: fixed; top: 10px; left: 0; right: 0; z-index: 40;
}
/* centre the pill over the chat canvas (rail + chat list) so it never lands on
   the playground's own model picker, and follow the rail when that list is
   collapsed. Phones are handled by the 980px query below. */
/* rail + chat list are one surface: 58px of icons plus the 256px list, inset
   from the window by .pg-app's 10px padding, so the island (also 10px down)
   and the panel share the same top edge and the panel's inner edge is 324px. */
@media (min-width: 981px) {
  body:has(#panel-playground:not([hidden])) .site-head { left: 324px; }
  body:has(#panel-playground:not([hidden])):has(.pg-app[data-side="closed"]) .site-head { left: 68px; }
}

#panel-playground {
  --pg-rail-w: 58px;
  --pg-side-w: 256px;
  --pg-panel: var(--glass-bg-subtle);
  --pg-side-bg: var(--glass-bg);
  --pg-head-h: 56px;
  --pg-composer-w: 640px;
  --pg-composer-h: 48px;
  /* stadium at rest (radius clamps to half of ~55px), rounded rectangle once
     attachments or multi-line text grow the field — 999px made the tall box
     bulge into giant arcs that ate the attachment chip */
  --pg-composer-r: 28px;
  --pg-composer-bg: var(--glass-bg-elevated);
  --pg-composer-line: var(--glass-border);
  --pg-measure-px: 640px;
  --pg-1: 4px; --pg-2: 8px; --pg-3: 12px; --pg-4: 16px; --pg-5: 20px; --pg-6: 24px;
  --pg-r-xs: 10px; --pg-r-sm: 14px; --pg-r-lg: 18px; --pg-r-msg: 16px;
  --pg-surface: var(--glass-bg);
  --pg-surface-2: var(--glass-bg-subtle);
  --pg-border: var(--glass-border-subtle);
  --pg-border-strong: var(--glass-border);
  --pg-measure: 640px;
  --pg-user-measure: 62ch;
  --pg-body-size: 0.95rem;
  --pg-body-line: 1.65;
  --pg-meta-size: 0.75rem;
  --pg-meta-track: 0.06em;
  --pg-dim: color-mix(in oklab, var(--fg) 60%, var(--card));
  --pg-send-bg: #1b1c1e;
  --pg-send-fg: #ffffff;
  --pg-dur: 140ms;
  --pg-ease: cubic-bezier(0.32, 0.72, 0, 1);
  color: var(--fg);
}
:root[data-theme="dark"] #panel-playground {
  --pg-panel: #0d0e11;
  --pg-side-bg: #121316;
  --pg-rail-bg: #0e0f12;
  --pg-composer-bg: #18191e;
  --pg-composer-line: rgba(255, 255, 255, 0.08);
  --pg-surface: #141518;
  --pg-surface-2: #18191e;
  --pg-border: rgba(255, 255, 255, 0.08);
  --pg-border-strong: rgba(255, 255, 255, 0.14);
  --pg-send-bg: #f4f4f5;
  --pg-send-fg: #09090b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #panel-playground {
    --pg-panel: #0d0e11;
    --pg-side-bg: #121316;
    --pg-rail-bg: #0e0f12;
    --pg-composer-bg: #18191e;
    --pg-composer-line: rgba(255, 255, 255, 0.08);
    --pg-surface: #141518;
    --pg-surface-2: #18191e;
    --pg-border: rgba(255, 255, 255, 0.08);
    --pg-border-strong: rgba(255, 255, 255, 0.14);
    --pg-send-bg: #f4f4f5;
    --pg-send-fg: #09090b;
  }
}

.pg-app {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: var(--pg-rail-w) auto minmax(0, 1fr);
  background: var(--bg);
  background-image: none;
  overflow: hidden;
}
:root[data-theme="dark"] .pg-app {
  background-image: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-app {
    background-image: none;
  }
}
/* explicit placement: icon rail far left, chat list beside it, canvas last — the DOM keeps
   the sidebar first so tab order starts with the chat list on narrow screens, where the
   sidebar is a drawer. */
.pg-rail { grid-column: 1; grid-row: 1; }
.pg-side { grid-column: 2; grid-row: 1; }
.pg-main { grid-column: 3; grid-row: 1; }

/* --- session sidebar -------------------------------------------------- */
/* Closed is the base state: the open/closed choice lands on [data-side] from
   JS (localStorage + viewport), so the first paint never shows the wrong one. */
.pg-side {
  width: 0; min-width: 0; overflow: hidden; visibility: hidden;
  background: var(--pg-side-bg);
  border-right: 0 solid transparent;
  transition: width var(--pg-dur) var(--pg-ease), border-right-width var(--pg-dur) var(--pg-ease), visibility var(--pg-dur) var(--pg-ease);
}
.pg-app[data-side="open"] .pg-side {
  width: var(--pg-side-w); visibility: visible;
}
.pg-app.is-booting .pg-side { transition: none; }
.pg-side-inner {
  width: var(--pg-side-w); height: 100%; display: flex; flex-direction: column;
  padding: 12px 12px 14px; gap: 8px; min-height: 0;
}
/* One text column: head word, section label and row titles all start at the
   same inset (sidebar padding + 8px) so nothing drifts by a few pixels. */
.pg-side-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; flex: none; padding: 0 4px 0 8px;
}
.pg-side-head-title {
  font-size: 13.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
}
.pg-side-mark { width: 24px; height: 24px; border-radius: 6px; flex: none; object-fit: cover; }
.pg-side-collapse {
  flex: none; width: 30px; height: 30px; min-height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: color var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease), transform 120ms ease;
}
.pg-side-collapse:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
.pg-side-collapse:active { transform: scale(0.92); }
.pg-side-collapse .pg-ico { width: 16px; height: 16px; }

/* chats header + list are one unit: label and New-chat action share a row */
.pg-side-chats-head {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 4px; padding: 0 4px 0 8px; min-height: 32px;
}
.pg-side-chats-head .pg-side-label {
  flex: 1; min-width: 0; margin: 0; padding: 0;
  font-size: 0.70rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.pg-side-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; min-height: 28px; padding: 0 10px; margin: 0;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--glass-border-subtle); border-radius: 8px;
  color: var(--fg); font: inherit; font-size: 0.78rem; font-weight: 550; cursor: pointer;
  transition: all 140ms ease;
}
.pg-side-add:hover {
  color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
.pg-side-add:active { transform: scale(0.96); }
.pg-side-add .pg-ico { width: 13px; height: 13px; flex: none; stroke-width: 2.2; color: var(--accent); }

.pg-side-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
/* No lane for the chat list: a classic scrollbar would reserve width only once the list
   overflows, shifting every row sideways and leaving the rows narrower than the new-chat
   button above them. */
.pg-side-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pg-side-label {
  margin: 8px 0 4px; padding: 0 8px; font-size: 0.70rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.pg-side-list { display: flex; flex-direction: column; gap: 2px; }
.pg-side-list .empty { padding: 12px 8px; font-size: 0.82rem; }

/* rows: flat transparent rows, never cards — title + meta left, rename and
   delete icon buttons revealed on hover/focus (always on for touch) */
.pg-sess {
  display: flex; align-items: center; gap: 4px; border-radius: 10px;
  padding: 3px 4px 3px 0; min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  position: relative;
  transition: background 140ms var(--pg-ease), border-color 140ms var(--pg-ease);
}
.pg-sess:hover {
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border-color: var(--glass-border-subtle);
}
.pg-sess.on {
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: var(--line);
}
.pg-sess.on::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 2.5px; border-radius: 2px; background: var(--accent);
}
.pg-sess-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: none; border: none; padding: 5px 4px 5px 8px; margin: 0; text-align: left;
  color: var(--fg); font: inherit; cursor: pointer; overflow: hidden; align-self: stretch;
}
.pg-sess-title {
  font-size: 0.85rem; font-weight: 500; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.01em; line-height: 1.3;
}
.pg-sess.on .pg-sess-title { color: var(--fg-strong); font-weight: 600; }
.pg-sess-open .muted { font-size: 0.72rem; color: var(--muted); line-height: 1.3; }
.pg-sess-tools {
  flex: none; display: flex; align-items: center; gap: 4px; padding-right: 2px;
  opacity: 0; transition: opacity var(--pg-dur) var(--pg-ease);
}
.pg-sess:hover .pg-sess-tools, .pg-sess:focus-within .pg-sess-tools, .pg-sess.on .pg-sess-tools { opacity: 1; }
.pg-sess-ic {
  flex: none; width: 28px; height: 28px; min-height: 28px; padding: 0; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pg-sess-ic svg { width: 14px; height: 14px; display: block; }
.pg-sess-ic:hover {
  color: var(--fg-strong); background: color-mix(in oklab, var(--fg) 10%, transparent);
  border-color: var(--glass-border-subtle);
}
.pg-sess-ic[data-act="delete"]:hover {
  color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
}

.pg-side-foot {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border-subtle);
}
.pg-side-links { display: flex; flex-direction: column; gap: 3px; }
.pg-side-links button {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; width: 100%; text-align: left;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  border: 1px solid transparent; border-radius: 8px; color: var(--muted);
  font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: all 130ms ease;
}
.pg-side-links button:hover {
  color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent);
  border-color: var(--glass-border-subtle);
}
.pg-side-foot-row { display: flex; gap: 6px; }
.pg-side-footbtn {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; height: 32px; padding: 0 8px; background: color-mix(in oklab, var(--fg) 4%, transparent);
  border: 1px solid var(--glass-border-subtle);
  border-radius: 8px; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: all 140ms ease;
}
.pg-side-footbtn:hover {
  color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent);
  border-color: var(--glass-border);
}
.pg-side-footbtn .pg-ico { width: 16px; height: 16px; flex: none; }
.pg-side-footbtn .pg-theme-glyph { flex: none; }

.pg-scrim {
  position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.45);
  border: none; padding: 0; margin: 0;
  animation: pg-fade-in 140ms var(--pg-ease);
}
@keyframes pg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- icon rail -------------------------------------------------------- */
.pg-rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px 0 16px 0;
  background: var(--pg-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: visible; position: relative;
}
/* Desktop: the rail and the chat list are a single floating glass pill — one
   translucent surface, one specular hairline, outer corners only, so nothing
   reads as two stacked panels. The list keeps the pill's right half, and when
   it is collapsed the rail rounds off on its own. */
@media (min-width: 981px) {
  .pg-app { padding: 0; }
  .pg-rail {
    background: var(--pg-rail-bg, var(--rail));
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .pg-side {
    background: var(--pg-side-bg, var(--card));
    border-right: 1px solid var(--line);
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pg-app[data-side="closed"] .pg-rail {
    border-right: 1px solid var(--line);
    border-radius: 0;
  }
  .pg-app[data-side="closed"] .pg-side { box-shadow: none; }
}
.pg-rail-sep {
  flex: none; width: 24px; height: 12px; margin: 0;
  background: transparent;
}
.pg-rail-group { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pg-rail-btn {
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none;
  position: relative;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 11px;
  background: none; color: var(--muted); font: inherit; cursor: pointer;
  transition: color 150ms var(--pg-ease), background 150ms var(--pg-ease), border-color 150ms var(--pg-ease), transform 120ms var(--pg-ease);
}
.pg-rail-btn .pg-ico { width: 20px; height: 20px; }
.pg-rail-btn:hover {
  color: var(--fg-strong);
  background: var(--glass-bg-subtle);
  border-color: var(--glass-border-subtle);
}
.pg-rail-btn:active { transform: scale(0.94); }
.pg-rail-btn[aria-expanded="true"], .pg-rail-btn.on {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--glass-bg-subtle));
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
/* hover/focus label tooltip */
.pg-rail [data-tip] { position: relative; }
.pg-rail [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-elevated);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg);
  box-shadow: var(--glass-specular-elevated);
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: 0;
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity var(--pg-dur) var(--pg-ease), transform var(--pg-dur) var(--pg-ease);
  transform: translateY(-50%) translateX(-4px);
}
.pg-rail [data-tip]:hover::after,
.pg-rail [data-tip]:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
  transition-delay: 0.12s;
}
.pg-rail [data-tip][aria-expanded="true"]::after { opacity: 0; transition-delay: 0s; }

.pg-rail-status {
  margin-top: auto; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 11px; cursor: default;
  transition: background var(--pg-dur) var(--pg-ease);
}
.pg-rail-status:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
.pg-rail-status .dot { width: 8px; height: 8px; }

.pg-rail-brand {
  width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0;
  position: relative;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 11px;
  background: none; color: var(--fg); cursor: pointer;
  transition: background 140ms var(--pg-ease), border-color 140ms var(--pg-ease), transform 120ms var(--pg-ease);
}
.pg-rail-brand:hover {
  background: var(--glass-bg-subtle);
  border-color: var(--glass-border-subtle);
}
.pg-rail-brand:active { transform: scale(0.94); }
.pg-brand-tile { width: 36px; height: 36px; display: block; }
.pg-brand-tile svg { width: 36px; height: 36px; display: block; border-radius: 8px; }
.pg-brand-img { width: 36px; height: 36px; display: block; border-radius: 10px; object-fit: cover; }
.pg-brand-bg { fill: var(--fg-strong, var(--fg)); }
.pg-brand-r { fill: var(--bg); }

/* same glass tile as the rest of the rail — the theme control is a tool, not a decoration */
.pg-rail-theme {
  margin-top: 0; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 11px; cursor: pointer;
  background: none; color: var(--muted); font: inherit;
  transition: color 150ms var(--pg-ease), background 150ms var(--pg-ease), border-color 150ms var(--pg-ease), transform 120ms var(--pg-ease);
}
.pg-rail-theme:hover {
  color: var(--fg-strong);
  background: var(--glass-bg-subtle);
  border-color: var(--glass-border-subtle);
}
.pg-rail-theme:active { transform: scale(0.94); }
.pg-theme-glyph { display: grid; place-items: center; line-height: 1; }
.pg-theme-glyph svg { width: 18px; height: 18px; display: none; }
/* the active glyph follows the theme mode the button carries */
[data-theme-btn][data-mode="light"] .pg-theme-glyph .ico-sun,
[data-theme-btn][data-mode="dark"] .pg-theme-glyph .ico-moon,
[data-theme-btn]:not([data-mode="light"]):not([data-mode="dark"]) .pg-theme-glyph .ico-auto { display: block; }

.pg-ico {
  width: var(--ico-md); height: var(--ico-md); display: block;
  fill: none; stroke: currentColor; stroke-width: var(--ico-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- main canvas ------------------------------------------------------ */
.pg-main {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: transparent; position: relative; width: 100%;
}
.pg-head {
  flex: none; height: var(--pg-head-h); display: flex; align-items: center; gap: var(--pg-2);
  padding: 0 16px; min-width: 0;
  background: transparent;
}
.pg-model-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(420px, 46vw);
  min-height: 34px; padding: 0 10px 0 8px; margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg); font: inherit; font-size: 13px; font-weight: 500; line-height: 16px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.pg-model-btn:hover {
  background: var(--card-2);
  border-color: var(--line-strong);
}
.pg-model-btn:active { transform: scale(0.98); }
.pg-model-ico { width: 17px; height: 17px; flex: none; color: var(--accent); }
.pg-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pg-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; margin-left: 2px; }
.pg-health { display: inline-flex; align-items: center; flex: none; margin-left: -2px; }
.pg-stats { font-size: var(--pg-meta-size); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-head-actions {
  margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none;
  position: relative;
}
.pg-iconbtn {
  width: 32px; height: 32px; min-height: 32px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg-soft); font: inherit; font-size: 0.95rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.pg-iconbtn:hover {
  color: var(--fg-strong);
  background: var(--card-2);
  border-color: var(--line-strong);
}
.pg-iconbtn:active { transform: scale(0.95); }
.pg-iconbtn .pg-ico { width: 17px; height: 17px; }

/* More actions menu in playground header */
.pg-more-wrap {
  position: relative;
  display: inline-flex;
}
.pg-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: pg-menu-pop 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"] .pg-more-menu {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-more-menu {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
}
@keyframes pg-menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pg-more-menu[hidden] {
  display: none !important;
}
.pg-more-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
  opacity: 0.7;
}
.pg-more-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pg-more-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  line-height: 1.3;
}
.pg-more-item:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  color: var(--fg-strong);
}
.pg-more-item .pg-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: none;
}
.pg-more-item:hover .pg-ico {
  color: var(--fg);
}
.pg-more-item.is-active {
  color: var(--accent);
}
.pg-more-item.is-active .pg-ico {
  color: var(--accent);
}
.pg-more-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}

/* --- inline temperature presets in more menu --- */
.pg-temp-inline-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  margin: 2px 2px 4px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  border-radius: 9px;
  border: 1px solid var(--glass-border-subtle);
}
.pg-temp-item {
  display: grid;
  gap: 1px;
  padding: 5px 8px;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
  color: var(--fg);
}
.pg-temp-item:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.pg-temp-item.is-active { background: var(--accent-soft); color: var(--accent); }
.pg-temp-item-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pg-temp-num { font-size: 11px; opacity: 0.75; }

/* --- message more options dropdown (ChatGPT / Claude style) --- */
.msg-more-details {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.msg-more-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--muted);
  transition: all 140ms ease;
  user-select: none;
}
.msg-more-summary::-webkit-details-marker,
.msg-more-summary::marker {
  display: none;
}
.msg-more-summary:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 8%, transparent);
}
.msg-more-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 70;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 24px));
  max-height: min(360px, 70vh);
  overflow-y: auto;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  animation: pg-menu-pop 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.msg-more-details.drop-down .msg-more-dropdown {
  bottom: auto;
  top: calc(100% + 6px);
}
:root[data-theme="dark"] .msg-more-dropdown {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg-more-dropdown {
    background: var(--card);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
}
.msg-more-dropdown .linkish {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg);
  border-radius: 6px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1.3;
}
.msg-more-dropdown .linkish svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted);
  transition: color 120ms ease;
}
.msg-more-dropdown .linkish:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  color: var(--fg-strong);
}
.msg-more-dropdown .linkish:hover svg {
  color: var(--fg-strong);
}
.msg-more-dropdown .linkish[data-is-danger="true"] {
  color: var(--danger);
}
.msg-more-dropdown .linkish[data-is-danger="true"] svg {
  color: var(--danger);
}
.msg-more-dropdown .linkish[data-is-danger="true"]:hover {
  background: color-mix(in oklab, var(--danger) 12%, transparent);
}
.msg-more-sep {
  height: 1px;
  background: var(--line);
  margin: 3px 5px;
  opacity: 0.7;
}


/* Island icon buttons (refresh / playground settings / theme). They are square,
   so they must not inherit the shared button padding — that squeezed the
   settings svg down to 4px wide and it rendered as a stray tick. One size and
   one stroke weight keeps the three glyphs reading as a set. */
.icobtn { padding: 0; }
.icobtn .pg-ico { width: var(--ico-md); height: var(--ico-md); flex: 0 0 auto; stroke-width: var(--ico-stroke); }
.icobtn .pg-theme-glyph svg { width: 18px; height: 18px; }
/* the picker's refresh is a smaller 28px button — square it off (the shared
   .ghost min-height was stretching it) and scale the glyph to match */
.icobtn.pg-pick-refresh { width: 28px; height: 28px; min-height: 28px; }
.pg-pick-refresh .pg-ico { width: 15px; height: 15px; stroke-width: 1.9; }

/* --- transcript ------------------------------------------------------- */
.pg-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--pg-5); padding: 24px max(16px, calc((100% - var(--pg-measure-px)) / 2));
  contain: layout paint; scrollbar-width: thin;
}
.pg-log::-webkit-scrollbar, .think-body::-webkit-scrollbar { width: 10px; }
.pg-log::-webkit-scrollbar-thumb, .think-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 3px solid var(--bg); }

/* --- empty state: the greeting is centred in the space above the dock --- */
.pg-main.is-empty .pg-log {
  flex: 0 0 auto; justify-content: flex-start; align-items: center;
  overflow: visible; padding: 0 16px 18px;
}
/* empty state = one centred block: greeting directly above the composer, the way ChatGPT /
   Gemini / Qwen present a new chat; the transcript only takes the space once it has turns.
   Auto margins centre the greeting+composer group without moving the top bar. */
.pg-main.is-empty { justify-content: flex-end; }
.pg-main.is-empty .pg-log { margin-top: 0; margin-bottom: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pg-main.is-empty .pg-dock { margin-bottom: 0; margin-top: 0; flex: none; }
.pg-empty { margin: 0 auto; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--pg-composer-w); }
.pg-greeting {
  margin: 0; font-size: 30px; line-height: 38px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--fg-strong, var(--fg)); text-align: center;
}
.pg-hint { color: var(--muted); font-size: 0.78rem; }

/* --- dock: composer + suggestions + hints ------------------------------ */
.pg-dock {
  width: 100%; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 12px); box-sizing: border-box;
}
.pg-dock > * {
  width: 100%; max-width: var(--pg-composer-w);
  margin-left: auto; margin-right: auto; box-sizing: border-box;
}
.pg-composer {
  position: relative; width: 100%; max-width: var(--pg-composer-w);
  margin-left: auto; margin-right: auto;
}
.pg-composer .pg-field,
:root[data-theme="light"] .pg-composer .pg-field {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 10px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  box-sizing: border-box;
  position: relative;
}
:root[data-theme="dark"] .pg-composer .pg-field {
  background: #141418;
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-composer .pg-field {
    background: #141418;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}
.pg-composer .pg-field:focus-within,
:root[data-theme="light"] .pg-composer .pg-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .pg-composer .pg-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 12px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-composer .pg-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 2px 12px rgba(0, 0, 0, 0.5);
  }
}
.pg-input-body {
  width: 100%;
  display: flex;
  min-height: 28px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.pg-composer textarea,
.pg-composer textarea:focus,
.pg-composer textarea:focus-visible {
  flex: 1 1 auto;
  min-height: 28px;
  max-height: 200px;
  width: 100%;
  margin: 0 !important;
  padding: 4px 0 4px 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  min-width: 0;
  letter-spacing: -0.012em;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box;
}
.pg-composer textarea::placeholder { color: var(--muted); opacity: 0.65; font-size: 14.5px; }

.pg-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 4px;
  min-height: 32px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.pg-composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}
.pg-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
}
.pg-composer-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
  user-select: none;
  font-family: inherit;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .pg-composer-hint { display: none; }
}

.pg-attach-btn {
  width: 30px; height: 30px; min-height: 30px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none !important; border-radius: 6px;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--muted); cursor: pointer;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: color 140ms ease, background 140ms ease, transform 120ms ease;
}
.pg-attach-btn:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 8%, transparent) !important;
}
.pg-attach-btn:active { transform: scale(0.92); }
.pg-attach-btn .pg-ico { width: 16px; height: 16px; stroke-width: 1.8; }

.pg-effort-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px; border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 4%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  transition: all 140ms ease;
}
.pg-effort-chip:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 8%, transparent) !important;
  border-color: color-mix(in oklab, var(--fg) 14%, transparent) !important;
}
.pg-effort-chip:active { transform: scale(0.96); }
.pg-effort-chip .pg-effort-bolt { width: 12px; height: 12px; flex: none; fill: var(--accent); }

.pg-chipsrow {
  display: flex; align-items: center; justify-content: center;
  min-height: 28px; margin: 8px auto 0; width: 100%; max-width: var(--pg-composer-w);
}
.pg-main:not(.is-empty) .pg-chipsrow { display: none; }
.pg-chips { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pg-chips .chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  min-height: 26px; padding: 3px 12px; font-size: 12px; border-radius: 9999px; flex: none;
  cursor: pointer; transition: all 140ms ease;
  letter-spacing: -0.01em;
}
.pg-chips .chip:hover { color: var(--fg); border-color: var(--line-strong); background: var(--card-2); }
.pg-chips .chip.on, .pg-chips .chip[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 12%, var(--card));
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); font-weight: 550;
  box-shadow: none;
}
.pg-mini {
  width: 30px; height: 30px; min-height: 30px; padding: 0; flex: none;
  display: grid; place-items: center; border: none; border-radius: 9px;
  background: none; color: var(--muted); cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.pg-mini:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
.pg-mini .pg-ico { width: 18px; height: 18px; }
.sendbtn {
  flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 9999px;
  background: #18181b; color: #ffffff;
  cursor: pointer;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .sendbtn {
  background: #f4f4f5; color: #09090b;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sendbtn {
    background: #f4f4f5; color: #09090b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}
.sendbtn-ico { width: 15px; height: 15px; display: block; }
.sendbtn:hover { transform: scale(1.05); filter: brightness(1.06); box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 30%, transparent); }
.sendbtn:active { transform: scale(0.92); }

/* --- composer attachments ---------------------------------------------- */
.pg-field.is-dragover { border-color: var(--accent) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); }
.pg-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--pg-border); width: 100%; }
.pg-att-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--pg-surface-2); border: 1px solid var(--pg-border); border-radius: 9999px;
  font-size: 12px; color: var(--fg); position: relative; max-width: min(220px, 100%); min-width: 0;
}
.pg-att-chip[role="button"] { cursor: pointer; transition: background var(--pg-dur) var(--pg-ease); }
.pg-att-chip[role="button"]:hover { background: color-mix(in oklab, var(--fg) 8%, var(--pg-surface-2)); }
.pg-att-chip.is-img { padding: 2px 8px 2px 2px; }
.pg-att-thumb {
  width: 32px; height: 32px; object-fit: cover; border-radius: 9999px; border: 1px solid var(--pg-border); flex: none;
  cursor: pointer; transition: transform var(--pg-dur) var(--pg-ease), filter var(--pg-dur) var(--pg-ease);
}
.pg-att-thumb:hover { filter: brightness(1.08); transform: scale(1.05); }
.pg-att-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px;
  background: color-mix(in oklab, var(--accent) 20%, var(--pg-surface)); color: var(--accent);
  text-transform: uppercase; flex: none;
}
.pg-att-badge.is-pdf {
  background: color-mix(in oklab, #e11d48 18%, var(--pg-surface));
  color: #f43f5e;
}
.pg-att-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pg-att-size { font-size: 11px; color: var(--muted); flex: none; }
.pg-att-del {
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-left: 2px;
  border: none; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; flex: none;
}
.pg-att-del:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); color: var(--fg); }

/* --- message attachments ------------------------------------------------ */
.msg-attachments { margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
/* Image grid, sized by how many images there are: one image gets a single
   generous tile, two split the row in half, three take a third each. Past
   three the last slot becomes a "+ N more" tile that swaps the set for the
   full grid (see imageGrid() in playground.js). */
.msg-images, .gen-gallery {
  display: grid; gap: 8px; width: 100%; max-width: 620px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
.msg-images[data-count="1"], .gen-gallery[data-count="1"] { grid-template-columns: minmax(0, 300px); }
.msg-images[data-count="2"], .gen-gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; }
.msg-img-preview {
  display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; border: 1px solid var(--pg-border);
  object-fit: cover; cursor: pointer; background: color-mix(in oklab, var(--fg) 5%, transparent);
  transition: transform var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
}
.msg-img-preview:hover { transform: scale(1.02); }
.msg-img-more {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0;
  border: 0; background: none; border-radius: 10px; overflow: hidden; cursor: pointer;
}
.msg-img-more img {
  display: block; width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; object-fit: cover;
  filter: brightness(0.5) saturate(0.9); transition: filter var(--pg-dur) var(--pg-ease);
}
.msg-img-more:hover img, .msg-img-more:focus-visible img { filter: brightness(0.38) saturate(0.95); }
.msg-img-more-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.msg-img-less {
  grid-column: 1 / -1; justify-self: start; margin-top: 2px; padding: 3px 10px;
  border: 1px solid var(--pg-border); border-radius: 999px; background: var(--pg-surface-2);
  color: var(--muted); font: inherit; font-size: 0.74rem; font-weight: 500; cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.msg-img-less:hover { color: var(--fg-strong); border-color: var(--glass-border); }
/* expanded generated media keeps the uniform tile frame but regains its card */
.gen-gallery .gen-media-card { max-width: 100%; }
.gen-gallery .gen-img-wrap { aspect-ratio: 3 / 2; min-height: 0; }
.gen-gallery .gen-img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-file-card {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--pg-border); border-radius: var(--pg-r-sm);
  background: var(--pg-surface-2); font-size: 12px; text-decoration: none; color: var(--fg);
  max-width: 100%; min-width: 0;
}
.msg.user .msg-file-card {
  background: color-mix(in oklab, var(--card) 60%, transparent);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--pg-border));
}
.msg-file-card[role="button"] { cursor: pointer; transition: background var(--pg-dur) var(--pg-ease); }
.msg-file-card[role="button"]:hover {
  background: color-mix(in oklab, var(--fg) 10%, var(--pg-surface-2));
}
.msg-file-card .msg-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.msg-file-card .msg-file-size { font-size: 11px; color: var(--muted); flex: none; }
.img-lightbox {
  display: flex; justify-content: center; align-items: center;
  max-height: 75vh; overflow: hidden; padding: 4px;
}
.img-lightbox-src {
  max-width: 100%; max-height: 75vh; object-fit: contain;
  border-radius: var(--pg-r-sm); border: 1px solid var(--pg-border);
}
#modal:has(.img-lightbox) .modal-card { width: min(92vw, 960px); max-height: 90vh; padding: 16px; }

.pg-attach-btn:focus-visible,
.sendbtn:focus-visible,
.msg-img-preview:focus-visible,
.pg-att-thumb:focus-visible,
.pg-att-chip[role="button"]:focus-visible,
.msg-file-card[role="button"]:focus-visible,
.pg-att-del:focus-visible,
.pg-model-btn:focus-visible,
.pg-iconbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- suggestion chips (a row under the composer, empty chats only) ------ */
.pg-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px auto 0; justify-content: center; width: 100%; max-width: var(--pg-composer-w); }
.pg-main:not(.is-empty) .pg-suggest { display: none; }
.pg-suggest button {
  flex: 0 1 auto; min-width: 0; max-width: 260px; min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--pg-border); border-radius: 999px; background: var(--pg-surface);
  color: var(--muted); font: inherit; font-size: 0.78rem; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: all var(--pg-dur) var(--pg-ease);
}
.pg-suggest button:hover { color: var(--fg); border-color: var(--pg-border-strong); background: var(--pg-surface-2); }

/* --- footer hints: hidden for a clean page; the shortcut reference lives in
   Settings, and #pg-count / #pg-meta stay in the DOM for scripts that set them */
.pg-foot { display: none; }
.pg-hint { color: var(--muted); font-size: 0.75rem; opacity: 0.8; text-align: center; }
.pg-hint kbd { border: 1px solid var(--pg-border); border-radius: 5px; padding: 0 4px; font-size: 0.9em; }
.pg-foot-meta { display: inline-flex; gap: var(--pg-3); min-width: 0; color: var(--muted); font-size: 0.75rem; opacity: 0.8; }
.pg-foot-meta #pg-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- generated media (images & video) ---------------------------------- */
.gen-media { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.gen-media-card {
  position: relative; display: inline-flex; flex-direction: column;
  border: 1px solid var(--glass-border-subtle); border-radius: var(--pg-r-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  overflow: hidden;
  box-shadow: var(--glass-specular); max-width: min(560px, 100%);
  transition: border-color var(--pg-dur) var(--pg-ease), box-shadow var(--pg-dur) var(--pg-ease);
}
.gen-media-card:hover { border-color: var(--glass-border); box-shadow: var(--glass-specular-elevated); }
.gen-img-wrap {
  position: relative; background: color-mix(in oklab, var(--fg) 4%, transparent);
  min-height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gen-img {
  display: block; width: 100%; max-height: 520px; object-fit: contain;
  cursor: pointer; transition: transform var(--pg-dur) var(--pg-ease);
}
.gen-img:hover { transform: scale(1.015); }
.gen-vid-wrap { position: relative; background: #000; border-radius: var(--pg-r-sm) var(--pg-r-sm) 0 0; overflow: hidden; }
.gen-vid { display: block; width: 100%; max-height: 480px; background: #000; }
.gen-media-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  background: var(--glass-bg-subtle);
  border-top: 1px solid var(--glass-border-subtle);
  font-size: 0.76rem; flex-wrap: wrap;
}
.gen-prompt-caption {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--fg-soft); font-style: italic;
}
.gen-media-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.gen-btn {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg-subtle); color: var(--fg); font-size: 0.72rem;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  transition: all var(--pg-dur) var(--pg-ease);
}
.gen-btn:hover { background: var(--glass-bg-elevated); border-color: var(--glass-border); }

/* --- model picker modality filter tabs & badges ------------------------ */
.pg-pick-filters { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; }
.pg-pick-tab {
  border: 1px solid var(--glass-border-subtle);
  background: transparent;
  color: var(--muted);
  padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: all var(--pg-dur) var(--pg-ease);
}
.pg-pick-tab:hover { color: var(--fg); border-color: var(--glass-border); background: var(--glass-bg-subtle); }
.pg-pick-tab.is-active, .pg-pick-tab[aria-pressed="true"] {
  background: var(--fg); color: var(--bg);
  border-color: var(--fg); font-weight: 600;
  box-shadow: none;
}
.pg-pick-item-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pg-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-probe-dots { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.model-probe-dots .dot { width: 7px; height: 7px; flex: 0 0 7px; }
.pg-pick-item-main > .model-probe-dots { gap: 3px; }
.pg-modality-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px;
  border-radius: 9999px; text-transform: uppercase; flex: none; line-height: 1.3;
}
.pg-modality-badge.image {
  background: color-mix(in oklab, #a855f7 18%, var(--glass-bg-subtle));
  color: #c084fc; border: 1px solid color-mix(in oklab, #a855f7 35%, transparent);
}
.pg-modality-badge.video {
  background: color-mix(in oklab, #ec4899 18%, var(--glass-bg-subtle));
  color: #f472b6; border: 1px solid color-mix(in oklab, #ec4899 35%, transparent);
}
.pg-modality-badge.text {
  background: var(--glass-bg-subtle);
  color: var(--muted); border: 1px solid var(--glass-border-subtle);
}

/* --- popovers ---------------------------------------------------------- */
.pg-dialog .pg-card {
  max-height: min(84dvh, 900px);
  width: min(620px, 100%); padding: 22px 24px 26px;
  background: var(--glass-bg-elevated);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-specular-elevated), 0 20px 54px -10px rgba(0, 0, 0, 0.45);
}
.pg-dialog .pg-sep.first { border-top: none; margin-top: 2px; padding-top: 0; }
.pg-dialog .modal-title { margin-right: 44px; }
.pg-dialog .muted { margin: 10px 0 0; }
.pg-dialog #pg-pick-q { margin-top: 2px; }
.pg-modelrow { display: flex; gap: 6px; }
.pg-modelrow input { flex: 1; min-width: 0; margin: 4px 0; }
.pg-browse { flex: none; width: 40px; padding: 0; }
.pg-param { display: flex; align-items: center; gap: var(--pg-3); margin: var(--pg-3) 0; }
.pg-param-lbl { flex: none; width: 96px; font-size: var(--pg-meta-size); color: var(--muted); text-transform: uppercase; letter-spacing: var(--pg-meta-track); }
.pg-param input[type="number"], .pg-param select { flex: 1; margin: 0; }
.pg-check { display: flex; align-items: center; gap: 7px; margin: var(--pg-3) 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--fg); }
.pg-check input { width: auto; }
.pg-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--pg-3); align-items: center; margin-top: 4px; }
.pg-quick .pg-param { margin: 6px 0; }
.pg-quick .pg-check { grid-column: 1 / -1; }

/* --- settings hero feature (web search) --- */
.pg-feature {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 0 2px; padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, var(--glass-border));
  border-radius: var(--pg-r-lg);
  background: var(--glass-bg-subtle);
  box-shadow: var(--glass-specular);
}
.pg-feature-ico {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}
.pg-feature-ico svg { width: 22px; height: 22px; }
.pg-feature-body { flex: 1; min-width: 0; }
.pg-feature-title { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-strong, var(--fg)); }
.pg-feature-desc { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }

/* iOS-style toggle wrapping a real checkbox (keyboard + screen-reader accessible) */
.pg-toggle { flex: none; position: relative; display: inline-flex; cursor: pointer; }
.pg-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pg-toggle-track {
  width: 48px; height: 28px; flex: none; border-radius: 999px;
  background: var(--line-strong); border: 1px solid transparent;
  transition: background 0.18s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pg-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.18s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pg-toggle input:checked ~ .pg-toggle-track { background: var(--accent); }
.pg-toggle input:checked ~ .pg-toggle-track .pg-toggle-knob { left: 23px; }
.pg-toggle input:focus-visible ~ .pg-toggle-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.pg-dialog kbd {
  border: 1px solid var(--pg-border); border-radius: 5px; padding: 0 5px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.85em; color: var(--fg-soft, var(--fg));
}

/* --- settings collapsible groups --- */
.pg-settings-group {
  margin: 10px 0;
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius);
  background: var(--glass-bg-subtle);
  overflow: hidden;
  transition: all 180ms ease;
}
.pg-settings-group[open] {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.05);
}
.pg-settings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  list-style: none;
  background: transparent;
  transition: background 140ms ease;
}
.pg-settings-summary::-webkit-details-marker {
  display: none;
}
.pg-settings-summary:hover {
  background: color-mix(in oklab, var(--fg) 5%, transparent);
}
.pg-settings-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-settings-group-title .pg-ico {
  width: 17px;
  height: 17px;
  color: var(--muted);
}
.pg-settings-chev {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  color: var(--muted);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-settings-group[open] .pg-settings-chev {
  transform: rotate(180deg);
}
.pg-settings-group-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--glass-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- messages --------------------------------------------------------- */
@keyframes pg-msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg { font-size: var(--pg-body-size); line-height: var(--pg-body-line); word-break: break-word; animation: pg-msg-in 160ms var(--pg-ease) both; }
.msg-head { display: flex; align-items: center; gap: var(--pg-2); margin-bottom: 10px; min-width: 0; }
.msg-avatar {
  width: 24px; height: 24px; flex: none; border-radius: var(--pg-r-xs); display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; background: var(--glass-bg-subtle); border: 1px solid var(--glass-border-subtle); color: var(--fg-soft);
}
.msg.assistant .msg-avatar {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--card-2));
  border-color: color-mix(in oklab, var(--accent) 20%, var(--line));
  box-shadow: none;
}
.msg-who { min-width: 0; display: flex; align-items: baseline; gap: var(--pg-2); }
.msg-name { font-size: var(--pg-meta-size); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.user {
  align-self: flex-end;
  width: fit-content;
  max-width: min(84%, var(--pg-user-measure));
  padding: 10px 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 140ms ease;
}
:root[data-theme="dark"] .msg.user {
  background: #18191e;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg.user {
    background: #18191e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
}
.msg.user .msg-body {
  max-width: none;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
}
.msg.user .msg-meta.user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  min-height: 20px;
  opacity: 0.65;
  transition: opacity 140ms ease;
}
.msg.user:hover .msg-meta.user {
  opacity: 1;
}
.msg.assistant { align-self: stretch; max-width: 100%; padding: 0; background: none; border: none; }
.msg.assistant.streaming .msg-body:not(:empty)::after { content: "▍"; opacity: 0.7; animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.msg.thinking { display: flex; flex-direction: column; }
.msg-wait { display: flex; align-items: center; gap: var(--pg-3); color: var(--muted); font-size: 0.85rem; }
.think-label { font-size: 0.85rem; }
.msg-meta { display: flex; align-items: center; gap: var(--pg-3); margin-top: var(--pg-2); max-width: var(--pg-measure); min-height: 28px; flex-wrap: wrap; }
.msg-stat { font-size: var(--pg-meta-size); color: var(--muted); font-family: "Geist Mono", ui-monospace, monospace; }
.msg-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity var(--pg-dur) var(--pg-ease); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg:has(details[open]) .msg-actions { opacity: 1; }
.msg-actions .linkish {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent;
  background: transparent;
  color: var(--muted); padding: 4px 9px; margin: 0; min-height: 26px; border-radius: 7px;
  font-size: var(--pg-meta-size); font-weight: 500; line-height: 1; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.msg-actions .linkish svg { flex: none; opacity: 0.85; }
.msg-actions .linkish:hover {
  background: var(--glass-bg-subtle);
  border-color: var(--glass-border);
  color: var(--fg);
}
.msg-actions .linkish[data-act="delete-msg"]:hover {
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: color-mix(in oklab, var(--danger) 40%, transparent);
  color: var(--danger);
}

/* reasoning continuation quick actions */
.msg-continue-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.msg-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--pg-r-sm, 8px);
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
}
.msg-continue-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.msg-continue-btn:active {
  transform: scale(0.97);
}
.msg-continue-ico {
  font-size: 0.72rem;
}
.msg-retry-medium-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--pg-r-sm, 8px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--fg);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.msg-retry-medium-btn:hover {
  background: var(--glass-bg-subtle);
  border-color: var(--accent);
}

.msg.error {
  align-self: stretch; max-width: 100%; padding: 12px 14px; display: flex; gap: var(--pg-3); align-items: flex-start;
  background: color-mix(in oklab, var(--danger) 10%, var(--glass-bg));
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  border: 1px solid color-mix(in oklab, var(--danger) 34%, var(--glass-border));
  border-radius: var(--pg-r-sm);
  box-shadow: 0 4px 16px -4px rgba(239, 68, 68, 0.15);
}
.msg-error-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
.msg-error-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-error-title { font-size: 0.86rem; color: var(--danger); font-weight: 700; }
.msg-error-text { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; color: var(--fg-soft); }
.msg-error-model { font-size: var(--pg-meta-size); color: var(--muted); }

/* rich text inside a message */
.msg code { background: color-mix(in oklab, var(--fg) 8%, transparent); padding: 2px 6px; border-radius: 6px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.86em; }
.msg pre { background: var(--code-bg); padding: 12px 14px; overflow-x: auto; margin: 0; font-size: 0.86em; line-height: 1.6; }
.msg pre code { background: none; padding: 0; }
.codewrap {
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden; margin: 12px 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: var(--glass-specular);
}
.codehead {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 12px;
  border-bottom: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg-subtle);
  font-size: var(--pg-meta-size);
  color: var(--muted); font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: var(--pg-meta-track); text-transform: uppercase;
}
.codehead-actions { display: inline-flex; align-items: center; gap: 4px; }
.codecopy, .codesave {
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border-subtle);
  color: var(--muted); font-size: var(--pg-meta-size);
  padding: 3px 8px; min-height: 24px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-weight: 500;
  transition: all 140ms ease;
}
.codecopy:hover, .codesave:hover {
  color: var(--fg); background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.msg h3, .msg h4, .msg h5, .msg h6 { margin: 12px 0 5px; font-size: 0.98em; letter-spacing: -0.01em; }
.msg h3:first-child, .msg h4:first-child { margin-top: 0; }
.msg p { margin: 8px 0; }
.msg hr { border: none; border-top: 1px solid var(--pg-border); margin: 12px 0; }
.msg ul, .msg ol { margin: 8px 0; padding-left: 22px; }
.msg blockquote { margin: 10px 0; padding: 2px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.msg a { color: var(--accent); text-underline-offset: 2px; }
.tblwrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--pg-border); border-radius: var(--pg-r-sm); }
.msg table { border-collapse: collapse; width: 100%; font-size: 0.86em; }
.msg th, .msg td { padding: 7px 11px; border-bottom: 1px solid var(--pg-border); text-align: left; }
.msg th { background: var(--pg-surface-2); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.msg tr:last-child td { border-bottom: none; }

/* --- model picker list ------------------------------------------------ */
.pg-pick-list { max-height: 320px; overflow-y: auto; padding: var(--pg-1); margin-top: 6px; }

/* --- effort control (chat bar) ------------------------------------------
   Compact level chip inside the composer; tapping it expands the full
   shader track in place. Knob centres sit exactly on the six stop dots,
   and the oversized knob swallows the fill's cut edge so tier switches
   glide seamlessly. */
.pg-effort-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 30px; padding: 0 10px; margin: 0;
  background: transparent; border: 1px solid var(--glass-border-subtle);
  border-radius: 8px; color: var(--muted); cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 150ms var(--pg-ease), border-color 150ms var(--pg-ease), background 150ms var(--pg-ease);
}
.pg-effort-chip:hover { color: var(--fg-strong); border-color: var(--glass-border); background: color-mix(in oklab, var(--fg) 5%, transparent); }
.pg-effort-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pg-effort-chip .pg-effort-bolt { width: 12px; height: 12px; }
.pg-effort-bolt { flex: none; fill: var(--accent); }
/* The track is a compact bubble parked in the composer's top-right corner:
   it floats over the bar (anchored above the effort chip) instead of
   stretching the field, so opening it never pushes the input row down. */
.pg-effort-panel {
  position: absolute; right: 8px; bottom: calc(100% + 10px); z-index: 40;
  width: 310px; margin: 0; user-select: none; font-family: inherit;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px) scale(0.96); transform-origin: 100% 100%;
  transition: opacity 160ms cubic-bezier(0.2, 0.9, 0.25, 1), transform 200ms cubic-bezier(0.2, 0.9, 0.25, 1), visibility 160ms linear;
}
.pg-effort-panel.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

/* Outer glow — burns with the active tier (--re-tier-glow is set by JS) */
.pg-effort-glow {
  position: absolute; inset: -3px; z-index: 0; pointer-events: none;
  border-radius: 20px; opacity: 0.6; filter: blur(10px);
  background:
    radial-gradient(130% 180% at 78% 8%, var(--re-tier-glow, rgba(168, 85, 247, 0.3)), transparent 72%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.15), rgba(168, 85, 247, 0.2));
  transition: opacity 0.3s ease, background 0.3s ease;
  animation: effort-glow-breathe 3.2s ease-in-out infinite;
}
@keyframes effort-glow-breathe {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  50% { opacity: 0.86; transform: scale(1.02); }
}
#pg-effort-panel[data-level="4"] .pg-effort-glow { animation-duration: 2.4s; }
#pg-effort-panel[data-level="5"] .pg-effort-glow { animation-duration: 1.7s; }
#pg-effort-panel[data-level="6"] .pg-effort-glow { animation-duration: 1.05s; opacity: 0.95; }

/* Inner card: crisp pure white in light mode, dark obsidian in dark mode */
.pg-effort-inner {
  position: relative; z-index: 1;
  background: #ffffff;
  border: 1px solid var(--line-strong, #e2e4ea);
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 14px 40px rgba(18, 24, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
}
:root[data-theme="dark"] .pg-effort-inner,
body[data-theme="dark"] .pg-effort-inner {
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 3px 10px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-inner {
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 3px 10px rgba(0, 0, 0, 0.4);
  }
}

/* Header */
.pg-effort-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;
}
.pg-effort-head-left {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; overflow: hidden;
}
.pg-effort-label-text {
  color: var(--muted, #64748b); letter-spacing: 0.03em; font-weight: 600; font-size: 13px;
}
.pg-effort-status {
  color: #64748b; text-transform: uppercase; will-change: transform, opacity, filter; vertical-align: middle;
  font-family: inherit; font-style: normal; font-weight: 700; font-size: 13px; display: inline-block;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
/* Per-level colors on status */
.pg-effort-status[data-level="0"] { color: #64748b; text-shadow: none; }
.pg-effort-status[data-level="1"] { color: #0891b2; text-shadow: 0 0 8px rgba(6, 182, 212, 0.6); }
.pg-effort-status[data-level="2"] { color: #059669; text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.pg-effort-status[data-level="3"] { color: #d97706; text-shadow: 0 0 10px rgba(245, 158, 11, 0.7); }
.pg-effort-status[data-level="4"] { color: #ea580c; text-shadow: 0 0 12px rgba(249, 115, 22, 0.75); }
.pg-effort-status[data-level="5"] { color: #9333ea; text-shadow: 0 0 14px rgba(168, 85, 247, 0.8); }
.pg-effort-status[data-level="6"] {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e11d48;
  text-shadow: 0 0 12px rgba(225, 29, 72, 0.75);
}

:root[data-theme="dark"] .pg-effort-status[data-level="0"] { color: var(--muted); }
:root[data-theme="dark"] .pg-effort-status[data-level="1"] { color: #22d3ee; }
:root[data-theme="dark"] .pg-effort-status[data-level="2"] { color: #34d399; }
:root[data-theme="dark"] .pg-effort-status[data-level="3"] { color: #fbbf24; }
:root[data-theme="dark"] .pg-effort-status[data-level="4"] { color: #fb923c; }
:root[data-theme="dark"] .pg-effort-status[data-level="5"] { color: #a78bfa; text-shadow: none; }
:root[data-theme="dark"] .pg-effort-status[data-level="6"] { color: #f43f5e; text-shadow: 0 0 12px rgba(244, 63, 94, 0.8); }

.pg-effort-close {
  color: var(--muted); cursor: pointer;
  background: transparent;
  border: 1px solid var(--line); border-radius: 6px;
  width: 24px; height: 24px; min-height: 24px; padding: 0; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pg-effort-close:hover {
  color: var(--fg-strong); background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: var(--line-strong);
}

/* Level Labels */
.pg-effort-level-labels {
  height: 15px; margin-bottom: 4px; position: relative; font-family: inherit;
}
.pg-effort-level-label {
  color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; font-weight: 600;
  position: absolute; top: 0; transform: translateX(-50%); transition: color 0.15s ease;
}
.pg-effort-level-label.is-active {
  transform: translateX(-50%); font-weight: 700; color: var(--fg);
}
.pg-effort-level-label.is-active[data-lbl="0"] { color: var(--muted); text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="1"] { color: #0891b2; text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="2"] { color: #059669; text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="3"] { color: #d97706; text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="4"] { color: #ea580c; text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="5"] { color: #7c3aed; text-shadow: none; }
.pg-effort-level-label.is-active[data-lbl="6"] { color: #e11d48; text-shadow: none; }

:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="1"] { color: #22d3ee; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="2"] { color: #34d399; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="3"] { color: #fbbf24; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="4"] { color: #fb923c; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="5"] { color: #a78bfa; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="6"] { color: #f43f5e; }

/* Capsule Pill Track */
.pg-effort-track-wrapper {
  position: relative;
  height: 28px;
  border-radius: 999px;
  isolation: isolate;
  overflow: visible;
  margin: 10px 0 6px;
}
.pg-effort-track-bg {
  position: absolute; inset: 0;
  border-radius: 999px;
  overflow: hidden;
  z-index: 0;
  background: var(--card-2);
  border: 1px solid color-mix(in oklab, var(--re-tier-color, var(--line)) 40%, var(--line));
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
:root[data-theme="dark"] .pg-effort-track-bg {
  background: #18191e;
  border: 1px solid color-mix(in oklab, var(--re-tier-color, #ffffff) 38%, rgba(255, 255, 255, 0.08));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-track-bg {
    background: #18191e;
    border: 1px solid color-mix(in oklab, var(--re-tier-color, #ffffff) 38%, rgba(255, 255, 255, 0.08));
  }
}

@keyframes ultracode-aura {
  0%, 100% { opacity: 0; }
}
.pg-effort-track-wrapper[data-level="6"] .pg-effort-track-bg {
  border-color: #e11d48;
  box-shadow: 0 0 16px rgba(225, 29, 72, 0.55), inset 0 0 14px rgba(225, 29, 72, 0.22);
  animation: effort-track-surge 1.4s ease-in-out infinite;
}
@keyframes effort-track-surge {
  0%, 100% { box-shadow: 0 0 12px rgba(225, 29, 72, 0.4), inset 0 0 10px rgba(225, 29, 72, 0.18); }
  50% { box-shadow: 0 0 26px rgba(225, 29, 72, 0.85), inset 0 0 20px rgba(225, 29, 72, 0.4); }
}
.pg-effort-track-wrapper[data-level="6"]::after {
  display: none;
}

/* Discrete indicator dots along track */
.pg-effort-dots-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.pg-effort-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--fg) 20%, transparent);
  transition: background 0.15s;
}
:root[data-theme="dark"] .pg-effort-dot {
  background: rgba(255, 255, 255, 0.25);
}
.pg-effort-dot.is-active {
  background: var(--re-tier-color, var(--fg));
  box-shadow: 0 0 7px var(--re-tier-glow, transparent);
}

/* Canvas filling pill */
.pg-effort-fire {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
  z-index: 1;
}
/* Point light aura */
.pg-effort-point-light {
  display: none !important;
}

/* Range input */
.pg-effort-range {
  position: absolute; inset: -4px 0; width: 100%; height: calc(100% + 8px); margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer; z-index: 5;
  background: transparent; outline: none;
}

/* The round thumb: crisp, clean circle */
.pg-effort-range::-webkit-slider-thumb {
  -webkit-appearance: none; cursor: grab;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 26px; height: 26px;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px color-mix(in oklab, var(--re-tier-color, #ffffff) 40%, transparent), 0 0 16px var(--re-tier-glow, transparent);
}
.pg-effort-range:active::-webkit-slider-thumb {
  cursor: grabbing; transform: scale(1.08);
}
.pg-effort-range.is-dragging::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pg-effort-range::-moz-range-thumb {
  cursor: grab;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 26px; height: 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px color-mix(in oklab, var(--re-tier-color, #ffffff) 40%, transparent), 0 0 16px var(--re-tier-glow, transparent);
}
.pg-effort-range:active::-moz-range-thumb {
  cursor: grabbing; transform: scale(1.08);
}
.pg-effort-range::-moz-range-track {
  background: transparent; border: none; height: 28px;
}

.pg-effort-empty {
  color: var(--muted); letter-spacing: 0.01em; text-align: center;
  padding: 10px 0 2px; font-size: 12.5px; font-weight: 500;
}
.pg-effort-empty[hidden] { display: none; }
.pg-effort-note { margin: 0; font-size: 0.75rem; color: var(--muted); }
.pg-effort-note[hidden] { display: none; }

/* Composer effort chip styling */
.pg-effort-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 26px; height: 26px; padding: 0 10px; margin: 0;
  border-radius: 9999px;
  background: var(--card-2);
  border: 1px solid var(--line);
  font-family: inherit; font-style: normal; font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: all 140ms ease;
}
:root[data-theme="dark"] .pg-effort-chip {
  background: #18191e;
  border-color: rgba(255, 255, 255, 0.08);
}
.pg-effort-chip:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--fg) 6%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
  }
}
.pg-effort-chip:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .pg-effort-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
  }
}
.pg-effort-chip[data-eff="default"] { color: #64748b; }
.pg-effort-chip[data-eff="low"] { color: #0891b2; border-color: rgba(6, 182, 212, 0.35); }
.pg-effort-chip[data-eff="medium"] { color: #059669; border-color: rgba(16, 185, 129, 0.35); }
.pg-effort-chip[data-eff="high"] { color: #d97706; border-color: rgba(245, 158, 11, 0.4); }
.pg-effort-chip[data-eff="xhigh"] { color: #ea580c; border-color: rgba(249, 115, 22, 0.45); }
.pg-effort-chip[data-eff="max"] { color: #9333ea; border-color: rgba(168, 85, 247, 0.45); }
.pg-effort-chip[data-eff="ultracode"] {
  color: #ffffff;
  background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  border-color: rgba(190, 18, 60, 0.9);
  box-shadow: 0 1px 2px rgba(159, 18, 57, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 1px rgba(136, 19, 55, 0.5);
}
:root[data-theme="dark"] .pg-effort-chip[data-eff="ultracode"] {
  color: #ffffff;
  background: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  border-color: rgba(244, 63, 94, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pg-effort-chip[data-eff="default"] .pg-effort-bolt { fill: #64748b; }
.pg-effort-chip[data-eff="low"] .pg-effort-bolt { fill: #06b6d4; }
.pg-effort-chip[data-eff="medium"] .pg-effort-bolt { fill: #10b981; }
.pg-effort-chip[data-eff="high"] .pg-effort-bolt { fill: #f59e0b; }
.pg-effort-chip[data-eff="xhigh"] .pg-effort-bolt { fill: #f97316; }
.pg-effort-chip[data-eff="max"] .pg-effort-bolt { fill: #a855f7; }
.pg-effort-chip[data-eff="ultracode"] .pg-effort-bolt { fill: #ffffff !important; }
@keyframes effort-chip-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(159, 18, 57, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 0 rgba(225, 29, 72, 0.6); }
  50% { box-shadow: 0 1px 2px rgba(159, 18, 57, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 16px 3px rgba(225, 29, 72, 0.5); }
}
.pg-effort-chip[data-eff="ultracode"] { animation: effort-chip-pulse 1.5s ease-in-out infinite; }
.pg-effort-chip .pg-effort-bolt {
  width: 12px; height: 12px; flex: none;
  transition: transform 0.25s ease, fill 0.25s ease;
}
.pg-effort-chip:hover .pg-effort-bolt {
  transform: scale(1.18);
}

/* Disabled state for unsupported models */
#pg-effort-panel.is-off .pg-effort-track-wrapper { pointer-events: none; opacity: 0.35; filter: saturate(0.3); }
#pg-effort-panel.is-off .pg-effort-level-labels { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .pg-effort-panel.open .pg-effort-glow { animation: none; }
  .pg-effort-point-light.is-on { animation: none; }
  .pg-effort-track-wrapper[data-level="6"] .pg-effort-track-bg { animation: none; }
  .pg-effort-chip[data-eff="ultracode"] { animation: none; }
}

/* Disabled state for unsupported models */
#pg-effort-panel.is-off .pg-effort-track-wrapper { pointer-events: none; opacity: 0.35; filter: saturate(0.3); }
#pg-effort-panel.is-off .pg-effort-level-labels { opacity: 0.35; }

.pg-pick-item {
  display: flex; justify-content: space-between; gap: var(--pg-3); width: 100%; text-align: left;
  background: none; border: 1px solid transparent; padding: 8px 10px; font-size: 0.82rem; border-radius: var(--pg-r-xs);
  color: var(--fg); min-height: 38px; transition: all var(--pg-dur) var(--pg-ease);
}
.pg-pick-item:hover, .pg-pick-item.is-active {
  background: var(--card-2);
  border-color: var(--line);
  box-shadow: none;
}
.pg-pick-item .muted { font-size: var(--pg-meta-size); flex: none; }
.pg-pick-meta:empty { display: none; }
.pg-pick-router-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 14px; flex: none; color: var(--accent);
}
.pg-pick-virtual .pg-pick-name { font-weight: 600; color: var(--accent); }

/* Model picker: use the phone's actual visible viewport and keep controls
   fixed while the long list scrolls. This also handles landscape phones,
   where width is generous but vertical space is scarce. */
@media (max-width: 700px), (max-height: 560px) {
  .overlay.pg-dialog {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .pg-dialog .pg-card {
    width: 100%;
    max-width: 620px;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pg-dialog .modal-title { margin-bottom: 6px; font-size: 1rem; }
  .pg-dialog .modal-x { top: 8px; right: 8px; }
  .pg-dialog #pg-pick-q { min-height: 42px; flex: 0 0 auto; }
  .pg-pick-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    flex: 0 0 auto;
  }
  .pg-pick-tab { min-width: 0; min-height: 38px; padding: 5px 7px; }
  .pg-pick-bar { flex: 0 0 auto; min-height: 32px; }
  .pg-pick-list {
    flex: 1 1 auto;
    min-height: 96px;
    max-height: none;
    margin-top: 3px;
    padding-right: 2px;
    overscroll-behavior: contain;
  }
  .pg-pick-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    min-height: 48px;
    padding: 8px;
  }
  .pg-pick-item-main { gap: 6px; }
  .pg-pick-item-main .model-brand-icon { width: 20px; height: 20px; }
  .pg-pick-meta { max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Very short landscape phones: reclaim vertical space without shrinking the
   44px touch targets below usability. */
@media (max-height: 430px) {
  .pg-dialog .pg-card { padding-top: 10px; padding-bottom: 8px; }
  .pg-dialog .modal-title { margin-bottom: 2px; }
  .pg-pick-filters { margin-top: 5px; }
  .pg-pick-bar { min-height: 28px; }
}

/* --- Ported components -------------------------------------------------
 * Beautiful UI ports — beautifului.dev, MIT © 2026 Shane Levine. Each block
 * below re-implements one upstream React + Tailwind component in plain CSS on
 * top of the design tokens above. Motion is CSS-only and stops under
 * prefers-reduced-motion. */

/* 1 — pixel-grid loader ------------------------------------------------- */
.pxl {
  display: inline-grid; grid-template-columns: repeat(3, 5px); grid-auto-rows: 5px;
  gap: 2px; flex: none;
}
.pxl i { background: currentColor; border-radius: 1px; animation: pxl-pulse 1.3s ease-in-out infinite; }
.pxl i:nth-child(1), .pxl i:nth-child(5), .pxl i:nth-child(9) { animation-delay: 0s; }
.pxl i:nth-child(2), .pxl i:nth-child(6) { animation-delay: 0.15s; }
.pxl i:nth-child(3), .pxl i:nth-child(7) { animation-delay: 0.3s; }
.pxl i:nth-child(4), .pxl i:nth-child(8) { animation-delay: 0.45s; }
@keyframes pxl-pulse {
  0%, 65%, 100% { opacity: 0.18; transform: scale(0.7); }
  30% { opacity: 1; transform: scale(1); }
}
.pg-clock { color: var(--muted); font-size: 0.78rem; }

/* shared disclosure (thinking trace + tool chips) ----------------------- */
.disc { margin: 0 0 10px; }
.disc-head {
  display: flex; align-items: center; gap: var(--pg-2); width: 100%; text-align: left;
  background: none; border: none; margin: 0; padding: 5px 2px; min-height: 30px;
  font: inherit; font-size: var(--pg-meta-size); color: var(--muted); border-radius: var(--pg-r-xs);
  transition: color var(--pg-dur) var(--pg-ease);
}
.disc-head::before { content: "▸"; flex: none; font-size: 0.7rem; transition: transform 0.12s ease; }
.disc-head[aria-expanded="true"]::before { transform: rotate(90deg); }
.disc-head:hover { color: var(--fg); }
.disc-body { padding: 8px 2px 2px 16px; border-left: 2px solid var(--pg-border); }

/* 2 — thinking trace (sleek thinking card & real-time reasoning) -------- */
.think-card {
  margin: 6px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
  max-width: var(--pg-measure);
}
.think-card.is-thinking {
  border-color: var(--line-strong);
  background: var(--card-2);
  box-shadow: none;
}
.think-card[hidden] { display: none; }

.think-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--pg-meta-size);
  color: var(--fg);
  text-align: left;
  border-radius: var(--pg-r-sm);
  transition: background var(--pg-dur) var(--pg-ease);
}
.think-head:hover {
  background: color-mix(in oklab, var(--fg) 5%, transparent);
}
.think-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.think-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.think-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.think-icon-wrap .pxl {
  color: var(--accent);
  display: inline-grid;
  grid-template-columns: repeat(3, 4px);
  grid-auto-rows: 4px;
  gap: 2px;
}
.think-icon-done {
  color: var(--up);
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
}
.think-state {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.think-state.done {
  color: var(--muted);
  font-weight: 500;
}
.think-time, .think-clock {
  color: var(--fg-soft);
  font-size: 0.76rem;
}

.think-head-mid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.think-pill, .think-tokens {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  color: var(--fg-soft);
  border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  letter-spacing: 0;
  white-space: nowrap;
  flex: none;
}
.think-card.is-thinking .think-pill,
.think-card.is-thinking .think-tokens {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 24%, transparent);
  color: var(--fg);
}
.think-preview {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  opacity: 0.85;
}
.think-head-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.think-chevron {
  flex: none;
  color: var(--muted);
  transition: transform 0.2s var(--pg-ease), color var(--pg-dur) var(--pg-ease);
}
.think-head[aria-expanded="true"] .think-chevron {
  transform: rotate(180deg);
}
.think-head:hover .think-chevron {
  color: var(--fg);
}

.think-body-wrap {
  border-top: 1px solid var(--pg-border);
  background: var(--code-bg);
  padding: 10px 14px 12px;
}
.think-body-wrap[hidden] { display: none; }

.think-body-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 7px;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--pg-border) 60%, transparent);
  font-size: 0.72rem;
  color: var(--muted);
}
.think-body-title {
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.think-copy {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: inherit;
  padding: 2px 7px;
  border-radius: var(--pg-r-xs);
  cursor: pointer;
  transition: color var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
}
.think-copy:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 8%, transparent);
}
.think-body {
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--fg-soft);
}
.think-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  font-weight: bold;
  animation: blink 0.9s steps(1) infinite;
}

@media (max-width: 600px) {
  .think-preview { display: none; }
  .think-head { padding: 6px 10px; }
  .think-body-wrap { padding: 8px 10px 10px; }
}

/* 4 — tool chips -------------------------------------------------------- */
.tool-chips { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; max-width: var(--pg-measure); }
.tool-chip { margin: 0; }
.tool-chip .disc-head {
  background: var(--pg-surface-2); border: 1px solid var(--pg-border);
  border-radius: var(--pg-r-xs); padding: 5px 10px; gap: var(--pg-2);
}
.tool-chip .disc-body { border-left: none; padding: 0; }
.tool-name { flex: none; color: var(--fg); font-weight: 600; font-size: var(--pg-meta-size); }
.tool-args { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pg-meta-size); }
.tool-body {
  margin: 6px 0 0; padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--pg-border);
  border-radius: var(--pg-r-xs); font-size: 0.74rem; line-height: 1.55; max-height: 240px;
  overflow: auto; white-space: pre;
}

/* 4b — web search sources (sleek reasoning-tab card) -------------------- */
.search-icon { color: var(--accent); flex: none; }
.search-body { padding: 6px; }
.search-results { display: flex; flex-direction: column; gap: 1px; }
.search-result {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: var(--pg-r-xs);
  text-decoration: none; color: inherit;
  transition: background var(--pg-dur) var(--pg-ease);
}
.search-result:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
.search-result-index { flex: none; min-width: 1.4em; text-align: right; color: var(--fg-soft); font-size: 0.72rem; }
.search-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-title {
  color: var(--accent); font-weight: 550; font-size: var(--pg-meta-size);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result:hover .search-result-title { text-decoration: underline; }
.search-result-domain { color: var(--fg-soft); font-size: 0.7rem; }
.search-result-snippet {
  color: var(--muted); font-size: 0.76rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 3 — source chips ------------------------------------------------------ */
.src-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; max-width: var(--pg-measure); }
.src-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.src-chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--pg-border); border-radius: 999px; padding: 3px 10px;
  font-family: ui-monospace, monospace; font-size: var(--pg-meta-size); color: var(--muted);
  transition: border-color var(--pg-dur) var(--pg-ease), color var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
}
.src-chip:hover { border-color: var(--pg-border-strong); color: var(--fg); background: var(--pg-surface-2); }
.src-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); flex: none; }
.src-out { font-size: 0.9em; color: var(--muted); }

/* 3 — follow-up row ----------------------------------------------------- */
.followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-width: var(--pg-measure); }
.followups button {
  border-radius: 999px; padding: 5px 12px; min-height: 32px; font-size: 0.78rem;
  background: var(--pg-surface-2); color: var(--fg);
  transition: background var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
}
.followups button:hover { background: var(--pg-surface); border-color: var(--pg-border-strong); }

/* 5 — fusion pipeline --------------------------------------------------- */
.fusion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--pg-meta-size); max-width: var(--pg-measure); }
.fusion-node {
  display: inline-flex; align-items: center; gap: 6px; max-width: 230px;
  border: 1px solid var(--pg-border); border-radius: 999px; padding: 3px 10px;
  font-family: ui-monospace, monospace; color: var(--muted);
}
.fusion-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fusion-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.55; flex: none; }
.fusion-node.ok { color: var(--fg); border-color: color-mix(in oklab, var(--up) 45%, var(--pg-border)); }
.fusion-node.ok .fusion-dot { background: var(--up); opacity: 1; }
.fusion-node.failed { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, var(--pg-border)); }
.fusion-node.failed .fusion-dot { background: var(--down); opacity: 1; }
.fusion-node.synth { background: var(--pg-surface-2); border-color: var(--pg-border-strong); color: var(--fg); }
.fusion-arrow { color: var(--muted); }

/* 6 — slash-command palette -------------------------------------------- */
.slash {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5;
  background: var(--glass-bg-elevated);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--pg-r-sm);
  box-shadow: var(--glass-specular-elevated), 0 16px 40px -8px rgba(0, 0, 0, 0.4);
  padding: 6px; max-height: 260px; overflow-y: auto;
}
.slash-list { display: flex; flex-direction: column; gap: 2px; }
.slash-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--pg-r-xs); padding: 8px 10px;
  min-height: 36px; font-size: 0.82rem; color: var(--fg);
  transition: all var(--pg-dur) var(--pg-ease);
}
.slash-item:hover, .slash-item.is-active {
  background: var(--glass-bg);
  border-color: var(--glass-border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.slash-name { flex: none; color: var(--accent); }
.slash-hint { flex: 1; text-align: right; font-size: var(--pg-meta-size); }

/* --- shared bits also used by the other tabs -------------------------- */
.pg-sep {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
  border-top: 1px solid var(--hairline); padding-top: var(--sp-3); margin-top: var(--sp-4);
}

/* --- design system: shared primitives -----------------------------------
   Vocabulary every tab can rely on. Everything below is token-driven and
   theme-agnostic: the same markup renders correctly in light and dark. */

/* --- pills & badges ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--fg-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pill.accent {
  background: var(--accent-soft); color: var(--accent-strong);
  border-color: var(--accent-line);
}
.pill.up { background: color-mix(in oklab, var(--up) 12%, transparent); color: var(--up); border-color: color-mix(in oklab, var(--up) 42%, transparent); }
.pill.warn { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 42%, transparent); }
.pill.down { background: color-mix(in oklab, var(--down) 12%, transparent); color: var(--down); border-color: color-mix(in oklab, var(--down) 42%, transparent); }

/* Status is never colour-only: the dot carries the shape, the label the words. */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--fg-soft);
}
.status .status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--muted) 16%, transparent);
}
.status[data-state="up"] .status-dot { background: var(--up); box-shadow: 0 0 0 3px color-mix(in oklab, var(--up) 18%, transparent); }
.status[data-state="unstable"] .status-dot { background: var(--unstable); box-shadow: 0 0 0 3px color-mix(in oklab, var(--unstable) 18%, transparent); }
.status[data-state="down"] .status-dot { background: var(--down); box-shadow: 0 0 0 3px color-mix(in oklab, var(--down) 18%, transparent); }
.status[data-state="up"] { color: var(--up); }
.status[data-state="unstable"] { color: var(--warn); }
.status[data-state="down"] { color: var(--down); }

/* --- definition lists & metric rows ------------------------------------- */
.dl { display: flex; flex-direction: column; margin: 0; }
.dl > div, .dl-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.dl > div:last-child, .dl-row:last-child { border-bottom: none; }
.dl dt, .dl-row dt {
  margin: 0; color: var(--fg-soft); font-size: var(--fs-sm); font-weight: var(--fw-regular);
}
.dl dd, .dl-row dd {
  margin: 0; color: var(--fg-strong); font-size: var(--fs-sm);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right; word-break: break-word;
}

.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-3);
}
.metric {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-2);
  min-width: 0;
}
.metric-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted);
}
.metric-value {
  margin-top: 3px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--fs-lg); line-height: 1.2;
  color: var(--fg-strong); font-variant-numeric: tabular-nums;
}
.metric-note { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }

/* --- dividers ------------------------------------------------------------ */
hr {
  height: 0; border: none; border-top: 1px solid var(--hairline);
  margin: var(--sp-5) 0;
}
.divider {
  height: 1px; background: var(--hairline); border: 0; margin: var(--sp-4) 0;
}
.divider-label {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--muted); font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.divider-label::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

/* --- skeletons ----------------------------------------------------------- */
.skeleton-card, .skeleton-row {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  min-height: 92px;
}
.skeleton-row { min-height: 40px; border-radius: var(--r-sm); margin: 6px 0; }
.skeleton-card::after, .skeleton-row::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 8%, transparent), transparent);
  animation: shimmer 1.6s var(--ease-in-out) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-text {
  display: block; height: 10px; border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--fg) 8%, transparent);
}
.skeleton-text.w70 { width: 70%; }
.skeleton-text.w45 { width: 45%; }
.skeleton-text.w30 { width: 30%; }

/* --- inline code --------------------------------------------------------- */
:not(pre) > code {
  background: var(--code-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--fg);
}

/* --- keys ---------------------------------------------------------------- */
kbd {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--fg-soft);
}

/* -------------------------------------------------------- responsive/a11y */
@media (max-width: 980px) {
  /* the sidebar becomes an off-canvas drawer; the rail folds into a top strip */
  .pg-side {
    position: fixed; top: 64px; bottom: 0; left: 0; z-index: 45;
    width: min(84vw, 300px); min-width: 0; visibility: hidden;
    border-right: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(-102%);
    transition: transform var(--pg-dur) var(--pg-ease), visibility var(--pg-dur) var(--pg-ease);
  }
  /* the top rail stays above the drawer + scrim so its toggle can always close the list */
  .pg-rail { position: relative; z-index: 46; }
  .pg-scrim { top: 64px; }
  .pg-app[data-side="open"] .pg-side {
    width: min(84vw, 300px); visibility: visible; transform: none;
  }
  .pg-side-inner { width: 100%; }
  .pg-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* the desktop rail→list→canvas column placement does not apply to the stacked layout */
  .pg-rail, .pg-side, .pg-main { grid-column: auto; grid-row: auto; }
  .pg-rail {
    flex-direction: row; align-items: center; gap: 4px; padding: 6px 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    border-right: none;
  }
  .pg-rail::-webkit-scrollbar { display: none; }
  .pg-rail-group { flex-direction: row; align-items: center; gap: 4px; }
  .pg-rail-brand { width: 40px; height: 40px; min-height: 40px; margin: 0 6px 0 0; border-radius: 11px; align-self: center; }
  .pg-brand-tile, .pg-brand-tile svg { width: 28px; height: 28px; }
  .pg-rail-theme { margin: 0 0 0 auto; }
  .pg-head { height: auto; min-height: 56px; padding: 4px 12px; flex-wrap: wrap; }
  .pg-main.is-empty .pg-log { flex: 1 1 auto; height: auto; justify-content: center; padding: 24px 16px; }
  .pg-log { padding: 16px; }
  .pg-dock > * { width: 100%; max-width: min(var(--pg-composer-w), calc(100% - 20px)); margin-left: auto; margin-right: auto; }
  .pg-dock { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
  .pg-greeting { font-size: 26px; line-height: 32px; }
  .pg-chips { overflow-x: auto; scrollbar-width: none; }
  .pg-chips::-webkit-scrollbar { display: none; }
  .msg.assistant, .msg.error { max-width: 100%; }
  .msg.user { max-width: min(100%, 88%); }
  /* two tiles fit a phone comfortably; the collapsed "+ N more" row keeps all
     three across so it never leaves a hole next to the expander */
  .msg-images, .gen-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .msg-images[data-count="1"], .gen-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .msg-images[data-count="3"], .gen-gallery[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the pill has no free space over the playground header here: step aside,
     but stay reachable — it slides back in on keyboard focus. Its own height
     clears the 10px offset, so the offset is added back to leave no sliver. */
  body:has(#panel-playground:not([hidden])) .site-head {
    transform: translateY(calc(-100% - 14px));
    transition: transform 160ms ease;
  }
  body:has(#panel-playground:not([hidden])) .site-head:has(:focus-visible) { transform: none; }
  body:has(#panel-playground:not([hidden])) .pg-app { transition: top 160ms ease, height 160ms ease; }
  body:has(#panel-playground:not([hidden])) .site-head:has(:focus-visible) ~ main .pg-app {
    top: 57px; height: calc(100vh - 57px); height: calc(100dvh - 57px);
  }
}

@media (max-width: 700px) {
  .pg-suggest button { max-width: none; flex: 1 1 45%; }
  .pg-foot .pg-hint { display: none; }
}

/* Touch devices: keep every action reachable. */
@media (pointer: coarse) {
  .pg-rail-btn { width: 46px; height: 46px; min-height: 46px; }
  .pg-rail-brand { width: 46px; height: 46px; min-height: 46px; }
  .pg-rail-theme { width: 46px; height: 46px; min-height: 46px; }
  .pg-rail-status { width: 46px; height: 46px; }
  .pg-chips .chip { min-height: 40px; padding: 8px 12px; }
  .pg-mini, .pg-iconbtn, .msg-actions .linkish, .row-actions .linkish, .pg-sess-ic, .codecopy, .codesave, .modal-x { min-height: 44px; min-width: 44px; }
  .pg-sess-open, .pg-sess { min-height: 44px; }
  .pg-pick-item { min-height: 44px; }
  .pg-suggest button { min-height: 44px; }
  .msg-actions { opacity: 1; }
  .pg-sess-tools { opacity: 1; }
  .sendbtn { width: 44px; height: 44px; min-height: 44px; }
  .pg-attach-btn { width: 44px; height: 44px; min-height: 44px; }
  .followups button, .slash-item { min-height: 44px; }
  .pg-composer .pg-field { padding-left: 12px; }
  .pg-composer-toolbar { min-height: 40px; }
  .pg-side-collapse, .pg-side-links button, .pg-side-footbtn { min-height: 44px; }
}

@media (hover: none) {
  .msg-actions { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pxl i { animation: none; opacity: 0.75; transform: none; }
  .disc-head::before { transition: none; }
  body:has(#panel-playground:not([hidden])) .site-head { transition: none; }
}

@media print {
  .pg-rail, .pg-dock, .toasts, .overlay { display: none !important; }
}
/* ------------------------------------------------------------------ admin */
.adm-head { margin: 4px 0 18px; }
.adm-head h2 { margin: 0 0 4px; }
.adm-sub { color: var(--muted); font-size: 0.9rem; margin: 0; max-width: 60ch; }
.adm-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.adm-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.adm-card:hover { border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); }
.adm-card-wide { grid-column: 1 / -1; }
.adm-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--fg) 2.5%, var(--card));
}
.adm-card-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.adm-card-ico svg { width: 18px; height: 18px; }
.adm-card-head h3 { margin: 0; font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.adm-card-desc { margin: 3px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.adm-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.adm-pill {
  margin-left: auto; flex: none; align-self: center;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; font-family: "Geist Mono", monospace;
  background: color-mix(in oklab, var(--muted) 15%, transparent); color: var(--muted);
  border: 1px solid color-mix(in oklab, var(--muted) 30%, transparent);
}
.adm-pill[data-state="on"] {
  background: color-mix(in oklab, var(--up) 14%, transparent); color: var(--up);
  border-color: color-mix(in oklab, var(--up) 42%, transparent);
}
.adm-pill[data-state="bad"] {
  background: color-mix(in oklab, var(--down) 14%, transparent); color: var(--down);
  border-color: color-mix(in oklab, var(--down) 42%, transparent);
}
.adm-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-inline input:not([type="checkbox"]) { flex: 1 1 200px; margin: 0; }
.adm-card .muted.small { font-size: 0.78rem; margin: 0; }
.adm-add {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 0; margin-top: 4px; background: color-mix(in oklab, var(--fg) 2%, transparent);
}
.adm-add > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 0.86rem;
  color: var(--accent); list-style: none; user-select: none;
}
.adm-add > summary::-webkit-details-marker { display: none; }
.adm-add > summary:hover { color: var(--fg-strong); }
.adm-add[open] > summary { border-bottom: 1px solid var(--line); }
.adm-add-body { padding: 6px 14px 14px; }
@media (max-width: 760px) {
  .adm-grid { grid-template-columns: 1fr; }
}

.channel {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); margin-bottom: 8px; flex-wrap: wrap;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.channel:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .channel:hover {
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.4);
}
.channel .cid { font-weight: 600; font-family: "Geist Mono", monospace; font-size: 0.90rem; }
.channel .curl { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 0.80rem; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .row-actions { margin-left: auto; gap: 6px; }
.channel .switch { margin-left: 2px; }
.channel.offrow { opacity: 0.55; }
.channel-status-badge {
  font-size: 0.72rem; padding: 2px 7px; border-radius: 999px;
  font-family: "Geist Mono", monospace; font-weight: 500;
}
.channel-status-badge.on {
  background: color-mix(in oklab, var(--up) 12%, transparent);
  color: var(--up); border: 1px solid color-mix(in oklab, var(--up) 40%, transparent);
}
.channel-status-badge.off {
  background: color-mix(in oklab, var(--warn) 12%, transparent);
  color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent);
}
.admin-form { display: flex; flex-direction: column; gap: 4px; }
.admin-key-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 200px;
  overflow-y: auto; margin: 6px 0 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px; background: var(--card-2);
}
.admin-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line);
}
.admin-key-row code {
  font-family: "Geist Mono", monospace; font-size: 0.82rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.admin-key-add-box {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.admin-key-add-box input { margin: 0; flex: 1; }

[hidden] { display: none !important; }

/* ------------------------------------------------- shared responsive/a11y */
@media (max-width: 860px) {
  .model-row { grid-template-columns: 22px 34px 28px minmax(0, 1fr) 84px; }
  .model-row .pname, .model-row .badges, .model-row .ctx { display: none; }
  .cat-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .cat-row .badges, .cat-row .ctx, .cat-row .badge.price { display: none; }
  .note { max-width: 100%; }
}

@media (max-width: 700px) {
  .site-head .brand-mark { width: 22px; height: 22px; }
  .site-head .head-inner { gap: 4px; padding: 3px 6px 3px 8px; min-height: 38px; }
  #tabs a { padding: 4px 10px; font-size: 0.81rem; }
  .head-side { margin-left: 0; }
  .wrap { padding: 0 16px; }
  .note { flex: 1 1 100%; order: 4; font-size: 0.8rem; }
  .search-wrap { flex-basis: 100%; max-width: none; }
}

/* Touch devices: keep every action reachable and visible. */
@media (pointer: coarse) {
  :root { --tap: 44px; }
  .switch { width: 46px; height: 28px; }
  .switch::before { content: ""; position: absolute; inset: -11px -6px; border-radius: 999px; }
  .switch::after { width: 22px; height: 22px; }
  .switch.on::after { left: 20px; }
  .dotbtn, .starbtn, .row-actions .linkish, .codecopy, .codesave, .modal-x { min-height: 44px; min-width: 44px; }
  .chip { min-height: 40px; padding: 8px 14px; }
  #tabs a { padding: 4px 12px; }
}

/* Phone header pill: maintain sleek compact proportions */
@media (max-width: 700px) {
  .site-head { padding: 0 8px; }
  .site-head .head-inner { gap: 3px; padding: 3px 6px 3px 8px; }
  .site-head .brand-mark { width: 20px; height: 20px; }
  #auto-refresh,
  body:has(#panel-playground:not([hidden])) #island-settings { display: none; }
  #tabs {
    flex: 0 1 auto; min-width: 0; padding: 2px; margin: 0;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs a { flex: 0 0 auto; padding: 4px 10px; font-size: 0.80rem; }
  /* the endpoint URL wraps instead of pushing its copy button off the page */
  .ep-table th { width: 62px; padding: 10px 6px 10px 12px; }
  .ep-table td { padding: 8px 6px; }
  .ep-table td:last-child { width: auto; padding-right: 12px; }
  /* Long endpoint paths wrap instead of pushing the page sideways.
     One extra element in the selector keeps this above any single-class
     rule a tab may add for its own table. */
  .ep-table td code { white-space: normal; overflow-wrap: anywhere; }
}

/* The catalogue filter popover is anchored to a chip near the right edge of
   the toolbar, so on a phone it would hang off the side of the screen.
   Anchoring it to the viewport keeps every chip reachable. */
@media (max-width: 700px) {
  .explorer-filter-expand {
    position: fixed;
    left: 12px; right: 12px;
    top: auto; bottom: 12px;
    width: auto; min-width: 0; max-width: none;
    max-height: 72vh;
    z-index: 60;
  }
}

/* Narrow windows and tablets: the models toolbar stacks — search on its own
   row, then the sort select. Kept as one nowrap line the select's width pushed
   the page 60px past the viewport once the toolbar ran out of room. */
@media (max-width: 980px) {
  .explorer-top { flex-wrap: wrap; }
  .explorer-top .search-wrap { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .skeleton-card::after, .skeleton-row::after { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --line: #8a8a8c; --hairline: #9a9a9d; --muted: #46474a;
    --seg-bg: #dfe2e7; --seg-active: #ffffff;
  }
  :root[data-theme="dark"] {
    --line: #6b6f78; --hairline: #5c6069; --muted: #b9b9c4;
    --seg-bg: #08090b; --seg-active: #30333b;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --line: #6b6f78; --hairline: #5c6069; --muted: #b9b9c4;
      --seg-bg: #08090b; --seg-active: #30333b;
    }
  }
  .badge { border-width: 2px; }
}

/* Forced colours: keep every boundary visible. */
@media (forced-colors: active) {
  .card, .modal-card, .overlay, .toast, .ep-table, .htable th, .htable td { border: 1px solid CanvasText; }
  .btn-primary, #tabs a[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .status .status-dot { forced-color-adjust: none; background: CanvasText; }
}

@media print {
  .site-head, .toasts, .overlay { display: none !important; }
}

/* --- Model Brand Icons (LobeHub-style vector logos) -------------------- */
.model-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 4px;
  line-height: 0;
  vertical-align: middle;
  color: var(--fg);
  transition: transform 120ms ease, opacity 120ms ease;
}
.model-brand-svg {
  display: block;
  width: 100%;
  height: 100%;
  flex: none;
}
.model-brand-icon.brand-openai { color: #10a37f; }
.model-brand-icon.brand-anthropic { color: #d97706; }
.model-brand-icon.brand-google { color: #4285f4; }
.model-brand-icon.brand-meta { color: #0668e1; }
.model-brand-icon.brand-deepseek { color: #3b82f6; }
.model-brand-icon.brand-mistral { color: #ff7000; }
.model-brand-icon.brand-qwen { color: #6366f1; }
.model-brand-icon.brand-flux { color: #ec4899; }
.model-brand-icon.brand-stability { color: #a855f7; }
.model-brand-icon.brand-xai { color: var(--fg); }
.model-brand-icon.brand-cohere { color: #34d399; }
.model-brand-icon.brand-perplexity { color: #20b2aa; }
.model-brand-icon.brand-kling { color: #06b6d4; }
.model-brand-icon.brand-midjourney { color: #f59e0b; }
.model-brand-icon.brand-microsoft { color: #00a4ef; }
.model-brand-icon.brand-generic { color: var(--accent); }

/* Model picker row with icon */
.pg-pick-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pg-pick-item-main .model-brand-icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  opacity: 0.95;
  flex: none;
}
.pg-pick-item:hover .pg-pick-item-main .model-brand-icon {
  opacity: 1;
  transform: scale(1.05);
}

/* Gateway and Catalog Model rows with icon */
.mrow .mid {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.mrow .mid .mid-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mrow .mid .model-brand-icon {
  width: 16px;
  height: 16px;
  opacity: 0.88;
}
.mrow:hover .mid .model-brand-icon {
  opacity: 1;
}

/* Playground assistant avatar with brand icon */
.msg-avatar.has-brand-icon {
  padding: 3px;
  background: var(--pg-surface-2);
}
.msg.assistant .msg-avatar.has-brand-icon {
  background: color-mix(in oklab, var(--accent) 10%, var(--pg-surface));
  border-color: color-mix(in oklab, var(--accent) 26%, var(--pg-border));
}
.msg-avatar .model-brand-icon {
  width: 16px;
  height: 16px;
}

/* --- UI smoothing ------------------------------------------------------
   One consistent motion language: GPU-friendly transforms/opacity only,
   calmer durations, no layout jank, legible text rendering. */
html { scroll-behavior: smooth; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }
button, input, select, textarea, a, .chip, .pg-pick-item, .pg-sess {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.pg-pick-list, .pg-log, .pg-side-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.modal-card, .pg-card { will-change: transform, opacity; }
.pg-effort-fill, .pg-effort-knob { backface-visibility: hidden; }
/* --- search toggle in composer --- */
.pg-search-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; min-height: 30px; padding: 0; margin: 0;
  border-radius: 999px; background: transparent; border: 1px solid var(--glass-border-subtle);
  color: var(--muted); cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 100ms ease;
}
.pg-search-toggle:hover { color: var(--fg-strong); border-color: var(--glass-border); background: color-mix(in oklab, var(--fg) 5%, transparent); }
.pg-search-toggle:active { transform: scale(0.95); }
.pg-search-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pg-search-toggle[aria-pressed="true"] {
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.pg-search-toggle .pg-ico { width: 14px; height: 14px; }





/* ------------------------------------------------------------- auth chip */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--fg-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
}
.auth-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-chip-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  line-height: 1.2;
}
:root[data-theme="dark"] .auth-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--fg-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--fg-soft);
  }
}
.auth-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg-strong);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .auth-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-chip:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
  }
}
.auth-chip.on {
  border-color: var(--line);
  color: var(--fg-strong);
  background: rgba(0, 0, 0, 0.04);
}
:root[data-theme="dark"] .auth-chip.on {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-chip.on {
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* --------------------------------------------------- full-screen auth page */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 88%, black);
  overflow-y: auto;
}
.auth-panel {
  width: min(440px, 100%);
  padding: 28px 28px 22px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  animation: auth-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes auth-pop {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.auth-brand { color: var(--accent); line-height: 0; }
.auth-title { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; font-weight: var(--fw-semibold); color: var(--fg-strong); }
.auth-sub { margin: 0 0 4px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-soft); }
.auth-oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, transform 100ms ease, background 140ms ease;
}
.auth-oauth-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.auth-oauth-btn:active { transform: translateY(0); }
.auth-oauth-github:hover { background: color-mix(in srgb, #e6edf3 8%, var(--card)); }
.auth-oauth-discord:hover { background: color-mix(in srgb, #5865f2 14%, var(--card)); }
.auth-oauth-discord svg { color: #5865f2; }
.auth-oauth-google:hover { background: color-mix(in srgb, #4285F4 12%, var(--card)); }
.auth-provider-note { margin: -2px 0 0; font-size: var(--fs-xs); text-align: center; color: var(--fg-soft); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 2px 0;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: flex; flex-direction: column; gap: 7px; }
.auth-form .lbl { margin-top: 5px; }
.auth-status { min-height: 1.1em; margin: 2px 0 0; color: var(--danger, #ff6b6b); font-size: 0.8rem; }
.auth-status:empty { min-height: 0; }
.auth-submit {
  min-height: 46px;
  margin-top: 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}
.auth-flip { margin: 2px 0 0; text-align: center; font-size: 0.82rem; }
.auth-legal { margin: 6px 0 0; font-size: 0.7rem; line-height: 1.5; text-align: center; }
.auth-id-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.auth-id-name svg { vertical-align: middle; }
body.auth-screen-open { overflow: hidden; }

/* ------------------------------------------- brainrot thinking video strip */
.think-video { margin: 8px 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.think-video-stage { position: relative; height: 170px; overflow: hidden; }
.think-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.think-video-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--card-2); border-top: 1px solid var(--line); }
.think-video-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.think-video-next { border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.72rem; cursor: pointer; padding: 2px 4px; }
.think-video-next:hover { color: var(--fg); }

/* ------------------------------------------------------- account dialog (redesigned) */
.acct {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Profile Header Card --- */
.acct-who {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--card-2);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08);
}
.acct-avatar-wrap {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--accent);
  box-shadow: var(--glass-specular);
}
.acct-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.acct-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.acct-who-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.acct-who-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acct-username {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.acct-role-admin {
  background: color-mix(in oklab, #f59e0b 16%, var(--card));
  color: #f59e0b;
  border: 1px solid color-mix(in oklab, #f59e0b 35%, transparent);
}
.acct-role-member {
  background: color-mix(in oklab, var(--accent) 14%, var(--card));
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.acct-db-sync {
  background: color-mix(in oklab, #10b981 12%, var(--card));
  color: #10b981;
  border: 1px solid color-mix(in oklab, #10b981 30%, transparent);
}
.acct-who-meta {
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Section Headings --- */
.acct-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acct-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.acct-count-pill {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg-soft);
}

/* --- Usage Cards --- */
.acct-usage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.acct-usage-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 150ms ease, background 150ms ease;
}
.acct-usage-card:hover {
  border-color: var(--line-strong);
}
.acct-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acct-usage-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.acct-usage-pct {
  font-size: 0.66rem;
  font-weight: 600;
}
.acct-usage-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.acct-usage-total {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.acct-usage-unit {
  font-size: 0.7rem;
}
.acct-quota-track {
  width: 100%;
  height: 4px;
  background: color-mix(in oklab, var(--line) 75%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin: 1px 0;
}
.acct-quota-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 300ms ease;
}
.acct-usage-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  flex-wrap: wrap;
}
.acct-usage-dot {
  opacity: 0.6;
}

/* --- Connected Accounts (Linked Sign-ins) --- */
.acct-id-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acct-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 150ms ease, background 150ms ease;
}
.acct-id-row:hover {
  border-color: var(--line-strong);
}
.acct-id-row.linked {
  border-color: color-mix(in oklab, var(--up) 35%, var(--line));
  background: color-mix(in oklab, var(--up) 3%, var(--bg));
}
.acct-id-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.acct-id-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--card-2);
  border: 1px solid var(--line);
  flex: none;
}
.acct-id-logo[data-provider="github"] { color: var(--fg); }
.acct-id-logo[data-provider="discord"] { color: #5865f2; }
.acct-id-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.acct-id-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg);
}
.acct-id-desc {
  font-size: 0.72rem;
}
.acct-id-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
  flex: none;
}
.acct-id-status.ok {
  color: var(--up);
  font-weight: 600;
}
.acct-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
}
.acct-btn-connect {
  min-width: 88px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease;
}
.acct-btn-connect:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.acct-btn-unlink {
  min-width: 88px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* --- API Keys --- */
.acct-key-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acct-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 150ms ease;
}
.acct-key-row:hover {
  border-color: var(--line-strong);
}
.acct-key-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.acct-key-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct-key-code {
  font-family: "Geist Mono", monospace;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  background: var(--card-2);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.acct-key-badge {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--card-2);
  color: var(--muted);
}
.acct-key-date {
  font-size: 0.7rem;
}
.acct-key-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.acct-empty-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}
.acct-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  flex: none;
}
.acct-empty-meta strong {
  font-size: 0.86rem;
  color: var(--fg);
  display: block;
}
.acct-empty-meta p {
  margin: 2px 0 0;
  font-size: 0.74rem;
}
.acct-btn-sm {
  padding: 5px 12px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.acct-newkey-box {
  display: flex;
  justify-content: flex-start;
}
.acct-btn-newkey {
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease;
}
.acct-btn-newkey:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
}
.acct-btn-newkey:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- New Key Alert Banner --- */
.acct-newkey {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid color-mix(in oklab, #f59e0b 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in oklab, #f59e0b 7%, var(--bg));
  box-shadow: 0 4px 16px -4px rgba(245, 158, 11, 0.15);
}
.acct-newkey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acct-newkey-head strong {
  font-size: 0.86rem;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acct-newkey-head .muted {
  font-size: 0.74rem;
}
.acct-newkey-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, #f59e0b 30%, var(--line));
}
.acct-newkey-row code {
  font-family: "Geist Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  word-break: break-all;
  flex: 1;
  color: var(--fg);
}

/* --- Base URL Card --- */
.acct-baseurl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}
.acct-baseurl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.acct-baseurl-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.acct-baseurl-box code {
  font-family: "Geist Mono", monospace;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.acct-baseurl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Footer --- */
.acct-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.acct-btn-close {
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--card-2);
  color: var(--fg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 150ms ease;
}
.acct-btn-close:hover {
  background: var(--card);
}
.acct-btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  border-radius: 6px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg-soft);
  cursor: pointer;
  transition: all 140ms ease;
}
.copy-btn:hover {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--fg);
}
.copy-btn.copied {
  background: color-mix(in oklab, var(--up) 15%, var(--card));
  border-color: color-mix(in oklab, var(--up) 40%, transparent);
  color: var(--up);
}
.copy-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  margin-left: -2px;
}

@media (max-width: 580px) {
  .acct-usage { grid-template-columns: 1fr; }
  .acct-id-row, .acct-key-row { flex-wrap: wrap; }
  .acct-btn-connect, .acct-btn-unlink, .acct-key-actions { margin-left: auto; }
}

/* ============================================================================
   LIQUID-GLASS DESIGN PASS + GLASS ON/OFF  (2026)
   - richer wet frost + real refraction on the floating nav island
   - fewer / softer borders, a little more breathing room
   - [data-glass="off"] → flat, compositing-free, fast (low-end hardware)
   Technique: SVG feDisplacementMap driving backdrop-filter on Chromium, with a
   plain frosted-blur fallback (deepika-builds/liquid-glass, nikdelvin/liquid-glass).
   ============================================================================ */

/* 1 — clean restrained lines.
   The palette now lives entirely in the token layer (:root / :root[data-theme]),
   so the glass toggle no longer re-tints borders: the material is flat in
   both modes and only the surfaces differ. */
:root[data-glass="on"] {
  --glass-blur: none;
  --glass-blur-heavy: none;
  --glass-blur-card: none;
}

/* 2 — clean surfaces without liquid distortion or oversaturated blurs */
:root[data-glass="on"] .head-inner,
:root[data-glass="on"] .modal-card,
:root[data-glass="on"] .pg-composer .pg-field {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 4 — de-cramp: a touch more room where rows sit tightest */
:root[data-glass="on"] .pg-pick-item { padding-block: 10px; }
:root[data-glass="on"] .pg-feature { gap: 14px; }
:root[data-glass="on"] .acct-id-row,
:root[data-glass="on"] .acct-key-row { padding: 12px 16px; }
:root[data-glass="on"] .acct-usage-card { padding: 14px 16px; }

/* 5 — GLASS OFF: flat, opaque, no backdrop compositing → fast on weak GPUs.
   Opaque tokens cascade to every glass surface; the universal rule kills any
   hardcoded backdrop-filter (and the nav-island refraction). */
:root[data-glass="off"] {
  --glass-bg: var(--surface-1);
  --glass-bg-subtle: var(--surface-2);
  --glass-bg-elevated: var(--surface-3);
  --glass-blur: none;
  --glass-blur-heavy: none;
  --glass-blur-card: none;
  --glass-specular: var(--elev-1);
  --glass-specular-elevated: var(--elev-3);
}
:root[data-glass="off"] *,
:root[data-glass="off"] *::before,
:root[data-glass="off"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root[data-glass="off"] .head-inner,
:root[data-glass="off"] .pg-composer,
:root[data-glass="off"] .pg-composer .pg-field,
:root[data-glass="off"] .modal-card,
:root[data-glass="off"] .pg-side,
:root[data-glass="off"] .pg-rail { background: var(--card); }

/* 6 — opt-in ad slot: a muted glass panel that follows the glass on/off toggle */
.pg-ad {
  position: relative;
  margin: 10px 0 2px;
  max-width: var(--pg-measure);
  border-radius: var(--pg-r-sm);
  overflow: hidden;
  min-height: 28px;
  background: var(--glass-bg-subtle);
  border: 1px solid var(--pg-border);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: var(--glass-specular);
}
.pg-ad iframe, .pg-ad img { display: block; width: 100%; border: 0; }
.pg-ad-label {
  position: absolute; top: 4px; right: 8px; z-index: 1;
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); opacity: 0.65; pointer-events: none;
}
.think-card:not(.is-thinking) .pg-ad { display: none; }

/* 7 — admin key-rotation panel (data from GET /admin/keyconfig) */
.kc-controls { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#kc-status { min-width: 3em; }
.kc-downed { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.kc-channel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.kc-ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.kc-keys { display: flex; flex-wrap: wrap; gap: 5px; }
.kc-key {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
}
.kc-key.down { border-color: color-mix(in oklab, #e5484d 55%, transparent); color: #e5484d; background: color-mix(in oklab, #e5484d 10%, transparent); }
.kc-badge { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.kc-badge.down { font-weight: 700; }
.kc-served { margin-top: 12px; }
.kc-served summary { cursor: pointer; }
.kc-served .htable { margin-top: 8px; }
.kc-ok { color: #2f9e44; }
.kc-err { color: #e5484d; font-weight: 600; }
/* locked (admin-only) switches and buttons for non-admins */
.switch:disabled, .starbtn:disabled { opacity: 0.45; cursor: not-allowed; }
/* per-channel key strategy pickers (round-robin | fallback) */
.kc-strategies { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; }
.kc-strategy-row { display: inline-flex; align-items: center; gap: 8px; }
.kc-strategy {
  font: inherit; font-size: 0.78rem; padding: 3px 6px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.channel .kc-strategy { font-size: 0.74rem; }

/* ------------------------------------------------------------------ tour */
/* These rules were missing entirely: startTour() appends a position:fixed
   inset:0 .tour-overlay on first visit, so with no CSS it was an invisible
   full-viewport div at z-index 200 that swallowed every click on the page
   (model picker included) until the user found the unstyled "skip tour" text. */
.tour-overlay {
  position: fixed; inset: 0; z-index: 200;
  /* The tour is a coach mark, not a modal: clicks must reach the app. */
  pointer-events: none;
}
.tour-ring {
  position: fixed; z-index: 201; pointer-events: none; border-radius: 12px;
  border: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 9999px color-mix(in oklab, #000 45%, transparent);
  transition: top 140ms ease, left 140ms ease, width 140ms ease, height 140ms ease;
}
.tour-card {
  position: fixed; z-index: 202; pointer-events: auto; width: min(320px, calc(100vw - 32px));
  padding: 16px 18px 14px; border-radius: var(--radius);
  background: var(--glass-bg-elevated, var(--card));
  border: 1px solid var(--glass-border, var(--line));
  box-shadow: var(--glass-specular-elevated, 0 18px 48px -12px rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--glass-blur-heavy, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur-heavy, blur(12px));
  animation: tour-pop 180ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes tour-pop { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: none; } }
.tour-text { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--fg); }
.tour-actions { display: flex; align-items: center; gap: 10px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dot { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 25%, transparent); }
.tour-dot.on { background: var(--accent); }
.tour-next, .tour-skip { font-size: 0.8rem; }