/* Cloudlaya AI — member workspace UI. */

/* Brand palette, sampled from the logo artwork: the icon is a linear gradient
   #46a7ff → #1582e6, and the wordmark is navy #0e2e68. Shared by both themes. */
:root {
  --brand-blue-lt: #46a7ff;
  --brand-blue: #1582e6;
  --brand-navy: #0e2e68;

  /* Radii and spacing, so every component sits on the same rhythm. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
}

:root[data-theme="dark"] {
  --bg: #0b0e14;
  --bg-rail: #080a0f;
  --surface: #121722;
  --surface-hi: #191f2c;
  --border: #232b39;
  --border-hi: #344055;
  --text: #f3f6fb;
  --muted: #8d98aa;
  --muted-hi: #b5becb;
  --accent: #55a7ff;
  --accent-soft: rgba(68, 147, 241, 0.14);
  --accent-solid: #287bd8;
  --danger: #f85149;
  --danger-soft: rgba(248, 81, 73, 0.14);
  --ok: #3fb950;
  --warn: #d29922;
  --code-bg: #0d1117;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
}

:root[data-theme="light"] {
  --bg: #f8fafc;
  --bg-rail: #f1f5f9;
  --surface: #ffffff;
  --surface-hi: #f1f5f9;
  --border: #e0e7ef;
  --border-hi: #c8d3e0;
  --text: #111827;
  --muted: #64748b;
  --muted-hi: #475569;
  --accent: #1268bb;
  --accent-soft: rgba(18, 104, 187, 0.1);
  --accent-solid: #1268bb;
  --danger: #c8352c;
  --danger-soft: rgba(200, 53, 44, 0.09);
  --ok: #1a7f42;
  --warn: #9a6700;
  --code-bg: #f6f8fa;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

/* Component rules below set `display`, which would otherwise beat the UA style
   for the `hidden` attribute. Keep this rule above them and marked !important. */
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ------------------------------------------------------------------- layout */

.shell {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: 100vh;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  background: var(--bg-rail);
  border-right: 1px solid var(--border);
  min-height: 0;
}

.rail-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; }
.rail-head strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.rail-head small { display: block; font-size: 11px; color: var(--muted); }

/* Cloudlaya mark — the real logo SVG. The art is 494.78 x 341.04 (≈1.45:1), so
   the box is wide rather than square; a square box would squash the cloud. */
.mark {
  width: 34px; height: 24px; flex: none;
  background: url("/static/assets/cloudlaya-icon.svg") center / contain no-repeat;
}

.rail-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.group header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 6px;
}

.group h3 {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent; color: var(--text);
  font-size: 13px; min-width: 0;
}

.item:hover { background: var(--surface-hi); }
.item.active { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.item.active .label { font-weight: 500; }
.item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .count { font-size: 11px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.item .kill { opacity: 0; flex: none; transition: opacity 0.12s; }
.item:hover .kill { opacity: 0.75; }

.pill { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--accent); }
.pill.blue { background: var(--accent); }
.pill.violet { background: #8957e5; }
.pill.green { background: var(--ok); }
.pill.amber { background: var(--warn); }
.pill.rose { background: var(--danger); }

.project-folder {
  width: 17px; height: 17px; flex: none;
  color: var(--accent); stroke-width: 1.65;
}
.project-folder.blue { color: var(--accent); }
.project-folder.violet { color: #a78bfa; }
.project-folder.green { color: var(--ok); }
.project-folder.amber { color: var(--warn); }
.project-folder.rose { color: var(--danger); }

.rail-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.rail-foot .row { display: flex; gap: 6px; }
.status { margin: 8px 2px 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* -------------------------------------------------------------------- main */

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  flex: none;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.grow { flex: 1; }

.model-button {
  display: flex; align-items: center; gap: 9px;
  font: inherit; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px 10px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.model-button:hover { border-color: var(--border-hi); background: var(--surface-hi); }
.model-button .labels strong { display: block; font-size: 13px; font-weight: 600; }
.model-button .labels small { display: block; font-size: 11px; color: var(--muted); }
.model-button .chevron { width: 15px; height: 15px; color: var(--muted); flex: none; }

.swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }

.compare-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }

.switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span {
  width: 32px; height: 18px; border-radius: 9px; flex: none;
  background: var(--surface-hi); border: 1px solid var(--border-hi); position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s;
}
.switch input:checked + span { background: var(--accent-solid); border-color: var(--accent-solid); }
.switch input:checked + span::after { transform: translateX(14px); background: #fff; }
.switch input:checked ~ em { color: var(--text); font-style: normal; }
.switch em { font-style: normal; }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 8px; cursor: default;
}
.chip button { all: unset; cursor: pointer; color: var(--muted); line-height: 1; }
.chip button:hover { color: var(--danger); }

.badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px;
}

/* ---------------------------------------------------------------- settings */

.settings {
  max-height: calc(100vh - 70px); padding: 0 24px; overflow-y: auto; flex: none;
  background: color-mix(in srgb, var(--surface-hi) 72%, var(--bg));
  border-bottom: 1px solid var(--border); box-shadow: inset 0 -1px var(--border);
}
.controls-panel { width: min(1120px, 100%); margin: 0 auto; padding: 18px 0 20px; }
.controls-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.controls-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.controls-title-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 10px;
}
.controls-title-icon svg { width: 17px; height: 17px; }
.controls-title h2 { margin: 0; font-size: 13.5px; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
.controls-title p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; }
.controls-save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.controls-save-state i { width: 6px; height: 6px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 12%, transparent); }

.controls-grid {
  display: grid; grid-template-columns: minmax(360px, 1.45fr) minmax(220px, .8fr) minmax(220px, .8fr);
  gap: 11px; align-items: stretch;
}
.control-card {
  min-width: 0; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.control-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.prompt-control { grid-row: span 2; }
.control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.control-heading strong, .control-heading small { display: block; }
.control-heading strong { font-size: 11.5px; font-weight: 650; }
.control-heading small { margin-top: 2px; color: var(--muted); font-size: 9.5px; font-weight: 400; }
.control-heading em {
  min-width: 37px; padding: 3px 7px; color: var(--accent); background: var(--accent-soft);
  border-radius: 7px; font-size: 10.5px; font-style: normal; font-weight: 650; text-align: center;
  font-variant-numeric: tabular-nums;
}
.control-card textarea, .control-card input[type="number"] {
  width: 100%; color: var(--text); background: color-mix(in srgb, var(--bg) 82%, var(--surface));
  border: 1px solid var(--border); border-radius: 9px; outline: none; font: inherit;
  font-size: 11.5px; transition: border-color .14s, box-shadow .14s;
}
.control-card textarea:focus, .control-card input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.control-card textarea { flex: 1; min-height: 100px; padding: 10px 11px; line-height: 1.55; resize: vertical; }
.control-footnote { margin-top: auto; color: var(--muted); font-size: 9px; line-height: 1.45; }

.temperature-control input[type="range"] { width: 100%; margin: 7px 0 1px; }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); }
.range-labels small { font-size: 8.5px; }
.number-control { position: relative; }
.number-control input { height: 37px; padding: 7px 53px 7px 10px; }
.number-control > span { position: absolute; top: 50%; right: 10px; color: var(--muted); font-size: 8.5px; transform: translateY(-50%); pointer-events: none; }

.search-control {
  grid-column: 2 / 4; flex-direction: row; align-items: center; gap: 11px; padding: 12px 14px;
  cursor: pointer;
}
.search-control-icon {
  width: 31px; height: 31px; flex: none; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 9px;
}
.search-control-icon svg { width: 16px; height: 16px; }
.search-control-copy { flex: 1; min-width: 0; }
.search-control-copy strong, .search-control-copy small { display: block; }
.search-control-copy strong { font-size: 11.5px; font-weight: 630; }
.search-control-copy small { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.search-control > input { position: absolute; opacity: 0; pointer-events: none; }
.control-switch { width: 38px; height: 22px; flex: none; position: relative; background: var(--border-hi); border-radius: 99px; transition: background .15s; }
.control-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.search-control input:checked + .control-switch { background: var(--accent-solid); }
.search-control input:checked + .control-switch::after { transform: translateX(16px); }

.theme-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 9px; }
.theme-options label { min-width: 0; cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; pointer-events: none; }
.theme-options label > span {
  height: 29px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px;
  color: var(--muted); border: 1px solid transparent; border-radius: 6px; font-size: 9.5px;
  transition: color .14s, background .14s, box-shadow .14s;
}
.theme-options svg { width: 13px; height: 13px; }
.theme-options input:checked + span { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.theme-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.field em { font-style: normal; color: var(--text); text-transform: none; }
/* Help sentences inside a field are prose, not a label, so they keep their own casing. */
.field small { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted); }

.field input, .field textarea, .field select, .search input, #model-search {
  font: inherit; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--text); background: var(--bg); border: 1px solid var(--border-hi);
  border-radius: var(--r-sm); padding: 7px 10px; outline: none; width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.field textarea { resize: vertical; }

.field input:focus, .field textarea:focus, .field select:focus, .search input:focus, #model-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 3px; border-radius: 3px;
  background: var(--border-hi); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-solid); cursor: pointer;
}

/* -------------------------------------------------------------- transcript */

.transcript { flex: 1; overflow-y: auto; padding: 20px 0 8px; }

.transcript > * { width: min(820px, calc(100% - 40px)); margin-inline: auto; }

.welcome { text-align: center; padding: 12vh 0 0; }
.welcome h2 { font-size: 20px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.welcome p { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starter {
  font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.starter:hover { border-color: var(--border-hi); background: var(--surface-hi); }

.msg { margin-bottom: 18px; }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.msg-role { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.msg-tools { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.msg:hover .msg-tools { opacity: 1; }

.bubble {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px;
  background: var(--surface); overflow-wrap: anywhere;
}
.msg.user .bubble { background: var(--accent-soft); border-color: transparent; }
.msg.error .bubble { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p { margin: 0 0 12px; }
.bubble h1, .bubble h2, .bubble h3 { margin: 18px 0 9px; line-height: 1.3; }
.bubble h1 { font-size: 21px; } .bubble h2 { font-size: 18px; } .bubble h3 { font-size: 16px; }
.bubble ul, .bubble ol { margin: 0 0 12px; padding-left: 23px; }
.bubble li { margin-bottom: 4px; }
.bubble a { color: var(--accent); }
.bubble pre { margin: 0 0 13px; background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow-x: auto; position: relative; }
.bubble pre code { background: none; padding: 0; font-size: 13px; line-height: 1.55; }
.bubble code { font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--surface-hi); border-radius: 5px; padding: 2px 5px; }
.bubble blockquote { margin: 0 0 12px; padding-left: 13px; border-left: 3px solid var(--border-hi); color: var(--muted); }
.bubble hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.bubble table { border-collapse: collapse; margin-bottom: 12px; font-size: 14px; width: 100%; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }

.reasoning { margin-bottom: 10px; border: 1px solid var(--border); background: var(--surface-hi); border-radius: var(--r-sm); padding: 9px 11px; }
.reasoning summary { cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.reasoning .body { margin-top: 8px; color: var(--muted); font-size: 13px; white-space: pre-wrap; }

/* Tool activity. Shown live while a turn runs, and replayed from a saved conversation,
   which is why it lives inside the bubble rather than in a status area. */
.tool-activity { margin-bottom: 10px; border: 1px solid var(--border); background: var(--surface-hi); border-radius: var(--r-sm); padding: 9px 11px; }
.tool-activity summary { cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tool-activity .body { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
/* The arguments are what actually ran, so they are shown rather than hidden behind a
   second disclosure triangle. */
.tool-call { border-top: 1px solid var(--border); padding-top: 7px; }
.tool-call:first-child { border-top: none; padding-top: 0; }
.tool-head { display: flex; align-items: baseline; gap: 8px; }
.tool-head small { margin-left: auto; font-size: 11px; color: var(--muted); }
.tool-call pre { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.tool-activity code { background: transparent; padding: 0; font-size: 12px; }
.tool-call.error .tool-head code, .tool-call.error .tool-head small { color: var(--danger); }

/* What the tool returned. Distinct from the arguments above it: "it ran" is not the same
   as "it worked", and the output is the part a person actually needs to read. */
.tool-output { color: var(--text) !important; }

/* A pending approval sits inside the tool record, next to the call it is asking about,
   rather than in a modal that hides the context. */
.tool-approval {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--warn); border-radius: var(--r-sm);
}
.tool-clock { font-size: 11.5px; color: var(--warn); font-variant-numeric: tabular-nums; }
.tool-approval-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.usage { margin-top: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.caret { display: inline-block; width: 6px; height: 15px; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); animation: blink 1s steps(2, start) infinite; }

/* compare grid */
.compare-grid { width: min(1400px, calc(100% - 40px)); margin-inline: auto; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.pane { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.pane header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; background: var(--surface-hi); }
.pane header strong { font-weight: 600; }
.pane header small { color: var(--muted); }
.pane .pane-body { padding: 13px 15px; max-height: 62vh; overflow-y: auto; overflow-wrap: anywhere; }
.pane .pane-body > :first-child { margin-top: 0; }
.pane .pane-body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- composer */

.composer {
  width: min(820px, calc(100% - 40px)); margin: 0 auto 12px;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-md);
  padding: 8px 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-row { display: flex; align-items: flex-end; gap: 9px; }

.composer textarea {
  flex: 1; font: inherit; color: var(--text); background: transparent; border: none;
  outline: none; resize: none; max-height: 200px; padding: 8px 4px;
}

.attachments { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 2px 9px; }
.attachment {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  background: var(--surface-hi); border: 1px solid var(--border); border-radius: 9px; padding: 5px 9px;
}
.attachment img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }
.attachment button { all: unset; cursor: pointer; color: var(--muted); }
.attachment button:hover { color: var(--danger); }

.error { width: min(820px, calc(100% - 40px)); margin: 0 auto 12px; color: var(--danger); font-size: 13px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-sm);
  padding: 7px 12px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--surface-hi); }
.btn:active { background: var(--border); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.tiny { font-size: 12px; padding: 4px 9px; }
/* Solid rather than a gradient: a single flat brand fill keeps white label text
   legible, and gives the UI one unambiguous primary action colour. */
.btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent-solid); }
.btn.primary:disabled { filter: none; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-hi); border-color: var(--border); }
.btn.danger { background: transparent; border-color: var(--border-hi); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.danger:disabled { color: var(--muted); border-color: var(--border); }

.icon {
  all: unset; cursor: pointer; width: 26px; height: 26px; padding: 4px;
  border-radius: var(--r-sm); color: var(--muted); display: inline-flex; flex: none;
}
.icon:hover { background: var(--surface-hi); color: var(--text); }
.icon.big { width: 32px; height: 32px; padding: 6px; }

.search { position: relative; display: block; }
.search input { padding-left: 11px; }

/* ------------------------------------------------------------------ modals */

.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px; background: rgba(0, 0, 0, 0.5); animation: fade 0.12s ease both; }

.modal-card {
  width: min(700px, 100%); max-height: 76vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 16px; gap: 12px;
}
.modal-card.small { width: min(460px, 100%); }
.modal-card > header { display: flex; align-items: center; justify-content: space-between; }
.modal-card h2 { margin: 0; font-size: 16px; }
.stack { display: flex; flex-direction: column; gap: 13px; }

.model-results { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.model-group { display: flex; flex-direction: column; gap: 5px; }
.model-group > h4 { margin: 10px 2px 2px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.model-row {
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer;
}
.model-row:hover { background: var(--surface-hi); border-color: var(--border); }
.model-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.model-row:disabled { opacity: 0.45; cursor: not-allowed; }
.model-row .meta { flex: 1; min-width: 0; }
.model-row .meta strong { display: block; font-size: 13px; font-weight: 600; }
.model-row .meta small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-row .flags { display: flex; gap: 4px; flex: none; }
.flag { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.flag.warn { color: var(--warn); border-color: var(--warn); }

.hint { margin: 0; font-size: 12px; color: var(--muted); }
.empty-note { padding: 20px 6px; text-align: center; color: var(--muted); font-size: 13px; }
/* Sits between the search box and the results: the outcome of a sync belongs next to the list
   it changed, not in the chat transcript behind the modal. */
.model-sync { display: flex; align-items: center; gap: 10px; }
.model-sync .hint { flex: 1; min-width: 0; margin: 0; }
.model-sync .btn { margin-left: auto; flex: none; }

@keyframes blink { 50% { opacity: 0; } }
/* ------------------------------------------------------------------- sign in */

.login-screen {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden;
  display: block; color: var(--text); background:
    radial-gradient(circle at 78% 6%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 29rem),
    radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--brand-blue-lt) 7%, transparent), transparent 26rem),
    var(--bg-rail);
}
/* Keyboard visitors land on the nav before the content; this gives them a way past it. It is
   hidden on the auth routes, where the nav it skips is not rendered at all. */
.skip-link { position: absolute; z-index: 60; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: var(--accent-solid); border-radius: 10px; font-size: 11.5px; font-weight: 600; text-decoration: none; transform: translateY(-250%); }
.skip-link:focus { transform: none; }
.public-nav {
  width: min(1240px, calc(100% - 48px)); height: 76px; display: flex; align-items: center;
  gap: 30px; margin: 0 auto; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.public-brand, .auth-brand, .auth-mobile-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.public-brand .mark { width: 37px; height: 27px; }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { font-size: 13.5px; line-height: 1.3; letter-spacing: -.01em; }
.public-brand small { margin-top: 1px; color: var(--muted); font-size: 8.5px; letter-spacing: .04em; }
.public-links { display: flex; align-items: center; gap: 28px; margin: auto; }
.public-links a { color: var(--muted-hi); font-size: 11px; text-decoration: none; transition: color .15s; }
.public-links a:hover { color: var(--text); }
.public-nav-actions, .hero-actions { display: flex; align-items: center; gap: 9px; }
.public-button {
  min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 15px; color: var(--text); background: transparent; border: 1px solid transparent;
  border-radius: 9px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, filter .15s;
}
.public-button:hover { transform: translateY(-1px); }
.public-button.ghost { color: var(--muted-hi); }
.public-button.ghost:hover, .public-button.secondary { color: var(--text); background: var(--surface); border-color: var(--border-hi); }
.public-button.primary { color: #fff; background: linear-gradient(135deg, var(--brand-blue-lt), var(--accent-solid)); border-color: color-mix(in srgb, var(--accent) 72%, #fff); box-shadow: 0 9px 24px color-mix(in srgb, var(--accent-solid) 23%, transparent); }
.public-button.primary:hover { filter: brightness(1.08); }
.public-button.large { min-height: 45px; padding-inline: 19px; border-radius: 11px; font-size: 12px; }

.public-main { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.public-hero { min-height: 690px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(40px, 6vw, 84px); padding: 70px 0 80px; }
.hero-copy { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-eyebrow i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--accent-soft); }
.hero-copy h1 { max-width: 590px; margin: 0; font-size: clamp(46px, 5.1vw, 73px); line-height: .99; font-weight: 680; letter-spacing: -.065em; }
.hero-copy h1 span { color: var(--accent); background: linear-gradient(100deg, var(--brand-blue-lt), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy > p { max-width: 550px; margin: 24px 0 29px; color: var(--muted-hi); font-size: 15px; line-height: 1.75; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; color: var(--muted); font-size: 9.5px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 5px; }
.hero-trust svg { width: 12px; height: 12px; color: var(--ok); stroke-width: 2.2; }

.hero-product { position: relative; min-width: 0; perspective: 1200px; }
.product-glow { position: absolute; inset: 8% -8% -8% 12%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 67%); filter: blur(35px); }
.product-window { position: relative; overflow: hidden; color: #e9eef7; background: #0b0e14; border: 1px solid #2d3748; border-radius: 18px; box-shadow: 0 35px 90px rgba(0,0,0,.48), 0 0 0 7px rgba(255,255,255,.018); transform: rotateY(-2deg) rotateX(1deg); }
.product-topbar { height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 13px; color: #8d98aa; background: #111722; border-bottom: 1px solid #252e3d; font-size: 8px; }
.product-topbar > span:nth-child(2) { margin: auto; }
.product-topbar em { color: #70d889; font-size: 7.5px; font-style: normal; }
.product-dots { display: flex; gap: 4px; }
.product-dots i { width: 6px; height: 6px; background: #344055; border-radius: 50%; }
.product-dots i:first-child { background: #f06d67; }.product-dots i:nth-child(2) { background: #e8b34f; }.product-dots i:last-child { background: #65be79; }
.product-layout { min-height: 410px; display: grid; grid-template-columns: 145px 1fr; }
.product-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 13px 10px; background: #080b10; border-right: 1px solid #232b39; font-size: 8px; }
.product-sidebar > span { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 7px; color: #98a4b6; border-radius: 6px; }
.product-sidebar > small { margin: 9px 7px 2px; color: #626e80; font-size: 6.5px; letter-spacing: .11em; }
.product-sidebar .product-logo { min-height: 30px; padding: 0 4px 8px; color: #f3f6fb; }
.product-logo .mark { width: 19px; height: 14px; }.product-logo strong { font-size: 8.5px; }
.product-sidebar .product-new { color: #fff; background: #287bd8; }.product-new b { font-size: 12px; font-weight: 400; }
.product-sidebar .active { color: #fff; background: #171e2a; }
.folder-mini { width: 10px; height: 8px; border: 1px solid currentColor; border-radius: 2px; }.chat-mini { width: 9px; height: 7px; border: 1px solid currentColor; border-radius: 3px; }
.product-chat { min-width: 0; display: flex; flex-direction: column; background: #0d1118; }
.product-chat > header { height: 46px; display: flex; align-items: center; gap: 13px; padding: 0 16px; border-bottom: 1px solid #232b39; color: #7f8a9c; font-size: 7.5px; }
.product-chat > header div { margin-right: auto; }.product-chat > header small { display: block; font-size: 6px; letter-spacing: .1em; }.product-chat > header strong { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #e9eef7; font-size: 9px; }.product-chat > header strong i { width: 6px; height: 6px; background: #d97757; border-radius: 2px; }.product-chat > header .product-live { color: #70d889; }
.product-messages { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 31px 25px 18px; }
.product-user { max-width: 74%; align-self: flex-end; padding: 11px 13px; color: #dbe5f4; background: rgba(40,123,216,.2); border: 1px solid rgba(85,167,255,.18); border-radius: 12px 12px 3px 12px; font-size: 8.5px; line-height: 1.55; }
.product-answer { display: flex; gap: 10px; color: #aeb9c9; font-size: 8.5px; line-height: 1.55; }
.answer-mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#d97757,#a64f35); border-radius: 7px; font-weight: 700; }
.product-answer strong { color: #edf2f8; font-size: 9.5px; }.product-answer p { margin: 6px 0 11px; }
.answer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.answer-grid span { padding: 7px; background: #121824; border: 1px solid #252e3d; border-radius: 6px; font-size: 7px; }.answer-grid b { display: block; margin-bottom: 2px; color: #55a7ff; font-size: 6px; }
.product-composer { height: 43px; display: flex; align-items: center; margin: 0 17px 15px; padding: 0 9px 0 13px; color: #657185; background: #151b26; border: 1px solid #303b4f; border-radius: 11px; font-size: 8px; }.product-composer span { flex: 1; }.product-composer b { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #287bd8; border-radius: 7px; font-size: 11px; }

.public-section { padding: 95px 0; border-top: 1px solid var(--border); }
.public-section-head { max-width: 700px; margin-bottom: 42px; }.public-section-head > span, .public-workflow > div:first-child > span { color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.public-section-head h2, .public-workflow h2 { margin: 10px 0 12px; font-size: clamp(29px,3.4vw,44px); line-height: 1.1; letter-spacing: -.045em; }.public-section-head p, .public-workflow p { margin: 0; color: var(--muted-hi); font-size: 13px; line-height: 1.7; }
.public-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.public-feature-grid article { padding: 25px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--border); border-radius: 16px; }.feature-icon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 35px; border-radius: 11px; }.feature-icon svg { width: 19px; height: 19px; }.feature-icon.blue { color: #55a7ff; background: rgba(40,123,216,.14); }.feature-icon.violet { color: #b28cff; background: rgba(139,92,246,.13); }.feature-icon.green { color: #70d889; background: rgba(63,185,80,.13); }.public-feature-grid h3 { margin: 0 0 9px; font-size: 14px; }.public-feature-grid p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.public-workflow { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(50px,8vw,120px); padding: 95px 0; border-top: 1px solid var(--border); }.public-workflow ul { display: flex; flex-direction: column; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }.public-workflow li { display: flex; align-items: center; gap: 11px; color: var(--muted-hi); font-size: 11.5px; }.public-workflow li i { width: 27px; height: 27px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 8px; font-size: 8px; font-style: normal; }
.workflow-card { padding: 24px; background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-hi) 72%,var(--surface))); border: 1px solid var(--border-hi); border-radius: 18px; box-shadow: var(--shadow-soft); }.workflow-label { display: block; margin-bottom: 17px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }.workflow-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); }.workflow-row > i { width: 9px; height: 9px; background: var(--ok); border: 2px solid color-mix(in srgb,var(--ok) 25%,var(--surface)); border-radius: 50%; }.workflow-row > span { flex: 1; }.workflow-row strong,.workflow-row small { display: block; }.workflow-row strong { font-size: 11.5px; }.workflow-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }.workflow-row b { padding: 3px 7px; color: var(--ok); background: color-mix(in srgb,var(--ok) 10%,transparent); border-radius: 99px; font-size: 7.5px; }.workflow-row.active > i { background: var(--accent); }.workflow-row.active b { color: var(--accent); background: var(--accent-soft); }.workflow-progress { height: 5px; margin: 18px 0 9px; overflow: hidden; background: var(--surface-hi); border-radius: 99px; }.workflow-progress span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg,var(--brand-blue),var(--brand-blue-lt)); }.workflow-card > small { color: var(--muted); font-size: 8.5px; }

/* ------------------------------------------------------- the browser assistant
   The Chrome side-panel extension gets its own band between capabilities and workflow. The
   mockup leads — a small browser window with the panel open over a real page says "it lives
   where you already work" faster than copy can — and it reuses the hero's window language at
   a smaller scale so the two read as the same product. */
.public-extension { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 6vw, 80px); }
.extension-visual { position: relative; min-width: 0; }
.extension-glow { position: absolute; inset: 10% -6% -8% 6%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%); filter: blur(34px); }
.browser-window { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 15px; box-shadow: 0 28px 70px rgba(0,0,0,.4); }
.browser-tabbar { display: flex; align-items: center; gap: 7px; height: 37px; padding: 0 12px; background: var(--surface-hi); border-bottom: 1px solid var(--border); }
.browser-dots { display: flex; gap: 4px; margin-right: 3px; }
.browser-dots i { width: 6px; height: 6px; background: var(--border-hi); border-radius: 50%; }
.browser-dots i:first-child { background: #f06d67; }.browser-dots i:nth-child(2) { background: #e8b34f; }.browser-dots i:last-child { background: #65be79; }
.browser-tab { height: 23px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--muted-hi); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 7.5px; }
.browser-tab.ghost { color: var(--muted); background: transparent; border-color: transparent; }
.browser-pin { width: 21px; height: 21px; margin-left: auto; background: linear-gradient(135deg, var(--brand-blue-lt), var(--brand-blue)); border-radius: 6px; box-shadow: 0 0 0 3px var(--accent-soft); }
.browser-toolbar { padding: 9px 12px 10px; }
.browser-address { height: 25px; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--muted); background: var(--surface-hi); border: 1px solid var(--border); border-radius: 99px; font-size: 7.5px; }
.browser-address svg { width: 10px; height: 10px; flex: none; }
.browser-body { display: grid; grid-template-columns: minmax(0,1fr) clamp(112px,34%,166px); min-height: 262px; border-top: 1px solid var(--border); }
.browser-page { display: flex; flex-direction: column; gap: 9px; padding: 16px 15px; background: var(--surface); }
.browser-page > span { display: block; height: 7px; background: var(--surface-hi); border-radius: 99px; }
.browser-page .page-flag { width: auto; height: auto; align-self: flex-start; margin-bottom: 2px; padding: 3px 8px; color: var(--accent); background: var(--accent-soft); font-size: 6px; letter-spacing: .1em; }
.browser-page .page-title { width: 64%; height: 12px; background: color-mix(in srgb, var(--muted) 32%, transparent); }
.browser-page .page-line.short { width: 76%; }.browser-page .page-line.tiny { width: 44%; }
.browser-panel { display: flex; flex-direction: column; gap: 7px; padding: 10px 9px; background: var(--bg-rail); border-left: 1px solid var(--border); }
.browser-panel > header { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 7.5px; }
.browser-panel .mark { width: 16px; height: 12px; }
.panel-bubble { padding: 7px 8px; color: var(--muted-hi); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 6.5px; line-height: 1.5; }
.panel-bubble.mine { align-self: flex-end; max-width: 90%; color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 8px 8px 3px 8px; }
.panel-step { display: flex; align-items: center; gap: 6px; padding: 5px 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 6.5px; }
.panel-step b { width: 12px; height: 12px; flex: none; display: grid; place-items: center; color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); border-radius: 4px; font-size: 6px; }
.panel-composer { margin-top: auto; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--border-hi); border-radius: 8px; font-size: 6.5px; }
.panel-composer span { flex: 1; overflow: hidden; white-space: nowrap; }
.panel-composer b { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: #fff; background: var(--accent-solid); border-radius: 5px; font-size: 8px; }

.extension-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.extension-eyebrow i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--accent-soft); }
.extension-copy h2 { margin: 0 0 13px; font-size: clamp(29px,3.4vw,44px); line-height: 1.1; letter-spacing: -.045em; }
.extension-copy > p { max-width: 500px; margin: 0 0 24px; color: var(--muted-hi); font-size: 13px; line-height: 1.7; }
.extension-features { display: flex; flex-direction: column; gap: 11px; margin: 0 0 28px; padding: 0; list-style: none; }
.extension-features li { display: flex; align-items: center; gap: 11px; color: var(--muted-hi); font-size: 11.5px; }
.extension-features li i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 8px; font-size: 7.5px; font-style: normal; }
.extension-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.extension-note { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.55; }

/* The Chrome Web Store lockup, kept in its own greys so it reads as an official badge rather
   than another app button. `.pending` is what renders before the listing exists: same badge,
   no href, so a click can never land on a 404. */
.webstore-badge { display: inline-flex; align-items: center; gap: 11px; min-height: 51px; padding: 0 17px; color: #fff; background: #1f2430; border: 1px solid #3a4256; border-radius: 11px; text-decoration: none; transition: transform .15s, background .15s, border-color .15s; }
.webstore-badge:hover { transform: translateY(-1px); background: #272d3c; border-color: #4a5470; }
.webstore-badge .webstore-mark { width: 24px; height: 24px; flex: none; }
.webstore-badge small, .webstore-badge strong { display: block; }
.webstore-badge small { color: #aeb8ca; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; }
.webstore-badge strong { margin-top: 2px; font-size: 13px; letter-spacing: -.01em; }
.webstore-badge.pending { cursor: default; }
.webstore-badge.pending:hover { transform: none; background: #1f2430; border-color: #3a4256; }
.webstore-badge.pending small { color: var(--muted); }

.public-cta { display: flex; align-items: center; gap: 20px; margin: 30px 0 70px; padding: 34px; background: linear-gradient(120deg,color-mix(in srgb,var(--accent-solid) 18%,var(--surface)),var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); border-radius: 20px; }.cta-icon { width: 47px; height: 47px; flex: none; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 14px; }.cta-icon svg { width: 23px; height: 23px; }.public-cta > div { flex: 1; }.public-cta small { color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .12em; }.public-cta h2 { margin: 5px 0 3px; font-size: 24px; letter-spacing: -.035em; }.public-cta p { margin: 0; color: var(--muted); font-size: 11px; }
.public-footer { width: min(1240px,calc(100% - 48px)); min-height: 86px; display: flex; align-items: center; gap: 22px; margin: 0 auto; color: var(--muted); border-top: 1px solid var(--border); font-size: 9.5px; }.public-footer > span { display: flex; align-items: center; gap: 8px; color: var(--muted-hi); }.public-footer .mark { width: 25px; height: 18px; }.public-footer p { margin: 0 auto 0 0; }

/* Authentication. Every entry point lands on a real route — `/login` or `/register` — where
   `.auth-route` below turns this card into a full page, so the overlay values here are the
   fallback for the instant before that class lands, not the normal presentation. */
.auth-dialog { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(3,7,13,.74); backdrop-filter: blur(12px); animation: fade .16s ease both; }
.auth-card { width: min(900px,100%); max-height: min(720px,calc(100vh - 44px)); position: relative; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 22px; box-shadow: 0 34px 100px rgba(0,0,0,.48); }
.auth-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 31px; height: 31px; padding: 8px; color: var(--muted); background: color-mix(in srgb,var(--surface-hi) 80%,transparent); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }.auth-close:hover { color: var(--text); }
.auth-story { min-height: 590px; display: flex; flex-direction: column; justify-content: space-between; padding: 31px; color: #ecf4ff; background: radial-gradient(circle at 85% 18%,rgba(70,167,255,.3),transparent 35%),linear-gradient(145deg,#0c294a,#081729 72%); }
.auth-brand { color: #fff; }.auth-brand .mark { width: 32px; height: 23px; filter: brightness(0) invert(1); }.auth-brand strong { font-size: 12px; }
.auth-kicker { color: #73b8ff; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; }.auth-story h2 { margin: 10px 0 14px; font-size: 38px; line-height: 1.05; letter-spacing: -.055em; }.auth-story p { max-width: 310px; margin: 0; color: #a9bfd6; font-size: 11.5px; line-height: 1.65; }.auth-proof { display: flex; flex-direction: column; gap: 10px; color: #b9cbe0; font-size: 9.5px; }.auth-proof span { display: flex; align-items: center; gap: 8px; }.auth-proof svg { width: 13px; height: 13px; color: #70d889; stroke-width: 2.2; }
.auth-content { min-height: 590px; overflow-y: auto; display: flex; flex-direction: column; padding: 50px clamp(32px,5vw,58px) 34px; }.auth-mobile-brand { display: none; }/* Sign in and sign up are separate pages, so each form carries its own link across rather
   than a tab strip that implied one page with two faces. */
.auth-switch { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 3px 0 0; color: var(--muted); font-size: 9.5px; }
.auth-form { display: flex; flex-direction: column; gap: 13px; }.auth-form > header { margin-bottom: 5px; }.auth-form > header > span { color: var(--accent); font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.auth-form h1 { margin: 5px 0 4px; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }.auth-form header p { margin: 0; color: var(--muted); font-size: 10.5px; }.auth-field { display: flex; flex-direction: column; gap: 6px; }.auth-field > span { color: var(--muted-hi); font-size: 9px; font-weight: 650; letter-spacing: .04em; }.auth-input { height: 43px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: color-mix(in srgb,var(--bg) 78%,var(--surface)); border: 1px solid var(--border); border-radius: 10px; transition: border .14s,box-shadow .14s; }.auth-input > svg { width: 15px; height: 15px; flex: none; color: var(--muted); }.auth-input input { min-width: 0; flex: 1; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font: inherit; font-size: 11.5px; }.auth-input input::placeholder { color: color-mix(in srgb,var(--muted) 78%,transparent); }.password-toggle { width: 27px; height: 27px; padding: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }.password-toggle:hover { color: var(--text); background: var(--surface-hi); }
.auth-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.auth-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8.5px; }.auth-secure i { width: 6px; height: 6px; background: var(--ok); border-radius: 50%; }.link-button { padding: 0; color: var(--accent); background: transparent; border: 0; font: inherit; font-size: 9.5px; cursor: pointer; }.link-button:hover { text-decoration: underline; }.auth-submit { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; color: #fff; background: linear-gradient(135deg,var(--brand-blue-lt),var(--accent-solid)); border: 1px solid var(--accent); border-radius: 10px; font: inherit; font-size: 11px; font-weight: 650; text-decoration: none; cursor: pointer; box-shadow: 0 9px 22px color-mix(in srgb,var(--accent-solid) 20%,transparent); }.auth-submit:hover { filter: brightness(1.08); }.auth-submit:disabled { opacity: .55; cursor: wait; }.auth-message { width: auto; margin: 0; padding: 9px 10px; border: 1px solid; border-radius: 9px; font-size: 9.5px; line-height: 1.45; }.auth-message.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb,var(--danger) 25%,var(--border)); }.auth-message.notice { color: var(--ok); background: color-mix(in srgb,var(--ok) 8%,var(--surface)); border-color: color-mix(in srgb,var(--ok) 24%,var(--border)); }.auth-terms { color: var(--muted); font-size: 8.5px; line-height: 1.5; text-align: center; }
.auth-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.auth-success > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 15px; }.auth-success > span svg { width: 24px; height: 24px; }.auth-success h2 { margin: 18px 0 7px; font-size: 23px; letter-spacing: -.035em; }.auth-success p { max-width: 330px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }.auth-success .auth-submit { width: 100%; margin-bottom: 14px; }
.auth-content .sso { margin-top: 15px; }.auth-content .sso-divider span { background: var(--surface); }.auth-content .sso-btn { min-height: 41px; border-radius: 10px; font-size: 10.5px; }

/* `/login` and `/register` are real pages, not landing-page modals. They reuse the same
   accessible forms while changing the surrounding story and keeping direct URLs stable. */
.public-screen.auth-route { overflow-y: auto; background:
  radial-gradient(circle at 16% 18%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 31rem),
  radial-gradient(circle at 88% 86%, color-mix(in srgb,var(--brand-blue-lt) 8%,transparent), transparent 28rem),
  var(--bg-rail);
}
.auth-route .public-nav, .auth-route .public-main, .auth-route .public-footer, .auth-route .skip-link { display: none; }
.auth-route .auth-dialog {
  position: relative; inset: auto; z-index: auto; width: 100%; min-height: 100vh;
  padding: 34px; background: transparent; backdrop-filter: none;
}
.auth-route .auth-card { width: min(960px,100%); max-height: none; min-height: 620px; }
.auth-route[data-auth-mode="signup"] .auth-story {
  background: radial-gradient(circle at 82% 16%,rgba(178,140,255,.28),transparent 34%),
    linear-gradient(145deg,#1d1742,#0a213d 72%);
}
.auth-route[data-auth-mode="signup"] .auth-kicker { color: #bca2ff; }

#onboard-modal { z-index: 50; align-items: center; padding: 20px; background: rgba(3,7,13,.76); backdrop-filter: blur(10px); }
#onboard-modal .modal-card.small { width: min(440px,100%); max-height: calc(100vh - 40px); padding: 22px; gap: 18px; background: var(--surface); border-color: var(--border-hi); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
#onboard-modal .modal-card > header { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
#onboard-modal .modal-card h2 { font-size: 18px; letter-spacing: -.025em; }
#onboard-body { gap: 14px; }
#onboard-body > .hint { font-size: 11px; line-height: 1.65; }
#onboard-body > .error { width: auto; margin: 0; padding: 10px 11px; background: var(--danger-soft); border: 1px solid color-mix(in srgb,var(--danger) 25%,var(--border)); border-radius: 9px; font-size: 10.5px; }
#onboard-body .field { gap: 6px; }
#onboard-body .field > span { color: var(--muted-hi); font-size: 9px; }
#onboard-body .field input { min-height: 42px; border-radius: 10px; }
#onboard-body > .btn.primary { min-height: 42px; border-radius: 10px; }

@media (max-width: 980px) {
  .public-links { display: none; }
  .public-nav-actions { margin-left: auto; }
  .public-hero { grid-template-columns: 1fr; padding-top: 85px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-copy > p { max-width: 650px; }
  .hero-product { width: min(720px,100%); margin: 0 auto; }
  .public-feature-grid { grid-template-columns: 1fr; }
  .public-feature-grid article { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .feature-icon { grid-row: 1 / span 2; margin-bottom: 0; }
  .public-feature-grid h3 { align-self: end; }
  .public-workflow { grid-template-columns: 1fr; }
  .public-extension { grid-template-columns: 1fr; gap: 44px; }
  .auth-card { grid-template-columns: 330px 1fr; }
}

@media (max-width: 720px) {
  .public-nav, .public-main, .public-footer { width: min(100% - 28px,1240px); }
  .public-nav { height: 65px; }
  .public-brand small { display: none; }
  /* Signing in is a returning visitor's main action, so it stays in the header on phones
     instead of only living in the hero button further down the page. */
  .public-nav-actions { gap: 5px; }
  .public-nav-actions .public-button { min-height: 34px; padding: 0 11px; font-size: 11px; }
  .public-hero { min-height: auto; padding: 70px 0; }
  .hero-copy h1 { font-size: clamp(42px,13vw,60px); }
  .hero-copy > p { font-size: 13px; }
  .hero-actions { width: 100%; flex-direction: column; }.hero-actions .public-button { width: 100%; }
  .hero-trust { justify-content: center; }
  .product-window { transform: none; border-radius: 13px; }
  .product-layout { min-height: 340px; grid-template-columns: 1fr; }
  .product-sidebar { display: none; }
  .product-messages { padding-inline: 17px; }
  .public-section, .public-workflow { padding: 70px 0; }
  .public-extension { gap: 34px; }
  .browser-body { min-height: 230px; grid-template-columns: minmax(0,1fr) 128px; }
  .extension-actions { gap: 12px; }
  .webstore-badge { width: 100%; justify-content: center; }
  .public-feature-grid article { padding: 19px; }
  .public-cta { align-items: flex-start; flex-wrap: wrap; padding: 23px; }.public-cta > div { min-width: calc(100% - 70px); }.public-cta .public-button { width: 100%; }.public-cta h2 { font-size: 20px; }
  .public-footer { flex-wrap: wrap; gap: 8px 15px; padding: 22px 0; }.public-footer p { width: 100%; order: 3; }
  .auth-dialog { padding: 10px; }
  .auth-route .auth-dialog { padding: 10px; }
  .auth-route .auth-card { min-height: calc(100vh - 20px); }
  .auth-card { display: block; max-height: calc(100vh - 20px); border-radius: 17px; }
  .auth-story { display: none; }
  .auth-content { min-height: 0; padding: 24px 20px 27px; }
  .auth-mobile-brand { display: inline-flex; margin-bottom: 22px; }.auth-mobile-brand .mark { width: 29px; height: 21px; }.auth-mobile-brand strong { font-size: 11px; }
  .auth-close { top: 18px; right: 18px; }
}

/* Single sign-on. Kept flat: a hairline rule with the label sitting on it, then one
   full-width button per enabled provider. */
.sso { display: flex; flex-direction: column; gap: 10px; }
.sso-divider {
  position: relative; margin: 2px 0; text-align: center;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.sso-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border);
}
.sso-divider span { position: relative; padding: 0 10px; background: var(--surface); }
.sso-buttons { display: flex; flex-direction: column; gap: 8px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 14px; min-height: 38px;
  font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-sm);
}
.sso-btn:hover { background: var(--surface-hi); border-color: var(--accent); color: var(--text); }
.sso-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* ------------------------------------------------------------- account block */

.account {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}

.account .who { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.account .who > div { min-width: 0; }
.account .who strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.account .who small { font-size: 11px; color: var(--muted); display: block; }

/* Initials chip — cheaper than image upload and needs no avatar storage. */
.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
}
.avatar.small { width: 26px; height: 26px; font-size: 10.5px; }

.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-head strong { display: block; font-size: 14px; }
.profile-head small { color: var(--muted); font-size: 12px; }

.meter { height: 6px; border-radius: 3px; background: var(--surface-hi); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent-solid); }

/* The one and only sighting of a new API token. */
.token-reveal {
  border: 1px solid var(--warn); border-radius: var(--r-sm);
  background: var(--surface-hi); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.token-reveal > strong { font-size: 13px; color: var(--warn); }
.token-value { display: flex; align-items: center; gap: 8px; }
.token-value code {
  flex: 1; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 12px; overflow-x: auto; white-space: nowrap;
}

.status.over { color: var(--danger); }

/* ----------------------------------------------------------- admin console */

.admin-screen {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  background: var(--bg);
}

.admin-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  height: 54px; padding: 0 20px;
  background: var(--bg-rail);
  border-bottom: 1px solid var(--border);
}

.admin-head h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* Underline tabs rather than pills — the conventional admin sub-nav. */
.tabs { display: flex; gap: 2px; align-self: stretch; }

.tab {
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 0 12px; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }

.admin-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 1500px; }

.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.stat small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat strong { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat em { font-size: 11.5px; font-style: normal; color: var(--muted); }

.admin-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.admin-form h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { flex: 1 1 170px; }
.form-row .field.narrow { flex: 0 1 130px; }
.form-row .btn { flex: none; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--border); }
.admin-table th {
  text-align: left; padding: 8px 12px; background: var(--surface-hi); white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-hi); }
.admin-table td strong { display: block; font-size: 13px; font-weight: 500; }
.admin-table td small { display: block; font-size: 11.5px; color: var(--muted); }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table td.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-table input[type="password"] { width: 136px; }
.admin-table input[type="text"], .admin-table input:not([type]) { width: 100%; }
.admin-table select { max-width: 150px; }
.admin-table code { font-size: 12px; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
/* An expanded outbox message. The body is the point of expanding it: it holds the invitation,
   reset or verification link, which is the only way to recover one when nothing was sent. */
.outbox-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.outbox-link a { min-width: 0; color: var(--accent); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.outbox-body { margin: 0; padding: 10px 12px; color: var(--muted-hi); background: var(--code-bg); border: 1px solid var(--border); border-radius: 9px; font: 11.5px/1.6 "SF Mono", ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-table tr.outbox-detail td { padding: 0 12px 14px; }
.admin-table tr.outbox-detail:hover { background: transparent; }

.plan-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.plan-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.plan-card.editing { grid-column: 1 / -1; }
.plan-card header { display: flex; align-items: center; gap: 8px; }
.plan-card header strong { font-size: 14px; font-weight: 600; }
.plan-card dl { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.plan-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.plan-card dt { color: var(--muted); }
.plan-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Sign-in policy: these checkboxes are switches next to their own explanation, not
   labelled inputs, and the values beside them are long environment variable names. */
#signin-policy .field.checkbox { flex-direction: row; align-items: center; gap: 9px; }
#signin-policy .field.checkbox span { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; color: var(--text); }
#signin-policy .plan-card dl div { align-items: baseline; }
#signin-policy .plan-card dd code { word-break: break-all; }

.model-picker, .tool-picker {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px;
}
.model-picker.disabled, .tool-picker.disabled { opacity: 0.45; }
.tool-picker .pick-list { max-height: 160px; }
.pick-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pick { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; font-size: 12.5px; }
.pick:hover { background: var(--surface-hi); }
.pick span { flex: 1; }
.pick small { color: var(--muted); font-size: 11px; }

/* Connectors: a heading with an action on the right, outside any form. */
.section-head { align-items: center; margin-top: 6px; }
.section-head h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* The cached tool list on a connector card, with a policy control per tool. */
.tool-list { border-top: 1px solid var(--border); padding-top: 8px; }
.tool-list summary { cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tool-list .hint { margin-top: 8px; }
.tool-row { margin-top: 10px; }
.tool-row-head { display: flex; align-items: center; gap: 10px; }
.tool-row-head code { flex: 1; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.tool-row small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tool-policy { flex: none; max-width: 150px; }

/* ------------------------------------------------------- workspaces (tenancy) */

/* The switcher stays hidden while there is only one workspace to switch to. */
.org-switch { margin-bottom: 10px; }
.org-switch select { width: 100%; }

.org-facts { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.org-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.org-facts dt { color: var(--muted); }
.org-facts dd { margin: 0; text-align: right; }

/* An invitation link is long and must be readable enough to copy by eye. */
.invite-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-link code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.invite-link .btn { flex: none; }

.login-help { margin: 10px 0 0; text-align: center; }
.link-button {
  all: unset; cursor: pointer; font-size: 12.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-button:hover { color: var(--text); }

#notice { color: var(--ok); }

.pill.warn { background: var(--danger); }

/* Key-import: the "locations checked" disclosure, folded away by default. */
.checked-paths { font-size: 12px; color: var(--muted); }
.checked-paths summary { cursor: pointer; padding: 2px 0; }
.checked-paths ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.checked-paths code { font-size: 11.5px; }
.checked-paths em { font-style: normal; color: var(--warn); }
.admin-table td input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent-solid); }
.hint.notice {
  padding: 8px 11px; border-radius: var(--r-sm); font-size: 12.5px;
  background: var(--surface-hi); border: 1px solid var(--border); color: var(--text);
}
.hint.notice.over, .hint.over { color: var(--danger); }
/* A caution that is not a failure: the number is real but only a lower bound. */
.hint.warn { margin-top: 10px; color: var(--warn); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 980px) {
  .admin-head { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .tabs { align-self: auto; order: 3; width: 100%; overflow-x: auto; }
  .tab { padding: 8px 10px; border-bottom-width: 2px; }
  .admin-body { padding: 14px; overflow-x: auto; }
}

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------- member experience */

button, input, textarea, select { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

kbd {
  font: 10px/1.2 "SF Mono", ui-monospace, Menlo, monospace;
  color: var(--muted); background: var(--surface-hi);
  border: 1px solid var(--border); border-bottom-color: var(--border-hi);
  border-radius: 5px; padding: 2px 5px;
}

.shell { grid-template-columns: 288px minmax(0, 1fr); }

.rail {
  gap: 12px; padding: 16px 14px 12px;
  background: var(--bg-rail);
}

.rail-head { min-height: 42px; padding: 2px 6px 8px; }
.rail-head .mark { width: 37px; height: 27px; }
.rail-head strong { font-size: 14.5px; letter-spacing: -0.02em; }
.rail-head small { margin-top: 1px; color: var(--muted); font-size: 11px; }

.primary-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-button {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px;
  color: var(--muted-hi); background: transparent; border: 1px solid transparent;
  border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; transition: color .14s, background .14s, border-color .14s, transform .14s;
}
.nav-button svg { width: 18px; height: 18px; flex: none; }
.nav-button span { flex: 1; }
.nav-button kbd { background: transparent; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.68); }
.nav-button:hover { color: var(--text); background: var(--surface-hi); }
.nav-button.active { color: var(--text); background: var(--surface-hi); border-color: var(--border); }
.nav-button.nav-primary {
  color: #fff; background: var(--accent-solid); border-color: transparent;
  box-shadow: 0 7px 18px rgba(21, 130, 230, .2);
}
.nav-button.nav-primary:hover { background: #3188e8; transform: translateY(-1px); }

.search svg {
  position: absolute; left: 11px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.search input {
  height: 38px; padding: 7px 10px 7px 34px; border-color: transparent;
  background: var(--surface); border-radius: 9px;
}
.search input:hover { border-color: var(--border); }
.rail-scroll { gap: 19px; padding-top: 3px; }
.group header { padding: 0 7px 7px; }
.group h3 { font-size: 10px; letter-spacing: .12em; }
.group-title { display: flex; align-items: center; gap: 7px; }
.section-count {
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; color: var(--muted); background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 99px; font-size: 9px; font-variant-numeric: tabular-nums;
}
.item { min-height: 36px; padding: 7px 9px; border-radius: 9px; color: var(--muted-hi); }
.item:hover { color: var(--text); }
.item.active { color: var(--text); background: var(--accent-soft); }
.item .pill { border-radius: 50%; width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 8%, transparent); }
.item .count { min-width: 16px; text-align: right; }
.empty-note { padding: 14px 8px; }

.item:has(.conversation-copy) { min-height: 52px; gap: 10px; padding: 6px 8px; }
.conversation-icon {
  width: 29px; height: 29px; flex: none; display: grid; place-items: center;
  color: var(--conversation-colour); background: color-mix(in srgb, var(--conversation-colour) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--conversation-colour) 18%, transparent);
  border-radius: 9px;
}
.conversation-icon svg { width: 15px; height: 15px; stroke-width: 1.7; }
.conversation-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conversation-copy .label { display: block; flex: none; color: var(--text); font-size: 12.5px; line-height: 1.35; }
.conversation-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.item.active .conversation-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--conversation-colour) 8%, transparent); }
.item:has(.conversation-copy) .kill { width: 20px; height: 20px; padding: 3px; }
/* Filing a chat follows the same hover reveal as deleting one, so a row stays quiet until the
   pointer is on it — while a keyboard visitor can still reach either button and see it. */
.item .move { opacity: 0; flex: none; transition: opacity 0.12s; }
.item:hover .move { opacity: 0.75; }
.item:has(.conversation-copy) .move { width: 20px; height: 20px; padding: 3px; }
.item .move[aria-expanded="true"] { opacity: 1; }
.item .kill:focus-visible, .item .move:focus-visible { opacity: 1; }

/* The "file this chat" menu, anchored to the row button that opened it. Fixed positioning so
   the rail's scroll container cannot clip it, with its own shadow so it reads as sitting above
   the sidebar rather than inside it. */
.project-picker {
  position: fixed; z-index: 70; min-width: 190px; max-width: 258px;
  max-height: min(320px, 70vh); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 7px;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: 12px;
  box-shadow: var(--shadow);
}
.picker-title { margin: 3px 7px 6px; color: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.picker-note { margin: 2px 7px 6px; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.picker-option {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px;
  color: var(--muted-hi); background: transparent; border: 0; border-radius: 8px;
  font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.picker-option:hover { color: var(--text); background: var(--surface-hi); }
.picker-option > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option > b { flex: none; color: var(--accent); font-size: 11px; }
/* A matched line, not a whole conversation: the excerpt clamps to two lines so the hit is
   readable in the sidebar. The match is marked with weight plus a hairline underline rather
   than a fill, which keeps it flat and stays legible in both themes. */
.item.match .conversation-copy .label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.item.match .conversation-copy mark { background: none; color: var(--text); font-weight: 650; border-bottom: 1px solid var(--accent); }
/* Briefly tint the message a search result pointed at, so the jump is visible on arrival.
   The class is removed by the script too, so the tint does not linger on re-render. */
@keyframes found-flash {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}
.msg.found { animation: found-flash 1.6s ease-out; }

.rail-foot { padding-top: 11px; background: var(--bg-rail); }

.account { margin-top: 0; padding-top: 0; border-top: 0; gap: 6px; }
.account-trigger {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px;
  color: var(--text); background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer;
}
.account-trigger:hover { background: var(--surface-hi); }
.account-copy { flex: 1; min-width: 0; }
.account-copy strong { display: block; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.account-chevron { width: 15px; height: 15px; color: var(--muted); }
.account-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 5px; padding: 6px; border-radius: 10px;
}
.account-theme-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-hi); font-size: 10.5px; }
.account-theme-label svg { width: 14px; height: 14px; color: var(--muted); }
.account-theme .theme-options { flex: none; }
.account-theme .theme-options label > span { height: 27px; padding-inline: 7px; }
.account-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.account-actions:has(#admin-button[hidden]) { grid-template-columns: 1fr; }
.account-action {
  height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted-hi); background: transparent; border: 1px solid transparent;
  border-radius: 8px; font: inherit; font-size: 10.5px; cursor: pointer;
}
.account-action svg { width: 13px; height: 13px; }
.account-action:hover { color: var(--text); background: var(--surface-hi); border-color: var(--border); }
.account-action.danger-link:hover { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.avatar { background: linear-gradient(145deg, var(--brand-blue-lt), var(--accent-solid)); }

.main { position: relative; background: var(--bg); }
.topbar {
  min-height: 70px; padding: 10px 24px; gap: 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.view-identity { display: flex; flex-direction: column; width: 76px; flex: none; }
.view-identity small { color: var(--muted); font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: .09em; }
.view-identity strong { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.model-button { min-width: 188px; border-color: var(--border); border-radius: 10px; padding: 7px 10px; }
.model-button .labels { min-width: 0; }
.model-button .labels strong, .model-button .labels small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-button { display: inline-flex; align-items: center; gap: 7px; }
.settings-button svg { width: 16px; height: 16px; }
.settings-button[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.rail-toggle { display: none; }
.rail-scrim { display: none; }

.transcript { padding: 24px 0 12px; scroll-behavior: smooth; }
.transcript > * { width: min(900px, calc(100% - 48px)); }

.chat-welcome { padding: min(14vh, 120px) 0 20px; }
.welcome-mark { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 17px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-soft); }
.welcome-mark .mark { width: 31px; height: 23px; }
.welcome h2 { font-size: 25px; font-weight: 630; letter-spacing: -.035em; }
.welcome p { margin-bottom: 25px; font-size: 13.5px; }
.starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: auto; }
.starter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 11px; text-align: left; }
.starter span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starter span:last-child { color: var(--muted); }

.msg { margin-bottom: 26px; }
.msg-head { margin-bottom: 7px; }
.msg-role { font-size: 10px; }
.bubble { border: 0; border-radius: 0; padding: 0; background: transparent; font-size: 14px; line-height: 1.65; }
.msg.user { max-width: 78%; margin-left: auto; }
.msg.user .msg-head { justify-content: flex-end; }
.msg.user .msg-tools { order: -1; margin-left: 0; }
.msg.user .bubble { padding: 12px 15px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 16px 16px 4px 16px; }
.msg.assistant .bubble { padding: 2px 0 8px; }
.bubble pre { border-radius: 12px; }
.usage { padding-top: 4px; border-top: 1px solid var(--border); }

.composer {
  width: min(900px, calc(100% - 48px)); margin: 0 auto 15px; padding: 9px 10px 7px;
  background: var(--surface); border-color: var(--border-hi); border-radius: 18px;
  box-shadow: 0 13px 36px rgba(0, 0, 0, .18);
}
.composer:focus-within { box-shadow: 0 0 0 3px var(--accent-soft), 0 13px 36px rgba(0, 0, 0, .18); }
.composer-row { align-items: center; gap: 8px; }
.composer .icon.big { width: 34px; height: 34px; border-radius: 10px; }
.composer textarea { min-height: 42px; padding: 10px 5px; line-height: 1.5; }
.composer textarea::placeholder { color: var(--muted); }
.composer-send {
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px; color: #fff; background: var(--accent-solid); border: 1px solid var(--accent-solid);
  border-radius: 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: transform .14s, filter .14s;
}
.composer-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.composer-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.composer-send svg { width: 15px; height: 15px; }
.composer-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 2px 5px 0 46px; color: var(--muted); font-size: 9.5px; }
.composer-meta kbd { padding: 1px 4px; font-size: 8.5px; }
.error { width: min(900px, calc(100% - 48px)); font-size: 11.5px; }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    display: flex; position: fixed; z-index: 90; inset: 0 auto 0 0; width: min(320px, 88vw);
    transform: translateX(-104%); box-shadow: var(--shadow); transition: transform .2s ease;
  }
  body.rail-open .rail { transform: translateX(0); }
  .rail-scrim { position: fixed; z-index: 85; inset: 0; display: block; padding: 0; border: 0; background: rgba(3, 6, 11, .64); }
  .rail-toggle { display: inline-flex; width: 30px; height: 30px; }
  .topbar { min-height: 64px; padding: 9px 14px; gap: 10px; }
  .view-identity { width: 64px; }
  .model-button { min-width: 0; }
  .model-button .labels { max-width: 150px; }
  .settings { max-height: calc(100vh - 64px); padding-inline: 16px; }
  .controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-control { grid-column: 1 / -1; grid-row: auto; }
  .search-control { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .view-identity { display: none; }
  .topbar { gap: 8px; }
  .model-button { flex: 1; }
  .model-button .labels { max-width: 130px; }
  .compare-bar .switch em, .settings-button span { display: none; }
  .settings-button { width: 34px; height: 34px; padding: 8px; }
  .compare-chips { display: none; }
  .settings { padding-inline: 10px; }
  .controls-panel { padding-block: 14px 16px; }
  .controls-head { margin-bottom: 11px; }
  .controls-title p, .controls-save-state { display: none; }
  .controls-grid { grid-template-columns: 1fr; }
  .prompt-control, .search-control { grid-column: auto; }
  .search-control-copy small { max-width: 28ch; }
  .transcript { padding-inline: 0; }
  .transcript > * { width: calc(100% - 28px); }
  .starters { grid-template-columns: 1fr; }
  .msg.user { max-width: 90%; }
  .composer { width: calc(100% - 20px); margin-bottom: 9px; border-radius: 16px; }
  .composer-meta { display: none; }
  .composer-send span { display: none; }
  .composer-send { width: 38px; padding: 0; }
  .error { width: calc(100% - 24px); }
}

/* ---------------------------------------------------------- account center */

.account-screen { background: var(--bg); }
.account-head {
  height: 72px; padding: 0 28px; gap: 12px;
  background: color-mix(in srgb, var(--bg-rail) 92%, var(--surface));
  box-shadow: 0 1px 0 var(--border);
}
.account-head > .mark { width: 39px; height: 28px; }
.account-brand { min-width: 144px; display: flex; flex-direction: column; }
.account-brand h1 { font-size: 15px; line-height: 1.3; }
.account-brand small { margin-top: 1px; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.account-tabs { gap: 4px; margin-left: 8px; }
.account-tabs .tab {
  gap: 7px; padding: 0 12px; border-bottom-width: 2px;
  transition: color .14s, background .14s, border-color .14s;
}
.account-tabs .tab svg { width: 15px; height: 15px; }
.account-tabs .tab:hover { background: var(--surface-hi); }
.account-tabs .tab.active { color: var(--accent); }
.account-close { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.account-close svg { width: 15px; height: 15px; }

.account-body {
  width: min(1240px, 100%); max-width: none; margin: 0 auto;
  display: block; padding: 34px 30px 64px;
}
.account-page { display: flex; flex-direction: column; gap: 18px; }
.account-page-head { max-width: 760px; margin-bottom: 6px; }
.account-page-head > span {
  display: block; margin-bottom: 7px; color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.account-page-head h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; }
.account-page-head p { margin: 8px 0 0; color: var(--muted-hi); font-size: 13.5px; line-height: 1.6; }

.account-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.account-banner { width: auto; margin: 0; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; }
.account-banner.notice { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 28%, var(--border)); }
.account-banner.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }

.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-grid { grid-template-columns: 310px minmax(0, 1fr); align-items: start; }
.preference-grid { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.7fr); }
.usage-grid { align-items: start; }

.account-card {
  min-width: 0; overflow: hidden; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.account-card-head {
  min-height: 75px; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.account-card-head > div { flex: 1; min-width: 0; }
.account-card-head h3 { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 630; letter-spacing: -.01em; }
.account-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.account-card-icon {
  width: 35px; height: 35px; flex: none; display: inline-grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 10px;
}
.account-card-icon svg { width: 17px; height: 17px; }
.card-count {
  min-width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; color: var(--muted-hi); background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 999px; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.account-card-body { padding: 18px; }
.account-card-footer {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 18px; background: color-mix(in srgb, var(--surface-hi) 54%, var(--surface)); border-top: 1px solid var(--border);
}
.account-card-footer > span { color: var(--muted); font-size: 10.5px; }
.account-card-footer .btn { flex: none; }

.settings-grid { display: grid; gap: 16px; }
.settings-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model-default-grid { grid-template-columns: minmax(220px, 1fr) 132px 158px; align-items: start; }
/* What an import would add, shown before anything is written. */
.import-preview { display: grid; gap: 10px; justify-items: start; }
.import-preview > p { margin: 0; font-size: 13px; }
.import-preview details { width: 100%; font-size: 12px; color: var(--muted); }
.import-preview details summary { cursor: pointer; }
.import-preview ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.import-preview .account-banner ul { margin: 0; }
.import-preview .form-row { width: 100%; }
.account-card .field { gap: 6px; }
.account-card .field > span { color: var(--muted-hi); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; }
.account-card .field input, .account-card .field textarea, .account-card .field select {
  min-height: 42px; padding: 9px 11px; background: color-mix(in srgb, var(--bg) 78%, var(--surface));
  border-color: var(--border); border-radius: 10px; font-size: 12.5px;
}
.account-card .field textarea { min-height: 120px; line-height: 1.55; }
.account-card .field small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.compact-field input { font-variant-numeric: tabular-nums; }

.profile-summary { display: flex; flex-direction: column; align-items: center; padding: 27px 22px 20px; text-align: center; }
.profile-avatar-wrap { position: relative; }
.profile-avatar { width: 72px; height: 72px; font-size: 21px; box-shadow: 0 0 0 5px var(--accent-soft); }
.profile-status { position: absolute; right: -1px; bottom: 2px; width: 14px; height: 14px; background: var(--ok); border: 3px solid var(--surface); border-radius: 50%; }
.profile-summary > h3 { margin: 16px 0 2px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.profile-summary > p { margin: 0; color: var(--muted); font-size: 11px; }
.profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 13px; }
.profile-badges span { padding: 3px 8px; color: var(--muted-hi); background: var(--surface-hi); border: 1px solid var(--border); border-radius: 999px; font-size: 9px; text-transform: capitalize; }
.profile-facts { width: 100%; margin: 22px 0 0; padding-top: 13px; border-top: 1px solid var(--border); }
.profile-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 10.5px; }
.profile-facts dt { color: var(--muted); }
.profile-facts dd { margin: 0; color: var(--muted-hi); text-align: right; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--ok); border-radius: 50%; }

.account-settings-form { display: flex; flex-direction: column; gap: 16px; }
.account-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 18px; cursor: pointer;
}
.toggle-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.toggle-copy > span:last-child { min-width: 0; }
.toggle-copy strong { display: block; font-size: 12.5px; font-weight: 620; }
.toggle-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.account-toggle-row > input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { width: 40px; height: 23px; flex: none; position: relative; background: var(--border-hi); border-radius: 99px; transition: background .15s; }
.toggle-control::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: transform .15s; }
.account-toggle-row input:checked + .toggle-control { background: var(--accent-solid); }
.account-toggle-row input:checked + .toggle-control::after { transform: translateX(17px); }
.account-toggle-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.account-savebar {
  position: sticky; bottom: 12px; z-index: 2; min-height: 64px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 12px 15px 12px 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border-hi);
  border-radius: 14px; box-shadow: var(--shadow-soft); backdrop-filter: blur(14px);
}
.account-savebar span { color: var(--muted); font-size: 10.5px; }

.security-alert, .account-info-strip {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 12px;
}
.security-alert { color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 28%, var(--border)); }
.security-alert > span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 15%, transparent); border-radius: 50%; font-weight: 700; }
.security-alert strong, .account-info-strip strong { color: var(--text); font-size: 11.5px; }
.security-alert p, .account-info-strip p { margin: 2px 0 0; color: var(--muted-hi); font-size: 10.5px; line-height: 1.5; }
.account-info-strip { background: var(--surface); }
.account-info-strip .account-card-icon { width: 32px; height: 32px; }

.table-shell { overflow-x: auto; }
.account-table { border: 0; font-size: 11.5px; }
.account-table th { padding: 9px 17px; background: color-mix(in srgb, var(--surface-hi) 62%, var(--surface)); border-top: 0; }
.account-table td { padding: 11px 17px; }
.account-table td strong { font-size: 11.5px; }
.account-table td small { margin-top: 2px; font-size: 9.5px; }
.account-table td.actions { justify-content: flex-end; }
.account-empty { height: 90px; color: var(--muted); text-align: center; }
/* The admin-console counterpart: same idea, used by several tables including the new
   cost and lockout ones. */
.admin-empty { height: 80px; color: var(--muted); text-align: center; }
.password-grid { max-width: 820px; }

.token-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.token-create-row .btn { height: 42px; margin-bottom: 20px; }
.account-token-reveal { padding: 16px; border-radius: 14px; }
.account-token-reveal > div:first-child strong { font-size: 12.5px; }
.account-token-reveal > div:first-child p { margin: 3px 0 12px; color: var(--muted-hi); font-size: 10.5px; }
.account-token-reveal .token-value code { min-height: 42px; display: flex; align-items: center; }

.usage-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usage-stat { min-height: 112px; display: flex; align-items: center; gap: 15px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; }
.usage-stat-icon .account-card-icon { width: 42px; height: 42px; }
.usage-stat div > small, .usage-stat div > strong, .usage-stat div > span { display: block; }
.usage-stat div > small { color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.usage-stat div > strong { margin-top: 2px; font-size: 23px; line-height: 1.2; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.usage-stat div > span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
/* Money in the product is often a fraction of a cent, so the caption carries the caveat that
   the headline figure is a lower bound when some generations had no price on file. */
.cost-caveat { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: normal; }
.allowance-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.allowance-summary > div:last-child { text-align: right; }
.allowance-summary strong, .allowance-summary span { display: block; }
.allowance-summary strong { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.allowance-summary span { color: var(--muted); font-size: 9.5px; }
.usage-progress { height: 8px; margin: 15px 0 8px; overflow: hidden; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 99px; }
.usage-progress span { display: block; height: 100%; min-width: 7px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-lt)); border-radius: inherit; }
.allowance-caption { display: flex; justify-content: space-between; color: var(--muted); font-size: 9.5px; }
.allowance-caption .over { color: var(--danger); }

@media (max-width: 1080px) {
  .account-head { height: auto; min-height: 72px; flex-wrap: wrap; padding: 10px 20px 0; }
  .account-brand { min-width: 120px; }
  .account-tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .account-tabs .tab { min-height: 44px; }
  .account-close { margin-left: auto; }
  .profile-grid, .preference-grid { grid-template-columns: 1fr; }
  .profile-summary { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; text-align: left; }
  .profile-avatar-wrap { grid-row: 1 / span 3; }
  .profile-summary > h3 { margin-top: 8px; }
  .profile-badges { justify-content: flex-start; }
  .profile-facts { grid-column: 1 / -1; }
  .model-default-grid { grid-template-columns: minmax(220px, 1fr) 140px 170px; }
}

@media (max-width: 760px) {
  .account-head { padding-inline: 14px; }
  .account-brand small { display: none; }
  .account-tabs .tab { padding-inline: 11px; }
  .account-tabs .tab svg { display: none; }
  .account-close span { display: none; }
  .account-body { padding: 24px 14px 50px; }
  .account-page-head h2 { font-size: 24px; }
  .account-grid, .settings-grid.two-column, .model-default-grid, .usage-stat-grid { grid-template-columns: 1fr; }
  .profile-summary { display: flex; text-align: center; }
  .profile-summary > h3 { margin-top: 16px; }
  .profile-badges { justify-content: center; }
  .profile-facts { grid-column: auto; }
  .account-card-head { align-items: flex-start; padding: 14px; }
  .account-card-body { padding: 14px; }
  .account-card-footer, .account-savebar { align-items: stretch; flex-direction: column; }
  .account-card-footer .btn, .account-savebar .btn { width: 100%; }
  .account-savebar { bottom: 8px; }
  .token-create-row { grid-template-columns: 1fr; }
  .token-create-row .btn { width: 100%; margin-bottom: 0; }
  .account-toggle-row { padding: 14px; }
  .usage-grid { grid-template-columns: 1fr; }
}

/* Voice input */

/*
 * Listening has to be visible: the microphone is open and the audio is on its way to the
 * browser's speech service. The colour matches how the app already shows that something is
 * live, so it reads as a state rather than as a warning.
 */
.icon.dictate.is-listening {
  color: var(--accent);
  background: var(--accent-soft);
  animation: dictate-pulse 1.4s ease-in-out infinite;
}

@keyframes dictate-pulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.45; }
}