/* Relay gateway — design tokens, light/dark via system preference + manual override.
   Infused with UImaxxing™ tokens and Halaska Kit clean AI product aesthetics. */

@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Geist:wght@300;400;500;600;700&display=swap");

:root {
  /* Neutral system — refined crisp light palette with luminous glass layers */
  --bg: #f5f5f8;
  --fg: #0d0d12;
  --fg-strong: #050508;
  --fg-soft: #4a4a55;
  --muted: #696977;
  --line: #e4e4e9;
  --line-strong: #d3d3db;
  --card: #ffffff;
  --card-2: #f4f4f6;
  --rail: #eaebee;
  --accent: #4e5ce6;
  --accent-soft: #eef1fe;
  --code-bg: #f4f4f7;
  --up: #0a7d55;
  --unstable: #b25c15;
  --down: #c22b2b;
  --danger: #c22b2b;
  --warn: #b25c15;
  --focus: #4e5ce6;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --radius: 14px;
  --radius-sm: 9px;
  --tap: 34px;

  /* Glassmorphism system tokens */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-subtle: rgba(255, 255, 255, 0.52);
  --glass-bg-elevated: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-subtle: rgba(200, 205, 225, 0.45);
  --glass-blur: blur(16px) saturate(180%);
  --glass-blur-heavy: blur(24px) saturate(190%);
  --glass-blur-card: blur(12px) saturate(160%);
  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --glass-specular-elevated: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 12px 36px -6px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] {
  /* Neutral system — UImaxxing deep stage & true black surfaces with Halaska obsidian glow */
  --bg: #09090b;
  --fg: #f4f4f5;
  --fg-strong: #ffffff;
  --fg-soft: #a1a1aa;
  --muted: #84848f;
  --line: #18181b;
  --line-strong: #27272a;
  --card: #121215;
  --card-2: #18181c;
  --rail: #0e0e11;
  --accent: #6d7cff;
  --accent-soft: #161828;
  --code-bg: #0d0d10;
  --up: #34d399;
  --unstable: #ffb37a;
  --down: #f87171;
  --danger: #f87171;
  --warn: #ffb37a;
  --focus: #6d7cff;
  --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Glassmorphism system tokens — Dark obsidian crystalline glass */
  --glass-bg: rgba(18, 18, 22, 0.65);
  --glass-bg-subtle: rgba(15, 15, 18, 0.45);
  --glass-bg-elevated: rgba(22, 22, 28, 0.82);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(16px) saturate(190%);
  --glass-blur-heavy: blur(24px) saturate(200%);
  --glass-blur-card: blur(14px) saturate(170%);
  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 32px -4px rgba(0, 0, 0, 0.6);
  --glass-specular-elevated: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 44px -8px rgba(0, 0, 0, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b;
    --fg: #f4f4f5;
    --fg-strong: #ffffff;
    --fg-soft: #a1a1aa;
    --muted: #84848f;
    --line: #18181b;
    --line-strong: #27272a;
    --card: #121215;
    --card-2: #18181c;
    --rail: #0e0e11;
    --accent: #6d7cff;
    --accent-soft: #161828;
    --code-bg: #0d0d10;
    --up: #34d399;
    --unstable: #ffb37a;
    --down: #f87171;
    --danger: #f87171;
    --warn: #ffb37a;
    --focus: #6d7cff;
    --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);

    --glass-bg: rgba(18, 18, 22, 0.65);
    --glass-bg-subtle: rgba(15, 15, 18, 0.45);
    --glass-bg-elevated: rgba(22, 22, 28, 0.82);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-blur: blur(16px) saturate(190%);
    --glass-blur-heavy: blur(24px) saturate(200%);
    --glass-blur-card: blur(14px) saturate(170%);
    --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 32px -4px rgba(0, 0, 0, 0.6);
    --glass-specular-elevated: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 44px -8px rgba(0, 0, 0, 0.75);
  }
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(at 15% 15%, color-mix(in oklab, var(--accent) 7%, transparent) 0px, transparent 55%),
    radial-gradient(at 85% 20%, color-mix(in oklab, #38bdf8 5%, transparent) 0px, transparent 50%),
    radial-gradient(at 50% 90%, color-mix(in oklab, var(--accent) 6%, transparent) 0px, transparent 60%);
  background-attachment: fixed;
  color: var(--fg);
  font: 14px/1.55 "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;
}

:root[data-theme="dark"] body {
  background-image:
    radial-gradient(at 10% 12%, rgba(109, 124, 255, 0.12) 0px, transparent 55%),
    radial-gradient(at 85% 15%, rgba(56, 189, 248, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 85%, rgba(147, 51, 234, 0.08) 0px, transparent 60%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image:
      radial-gradient(at 10% 12%, rgba(109, 124, 255, 0.12) 0px, transparent 55%),
      radial-gradient(at 85% 15%, rgba(56, 189, 248, 0.07) 0px, transparent 50%),
      radial-gradient(at 50% 85%, rgba(147, 51, 234, 0.08) 0px, transparent 60%);
  }
}

body.overlay-open { overflow: hidden; }

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

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

h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.14; margin: 26px 0 10px; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; margin: 38px 0 8px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2:first-child { margin-top: 18px; }
.sub { color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); font-size: 0.88rem; }
.count { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.warn-text { color: var(--warn); }
.lbl { display: block; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); margin: 12px 0 4px; text-transform: uppercase; }
.lbl-inline { font-size: 0.78rem; color: var(--muted); }
.legend { margin-top: 10px; max-width: 92ch; }
.empty-state { padding: 22px 4px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.empty { padding: 10px 4px; }

.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(--card); color: var(--fg); border: 1px solid var(--line-strong);
  padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* ------------------------------------------------------------------ header */
/* floating dynamic-island top bar: one compact pill, centred */
.site-head {
  position: sticky; top: 10px;
  display: flex; justify-content: center;
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 9; padding: 0 12px;
  /* the bar is full-width but only the pill is visible: let clicks fall
     through the empty areas (e.g. onto the playground's model button) */
  pointer-events: none;
}
.site-head .head-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  width: auto; max-width: 100%; min-height: 0; margin: 0; padding: 5px 7px 5px 9px;
  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: 999px;
  box-shadow: var(--glass-specular-elevated), 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}
.site-head .brand { font-size: 0.92rem; }
#tabs {
  display: flex; gap: 2px; margin: 0;
  background: none; border: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-head .head-side { gap: 2px; }
.site-head .note { display: none; }
/* playground settings live in the island too, so every tab shares one bar —
   only shown while the playground is the active tab */
#island-settings { display: none; }
body:has(#panel-playground:not([hidden])) #island-settings { display: inline-flex; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; flex: none; object-fit: cover; }
.brand span { color: var(--muted); font-weight: 400; }
#tabs {
  display: flex; gap: 2px; margin: 0;
  background: none; border: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#tabs a {
  color: var(--muted); text-decoration: none; font-size: 0.90rem; font-weight: 500;
  padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: all 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
#tabs a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 6%, transparent); }
#tabs a[aria-selected="true"] {
  color: var(--fg-strong);
  background: var(--card);
  border-color: var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] #tabs a[aria-selected="true"] {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.head-side { display: flex; align-items: center; gap: 8px; }
.note { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icobtn {
  width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  border-radius: var(--radius-sm); font-size: 1rem; cursor: pointer; flex: none;
  box-shadow: var(--glass-specular);
  transition: border-color 150ms ease, background 150ms ease, transform 120ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.icobtn:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg-elevated);
  transform: translateY(-1px);
}
.icobtn:active { transform: scale(0.95); }
.icobtn .pg-theme-glyph svg { width: 16px; height: 16px; }
.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 */
.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);
  transition: border-color 160ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 160ms cubic-bezier(0.2, 0.9, 0.25, 1), transform 160ms ease;
}
.pad { padding: 6px 18px 18px; }
.pad .pg-sep.first { border-top: none; margin-top: 0; padding-top: 0; }

button, .ghost, .filelabel {
  cursor: pointer; font: inherit; font-size: 0.85rem; padding: 7px 14px;
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm); min-height: var(--tap);
  transition: border-color 150ms ease, background 150ms ease, transform 120ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 150ms ease;
}
button:hover, .ghost:hover, .filelabel:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg-elevated);
  box-shadow: var(--shadow);
}
button:active, .ghost:active { transform: scale(0.98); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
button.danger, .ghost.danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, var(--line)); }
.filelabel { display: inline-flex; align-items: center; }

input[type="search"], input[type="text"], input[type="password"], input[type="number"], input:not([type]), textarea, select {
  width: 100%; padding: 9px 13px;
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg); font: inherit; margin: 4px 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent);
  background: var(--glass-bg-elevated);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent), var(--glass-specular);
}
input[readonly] { background: color-mix(in oklab, var(--card-2) 60%, transparent); color: var(--muted); }
textarea { resize: vertical; }
input[type="range"] { padding: 0; accent-color: var(--accent); }
input[type="checkbox"], select { accent-color: var(--accent); }
.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: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg-subtle);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: var(--glass-specular);
  margin: 14px 0;
}
.banner.error { border-color: color-mix(in oklab, var(--danger) 45%, var(--line)); color: var(--danger); }

/* ------------------------------------------------------------------- hero */
.hero { margin-top: 8px; }
.ep-table {
  width: 100%; margin: 20px 0; border-collapse: collapse; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: var(--glass-specular-elevated);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
:root[data-theme="dark"] .ep-table {
  box-shadow: var(--glass-specular-elevated);
}
.ep-table:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-border));
}
.ep-table tr {
  transition: background 120ms ease;
}
.ep-table tr:hover {
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.ep-table tr + tr { border-top: 1px solid var(--glass-border-subtle); }
.ep-table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted);
  font-weight: 600; text-transform: uppercase; padding: 11px 16px; width: 84px; white-space: nowrap;
}
.ep-table td { padding: 9px 8px; min-width: 0; }
.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: 3px 8px;
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border-subtle);
  border-radius: 6px; font-size: 0.84rem; color: var(--fg);
}
.ep-table td:last-child { padding-right: 16px; width: 84px; text-align: right; }
.ep-table .ghost.copy {
  min-height: 26px; padding: 2px 10px; font-size: 0.75rem; border-radius: 999px;
  font-family: "Geist Mono", monospace; font-weight: 500;
  transition: all 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ep-table .ghost.copy:hover {
  background: var(--accent); color: #ffffff; border-color: var(--accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent);
  transform: translateY(-1px);
}

/* --------------------------------------------------------- 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);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: var(--glass-specular);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 160ms cubic-bezier(0.2, 0.9, 0.25, 1), 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 {
  transform: translateY(-2px);
  box-shadow: var(--glass-specular-elevated), 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-border));
}
:root[data-theme="dark"] .pcard:hover {
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
.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 {
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; min-height: 30px;
  font-family: "Geist Mono", ui-monospace, monospace; cursor: pointer;
  transition: all 160ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.chip:hover { border-color: var(--line-strong); background: var(--card-2); transform: translateY(-1px); }
.chip.on, .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.router-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }

/* --- 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; }
/* 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;
}
.router-lbl {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-right: 2px;
}

/* ------------------------------------------------------------- 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.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); box-shadow: 0 0 8px color-mix(in oklab, var(--up) 60%, transparent); }
.dot.unstable { background: var(--unstable); }
.dot.down { background: var(--down); }
.dot.up, .dot.unstable, .dot.down { opacity: 1; }
.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 */
.htable { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 10px; }
.htable th, .htable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.mmodal-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0; }
.mmodal-list .mrow { padding: 4px 12px; gap: 8px; }
.mmodal-list .badges { margin-left: auto; }
.msearch { margin: 10px 0 2px; }
.codeblock {
  padding: 14px; overflow: auto; font-size: 0.82rem; background: var(--code-bg);
  border-radius: var(--radius-sm); border: 1px solid var(--line); white-space: pre-wrap;
  max-height: 420px;
}
details summary { cursor: pointer; }
.detail .bars { height: 44px; }
.warn-text { color: var(--warn); }

/* --------------------------------------------------------------- overlays */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, #000 55%, transparent);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  padding: 20px;
  animation: overlay-fade 160ms 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;
  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);
  border-radius: var(--radius);
  box-shadow: var(--glass-specular-elevated), 0 24px 64px -12px rgba(0, 0, 0, 0.45);
  animation: modal-pop 180ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes modal-pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
.modal-title { margin: 0 40px 10px 0; font-size: 1.1rem; letter-spacing: -0.01em; font-weight: 600; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; padding: 0; min-height: 34px; border-radius: 999px; }
.confirm-card { width: min(460px, 100%); }
.confirm-actions { justify-content: flex-end; }
.confirm-actions > button { flex: none; min-width: 110px; }

.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 36px)); }
.toast {
  background: var(--fg); color: var(--bg); padding: 10px 15px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 500; box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4); display: flex; gap: 10px; align-items: center;
  animation: toast-in 0.2s cubic-bezier(0.2, 0.9, 0.25, 1);
  letter-spacing: -0.01em;
}
.toast-error { background: var(--danger); color: #ffffff; }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
.toast-action { background: none; border: 1px solid currentColor; color: inherit; padding: 3px 9px; min-height: 26px; font-size: 0.8rem; border-radius: 5px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: 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;
  --pg-composer-r: 999px;
  --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.72rem;
  --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: rgba(12, 12, 16, 0.60);
  --pg-side-bg: rgba(14, 14, 18, 0.70);
  --pg-composer-bg: rgba(20, 20, 26, 0.78);
  --pg-composer-line: rgba(255, 255, 255, 0.12);
  --pg-surface: rgba(18, 18, 22, 0.65);
  --pg-surface-2: rgba(24, 24, 30, 0.55);
  --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: rgba(12, 12, 16, 0.60);
    --pg-side-bg: rgba(14, 14, 18, 0.70);
    --pg-composer-bg: rgba(20, 20, 26, 0.78);
    --pg-composer-line: rgba(255, 255, 255, 0.12);
    --pg-surface: rgba(18, 18, 22, 0.65);
    --pg-surface-2: rgba(24, 24, 30, 0.55);
    --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:
    radial-gradient(at 0% 0%, color-mix(in oklab, var(--accent) 8%, transparent) 0px, transparent 45%),
    radial-gradient(at 100% 10%, color-mix(in oklab, #38bdf8 6%, transparent) 0px, transparent 40%),
    radial-gradient(at 50% 90%, color-mix(in oklab, var(--accent) 7%, transparent) 0px, transparent 55%);
  overflow: hidden;
}
:root[data-theme="dark"] .pg-app {
  background-image:
    radial-gradient(at 5% 5%, rgba(109, 124, 255, 0.14) 0px, transparent 45%),
    radial-gradient(at 95% 8%, rgba(56, 189, 248, 0.08) 0px, transparent 40%),
    radial-gradient(at 50% 85%, rgba(147, 51, 234, 0.09) 0px, transparent 55%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-app {
    background-image:
      radial-gradient(at 5% 5%, rgba(109, 124, 255, 0.14) 0px, transparent 45%),
      radial-gradient(at 95% 8%, rgba(56, 189, 248, 0.08) 0px, transparent 40%),
      radial-gradient(at 50% 85%, rgba(147, 51, 234, 0.09) 0px, transparent 55%);
  }
}
/* 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);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  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: 40px; flex: none; padding: 0 8px;
}
.pg-side-mark { width: 24px; height: 24px; border-radius: 6px; flex: none; object-fit: cover; }
.pg-side-collapse {
  flex: none; width: 32px; height: 32px; min-height: 32px; 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,
   the list flows directly beneath with no separated button card */
.pg-side-chats-head {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 4px; padding: 0 0 0 8px; min-height: 32px;
}
.pg-side-chats-head .pg-side-label { flex: 1; min-width: 0; margin: 0; padding: 0; }
.pg-side-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 10px; margin: 0;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); font: inherit; font-size: 0.80rem; font-weight: 600; cursor: pointer;
  transition: color 140ms var(--pg-ease), background 140ms var(--pg-ease), border-color 140ms var(--pg-ease);
}
.pg-side-add:hover {
  color: var(--fg-strong); background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: var(--glass-border-subtle);
}
.pg-side-add:active { transform: scale(0.97); }
.pg-side-add .pg-ico { width: 14px; height: 14px; 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(--accent) 15%, var(--glass-bg-subtle));
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
}
.pg-sess.on::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px; 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: 8px;
}
.pg-side-links { display: flex; flex-direction: column; gap: 2px; }
.pg-side-links button {
  display: flex; align-items: center; min-height: 34px; padding: 0 8px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--muted);
  font: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer;
  transition: color 130ms var(--pg-ease), background 130ms var(--pg-ease), border-color 130ms var(--pg-ease);
}
.pg-side-links button:hover {
  color: var(--fg-strong); background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: var(--glass-border-subtle);
}
.pg-side-foot-row { display: flex; gap: 8px; }
.pg-side-footbtn {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 8px; background: var(--glass-bg-subtle); border: 1px solid var(--glass-border-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9px; color: var(--muted); font: inherit; font-size: 0.80rem; font-weight: 500; cursor: pointer;
  transition: color 140ms var(--pg-ease), background 140ms var(--pg-ease), border-color 140ms var(--pg-ease);
}
.pg-side-footbtn:hover {
  color: var(--fg-strong); background: var(--glass-bg-elevated);
  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);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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: 10px 0 10px 10px; }
  .pg-rail {
    background: var(--pg-side-bg);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border);
    border-right: 0;
    border-radius: var(--pg-r-lg) 0 0 var(--pg-r-lg);
    box-shadow: var(--glass-specular), -14px 0 34px -20px rgba(15, 23, 42, 0.28);
  }
  .pg-side {
    border: 1px solid var(--glass-border);
    border-left: 0;
    border-radius: 0 var(--pg-r-lg) var(--pg-r-lg) 0;
    box-shadow: var(--glass-specular), 14px 0 34px -20px rgba(15, 23, 42, 0.28);
  }
  .pg-app[data-side="closed"] .pg-rail {
    border-right: 1px solid var(--glass-border);
    border-radius: var(--pg-r-lg);
  }
  .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(--fg-strong);
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: var(--glass-specular);
}
/* open-panel marker: accent pill on the rail's left edge */
.pg-rail-btn[aria-expanded="true"]::before {
  content: ""; position: absolute; left: -6px; top: 50%; translate: 0 -50%;
  width: 3px; height: 18px; border-radius: 3px; background: var(--accent);
}
/* 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: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  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: 38px; padding: 0 12px; margin: 0;
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border-subtle);
  border-radius: 12px;
  color: var(--fg); font: inherit; font-size: 15px; font-weight: 500; line-height: 16px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pg-model-btn:hover {
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.pg-model-ico { width: 18px; height: 18px; flex: none; color: var(--accent); }
.pg-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.65; }
.pg-health { display: inline-flex; align-items: center; flex: none; }
.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; gap: 4px; flex: none; }
.pg-iconbtn {
  width: 36px; height: 36px; min-height: 36px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--pg-r-xs);
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fg-soft); font: inherit; font-size: 1rem; cursor: pointer;
  transition: all 140ms ease;
}
.pg-iconbtn:hover {
  color: var(--fg);
  background: var(--glass-bg-elevated);
  border-color: var(--glass-border);
  transform: translateY(-1px);
}
.pg-iconbtn .pg-ico { width: 22px; height: 22px; }

/* 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: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.75; }
.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-start; }
.pg-main.is-empty .pg-log { margin-top: auto; }
.pg-main.is-empty .pg-dock { margin-bottom: auto; }
.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: 0;
  padding: 0 16px env(safe-area-inset-bottom, 0); 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 {
  min-height: var(--pg-composer-h); display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 8px 12px;
  background: var(--pg-composer-bg);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--pg-composer-line);
  border-radius: var(--pg-composer-r);
  box-shadow: var(--glass-specular-elevated);
  transition: border-color 160ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 160ms cubic-bezier(0.2, 0.9, 0.25, 1), transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1);
  box-sizing: border-box;
}
:root[data-theme="dark"] .pg-composer .pg-field {
  box-shadow: var(--glass-specular-elevated), 0 12px 40px -4px rgba(0, 0, 0, 0.75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-composer .pg-field {
    box-shadow: var(--glass-specular-elevated), 0 12px 40px -4px rgba(0, 0, 0, 0.75);
  }
}
.pg-composer .pg-field:focus-within {
  border-color: color-mix(in oklab, var(--accent) 80%, var(--glass-border));
  box-shadow: var(--glass-specular-elevated), 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent), 0 8px 30px -4px color-mix(in oklab, var(--accent) 25%, transparent);
}
.pg-inputrow {
  flex: 1 1 auto; display: flex; align-items: flex-end; gap: 8px; min-width: 0; min-height: 36px;
  position: relative;
}
.pg-attach-btn {
  width: 36px; height: 36px; min-height: 36px; padding: 0; flex: none;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer;
  margin-bottom: 1px;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pg-attach-btn:hover {
  color: var(--fg); background: color-mix(in oklab, var(--fg) 7%, transparent);
  border-color: color-mix(in oklab, var(--fg) 10%, transparent);
}
.pg-attach-btn:active { transform: scale(0.92); }
.pg-attach-btn .pg-ico { width: 18px; height: 18px; stroke-width: 1.75; }
.pg-composer textarea {
  flex: 1 1 auto; min-height: 24px; max-height: 180px; width: 100%;
  margin: 0; padding: 7px 4px 7px 2px; border: none !important; background: transparent !important; color: var(--fg);
  font: inherit; font-size: 15px; line-height: 1.45; resize: none; min-width: 0;
  letter-spacing: -0.012em;
  box-shadow: none !important;
  outline: none !important;
}
.pg-composer textarea:focus-visible { outline: none !important; border: none !important; box-shadow: none !important; }
.pg-composer textarea::placeholder { color: var(--muted); opacity: 0.85; font-size: 14.5px; }
.pg-input-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; align-self: flex-end; padding-bottom: 1px; }
.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(--glass-border-subtle);
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted);
  min-height: 26px; padding: 2px 11px; font-size: 12px; border-radius: 999px; flex: none;
  cursor: pointer; transition: all 160ms cubic-bezier(0.2, 0.9, 0.25, 1);
  letter-spacing: -0.01em;
}
.pg-chips .chip:hover { color: var(--fg); border-color: var(--glass-border); background: var(--glass-bg-elevated); transform: translateY(-1px); }
.pg-chips .chip.on, .pg-chips .chip[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 18%, var(--glass-bg));
  color: var(--fg); border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-border)); font-weight: 500;
  box-shadow: 0 0 14px -2px color-mix(in oklab, var(--accent) 30%, transparent);
}
.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: 36px; height: 36px; min-height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--pg-send-bg); color: var(--pg-send-fg);
  cursor: pointer;
  transition: filter 160ms cubic-bezier(0.2, 0.9, 0.25, 1), transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 160ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sendbtn-ico { width: 18px; height: 18px; display: block; }
.sendbtn:hover { filter: brightness(1.08); transform: scale(1.05); box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 32%, transparent); }
.sendbtn:active { transform: scale(0.9); }

/* --- 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 8px;
  background: var(--pg-surface-2); border: 1px solid var(--pg-border); border-radius: var(--pg-r-sm);
  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 6px 2px 2px; }
.pg-att-thumb {
  width: 32px; height: 32px; object-fit: cover; border-radius: 4px; 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 4px; border-radius: 3px;
  background: color-mix(in oklab, var(--accent) 20%, var(--pg-surface)); color: var(--accent);
  text-transform: uppercase; flex: none;
}
.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-icon { font-size: 14px; flex: none; }
.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 ------------------------------------------------------ */
.pg-foot {
  display: flex; justify-content: center; align-items: center; gap: var(--pg-3);
  padding: 6px 4px 10px; font-size: var(--pg-meta-size); flex: none; flex-wrap: wrap;
  color: var(--muted); width: 100%; max-width: var(--pg-composer-w); margin: 0 auto;
  text-align: center;
}
.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-modality-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px;
  border-radius: 4px; 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 {
  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; }

/* --- 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);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.msg.assistant .msg-avatar {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--glass-bg-subtle));
  border-color: color-mix(in oklab, var(--accent) 32%, var(--glass-border));
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 20%, transparent);
}
.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-latency { margin-left: auto; flex: none; font-size: var(--pg-meta-size); color: var(--muted); padding-left: var(--pg-3); }
.msg-body { white-space: pre-wrap; max-width: var(--pg-measure); }
.msg.user {
  align-self: flex-end; max-width: min(100%, var(--pg-user-measure)); padding: 11px 16px;
  background: color-mix(in oklab, var(--accent) 15%, var(--glass-bg));
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--glass-border));
  border-radius: 20px 20px 5px 20px;
  box-shadow: 0 4px 18px -4px color-mix(in oklab, var(--accent) 18%, transparent), var(--glass-specular);
}
.msg.user .msg-body { max-width: none; }
.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 { 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);
}

/* errors — a distinct tinted surface, never a wall of red text */
.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);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  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 */
.pg-effort-glow {
  position: absolute; inset: -3px; z-index: 0; pointer-events: none;
  border-radius: 20px; opacity: 0.55; filter: blur(10px);
  background: 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;
}

/* 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); }
@keyframes ultracode-glitch {
  0%   { transform: translate(0, 0) skewX(0deg);    text-shadow: 1.5px 0 #ff2d55, -1.5px 0 #22d3ee; }
  18%  { transform: translate(-2px, 1px) skewX(-9deg); text-shadow: -3px 0 #ff2d55, 3px 0 #22d3ee, 0 0 1px #fff; }
  34%  { transform: translate(2px, -1px) skewX(7deg);  text-shadow: 3px 0 #ff2d55, -3px 0 #22d3ee; }
  52%  { transform: translate(-1px, -1px) skewX(-4deg); text-shadow: -2px 0 #ffd000, 2px 0 #ff2d55; }
  68%  { transform: translate(2px, 1px) skewX(5deg);   text-shadow: 2px 0 #22d3ee, -2px 0 #ff2d55; }
  84%  { transform: translate(-2px, 0) skewX(-7deg);   text-shadow: -3px 0 #22d3ee, 3px 0 #ffd000; }
  100% { transform: translate(0, 0) skewX(0deg);    text-shadow: 1.5px 0 #ff2d55, -1.5px 0 #22d3ee; }
}
.pg-effort-status[data-level="6"] {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.05em;
  animation: ultracode-glitch 0.42s steps(2, jump-none) infinite;
}

:root[data-theme="dark"] .pg-effort-status[data-level="0"] { color: #94a3b8; }
:root[data-theme="dark"] .pg-effort-status[data-level="1"] { color: #06b6d4; }
:root[data-theme="dark"] .pg-effort-status[data-level="2"] { color: #10b981; }
:root[data-theme="dark"] .pg-effort-status[data-level="3"] { color: #f59e0b; }
:root[data-theme="dark"] .pg-effort-status[data-level="4"] { color: #f97316; }
:root[data-theme="dark"] .pg-effort-status[data-level="5"] { color: #c084fc; text-shadow: 0 0 12px rgba(168, 85, 247, 0.85); }
:root[data-theme="dark"] .pg-effort-status[data-level="6"] { color: #ffffff; text-shadow: none; }

.pg-effort-close {
  color: var(--muted, #64748b); cursor: pointer;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--line, #e2e4ea); border-radius: 7px;
  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) 10%, 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, #94a3b8); letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; font-weight: 700;
  position: absolute; top: 0; transform: translateX(-50%); transition: color 0.15s ease, transform 0.15s ease;
}
.pg-effort-level-label.is-active {
  transform: translateX(-50%) scale(1.12); font-weight: 800;
}
.pg-effort-level-label.is-active[data-lbl="0"] { color: #64748b; }
.pg-effort-level-label.is-active[data-lbl="1"] { color: #0891b2; text-shadow: 0 0 8px rgba(6, 182, 212, 0.6); }
.pg-effort-level-label.is-active[data-lbl="2"] { color: #059669; text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.pg-effort-level-label.is-active[data-lbl="3"] { color: #d97706; text-shadow: 0 0 8px rgba(245, 158, 11, 0.7); }
.pg-effort-level-label.is-active[data-lbl="4"] { color: #ea580c; text-shadow: 0 0 10px rgba(249, 115, 22, 0.8); }
.pg-effort-level-label.is-active[data-lbl="5"] { color: #9333ea; text-shadow: 0 0 12px rgba(168, 85, 247, 0.85); }
.pg-effort-level-label.is-active[data-lbl="6"] { color: #dc2626; text-shadow: 0 0 14px rgba(239, 68, 68, 0.95); }

:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="1"] { color: #06b6d4; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="2"] { color: #10b981; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="3"] { color: #f59e0b; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="4"] { color: #f97316; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="5"] { color: #c084fc; }
:root[data-theme="dark"] .pg-effort-level-label.is-active[data-lbl="6"] { color: #ef4444; }

/* Capsule Pill Track (exactly matching user reference image) */
.pg-effort-track-wrapper {
  position: relative;
  height: 32px;
  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: #f1f3f7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .pg-effort-track-bg {
  background: #0d0e14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-track-bg {
    background: #0d0e14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  }
}

/* Discrete indicator dots along track like user image */
.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: 5px; height: 5px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
:root[data-theme="dark"] .pg-effort-dot {
  background: rgba(255, 255, 255, 0.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-effort-dot {
    background: rgba(255, 255, 255, 0.38);
  }
}
.pg-effort-dot.is-active {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
  transform: translate(-50%, -50%) scale(1.25);
}

/* 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 {
  pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(168, 85, 247, 0.08) 30%, transparent 70%);
  border-radius: 50%; width: 140px; height: 140px;
  transition: opacity 0.25s ease;
  position: absolute; transform: translate(-50%, -50%);
}
.pg-effort-point-light.is-on { opacity: 1; }

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

/* The round thumb: pure white circle noticeably bigger than the 32px track (42px) */
.pg-effort-range::-webkit-slider-thumb {
  -webkit-appearance: none; cursor: grab;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  width: 42px; height: 42px;
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s ease;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 16px var(--re-tier-glow, rgba(6, 182, 212, 0.75)),
    0 0 32px var(--re-tier-glow, rgba(6, 182, 212, 0.35));
}
.pg-effort-range:active::-webkit-slider-thumb {
  cursor: grabbing; transform: scale(1.06);
}
.pg-effort-range.is-dragging::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 24px var(--re-tier-glow, rgba(6, 182, 212, 0.95)),
    0 0 48px var(--re-tier-glow, rgba(6, 182, 212, 0.5));
}
.pg-effort-range::-moz-range-thumb {
  cursor: grab;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  width: 42px; height: 42px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 16px var(--re-tier-glow, rgba(6, 182, 212, 0.75));
}
.pg-effort-range:active::-moz-range-thumb {
  cursor: grabbing; transform: scale(1.06);
}
.pg-effort-range::-moz-range-track {
  background: transparent; border: none; height: 32px;
}

.pg-effort-empty {
  color: var(--muted, #6a6080); letter-spacing: 0.02em; 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 (follows DSH color coding) */
.pg-effort-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 30px; padding: 0 12px; margin: 0;
  border-radius: 999px;
  background: var(--card, #ffffff);
  border: 1px solid var(--line, #e2e4ea);
  font-family: inherit; font-style: normal; font-weight: 600;
  font-size: 12.5px; cursor: pointer;
  transition: all 160ms ease;
}
:root[data-theme="dark"] .pg-effort-chip {
  background: rgba(18, 16, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pg-effort-chip:hover {
  border-color: var(--line-strong, #cbd5e1);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.12);
}
.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; }
.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; }
}

/* 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(--glass-bg-elevated);
  border-color: var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.pg-pick-item .muted { font-size: var(--pg-meta-size); flex: none; }
.pg-pick-meta:empty { display: none; }

/* --- 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(--glass-border-subtle);
  border-radius: var(--pg-r-sm);
  background: var(--glass-bg-subtle);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  overflow: hidden;
  box-shadow: var(--glass-specular);
  transition: border-color var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease), box-shadow var(--pg-dur) var(--pg-ease);
  max-width: var(--pg-measure);
}
.think-card.is-thinking {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--glass-border));
  background: color-mix(in oklab, var(--accent) 8%, var(--glass-bg-subtle));
  box-shadow: var(--glass-specular), 0 0 16px color-mix(in oklab, var(--accent) 20%, transparent);
}
.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;
}

/* 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: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px;
}

/* -------------------------------------------------------- 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-inputrow { min-height: 46px; }
  .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: 650; 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), 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent);
}
.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: 24px; height: 24px; }
  .site-head .head-inner { gap: 2px; }
  #tabs a { padding: 6px 10px; font-size: 0.85rem; }
  .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: 11px 14px; }
}

/* Phone header pill. A 390px viewport cannot hold the mark, three tabs and
   three 44px buttons at once (the pill overflowed and clipped the last one),
   so on phones the refresh/settings buttons step aside — both stay reachable
   from the page they belong to — and the tab strip itself scrolls when a
   wider label needs the room (ui.js keeps the selected tab in view). Declared
   after the coarse-pointer rules so the tighter tab padding wins. */
@media (max-width: 700px) {
  .site-head { padding: 0 8px; }
  .site-head .head-inner { gap: 2px; padding: 4px 5px 4px 7px; }
  .site-head .brand-mark { width: 24px; height: 24px; }
  #auto-refresh,
  body:has(#panel-playground:not([hidden])) #island-settings { display: none; }
  /* the vertical padding is pulled back by the negative margin so the strip
     keeps the pill's height while giving the selected tab's shadow room */
  #tabs {
    flex: 1 1 auto; min-width: 0; padding: 5px 0; margin: -5px 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: 11px 9px; }
  /* 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; }
  .ep-table code { white-space: normal; overflow-wrap: anywhere; }
}

/* 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; --muted: #46474a; }
  .badge { border-width: 2px; }
}

@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; }