/* No zooming on a double-tap (the phone's home-screen app jumped in and Cassie slid off when
   she was tapped twice). Pinch-to-zoom still works for anyone who wants it. Parts that handle
   touches themselves (3D, the board, dragging Cassie) keep their own touch-action. */
html, :where(body, body *) { touch-action: manipulation; }
/* iPhones zoom the whole page into any box whose text is smaller than 16px when it's tapped, and a
   zoomed page leaves buttons hard to tap. On touch screens every box you type in is at least 16px
   (Labs, the 3D explorer and the board load their own styles later, so this one wins with !important). */
@media (pointer: coarse) {
  input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), textarea, select { font-size: max(16px, 1rem) !important; }
}

:root {
  /* Cassie's colours: Blush & Sage. Warm cream paper, Cassie's blush for actions, a calm sage for
     second actions. A boy's profile flips them (sage leads, blush second): html[data-pal="sage"].
     A colour picked in Appearance (--accent) still wins over both. Every text pair reaches 4.5:1. */
  --bg: #fbf6ee;
  --surface: #ffffff;
  --surface-2: #f4ede3;
  --text: #2a2320;
  --muted: #6b5e57;
  --border: #eadfd3;
  --primary: #b8395a;
  --primary-dark: #9c2e4b;
  --on-primary: #ffffff;
  --secondary: #2f6f5e;
  --on-secondary: #ffffff;
  --success: #2e7048;
  --warning: #8a5a00;
  --danger: #b3261e;
  --focus: var(--primary);
  --primary-ink: var(--primary);  /* the accent as words or a thin line: always 4.5:1 on the page */
  --bubble-user: var(--primary);
  --bubble-user-text: var(--on-primary);
  --bubble-assistant: #ffffff;
  --glass-rgb: 255, 248, 240;
  --ink-rgb: 42, 35, 32;
  --shade-rgb: 0, 0, 0;
  --hi-rgb: 255, 255, 255;
  --paper-rgb: 244, 239, 228;
  --mid-rgb: 127, 127, 127;
  --white: #ffffff;
  --sw-blush: #b8395a; --sw-sage: #2f6f5e; --sw-ink: #1b1b1d; /* the Appearance swatches: always these */
  --black: #000000;
  /* the dark screens (the 3D explorer, the island, overlays) keep their own night colours */
  --dark-rgb: 16, 17, 22;
  --dark-0: #0b0c10;
  --dark-1: #131317;
  --dark-2: #1c1c22;
  --dark-3: #26262c;
  --dark-4: #4a4a50;
  --on-dark: #f2f2f4;
  --paper-1: #f4f0e8;
  --paper-2: #e9e4dc;
  --paper-3: #d5d0c8;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --cb-accent: var(--primary); /* board ink */
}
:root[data-pal="sage"] {
  --primary: #2f6f5e; --primary-dark: #255a4c; --on-primary: #ffffff;
  --secondary: #b8395a; --on-secondary: #ffffff;
  --glass-rgb: 246, 250, 246;
}
/* Monochrome (picked in Appearance): black and white, neutral greys, no tint anywhere */
/* Monochrome, Cassie's main colours (Graphite: #0E0E10 #232327 #3E3E45 #63636E #9A9AA6 #C9C9D2 #F2F2F5),
   for everyone unless Blush & Sage or a colour is picked in Appearance */
:root[data-pal="mono"] {
  --bg: #f2f2f5; --surface: #ffffff; --surface-2: #e8e8ec; --text: #0e0e10; --muted: #4f4f58; --border: #c9c9d2;
  --primary: #0e0e10; --primary-dark: #232327; --on-primary: #ffffff;
  --secondary: #3e3e45; --on-secondary: #ffffff;
  --bubble-assistant: #ffffff; --glass-rgb: 255, 255, 255; --ink-rgb: 14, 14, 16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1614; --surface: #251f1c; --surface-2: #2e2622; --text: #f6eee8; --muted: #b8aaa1; --border: #3a302b;
    --primary: #f28fa5; --primary-dark: #e57a92; --on-primary: #2a1018;
    --secondary: #7cc4ae; --on-secondary: #0f2620;
    --success: #7dd3a0; --warning: #f2b84b; --danger: #ff8a80;
    --bubble-assistant: #251f1c; --glass-rgb: 46, 38, 34; --ink-rgb: 0, 0, 0;
  }
  :root[data-pal="sage"]:not([data-theme="light"]) {
    --primary: #7cc4ae; --primary-dark: #69b39c; --on-primary: #0f2620;
    --secondary: #f28fa5; --on-secondary: #2a1018;
    --glass-rgb: 30, 40, 36;
  }
  :root[data-pal="mono"]:not([data-theme="light"]) {
    --bg: #0e0e10; --surface: #232327; --surface-2: #2c2c31; --text: #f2f2f5; --muted: #adadb8; --border: #3e3e45;
    --primary: #f2f2f5; --primary-dark: #c9c9d2; --on-primary: #0e0e10;
    --secondary: #c9c9d2; --on-secondary: #0e0e10;
    --bubble-assistant: #232327; --glass-rgb: 35, 35, 39; --ink-rgb: 0, 0, 0;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1614; --surface: #251f1c; --surface-2: #2e2622; --text: #f6eee8; --muted: #b8aaa1; --border: #3a302b;
  --primary: #f28fa5; --primary-dark: #e57a92; --on-primary: #2a1018; --secondary: #7cc4ae; --on-secondary: #0f2620;
  --success: #7dd3a0; --warning: #f2b84b; --danger: #ff8a80; --bubble-assistant: #251f1c; --glass-rgb: 46, 38, 34; --ink-rgb: 0, 0, 0;
}
:root[data-theme="dark"][data-pal="mono"] { --bg: #0e0e10; --surface: #232327; --surface-2: #2c2c31; --text: #f2f2f5; --muted: #adadb8; --border: #3e3e45; --primary: #f2f2f5; --primary-dark: #c9c9d2; --on-primary: #0e0e10; --secondary: #c9c9d2; --on-secondary: #0e0e10; --bubble-assistant: #232327; --glass-rgb: 35, 35, 39; --ink-rgb: 0, 0, 0; }
:root[data-theme="dark"][data-pal="sage"] { --primary: #7cc4ae; --primary-dark: #69b39c; --on-primary: #0f2620; --secondary: #f28fa5; --on-secondary: #2a1018; --glass-rgb: 30, 40, 36; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
/* one font everywhere — inputs, textareas, selects and buttons all inherit */
input, textarea, select, button { font-family: inherit; }

html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the living gradient (landing-style ShaderGradient) sits behind everything */
#app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
#app-bg.live { opacity: 1; }
#app-bg canvas { display: block; }
#app {
  z-index: 1;
  max-width: 100%;
  width: 100%;
  margin: 0;
  height: 100vh;        /* fallback */
  height: 100dvh;       /* dynamic viewport — accounts for the mobile address bar */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand stays centred */
  align-items: center;
  padding: calc(14px + var(--safe-top)) 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar #menu-btn { justify-self: start; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 2px; }
#board-btn svg, #games-btn svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand .brand-mark { width: 24px; height: 24px; flex: none; color: var(--text); --logo-arrow: var(--surface); }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
}
.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--ink-rgb), 0.15);
}

/* ---------- sidebar (conversations) ---------- */
#sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--shade-rgb), .42);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 276px;
  max-width: 82vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: calc(12px + var(--safe-top)) 12px 12px;
  transform: translateX(-100%);
  transition: transform .24s ease;
  box-shadow: 0 0 40px rgba(var(--shade-rgb), .18);
}
.sidebar.open { transform: translateX(0); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; }
.new-chat-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px; margin-bottom: 16px;
  background: var(--primary); color: var(--on-primary); border: none; border-radius: 999px;
  font-size: .92rem; font-weight: 700; cursor: pointer;
}
.new-chat-btn svg { width: 18px; height: 18px; fill: currentColor; }
.new-chat-btn:active { background: var(--primary-dark); }
.sidebar-section { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 6px 6px; }
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  color: var(--text); font-size: .9rem; line-height: 1.3;
}
.chat-item:hover { background: var(--bg); }
.chat-item.active { background: var(--bg); font-weight: 600; }
.chat-item .ci-icon { width: 16px; height: 16px; fill: var(--muted); flex-shrink: 0; }
.chat-item .ci-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-item .ci-del { opacity: 0; border: none; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.chat-item:hover .ci-del { opacity: .8; }
.chat-item .ci-del:hover { background: var(--border); opacity: 1; }
@media (hover: none) { .chat-item .ci-del { opacity: .55; } }
.sidebar-foot { border-top: 1px solid var(--border); margin-top: 8px; padding: 10px 6px 2px; color: var(--muted); font-size: .72rem; }

.icon-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-btn:active { background: var(--border); }
.icon-btn.primary { background: var(--primary); color: var(--on-primary); }
.icon-btn.primary:active { background: var(--primary-dark); }
.icon-btn[hidden] { display: none; }

#chat-log {
  flex: 1;
  overflow-y: auto;
  position: relative; z-index: 5; /* so Cassie can duck BEHIND the bubbles when she peeks */
  /* center a readable column on wide/full-width screens while keeping
     left/right bubble alignment inside it */
  padding: 16px max(16px, calc((100% - 900px) / 2));
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.bubble { max-width: min(82%, 640px); }
/* the home screen spans the full column so its options can sit far right */
#chat-log > .home { max-width: none; width: 100%; }

/* ---------- highlight-to-ask popover ---------- */
.highlight-popover {
  position: fixed;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(var(--shade-rgb), .25);
  z-index: 27;
  overflow: hidden;
}
.highlight-popover[hidden] { display: none; }
.highlight-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 6px 7px 12px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.highlight-popover-header button {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: .85;
}
.highlight-popover-header button:active { opacity: 1; }
.highlight-popover-body {
  padding: 11px 13px;
  font-size: .88rem;
  line-height: 1.45;
  max-height: 240px;
  overflow-y: auto;
  color: var(--text);
}
.highlight-popover-body p { margin: 0 0 8px; }
.highlight-popover-body p:last-child { margin-bottom: 0; }
.highlight-popover-body.muted { color: var(--muted); font-style: italic; }
.popover-question { font-weight: 600; font-size: .78rem; margin-bottom: 7px; }
.popover-choice-row { display: flex; gap: 5px; }
.popover-choice-btn {
  flex: 1;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 6px;
  padding: 5px 0;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.popover-choice-btn:active { background: var(--primary-dark); }

.bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }

/* code rendering (chat bubbles + highlight popover) */
.bubble pre,
.highlight-popover-body pre {
  background: var(--dark-0);
  color: var(--on-dark);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  white-space: pre;
}
.bubble pre code,
.highlight-popover-body pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  background: none;
  padding: 0;
  color: inherit;
}
.bubble code,
.highlight-popover-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: rgba(var(--mid-rgb), .18);
  padding: 1px 4px;
  border-radius: 4px;
}

/* clean tables, lists, rules and bold section labels */
.bubble .table-wrap,
.highlight-popover-body .table-wrap { overflow-x: auto; margin: 8px 0; }
.bubble table.md-table,
.highlight-popover-body table.md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
  white-space: normal;
}
.bubble table.md-table th,
.bubble table.md-table td,
.highlight-popover-body table.md-table th,
.highlight-popover-body table.md-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.bubble table.md-table thead th,
.highlight-popover-body table.md-table thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.bubble table.md-table tbody tr:last-child td,
.highlight-popover-body table.md-table tbody tr:last-child td { border-bottom: none; }
.bubble table.md-table tbody tr:nth-child(even),
.highlight-popover-body table.md-table tbody tr:nth-child(even) { background: rgba(var(--mid-rgb), .06); }
.bubble ul, .bubble ol,
.highlight-popover-body ul, .highlight-popover-body ol { margin: 6px 0 8px; padding-left: 20px; }
.bubble li,
.highlight-popover-body li { margin: 2px 0; }
.bubble p.md-label,
.highlight-popover-body p.md-label { margin: 10px 0 4px; }
.bubble p.md-label:first-child,
.highlight-popover-body p.md-label:first-child { margin-top: 0; }
.bubble hr,
.highlight-popover-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.bubble a,
.highlight-popover-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/* nicer math: superscripts/subscripts + stacked fractions */
.bubble sup, .bubble sub,
.highlight-popover-body sup, .highlight-popover-body sub { line-height: 0; font-size: .75em; }
.bubble .frac, .highlight-popover-body .frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  vertical-align: -0.55em;
  margin: 0 2px;
  font-size: .95em;
}
.bubble .frac-n, .highlight-popover-body .frac-n {
  border-bottom: 1px solid currentColor;
  padding: 0 4px;
  line-height: 1.25;
}
.bubble .frac-d, .highlight-popover-body .frac-d { padding: 0 4px; line-height: 1.25; }
.bubble-user {
  align-self: flex-end;
  background: var(--bubble-user);
  color: var(--bubble-user-text);
  border-bottom-right-radius: 4px;
}
.bubble-assistant {
  align-self: flex-start;
  background: var(--bubble-assistant);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.bubble.intro { color: var(--muted); }
.bubble.error { border-color: var(--text); color: var(--text); font-weight: 500; }

.typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* composer as one rounded card (input on top, controls row below) */
.composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 12px calc(10px + var(--safe-bottom));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(var(--shade-rgb), .04);
}
.composer:focus-within { border-color: var(--primary); }
.composer-row { display: flex; align-items: center; gap: 6px; }
.composer-spacer { flex: 1; }
.icon-btn { flex-shrink: 0; }
.icon-btn.round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); }
.icon-btn.round.primary { border-color: var(--primary); }
.icon-btn.round svg { width: 20px; height: 20px; }

.model-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text);
  overflow: hidden;
  flex-shrink: 0;
}
.model-pill:hover { border-color: var(--primary); }
.model-pill #model-pill-model { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-pill #model-pill-level { color: var(--muted); white-space: nowrap; }
/* on narrow phones, drop the level label so the model name stays readable */
@media (max-width: 430px) {
  .model-pill { flex-shrink: 1; }
  .model-pill #model-pill-level { display: none; }
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 0;
  background: var(--surface);
  flex-shrink: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.chip .chip-ico { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.chip:hover { border-color: var(--primary); }

/* interactive robot mascot — pink eyes, emotes, draggable (no auto-roaming) */
:root { --bot-glow: #ff5fa2; }
#mascot {
  position: fixed;
  left: 14px; top: 60%;
  z-index: 26;
  /* she stays put; a brief transition only smooths a resize/rest snap */
  transition: left .35s ease, top .35s ease;
  will-change: left, top;
}
#mascot.dragging { transition: none; cursor: grabbing; }
#mascot.gliding:not(.dragging) { pointer-events: none; }
/* playful antics: a waddle while walking, hops while playing, and ducking
   behind the chat bubbles to peek */
#mascot.walking { transition: left 1.15s ease-in-out, top 1.15s ease-in-out; pointer-events: none; } /* (a tap on a button she's strolling past goes to the button) */
#mascot.walking #mascot-btn { animation: mascotWaddle .5s ease-in-out infinite; }
@keyframes mascotWaddle { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
#mascot.playing #mascot-btn { animation: mascotHop .42s ease-in-out 3; }
@keyframes mascotHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-15px); } 70% { transform: translateY(-6px); } }
#mascot.peeking { z-index: 4; } /* below #chat-log (z 5) → the bubble hides her body while her head pokes out */
#mascot-btn { border: none; background: none; padding: 0; cursor: grab; width: 58px; height: 68px; touch-action: none; position: relative; }
/* 3D Cassie canvas mount — larger than the button and centred on it so raised
   arms are never clipped by the canvas edge. Transparent + pointer-events:none,
   so the extra area doesn't block anything. */
/* Cursor Cassie (cassie-bot.js): 3D, or flat when 3D won't come; her place stays empty until then */
.mascot-2d { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); width: 104px; height: 116px; pointer-events: none; }
.mascot-2d svg, .mascot-2d canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { .mascot-2d { width: 88px; height: 98px; } }
#mascot:not(.has2d) { display: none; } /* (until app.js has made her: never an empty place; not visibility, which Reduce Motion's tiny transitions would hold back a frame) */
#mascot.dragging #mascot-btn { cursor: grabbing; }
#confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
#prompt-input.nudge { animation: inputNudge .9s ease; }
@keyframes inputNudge { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--muted); } 60% { box-shadow: 0 0 0 3px var(--muted); } }
.mascot-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 220px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px 14px 4px 14px;
  padding: 9px 12px;
  font-size: .82rem;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(var(--shade-rgb), .18);
  pointer-events: none; /* a passing tip: a tap goes to the button under it */
}
.mascot-bubble[hidden] { display: none; }

#mascot.sleeping #mascot-btn { cursor: pointer; }
@media (max-width: 480px) { #mascot-btn { width: 48px; height: 48px; } }

/* home / empty state — intro on the left, a 3D options bar on the right */
.home { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; padding: 48px clamp(20px, 5vw, 72px); width: 100%; box-sizing: border-box; min-height: 60%; }
.home-intro { text-align: left; max-width: 420px; flex: 1 1 320px; }
.home-badge { justify-content: flex-start; }
.home-badge { display: inline-flex; }
.home-badge .brand-dot { width: 20px; height: 20px; }
.home-title { font-size: 1.4rem; margin: 14px 0 4px; }
.home-title .home-spark { width: 20px; height: 20px; fill: currentColor; vertical-align: -3px; }
.home-sub { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }
.home-tip { color: var(--muted); font-size: .8rem; margin: 12px 0 0; line-height: 1.5; }
.home-example {
  display: flex; align-items: center; gap: 11px;
  min-width: 216px;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: .92rem; font-weight: 600;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(var(--hi-rgb), .55), 0 3px 0 rgba(var(--shade-rgb), .10), 0 8px 16px rgba(var(--shade-rgb), .16);
  transition: transform .09s ease, box-shadow .09s ease;
}
.home-example .home-ico { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.home-example:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(var(--hi-rgb), .55), 0 5px 0 rgba(var(--shade-rgb), .10), 0 12px 22px rgba(var(--shade-rgb), .2); }
.home-example:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(var(--hi-rgb), .4), 0 1px 0 rgba(var(--shade-rgb), .10), 0 3px 8px rgba(var(--shade-rgb), .16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-example { box-shadow: inset 0 1px 0 rgba(var(--hi-rgb), .1), 0 3px 0 rgba(var(--shade-rgb), .5), 0 8px 18px rgba(var(--shade-rgb), .5); }
}

/* one-tap follow-ups under the latest answer */
.followups { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin: -2px 0 4px; }
.fu-chip {
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.fu-chip:hover { border-color: var(--primary); color: var(--text); }

/* reading accessibility */
#app[data-textsize="large"] .bubble { font-size: 1.05rem; }
#app[data-textsize="larger"] .bubble { font-size: 1.18rem; }
#app[data-easyread="on"] .bubble { line-height: 1.75; letter-spacing: .015em; }
#app[data-easyread="on"] .bubble li { margin: 5px 0; }
.chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.attach-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.attach-preview[hidden] { display: none; }
/* the attached photos and files, side by side (scrolls sideways when there are many) */
.att-strip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; }
.att { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 52px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg, var(--surface)); }
.att-image { width: 52px; }
.att img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.att-doc, .att-pending { max-width: 230px; padding: 0 30px 0 10px; }
.att-name { font-size: .82rem; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.att-doc .att-name::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5z'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5z'/%3E%3C/svg%3E"); }
.att-reading { opacity: .7; } .att-reading .att-name { font-style: italic; }
.att-error { max-width: 300px; border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .att-error .att-name { white-space: normal; line-height: 1.25; font-size: .75rem; }
.att-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--text); color: var(--surface); font-size: .9rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.att-doc .att-x, .att-pending .att-x, .att-error .att-x { top: 50%; right: 4px; transform: translateY(-50%); background: var(--border); color: var(--text); }
.att-read { border: none; background: none; font-size: 1rem; cursor: pointer; padding: 0 2px; }
.att-count { flex-shrink: 0; font-size: .78rem; color: var(--muted, var(--text)); opacity: .75; white-space: nowrap; }
@media (max-width: 520px) { .att-count { display: none; } }
.attach-preview > button {
  background: var(--border);
  color: var(--text);
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

/* images inside chat bubbles */
.bubble.many-imgs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.bubble.many-imgs > :not(img) { flex-basis: 100%; }
.bubble.many-imgs img.chat-img { width: 72px; height: 72px; object-fit: cover; margin: 0; }

.bubble img.chat-img {
  max-width: 100%;
  border-radius: 10px;
  margin: 6px 0 2px;
  display: block;
}

/* download button under a bubble */
.bubble-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}
.bubble-tools .save-label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: .78rem; font-weight: 600;
  margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--border);
}
.bubble-tools button[data-format]:hover { color: var(--text); text-decoration: underline; }
.bubble-tools button.suggest {
  color: var(--on-primary); background: var(--primary);
  padding: 2px 10px; border-radius: 999px;
}
.bubble-tools button.suggest:hover { text-decoration: none; }
.bubble-tools button:disabled { opacity: .7; cursor: default; }
.file-card {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface, transparent); max-width: 420px;
}
.file-card .fc-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.file-card .fc-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.file-card .fc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.file-card .fc-txt b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fc-txt small { font-size: .74rem; color: var(--muted); }
.file-card .fc-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font: 600 .8rem/1 inherit; font-family: inherit;
  padding: 8px 12px; border-radius: 999px;
}
.file-card .fc-btn svg { width: 15px; height: 15px; fill: currentColor; }
.file-card .fc-btn:disabled { opacity: .5; cursor: default; }
.typing-status { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.bubble-tools button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bubble-tools button:active { color: var(--text); }
.bubble-tools svg { width: 14px; height: 14px; fill: currentColor; }
#prompt-input {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  max-height: 120px;
  padding: 4px 6px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px; /* >=16px so iOS Safari doesn't auto-zoom on focus */
  font-family: inherit;
  line-height: 1.4;
}
#prompt-input:focus { outline: none; }
#prompt-input::placeholder { color: var(--muted); }

.settings-panel {
  position: absolute;
  inset: 0;
  background: rgba(var(--shade-rgb), .4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}
.settings-panel[hidden] { display: none; }
@media (min-width: 560px) {
  .settings-panel { align-items: center; }
}
.settings-card {
  background: var(--surface);
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(22px + var(--safe-bottom));
}
@media (min-width: 560px) {
  .settings-card { border-radius: 20px; }
}
.settings-card h2 { margin: 0 0 16px; }

/* ---------- Cassie's memory panel ---------- */
.memory-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); }
.memory-dot[hidden] { display: none; }
#memory-btn { position: relative; }
.mem-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mem-head h2 { margin: 0; }
.mem-privacy { font-size: .78rem; color: var(--muted); margin: 0 0 14px; line-height: 1.4; }
.mem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.mem-stat { text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px; }
.mem-stat b { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 1rem; }
.mem-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; flex: none; }
.mem-privacy .mem-ico, .mem-section .mem-ico { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }
.mem-stat small { color: var(--muted); font-size: .7rem; }
.mem-note { font-size: .76rem; color: var(--muted); margin: 0 0 12px; text-align: center; }
.mem-backup { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.mem-backup .btn { flex: 1; min-width: 130px; }

/* clickable "get a free key" links + tiny numbered guide in Settings */
.key-link {
  display: inline-block; margin-top: 2px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; color: var(--primary-ink);
}
.key-link:hover { opacity: .7; }
.key-steps {
  margin: 4px 0 14px; padding-left: 20px; font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.key-steps li { margin: 1px 0; }
.key-steps strong { color: var(--text); }
.mem-welcome {
  font-size: .86rem; color: var(--muted); line-height: 1.5; text-align: center;
  margin: 4px 0 14px; padding: 16px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
}
.mem-section { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-review {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.mem-review:hover { border-color: var(--primary); }
.mem-review.weak { border-color: var(--muted); color: var(--text); font-style: italic; }
.mem-topics { display: flex; flex-direction: column; gap: 10px; }
.mem-topic-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mem-topic-name { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-topic .mem-review { padding: 3px 11px; font-size: .78rem; flex-shrink: 0; }
.mem-bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.mem-bar i { display: block; height: 100%; background: var(--primary); }
.mem-facts { display: flex; flex-direction: column; gap: 6px; }
.mem-fact { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .88rem; }
.mem-fact span { flex: 1; }
.mem-del { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.mem-del:hover { color: var(--text); }
.mem-addrow { display: flex; gap: 8px; margin-top: 8px; }
.mem-addrow input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; }
.mem-addrow .btn { padding: 10px 16px; }
.mem-empty { color: var(--muted); font-size: .85rem; margin: 2px 0 4px; line-height: 1.4; }

.field {
  display: block;
  margin-bottom: 14px;
  font-size: .88rem;
  color: var(--muted);
}
.field span { display: block; margin-bottom: 6px; }
.field.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.field.row span { margin-bottom: 0; }
.field input[type="password"],
.field select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 16px; /* >=16px so iOS Safari doesn't auto-zoom on focus */
}
.field input[type="checkbox"] { width: 20px; height: 20px; }
.field-hint { font-size: .78rem; color: var(--muted); margin: -6px 0 16px; line-height: 1.4; }
.mono { font-family: ui-monospace, monospace; }

/* Collapsible settings sections — closed by default, tap a header to open. */
.settings-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  margin-bottom: 12px;
  overflow: hidden;
}
.settings-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.settings-group[open] > summary::after { transform: rotate(-135deg); }
.settings-group > summary:hover { background: color-mix(in srgb, var(--surface) 40%, transparent); }
.sg-title { font-size: .95rem; font-weight: 600; color: var(--text); padding-right: 22px; }
.sg-sub { font-size: .76rem; color: var(--muted); padding-right: 22px; }
.sg-body { padding: 4px 16px 8px; border-top: 1px solid var(--border); }
.sg-body .field:last-child { margin-bottom: 8px; }
.sg-body .field-hint:last-child { margin-bottom: 8px; }

.settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:active { background: var(--primary-dark); }
.btn.secondary { background: var(--border); color: var(--text); }

/* animated cursor character — removed from the UI (kept for internal focus
   nudges, but never shown) */
#cassie-cursor { display: none !important; }
#cassie-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 30;
  transform: translate(-100px, -100px);
  transition: transform .09s linear;
  filter: drop-shadow(0 1px 2px rgba(var(--shade-rgb), .45));
}
#cassie-cursor.detour { transition: transform .4s cubic-bezier(.34, 1.3, .4, 1); }
#cassie-cursor svg { width: 18px; height: 18px; }
#cassie-cursor svg path {
  fill: var(--white);
  stroke: rgba(var(--shade-rgb), .55);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
#cassie-cursor.thinking svg { animation: spin-tilt 1s ease-in-out infinite; }
#cassie-cursor .ring {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--dark-2);
  opacity: 0;
  transform: scale(0.4);
}
#cassie-cursor.clicking .ring {
  animation: click-ring .5s ease-out;
}

@keyframes click-ring {
  0% { opacity: .8; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes spin-tilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-18deg); }
}

/* ---------- Pomodoro focus timer (sidebar) ---------- */
.pomo {
  margin: 4px 0 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg));
}
.pomo.break { border-color: var(--muted); }
.pomo-head { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
#pomo-cycles { display: inline-flex; gap: 4px; }
#pomo-cycles span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
#pomo-cycles span.on { background: var(--primary); }
.pomo-head-r { display: inline-flex; align-items: center; gap: 8px; }
.pomo-edit { background: none; border: none; padding: 2px; margin: -2px -2px -2px 0; color: var(--muted); cursor: pointer; border-radius: 6px; display: inline-flex; }
.pomo-edit:hover, .pomo-edit[aria-expanded="true"] { color: var(--text); background: var(--border); }
.pomo-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pomo-time { display: block; width: 100%; background: none; border: none; color: var(--text); cursor: pointer; font: inherit; font-size: 2rem; font-weight: 800; text-align: center; letter-spacing: .02em; margin: 4px 0 8px; font-variant-numeric: tabular-nums; border-radius: 10px; }
.pomo-time:hover { background: var(--border); }
.pomo-set { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.pomo-set[hidden] { display: none; }
.pomo-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pomo-presets button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 0; font-size: .74rem; font-weight: 600; cursor: pointer; }
.pomo-presets button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pomo-field { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; }
.pomo-field small { color: var(--muted); font-size: .72rem; width: 22px; }
.pomo-step { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.pomo-step button { width: 28px; height: 30px; border: none; background: none; color: var(--text); font-size: 1rem; cursor: pointer; }
.pomo-step button:hover { background: var(--border); }
.pomo-step input { width: 40px; height: 30px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: none; color: var(--text); text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.pomo-step input::-webkit-inner-spin-button, .pomo-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pomo-set-note { margin: 0; font-size: .72rem; color: var(--muted); }
.pomo-ring { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 10px; }
.pomo-ring i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 1s linear; }
.pomo.break .pomo-ring i { background: var(--muted); }
.pomo-btns { display: flex; gap: 6px; }
.pomo-btn {
  flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 8px 4px; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.pomo-btn:hover { border-color: var(--primary); }
.pomo-btn:active { transform: translateY(1px); }
.pomo-btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---------- ELI5 / complexity control in the highlight popover ---------- */
.popover-complexity { display: flex; gap: 6px; margin: 8px 0; }
.pc-lvl {
  flex: 1; border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 5px 6px; font-size: .74rem; font-weight: 700; cursor: pointer;
  transition: transform .08s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.pc-lvl:hover { color: var(--text); border-color: var(--primary); }
.pc-lvl.active { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.pc-lvl:active { transform: scale(.95); }

/* ---------- glassmorphism + ambient glow ---------- */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .highlight-popover, .settings-card, #sidebar {
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }
  .highlight-popover { background: color-mix(in srgb, var(--surface) 78%, transparent); }
  .settings-card { background: color-mix(in srgb, var(--surface) 86%, transparent); }
  #sidebar { background: color-mix(in srgb, var(--surface) 88%, transparent); }
}
.highlight-popover {
  border: 1px solid var(--border);
  box-shadow: 0 12px 34px rgba(var(--shade-rgb), .28);
  animation: popIn .16s cubic-bezier(.34, 1.4, .5, 1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- micro-interactions ---------- */
.popover-choice-btn { transition: transform .08s ease, box-shadow .12s ease, background .12s ease; }
.popover-choice-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--shade-rgb), .18); }
.popover-choice-btn:active { transform: scale(.94); }
.chip, .home-example, .fu-chip { transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease; }
.chip:active, .fu-chip:active { transform: scale(.95); }

/* ===== Cassie's board — she draws what she explains ===== */
.cassie-board {
  margin: 12px 0 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
}
.cb-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; font-weight: 700; font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.cb-pin { color: var(--cb-accent); }
.cb-draw {
  margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font: 600 12px/1.2 inherit; font-family: inherit; cursor: pointer;
}
.cb-draw:hover { background: var(--surface); }
.cb-body { padding: 14px; }
.cb-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.cb-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* steps */
.cb-steps { list-style: none; margin: 0; padding: 0; counter-reset: cb; }
.cb-steps li {
  position: relative; padding: 9px 12px 9px 40px; margin-bottom: 6px;
  border-radius: 12px; font-size: 15px; border: 1px solid transparent;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
}
.cb-steps li.show { opacity: 1; transform: none; }
.cb-steps li::before {
  counter-increment: cb; content: counter(cb);
  position: absolute; left: 10px; top: 8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cb-steps li.done { opacity: .6; }
.cb-steps li.active {
  background: color-mix(in srgb, var(--cb-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--cb-accent) 45%, transparent);
}
.cb-steps li.active::before { background: var(--cb-accent); color: var(--white); border-color: var(--cb-accent); }

/* graph */
.cb-canvas-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.cb-canvas-wrap canvas { width: 100%; height: auto; display: block; }

/* geometry */
.cb-geo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cb-geo-svg { width: 190px; max-width: 60%; height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.cb-geo-out { font-size: 14px; line-height: 1.7; }
.cb-geo-out .cb-geo-name { font-weight: 700; margin-bottom: 2px; }
.cb-geo-out b { color: var(--cb-accent); }

/* Favorite-colour swatches (Appearance settings) */
.accent-swatches { display: grid; grid-template-columns: repeat(auto-fill, 28px); gap: 9px; justify-content: start; }
.accent-sw {
  width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--border); background: var(--sw, var(--surface));
  position: relative; transition: transform .1s ease;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.accent-sw:hover { transform: scale(1.12); z-index: 1; }
.accent-sw.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.accent-none { background: linear-gradient(135deg, var(--sw-blush) 0 50%, var(--sw-sage) 50% 100%); } /* Cassie: blush and sage */
.accent-mono { background: linear-gradient(135deg, var(--white) 0 50%, var(--sw-ink) 50% 100%); }    /* Monochrome */
.accent-custom { border-style: dashed; }
.accent-custom input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; background: none; cursor: pointer;
}
.accent-custom::after {
  content: "+"; position: absolute; color: var(--muted); font-size: 18px; font-weight: 700;
  pointer-events: none;
}

/* ---------- surfaces float over the living gradient ---------- */
.topbar {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.composer {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 8px 30px rgba(var(--shade-rgb), .10);
}
.bubble-assistant { box-shadow: 0 6px 22px rgba(var(--shade-rgb), .07); }
@media (prefers-color-scheme: dark) {
  .bubble-assistant { box-shadow: 0 6px 22px rgba(var(--shade-rgb), .35); }
}
.quick-actions { background: transparent; }
.quick-actions .chip {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* Student / Professional switch */
.aud-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); flex-shrink: 0;
}
.aud-switch::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--primary); transition: transform .28s cubic-bezier(.3,.8,.3,1);
}
.aud-switch.pro::before { transform: translateX(100%); }
.aud-switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  font: 600 .8rem/1 inherit; font-family: inherit; color: var(--muted); transition: color .2s;
}
.aud-switch button[aria-pressed="true"] { color: var(--on-primary); }
.topbar-actions .aud-switch { margin-right: 6px; }
.aud-short { display: none; }
@media (max-width: 520px) {
  .aud-full { display: none; } .aud-short { display: inline; }
  .topbar { grid-template-columns: auto 1fr auto; column-gap: 6px; } /* room for the switch: Cassie sits by the menu */
  .topbar .brand { justify-self: start; }
  .topbar-actions .aud-switch button { padding: 6px 10px; }
}
/* the 3D Cassie walks for real, so the flat waddle isn't needed */
.quick-actions .chip.active { background: var(--primary); color: var(--on-primary); }

/* ---------- first-run profile (sign-up) ---------- */
.profile-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow-y: auto; }
.profile-card { width: min(460px, 100%); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 24px; padding: 24px 22px 20px; box-shadow: 0 30px 80px rgba(var(--shade-rgb), .25); display: flex; flex-direction: column; gap: 12px; margin: auto; }
.profile-card h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.pf-sub { margin: -4px 0 4px; color: var(--muted); font-size: .9rem; }
.pf-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; }
.pf-field[hidden] { display: none; }
.pf-field input, .pf-field select { font: inherit; font-weight: 500; font-size: 1rem; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.pf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-seg.pf-seg3 { grid-template-columns: 1fr 1fr 1.4fr; }
.pf-seg button { font: inherit; font-weight: 650; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.pf-seg button.on { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.pf-err { margin: 0; color: var(--danger); font-size: .85rem; font-weight: 600; }
.pf-go { margin-top: 4px; font: inherit; font-weight: 750; font-size: 1rem; padding: 13px; border-radius: 14px; border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; }
.field-toggle { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; }
.field-toggle[hidden] { display: none !important; }
.bubble.error .retry-btn { display: block; margin-top: 10px; }
.pf-field textarea { font: inherit; font-size: 1rem; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); resize: vertical; }
.pf-row { display: flex; gap: 10px; justify-content: flex-end; }
.pf-row .pf-go { flex: 1; }
.report-row { margin: 14px 0 4px; } .report-row .btn { width: 100%; }

/* ---------- sign in / sign up (Cassie accounts) ---------- */
.auth-page { position: fixed; inset: 0; z-index: 210; display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); background: var(--surface); color: var(--text); overflow-y: auto; }
.auth-left { position: relative; display: flex; align-items: center; justify-content: center; padding: 72px 24px 32px; min-height: 100%; box-sizing: border-box; }
.auth-brand { position: absolute; top: calc(22px + var(--safe-top, 0px)); left: 26px; display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 1.1rem; letter-spacing: -.01em; }
.auth-brand svg { width: 24px; height: 24px; color: var(--text); --logo-eyes: var(--bg); }
.auth-form { width: min(330px, 100%); display: flex; flex-direction: column; gap: 12px; }
.auth-title { margin: 0; font-size: 1.55rem; letter-spacing: -.025em; text-align: center; }
.auth-sub { margin: -4px 0 8px; color: var(--muted); font-size: .92rem; text-align: center; line-height: 1.45; }
.auth-providers { display: grid; gap: var(--sp-2); }
.auth-providers:not(:has(> :not([hidden]))) { display: none; }
/* Continue with Google: the app's own surface and ink (light or dark), Google's G, the same size as Apple's */
.auth-google { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; max-width: 360px; justify-self: center; min-height: 48px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; box-shadow: var(--lg-lift); }
.auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-google:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* "Signing you in…": the form steps aside while Google or Apple answers (never a blank page) */
.auth-form.busy > :not(.auth-busy):not(.auth-title) { display: none !important; }
.auth-busy { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) 0; text-align: center; }
.auth-busy[hidden] { display: none; }
.auth-busy b { font-size: var(--fs-lg); }
.auth-busy-sub { color: var(--muted); font-size: var(--fs-sm); }
.auth-spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--text); animation: authSpin .9s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation-duration: 2.4s; } }
/* a sign-in that didn't finish: what happened, and one button to try again */
.auth-retry { width: 100%; min-height: 48px; border-radius: var(--r-pill); border: 1px solid var(--text); background: var(--text); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; }
.auth-retry[hidden] { display: none; }
/* Sign in with Apple: Apple's own look, which is already black and white (black in light mode, white in dark) */
.auth-apple { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; max-width: 360px; justify-self: center; min-height: 48px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--text); background: var(--text); color: var(--bg); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; box-shadow: var(--lg-lift); }
.auth-apple svg { width: 18px; height: 18px; flex: none; margin-top: -2px; }
.auth-apple:hover { opacity: .9; }
.auth-apple:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.auth-form input[readonly] { opacity: .75; }
.auth-google[hidden], .auth-apple[hidden], .auth-or[hidden], .auth-err[hidden], .auth-forgot[hidden], .auth-age[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; }
.auth-field input { font: inherit; font-weight: 500; font-size: 1rem; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; }
.auth-field input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 44px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: var(--muted); line-height: 0; }
.auth-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-err { margin: 0; color: var(--text); font-size: .86rem; font-weight: 600; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--text); }
.auth-go { margin-top: 2px; font: inherit; font-weight: 750; font-size: 1rem; padding: 12px; border-radius: 10px; border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; }
.auth-go:disabled { opacity: .6; cursor: default; }
.auth-switch, .auth-forgot { margin: 0; text-align: center; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.auth-switch button { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-skip { background: none; border: 1px solid var(--border); border-radius: 10px; padding: 10px; font: inherit; font-size: .92rem; color: var(--text); cursor: pointer; }
.auth-skip:hover { border-color: var(--text); }
.auth-legal { margin: 4px 0 0; text-align: center; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.auth-legal a { color: inherit; }
.auth-right { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(28px, 5vw, 72px); color: var(--paper-1);
  background: radial-gradient(120% 80% at 80% 10%, var(--dark-3) 0%, var(--dark-1) 55%, var(--dark-0) 100%); }
.auth-glow { position: absolute; width: 520px; height: 520px; right: -120px; bottom: -160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--danger) 35%, transparent), transparent 70%); filter: blur(10px); }
.auth-copy { position: relative; max-width: 440px; }
.auth-kicker { margin: 0 0 12px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--paper-rgb), .62); }
.auth-copy h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.08; letter-spacing: -.035em; }
.auth-copy p { margin: 0; color: rgba(var(--paper-rgb), .72); line-height: 1.55; font-size: 1rem; }
.auth-hero { position: relative; width: min(300px, 64%); aspect-ratio: 1; margin: 34px 0 0 auto; filter: drop-shadow(0 30px 40px rgba(var(--shade-rgb), .5)); }
.auth-hero .cassie-bot { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) {
  .auth-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-right { order: -1; padding: calc(64px + var(--safe-top, 0px)) 22px 18px; flex-direction: row; align-items: center; gap: 12px; justify-content: space-between; }
  .auth-copy h2 { font-size: 1.45rem; margin-bottom: 6px; }
  .auth-copy p, .auth-kicker { display: none; }
  .auth-hero { width: 104px; margin: 0; flex-shrink: 0; }
  .auth-glow { width: 300px; height: 300px; right: -80px; bottom: -150px; }
  .auth-left { padding: 22px 20px 28px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; }
  .auth-brand { position: static; }
  .auth-title { font-size: 1.3rem; }
}
.acct-btns { display: flex; gap: 8px; margin: 2px 0 12px; }
.acct-btns .new-chat-btn { flex: 1; }

/* ---------- Cassie Island: a pill that drops from the top bar while she works ---------- */
.topbar { position: relative; z-index: 8; } /* the island floats over the chat */
.island {
  --mood: var(--white); position: absolute; left: 50%; top: calc(100% + 8px); height: 50px; width: 50px; border-radius: 999px; overflow: hidden;
  background: var(--dark-1); color: var(--white); font-size: 1rem; font-weight: 600; pointer-events: none;
  box-shadow: 0 8px 24px rgba(var(--shade-rgb), .22), 0 0 20px color-mix(in srgb, var(--mood) 40%, transparent);
  opacity: 0; transform: translate(-50%, -14px) scale(.6); transform-origin: 50% 0;
  transition: width .5s cubic-bezier(.3, 1.3, .45, 1), opacity .22s, transform .45s cubic-bezier(.3, 1.4, .45, 1), box-shadow .4s;
}
.island.live { opacity: 1; transform: translate(-50%, 0) scale(1); }
.island-in { display: inline-flex; align-items: center; height: 100%; padding: 0 22px 0 8px; white-space: nowrap; }
.island-bot { width: 36px; height: 36px; margin-right: 10px; flex-shrink: 0; }
.island-bot .cassie-bot { width: 36px; height: 36px; display: block; }
.island-text { display: block; overflow: hidden; text-overflow: ellipsis; max-width: min(66vw, 480px); }
.island-text.swap { animation: islandIn .32s ease-out; }
@keyframes islandIn { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .island { transition: opacity .2s; } .island-text.swap { animation: none; } }
/* ---------- Drop on Cassie Island: the pill opens into a card ----------
   Drag a file or words over Cassie → "Drop it here" → she reads it → what should
   I do? → the answer, right in the card. The pop-out Cassie window is this card. */
.island.carded { opacity: 0 !important; }
.isle-card {
  --mood: var(--white); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 9;
  width: min(470px, calc(100vw - 24px)); border-radius: 28px; background: var(--dark-1); color: var(--white);
  box-shadow: 0 18px 50px rgba(var(--shade-rgb), .32), 0 0 26px color-mix(in srgb, var(--mood) 34%, transparent);
  opacity: 0; transform: translate(-50%, -14px) scale(.6); transform-origin: 50% 0; pointer-events: none;
  transition: opacity .22s, transform .45s cubic-bezier(.3, 1.4, .45, 1), box-shadow .4s;
  font-size: 1rem; overflow: hidden;
}
.isle-card.open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.topbar:has(.isle-card.open) { z-index: 28; } /* over Cursor Cassie while the card is open */
.isle-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 11px; font-weight: 600; }
.isle-bot { width: 40px; height: 40px; flex-shrink: 0; }
.isle-bot .cassie-bot { width: 40px; height: 40px; display: block; }
.isle-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isle-title.swap { animation: islandIn .32s ease-out; }
.isle-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(var(--hi-rgb), .08); color: var(--white); font-size: 1.15rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.isle-x:hover { background: rgba(var(--hi-rgb), .16); }
.isle-body { padding: 0 14px 14px; }
.isle-step { display: none; }
.isle-card[data-step="drop"] .isle-drop, .isle-card[data-step="home"] .isle-home, .isle-card[data-step="load"] .isle-load,
.isle-card[data-step="ready"] .isle-ready, .isle-card[data-step="think"] .isle-think, .isle-card[data-step="ans"] .isle-ans,
.isle-card[data-step="err"] .isle-err { display: block; }
.isle-drop {
  text-align: center; padding: 18px 12px 16px; border: 1.5px dashed rgba(var(--hi-rgb), .3); border-radius: 16px;
  transition: border-color .2s, background .2s, transform .2s;
}
.isle-card[data-step="drop"] .isle-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.isle-drop svg { width: 30px; height: 30px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.isle-drop b { font-size: 1rem; }
.isle-drop span { color: rgba(var(--hi-rgb), .6); font-size: .8rem; }
.isle-card.hot .isle-drop { border-color: var(--white); background: rgba(var(--hi-rgb), .07); transform: scale(1.02); }
.isle-home p, .isle-q, .isle-msg { margin: 0 0 10px; color: rgba(var(--hi-rgb), .75); }
.isle-file { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.isle-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isle-fsize { color: rgba(var(--hi-rgb), .55); flex-shrink: 0; }
.isle-bar { height: 6px; border-radius: 99px; background: rgba(var(--hi-rgb), .12); overflow: hidden; }
.isle-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--white); transition: width 3.2s cubic-bezier(.1, .7, .3, 1); }
.isle-bar-wait i { width: 38%; animation: isleWait 1.3s ease-in-out infinite; transition: none; }
@keyframes isleWait { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
.isle-thumb { display: block; max-width: 100%; max-height: 120px; border-radius: 12px; margin: 0 0 10px; }
.isle-thumb[hidden], .isle-peek[hidden], .isle-ask[hidden] { display: none; }
.isle-peek { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--hi-rgb), .07); color: rgba(var(--hi-rgb), .85); font-size: .85rem; max-height: 4.6em; overflow: hidden; }
.isle-acts, .isle-ans-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.isle-ans-acts { margin-top: 10px; }
.isle-chip {
  border: 1px solid rgba(var(--hi-rgb), .22); background: transparent; color: var(--white); border-radius: 99px;
  padding: 7px 13px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.isle-chip:hover { background: rgba(var(--hi-rgb), .1); }
.isle-chip-main { background: var(--white); color: var(--dark-1); border-color: var(--white); }
.isle-chip-main:hover { background: var(--paper-2); }
.isle-chip:focus-visible, .isle-x:focus-visible, .isle-send:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.isle-ans-body { max-height: min(46vh, 380px); overflow: auto; border-radius: 14px; }
.isle-ans-copy { white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; padding: 2px 2px 4px; }
.isle-ans-copy p { margin: 0 0 8px; }
.isle-ans-copy p:last-child { margin-bottom: 0; }
.isle-ans-copy a { color: var(--white); }
.isle-ans-copy pre, .isle-ans-copy .table-wrap { color: var(--text); }
.isle-note { color: rgba(var(--hi-rgb), .6); font-size: .85rem; }
.isle-ask { display: flex; gap: 7px; margin-top: 2px; }
.isle-input {
  flex: 1; min-width: 0; border: 1px solid rgba(var(--hi-rgb), .2); background: rgba(var(--hi-rgb), .07); color: var(--white);
  border-radius: 99px; padding: 9px 14px; font: inherit; font-size: .9rem;
}
.isle-input::placeholder { color: rgba(var(--hi-rgb), .62); }
.isle-input:focus { outline: none; border-color: rgba(var(--hi-rgb), .55); }
.isle-send { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--white); color: var(--dark-1); font-size: 1.1rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }
/* the pop-out Cassie window: the whole window is her card */

@media (prefers-reduced-motion: reduce) { .isle-card { transition: opacity .2s; } .isle-title.swap { animation: none; } .isle-bar-wait i { animation: none; width: 100%; opacity: .5; } }

/* ---------- shared from another app: "What should I do with this?" ---------- */
.share-card { margin: 64px auto 0; max-width: 620px; width: 100%; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(var(--shade-rgb), .08); }
.share-head { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.share-quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 0 12px 12px 0; white-space: pre-wrap; max-height: 40vh; overflow: auto; font-size: .95rem; }
.share-from { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.share-from:empty { display: none; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.phone-help { padding: 4px 16px 14px; font-size: .9rem; line-height: 1.5; }
.phone-help ol { margin: 4px 0 10px; padding-left: 20px; }
.phone-help li { margin-bottom: 4px; }
.phone-help code { font-size: .8rem; word-break: break-all; background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 1px 5px; border-radius: 6px; }
.phone-help .muted { color: var(--muted); }

/* ---------- Read & highlight (a file open inside Cassie) ---------- */
.attach-read { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 .82rem/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.attach-read[hidden] { display: none; }
.reader { position: fixed; inset: 0; z-index: 24; display: flex; flex-direction: column; background: var(--bg); }
.reader[hidden] { display: none; }
.reader-head { display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-top, 0px)) 16px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.reader-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reader-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-title span { font-size: .8rem; color: var(--muted); }
.reader-body { flex: 1; overflow-y: auto; padding: 18px 16px 80px; -webkit-overflow-scrolling: touch; }
.reader-page { max-width: 720px; margin: 0 auto 18px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.reader-label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.reader-page p { margin: 0 0 10px; line-height: 1.6; font-size: 1.02rem; -webkit-user-select: text; user-select: text; }
body.reader-open #mascot { display: none; }
body:has(#settings-panel:not([hidden])) #mascot { visibility: hidden; } /* (she sat on the settings) */
.reader-open-btn { display: inline-block; margin-top: 10px; }
.share-tip { margin-top: 12px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.share-tip[hidden] { display: none; }

/* ---------- Explore 3D: the cell you can turn, zoom and tap ----------
   Always dark, like a lab viewer, so the organelles' colours stand out. The buttons
   stay marble monochrome; colour lives only in the cell itself. */
html.x3d-open, html.x3d-open body { overflow: hidden; }
.x3d {
  position: fixed; inset: 0; z-index: 230; color: var(--on-dark); overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse at 50% 42%, var(--dark-3) 0%, var(--dark-1) 55%, var(--dark-0) 100%);
  font-family: inherit;
}
.x3d[hidden] { display: none; }
.x3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.x3d-labels { position: absolute; inset: 0; pointer-events: none; }
.x3d-labels[hidden] { display: none; }
.x3d-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: 3px 8px 3px 14px; margin: -11px 0 0 -4px; border-radius: 99px; color: var(--white);
  background: rgba(var(--dark-rgb), .62); border: 1px solid rgba(var(--hi-rgb), .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .2s;
}
.x3d-label::before { content: ''; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--white); }
.x3d-label.far { opacity: .22; }
.x3d-label[hidden] { display: none; }
.x3d-label.on { background: var(--white); color: var(--dark-1); }
.x3d-label.on::before { background: var(--dark-1); }
.x3d-top {
  /* (above the tutor's card and Ask Cassie's panel, so Close and the top buttons always take a tap) */
  position: absolute; z-index: 262; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(12px + var(--safe-top, 0px)) 16px 8px;
}
.x3d-btn, .x3d-switch button, .x3d-chip, .x3d-act, .x3d-sheet-x {
  font: inherit; color: var(--on-dark); background: rgba(var(--hi-rgb), .08); border: 1px solid rgba(var(--hi-rgb), .16);
  border-radius: 99px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.x3d-btn { padding: 7px 12px; font-size: .82rem; font-weight: 600; }
.x3d-btn[aria-pressed="true"] { background: var(--on-dark); color: var(--dark-1); border-color: var(--on-dark); }
.x3d-close { width: 38px; height: 38px; padding: 0; font-size: 1.35rem; line-height: 1; }
.x3d-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: rgba(var(--hi-rgb), .08); border: 1px solid rgba(var(--hi-rgb), .14); }
.x3d-switch button { border: 0; background: transparent; padding: 7px 14px; font-size: .85rem; font-weight: 600; }
.x3d-switch button[aria-selected="true"] { background: var(--on-dark); color: var(--dark-1); }
.x3d-tools { display: flex; gap: 6px; margin-left: auto; }
.x3d-hint { position: absolute; left: 16px; right: 16px; top: calc(var(--x3d-top, calc(56px + var(--safe-top, 0px))) + 8px); margin: 0; font-size: .78rem; color: rgba(var(--hi-rgb), .62); pointer-events: none; }
.x3d-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 600; color: rgba(var(--hi-rgb), .8); pointer-events: none; }
.x3d-loading[hidden] { display: none; }
.x3d-parts {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px calc(12px + var(--safe-bottom, 0px)); background: linear-gradient(to top, rgba(var(--dark-rgb), .85), transparent);
}
.x3d-parts::-webkit-scrollbar { display: none; }
.x3d-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.x3d-chip.on { background: var(--on-dark); color: var(--dark-1); border-color: var(--on-dark); }
.x3d-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(var(--hi-rgb), .18); }
.x3d-sheet {
  position: absolute; left: 50%; bottom: calc(64px + var(--safe-bottom, 0px)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); max-height: 46vh; overflow: auto; padding: 16px 16px 14px; border-radius: 20px;
  background: rgba(var(--dark-rgb), .9); border: 1px solid rgba(var(--hi-rgb), .14); box-shadow: 0 18px 50px rgba(var(--shade-rgb), .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: x3dUp .28s ease-out;
}
.x3d-sheet[hidden] { display: none; }
@keyframes x3dUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.x3d-sheet-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; padding: 0; font-size: 1.1rem; line-height: 1; }
.x3d-sheet-head { display: flex; align-items: center; gap: 9px; padding-right: 36px; }
.x3d-sheet h3 { margin: 0; font-size: 1.1rem; }
.x3d-like { margin: 6px 0 0; color: rgba(var(--hi-rgb), .62); font-size: .85rem; font-style: italic; }
.x3d-does { margin: 8px 0 0; line-height: 1.5; font-size: .92rem; }
.x3d-only { margin: 8px 0 0; font-size: .8rem; font-weight: 600; color: rgba(var(--hi-rgb), .75); }
.x3d-only[hidden] { display: none; }
.x3d-body-mode .x3d-like { font-style: normal; color: var(--on-dark); line-height: 1.5; font-size: .92rem; }
.x3d-latin { display: block; margin-top: 3px; font-style: italic; font-size: .78rem; color: rgba(var(--hi-rgb), .55); }
.x3d-more { margin: 8px 0 0; line-height: 1.5; font-size: .9rem; }
.x3d-more.muted { color: rgba(var(--hi-rgb), .55); font-style: italic; }
.x3d-more[hidden] { display: none; }
.x3d-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.x3d-act { padding: 8px 14px; font-size: .85rem; font-weight: 600; }
.x3d-act-main { background: var(--on-dark); color: var(--dark-1); border-color: var(--on-dark); }
.x3d button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 560px) {
  .x3d-tools { margin-left: 0; width: 100%; order: 3; }
  .x3d-switch { flex: 1; }
  .x3d-switch button { flex: 1; padding: 7px 8px; }
}
.x3d-switch[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .x3d-sheet { animation: none; } }

/* ---------- Talk with Cassie: the voice conversation screen ----------
   Marble monochrome like the rest of the app; Cassie in the middle is the only colour.
   A soft ring breathes while she listens and pulses while she talks. */
.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; }
html.vc-open, html.vc-open body { overflow: hidden; }
.vc {
  position: fixed; inset: 0; z-index: 225; display: flex; flex-direction: column; align-items: center;
  padding: calc(12px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); background: var(--bg); color: var(--text); overflow-y: auto;
}
.vc[hidden] { display: none; }
.vc-top { width: 100%; max-width: 640px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vc-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.vc-modes { display: inline-flex; flex: 1; min-width: 0; padding: 3px; gap: 2px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); }
.vc-modes button { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .86rem; font-weight: 600; padding: 8px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.vc-modes button[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.vc-stage { position: relative; width: 210px; height: 210px; margin: clamp(18px, 7vh, 64px) 0 10px; border: 0; padding: 0; background: transparent; cursor: default; flex-shrink: 0; }
.vc[data-phase="speaking"] .vc-stage { cursor: pointer; }
.vc-ring { position: absolute; inset: 12px; border-radius: 50%; border: 2px solid var(--border); transition: transform .4s, border-color .3s; }
.vc[data-phase="listening"] .vc-ring { border-color: var(--text); animation: vcBreathe 1.8s ease-in-out infinite; }
.vc[data-phase="speaking"] .vc-ring { border-color: var(--muted); animation: vcPulse .9s ease-in-out infinite; }
.vc[data-phase="thinking"] .vc-ring { border-style: dashed; animation: vcSpin 3s linear infinite; }
@keyframes vcBreathe { 50% { transform: scale(1.06); } }
@keyframes vcPulse { 50% { transform: scale(1.1); opacity: .6; } }
@keyframes vcSpin { to { transform: rotate(360deg); } }
.vc-bot { position: absolute; inset: 30px; }
.vc-bot .cassie-bot { width: 100%; height: 100%; display: block; }
.vc-status { margin: 4px 0 0; font-weight: 700; font-size: 1.02rem; text-align: center; }
.vc-you { margin: 10px 0 0; max-width: 560px; min-height: 1.4em; text-align: center; color: var(--muted); font-style: italic; }
.vc-you:not(:empty)::before { content: 'You: '; font-style: normal; font-weight: 600; }
.vc-cassie { margin: 10px 0 0; max-width: 560px; min-height: 1.4em; text-align: center; font-size: 1.05rem; line-height: 1.5; max-height: 30vh; overflow-y: auto; }
.vc-bar { margin-top: auto; padding-top: 18px; display: flex; justify-content: center; }
.vc-mic { width: 74px; height: 74px; border-radius: 50%; border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(var(--shade-rgb), .22); transition: transform .15s; }
.vc-mic svg { width: 32px; height: 32px; fill: currentColor; }
.vc-mic:active { transform: scale(.95); }
.vc-mic.live { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent), 0 10px 28px rgba(var(--shade-rgb), .22); }
.vc[data-phase="paused"] .vc-mic { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.vc-tip { margin: 12px 0 0; max-width: 460px; text-align: center; font-size: .82rem; color: var(--muted); }
.vc button:focus-visible, .vc select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) { .vc-stage { width: 170px; height: 170px; } .vc-modes button { padding: 8px 6px; font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .vc-ring { animation: none !important; } }

/* ---------- a clean chat canvas ----------
   The starters live in the sidebar (Study tools); the chips under the chat stay
   on one line and scroll sideways instead of stacking up on phones. */
.home-ideas {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 15px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.home-ideas svg { width: 16px; height: 16px; fill: currentColor; }
.home-ideas:hover { border-color: var(--text); }
/* ---------- study tools in the sidebar ----------
   Every tool is in the left sidebar, one tap away mid-chat too. Computers: a slim rail of icons, or
   the full sidebar (the round chevron switches). Phones: the list at the top of the slide-out menu. */
.side-search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 12px; padding: 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.side-search svg, .side-search-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.side-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.side-search:focus-within { border-color: var(--text); }
.side-search-btn { display: none; }
/* "Menu" folds the tool list away, so New chat, the timer and Recents sit near the top */
.side-menu-label { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; margin: 0 0 4px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.side-menu-label:hover { color: var(--text); }
.side-menu-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.side-menu-label[aria-expanded="false"] svg { transform: rotate(-90deg); }
.sidebar.tools-folded .side-tools { display: none; }
@media (pointer: coarse) { .side-menu-label { min-height: 44px; } }
.side-tools { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; border-radius: 12px; transition: box-shadow .3s ease; }
.side-tools.flash { box-shadow: 0 0 0 2px var(--focus); }
.side-tool { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; white-space: nowrap; }
.side-tool svg { width: 18px; height: 18px; fill: currentColor; flex: none; opacity: .85; }
.side-tool span { overflow: hidden; text-overflow: ellipsis; }
.side-tool::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); opacity: 0; transition: opacity .15s ease; }
.side-tool:hover, .side-tool:focus-visible, .side-tool.on { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.side-tool.on { color: var(--primary-ink); }
.side-tool:hover::before, .side-tool:focus-visible::before, .side-tool.on::before { opacity: 1; }
.side-tool.on { font-weight: 650; }
.side-tool:focus-visible { outline: none; }
.side-tool[hidden], .chat-item[hidden] { display: none; }
.side-hl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; }
.side-hl b { display: block; font-size: .88rem; }
.side-hl small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.side-hl input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 44px; height: 26px; border-radius: 99px; background: var(--border); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.side-hl input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(var(--shade-rgb), .25); transition: transform .15s; }
.side-hl input:checked { background: var(--primary); }
.side-hl input:checked::after { transform: translateX(18px); }
.side-toggle { display: none; }
/* (the whole sidebar scrolls, so nothing in it is squeezed or hidden under the phone's tab bar) */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sidebar > * { flex-shrink: 0; }
.sidebar .chat-list { flex: none; overflow: visible; }
html.native .sidebar { padding-bottom: calc(84px + var(--safe-bottom)); }
/* phones: a closed menu is out of reach (no keyboard focus or taps into it while it's off screen) */
@media (max-width: 760px) {
  .sidebar { visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
  .sidebar.open { visibility: visible; transition: transform .24s ease; }
}
.side-tip { position: fixed; z-index: 300; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .8rem; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(var(--shade-rgb), .18); }
.side-tip[hidden] { display: none; }
@media (pointer: coarse) { .side-tool, .side-search { min-height: 44px; } }
@media (min-width: 761px) {
  body { --side-w: 72px; }
  body.side-open { --side-w: 280px; }
  .sidebar { transform: none; width: var(--side-w); max-width: none; box-shadow: none; z-index: 50; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; transition: width .25s ease; }
  #sidebar-overlay, #sidebar-close, #menu-btn { display: none !important; }
  #app { margin-left: var(--side-w); width: calc(100% - var(--side-w)); transition: margin-left .25s ease, width .25s ease; }
  .reader { left: var(--side-w); }
  .side-toggle { display: grid; place-items: center; position: fixed; z-index: 51; top: calc(20px + var(--safe-top)); left: calc(var(--side-w) - 14px); width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 2px 8px rgba(var(--shade-rgb), .12); transition: left .25s ease; }
  .side-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
  body:not(.side-open) .side-toggle svg { transform: rotate(180deg); }
  .side-toggle:hover { border-color: var(--text); }
  /* the rail: icons only */
  body:not(.side-open) .sidebar { padding-left: 12px; padding-right: 12px; }
  body:not(.side-open) .sidebar .rail-hide, body:not(.side-open) .sidebar-head .brand span, body:not(.side-open) .side-tool span, body:not(.side-open) .new-chat-btn .nc-text { display: none; }
  body:not(.side-open) .sidebar-head { justify-content: center; padding: 0; }
  body:not(.side-open) .side-search-btn { display: grid; place-items: center; width: 100%; height: 40px; margin: 0 0 12px; border: 0; border-radius: 12px; background: var(--bg); color: var(--muted); cursor: pointer; }
  body:not(.side-open) .side-search-btn:hover { color: var(--text); }
  body:not(.side-open) .side-menu-label { justify-content: center; padding: 0 0 6px; font-size: 11px; letter-spacing: .02em; pointer-events: none; } /* (Apple's smallest on a computer: 10pt) */
  body:not(.side-open) .side-menu-label svg { display: none; }
  body:not(.side-open) .sidebar.tools-folded .side-tools { display: flex; } /* (the rail always shows every tool) */
  body:not(.side-open) .side-tool { justify-content: center; padding: 8px 0; }
  body:not(.side-open) .new-chat-btn { padding: 11px 0; }
}
@media (min-width: 761px) and (pointer: coarse) { .side-toggle { width: 44px; height: 44px; left: calc(var(--side-w) - 22px); } body:not(.side-open) .side-search-btn { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sidebar, #app, .side-toggle, .side-toggle svg, .side-tools, .side-menu-label svg { transition: none !important; } }
.quick-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); }
.quick-actions::-webkit-scrollbar { display: none; }
.quick-actions .chip { flex-shrink: 0; }
/* phones: the top bar holds the menu, Cassie, the switch and four icons */
@media (max-width: 430px) {
  .topbar { padding-left: 10px; padding-right: 8px; column-gap: 4px; }
  .topbar-actions { gap: 0; }
  .topbar-actions .icon-btn { width: 34px; height: 34px; padding: 0; }
  .topbar-actions .icon-btn svg { width: 20px; height: 20px; }
  .topbar-actions .aud-switch { margin-right: 2px; }
  .topbar-actions .aud-switch button { padding: 6px 8px; }
}
@media (max-width: 380px) { .topbar .brand > span { display: none; } } /* the Cassie dot stays */
/* Explore 3D — the human body */
.x3d-find { position: absolute; left: 16px; right: 16px; top: calc(var(--x3d-top, calc(56px + var(--safe-top, 0px))) + 6px); max-width: 460px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.x3d-find .x3d-search { flex: 1; min-width: 0; width: auto; }
.x3d-find .x3d-results, .x3d-find .x3d-showall { flex-basis: 100%; margin-top: 0; }
.x3d-sex { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: rgba(var(--hi-rgb), .08); border: 1px solid rgba(var(--hi-rgb), .18); flex-shrink: 0; }
.x3d-sex button { border: 0; background: transparent; color: var(--on-dark); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.x3d-sex button[aria-checked="true"] { background: var(--on-dark); color: var(--dark-1); }
.x3d-sub { font-size: .8rem; opacity: .95; }
.x3d-find[hidden] { display: none; }
.x3d-search {
  width: 100%; font: inherit; font-size: .9rem; padding: 9px 14px; border-radius: 99px; color: var(--on-dark);
  background: rgba(var(--hi-rgb), .08); border: 1px solid rgba(var(--hi-rgb), .18); outline: none;
}
.x3d-search::placeholder { color: rgba(var(--hi-rgb), .62); }
.x3d-search:focus { border-color: rgba(var(--hi-rgb), .55); }
.x3d-results { margin-top: 6px; border-radius: 16px; overflow: hidden; background: rgba(var(--dark-rgb), .94); border: 1px solid rgba(var(--hi-rgb), .14); }
.x3d-results[hidden] { display: none; }
.x3d-results button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--on-dark); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.x3d-results button:hover, .x3d-results button:focus-visible { background: rgba(var(--hi-rgb), .08); }
.x3d-results span { color: rgba(var(--hi-rgb), .55); font-size: .8rem; white-space: nowrap; }
.x3d-showall { margin-top: 8px; justify-self: start; }
.x3d-showall[hidden] { display: none; }
.x3d-sys .x3d-tick { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(var(--hi-rgb), .6); flex-shrink: 0; }
.x3d-sys[aria-pressed="true"] { background: var(--on-dark); color: var(--dark-1); border-color: var(--on-dark); }
.x3d-sys[aria-pressed="true"] .x3d-tick { border-color: var(--dark-1); background: var(--dark-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.x3d-path { margin: 6px 0 0; font-size: .8rem; color: rgba(var(--hi-rgb), .62); }
.x3d-path[hidden], .x3d-credit[hidden] { display: none; }
.x3d-credit { margin: 10px 0 0; font-size: .72rem; color: rgba(var(--hi-rgb), .45); }
.x3d-credit a { color: inherit; }
.x3d-act[hidden], .x3d-btn[hidden] { display: none; }
/* body: atlas-style view controls, pulled-apart view, orientation letters */
.x3d-count { flex-basis: 100%; margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: rgba(var(--hi-rgb), .62); pointer-events: none; }
.x3d-count b { color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.x3d-count-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark); box-shadow: 0 0 0 3px rgba(var(--hi-rgb), .12); }
.x3d-view {
  position: absolute; left: 50%; bottom: calc(64px + var(--safe-bottom, 0px)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); padding: 12px 16px 12px; border-radius: 20px;
  background: rgba(var(--dark-rgb), .9); border: 1px solid rgba(var(--hi-rgb), .14); box-shadow: 0 18px 50px rgba(var(--shade-rgb), .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: x3dUp .28s ease-out;
}
.x3d-view[hidden] { display: none; }
/* a computer: the view controls sit at the side, so the pulled-apart pieces get the whole middle; a tablet: a wider panel */
@media (min-width: 1100px) {
  .x3d-view { left: 16px; transform: none; bottom: calc(70px + var(--safe-bottom, 0px)); width: 380px; animation-name: x3dUpL; }
  .x3d-spread-head label, .x3d-reassemble { white-space: nowrap; }
  .x3d-view .x3d-seg button { font-size: .76rem; }
}
@media (min-width: 700px) and (max-width: 1099px) { .x3d-view { width: min(540px, calc(100vw - 32px)); } }
@keyframes x3dUpL { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.x3d-view-head { display: flex; align-items: center; justify-content: space-between; }
.x3d-view-head h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.x3d-cur { width: 15px; height: 17px; flex-shrink: 0; }
.x3d-view .x3d-view-x { position: static; }
.x3d-seg { display: flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 12px; background: rgba(var(--hi-rgb), .06); border: 1px solid rgba(var(--hi-rgb), .1); }
.x3d-seg button { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--on-dark); font: inherit; font-size: .8rem; font-weight: 600; padding: 8px 4px; border-radius: 9px; cursor: pointer; }
.x3d-seg button[aria-pressed="true"] { background: rgba(var(--hi-rgb), .16); }
.x3d-spread-head { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.x3d-spread-head label { margin-right: auto; font-size: .84rem; font-weight: 600; }
.x3d-reassemble { padding: 5px 10px; font-size: .76rem; }
.x3d-reassemble:disabled { opacity: .4; cursor: default; }
.x3d-spread-pc { min-width: 44px; padding: 5px 8px; border-radius: 8px; background: rgba(var(--hi-rgb), .1); font-size: .76rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.x3d-spread { --fill: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 6px 0 0; background: transparent; cursor: pointer; touch-action: pan-x; }
.x3d-spread::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(to right, var(--on-dark) var(--fill), rgba(var(--hi-rgb), .12) var(--fill)); }
.x3d-spread::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(to right, var(--on-dark) var(--fill), rgba(var(--hi-rgb), .12) var(--fill)); }
.x3d-spread::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: var(--dark-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 80 305 350'%3E%3Cpath d='M108 90 L395 259 L275 281 L342 399 L287 422 L225 300 L108 382 Z' fill='white' stroke='%230b0a0f' stroke-width='22' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 58% 55%/13px 15px no-repeat; border: 2px solid var(--on-dark); box-shadow: 0 2px 10px rgba(var(--shade-rgb), .5); }
.x3d-spread::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--dark-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 80 305 350'%3E%3Cpath d='M108 90 L395 259 L275 281 L342 399 L287 422 L225 300 L108 382 Z' fill='white' stroke='%230b0a0f' stroke-width='22' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 58% 55%/12px 14px no-repeat; border: 2px solid var(--on-dark); }
.x3d-spread:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 99px; }
.x3d-spread-ends { display: flex; justify-content: space-between; font-size: .72rem; color: rgba(var(--hi-rgb), .55); }
.x3d-gizmo { position: absolute; right: 22px; bottom: calc(96px + var(--safe-bottom, 0px)); width: 76px; height: 76px; border-radius: 50%; background: rgba(var(--hi-rgb), .04); border: 1px solid rgba(var(--hi-rgb), .08); }
.x3d-gizmo[hidden] { display: none; }
.x3d-gizmo button { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--hi-rgb), .22); background: rgba(var(--dark-rgb), .85); color: var(--on-dark); font: inherit; font-size: .64rem; font-weight: 700; cursor: pointer; }
.x3d-gizmo button[data-face="A"], .x3d-gizmo button[data-face="S"] { background: var(--on-dark); color: var(--dark-1); }
@media (max-width: 560px) { .x3d-gizmo { right: 14px; top: calc(var(--x3d-top, 108px) + 66px); bottom: auto; transform: scale(.85); transform-origin: top right; } }
/* touch screens: every control in the 3D views is 44 x 44 to touch; the letters spread out on a
   bigger ring (--gz-r, read by explore/cell3d.js) so each has its own 44px, and a letter on the far
   side (behind the others) can't be tapped through them */
@media (pointer: coarse) {
  .x3d-sex button, .x3d-seg button, .x3d-act, .x3d-reassemble, .x3d-results button { min-height: 44px; }
  .x3d-search { min-height: 44px; }
  .x3d-sheet-x { width: 44px; height: 44px; right: 6px; top: 6px; }
  .x3d-sheet-head { padding-right: 50px; }
  .x3d-sheet .x3d-sheet-min { right: 54px; }
  .x3d-body-mode .x3d-sheet .x3d-sheet-head { padding-right: 100px; }
  .x3d-spread { height: 44px; }
  .x3d-gizmo { --gz-r: 44px; width: 132px; height: 132px; }
  .x3d-gizmo button { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: .74rem; }
  .x3d-gizmo button::after { content: ""; position: absolute; left: -7px; top: -7px; right: -7px; bottom: -7px; border-radius: 50%; }
  .x3d-gizmo button.far { pointer-events: none; }
}
@media (pointer: coarse) and (max-width: 560px) { .x3d-gizmo { transform: none; right: 10px; top: calc(var(--x3d-top, 108px) + 100px); } }
/* the picked part: a callout beside it, with a line to the spot */
.x3d-body-mode .x3d-label.on { margin-left: 46px; padding-left: 10px; background: rgba(var(--dark-rgb), .9); color: var(--on-dark); border-color: rgba(var(--hi-rgb), .4); border-radius: 8px; }
.x3d-body-mode .x3d-label.on::before { left: -46px; top: 50%; width: 15px; height: 17px; margin-top: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 80 305 350'%3E%3Cpath d='M108 90 L395 259 L275 281 L342 399 L287 422 L225 300 L108 382 Z' fill='white' stroke='%230b0a0f' stroke-width='22' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; filter: drop-shadow(0 1px 2px rgba(var(--shade-rgb), .6)); }
.x3d-body-mode .x3d-label.on::after { content: ''; position: absolute; right: 100%; top: 50%; width: 26px; height: 0; border-top: 1px dashed rgba(var(--hi-rgb), .7); }
/* the tray names, when the body is pulled apart */
.x3d-trays { position: absolute; inset: 0; pointer-events: none; }
.x3d-trays[hidden], .x3d-trays span[hidden] { display: none; }
.x3d-trays span { position: absolute; left: 0; top: 0; margin-top: -10px; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--hi-rgb), .78); border-left: 2px solid var(--on-dark); padding: 1px 0 1px 7px; }
/* the details card, small: just the name and "Selection details" */
.x3d-sheet-sub { display: none; }
.x3d-sheet-min { right: 46px; }
.x3d-sheet.mini { max-height: none; padding: 12px 16px; cursor: pointer; }
.x3d-sheet.mini > :not(.x3d-sheet-head):not(.x3d-sheet-x) { display: none; }
.x3d-sheet.mini .x3d-sheet-head { flex-wrap: wrap; row-gap: 0; padding-right: 76px; }
.x3d-sheet.mini .x3d-sheet-head h3 { font-size: .98rem; }
.x3d-sheet.mini .x3d-sheet-sub { display: block; flex-basis: 100%; padding-left: 19px; font-size: .74rem; color: rgba(var(--hi-rgb), .55); }
.x3d-up { border: 0; background: none; padding: 0; font: inherit; color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hv-set { margin: -2px 0 12px; }
.hv-set[hidden] { display: none; }
.hv-set .hint { margin: 0 0 8px; }
.hv-set-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-gender { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); }
.vc-gender button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; padding: 7px 11px; border-radius: 99px; cursor: pointer; }
.vc-gender button[aria-checked="true"] { background: var(--primary); color: var(--on-primary); }
@media (max-width: 480px) { .vc-top { justify-content: space-between; } .vc-modes { order: 3; flex-basis: 100%; } }
.home-intro .review-mistakes { margin-top: 12px; }

/* ---------- Flashcards (cards.js) ---------- */
.fc { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--dark-rgb), .45); }
.fc[hidden] { display: none; }
.fc-panel { width: min(560px, 100%); max-height: min(760px, 100%); display: flex; flex-direction: column; background: var(--bg, var(--paper-1)); color: var(--text); border-radius: 22px; box-shadow: 0 24px 70px rgba(var(--shade-rgb), .35); overflow: hidden; }
.fc-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; }
.fc-head h2 { flex: 1; margin: 0; font-size: 1.15rem; }
.fc-x, .fc-back { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fc-back[hidden] { display: none; }
.fc-body { padding: 4px 18px 20px; overflow: auto; }
.fc-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: .88rem; }
.fc-empty, .fc-how { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.fc-decks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.fc-decks li { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.fc-deck-name { flex: 1; min-width: 0; }
.fc-deck-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-deck-name span { color: var(--muted); font-size: .8rem; }
.fc-deck-name em { font-style: normal; color: var(--text); font-weight: 600; }
.fc-deck-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fc-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 8px 14px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; list-style: none; }
.fc-btn.main { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fc-more { position: relative; }
.fc-more summary { list-style: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; font-weight: 700; }
.fc-more summary::-webkit-details-marker, .fc-new summary::-webkit-details-marker { display: none; }
.fc-more[open] > div { position: absolute; right: 0; top: 40px; z-index: 2; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(var(--shade-rgb), .18); display: grid; }
.fc-more button { text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: .86rem; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.fc-more button:hover { background: var(--border); }
.fc-more button.danger { color: var(--danger); }
.fc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.fc-new { width: 100%; }
.fc-new summary { display: inline-block; }
.fc-form { display: grid; gap: 8px; margin-top: 10px; }
.fc-form input { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.fc-progress { margin: 0 0 10px; color: var(--muted); font-size: .82rem; text-align: center; }
.fc-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 100%; min-height: 230px; padding: 24px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; box-shadow: 0 10px 30px rgba(var(--shade-rgb), .08); }
.fc-card.flipped { cursor: default; }
.fc-side { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fc-text { font-size: 1.15rem; line-height: 1.45; font-weight: 600; }
.fc-q { font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.fc-tap { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.fc-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.fc-grades[hidden] { display: none; }
.fc-grade { position: relative; display: grid; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.fc-grade b { font-size: .9rem; }
.fc-grade small { color: var(--muted); font-size: .72rem; }
.fc-grade kbd { position: absolute; top: 4px; right: 6px; font: 600 .62rem/1 inherit; font-family: inherit; color: var(--muted); }
.fc-grade.again b { color: var(--danger); }
.fc-grade.good { border-color: var(--primary); }
.fc-done { text-align: center; padding: 20px 0; }
.fc-big { font-size: 2.6rem; }
.fc-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.bubble-tools .fc-make { font-weight: 600; }

/* ---------- Study room: start or join ---------- */
.room-dlg { position: fixed; inset: 0; z-index: 2147483601; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--dark-rgb), .45); }
.room-card { position: relative; width: min(420px, 100%); padding: 22px 20px 18px; border-radius: 22px; background: var(--bg, var(--paper-1)); color: var(--text); box-shadow: 0 24px 70px rgba(var(--shade-rgb), .35); }
.room-card h2 { margin: 0 0 6px; font-size: 1.2rem; }
.room-card p { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.room-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.room-go { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.room-go.main { width: 100%; background: var(--primary); border-color: var(--primary); color: var(--on-primary); margin-bottom: 12px; }
.room-join { display: flex; gap: 8px; margin-bottom: 10px; }
.room-join input { flex: 1; min-width: 0; font: inherit; letter-spacing: .1em; text-transform: uppercase; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.room-err { color: var(--danger) !important; }
.room-err[hidden] { display: none; }
.room-fine { font-size: .78rem !important; margin: 0 !important; }

/* ===================== The phone app (native.js) =====================
   A Home screen and a floating tab bar, after Apple's Human Interface Guidelines: the bar floats
   on glass above the content, tabs only move between sections, controls are at least 44 pt,
   body text 17 pt. Black and white like the rest of Cassie. Only on phones (html.native). */
.tabbar, .home { display: none; }
html.native #app-bg { display: none; }
html.native #labs-btn, html.native #games-btn, html.native #settings-btn { display: none; } /* they're tabs now */

/* --- the tab bar: a dark glass pill; the open tab is a white pill with its name --- */
html.native .tabbar {
  display: flex; align-items: center; gap: 2px; position: fixed; z-index: 236; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + var(--safe-bottom)); padding: 6px; border-radius: 999px;
  background: rgba(var(--dark-rgb), .84); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 12px 34px rgba(var(--shade-rgb), .28), inset 0 0 0 1px rgba(var(--hi-rgb), .09);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; min-width: 46px; padding: 0 11px;
  border: 0; border-radius: 999px; background: transparent; color: rgba(var(--hi-rgb), .7); font: 600 15px/1 inherit; cursor: pointer;
  transition: background .25s, color .25s, padding .25s;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab span { display: none; }
.tab.on { background: var(--white); color: var(--dark-1); padding: 0 16px 0 12px; }
@media (max-width: 370px) { .tab { min-width: 42px; padding: 0 9px; } .tab.on span { font-size: 14px; } }
.tab.on svg { stroke-width: 2.1; }
.tab.on span { display: inline; }
.tab:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* full-screen views cover it, like a modal; and the keyboard needs the room */
html.native.typing .tabbar, html.native.lab-in .tabbar, html.native.x3d-open .tabbar, html.native.vc-open .tabbar, body.reader-open .tabbar,
body:has(.profile-overlay:not([hidden]), .auth-page:not([hidden])) .tabbar {
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
}
/* room for the bar under everything it floats over */
html.native.tab-chat:not(.typing) #app { padding-bottom: calc(68px + var(--safe-bottom)); }
html.native .labs-scroll { padding-bottom: calc(96px + var(--safe-bottom)); }
html.native .fc { padding-bottom: calc(86px + var(--safe-bottom)); }
html.native .settings-panel { padding-bottom: calc(76px + var(--safe-bottom)); }

/* --- Home --- */
html.native.tab-home .topbar, html.native.tab-home #chat-log, html.native.tab-home #quick-actions, html.native.tab-home .composer, html.native.tab-home #attach-preview, html.native.tab-home #mascot, html.native.tab-home #cassie-cursor { display: none !important; }
html.native .home:not([hidden]) {
  display: block; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(20px + var(--safe-top)) 20px calc(104px + var(--safe-bottom));
}
.home { --ring: 0 0 0 1px var(--border), 0 1px 2px rgba(var(--shade-rgb), .04); }
.home button { font: inherit; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home button:active { transform: scale(.97); }
.home button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.home svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) {
  html.native .tabbar { background: rgba(var(--dark-rgb), .82); }
}
@media (prefers-reduced-motion: reduce) { .home button:active { transform: none; } html.native .tabbar, .tab { transition: none; } }
@media (prefers-reduced-transparency: reduce) { html.native .tabbar { background: var(--dark-2); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ===================== Liquid Glass =====================
   Apple's material for the layer of controls that floats above the content (Human Interface
   Guidelines › Materials, via the apple-design skill): the top bar, the tab bar, the chat box,
   the quick chips, sheets and the side menu. Content — bubbles, cards, lists — stays solid, so
   it reads clearly and the glass has something to show through it. No colour of its own: it
   takes the colours beneath. With Reduce Transparency or Increase Contrast it turns solid. */
:root {
  --lg-fill: linear-gradient(180deg, rgba(var(--glass-rgb), .78), rgba(var(--glass-rgb), .58));
  --lg-fill-thick: linear-gradient(180deg, rgba(var(--glass-rgb), .93), rgba(var(--glass-rgb), .85));
  --lg-line: color-mix(in srgb, var(--primary) 12%, rgba(var(--ink-rgb), .06));
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .55);
  --lg-lift: 0 10px 30px rgba(18, 17, 23, .10), 0 1px 3px rgba(18, 17, 23, .06);
  --lg-blur: blur(26px) saturate(1.6);
  --lg-ink: rgba(var(--ink-rgb), .68);
  --lg-pick: color-mix(in srgb, var(--primary) 14%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-fill: linear-gradient(180deg, rgba(var(--glass-rgb), .66), rgba(var(--glass-rgb), .54));
    --lg-fill-thick: linear-gradient(180deg, rgba(var(--glass-rgb), .92), rgba(var(--glass-rgb), .87));
    --lg-line: color-mix(in srgb, var(--primary) 14%, rgba(var(--hi-rgb), .06));
    --lg-edge: inset 0 1px 0 rgba(var(--hi-rgb), .16), inset 0 -1px 0 rgba(var(--hi-rgb), .04), inset 0 0 0 .5px rgba(var(--hi-rgb), .1);
    --lg-lift: 0 12px 34px rgba(var(--shade-rgb), .45), 0 1px 3px rgba(var(--shade-rgb), .3);
    --lg-ink: rgba(var(--hi-rgb), .74);
    --lg-pick: color-mix(in srgb, var(--primary) 24%, transparent);
  }
}
.topbar, .composer, #quick-actions .chip, .settings-card, .sidebar, html.native .tabbar {
  background: var(--lg-fill); border: 1px solid var(--lg-line);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-edge), var(--lg-lift);
}
/* text-heavy surfaces use the thicker glass, so every word stays easy to read */
.settings-card, .sidebar { background: var(--lg-fill-thick); }
/* the top bar floats: the chat scrolls up underneath it (native.js keeps --topbar-h) */
.topbar { position: relative; z-index: 7; border-width: 0 0 1px; box-shadow: var(--lg-edge), 0 6px 22px rgba(var(--ink-rgb), .06); }
#chat-log { margin-top: calc(-1 * var(--topbar-h, 0px)); padding-top: calc(var(--topbar-h, 0px) + 16px); scroll-padding-top: var(--topbar-h, 0px); }
.composer { position: relative; z-index: 6; }
.composer:focus-within { border-color: var(--lg-line); box-shadow: var(--lg-edge), var(--lg-lift), 0 0 0 2px var(--focus); }
#quick-actions .chip { box-shadow: var(--lg-edge), 0 2px 8px rgba(var(--ink-rgb), .06); }
/* the tab bar: glass that shows what's beneath; the open tab sits in a brighter bubble */
html.native .tabbar { background: var(--lg-fill); }
.tab { color: var(--lg-ink); }
.tab.on { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 1px 0 rgba(var(--hi-rgb), .5); }
.tab:focus-visible { outline-color: var(--focus); }
/* Solid instead of glass: Lite mode (slow phones), Reduce Transparency and Increase Contrast.
   The glass is made of tokens, so turning them solid here turns every glass surface solid. */
html.lite {
  --lg-fill: var(--surface); --lg-fill-thick: var(--surface); --lg-blur: none;
  --lg-edge: inset 0 0 0 0 transparent; --lg-lift: 0 1px 3px rgba(var(--shade-rgb), .12); --lg-line: var(--border);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --lg-fill: var(--surface); --lg-fill-thick: var(--surface); --lg-blur: none;
    --lg-edge: inset 0 0 0 0 transparent; --lg-lift: 0 1px 3px rgba(var(--shade-rgb), .12); --lg-line: var(--border); --lg-ink: var(--text);
  }
  .tab.on { background: var(--text); color: var(--surface); }
}
/* flashcards out loud */
.fc-progress { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fc-say { display: inline-flex; gap: 6px; }
.fc-mini { min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 .82rem/1 inherit; cursor: pointer; }
.fc-mini[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.fc-listening { cursor: default; }
/* Listen (listen.js): Cassie reads an answer or a part card aloud */
.listen-row { margin-top: 8px; }
.listen-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 .8rem/1 inherit; cursor: pointer; }
.listen-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.listen-btn.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.x3d .listen-btn { background: rgba(var(--hi-rgb), .1); color: var(--white); border-color: rgba(var(--hi-rgb), .22); margin-left: auto; }
.x3d .listen-btn.on { background: var(--white); color: var(--dark-1); }

/* Plus extras: what it is and how to get it (above Labs and the board) */
.ex-sheet { position: fixed; inset: 0; z-index: 2147483630; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--shade-rgb), .45); }
.plus-sheet { position: fixed; inset: 0; z-index: 2147483640; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--shade-rgb), .45); }
.plus-card { width: 100%; max-width: 380px; box-sizing: border-box; padding: 20px; border-radius: 18px; background: var(--surface, var(--white)); color: var(--text, var(--dark-2)); border: 1px solid var(--border, rgba(var(--shade-rgb), .12)); box-shadow: 0 20px 60px rgba(var(--shade-rgb), .35); }
.plus-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.plus-card p { margin: 0 0 16px; font-size: .9rem; line-height: 1.45; opacity: .85; }
.plus-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plus-actions > * { flex: 1 1 auto; min-height: 40px; padding: 8px 14px; border-radius: 99px; font: inherit; font-size: .88rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid var(--border, rgba(var(--shade-rgb), .15)); background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.plus-actions .plus-go { background: var(--text, var(--dark-2)); color: var(--surface, var(--white)); border-color: transparent; }
.x3d-toast { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 99px; background: rgba(var(--dark-rgb), .82); color: var(--white); font-size: .82rem; text-align: center; pointer-events: none; }
.x3d-tools .x3d-btn { white-space: nowrap; }
@media (max-width: 430px) { .x3d-tools { gap: 6px; } .x3d-tools .x3d-btn { padding-left: 11px; padding-right: 11px; font-size: .84rem; } }

/* ===================== Design system: one type scale, radii, spacing, buttons =====================
   Every screen draws from these. Monochrome: the only colour is one the student picks (--accent). */
:root {
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2.125rem;
  --lh-tight: 1.2; --lh-body: 1.5;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --tap: 44px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ring: 0 0 0 3px color-mix(in srgb, var(--text) 22%, transparent);
}

/* Placeholder words are the muted grey everywhere (the browser's own grey is too light on the marble) */
::placeholder { color: var(--muted); opacity: 1; }

/* Keyboard focus: one monochrome ring everywhere (never the browser's coloured one) */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Glass you can put on any surface: .glass for controls, .glass-thick where there is text to read */
.glass, .glass-thick {
  background: var(--lg-fill); border: 1px solid var(--lg-line);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-edge), var(--lg-lift);
}
.glass-thick { background: var(--lg-fill-thick); }

/* Buttons: three sizes (sm 44, md 48, lg 56), three looks (filled, glass, plain), and clear
   pressed, disabled and loading states. A plain .btn is the filled medium one. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; min-width: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 650; line-height: 1;
  text-decoration: none; position: relative;
  transition: transform .12s var(--ease), background-color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn-sm { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn-md { min-height: 48px; }
.btn-lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }
.btn.secondary, .btn-glass {
  background: var(--lg-fill); color: var(--text); border: 1px solid var(--lg-line);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge);
}
.btn-plain { background: transparent; color: var(--text); border: 0; box-shadow: none; }
.btn-plain:hover { background: var(--lg-pick); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled, [aria-disabled="true"], .is-loading, [aria-busy="true"]) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* loading: the words stay for screen readers, a small spinner shows instead */
.btn.is-loading, .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: btnSpin .7s linear infinite;
}
.btn.secondary.is-loading::after, .btn-glass.is-loading::after, .btn-plain.is-loading::after,
.btn.secondary[aria-busy="true"]::after, .btn-glass[aria-busy="true"]::after, .btn-plain[aria-busy="true"]::after { border-color: var(--text); border-right-color: transparent; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* The Plus sheet and other pop-up cards are thick glass */
.plus-card { background: var(--lg-fill-thick); border-color: var(--lg-line); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge), 0 24px 64px rgba(var(--shade-rgb), .3); border-radius: var(--r-xl); padding: var(--sp-5); }
.plus-actions > * { min-height: 48px; transition: transform .12s var(--ease); }
.plus-actions > *:active { transform: scale(.97); }

/* Touch screens: every tap target is at least 44 x 44. Controls in a tight row grow for real;
   small ones on their own keep their look and get an invisible 44px touch area around them. */
@media (pointer: coarse) {
  .icon-btn, .icon-btn.round { width: var(--tap); height: var(--tap); }
  .auth-field input { min-height: var(--tap); }
  .auth-go { min-height: 48px; }
  .auth-skip { min-height: var(--tap); }
  .auth-eye { width: var(--tap); height: var(--tap); right: 0; display: inline-flex; align-items: center; justify-content: center; }
  .accent-sw { width: var(--tap); height: var(--tap); padding: 8px; background-clip: content-box; border-width: 0; box-shadow: inset 0 0 0 8px var(--surface), inset 0 0 0 10px var(--border); }
  .accent-sw.active { box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 8px var(--text); }
  .accent-swatches { grid-template-columns: repeat(auto-fill, var(--tap)); gap: 0; }
  .topbar-actions .icon-btn { width: var(--tap); height: var(--tap); }
  .quick-actions { padding-top: 8px; padding-bottom: 8px; margin-top: -8px; margin-bottom: -8px; position: relative; z-index: 6; }
  #prompt-input { min-height: var(--tap); padding-top: 11px; }
  .bubble-tools { gap: 0 var(--sp-2); margin-top: 0; }
  .bubble-tools button { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-1); justify-content: center; }
  .bubble-tools button.suggest { min-height: 36px; margin: 4px 0; }
  .listen-btn, .fc-mini, .model-pill { min-height: var(--tap); }
  .followups { gap: var(--sp-2); }
  .fu-chip { min-height: 36px; }
  .settings-card .btn, .settings-actions .btn { min-height: var(--tap); }
  .chip, .fu-chip, .aud-switch button, .auth-switch button, .auth-legal a, .key-link, .bubble-tools button.suggest { position: relative; }
  .chip::after, .fu-chip::after, .aud-switch button::after, .auth-switch button::after, .auth-legal a::after, .key-link::after, .bubble-tools button.suggest::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--tap)); height: max(100%, var(--tap)); transform: translate(-50%, -50%);
  }
  .key-link { display: inline-block; }
  .fu-chip { min-height: var(--tap); } /* (36px with a 44px area overlapped the chip in the next row) */
  .new-chat-btn, .home-ideas, .pf-seg button { min-height: var(--tap); }
  /* a switch row: the whole row is its label, so the switch is as tall as the row */
  /* a switch row: the whole row is its label, 44px tall, reaching a little past each side so a
     finger just beside the switch still works it */
  .field-toggle, .field.row { display: flex; align-items: center; min-height: var(--tap); padding-inline: 12px; margin-inline: -12px; }
  /* Talk with Cassie */
  .vc-x { width: var(--tap); height: var(--tap); }
  .vc-modes button, .vc-gender button { min-height: var(--tap); }
}
@media (max-width: 370px) { .tab { min-width: 44px; padding: 0 10px; } } /* (after the phone rule: six tabs still fit at 360) */

/* Reduce Motion: no sliding, scaling or spinning, things just appear */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:active, .chip:active, .fu-chip:active, .plus-actions > *:active { transform: none !important; }
  .btn.is-loading::after, .btn[aria-busy="true"]::after { animation: none !important; border-right-color: currentColor; opacity: .6; }
}

/* A reason under a field (errors.js): shown as you type, gone when it's fixed */
.field-err { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.4; font-weight: 500; color: var(--text); text-align: left; }
.field-err::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--text); color: var(--surface); font: 800 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center; }
.field-err[hidden] { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--text) !important; box-shadow: 0 0 0 1px var(--text) !important; }
.pf-seg:has(+ input[aria-invalid="true"]) { box-shadow: 0 0 0 1px var(--text); border-radius: var(--r-sm); }
.auth-go[aria-busy="true"], .pf-go[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.auth-go[aria-busy="true"]::after, .pf-go[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: btnSpin .7s linear infinite; }
.fc-field { display: grid; }
.fc-field input { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.room-join { flex-wrap: wrap; }
.room-join .field-err { flex-basis: 100%; margin-top: 0; }

/* An empty list (errors.js → CassieErrors.empty): a calm mark, why it's empty, one next step */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); margin: var(--sp-3) 0; border-radius: var(--r-lg); background: var(--lg-fill-thick); border: 1px solid var(--lg-line); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge); color: var(--text); }
.empty-state .es-mark { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--muted); margin-bottom: var(--sp-1); }
.empty-state .es-title { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.empty-state .es-text { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); max-width: 32ch; }
.empty-state .es-go { margin-top: var(--sp-2); }
.bubble .empty-state { margin: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: var(--sp-2) 0; }

/* Chat in the Liquid Glass style: softer, rounder bubbles from the same radii as everything else */
.bubble { border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); line-height: var(--lh-body); }
.bubble-user { border-bottom-right-radius: 6px; }
.bubble-assistant { border-bottom-left-radius: 6px; border-color: var(--lg-line); box-shadow: var(--lg-edge), 0 8px 24px rgba(var(--ink-rgb), .07); }
.bubble.error { border: 1px solid var(--text); }
.followups { gap: var(--sp-2); }
.fu-chip { border-radius: var(--r-pill); }
/* phones: the save row fits on one line (the download mark stands for "Save as") */
@media (max-width: 430px) {
  .bubble-tools .save-label { font-size: 0; gap: 0; padding-left: var(--sp-2); }
  .bubble-tools .save-label svg { width: 16px; height: 16px; }
}
.bubble-tools .save-group { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: inherit; }

/* the 3D explorer's buttons and chips: 44px to touch */
@media (pointer: coarse) { .x3d-btn, .x3d-chip, .x3d .listen-btn, .x3d-switch button { min-height: 44px; } .x3d-close { width: 44px; height: 44px; } }

/* The Plus sheet: thick glass, what you tapped, why, what Plus adds, two clear buttons */
.plus-card { padding: var(--sp-5); text-align: left; }
.plus-kicker { display: inline-block; margin-bottom: var(--sp-2); padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--lg-line); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plus-card h3 { font-size: var(--fs-lg); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); }
.plus-card p { opacity: 1; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-body); }
.plus-why { padding: var(--sp-3); border-radius: var(--r-md); background: var(--lg-pick); margin: 0 0 var(--sp-3) !important; font-weight: 600; }
.plus-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); line-height: 1.4; }
.plus-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.plus-list li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; margin-top: 1px; }
.plus-foot { margin-bottom: var(--sp-4) !important; }
.plus-actions > * { font-size: var(--fs-md); }
.plus-actions .plus-ok, .plus-actions .plus-in { background: var(--lg-fill); border-color: var(--lg-line); }

/* Offline: a glass note across the top */
.offline-note { position: fixed; z-index: 2147483000; left: 50%; top: calc(var(--safe-top) + 8px); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); box-sizing: border-box; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--lg-fill-thick); border: 1px solid var(--lg-line); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge), var(--lg-lift); color: var(--text); font-size: var(--fs-sm); line-height: 1.4; }
.offline-note[hidden] { display: none; }
/* Cassie types instead of speaking (voice.js): one plain line, said once, never waits for a tap */
.cv-note { position: fixed; z-index: 2147483001; left: 50%; bottom: calc(var(--safe-bottom) + 16px); transform: translateX(-50%); width: min(480px, calc(100% - 32px)); box-sizing: border-box; margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--lg-fill-thick); border: 1px solid var(--lg-line); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge), var(--lg-lift); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; pointer-events: none; }

/* Flashcards on touch screens: 44px to touch */
@media (pointer: coarse) {
  .fc-x, .fc-back { width: var(--tap); height: var(--tap); }
  .fc-btn, .fc-field input, .fc-form input, .fc-mini { min-height: var(--tap); }
  summary.fc-btn { display: inline-flex; align-items: center; }
  .fc-more summary { width: var(--tap); height: var(--tap); }
  .fc-more[open] > div { top: 50px; }
  .fc-more button { min-height: var(--tap); }
}
/* An empty chat on a computer shows Cassie's welcome with its next steps (the phone app has its own
   Home screen; the rule that hides that one must not hide this one) */
html:not(.native) #chat-log > .home { display: flex; }
/* a study room problem in plain monochrome, like every other error */
.room-err { color: var(--text) !important; font-weight: 600; }

/* Care (care.js): a student who says they want to hurt themselves. Calm and plain, monochrome,
   the same in the chat, the voice screen and the Labs panel (it takes their text colour). */
.care { display: grid; gap: 10px; max-width: 34rem; line-height: 1.5; }
.care p { margin: 0; }
.care-open { font-weight: 600; }
.care-line { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
.care-name { font-size: .92em; }
.care-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.care-num { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; min-width: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; text-decoration: none; }
.care-num small { font-size: .74em; opacity: .75; }
.care-num span { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.care-num:hover, .care-num:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.care-num:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.vc-care { max-width: 34rem; margin: 6px auto 0; padding: 0 16px; text-align: left; color: var(--text); }
.vc-care[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .care-num { transition: none; } }

/* ---------- First run: Welcome, Intro, Sign in and four questions ----------
   Minimal and centred, a step at a time, in Cassie's colours. Phones: the whole screen; computers:
   a centred glass card about 440px wide. --fr-h is the height above the keyboard, --fr-kb the
   keyboard's (app.js): the screen itself always covers everything. */
.fr, .auth-page {
  background:
    radial-gradient(60% 45% at 18% 12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(55% 45% at 88% 92%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 70%),
    var(--bg);
}
.fr { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain; color: var(--text);
  padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 12px + var(--fr-kb, 0px)); }
/* (the page behind a full-screen first-run or sign-in page never scrolls) */
html.fr-open, html.fr-open body { overflow: hidden; overscroll-behavior: none; }
.fr-bot { width: 120px; height: 120px; }
.fr-bot .cassie-bot { width: 100%; height: 100%; display: block; }
/* 1. Welcome */
.fr-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; animation: frIn .5s ease both; }
.fr-name { margin: 10px 0 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.fr-line { margin: 0; color: var(--muted); font-size: 1.05rem; }
.fr-load { display: inline-flex; gap: 6px; margin-top: 22px; }
.fr-load i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); opacity: .3; animation: frDot 1.1s ease-in-out infinite; }
.fr-load i:nth-child(2) { animation-delay: .15s; } .fr-load i:nth-child(3) { animation-delay: .3s; }
@keyframes frDot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes frIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 2. Intro: one illustrated card */
.fr-intro { position: relative; width: min(440px, 100%); height: min(780px, calc(var(--fr-h, 100dvh) - 24px - var(--safe-top) - var(--safe-bottom))); min-height: 520px;
  display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; animation: frIn .45s ease both;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, var(--surface)) 0%, color-mix(in srgb, var(--secondary) 12%, var(--surface)) 62%, var(--surface) 100%);
  box-shadow: var(--lg-edge), var(--lg-lift); border: 1px solid var(--lg-line); }
.fr-art { position: relative; flex: 1; min-height: 220px; display: grid; place-items: center; }
.fr-scene { position: absolute; inset: auto 0 0 0; width: 100%; height: 72%; }
.fr-hill1 { fill: color-mix(in srgb, var(--secondary) 38%, var(--surface)); }
.fr-hill2 { fill: color-mix(in srgb, var(--secondary) 62%, var(--surface)); }
.fr-books rect:nth-child(1) { fill: var(--primary); } .fr-books rect:nth-child(2) { fill: color-mix(in srgb, var(--primary) 55%, var(--surface)); } .fr-books rect:nth-child(3) { fill: var(--secondary); }
.fr-pencil { fill: color-mix(in srgb, var(--warning) 70%, var(--surface)); }
.fr-art::before { content: ""; position: absolute; left: 50%; top: 38%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 26%, transparent); } /* a soft sun behind Cassie */
.fr-art .fr-bot { position: relative; width: 168px; height: 168px; margin-bottom: 18%; filter: drop-shadow(0 18px 24px rgba(var(--ink-rgb), .18)); }
/* Cassie in 3D (cassie-3d.js): a bigger box than the flat one, so she has room to float, hop and lean
   (her own soft shadow is drawn on the ground) */
.fr-art .fr-bot[data-mascot="3d"] { width: 220px; height: 220px; margin-bottom: 12%; filter: none; }
.fr-bot .cassie-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; animation: frIn .4s ease both; }
.fr-copy { padding: 22px 24px 26px; text-align: center; background: var(--surface); }
.fr-copy h1 { margin: 0 0 8px; font-size: 1.85rem; line-height: 1.12; letter-spacing: -.03em; }
.fr-copy p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
/* the one big button on every screen */
.fr-go { width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: var(--primary); color: var(--on-primary); font: inherit; font-size: 1.02rem; font-weight: 750; cursor: pointer; }
.fr-go:active { background: var(--primary-dark); }
/* 4. The questions */
.fr-ob { width: min(440px, 100%); min-height: min(640px, calc(var(--fr-h, 100dvh) - 24px - var(--safe-top) - var(--safe-bottom))); display: flex; flex-direction: column; gap: 16px; animation: frIn .35s ease both; }
.fr-top { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 8px; }
.fr-back, .fr-skip { min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 650; cursor: pointer; padding: 0 4px; }
.fr-back { justify-self: start; } .fr-skip { justify-self: end; grid-column: 3; color: var(--muted); }
.fr-back[hidden] { display: block; visibility: hidden; }
.fr-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fr-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.fr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); transition: width .3s ease; }
.fr-count { font-size: .8rem; color: var(--muted); font-weight: 650; }
.fr-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 14px; text-align: center; }
.fr-h { margin: 0; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.03em; }
.fr-sub { margin: -6px 0 0; color: var(--muted); }
.fr-big { width: 100%; border: 0; border-bottom: 2px solid var(--border); background: transparent; color: var(--primary-ink); font: inherit; font-size: 2rem; font-weight: 800; text-align: center; padding: 8px 4px; border-radius: 0; }
.fr-big:focus, .fr-big:focus-visible { outline: none; border-bottom-color: var(--primary); }
.fr-big::placeholder { color: var(--muted); font-weight: 700; }
.fr-select { font-size: 1.1rem; font-weight: 650; border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; min-height: 52px; background: var(--surface); color: var(--text); text-align: left; }
.fr-select:focus { border-color: var(--primary); }
.fr-q2 { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: .9rem; font-weight: 650; color: var(--muted); margin-top: 6px; }
.fr-age { width: 140px; min-height: 48px; text-align: center; font: inherit; font-size: 1.1rem; font-weight: 650; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.fr-age:focus { outline: none; border-color: var(--primary); }
.fr-seg, .fr-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fr-seg button, .fr-pick { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.fr-pick { min-height: 52px; padding: 0 20px; font-size: 1.02rem; }
.fr-seg button[aria-checked="true"], .fr-pick[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fr-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fr-voice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; border-radius: 20px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.fr-voice[aria-checked="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-ink); }
.fr-wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; }
.fr-wave i { width: 4px; border-radius: 4px; background: currentColor; height: 40%; }
.fr-wave i:nth-child(2) { height: 75%; } .fr-wave i:nth-child(3) { height: 100%; } .fr-wave i:nth-child(4) { height: 65%; } .fr-wave i:nth-child(5) { height: 35%; }
.fr-err { margin: 0; color: var(--danger); font-weight: 650; font-size: .92rem; }
.fr-err[hidden] { display: none; }
.fr :focus-visible:not(.fr-big) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* computers and tablets: the steps sit in a centred glass card */
@media (min-width: 600px) {
  .fr-ob { padding: 22px 26px 26px; border-radius: 28px; background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge), var(--lg-lift);
    -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); min-height: 600px; }
}
@media (prefers-reduced-motion: reduce) { .fr-welcome, .fr-intro, .fr-ob { animation: none; } .fr-load i { animation: none; opacity: .7; } .fr-bar i { transition: none; } }

/* 3. Sign in, in the same look: one centred column (Google and Apple first), a glass card on a computer */
.auth-page { grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px); }
.auth-right { display: none !important; }
.auth-left { flex-direction: column; justify-content: center; gap: 14px; padding: 0; min-height: 0; width: min(440px, 100%); }
.auth-brand { position: static; justify-content: center; font-size: 1.2rem; }
.auth-form { width: 100%; }
.auth-go { border-radius: 16px; min-height: 52px; }
@media (min-width: 600px) {
  .auth-form { padding: 28px 26px; border-radius: 28px; background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge), var(--lg-lift);
    -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
}

/* ---------- You, Settings and Plans: one panel, a page at a time ----------
   Grouped glass lists (like iOS Settings): a section title, then rows in one rounded card. */
.settings-card { max-width: 640px; padding-top: 12px; }
.set-head { position: sticky; top: -12px; z-index: 2; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin: -12px -20px 10px; padding: 12px 16px 10px;
  background: var(--lg-fill-thick); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-bottom: 1px solid var(--lg-line); }
.set-head h2 { margin: 0; text-align: center; font-size: 1.15rem; grid-column: 2; }
.set-back, .set-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.set-back { grid-column: 1; } .set-x { grid-column: 3; }
.set-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.set-back[hidden] { display: grid; visibility: hidden; }
.set-back:hover, .set-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.set-sec { margin: 0 0 18px; }
.set-sec[hidden], .set-row[hidden], .set-secs[hidden], [data-page-only][hidden] { display: none !important; }
.settings-card:not([data-page="all"]) .set-sec-h { display: none; }
.set-sec-h { margin: 0 4px 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.set-group { border-radius: 18px; background: var(--surface); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); padding: 2px 16px; margin: 0 0 14px; }
.set-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.set-group > :last-child { border-bottom: 0; }
.set-row .field { margin-bottom: 0; }
.set-row .field-hint { margin: 8px 0 0; }
.set-row .field-hint:empty { display: none; }
.set-group > details.settings-group { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; background: transparent; }
.set-group > details.settings-group:last-child { border-bottom: 0; }
.set-group > details.settings-group > summary { padding: 14px 0; }
.set-group > details.settings-group > summary::after { right: 4px; }
.set-group > details .sg-body, .set-group > details .phone-help { padding: 0 0 12px; border-top: 0; }
.set-row .btn, .set-row .new-chat-btn { width: 100%; }
.set-legal { margin: 0 !important; }
.set-legal { display: flex; gap: 6px; align-items: center; }
.set-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--primary-ink); font-weight: 600; }
.set-search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 16px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.set-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.set-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.set-search:focus-within { border-color: var(--primary); }
.set-none { margin: 0 4px 16px; color: var(--muted); }
.set-none[hidden] { display: none; }
/* You */
.set-me { display: flex; align-items: center; gap: 14px; margin: 4px 2px 16px; }
.set-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 1.7rem; font-weight: 800; }
.set-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-who b { font-size: 1.3rem; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-who small { color: var(--muted); font-size: .88rem; }
.set-edit { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.set-edit:hover { border-color: var(--primary); }
.set-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.set-stats > div { border-radius: 16px; padding: 12px 8px; text-align: center; background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); }
.set-stats b { display: block; font-size: 1.45rem; letter-spacing: -.02em; color: var(--primary-ink); }
.set-stats small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; line-height: 1.25; }
.set-links { padding: 0 6px; }
.set-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.set-links > .set-link:last-child { border-bottom: 0; }
.set-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary-ink); }
.set-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-lt b { font-size: .98rem; font-weight: 650; }
.set-lt small { color: var(--muted); font-size: .8rem; }
.set-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.set-link:hover .set-chev { stroke: var(--text); }
/* Plans */
.set-plans-sub { margin: 0 2px 14px; color: var(--muted); }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
@media (max-width: 480px) { .plan-grid { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--lg-edge); }
.plan-plus { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.plan h3 { margin: 0; font-size: 1.15rem; }
.plan-price { margin: 0; color: var(--muted); }
.plan-price b { color: var(--text); font-size: 1.6rem; letter-spacing: -.02em; }
.plan-pass { align-self: flex-start; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--text); color: var(--text); font-size: .76rem; font-weight: 750; }
.plan-under { margin: 0; color: var(--text); font-size: .84rem; line-height: 1.4; }
.plan ul { margin: 6px 0 12px; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.35; flex: 1; }
.plan-badge { position: absolute; top: -11px; right: 14px; padding: 3px 10px; border-radius: 99px; background: var(--primary); color: var(--on-primary); font-size: .74rem; font-weight: 750; }
.plan-go, .plan-now { display: grid; place-items: center; min-height: 48px; border-radius: 14px; font-weight: 750; text-decoration: none; }
.plan-go { background: var(--primary); color: var(--on-primary); }
.plan-go:active { background: var(--primary-dark); }
.plan-now { border: 1px solid var(--border); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .set-link, .set-edit { transition: none; } }

/* ---------- Home: the hub ----------
   New: Cassie large, a hello, two glass cards and Start studying. Back again: Today, Continue and
   Quick actions. Phones: the Home tab; computers: an empty chat, centred, at most 960px wide. */
#chat-log > .home.home-hub { display: block; flex: none; width: 100%; max-width: 960px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 24px; min-height: 0; } /* (flex: none: in the chat column it never shrinks under its own content, so the last button scrolls clear of the chips over the chat box) */
.hub { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.hub button { font: inherit; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hub svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hub-bot { width: 168px; height: 168px; margin: 8px auto 0; filter: drop-shadow(0 16px 22px rgba(var(--ink-rgb), .16)); }
.hub-bot .cassie-bot { width: 100%; height: 100%; display: block; }
.hub-empty { align-items: center; text-align: center; max-width: 520px; margin: 0 auto; }
.hub-hi { margin: 0; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.03em; }
.hub-hi small { display: block; margin-top: 4px; font-size: 1.15rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.hub-name { color: var(--primary-ink); }
.hub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 10px; }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 140px; padding: 16px; border-radius: 22px; text-align: left;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 45%, transparent); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .04); }
.hub-card i, .hub-w i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary-ink); }
.hub-card i svg, .hub-w i svg { width: 22px; height: 22px; }
.hub-card b { margin-top: auto; font-size: 1.05rem; }
.hub-card small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.hub-go { width: 100%; min-height: 54px; margin-top: 4px; border: 0; border-radius: 18px; background: var(--primary); color: var(--on-primary) !important; font-size: 1.05rem !important; font-weight: 750; }
.hub-go:active { background: var(--primary-dark); }
.hub .home-ideas { align-self: center; }
.hub-ask { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; text-align: left;
  background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); }
.hub-ask svg { width: 21px; height: 21px; color: var(--muted); flex: none; }
.hub-ask span { color: var(--muted); font-size: 1rem; }
.hub-h { margin: 14px 2px 0; font-size: 1.15rem; letter-spacing: -.01em; }
/* Today: a sideways row of glass chips (scrolls on a phone) */
.hub-today { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hub-today::-webkit-scrollbar { display: none; }
.hub-w { flex: 0 0 auto; display: grid; grid-template-columns: 42px auto; column-gap: 10px; align-items: center; align-content: center; min-width: 172px; min-height: 76px; padding: 10px 16px 10px 10px; border-radius: 22px; text-align: left; scroll-snap-align: start;
  background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); }
.hub-w i { grid-row: 1 / span 3; }
.hub-w b { grid-column: 2; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; }
.hub-w span { grid-column: 2; color: var(--muted); font-size: .82rem; line-height: 1.2; }
.hub-w em { grid-column: 2; font-style: normal; font-weight: 650; font-size: .82rem; color: var(--primary-ink); }
@media (min-width: 761px) { .hub-w { flex: 1 0 172px; } }
.hub-recent { display: grid; gap: 8px; }
.hub-chat { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 18px; text-align: left; background: var(--surface); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); }
.hub-chat i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--bg); }
.hub-chat i svg { width: 19px; height: 19px; }
.hub-chat > span { flex: 1; min-width: 0; }
.hub-chat b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.hub-chat small { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; }
.hub-chev { width: 18px; height: 18px; flex: none; color: var(--muted); }
.hub-none { margin: 0; color: var(--text); }
/* Home: exam plans and your week (monochrome; every control at least 44px) */
.hub-exam, .hub-week { display: flex; flex-direction: column; gap: 10px; }
.ex-plan, .wk-card { padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); color: var(--text); }
.ex-head b { display: block; font-size: 1.05rem; line-height: 1.25; }
.ex-head small, .wk-dates { display: block; margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.ex-tasks { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-tasks li { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.ex-tasks li.ex-rest { color: var(--text); font-size: .9rem; }
.ex-check { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; cursor: pointer; }
.ex-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ex-tick { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--text); background: var(--surface); }
.ex-check input:checked + .ex-tick { background: var(--text); box-shadow: inset 0 0 0 4px var(--surface); }
.ex-check input:focus-visible + .ex-tick { outline: 2px solid var(--text); outline-offset: 3px; }
.ex-task { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--lg-line); background: var(--bg); color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer; }
.ex-tasks li.done .ex-task { text-decoration: line-through; color: var(--muted); }
.ex-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ex-actions button, .wk-share, .ex-chip, .ex-file-btn, .ex-again { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--lg-line); background: var(--lg-fill); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.ex-days { margin: 10px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.ex-days b { margin-right: 6px; }
.ex-sum { margin: 8px 0 0; font-size: .92rem; line-height: 1.45; }
.ex-full { margin: 0; color: var(--text); font-size: .9rem; }
.wk-rows { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (min-width: 761px) { .wk-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-rows li { display: flex; flex-direction: column; min-width: 0; }
.wk-rows b { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.wk-rows span { font-size: .84rem; line-height: 1.3; }
.wk-rows small { color: var(--muted); font-size: .78rem; }
.ex-form { max-height: calc(100dvh - 32px); overflow-y: auto; }
.ex-field { color: var(--text); }
.ex-field input, .ex-field textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.ex-field textarea { resize: vertical; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.ex-chip[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: transparent; }
.ex-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ex-file-name { color: var(--muted); font-size: .82rem; }
.ex-status { margin: 0 0 12px; font-size: .88rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-status:empty { display: none; }
.ex-make:disabled { opacity: .6; cursor: default; }
.hub-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hub-q { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 16px; text-align: left; background: var(--surface); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); font-size: .9rem !important; font-weight: 600; }
.hub-q svg { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; color: var(--primary-ink); }
.hub button:active { transform: scale(.98); }
.hub button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hub button:active { transform: none; } }
.home-hub > .hub { width: 100%; flex: 1 1 100%; }
.home-hub > .hub-empty { max-width: none; }
.home-hub > .hub-empty > :not(.hub-hero):not(.hub-remind):not(.hub-boxes) { max-width: 520px; }
/* (a computer's empty chat has the chat box below: the new hub stays compact so all of it shows) */
.home-hub .hub-empty .hub-bot { width: 112px; height: 112px; margin-top: 0; }
.home-hub .hub-empty .hub-card { min-height: 112px; }
.home-hub .hub-empty .hub-hi { font-size: 1.7rem; }

/* Home's cards and header are content, so they are solid (Apple: Liquid Glass is only for the
   controls that float above content: the tab bar, the top bar, the sidebar and the ask box). */
/* ---------- Home: the header ----------
   A glass bar: your initial, the hello and your name, and the bell. Phones: edge to edge under the
   status bar, rounded at the bottom; computers: a rounded bar at the top of the column. */
.hub-hero { flex: none; width: 100%; padding: 12px; border-radius: 24px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 45%, transparent); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .04); }
/* the hello and the bell */
.hub-top { display: flex; align-items: center; gap: 10px; }
.hub-av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 750; font-size: 1.15rem;
  border: 2px solid var(--surface); box-shadow: var(--lg-lift); }
.hub-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; padding: 2px 4px; text-align: left; }
.hub-who small { color: var(--text); font-size: .8rem; font-weight: 600; opacity: .85; }
.hub-me { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.hub .hub-bell { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 1px solid var(--lg-line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge), var(--lg-lift); }
.hub-bell svg { width: 22px; height: 22px; }
.hub-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }
.hub-remind { display: none; gap: 8px; width: 100%; }
.hub-remind.open { display: grid; }
.hub-remind .hub-h { margin-top: 2px; }
/* phones: edge to edge, under the status bar */
@media (max-width: 760px) {
  html.native .hub-hero { width: calc(100% + 40px); margin: calc(-20px - var(--safe-top)) -20px 4px; padding: calc(12px + var(--safe-top)) 20px 14px; border-radius: 0 0 24px 24px; border-top: 0; }
}

/* Home's big boxes: every study feature under the header (2 across on a phone, 4 on a computer) */
.hub-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
@media (min-width: 761px) { .hub-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub .hub-box { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 104px; padding: 14px; border-radius: 22px; text-align: left;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 45%, transparent); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .04); }
.hub-box i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 13px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary-ink); }
.hub-box i svg { width: 21px; height: 21px; }
.hub-box b { margin-top: 2px; font-size: 1rem; line-height: 1.2; }
.hub-box small { color: var(--muted); font-size: .8rem; line-height: 1.3; }

/* ---------- Home on a phone: a peek inside the labs, and Today's Lab ----------
   (computers keep their own Home: these only show in the phone's Home tab) */
.hub-hero.hub-hero-phone { position: relative; height: 196px; padding: 0; overflow: hidden; isolation: isolate; }
.hub-strip { position: absolute; inset: auto 0 14px 0; overflow: hidden; pointer-events: none; }
.hub-strip-run { display: flex; gap: 10px; width: max-content; animation: hubStrip 70s linear infinite; }
.hub-tile { flex: none; display: block; width: 116px; height: 92px; border-radius: 18px; background: var(--surface); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge); }
@keyframes hubStrip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.lite .hub-strip-run { animation: none; }
@media (prefers-reduced-motion: reduce) { .hub-strip-run { animation: none; } }
.hub-hero-phone .hub-top { position: relative; z-index: 1; padding: 14px 14px 0; }
.hub-hero-phone .hub-who { padding: 4px 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.hub-hero-phone .hub-me { font-size: 1.35rem; letter-spacing: -.03em; }
html.native .hub-hero.hub-hero-phone { height: calc(196px + var(--safe-top)); padding: 0; }
html.native .hub-hero-phone .hub-top { padding: calc(12px + var(--safe-top)) 20px 0; }
.hub-tlab { position: relative; width: 100%; border-radius: 26px; overflow: hidden;
  background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge), var(--lg-lift); }
.hub-tlab-pv { display: block; width: 100%; height: 150px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.hub-tlab-info { display: flex; flex-direction: column; gap: 2px; padding: 12px 82px 14px 16px; text-align: left; border-top: 1px solid var(--lg-line); }
.hub-tlab-tag { position: absolute; top: 12px; left: 12px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 700; }
.hub-tlab-info b { font-size: 1.08rem; line-height: 1.2; }
.hub-tlab-info small { color: var(--muted); font-size: .82rem; }
.hub .hub-tlab-go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--lg-lift); }
.hub .hub-tlab-go svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }

/* ---------- Labs on a phone: the Labs tab ----------
   (labs/labs.js, only under 760px: a computer keeps the Labs shelf) Today's Lab, then For you
   (Learn, Study tools), each with a live mini preview; the lists have a preview on every row. */
.labs.lp-on { background: var(--bg); color: var(--text); }
.labs.lp-on .labs-shelf > :not(.lp) { display: none; }
.labs.lp-on button:focus-visible, .labs.lp-on input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lp { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(14px + var(--safe-top)) 20px calc(110px + var(--safe-bottom)); }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-head h2 { margin: 0; font-size: 1.9rem; letter-spacing: -.03em; }
.labs .lp-find { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--lg-line); background: var(--lg-fill-thick); color: var(--text); box-shadow: var(--lg-edge); cursor: pointer; }
.lp-find svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lp-find[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.lp-q { width: 100%; margin-top: 12px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lg-line); background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; }
.lp-q::placeholder { color: var(--muted); }
.lp-chips { display: flex; gap: 8px; margin: 14px -20px 4px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.lp-chips::-webkit-scrollbar { display: none; }
.labs .lp-chips button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lg-line); background: var(--lg-fill-thick); color: var(--text); font-weight: 650; font-size: .92rem; cursor: pointer; }
.labs .lp-chips button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.lp-h { margin: 18px 2px 10px; font-size: 1.15rem; letter-spacing: -.01em; }
.lp-card { position: relative; border-radius: 26px; overflow: hidden; background: var(--lg-fill-thick); border: 1px solid var(--lg-line); box-shadow: var(--lg-edge), var(--lg-lift); }
.lp-pv { display: block; width: 100%; height: 100%; }
.lp-big { height: 176px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.lp-tag { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .74rem; font-weight: 700; }
.lp-peek { position: absolute; top: 10px; right: 12px; width: 30px; height: 34px; transform: rotate(-12deg); filter: drop-shadow(0 4px 6px rgba(var(--ink-rgb), .25)); }
.lp-info { display: flex; flex-direction: column; gap: 2px; padding: 12px 84px 14px 16px; border-top: 1px solid var(--lg-line); }
.lp-info b { font-size: 1.1rem; }
.lp-info small, .lp-for small, .lp-row small { color: var(--muted); font-size: .84rem; }
.labs .lp-play { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: var(--lg-lift); cursor: pointer; }
.lp-play svg { width: 22px; height: 22px; fill: currentColor; }
.labs .lp-for, .labs .lp-row { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 10px; padding: 10px 14px 10px 10px; border-radius: 22px; text-align: left;
  border: 1px solid var(--lg-line); background: var(--lg-fill-thick); box-shadow: var(--lg-edge); color: var(--text); cursor: pointer; }
.lp-for > canvas { flex: none; width: 108px; height: 80px; border-radius: 16px; background: var(--surface); }
.lp-for > span, .lp-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-for b { font-size: 1.12rem; }
.lp-for i, .lp-row i { font-style: normal; font-size: 1.5rem; color: var(--muted); }
.lp-list-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.lp-list-head h3 { margin: 0; font-size: 1.3rem; }
.labs .lp-back { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--lg-line); background: var(--lg-fill-thick); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lp-thumb { flex: none; display: grid; place-items: center; width: 72px; height: 56px; border-radius: 14px; background: var(--surface); color: var(--primary-ink); overflow: hidden; }
.lp-thumb svg { width: 30px; height: 30px; }
.lp-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
/* the profile's name and age, and Settings' key boxes and model menu: 44px to touch */
@media (pointer: coarse) {
  .pf-field input, .pf-field select, .field input[type="password"], .field input[type="text"], .field select { min-height: var(--tap); box-sizing: border-box; }
}

/* ---------- the tour (tour.js): Cassie's cursor and a soft ring on the real control, a card that never covers it ---------- */
html.touring #cassie-cursor.detour { display: block !important; z-index: 2147483620; transition: transform .6s cubic-bezier(.34, 1.2, .4, 1); }
html.touring #cassie-cursor svg { width: 26px; height: 26px; }
.tour-veil { position: fixed; inset: 0; z-index: 2147483600; background: transparent; }
.tour-ring { position: fixed; z-index: 2147483610; pointer-events: none; border-radius: 14px; border: 2px solid var(--text); box-shadow: 0 0 0 6px rgba(var(--shade-rgb), .14); transition: left .4s ease, top .4s ease, width .4s ease, height .4s ease; }
.tour-ring[hidden] { display: none; }
.tour-card, .tour-offer { position: fixed; z-index: 2147483630; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); box-sizing: border-box; padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--lg-fill-thick, var(--surface)); border: 1px solid var(--lg-line, var(--border)); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-edge), var(--lg-lift); color: var(--text); }
.tour-card { bottom: calc(var(--safe-bottom, 0px) + 16px); } /* (tour.js sets its top so it never covers the control) */
.tour-card[style*="top"] { bottom: auto; }
html.native .tour-card:not([style*="top"]), html.native .tour-offer { bottom: calc(var(--safe-bottom, 0px) + 84px); } /* (above the tab bar) */
.tour-offer { bottom: calc(var(--safe-bottom, 0px) + 16px); }
.tour-card p, .tour-offer p { margin: 0 0 var(--sp-3); line-height: 1.45; overflow-wrap: anywhere; }
.tour-count { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.tour-say { font-size: var(--fs-md, 1rem); }
.tour-vnote { font-size: var(--fs-sm); }
.tour-vnote[hidden] { display: none; }
.tour-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-row + .tour-row { margin-top: 8px; }
.tour-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.tour-btn.tour-main { background: var(--text); color: var(--bg); border-color: var(--text); }
.tour-btn:disabled { opacity: .45; cursor: default; }
.tour-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a.tour-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
/* after the tour, on a computer: how the Chrome extension works */
.tour-video-wrap { position: fixed; inset: 0; z-index: 2147483640; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(var(--shade-rgb), .45); }
.tour-video { width: min(720px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--lg-lift); color: var(--text); }
.tour-video h2 { margin: 0 0 var(--sp-3); font-size: 1.15rem; }
.tour-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md, 10px); background: var(--black); }
.tour-video p { margin: var(--sp-3) 0; line-height: 1.45; }
html.native #ext-video-row { display: none; } /* (the extension is for Chrome and Edge on a computer) */