/* LLM Playground — ChatGPT/Claude-style dark layout */

/* `hidden` must actually hide.
   The browser's own `[hidden] { display: none }` is a user-agent rule, so
   ANY author rule that sets `display` beats it. `.auth-form { display:
   flex }` did exactly that, and the sign-in page rendered the sign-in form
   and the create-account form stacked on top of each other with the tabs
   above them doing nothing visible. Declared once, at the top, so no
   component has to remember. */
[hidden] { display: none !important; }


/* ── Design tokens ───────────────────────────────────────────────────
   Colour existed already; spacing, type, radii, shadow, z-index and motion
   were hard-coded at hundreds of call sites, which is why the UI drifted out
   of alignment. Prefer these over literal values in new/edited rules. */
:root {
  /* Colour */
  --bg: #212121;
  --panel: #171717;
  --panel-2: #2a2a2a;
  --surface: #1e1e1e;
  --border: #333333;
  --border-strong: #454545;
  --fg: #ececec;
  --muted: #9b9b9b;
  --accent: #10a37f;
  --accent-hover: #1a8670;
  --accent-soft: rgba(16, 163, 127, 0.12);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --warn: #d29922;

  /* Spacing scale (4px base) */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Typography */
  --fs-xs: 0.68rem;
  --fs-sm: 0.78rem;
  --fs-base: 0.88rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-tight: 1.3;
  --lh-normal: 1.55;

  /* Radii */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* Layering — every fixed/absolute element picks from this scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-pane: 40;
  --z-sidebar: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* Motion */
  --dur-fast: 0.12s;
  --dur: 0.18s;
  --dur-slow: 0.3s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-w: 280px;
  --pane-w: 420px;
  --tap-target: 40px;
}

/* Honour the OS setting — several panes/modals animate on open. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Icons ───────────────────────────────────────────────────────────
   One system: an inline <symbol> sprite in base.html referenced with
   <svg class="icon"><use href="#i-name"></use></svg>. Replaces the mix of
   23 hand-written inline SVGs and emoji-as-chrome. */
.icon {
  width: 1em; height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  pointer-events: none;
}
.icon-filled { fill: currentColor; stroke: none; }
.icon-sm { width: 0.85em; height: 0.85em; }
.icon-lg { width: 1.25em; height: 1.25em; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Screen-reader-only label for icon-only controls. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Status lines (saving / saved / failed) ──────────────────────────
   One presentation for every transient status, replacing ad-hoc emoji
   prefixes that each rendered at a different size and colour. */
.status-icon { margin-right: var(--sp-2); }
.icon.spin, .status-icon.spin { animation: icon-spin 0.9s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

.is-working { color: var(--accent); }
.is-ok { color: var(--accent); }
.is-error { color: var(--danger); }
.brain-msg.is-working, .brain-msg.is-ok { border-color: var(--accent); }
.brain-msg.is-error { border-color: var(--danger); }
.brain-msg-system { display: flex; align-items: center; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: var(--panel-2);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.9em;
}
pre {
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
pre code { background: transparent; padding: 0; }

/* ---------- App shell ---------- */
/* `dvh` is the *dynamic* viewport height — what is actually visible right
   now, with the phone's address bar in whatever state it is in. `vh` on
   mobile means the height with the bar RETRACTED, which is taller than the
   screen while the bar is showing, so the last child of a 100vh column —
   here, the composer — sits below the fold with no way to scroll to it.
   That is why the chat box was missing on Android Chrome and present on
   every desktop it was tested on.

   Both lines on purpose: a browser that does not know `dvh` ignores the
   second and keeps the first. */
/* `svh`, not `dvh`. Both fix the original bug — plain `vh` is the height
   with the address bar RETRACTED, taller than the screen while the bar
   shows, which pushed the composer below the fold. But `dvh` is
   *dynamic*: it tracks the visible viewport, so it also shrinks when the
   on-screen keyboard opens, and the whole shell resizes under the user
   the moment they tap the composer. `svh` is the smallest viewport
   height — never taller than the screen, and static, so focusing a field
   changes nothing. It shipped alongside `dvh`, so support is identical,
   and `vh` stays first as the fallback for anything older. */
.app { display: flex; height: 100vh; height: 100svh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem 0.5rem;
}
.brand { font-weight: 600; }

/* Sidebar tabs */
.sidebar-tabs {
  display: flex; gap: 0;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-tab {
  flex: 1;
  padding: 0.55rem 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.sidebar-tab:hover { color: var(--fg); }
.sidebar-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.sidebar-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sidebar-panel.hidden { display: none; }
#sidebar-models { overflow-y: auto; }

.sidebar-search {
  padding: 0.5rem 0.75rem;
}
.sidebar-search input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
}
.sidebar-search input:focus { outline: 1px solid var(--accent); }

.new-chat-btn {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.5rem 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg); font-weight: 500;
}
.new-chat-btn span { font-size: 1.05rem; color: var(--accent); }
.new-chat-btn:hover { background: var(--panel-2); }
.chat-list { flex: 1; overflow-y: auto; padding: 0.25rem 0.5rem; }
.chat-list-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--muted);
  margin-bottom: 2px;
}
.chat-list-item:hover { background: var(--panel-2); color: var(--fg); }
.chat-list-item.active { background: var(--panel-2); color: var(--fg); }
.chat-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem;
  flex: 1;
}
.incognito-tag {
  font-size: 0.75rem; flex-shrink: 0; opacity: 0.7;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-foot {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--border);
}
.sidebar-foot a { color: var(--muted); font-size: 0.82rem; }
.sidebar-foot a:hover { color: var(--fg); }

/* ---------- Models sidebar tab ---------- */
.models-section {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.models-section + .models-section {
  border-top: 1px solid var(--border);
}
/* Collapsible sections: fixed heights with per-section scrollbars */
.models-section.collapsible .models-section-body {
  overflow-y: auto;
  min-height: 0;
  padding: 0 0.75rem 0.75rem;
  max-height: 28vh;
}
.models-section.collapsible.models-params .models-section-body {
  max-height: none; /* params form is short — no scroll needed */
  overflow-y: visible;
}
.models-section.collapsible[data-collapsed="true"] .models-section-body {
  display: none;
}
.models-section-header {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%;
  background: none; border: none;
  padding: 0.65rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}
.models-section-header:hover { color: var(--fg); background: var(--panel-2); }
.ms-chevron {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 0.65rem;
}
.models-section[data-collapsed="true"] .ms-chevron { transform: rotate(-90deg); }
.ms-count {
  margin-left: auto;
  font-size: 0.66rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.45rem;
  color: var(--muted);
}
.models-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.model-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}
.model-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.model-item:hover { background: var(--panel-2); }
.model-item.active { background: var(--panel-2); border-color: var(--accent); }
.model-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.model-name {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tag {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.5;
  cursor: help;
  position: relative;
}
.tag-text { border-color: #4a9eff44; color: #7bb8ff; }
.tag-vision { border-color: #a78bfa44; color: #c4b5fd; }
.tag-code { border-color: #34d39944; color: #6ee7b7; }
.tag-general { border-color: #f59e0b44; color: #fbbf24; }
.tag-reasoning { border-color: #f472b644; color: #f9a8d4; }
.tag-tool { border-color: #22d3ee44; color: #67e8f9; }
.tag-embedding { border-color: #6b728044; color: #9ca3af; }

/* ── Cloud status card (Phase 5) ── */
.cloud-status-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.65rem; margin: 0.4rem 0.5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.75rem;
}
.cloud-chip {
  display: inline-block; padding: 0.05rem 0.45rem;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); font-size: 0.68rem;
}
.cloud-model-statuses { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.model-status {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.65rem;
}
.model-status-ok { color: #6ee7b7; border: 1px solid #34d39944; }
.model-status-rate_limited { color: #fbbf24; border: 1px solid #f59e0b44; }
.model-status-offline { color: #f87171; border: 1px solid #ef444444; }
.model-status-embedding { color: var(--muted); border: 1px solid var(--border); }

.tag:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Parameters section at bottom of Models tab */
.models-params {
  padding: 0;
  border-top: 1px solid var(--border);
}
.params-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.params-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.params-form input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.params-form input[type="number"] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font: inherit;
  width: 100%;
}
.param-val {
  font-size: 0.78rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ---------- Main column ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  min-height: 52px;
}
.topbar-title {
  display: flex; align-items: center; gap: 0.6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.pagetitle-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted);
  font-size: 0.95rem;
}
.topbar-actions { display: flex; gap: 0.4rem; }

/* ── Brain icon button (SVG ring + emoji) ─────────────────────── */
.brain-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: transparent; border: none;
  cursor: default; padding: 0; border-radius: 50%; flex-shrink: 0;
  transition: transform 0.15s;
}
.brain-icon-btn:hover { transform: scale(1.1); }
.brain-icon-btn.pending { cursor: pointer; }

.brain-emoji {
  position: absolute; font-size: 1rem; line-height: 1;
  pointer-events: none; z-index: 1;
}

.brain-ring {
  position: absolute; inset: 0; width: 36px; height: 36px;
  pointer-events: none; z-index: 0;
}
.ring-bg {
  fill: none; stroke: #334155; stroke-width: 2.5; opacity: 0.4;
}
.ring-fg {
  fill: none; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 100.53;  /* 2 * PI * 16 */
  stroke-dashoffset: 100.53;  /* fully hidden */
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s;
}

/* Green — up to date: full ring, no animation */
.brain-icon-btn.ready .ring-fg {
  stroke: #4ade80; stroke-dashoffset: 0; opacity: 0.7;
}
.brain-icon-btn.ready .brain-emoji { filter: none; }

/* Pink pulse — pending push */
.brain-icon-btn.pending .ring-fg {
  stroke: #f472b6; stroke-dashoffset: 0; opacity: 0.85;
  animation: ring-pulse 2s ease-in-out infinite;
}

/* Ingesting — animated sweep around the ring */
.brain-icon-btn.ingesting .ring-fg {
  stroke: #f472b6; opacity: 1;
  animation: ring-sweep 2s linear infinite;
}

/* Incognito — grey, no ring */
.brain-icon-btn.incognito .ring-fg {
  stroke: #6b7280; stroke-dashoffset: 100.53; opacity: 0.3;
}
.brain-icon-btn.incognito .brain-emoji { opacity: 0.5; }

.brain-elapsed {
  position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  font-size: 0.55rem; color: var(--muted); white-space: nowrap;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.brain-icon-btn.ingesting .brain-elapsed { opacity: 1; }

@keyframes ring-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.4; }
}
@keyframes ring-sweep {
  0%   { stroke-dashoffset: 100.53; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100.53; }
}

/* ── Incognito pill toggle ────────────────────────────────────── */
.incognito-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid #334155;
  background: transparent; color: var(--muted); font-size: 0.78rem;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.incognito-pill:hover { border-color: #475569; }
.incognito-pill.pill-on {
  border-color: #4ade80; color: #4ade80;
}
.incognito-pill.pill-off {
  border-color: #f472b6; color: #f472b6;
}

/* ── Small icon button (delete) ───────────────────────────────── */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #334155;
  background: transparent; font-size: 0.85rem; cursor: pointer;
  transition: all 0.15s; padding: 0; line-height: 1;
}
.btn-icon:hover { border-color: #ef4444; background: rgba(239,68,68,0.1); }
.btn-icon.danger { color: #ef4444; }

/* ── Push to Memory pill ──────────────────────────────────────── */
.pill-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid #334155;
  background: transparent; font-size: 0.78rem; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.pill-push {
  color: #f472b6; border-color: #f472b6;
}
.pill-push:hover {
  background: rgba(244,114,182,0.12); border-color: #f472b6;
}
.pill-push:disabled {
  opacity: 0.5; cursor: default;
}

.icon-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 0.35rem 0.5rem;
  border-radius: 8px; line-height: 1;
}
.icon-btn:hover { background: var(--panel-2); color: var(--fg); }

.content {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

/* ---------- Messages ---------- */
.messages {
  flex: 1; overflow-y: auto;
  padding: 1.5rem max(1.5rem, calc((100% - 48rem) / 2));
  display: flex; flex-direction: column; gap: 0.5rem;
}
.msg-row.user { display: flex; justify-content: flex-end; }
.msg-row.assistant { display: flex; justify-content: flex-start; }
.message {
  max-width: 85%;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  word-wrap: break-word;
}
.message.user {
  background: var(--panel-2);
  border-bottom-right-radius: 4px;
  padding: 0.4rem 0.9rem;
}
/* pre-line belongs on the text only — on the container it turns the
   template's inter-element newlines into visible blank lines. */
.message.user .content { white-space: pre-line; }
.message.assistant { background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.message .meta {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem;
  min-height: 1.2rem;
}
.message .content p { margin: 0.35rem 0; }
.message .content ul, .message .content ol { margin: 0.35rem 0; padding-left: 1.4rem; }
.message .content h1, .message .content h2, .message .content h3 { margin: 0.6rem 0 0.3rem; }
.thinking { color: var(--muted); }

/* Thinking indicator — pulsing dot animation */
.thinking-anim::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 0.5rem;
  vertical-align: middle;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

.model-tag {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem;
}

.memory-flag {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: #a78bfa22;
  border: 1px solid #a78bfa44;
  color: #c4b5fd;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.memory-flag:hover { background: #a78bfa33; color: #a78bfa; }
.memory-flag:hover { background: #a78bfa33; color: #a78bfa; }

/* Inline status line inside a streaming bubble ("Continuing answer…") */
.stream-status {
  margin-top: 0.35rem;
}

/* Manual continuation button under a truncated reply */
.continue-btn {
  display: block;
  margin-top: 0.5rem;
}

/* ---------- Monitor dashboard ---------- */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1.5rem;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1.2rem;
  min-width: 7.5rem;
}
.stat-num { font-size: 1.5rem; font-weight: 600; }
.stat-label { font-size: 0.78rem; color: var(--muted); }
.stat-warn .stat-num { color: var(--warn); }
.chat-title-inline:hover { text-decoration: underline; }

/* ---------- Composer ---------- */
.composer {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0 auto;
  width: 100%; max-width: 48rem;
  padding: 0.5rem 0.6rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.content-wrap > .composer {
  padding-left: 0.6rem; padding-right: 0.6rem;
}
.composer-row {
  display: flex; align-items: flex-end; gap: 0.4rem;
}
.composer textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  resize: none;
  max-height: 280px;
  padding: 0.45rem 0.2rem;
}
.composer textarea:focus { outline: none; }
.composer:focus-within { border-color: var(--accent); }
.attach-btn { padding: 0.5rem 0.55rem; }

/* Attachment chips inside the composer */
.attach-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.35rem 0.2rem 0.55rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.attach-chips.hidden { display: none; }
.attach-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  font-size: 0.76rem;
  max-width: 200px;
}
.attach-chip .chip-icon { color: var(--muted); flex-shrink: 0; }
.attach-chip .chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-chip .chip-thumb {
  width: 28px; height: 28px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.chip-remove {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 0.72rem; padding: 0.1rem 0.25rem;
  border-radius: 4px; flex-shrink: 0;
}
.chip-remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.attach-chip.uploading { opacity: 0.75; border-style: dashed; }
.chip-spinner {
  width: 11px; height: 11px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: chip-spin 0.7s linear infinite;
}
@keyframes chip-spin { to { transform: rotate(360deg); } }
.chip-status { color: var(--muted); font-size: 0.68rem; flex-shrink: 0; }

/* File-type chooser menu (above the paperclip) */
.attach-type-menu {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: max(1.5rem, calc((100% - 48rem) / 2));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 20;
  overflow: hidden;
}
.attach-type-menu.hidden { display: none; }
.attach-type-option {
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.attach-type-option:hover { background: var(--panel-2); }
.attach-type-option.disabled { opacity: 0.35; cursor: not-allowed; }
.opt-icon { margin-right: 0.35rem; }

/* Attachments shown inside chat messages */
.message .attachment {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-bottom: 0.35rem;
}
.attach-item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  max-width: 100%;
}
.msg-row.user .attach-item { flex-direction: row; }
.attach-item .attach-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.attach-doc-icon { color: var(--muted); flex-shrink: 0; }
.attach-thumb {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  margin-bottom: 0;
}
.attach-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

/* Unsupported-file warning popup above the input */
.attach-warning {
  margin: 0 auto;
  width: min(48rem, calc(100% - 3rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #d2992218;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.4rem;
}
.attach-warning.hidden { display: none; }
.attach-warning-text strong { color: var(--warn); }
#attach-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#attach-suggestions .chip { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
.composer textarea {
  flex: 1; resize: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font: inherit;
  max-height: 240px;
}
.composer textarea:focus { outline: 1px solid var(--accent); }

.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 500;
  padding: 0.55rem 1rem; border-radius: var(--radius);
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); }
.btn.secondary:hover { border-color: var(--muted); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.full { width: 100%; margin-top: 0.6rem; }
.btn.small { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

/* Incognito / Memory toggle states */
.toggle-on {
  background: #10a37f22;
  color: #10a37f;
  border: 1px solid #10a37f44;
}
.toggle-off {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.toggle-off:hover { color: var(--fg); }
.hidden { display: none !important; }
.send-btn { border-radius: 10px; padding: 0.6rem 0.85rem; }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}
.badge.success {
  background: #10a37f22;
  color: #10a37f;
  border: 1px solid #10a37f44;
}

/* ---------- Toast notifications (top-right) ---------- */
.toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(calc(100% + 2rem));
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 20rem;
}
.toast.show {
  opacity: 1;
  transform: translateX(0);
}
.toast-icon {
  font-size: 1.4rem;
  animation: toast-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toast-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.toast-title { font-weight: 600; font-size: 0.92rem; }
.toast-sub { font-size: 0.78rem; color: var(--muted); }
.toast-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
}
.toast-close:hover { background: var(--panel-2); color: var(--fg); }

/* Spinner for in-flight buttons */
.spinner {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid var(--muted);
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  margin-right: 0.35rem;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.working { opacity: 0.75; cursor: wait; }

/* ---------- Welcome / Start Page ---------- */
.welcome {
  margin: auto; width: min(46rem, 92%);
  padding: 2rem 0;
  display: flex; flex-direction: column;
}
.greeting {
  font-size: 2.1rem; font-weight: 700;
  margin: 0 0 0.4rem; text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  background: linear-gradient(100deg, var(--fg) 20%, var(--accent) 60%, #f472b6 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.greeting.greeting-in { opacity: 1; transform: translateY(0); }
.start-sub { text-align: center; margin: 0 0 1.4rem; }
.start-composer {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
}
.start-composer:focus-within { border-color: var(--accent); }
.start-composer textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  resize: none;
  min-height: 3.4rem;
  max-height: 280px;
}
.start-composer textarea:focus { outline: none; }
.topic-row {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  padding: 0.45rem 0 0.2rem;
}
.topic-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.8rem; cursor: pointer;
  transition: all 0.15s;
}
.topic-chip svg { opacity: 0.8; }
.topic-chip:hover { color: var(--fg); border-color: var(--accent); }
.topic-chip.active {
  color: var(--fg); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.topic-models {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  padding: 0.45rem 0 0.2rem;
  border-top: 1px dashed var(--border);
  margin-top: 0.35rem;
}
.topic-models.hidden { display: none; }
.model-pick {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.78rem; cursor: pointer;
  transition: all 0.15s;
  max-width: 240px;
}
.model-pick .mp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-pick .mp-src {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--border); border-radius: 999px; padding: 0 0.35rem;
  flex-shrink: 0;
}
.model-pick:hover { color: var(--fg); border-color: var(--accent); }
.model-pick.selected {
  color: var(--fg); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.start-actions {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0 0.1rem;
}
.start-btn { margin-left: auto; padding: 0.55rem 1.4rem; }

/* Incognito toggle switch */
.incognito-switch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; user-select: none;
  font-size: 0.85rem; color: var(--muted);
}
.incognito-switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.switch-track {
  display: inline-flex; align-items: center;
  width: 40px; height: 22px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.switch-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--muted);
  border-radius: 50%;
  color: var(--bg);
  transition: transform 0.2s, background 0.2s;
}
.incognito-switch input:checked ~ .switch-track {
  background: color-mix(in srgb, #f472b6 30%, transparent);
  border-color: #f472b6;
}
.incognito-switch input:checked ~ .switch-track .switch-thumb {
  transform: translateX(18px);
  background: #f472b6;
}
.incognito-switch input:checked ~ .switch-label { color: var(--fg); }
.incognito-pill:disabled {
  opacity: 0.4; cursor: not-allowed;
}
/* Display-only memory status pill (not interactive) */
span.incognito-pill { cursor: default; user-select: none; }
.center { text-align: center; }

/* ---------- Suggestions ---------- */
.suggestions { margin: 0.7rem 0 0.3rem; }
.suggestions .hint { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.45rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--fg); font-size: 0.83rem; cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip-source {
  font-size: 0.66rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 0.35rem;
}

/* ---------- Pills ---------- */
.model-pill {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  color: #fff; font-size: 0.78rem; font-weight: 500;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.category-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 0.78rem; color: var(--muted);
}

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.warn { color: var(--warn); }

/* ---------- Tables (models page) ---------- */
.page-pad { padding: 1.5rem; overflow-y: auto; }
.models-table, .prefs-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin: 0.5rem 0 1.5rem;
}
.models-table th, .prefs-table th {
  text-align: left; padding: 0.5rem 0.75rem; background: var(--panel-2);
  border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--muted);
}
.models-table td, .prefs-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.models-table tr:last-child td, .prefs-table tr:last-child td { border-bottom: 0; }

/* ---------- Mobile ---------- */
.only-mobile { display: none; }
@media (max-width: 800px) {
  .only-mobile { display: inline-block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.4);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .messages, .composer { padding-left: 1rem; padding-right: 1rem; }
  .message { max-width: 94%; }
}

/* Desktop: ☰ toggles sidebar visibility (open/close) */
@media (min-width: 801px) {
  body.sidebar-open .sidebar { display: none; }
}

/* ── Incognito banner ─────────────────────────────────────────────── */
.incognito-banner {
  margin: 0 auto 0.5rem;
  max-width: 48rem;
  background: #d2992218;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: var(--warn);
  text-align: center;
}
.incognito-banner strong { color: var(--fg); }

/* ── Attachment action buttons (eye / text / download) ────────────── */
.attach-actions {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.msg-row.user .attach-actions { justify-content: flex-end; }
.attach-action {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  color: var(--fg);
  cursor: pointer;
  line-height: 1;
}
.attach-action:hover { background: #3a3a3a; }
.attach-action.active { background: var(--accent); color: #000; border-color: var(--accent); }

/* ── Extracted-text panel (inline, toggle-able) ───────────────────── */
.attach-extracted {
  margin-top: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  opacity: 0;
  padding: 0 0.7rem;
}
.attach-extracted.open {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0.7rem;
  opacity: 1;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ── File viewer modal (overlay) ──────────────────────────────────── */
.file-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.file-modal-overlay.show { opacity: 1; }
.file-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.file-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.file-modal-header .icon-btn {
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.file-modal-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}
.file-modal-body img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.file-modal-body iframe,
.file-modal-body object {
  width: 100%;
  height: 75vh;
  border: none;
  border-radius: 6px;
}
.file-modal-body pre {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg);
}

/* ── Brain Pane (right-side split on desktop) ─────────────────── */
.app.vault-open .main { flex: 1; min-width: 0; }
.app.vault-open .vault-pane { display: flex; flex: 1; min-width: 0; }

.vault-pane {
  display: none; flex: 0 0 50%; flex-direction: column;
  border-left: 1px solid var(--border); background: var(--bg);
  height: 100vh; height: 100svh; overflow: hidden;
  z-index: var(--z-pane);
}

/* Below this the 50/50 split leaves both halves too narrow to use, so the
   pane becomes a full-screen overlay and the chat keeps its full width. */
@media (max-width: 900px) {
  .app.vault-open .main { flex: 1 0 100%; }
  .app.vault-open .vault-pane {
    position: fixed; inset: 0;
    flex: 1 1 auto;
    height: 100svh;
    border-left: none;
    box-shadow: var(--shadow-lg);
    animation: pane-in var(--dur) var(--ease);
  }
  .vault-pane .brain-topbar { padding-top: max(var(--sp-2), env(safe-area-inset-top)); }
  /* The close control is the only way back on a phone — make it obvious. */
  .vault-pane .vault-close-btn { display: inline-flex; }
}
@keyframes pane-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .brain-chat { margin: var(--sp-2); width: calc(100% - var(--sp-4)); }
  .brain-msg { max-width: 100%; font-size: var(--fs-sm); }
  .brain-fab-row { gap: var(--sp-2); }
  .brain-model-select { max-width: 84px; }
  .brain-topbar-link span { display: none; }   /* icon-only on narrow screens */
  /* Wide vault tables scroll inside their own container, never the page. */
  .vault-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vault-table { min-width: 460px; }
}

/* Touch targets: anything tappable meets the minimum on coarse pointers. */
@media (pointer: coarse) {
  .brain-fab, .icon-btn, .vault-action-btn, .brain-chat-send {
    min-width: var(--tap-target); min-height: var(--tap-target);
  }
}

/* ── Vault Landing ──────────────────────────────────────────── */
.vault-landing {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; padding: 0; text-align: center; overflow: hidden;
}
.brain-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: 100%; flex-shrink: 0;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.brain-topbar-spacer {
  grid-column: 1;
  display: flex; align-items: center; justify-content: flex-start;
}
/* Desktop keeps the split view, so the pane's own close button is redundant
   there — the brain icon toggles it. On mobile (overlay) it is essential. */
.vault-close-btn { display: none; }
.brain-topbar-title {
  grid-column: 2; text-align: center;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  justify-content: center;
  font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--fg);
}
.brain-topbar-actions {
  grid-column: 3; justify-self: end;
  display: flex; gap: var(--sp-1);
}
.brain-topbar-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.brain-topbar-link:hover { color: var(--fg); border-color: var(--border); background: var(--panel-2); }
.vault-landing-actions {
  display: flex; gap: 0.75rem; margin-top: 1rem; flex-shrink: 0;
  align-self: center;
}
.vault-landing-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.4rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--fg); font-size: 0.9rem; cursor: pointer;
  transition: all 0.15s;
}
.vault-landing-btn:hover { border-color: #f472b6; background: var(--panel-2); }

/* ── Brain Chat ─────────────────────────────────────────────── */
.brain-chat {
  display: flex; flex-direction: column; width: 100%; flex: 1;
  min-height: 0; margin: 1rem 1rem 0;
  width: calc(100% - 2rem);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.brain-chat-messages {
  flex: 1; overflow-y: auto; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.brain-chat-messages:empty::after {
  content: "Ask about your interests, projects, documents…";
  color: var(--muted); font-size: 0.8rem; text-align: center; margin: auto; opacity: 0.6;
}
.brain-msg {
  max-width: 92%; padding: 0.5rem 0.7rem; border-radius: 10px;
  font-size: 0.8rem; line-height: 1.5; text-align: left; word-break: break-word;
}
.brain-msg-user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 3px;
}
.brain-msg-brain {
  align-self: flex-start; background: var(--panel-2); color: var(--fg);
  border-bottom-left-radius: 3px; white-space: pre-wrap;
}
/* Chips share one shape across citations, model tags and attachments so the
   Brain Pane, Chat and Vault read as one interface. */
.brain-citations {
  margin-top: var(--sp-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.brain-citation {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--bg); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
/* A fact-store citation is the authoritative one — mark it. */
.brain-citation[title="facts"], .brain-citation.is-fact {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}
.brain-model-tag {
  margin-top: var(--sp-2);
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--muted); opacity: 0.75;
}
.brain-chat-form {
  padding: 0.2rem 0.5rem 0.3rem; border-top: 1px solid var(--border);
}
.brain-input-wrap {
  flex: 1; display: flex; align-items: flex-end; gap: 0.35rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.3rem 0.45rem;
}
.brain-input-wrap:focus-within { outline: 1px solid var(--accent); }
.brain-model-select {
  align-self: center; flex-shrink: 0;
  background: transparent; border: none; color: var(--muted);
  font: inherit; font-size: 0.7rem;
  max-width: 110px; padding: 0.3rem 0; cursor: pointer;
}
.brain-model-select:hover { color: var(--fg); }
.brain-model-select:focus { outline: none; }
.brain-model-select option { background: var(--panel); color: var(--fg); }
.brain-chat-input {
  flex: 1; background: transparent; border: none;
  color: var(--fg); padding: 0.35rem 0.2rem;
  font: inherit; font-size: 0.82rem;
  resize: none; max-height: 120px;
  display: block;
}
.brain-chat-input:focus { outline: none; }
.brain-chat-send {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  align-self: flex-end;
  margin-bottom: 1px;
}
.brain-chat-send:hover { filter: brightness(1.15); }
.brain-chat-send svg { display: block; }

/* ── Brain action toolbar: horizontal row above the composer ── */
.brain-fab-row {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 6px;
}
/* Destructive "clear" stays pinned to the far right; new buttons
   added after Vault flow left → right in the space before it. */
.brain-fab-row .brain-fab-clear { margin-left: auto; }
.brain-fab {
  background: transparent; color: var(--muted);
  border: 1.5px solid var(--border); border-radius: 50%;
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: all 0.2s ease;
}
.brain-fab:hover { color: var(--accent); border-color: var(--accent); background: rgba(79,209,197,0.08); }
.brain-fab:disabled { opacity: 0.4; cursor: not-allowed; }
.brain-fab-clear:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.08); }
.brain-fab-vault:hover { font-size: 1.1em; }

/* Teach FAB spinning animation (during ingestion) */
.brain-fab-teach.spinning {
  color: var(--accent); border-color: var(--accent);
  animation: fab-spin 0.8s linear infinite;
}
@keyframes fab-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Saving indicator in chat */
.brain-saving {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Teach card (inline in chat messages area) ──────────────── */
.brain-teach-card {
  margin: 0.4rem 0.75rem; padding: 0.55rem 0.65rem;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--surface, var(--bg));
  animation: teach-card-in 0.2s ease;
}
@keyframes teach-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brain-teach-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.brain-teach-card-title {
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
}
.brain-teach-card-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: 0 0.2rem; line-height: 1;
}
.brain-teach-card-close:hover { color: var(--text); }
.brain-teach-card-text {
  width: 100%; box-sizing: border-box; min-height: 48px; resize: vertical;
  padding: 0.4rem 0.5rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 0.8rem; font-family: inherit;
}
.brain-teach-card-text:focus { outline: 1px solid var(--accent); }
.brain-teach-card-actions {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin-top: 0.4rem;
}
.brain-teach-card-attach {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 0.3rem 0.55rem; cursor: pointer; font-size: 0.78rem;
}
.brain-teach-card-attach:hover { color: var(--accent); border-color: var(--accent); }
.brain-teach-card-add {
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  border-radius: 7px; padding: 0.35rem 0.7rem; cursor: pointer;
  font-size: 0.78rem; margin-left: auto;
}
.brain-teach-card-add:hover { filter: brightness(1.08); }
.brain-teach-card-add:disabled { opacity: 0.5; cursor: default; }
.brain-teach-card-filename {
  font-size: 0.7rem; color: var(--muted); max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Teach link in abstain messages ─────────────────────────── */
.brain-teach-link {
  color: var(--accent); text-decoration: underline; cursor: pointer;
  font-weight: 600;
}
.brain-teach-link:hover { filter: brightness(1.15); }

.brain-msg-system {
  align-self: center; text-align: center; max-width: 90%;
  font-size: 0.72rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.3rem 0.6rem; margin: 0.2rem auto;
}

/* ── Phase C: Brain Home deferred-healing questions ──────────── */
/* ── Brain question sticky notes ────────────────────────────────
   Lives in the empty space above the composer, inside the scrollable
   Brain Home body. One note per question so several can stack — the
   previous single card holding a list could only ever show one thing
   at a time and sat below the composer. */
.brain-notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  margin-top: auto;                 /* settle just above the composer */
}
.brain-notes[hidden] { display: none; }

.brain-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.brain-notes-title { font-weight: var(--fw-medium, 500); }
.brain-notes-toggle {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  display: inline-flex;
  transition: transform var(--dur-fast, 120ms) var(--ease, ease);
}
.brain-notes-toggle:hover { color: var(--fg); }
.brain-notes.collapsed .brain-notes-toggle { transform: rotate(-90deg); }
.brain-notes.collapsed .brain-notes-stack,
.brain-notes.collapsed .brain-notes-more { display: none; }

.brain-notes-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.brain-note {
  position: relative;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-radius: var(--radius-sm, 4px);
  /* Paper, not chrome: a warm ground, a soft lift, and a slight tilt so a
     stack reads as notes rather than as another list of form rows. */
  background: var(--note-bg, #fdf6d8);
  color: #2c2620;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
  transform: rotate(-0.4deg);
  transition: transform var(--dur-fast, 120ms) var(--ease, ease),
              box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}
.brain-note-1 { --note-bg: #e9f6dc; transform: rotate(0.5deg); }
.brain-note-2 { --note-bg: #dcecfa; transform: rotate(-0.2deg); }
.brain-note:hover {
  transform: rotate(0deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 10px 20px -10px rgba(0, 0, 0, 0.4);
}

.brain-note-q {
  margin: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  font-weight: var(--fw-medium, 500);
}

.brain-note-input {
  width: 100%;
  min-height: 2rem;
  resize: vertical;
  padding: var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
  color: inherit;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm, 4px);
}
.brain-note-input:focus-visible {
  outline: 2px solid var(--accent, #4a7dff);
  outline-offset: 1px;
}

.brain-note-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.brain-note-filename {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brain-note-attach,
.brain-note-save,
.brain-note-dismiss {
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  transition: background var(--dur-fast, 120ms) var(--ease, ease);
}
.brain-note-attach {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: inherit;
  padding: var(--sp-1) var(--sp-2);
  display: inline-flex;
  align-items: center;
}
.brain-note-attach:hover { background: rgba(0, 0, 0, 0.07); }
.brain-note-save {
  margin-left: auto;
  border: 0;
  background: #2c2620;
  color: #fff;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium, 500);
}
.brain-note-save:hover { background: #000; }
.brain-note-dismiss {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.45;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 var(--sp-1);
}
.brain-note-dismiss:hover { opacity: 1; }

.brain-note-error { box-shadow: 0 0 0 2px var(--danger, #d64545); }
.brain-note-error-msg {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--danger, #d64545);
}

.brain-notes-more {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: var(--sp-1) 0;
  text-decoration: underline;
}
.brain-notes-more:hover { color: var(--fg); }
.brain-notes-more[hidden] { display: none; }

/* The notes keep their own light paper ground in dark mode — that is the
   point of a sticky note — so only the surrounding chrome adapts. */
@media (prefers-reduced-motion: reduce) {
  .brain-note,
  .brain-note:hover,
  .brain-notes-toggle { transform: none; transition: none; }
}
@media (pointer: coarse) {
  .brain-note-save,
  .brain-note-attach { min-height: var(--tap-target, 40px); }
  .brain-note-dismiss { min-width: var(--tap-target, 40px); min-height: var(--tap-target, 40px); }
}

/* ── Vault Header / Tabs ────────────────────────────────────── */
.vault-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vault-back-btn {
  background: none; border: none; color: var(--accent);
  font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.5rem;
  border-radius: 4px; white-space: nowrap;
}
.vault-back-btn:hover { background: var(--panel-2); }
.vault-title { margin: 0; font-size: 0.95rem; color: var(--fg); }
.vault-header-actions { display: flex; gap: 0.3rem; align-items: center; margin-left: auto; }

.vault-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vault-tab {
  flex: 1; padding: 0.45rem; text-align: center; background: transparent;
  border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.vault-tab:hover { color: var(--fg); }
.vault-tab.active { color: var(--fg); border-bottom-color: #f472b6; }

.vault-content { flex: 1; overflow-y: auto; padding: 0.5rem; }
.vault-panel { }

.vault-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-size: 0.82rem;
}

/* ── Files table ────────────────────────────────────────────── */
.vault-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  table-layout: fixed;
}
.vault-table th {
  text-align: left; padding: 0.35rem 0.5rem; color: var(--muted);
  border-bottom: 1px solid var(--border); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-table th:nth-child(1) { width: 42%; }
.vault-table th:nth-child(2) { width: 34%; }
.vault-table th:nth-child(3) { width: 12%; }
.vault-table th:nth-child(4) { width: 12%; }
.vault-table td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-filename { font-weight: 500; cursor: default; }
.vault-desc-cell { max-width: 100%; }
.vault-desc-link {
  color: var(--accent); text-decoration: none; cursor: pointer;
  font-size: 0.76rem;
}
.vault-desc-link:hover { text-decoration: underline; }
.vault-desc-empty { color: var(--muted); opacity: 0.5; }
.vault-size { color: var(--muted); font-size: 0.72rem; }
.vault-actions { display: flex; gap: 0.25rem; justify-content: flex-end; }
.vault-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.75rem; cursor: pointer;
  text-decoration: none; transition: all 0.15s;
}
.vault-action-btn:hover { border-color: #f472b6; color: #f472b6; }
.vault-action-btn.danger:hover { border-color: #ef4444; color: #ef4444; }

/* ── Images grid ────────────────────────────────────────────── */
.vault-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.vault-card {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--panel); transition: border-color 0.15s;
}
.vault-card:hover { border-color: #f472b6; }
.vault-card-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  cursor: pointer; background: var(--panel-2);
}
.vault-card-body { padding: 0.35rem 0.5rem; }
.vault-card-name {
  font-size: 0.72rem; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.vault-card-actions { display: flex; gap: 0.25rem; padding: 0.2rem 0.5rem 0.4rem; }

/* ── Modals ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(2px);
}
.modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; width: 90%; max-width: 700px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-image { max-width: 90vw; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: 0.9rem; color: var(--fg); }
.modal-close { font-size: 0.85rem; }
.modal-body { padding: 1rem; overflow-y: auto; flex: 1; }
.modal-pre {
  margin: 0; font-size: 0.78rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--fg);
  font-family: inherit;
}
.modal-image-body {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem; overflow: auto;
}
.modal-image-body img {
  max-width: 100%; max-height: 75vh; border-radius: 6px; object-fit: contain;
}

/* Original file viewer modal */
.modal-file-viewer { width: 90%; max-width: 860px; height: 85vh; }
.modal-file-viewer-body {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.modal-file-viewer-body .modal-pre {
  padding: 1rem; overflow-y: auto; flex: 1; margin: 0;
}
.file-viewer-iframe {
  width: 100%; height: 100%; border: none; background: #fff;
  flex: 1;
}

/* Vault file name as clickable view link */
.vault-file-link {
  color: var(--fg); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.vault-file-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Inline stream error (replaces alert popups) ─────────────── */
.stream-error {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}
.se-icon { color: #ef4444; font-size: 1rem; line-height: 1.2; }
.se-body { flex: 1; min-width: 0; }
.se-body strong { color: #ef4444; font-size: 0.85rem; }
.se-msg { margin: 0.25rem 0 0.5rem; font-size: 0.82rem; color: var(--fg); word-break: break-word; }
.se-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.se-suggestions .se-loading { color: var(--muted); font-size: 0.78rem; }
.se-chip { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
.se-chip.se-retry { border-color: var(--accent); color: var(--accent); }
.se-ok { color: var(--accent); font-size: 0.8rem; }

/* Extracted text inline under attachments */
.extracted-pre {
  margin: 0; padding: 0.6rem 0.8rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto;
}

/* Tool result cards in web search modal */
.tool-result-card {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tool-result-header {
  background: var(--panel-2);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.tool-result-content {
  margin: 0; padding: 0.6rem 0.75rem;
  font-size: 0.75rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto;
  background: var(--panel);
}

/* ── Privacy boundary (Phase I) ─────────────────────────────────
   A local model runs here; a cloud model does not. The distinction
   changes what is safe to ask, so it is shown wherever a model is
   picked — and whenever a prompt was actually redacted on its way out. */
.tag-tier { font-weight: var(--fw-medium, 500); letter-spacing: 0.02em; }
.tag-tier-local {
  background: color-mix(in srgb, var(--ok, #2e9e5b) 16%, transparent);
  color: var(--ok, #2e9e5b);
}
.tag-tier-remote {
  background: color-mix(in srgb, var(--accent, #4a7dff) 16%, transparent);
  color: var(--accent, #4a7dff);
}
.privacy-flag {
  color: var(--warn, #b8860b);
  border-color: color-mix(in srgb, var(--warn, #b8860b) 45%, transparent);
}
.privacy-flag::before { content: "\1F512\A0"; }

/* ── Cloud providers, favourites, quota rings (Phase H) ─────────── */
.models-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.show-unavailable { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }

.providers { margin: var(--sp-4) 0; }
.providers-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.provider-card {
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 6px);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.provider-card.is-configured { border-color: color-mix(in srgb, var(--ok, #2e9e5b) 45%, transparent); }
.provider-name { font-weight: var(--fw-medium, 500); }
.provider-state { font-size: var(--fs-xs); font-family: var(--mono, monospace); word-break: break-all; }
.provider-actions { display: flex; gap: var(--sp-2); margin-top: auto; }

.provider-dialog { border: 0; border-radius: var(--radius-md, 6px); padding: var(--sp-4);
  max-width: 420px; width: 92vw; background: var(--bg, #fff); color: var(--fg, #111);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.28)); }
.provider-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.provider-field { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.provider-field input, .provider-field select {
  padding: var(--sp-2); font: inherit; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px); background: var(--bg, #fff); color: inherit;
}
.provider-docs { display: inline-block; margin-top: var(--sp-1); }
.provider-dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.provider-msg { min-height: 1.2em; font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }
.provider-msg.ok { color: var(--ok, #2e9e5b); }
.provider-msg.err { color: var(--danger, #d64545); }

.fav-star {
  background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1;
  color: var(--border, #ccc); padding: 0 var(--sp-1);
  transition: color var(--dur-fast, 120ms) var(--ease, ease);
}
.fav-star:hover { color: var(--muted); }
.fav-star.is-fav { color: #e0a91b; }

/* Remaining free-tier share as a conic sweep: a full ring is untouched
   quota. Easier to read at a glance than another number in a table. */
.quota-ring {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  vertical-align: middle; margin-right: var(--sp-1);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
  mask: radial-gradient(circle, transparent 54%, #000 56%);
}
.models-table tr.is-unavailable { opacity: 0.55; }
.model-status-down { color: var(--danger, #d64545); }
.btn-danger { color: var(--danger, #d64545); border-color: color-mix(in srgb, var(--danger, #d64545) 45%, transparent); }

/* Response-style presets: three named choices instead of four raw dials. */
.param-presets { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.param-preset {
  flex: 1; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  border: 1px solid var(--border, #ddd); background: none; color: var(--muted);
  border-radius: var(--radius-sm, 4px); cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease, ease);
}
.param-preset:hover { color: var(--fg); }
.param-preset.is-active {
  background: color-mix(in srgb, var(--accent, #4a7dff) 16%, transparent);
  border-color: var(--accent, #4a7dff); color: var(--accent, #4a7dff);
  font-weight: var(--fw-medium, 500);
}
.param-advanced > summary {
  cursor: pointer; font-size: var(--fs-xs); color: var(--muted);
  padding: var(--sp-1) 0; list-style: revert;
}
.param-advanced > summary:hover { color: var(--fg); }

/* ── Monitor: one destination, three views (Phase G) ────────────── */
.monitor-shell { display: flex; gap: var(--sp-4); align-items: flex-start; }
.monitor-nav {
  flex: 0 0 auto; width: 170px; display: flex; flex-direction: column;
  gap: var(--sp-1); padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  position: sticky; top: var(--sp-3);
}
.monitor-main { flex: 1 1 auto; min-width: 0; }
.monitor-nav-item {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm, 4px);
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm);
}
.monitor-nav-item:hover { background: var(--hover, rgba(127,127,127,0.1)); color: var(--fg); }
.monitor-nav-item.is-active {
  background: color-mix(in srgb, var(--accent, #4a7dff) 14%, transparent);
  color: var(--accent, #4a7dff); font-weight: var(--fw-medium, 500);
}
.monitor-back {
  font-size: var(--fs-xs); color: var(--muted); text-decoration: none;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border, #ddd);
}
.monitor-back:hover { color: var(--accent, #4a7dff); }

.stat-card-lead { border-color: var(--accent, #4a7dff); }
.stat-unit { font-size: var(--fs-sm); color: var(--muted); margin-left: 2px; }
.stat-sub { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.notice {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm, 4px);
  background: color-mix(in srgb, var(--warn, #b8860b) 12%, transparent);
  font-size: var(--fs-sm);
}
.gap-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.gap-chip {
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm, 4px);
  font-size: var(--fs-xs);
  background: color-mix(in srgb, var(--warn, #b8860b) 14%, transparent);
  color: var(--warn, #b8860b);
}
@media (max-width: 800px) {
  .monitor-shell { flex-direction: column; }
  .monitor-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; padding: var(--sp-3); }
}

/* ── Onboarding form (Phase 11.5) ──────────────────────────────────── */
.onboarding { max-width: 760px; }
.onboarding-lede { margin-bottom: var(--sp-3); }

.onboarding-progress {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.onboarding-bar {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--panel-2, #eee);
}
.onboarding-bar > span {
  display: block; height: 100%; background: var(--accent, #4a7dff);
  transition: width 0.3s ease;
}

.onboarding-saved {
  background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, transparent);
}
.onboarding-error {
  background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent);
}

.onboarding-group {
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.onboarding-group > legend {
  padding: 0 var(--sp-2); font-size: var(--fs-sm); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.onboarding-field { margin-bottom: var(--sp-3); }
.onboarding-field:last-child { margin-bottom: 0; }
.onboarding-field > label {
  display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm);
}
.onboarding-field > input {
  width: 100%; padding: var(--sp-2); font: inherit;
  color: var(--fg); background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.onboarding-field > input:focus {
  outline: none; border-color: var(--accent, #4a7dff);
}
.onboarding-field.has-error > input { border-color: var(--danger, #d64545); }

.onboarding-hint { font-size: var(--fs-xs); margin: var(--sp-1) 0 0; }
.onboarding-hint.error { color: var(--danger, #d64545); }

.onboarding-actions {
  display: flex; gap: var(--sp-2); align-items: center;
  margin-top: var(--sp-4);
}
.onboarding-footnote { font-size: var(--fs-xs); margin-top: var(--sp-4); }
a.gap-chip { text-decoration: none; }
a.gap-chip:hover {
  background: color-mix(in srgb, var(--warn, #b8860b) 26%, transparent);
}

/* ── Tea-time games (Phase 11.10) ──────────────────────────────────── */
.games { max-width: 760px; }
.games-lede { margin-bottom: var(--sp-3); }
.games-ok { background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, transparent); }
.games-warn { background: color-mix(in srgb, var(--warn, #b8860b) 14%, transparent); }

.games-toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.games-modes { display: flex; gap: var(--sp-1); }
.games-modes .btn.active { border-color: var(--accent, #4a7dff); color: var(--accent, #4a7dff); }
.games-count { font-size: var(--fs-xs); margin-left: auto; }

.games-empty {
  padding: var(--sp-4); text-align: center;
  border: 1px dashed var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}

.games-progress {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--panel-2, #eee); margin-bottom: var(--sp-2);
}
.games-progress > span {
  display: block; height: 100%; width: 0;
  background: var(--accent, #4a7dff); transition: width 0.25s ease;
}

.game-card {
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.game-question { font-size: var(--fs-lg, 1.1rem); margin: 0 0 var(--sp-3); }

.game-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.game-option {
  text-align: left; padding: var(--sp-2) var(--sp-3); font: inherit;
  color: var(--fg); background: var(--panel, #fff); cursor: pointer;
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.game-option:hover:not(:disabled) { border-color: var(--accent, #4a7dff); }
.game-option:disabled { cursor: default; opacity: 0.75; }
.game-option.correct {
  border-color: var(--ok, #2e9e5b);
  background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, transparent);
  opacity: 1;
}
.game-option.wrong {
  border-color: var(--danger, #d64545);
  background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent);
  opacity: 1;
}

.game-reveal { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border, #ddd); }
.game-answer { margin: 0 0 var(--sp-1); }
.game-source { font-size: var(--fs-xs); margin: 0; }

.games-actions { display: flex; gap: var(--sp-2); }
.games-done { text-align: center; padding: var(--sp-4) 0; }
.game-score { font-size: var(--fs-lg, 1.1rem); margin-bottom: var(--sp-3); }

/* ── Accounts (Phase 12.1) ─────────────────────────────────────────── */
.auth-page { max-width: 420px; }
.auth-lede { margin-bottom: var(--sp-3); }
.auth-ok { background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, transparent); }
.auth-error { background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent); }

.auth-form { display: flex; flex-direction: column; }
.auth-form > label { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); }
.auth-form > label:first-child { margin-top: 0; }
.auth-form > input {
  padding: var(--sp-2); font: inherit; color: var(--fg);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.auth-form > input:focus { outline: none; border-color: var(--accent, #4a7dff); }
.auth-hint { font-size: var(--fs-xs); margin: var(--sp-1) 0 0; }
.auth-submit { margin-top: var(--sp-4); }
.auth-alt { font-size: var(--fs-sm); margin-top: var(--sp-3); }

.auth-danger {
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--danger, #d64545); border-radius: var(--radius-sm, 4px);
  background: color-mix(in srgb, var(--danger, #d64545) 8%, transparent);
}
.auth-danger > h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md, 1rem); }
.auth-danger > p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.auth-code {
  display: inline-block; margin-left: var(--sp-2);
  padding: var(--sp-1) var(--sp-2); letter-spacing: 0.18em;
  font-family: var(--mono, monospace); font-size: var(--fs-md, 1rem);
  background: var(--panel-2, #eee); border-radius: var(--radius-sm, 4px);
  user-select: all;
}

/* ── Brain Pane shell (Phase 12.4) ─────────────────────────────────── */
.brain-subview {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  /* `min-height: 0` was here; `min-width: 0` was not, and it is the same
     rule for the other axis. A flex item's default minimum size is its
     CONTENT's minimum, so a wide view — the Models list is the widest —
     pushed this box wider than the pane holding it, and `overflow-x:
     hidden` then clipped the excess with no scrollbar and no way to reach
     it. Measured at a 390px viewport: the Models view made this 605px,
     so a third of it was unreachable, while Brain Activity fitted and
     looked fine. That is exactly the "some tabs get cut off, some open
     nicely" the pane was reported for. */
  min-width: 0;
  min-height: 0;
  /* And an explicit width, because `min-width: 0` is not enough here.
     `.vault-pane` is a COLUMN flex container, so width is the cross axis —
     a child whose content is wider simply overflows it, and the pane's own
     `overflow: hidden` then clips the excess with no scrollbar. Pinning
     the width to the pane's is what forces the table below to scroll
     inside itself instead of pushing past the edge of the screen. */
  width: 100%;
  box-sizing: border-box;
}
/* Views were authored as full pages; inside the pane they get a tighter
   gutter so the content is not squeezed into a column. */
.brain-subview .page-pad { padding: var(--sp-3); max-width: none; }
.brain-subview h2 { font-size: var(--fs-md, 1rem); }
.brain-subview h3 { font-size: var(--fs-sm); }
.brain-subview .stat-row { gap: var(--sp-2); flex-wrap: wrap; }
.brain-subview .models-table { font-size: var(--fs-xs); }
/* Wide content scrolls inside itself; it never widens the pane.
 *
 * A table needs both halves of this. `display: block` is what makes
 * `overflow-x` apply to it at all — but on its own it also lets the
 * automatic table layout shrink every column to fit, which is worse than
 * the original bug: the header row came out as a vertical column of single
 * letters ("C o n t e x t") and nothing was readable. Giving the row groups
 * their natural width puts the columns back and lets the whole thing
 * scroll sideways instead. */
.brain-subview table { display: block; overflow-x: auto; max-width: 100%; }
.brain-subview table > thead,
.brain-subview table > tbody,
.brain-subview table > tfoot { display: table; width: max-content; min-width: 100%; }
.brain-subview table th { white-space: nowrap; }
.brain-subview > * { max-width: 100%; }
.brain-subview .models-table-wrap,
.brain-subview .stat-row,
.brain-subview .vault-table-wrap { overflow-x: auto; }

/* Long unbreakable strings — a model id, a file path, a URL — must not be
   what decides the width. Scoped to running text, NOT to tables: breaking
   inside every word there is what produced the vertical letters. */
.brain-subview p,
.brain-subview li,
.brain-subview code,
.brain-subview .muted { overflow-wrap: anywhere; }
.pane-loading { padding: var(--sp-4); text-align: center; }

/* Maximize: the pane takes the window, and only when asked. */
.brain-pane.is-maximized {
  position: fixed; inset: 0; width: 100vw; max-width: 100vw;
  height: 100vh; height: 100svh; z-index: 60; border-left: none;
}
.brain-pane.is-maximized .brain-subview .page-pad {
  max-width: 1100px; margin: 0 auto; padding: var(--sp-4);
}

/* Profile menu */
.brain-profile { position: relative; }
.brain-profile-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  min-width: 210px; padding: var(--sp-1);
  background: var(--panel, #fff); border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.brain-profile-who {
  padding: var(--sp-2); font-size: var(--fs-xs); color: var(--muted);
  border-bottom: 1px solid var(--border, #ddd); margin-bottom: var(--sp-1);
}
.brain-profile-item {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2); font: inherit; font-size: var(--fs-sm);
  color: var(--fg); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-sm, 4px); text-decoration: none;
}
.brain-profile-item:hover { background: var(--panel-2, #eee); }
.brain-profile-item.is-danger { color: var(--danger, #d64545); }
.brain-profile-item.is-danger:hover {
  background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent);
}

/* ── Auth forms: inline errors, reveal, profile list ────────────────── */
.auth-field { margin-bottom: var(--sp-3); }
.auth-field > label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
.auth-input-wrap { position: relative; display: flex; }
.auth-input-wrap > input {
  flex: 1; padding: var(--sp-2); padding-right: 2.4rem; font: inherit;
  color: var(--fg); background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.auth-input-wrap > input:focus { outline: none; border-color: var(--accent, #4a7dff); }
.auth-field.has-error .auth-input-wrap > input { border-color: var(--danger, #d64545); }
.auth-field.is-ok .auth-input-wrap > input { border-color: var(--ok, #2e9e5b); }

.auth-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; padding: var(--sp-1);
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.auth-eye:hover, .auth-eye.is-on { color: var(--accent, #4a7dff); }

.auth-msg { font-size: var(--fs-xs); margin: var(--sp-1) 0 0; }
.auth-msg.is-error { color: var(--danger, #d64545); }
.auth-msg.is-ok { color: var(--ok, #2e9e5b); }

/* Profile switcher */
.profile-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.profile-list > li { margin-bottom: var(--sp-2); }
.profile-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--fg);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.profile-row:hover { border-color: var(--accent, #4a7dff); }
.profile-row.is-current { border-color: var(--accent, #4a7dff); opacity: 0.7; }
.profile-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: var(--panel-2, #eee); color: var(--muted);
}
.profile-meta { display: flex; flex-direction: column; }
.profile-name { font-size: var(--fs-sm); }
.profile-sub { font-size: var(--fs-xs); }
.signed-out-notice {
  margin: var(--sp-3) 0; font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--accent, #4a7dff) 10%, transparent);
}

/* ── Tea break: scoreboard and puzzles (Phase 12.5) ─────────────────── */
.games-scoreboard {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.score-figure { display: flex; flex-direction: column; }
.score-value { font-size: 1.6rem; line-height: 1; }
.score-label { font-size: var(--fs-xs); }
.score-trend { font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: 999px; }
.score-trend.is-up { color: var(--ok, #2e9e5b); background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, transparent); }
.score-trend.is-down { color: var(--warn, #b8860b); background: color-mix(in srgb, var(--warn, #b8860b) 14%, transparent); }
.score-history { margin-left: auto; font-size: var(--fs-xs); }
.score-history ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-3); }
.games-generate { display: inline; }

/* Puzzles */
.puzzle-wrap { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-start; }
.puzzle-words { flex: 1 1 200px; min-width: 180px; }
.puzzle-words h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.puzzle-words ul { list-style: none; margin: 0 0 var(--sp-3); padding: 0; font-size: var(--fs-sm); }
.puzzle-words li.is-found { text-decoration: line-through; color: var(--muted); }

table.wordsearch { border-collapse: collapse; user-select: none; }
table.wordsearch td {
  width: 1.7rem; height: 1.7rem; text-align: center; vertical-align: middle;
  font-family: var(--mono, monospace); font-size: var(--fs-sm);
  border: 1px solid var(--border, #ddd); cursor: pointer;
}
table.wordsearch td.is-selected { background: color-mix(in srgb, var(--accent, #4a7dff) 30%, transparent); }
table.wordsearch td.is-found {
  background: color-mix(in srgb, var(--ok, #2e9e5b) 26%, transparent);
  color: var(--fg);
}

table.crossword { border-collapse: collapse; }
table.crossword td {
  position: relative; width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid var(--border, #ddd);
}
table.crossword td.is-block { background: var(--panel-2, #ddd); border-color: var(--panel-2, #ddd); }
table.crossword input {
  width: 100%; height: 100%; padding: 0; text-align: center;
  font: inherit; font-family: var(--mono, monospace); text-transform: uppercase;
  color: var(--fg); background: transparent; border: 0;
}
table.crossword input:focus { outline: 2px solid var(--accent, #4a7dff); outline-offset: -2px; }
table.crossword input.is-wrong { color: var(--danger, #d64545); }
.cw-num {
  position: absolute; top: 0; left: 2px; font-size: 8px;
  color: var(--muted); pointer-events: none;
}

/* ── Watched folders (Phase 12.2) ───────────────────────────────────── */
.vault-folders-lede { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.folder-row {
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
}
.folder-head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 0; font: inherit; color: var(--fg); background: none;
  border: 0; cursor: pointer; text-align: left;
}
.folder-name { font-size: var(--fs-sm); }
.folder-summary { font-size: var(--fs-xs); margin-left: auto; }
.folder-path {
  font-size: var(--fs-xs); margin: var(--sp-1) 0 0;
  word-break: break-all; font-family: var(--mono, monospace);
}
.folder-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.folder-files { margin-top: var(--sp-2); }
.folder-file-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.folder-file-list > li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) 0; border-top: 1px solid var(--border, #eee);
}
.folder-file-list .ff-name { flex: 1; word-break: break-all; }
.folder-file-list .ff-state { flex: 0 0 auto; }
.folder-file-list > li.is-done > .icon { color: var(--ok, #2e9e5b); }
.folder-file-list > li.is-ingesting > .icon { color: var(--accent, #4a7dff); }
.folder-file-list > li.is-queued > .icon { color: var(--muted); }
.folder-file-list > li.is-failed > .icon { color: var(--danger, #d64545); }

.folder-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.folder-add > input[type="text"] {
  flex: 1 1 220px; padding: var(--sp-2); font: inherit; color: var(--fg);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.folder-create { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.folder-note { font-size: var(--fs-xs); margin-top: var(--sp-2); }
.folder-note.is-error { color: var(--danger, #d64545); }
.folder-note.is-ok { color: var(--ok, #2e9e5b); }

/* ── Brain Pane sub-navigation (Phase 12.4 fix) ─────────────────────── */
.pane-nav {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border, #ddd);
  position: sticky; top: 0; z-index: 2;
  background: var(--panel, #fff);
}
.pane-nav-item {
  padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-xs);
  color: var(--muted); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.pane-nav-item:hover { color: var(--fg); background: var(--panel-2, #eee); }
.pane-nav-item.is-active { color: var(--accent, #4a7dff); background: var(--panel-2, #eee); }

/* ── Standalone account pages (Phase 12.1 fix) ─────────────────────── */
.auth-body { margin: 0; background: var(--bg, #111); color: var(--fg, #eee); }
.auth-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.auth-topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border, #333);
}
.auth-exit {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm);
}
.auth-exit:hover { color: var(--accent, #4a7dff); }
.auth-brand { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 auto; }
.auth-who {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--muted);
}
.auth-main { flex: 1; padding: var(--sp-5, 2rem) var(--sp-4); max-width: 420px; margin: 0 auto; width: 100%; }
.auth-heading { font-size: 1.3rem; margin: 0 0 var(--sp-4); }
.auth-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.auth-tab {
  flex: 1; padding: var(--sp-2); font: inherit; font-size: var(--fs-sm);
  color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.auth-tab.is-active {
  color: var(--accent, #4a7dff); border-color: var(--accent, #4a7dff);
  background: color-mix(in srgb, var(--accent, #4a7dff) 10%, transparent);
}

/* ── Signed-out prompts (Phase 12.1 fix) ───────────────────────────── */
.signin-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--accent, #4a7dff) 12%, transparent);
  border-bottom: 1px solid var(--border, #333);
}
.signin-banner-close {
  margin-left: auto; padding: 0 var(--sp-2); font-size: 1.2rem; line-height: 1;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.signin-banner-close:hover { color: var(--fg); }
.brain-locked { opacity: 0.55; }
.brain-locked:hover { opacity: 1; }

/* ── Folder chooser (Phase 12.2 fix) ───────────────────────────────── */
.folder-browser {
  margin-top: var(--sp-3); padding: var(--sp-2);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.fb-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.fb-path {
  font-size: var(--fs-xs); font-family: var(--mono, monospace);
  word-break: break-all;
}
.fb-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 220px; overflow-y: auto;
  border-top: 1px solid var(--border, #eee);
}
.fb-list > li { border-bottom: 1px solid var(--border, #eee); }
.fb-list button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-sm);
  color: var(--fg); background: none; border: 0; cursor: pointer; text-align: left;
}
.fb-list button:hover { background: var(--panel-2, #eee); }
.fb-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.fb-actions > input {
  flex: 1 1 160px; padding: var(--sp-1) var(--sp-2); font: inherit;
  font-size: var(--fs-sm); color: var(--fg); background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 4px);
}
.folder-manual { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.folder-manual > summary { cursor: pointer; font-size: var(--fs-xs); }
.folder-cloud {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border, #ddd);
}
.folder-cloud > h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.folder-cloud > p { font-size: var(--fs-xs); margin: 0 0 var(--sp-1); }
.folder-cloud-actions { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }

/* ── Calendar panel (Phase 13.3) ───────────────────────────────────── */
/* The read-only badge sits next to the heading, where the decision to
   connect is actually made — not in a document nobody opens. */
.folder-cloud > h4 .pill {
  margin-left: var(--sp-2); padding: 1px var(--sp-2);
  font-size: var(--fs-2xs, 10px); font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: middle;
  color: var(--fg-muted, #666); background: var(--panel-2, #f4f4f5);
  border: 1px solid var(--border, #ddd); border-radius: 999px;
}
.calendar-list {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.calendar-row {
  display: flex; gap: var(--sp-2); align-items: baseline;
  font-size: var(--fs-xs); padding: 2px 0;
}
.calendar-when {
  flex: 0 0 auto; min-width: 8.5em;
  color: var(--fg-muted, #666); font-variant-numeric: tabular-nums;
}
/* Titles can be long and the pane is narrow; one line each keeps the list
   scannable, and the full text is in the user's own calendar anyway. */
.calendar-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A declined meeting is shown but struck through: it is on the calendar
   and it is not going to happen, and hiding it would be a different lie. */
.calendar-row.is-declined .calendar-title {
  text-decoration: line-through; color: var(--fg-muted, #666);
}

/* ── Mail panel (Phase 13.4) ───────────────────────────────────────── */
.mail-list {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mail-row { font-size: var(--fs-xs); }
.mail-subject {
  display: block; font-weight: 500; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-meta { display: block; color: var(--fg-muted, #666); }
/* The summary is the only text here that came from a message, and a local
   model wrote it. It is quoted visually so nobody mistakes it for the
   message itself. */
.mail-summary {
  margin: 2px 0 0; padding-left: var(--sp-2);
  border-left: 2px solid var(--border, #ddd);
  color: var(--fg-muted, #666);
}
/* Somebody else spoke last. Not "needs a reply" — that is the user's call,
   so this is a marker, not an alarm. */
.mail-row.is-awaiting .mail-subject { border-left: 0; }
.mail-row.is-awaiting .mail-subject::before {
  content: "•"; color: var(--accent, #4a7); margin-right: var(--sp-1);
}

/* ── Understanding (Phases 13.2–13.5) ──────────────────────────────── */
.u-block { margin: 0 0 var(--sp-5); }
.u-block > h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.u-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
          display: flex; flex-direction: column; gap: var(--sp-2); }

/* A proposal shows its preview at full length. Truncating it would make
   "Yes" mean "trust me", which is the one thing the spine exists to
   prevent. */
.u-proposal {
  padding: var(--sp-3); border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px); background: var(--panel, #fff);
}
.u-proposal-title { font-weight: 600; font-size: var(--fs-sm); }
.u-proposal-preview { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-sm); }
.u-proposal-actions { display: flex; gap: var(--sp-2); align-items: center; }
.u-irreversible {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em;
  color: var(--danger, #b44);
}

.u-timeline { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.u-moment {
  display: flex; gap: var(--sp-2); align-items: baseline;
  padding: 3px 0; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}
.u-when { flex: 0 0 4.5em; color: var(--fg-muted, #666);
          font-variant-numeric: tabular-nums; }
.u-what { flex: 0 0 auto; }
.u-detail { flex: 1 1 auto; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A correction is the most interesting thing on the timeline: it is the
   brain being wrong and then not being wrong. */
.u-moment-changed .u-what { font-weight: 600; }

.u-stale-row {
  display: flex; gap: var(--sp-2); align-items: baseline;
  font-size: var(--fs-sm);
}
.u-stale-row .btn { margin-left: auto; }

/* ── The start page (front door) ────────────────────────────────────
   Signing in used to be reachable only from inside a chat. This is the
   page that decides whose Second Brain is open, so it is deliberately
   sparse: one obvious primary action, everything else quieter. */
.start-page {
  max-width: 26rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.start-brand { text-align: center; margin-bottom: var(--sp-2); }
.start-title {
  margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em;
}
.start-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.start-lede { margin: 0; text-align: center; font-size: var(--fs-sm); }

/* One primary action, full width, unmissable. */
.start-primary {
  display: block; width: 100%; text-align: center;
  padding: var(--sp-3); font-size: var(--fs-md); text-decoration: none;
}
.start-secondary { display: flex; gap: var(--sp-2); }
.start-secondary > .btn {
  flex: 1 1 0; text-align: center; text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
}

/* Incognito is a real choice, not a hidden one — but it is the choice that
   learns nothing, so it sits below a rule with its consequence spelled
   out rather than being discovered later. */
.start-incognito {
  margin-top: var(--sp-2); padding-top: var(--sp-4);
  border-top: 1px solid var(--border, #333); text-align: center;
}
.start-incognito-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--fg-muted, #999); text-decoration: none;
  font-size: var(--fs-sm);
}
.start-incognito-link:hover { color: var(--fg); text-decoration: underline; }
.start-incognito-note {
  margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: 1.5;
}

/* ── Chat top bar ───────────────────────────────────────────────────
   One visual language. The bar previously mixed a saturated model pill, a
   boxed emoji, a ringed emoji, a bordered pill and an outlined pill — five
   shapes and three accent colours across six controls, none of which
   agreed on height. Everything here is now the same height and radius and
   quiet at rest; colour marks state that means something and nothing else. */
:root { --bar-h: 30px; --bar-r: 8px; }

/* The model: a colour dot plus its name, not a filled pill. */
.chat-model {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--bar-h); padding: 0 var(--sp-2) 0 var(--sp-2);
  max-width: 15rem; border-radius: var(--bar-r);
  background: var(--panel-2, #2a2a2a); color: var(--fg);
  font-size: var(--fs-xs);
}
.chat-model-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.chat-model-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chips: context, save-to-brain, memory state. */
.bar-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--bar-h); padding: 0 var(--sp-3);
  border-radius: var(--bar-r); border: 1px solid var(--border, #3a3a3a);
  background: transparent; color: var(--fg-muted, #999);
  font-size: var(--fs-xs); font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.bar-chip:hover { background: var(--panel-2, #2a2a2a); color: var(--fg); }
.bar-chip.is-action { color: var(--fg); }
/* A state chip is a fact, not a control: memory is decided when the chat
   starts and cannot be changed from here, so it must not invite a click. */
.bar-chip.is-state { cursor: default; }
.bar-chip.is-state:hover { background: transparent; }
.bar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-muted, #777); flex: 0 0 auto;
}
.bar-chip.is-on { color: var(--fg); border-color: var(--ok, #2f9e6e); }
.bar-chip.is-on .bar-dot { background: var(--ok, #2f9e6e); }
.bar-chip.is-incognito { border-style: dashed; }

/* Icon buttons: same box as the chips, square. */
.bar-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--bar-h); height: var(--bar-h);
  border-radius: var(--bar-r); border: 1px solid transparent;
  background: transparent; color: var(--fg-muted, #999);
  cursor: pointer; padding: 0;
}
.bar-icon:hover { background: var(--panel-2, #2a2a2a); color: var(--fg); }
/* Destructive at rest is just another button; it only turns red when the
   pointer is on it, so a red icon never sits in the corner of the eye. */
.bar-icon.is-danger:hover { color: var(--danger, #e5534b); }
.bar-form { display: inline-flex; margin: 0; }

.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pagetitle-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-muted, #999); font-size: var(--fs-sm);
}

/* ── Vault: make the panels actually scroll ─────────────────────────
   `.vault-content` has said `flex: 1; overflow-y: auto` all along and
   never scrolled, because its parent was a plain block with no height to
   fill. `flex: 1` needs a flex parent, and `overflow` needs a bounded
   height — an auto-height element cannot overflow, it just grows, and the
   whole pane scrolled instead of the list inside it.

   `min-height: 0` is the other half. A flex item's default minimum size is
   its content, so a long list refuses to shrink below its natural height
   and pushes the scroll onto its ancestor no matter what `overflow` says.
   This is the single most common reason a flex layout will not scroll. */
#vault-content-area {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.vault-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Each panel fills the scroller rather than adding a second one: nested
   scrollbars are how a list ends up needing two gestures to reach. */
.vault-panel { min-height: 0; }
/* Wide content scrolls sideways in its own box so the pane never does. */
.vault-table-wrap { overflow-x: auto; }

/* A locked Incognito switch. Signed out there is no Second Brain to write
   to, so this is a fact rather than a preference — it reads as set, not as
   something the user has simply not changed yet. */
.incognito-switch.is-locked { cursor: not-allowed; opacity: 0.75; }
.incognito-switch.is-locked .switch-track { filter: grayscale(0.35); }

/* ── People (accounts and invites) ──────────────────────────────────── */
.people-seats {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm, 4px); background: var(--panel-2, #2a2a2a);
  font-size: var(--fs-sm); display: inline-block;
}
.people-seats.is-full { color: var(--danger, #e5534b); }
.people-row, .invite-row {
  display: flex; gap: var(--sp-3); align-items: baseline;
  font-size: var(--fs-sm); padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}
.invite-row .btn { margin-left: auto; }
.invite-row code { font-family: var(--mono, monospace); letter-spacing: .05em; }
/* A used or expired code cannot let anyone in; showing it as live would
   have somebody hand it over and be told it is invalid. */
.invite-row code.is-spent {
  text-decoration: line-through; color: var(--fg-muted, #777);
}
.people-invite { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }
.people-invite input { flex: 1 1 auto; }

/* Shown once and large: it is going to be read off this screen and typed
   on somebody else's phone. */
.invite-fresh {
  margin: var(--sp-3) 0; padding: var(--sp-3);
  border: 1px dashed var(--accent, #2f9e6e);
  border-radius: var(--radius-sm, 4px);
}
.invite-code {
  display: inline-block; margin-right: var(--sp-3);
  font-size: 1.5rem; letter-spacing: .12em;
  font-family: var(--mono, monospace); color: var(--fg);
}

/* ── Understanding: tabs ────────────────────────────────────────────
   Four sections answering different questions. They were stacked, and the
   timeline — much the longest — pushed "worth re-checking" off the bottom
   where nobody found it. */
.u-page { max-width: 46rem; }
.u-head { margin-bottom: var(--sp-4); }
.u-head h2 { margin: 0 0 var(--sp-1); }
.u-head p { margin: 0; font-size: var(--fs-sm); }

.u-tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #333);
  margin-bottom: var(--sp-4);
}
.u-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--fg-muted, #999); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; white-space: nowrap;
}
.u-tab:hover { color: var(--fg); }
.u-tab.is-active { color: var(--fg); border-bottom-color: var(--accent, #2f9e6e); }
/* A count only appears when there is something to count: a row of zeroes
   reads as work outstanding when there is none. */
.u-count {
  min-width: 1.4em; padding: 0 var(--sp-1); border-radius: 999px;
  background: var(--panel-2, #2a2a2a); color: var(--fg);
  font-size: var(--fs-xs); text-align: center;
}
.u-count-warn { background: var(--danger, #e5534b); color: #fff; }

.u-filter {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.u-filter p { flex: 1 1 auto; margin: 0; font-size: var(--fs-sm); }
.u-select {
  padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-xs);
  color: var(--fg); background: var(--panel-2, #2a2a2a);
  border: 1px solid var(--border, #3a3a3a); border-radius: var(--radius-sm, 4px);
}
.u-empty {
  padding: var(--sp-5) 0; text-align: center;
  color: var(--fg-muted, #999); font-size: var(--fs-sm);
}

/* A moment is a date and a block, not one long line. Mail summaries are
   paragraphs and ran off the page in both directions. */
.u-moment {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-subtle, #262626);
  font-size: var(--fs-sm);
}
.u-when {
  flex: 0 0 4.5em; color: var(--fg-muted, #999);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.u-body { flex: 1 1 auto; min-width: 0; }
.u-what { display: block; }
.u-detail {
  margin: 2px 0 0; line-height: 1.45;
  /* Two lines, then an ellipsis: enough to recognise, never enough to
     bury the next entry. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-moment-changed .u-what { font-weight: 600; }

.u-conflict {
  padding: var(--sp-3); border: 1px solid var(--danger, #e5534b);
  border-radius: var(--radius-sm, 4px); background: var(--panel, #171717);
}
.u-conflict-head { font-weight: 600; font-size: var(--fs-sm); }
.u-conflict p { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }

/* ── Model picker: stars and provider groups ────────────────────────
   Eighty-odd models across four providers. A star keeps the two or three
   anyone actually uses at the top; the groups stop the rest from being one
   endless scroll. */
.model-item { position: relative; }
.model-star {
  position: absolute; right: var(--sp-2); top: var(--sp-2);
  color: var(--border, #3a3a3a); font-size: var(--fs-sm);
  line-height: 1; cursor: pointer; user-select: none;
}
.model-star:hover { color: var(--fg-muted, #999); }
.model-star.is-on { color: var(--warn, #e3b341); }
/* A cloned favourite keeps its star lit and still selects the model. */
.model-item[data-favourite-copy] .model-star.is-on { color: var(--warn, #e3b341); }

/* Collapsed providers show only their header, so Google's forty entries
   are one line until asked for. */
.models-section.collapsible[data-collapsed="true"] .models-section-body {
  display: none;
}
.models-section-header { display: flex; align-items: center; gap: var(--sp-2); }
.ms-count { margin-left: auto; }

/* ── Phones and tablets ─────────────────────────────────────────────
 *
 * Everything below fixes behaviour that only appears on a touch device,
 * and so survived every round of desktop testing.
 */

/* Zoom-on-focus. Mobile Safari and Chrome zoom the page in when a text
 * field with a font smaller than 16px receives focus — and they do not
 * zoom back out. The page is then wider than the screen, so the controls
 * either side of whatever was tapped are off-screen: "it gets a little
 * maximized and cuts all the other options".
 *
 * 16px exactly, not "larger": this is a threshold, not a preference. The
 * fields stay their designed size on a desktop, where the behaviour does
 * not exist.
 *
 * Ranges, checkboxes and radios are excluded because they have no text to
 * type into and never trigger it.
 */
@media (max-width: 900px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    /* `!important`, and it is not laziness.
     *
     * This rule is an element selector, so ANY rule with a class or an id
     * beats it no matter where it sits in the file. That is not a corner
     * case — it is how nearly every field here is styled, and it meant the
     * first version of this fix silently did nothing for three of them:
     * `.brain-chat-input` stayed at 13.12px, `.brain-model-select` at
     * 11.2px and `.brain-teach-card-text` at 12.8px, measured in a browser
     * at 390px. Every one is in the Brain pane, which is exactly where the
     * pane was reported to "keep resizing when you select the composer".
     *
     * Sixteen pixels is a viewport-level floor imposed by the platform's
     * zoom behaviour, not a design choice a component may overrule, so it
     * is one of the few places where !important says the right thing. It
     * is scoped to a max-width query, so desktop sizing is untouched.
     */
    font-size: 16px !important;
  }
}

/* Nothing may make the page wider than the screen. One overflowing
 * element pushes the whole layout sideways, which is what puts icons and
 * options out of reach on a narrow screen — and, unlike on a desktop,
 * there is no window to widen to find them again.
 */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Long unbroken strings — a URL, a file path, a model id — are the
     usual culprit. Wrap them rather than letting them set the width. */
  .message, .message *, .chat-title, .model-name, .brain-msg {
    overflow-wrap: anywhere;
  }

  /* Rows of controls wrap instead of overflowing. These are laid out with
     `display: flex` and no wrapping, which is right at desktop widths and
     is exactly what pushes the last few buttons off a phone screen. */
  .topbar, .topbar-actions,
  .composer-row, .model-tags, .pane-nav, .u-tabs {
    flex-wrap: wrap;
  }

  /* NOT .topbar-title. Letting it wrap drops the chat title onto a line
     of its own below the model pill instead of ellipsising it, which is
     what turned a two-row bar into a four-row one — and the fourth row
     held a single delete icon. It has `overflow: hidden` and
     `text-overflow: ellipsis` already; it just needs to be allowed to
     use them. */
  .topbar-title { flex-wrap: nowrap; }

  /* The top bar carries the model name, which can be long enough on its
     own to push every action button off the edge. */
  .topbar-title { min-width: 0; }
  .topbar-title .chat-model-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 40vw;
  }
}

/* Touch targets. 44px is the size a finger can reliably hit; several of
 * these controls were sized for a mouse pointer and are a third of that.
 * Applied by input type rather than screen width, so a touch laptop gets
 * it too.
 */
@media (pointer: coarse) {
  .btn, .chip, .icon-btn, .sidebar-tab, .pane-nav button, .u-tab,
  .attach-btn, .model-star {
    min-height: 44px;
    min-width: 44px;
  }

  /* Room for the home-indicator bar on a phone, so the composer is not
     sitting underneath it. */
  .composer { margin-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* Top bar on a phone.
 *
 * `.topbar-title` is `flex: 1` with a zero basis, so it shrinks first —
 * and the action chips beside it are `white-space: nowrap` at a fixed
 * height, so they do not shrink at all. On a 360px screen the title was
 * squeezed to nothing and the model pill vanished with it. Clicking "Save
 * to brain" made the pill reappear, because finishing HIDES that chip and
 * hands its width back: that is the whole bug in one observation.
 *
 * Giving the title a 60% basis makes the wrap decide it. Title plus menu
 * button plus a couple of chips still fit on one line; a row of six does
 * not, so the actions take a line of their own and the title gets the
 * first one to itself. A page with no actions at all — Models, History —
 * is unchanged, because nothing wraps and no empty row appears.
 *
 * 900px, the same breakpoint as the rest of the mobile rules, so no width
 * is left behind still doing the old thing.
 */
@media (max-width: 900px) {
  .topbar {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    row-gap: 0.4rem;
  }
  .topbar-title { flex: 1 1 60%; min-width: 0; }

  /* The model matters more than the chat's title here: the title is also
     in the sidebar list, and the model is the thing you cannot check
     anywhere else. So the title ellipsises and the pill holds its size. */
  .chat-model { flex: 0 1 auto; max-width: 55vw; }
  .topbar-title .chat-model-name { max-width: none; }
  .pagetitle-text { flex: 1 1 auto; min-width: 0; }

  /* Wrap within the actions row rather than scrolling it. A horizontal
     scroll strip hides controls behind a gesture nobody is told about,
     which is the complaint being fixed, not a fix for it. */
  .topbar-actions { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.4rem; }

  /* A header is not a thing to compress. It is a flex item in a 100svh
     column, so it shrinks by default — and once it wraps to two or three
     rows there is real height to take, which pushes its own rows out
     through the bottom of the bar and over the messages. */
  .topbar { flex-shrink: 0; }
}

/* ── "Work in progress" ──────────────────────────────────────────────
   One component for every paused feature. The point is that it looks
   deliberate: a feature that is not ready must not be indistinguishable
   from one that is broken, and on a phone a missing button and a failing
   button look identical. */
.wip {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  margin: var(--sp-3) 0;
}
.wip-badge {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted, #999);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.wip-body { min-width: 0; }
.wip-body strong { display: block; font-size: var(--fs-sm); color: var(--fg); }
.wip-body p { margin: 0.25rem 0 0; }

/* The exact string Google has to be given, made easy to copy and
   impossible to mis-transcribe by eye. */
.folder-redirect-uri {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  word-break: break-all;
  user-select: all;   /* one tap selects the whole thing on a phone */
  /* More than one address is listed, one per line. */
  white-space: pre-wrap;
  line-height: 1.7;
}
.folder-setup { margin: var(--sp-3) 0; }