/* ══════════════════════════════════════════════════════════════════
   mIself v2 — design language (V2_REBUILD_SPEC.md §2–§3, boards 33–38).
   Everything is scoped under .v2 so no legacy page can be affected.
   Typography and neutrals follow Microsoft Fluent 2 (Segoe UI Variable,
   Fluent type ramp, #242424 / #616161 / #e0e0e0 on #f5f5f5) — Massimo,
   2026-10-04. The accent stays mIself lilac. Load-bearing rules: one
   font family; zero gradients and emoji; the only shadow is the
   composer's (Fluent prompt box); buttons are radius-12; filled buttons
   are pastel; the mirror's voice never gets a bubble.
   ══════════════════════════════════════════════════════════════════ */

.v2 {
  /* Fluent 2 neutrals */
  --bg: #f5f5f5;
  --bg-side: #fafafa;          /* surface-subtle: web sidebar */
  --bg-side-active: #ebebeb;   /* active row on the web sidebar */
  --ink: #242424;
  --ink-secondary: #424242;
  --muted: #616161;
  --faint: #707070;
  --hairline: #e0e0e0;
  --hairline-inner: #ebebeb;
  --input-border: #d1d1d1;
  --surface: #ffffff;
  --user-bubble: #ebebeb;
  --icon-well: #f5f5f5;        /* neutral icon circles in sheets */
  --lilac-wash: #e6e1f5;       /* account circle (board 38), orb highlight */
  --accent: #6d5eac;
  --accent-dark: #584a92;
  --accent-wash: #f0edf8;
  --pastel: #d9d2ef;
  --pastel-ink: #4f4380;
  --coral: #b4552e;
  --green: #1d9e75;

  --font-ui: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-voice: var(--font-ui);   /* one family: the mirror is set apart by layout, not typeface */

  /* Fluent radii: sm 8 · md 12 · lg 16 · xl 24 */
  --r-btn: 12px;
  --r-btn-tiny: 8px;
  --r-composer: 20px;
  --r-card: 16px;
  --r-row: 12px;
  --r-sheet: 24px;
}

/* ── Base ─────────────────────────────────────────────────────── */
body.v2 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 a { color: inherit; text-decoration: none; }
.v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── App frame ────────────────────────────────────────────────── */
.v2-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── Top bar (floating controls) ──────────────────────────────── */
.v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 2px 0 2px;
  padding-top: max(22px, env(safe-area-inset-top));
  flex-shrink: 0;
}
.v2-top-group { display: flex; align-items: center; gap: 10px; }
.v2-top-title {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0; text-align: center;
}
/* Chrome that belongs to one state only (board 33 vs board 36). */
.v2-app[data-state="home"] .v2-convo-only,
.v2-app[data-state="conversation"] .v2-home-only { display: none; }
.v2-top-title-main {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.v2-top-title-sub { font-size: 12px; line-height: 16px; color: var(--muted); }
.v2 .v2-web-only { display: none; }

/* ── Buttons ──────────────────────────────────────────────────── */
/* Gentle controls (Massimo, 2026-10-04): Fluent sizes — 32–36px, icon
   buttons borderless with a soft hover instead of white boxes. */
.v2-icon-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn-tiny);
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background-color 120ms ease;
}
.v2-icon-btn:hover { background: rgba(0, 0, 0, 0.05); }
.v2-icon-btn-bare { width: 36px; height: 36px; }
.v2-icon-btn:disabled { cursor: default; }
.v2-btn {
  height: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px;
  border-radius: var(--r-btn-tiny);
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.v2-btn-ghost { border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); }
.v2-btn-ghost:hover { background: var(--bg); }
.v2-btn-pastel { border: none; background: var(--pastel); color: var(--pastel-ink); font-weight: 500; }
.v2 .v2-premium { color: var(--accent); }

/* ── Scroll area ──────────────────────────────────────────────── */
.v2-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Home (board 33): orb + serif greeting, ~70% empty. */
.v2-home {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 0 16px;
}
.v2-orb { display: block; }
.v2-home-text { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.v2-display {
  margin: 0;
  font-family: var(--font-voice);
  font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.5px;
}
.v2-home-sub {
  margin: 0;
  font-size: 14px; line-height: 1.65; color: var(--muted);
  max-width: 300px;
}
.v2-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v2-pill { height: 32px; padding: 0 14px; font-size: 13px; }
.v2-app[data-state="conversation"] .v2-home { display: none; }

/* Conversation (board 36): bottom-anchored thread. */
.v2-thread {
  display: none;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 20px 2px 18px 2px;
}
.v2-app[data-state="conversation"] .v2-thread { display: flex; }

.v2-day {
  align-self: center;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
}
.v2-user {
  align-self: flex-end;
  max-width: 320px;   /* board: 286px text + 2×17px padding (boards size the text box) */
  background: var(--user-bubble);
  border-radius: 22px 22px 6px 22px;
  padding: 13px 17px;
  font-size: 14px; line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.v2-mirror {
  align-self: flex-start;
  max-width: 328px;   /* board: 320px text + 2×4px padding */
  padding: 0 4px;
  font-family: var(--font-voice);
  font-size: 16px; line-height: 24px;
  overflow-wrap: anywhere;
}
.v2-mirror p { margin: 0 0 0.65em; }
.v2-mirror p:last-child { margin-bottom: 0; }
.v2-mirror ul, .v2-mirror ol { margin: 0 0 0.65em; padding-left: 1.2em; }
.v2-mirror li { margin: 0.2em 0; }
.v2-mirror strong { font-weight: 600; }
.v2-mirror code {
  font-family: var(--font-ui); font-size: 0.875em;
  background: var(--user-bubble); border-radius: 6px; padding: 1px 5px;
}
.v2-note {
  align-self: flex-start;
  padding: 0 4px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.v2-note a { color: var(--accent); font-weight: 600; }

/* Waiting for the first words: three quiet dots, no glow. */
.v2-dots { display: inline-flex; gap: 6px; padding: 10px 0; }
.v2-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint);
  animation: v2-dot 1.2s infinite ease-in-out;
}
.v2-dots span:nth-child(2) { animation-delay: 0.15s; }
.v2-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes v2-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2-dots span { animation: none; opacity: 0.6; } }

/* ── Composer (54px min) ──────────────────────────────── */
.v2-composer-wrap {
  flex-shrink: 0;
  padding: 0 2px 26px 2px;
  padding-bottom: max(26px, calc(env(safe-area-inset-bottom) + 12px));
}
.v2-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px 8px 8px; /* 36px controls + 16px + 2px border */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-composer);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 12px 40px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.v2-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none; outline: none; resize: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 20px;
  color: var(--ink);
  padding: 8px 0;
  height: 36px;
  max-height: 140px;
  overflow-y: auto;
}
.v2-input::placeholder { color: var(--faint); }
.v2-input:focus, .v2-input:focus-visible { outline: none; }
.v2-send {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--r-btn-tiny);
  background: var(--pastel);
  color: var(--pastel-ink);
  cursor: pointer;
  padding: 0;
}
.v2-send:disabled { opacity: 0.5; cursor: default; }
.v2-privacy { display: none; }

/* ── "+" menu (board 34) — a sheet over the dimmed conversation ── */
.v2-composer-wrap { position: relative; z-index: 15; }
.v2-plus-scrim {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(33, 29, 41, 0.07);
  display: none;
}
.v2-app[data-plus="open"] .v2-plus-scrim { display: block; }
.v2-app[data-plus="open"] .v2-top,
.v2-app[data-plus="open"] .v2-main { opacity: 0.45; }
.v2-plus-sheet {
  position: absolute;
  left: 2px; right: 2px;
  bottom: calc(100% + 26px);   /* board: 26px above the composer */
  display: flex; flex-direction: column;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
}
.v2-plus-sheet[hidden] { display: none; }
.v2-plus-row {
  display: flex; align-items: center; gap: 14px;
  border: none; background: transparent;
  padding: 13px 12px;
  border-radius: var(--r-btn);
  font-family: inherit; text-align: left; color: var(--ink);
  cursor: pointer;
}
.v2-plus-row:hover { background: var(--bg); }
.v2-plus-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: var(--icon-well);
  color: var(--ink);
}
.v2-plus-icon-accent { background: var(--accent-wash); color: var(--accent); }
.v2-plus-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-plus-label { font-size: 15px; font-weight: 500; }
.v2-plus-sub { font-size: 12.5px; color: var(--muted); }
.v2-plus-rule { height: 1px; background: var(--hairline-inner); margin: 4px 12px; }
.v2-app[data-plus="open"] .v2-plus-btn { background: var(--user-bubble); }
.v2-plus-btn svg { transition: transform 0.18s ease; }
.v2-app[data-plus="open"] .v2-plus-btn svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .v2-plus-btn svg { transition: none; } }

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

.v2-composer-note {
  margin: 0;
  padding: 0 6px 10px 6px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.v2-composer-note[hidden] { display: none; }
.v2-composer-note a { color: var(--accent); font-weight: 600; }

/* Pending attachments: one quiet row of chips above the composer. */
.v2-attachments {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 4px 10px 4px;
}
.v2-attachments[hidden] { display: none; }
.v2-att {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  height: 36px;
  padding: 0 6px 0 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  font-size: 12.5px; color: var(--ink);
}
.v2-att-thumb { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.v2-att-doc {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-well); color: var(--muted);
}
.v2-att-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.v2-att-name.is-pending { color: var(--faint); }
.v2-att-remove {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--muted);
  border-radius: var(--r-btn-tiny);
  cursor: pointer; padding: 0;
}
.v2-user-att {
  display: block;
  margin-top: 6px;
  font-size: 12px; color: var(--muted);
  white-space: normal;
}

/* Dictation: the mic turns pastel while listening — no glow. */
.v2-mic-btn[aria-pressed="true"] { background: var(--pastel); color: var(--pastel-ink); }
.v2-mic-btn[aria-pressed="true"] svg { animation: v2-listen 1.4s infinite ease-in-out; }
@keyframes v2-listen { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .v2-mic-btn[aria-pressed="true"] svg { animation: none; } }

/* ── Drawer (board 35) — slides in over the conversation on phones ── */
.v2-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 30;
  width: min(332px, calc(100vw - 58px));
  display: flex; flex-direction: column;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.24s ease, visibility 0s linear 0.24s;
}
.v2-shell[data-drawer="open"] .v2-drawer {
  transform: none;
  visibility: visible;
  transition: transform 0.24s ease, visibility 0s;
}
.v2-scrim {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(33, 29, 41, 0.07);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease;
}
.v2-shell[data-drawer="open"] .v2-scrim { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .v2-drawer, .v2-shell[data-drawer="open"] .v2-drawer, .v2-scrim { transition: none; }
}

.v2-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 2px 10px 2px;
  padding-top: max(20px, env(safe-area-inset-top));
  flex-shrink: 0;
}
.v2-logo { display: inline-flex; align-items: center; }
.v2-logo svg { display: block; }
.v2-drawer-head-actions { display: flex; align-items: center; gap: 8px; }
.v2-drawer-icon { width: 32px; height: 32px; }
.v2-drawer-web-only { display: none; }

.v2-drawer-search { padding: 2px 0 10px 0; flex-shrink: 0; }
.v2-drawer-search[hidden] { display: none; }
.v2-drawer-search-input {
  width: 100%; height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-btn-tiny);
  background: var(--surface);
  font: inherit; color: var(--ink);
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.v2-drawer-search-input::placeholder { color: var(--faint); }
/* Text fields don't change colour when focused (Massimo, 2026-10-04): the caret is the cue. */
.v2-drawer-search-input:focus, .v2-drawer-search-input:focus-visible { outline: none; border-color: var(--input-border); box-shadow: none; }

.v2-drawer-scroll {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px; padding: 0 4px;   /* room for focus rings */
}
.v2-drawer-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.v2-drawer-label-general { padding: 4px 8px 6px 8px; }
.v2-drawer-label-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 8px 8px 8px;
}
/* A bare glyph like the other icon buttons: no border or fill (a <button>
   would otherwise get the browser's box), the same soft hover. */
.v2-tiny-btn {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.v2-tiny-btn:hover, .v2-tiny-btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.v2-chat-rows { display: flex; flex-direction: column; }
.v2-chat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  border-radius: 13px;
}
.v2-chat-row.is-active { background: var(--user-bubble); }
.v2-chat-row-title {
  min-width: 0;
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-chat-row-date { font-size: 11px; color: var(--faint); flex-shrink: 0; }

/* Paths: a minimal list — icon tile + name, actions behind "…". */
.v2-drawer-hint { padding: 0 8px 8px 8px; font-size: 12px; line-height: 16px; color: var(--faint); }
.v2-path-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.v2-path-row {
  position: relative;
  display: flex; align-items: center;
  border-radius: var(--r-btn-tiny);
}
.v2-path-row:hover, .v2-path-row:focus-within, .v2-path-row.is-active { background: var(--user-bubble); }
.v2-path-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px;
}
.v2-path-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn-tiny);
  background: var(--accent-wash);
  color: var(--accent-dark);
  font-size: 13px; font-weight: 600;
}
.v2-path-text { min-width: 0; display: flex; flex-direction: column; }
.v2-path-name {
  min-width: 0;
  font-size: 14px; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-path-sub { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Maturation moment (board 36): the mirror speaks it; two pills; a faint line. */
.v2-offer { display: flex; flex-direction: column; gap: 14px; }
.v2-offer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.v2-offer-reassure { font-size: 12px; line-height: 16px; color: var(--faint); }
.v2-offer-caption { font-size: 12px; line-height: 16px; color: var(--muted); }

/* Path memory page (proposal 4) */
.v2-memory-text { margin: 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.v2-memory-meta { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.v2-memory-editor {
  width: 100%; min-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-btn-tiny);
  background: var(--surface);
  font: inherit; font-size: 14px; line-height: 22px; color: var(--ink);
  resize: vertical; outline: none;
}
.v2-memory-editor[hidden], .v2-memory-confirm[hidden] { display: none; }
.v2-memory-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-secondary); }
.v2-path-more {
  width: 30px; height: 30px; flex-shrink: 0;
  margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: var(--r-btn-tiny);
  color: var(--muted);
  cursor: pointer; padding: 0;
  opacity: 0;
}
.v2-path-row:hover .v2-path-more, .v2-path-row:focus-within .v2-path-more,
.v2-path-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .v2-path-more { opacity: 1; } }
.v2-path-more:hover { background: var(--hairline-inner); }
.v2-path-menu {
  position: absolute; z-index: 5;
  top: calc(100% + 2px); right: 4px;
  min-width: 180px;
  display: flex; flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
}
.v2-path-menu[hidden] { display: none; }
.v2-path-menu a {
  padding: 8px 10px;
  border-radius: var(--r-btn-tiny);
  font-size: 14px; color: var(--ink);
}
.v2-path-menu a:hover, .v2-path-menu a:focus-visible { background: var(--bg); }

.v2-drawer-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: transparent;
  padding: 6px;
  font-family: inherit; font-size: 12px; color: var(--muted);
  cursor: pointer;
}
.v2-drawer-more[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-group]:not(.is-expanded):not(.is-searching) .is-extra { display: none; }
.v2-drawer-empty {
  margin: 0; padding: 4px 8px 8px 8px;
  font-size: 12px; line-height: 1.55; color: var(--faint);
}
.v2-drawer-empty[hidden], .v2-drawer-scroll [hidden] { display: none; }

.v2 .v2-drawer-admin {
  margin-top: auto;
  padding: 14px 8px 4px 8px;
  font-size: 11px; color: var(--faint);
}

.v2-drawer-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 20px 0;
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px));
  flex-shrink: 0;
}
.v2-new-chat {
  flex: 1 1 auto;
  height: 36px;
  justify-content: center; gap: 8px;
  font-size: 14px;
}
.v2-drawer-settings { width: 36px; height: 36px; }

/* ── "Something new" (board 33 dot / board 35 dot / board 38 count) ── */
.v2-has-dot { position: relative; }
.v2-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
}
.v2-drawer-icon .v2-dot { top: 5px; right: 5px; width: 6px; height: 6px; }
.v2-draft-row-label { flex-grow: 1; }
.v2-count {
  min-width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--pastel); color: var(--pastel-ink);
  font-size: 11px; font-weight: 600;
}

/* ── A draft of you (board 37) ─────────────────────────────────── */
.v2-week-pill {
  height: 28px;
  display: inline-flex; align-items: center;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.v2-draft-main { display: block; }
.v2-draft-intro { padding: 26px 6px 18px 6px; }
.v2-draft-title {
  margin: 0;
  font-family: var(--font-voice);
  font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.5px;
}
.v2-draft-sub { margin: 0; padding-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.v2-draft-cards { display: flex; flex-direction: column; gap: 14px; padding: 0 2px 24px 2px; }

.v2-reading, .v2-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 16px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.v2-reading-head { display: flex; align-items: center; justify-content: space-between; }
.v2-reading-label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.v2-label-coral { color: var(--coral); }
.v2-label-accent { color: var(--accent); }
.v2-label-green { color: var(--green); }
.v2-reading-meta { font-size: 11.5px; color: var(--faint); }
.v2-reading-claim {
  margin: 0;
  font-family: var(--font-voice);
  font-size: 20px; line-height: 28px; font-weight: 600;
  overflow-wrap: anywhere;
}
.v2-receipts { display: flex; flex-direction: column; gap: 8px; }
.v2-receipt {
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-row);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.v2-receipt-ink { color: var(--ink); }
.v2-reading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-reading-actions[hidden] { display: none; }
.v2-verdict, .v2-talk-about {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-btn-tiny);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.v2-verdict { border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); }
.v2-verdict:hover { background: var(--bg); }
.v2-verdict-soft { color: var(--muted); }
.v2-talk-about {
  margin-left: auto;
  border: none; background: var(--accent-wash);
  color: var(--accent); font-weight: 600;
}
.v2-verdict:disabled, .v2-talk-about:disabled { opacity: 0.5; cursor: default; }
.v2-reading-state {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted);
}
.v2-reading-state[hidden] { display: none; }
.v2-reading.is-kept .v2-reading-state { color: var(--green); }
.v2-reading.is-struck .v2-reading-claim { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.v2-reading.is-struck .v2-receipts { display: none; }
.v2-undo {
  border: none; background: transparent; padding: 0;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.v2-kept { gap: 10px; padding: 20px; }

/* Board 37: phrases that keep coming back */
.v2-phrases { gap: 12px; padding: 20px; }
.v2-phrase-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-phrase-chip {
  border: 1px solid var(--hairline);
  background: var(--bg);
  border-radius: 16px;
  padding: 7px 13px;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink);
  cursor: pointer;
}
.v2-phrase-chip:hover { background: var(--surface); }
.v2-phrase-times { color: var(--faint); }
.v2-phrases-caption { padding: 0; }

/* Board 37: then vs now */
.v2-thennow { gap: 10px; padding: 20px; }
.v2-thennow-row { display: flex; align-items: center; gap: 12px; }
.v2-thennow-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-thennow-date { font-size: 12px; line-height: 16px; color: var(--faint); }
.v2-thennow-quote { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.v2-thennow-arrow { flex-shrink: 0; color: var(--faint); }
.v2-kept-row { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.v2-kept-text { font-size: 13.5px; line-height: 1.5; }
.v2-kept-meta { font-size: 12px; color: var(--faint); }
.v2-draft-note { margin: 0; padding: 0 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.v2-draft-empty { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.v2-draft-empty-title { margin: 0; padding: 0 6px; font-family: var(--font-voice); font-size: 24px; line-height: 32px; font-weight: 600; }

/* ── Landing (board 38's bar): same idiom, a single centred column ── */
.v2-landing { min-height: 100vh; display: flex; flex-direction: column; }
.v2-landing-top {
  width: min(100% - 32px, 1040px); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.v2-landing-nav { display: flex; align-items: center; gap: 8px; }
.v2-landing-main { flex: 1; width: min(100% - 32px, 1040px); margin: 0 auto; }
.v2-landing-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px;
  padding: 48px 0 56px 0;
}
.v2-landing-orb { display: block; }
.v2-landing-h1 { margin: 0; max-width: 720px; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.5px; }
.v2-landing-h2 { margin: 0 0 16px 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.v2-landing-h3 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.v2-landing-sub { margin: 0; max-width: 620px; font-size: 16px; line-height: 24px; color: var(--ink-secondary); }
.v2-landing-p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.v2-landing-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 6px; }
.v2-landing-btn { height: 40px; padding: 0 18px; }
.v2-landing-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.v2 .v2-landing-note a { color: var(--accent); font-weight: 600; }
.v2-landing-section { padding: 24px 0 32px 0; }
.v2-landing-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding-bottom: 12px; }
.v2-landing-card { gap: 8px; padding: 20px; }
.v2-landing-final { padding: 40px 0 56px 0; }
.v2-landing-final .v2-landing-h2 { margin: 0; }
.v2-landing-foot {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 24px 16px 32px 16px;
  font-size: 12px; color: var(--muted);
}
.v2-landing-foot a:hover { color: var(--ink); }
@media (min-width: 768px) {
  .v2-landing-hero { padding: 72px 0 72px 0; }
  .v2-landing-h1 { font-size: 40px; line-height: 48px; }
  .v2-landing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Web (board 38): centered 760px column, whitespace absorbs the rest ── */
@media (min-width: 768px) {
  /* Chat area = full width; the scroll container spans it, so the scrollbar
     sits at the window edge. Content and composer are 760px columns inside,
     and the composer floats over the bottom of the conversation. */
  .v2-app { position: relative; padding: 0; }
  .v2-top { width: min(100% - 48px, 760px); margin-inline: auto; padding: 22px 0 0 0; }
  .v2-main { overflow-x: hidden; scrollbar-gutter: stable both-edges; }   /* both edges keep the column centred under the composer */
  .v2-home, .v2-thread,
  .v2-draft-intro, .v2-draft-cards { width: min(100% - 48px, 760px); margin-inline: auto; }
  .v2-home { padding-bottom: 150px; }
  .v2-thread { gap: 22px; padding: 24px 0 170px 0; }   /* clears the floating composer */
  .v2-user { max-width: 478px; padding: 12px 16px; }   /* board 38: 440 + 2×19 */
  .v2-mirror { max-width: 528px; font-size: 16px; line-height: 24px; }   /* board 38: 520 + 2×4 */
  .v2-composer-wrap {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 24px;
    pointer-events: none;   /* the conversation and its scrollbar stay usable around it */
  }
  .v2-composer-wrap > :not(.v2-file-input):not(.v2-plus-sheet):not(.v2-latest) { width: min(100%, 760px); pointer-events: auto; }
  .v2-plus-sheet {
    left: max(24px, calc((100% - 760px) / 2)); right: auto;
    width: 420px;
    bottom: calc(100% + 6px);   /* 26px above the composer */
    pointer-events: auto;
  }
  .v2-privacy {
    display: block;
    margin: 0;
    padding-top: 10px;
    text-align: center;
    font-size: 11px; color: var(--faint);
  }
}

/* Web with room for both (board 38): the drawer becomes a permanent 288px
   sidebar on --bg-side; the conversation column centers in what remains. */
@media (min-width: 1024px) {
  .v2-shell { display: flex; height: 100vh; height: 100dvh; }
  .v2-app { flex: 1 1 auto; min-width: 0; height: auto; }
  .v2-menu-btn, .v2-top-draft, .v2-drawer-mobile-only, .v2-scrim { display: none; }

  /* Top bar (board 38): title left, Premium + account circle right. */
  .v2-top > .v2-top-group:first-child { display: none; }
  .v2-top-right { margin-left: auto; }
  .v2-top-title { align-items: flex-start; text-align: left; }
  .v2-top-title-main { font-size: 14.5px; }
  .v2 span.v2-web-only { display: inline; }
  .v2 .v2-premium-web { display: inline-flex; height: 32px; padding: 0 12px; font-size: 13px; }
  .v2 .v2-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: var(--lilac-wash);
    color: var(--accent-dark);
    font-size: 13px; font-weight: 600;
  }

  .v2-drawer,
  .v2-shell[data-drawer="open"] .v2-drawer {
    position: static;
    width: 288px; flex-shrink: 0;
    padding: 0 16px;
    background: var(--bg-side);
    transform: none;
    visibility: visible;
    transition: none;
  }
  .v2-drawer-head { padding: 22px 4px 6px 4px; }
  .v2-drawer-search { padding: 8px 0 0 0; }

  .v2-drawer-web-only { display: block; padding-top: 8px; flex-shrink: 0; }
  .v2-draft-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    border-radius: var(--r-btn);
    font-size: 14px; font-weight: 500;
  }
  .v2-draft-row:hover { background: var(--bg-side-active); }
  .v2-draft-row.is-active { background: var(--bg-side-active); }
  .v2-drawer-rule { height: 1px; background: var(--hairline); margin: 10px 4px; }

  .v2-drawer-label-general { padding: 0 10px 6px 10px; }
  .v2-drawer-label-row { padding: 12px 10px 8px 10px; }
  .v2-chat-row { padding: 8px 11px; border-radius: var(--r-btn); }
  .v2-chat-row.is-active { background: var(--bg-side-active); }
  .v2-chat-row-title { font-size: 13px; }

  .v2-path-row:hover, .v2-path-row:focus-within, .v2-path-row.is-active { background: var(--bg-side-active); }
  .v2-drawer-more { padding: 4px; font-size: 11.5px; }

  .v2-drawer-foot { padding: 10px 0 18px 0; }
}

/* Streaming reveal — each released batch of words fades in (see
   createRevealer in v2.js; REVEAL_ANIM_MS must match). Opacity + blur only:
   a transform would need inline-block, which breaks line wrapping. */
.v2 .v2-chunk { animation: v2-reveal 180ms ease-out both; }
@keyframes v2-reveal {
    from { opacity: 0; filter: blur(1px); }
    to   { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .v2 .v2-chunk { animation: none; }
}

/* ── Answers read as documents (steps 2–4, 2026-10-04) ───────────────── */
.v2-turn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 20px;
}
.v2-mirror > :first-child { margin-top: 0; }
.v2-mirror h3 { font-size: 1em; line-height: 1.5; font-weight: 600; margin: 1.1em 0 0.35em; }
.v2-mirror h4 { font-size: 0.94em; line-height: 1.5; font-weight: 600; margin: 1em 0 0.3em; color: var(--ink-secondary); }
.v2-mirror blockquote {
  margin: 0 0 0.65em; padding: 0 0 0 12px;
  border-left: 2px solid var(--hairline);
  color: var(--ink-secondary);
}
.v2-mirror hr { border: 0; border-top: 1px solid var(--hairline); margin: 1em 0; }
.v2-mirror > :last-child { margin-bottom: 0; }

/* The action row: secondary, no fill or border until hovered. It appears
   only once the answer is complete, as the last step of the reveal. */
.v2-answer-actions {
  display: flex; align-items: center; gap: 4px;
  margin-top: -10px;   /* 10px under the answer (the turn's gap is 20) */
  animation: v2-actions-reveal 160ms ease-out both;
}
.v2-answer-actions.is-static { animation: none; }
@keyframes v2-actions-reveal {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v2-answer-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px; margin-left: -4px;   /* icon lines up with the text */
  border: 0; border-radius: var(--r-btn-tiny);
  background: transparent; color: var(--muted);
  font: 12px/16px var(--font-ui);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.v2-answer-btn:hover { background: var(--bg-side-active); color: var(--ink); }
.v2-answer-btn.is-copied { color: var(--ink); }
.v2-answer-icon { display: inline-flex; }
.v2-answer-btn.is-copied .v2-answer-icon { animation: v2-actions-reveal 120ms ease-out both; }

/* "↓" — back to the newest words. */
.v2-latest {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: var(--surface); color: var(--ink-secondary);
  cursor: pointer; pointer-events: auto;
  animation: v2-latest-in 140ms ease-out both;
}
.v2-latest[hidden] { display: none; }
.v2-latest:hover { color: var(--ink); background: var(--bg-side); }
@keyframes v2-latest-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
  .v2-latest { bottom: calc(100% - 12px); }   /* the web composer floats with 20px padding */
}

@media (prefers-reduced-motion: reduce) {
  .v2-answer-actions, .v2-answer-btn.is-copied .v2-answer-icon, .v2-latest { animation: none; }
}

/* ── Paths: icons, the "+" picker, a new path conversation (2026-10-04) ── */
.v2-path-icon svg { display: block; }
.v2-picker {
  /* Fixed, placed by v2-drawer.js under the "+": the sidebar's scroll area
     would clip an absolutely positioned window. */
  position: fixed; z-index: 60;
  display: flex; flex-direction: column;
  max-height: 440px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  animation: v2-picker-in 140ms ease-out both;
}
.v2-picker[hidden] { display: none; }
@keyframes v2-picker-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.v2-picker-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 8px; }
.v2-picker-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.v2-picker-all { font-size: 12px; color: var(--muted); }
.v2-picker-all:hover { color: var(--ink); }
.v2-picker-search {
  height: 32px; margin: 0 2px 6px; padding: 0 10px;
  border: 1px solid var(--input-border); border-radius: var(--r-btn-tiny);
  background: var(--surface); color: var(--ink);
  font: 13px/18px var(--font-ui);
}
.v2-picker-search:focus { outline: none; border-color: var(--input-border); }
.v2-picker-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.v2-picker-label {
  padding: 8px 8px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}
.v2-picker-label[hidden], .v2-picker-item[hidden] { display: none; }
.v2-picker-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px;
  border: 0; border-radius: var(--r-btn-tiny);
  background: transparent; text-align: left;
  font-family: inherit; color: var(--ink);
  cursor: pointer;
}
.v2-picker-item:hover, .v2-picker-item:focus-visible { background: var(--bg); }
.v2-picker-item.is-busy { opacity: 0.55; cursor: progress; }
.v2-picker-text { min-width: 0; display: flex; flex-direction: column; }
.v2-picker-name { font-size: 14px; line-height: 20px; }
.v2-picker-tagline {
  font-size: 12px; line-height: 16px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-picker-error { margin: 8px 6px 2px; font-size: 12px; line-height: 16px; color: var(--coral); }
.v2-picker-error[hidden] { display: none; }

.v2-home-path-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-card);
  background: var(--accent-wash); color: var(--accent-dark);
}
.v2-starters { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 520px); }
.v2-starter {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: transparent; color: var(--ink-secondary);
  font: 14px/20px var(--font-ui); text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.v2-starter:hover { background: var(--surface); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .v2-picker { animation: none; } }

/* ── Account menu (board 39) ─────────────────────────────────────────── */
.v2-account-menu {
  position: fixed; z-index: 70;
  width: 272px; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  animation: v2-picker-in 140ms ease-out both;
}
.v2-account-menu[hidden] { display: none; }
.v2-account-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.v2-account-initials {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18px; background: var(--lilac-wash); color: var(--accent-dark);
  font-size: 14px; font-weight: 600;
}
.v2-account-who { min-width: 0; display: flex; flex-direction: column; }
.v2-account-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.v2-account-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-account-plan {
  margin: 0 6px 6px; padding: 10px 12px;
  border-radius: var(--r-btn); background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.v2-account-plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink); }
.v2-account-plan-row span { color: var(--muted); }
.v2-account-usage { font-size: 12px; line-height: 1.45; color: var(--muted); }
.v2-account-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-btn-tiny);
  background: transparent; color: var(--ink);
  font: 14px/20px var(--font-ui); text-align: left; text-decoration: none;
  cursor: pointer;
}
.v2-account-item svg { color: var(--ink-secondary); flex-shrink: 0; }
.v2-account-item:hover, .v2-account-item:focus-visible { background: var(--bg); }
.v2-account-rule { height: 1px; background: var(--hairline-inner); margin: 6px 4px; }
.v2-account-logout { margin: 0; }
.v2 button.v2-avatar { border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.v2-link-btn {
  border: 0; padding: 0; background: transparent;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.v2-link-btn:hover { color: var(--accent-dark); }

/* ── Premium sheet (board 43) ────────────────────────────────────────── */
.v2-paywall-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(33, 29, 41, 0.12); }
.v2-paywall-scrim[hidden] { display: none; }
.v2-paywall {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0;
  box-sizing: border-box; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 10px 20px max(26px, calc(env(safe-area-inset-bottom) + 14px));
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  animation: v2-sheet-in 180ms ease-out both;
}
.v2-paywall[hidden] { display: none; }
@keyframes v2-sheet-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.v2-paywall-grip { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--input-border); }
.v2-paywall-head { display: flex; flex-direction: column; gap: 6px; }
.v2-paywall-eyebrow { font-size: 12px; font-weight: 600; color: var(--accent); }
.v2-paywall-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.v2-paywall-sub { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--muted); }
.v2-paywall-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--ink); }
.v2-paywall-list li { display: flex; align-items: center; gap: 10px; }
.v2-paywall-list svg { color: var(--green); flex-shrink: 0; }
.v2-paywall-list .v2-paywall-soon { color: var(--muted); }
.v2-paywall-list .v2-paywall-soon svg { color: var(--faint); }
.v2-paywall-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.v2-paywall-plans { display: flex; gap: 10px; }
.v2-paywall-plan {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px; border: 1px solid var(--input-border); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer;
}
.v2-paywall-plan[aria-checked="true"] { border: 2px solid var(--accent); padding: 11px; }
.v2-paywall-plan-name { font-size: 12px; font-weight: 600; color: var(--accent-dark); }
.v2-paywall-plan[aria-checked="false"] .v2-paywall-plan-name { font-weight: 400; color: var(--muted); }
.v2-paywall-plan-price { font-size: 18px; font-weight: 700; }
.v2-paywall-plan-note { font-size: 11.5px; color: var(--muted); }
.v2-paywall-go { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; }
.v2-paywall-error { margin: 0; font-size: 12.5px; color: var(--coral); }
.v2-paywall-error[hidden] { display: none; }
.v2-paywall-later { height: 32px; border: 0; background: transparent; color: var(--muted); font: 13px var(--font-ui); cursor: pointer; }
@media (min-width: 768px) {
  .v2-paywall {
    left: 50%; right: auto; bottom: 50%; width: 440px;
    transform: translate(-50%, 50%);
    border: 1px solid var(--hairline); border-radius: var(--r-sheet);
    animation: none;
  }
  .v2-paywall-grip { display: none; }
}

/* ── Free limits in the conversation and picker (boards 44–45) ───────── */
.v2-limit-line { margin: 0; padding: 0 6px 8px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.v2-limit-line[hidden] { display: none; }
.v2-mic-btn.is-locked svg { opacity: 0.4; }
.v2-plus-row.is-locked { opacity: 0.55; }
.v2-picker-usage { font-size: 12px; color: var(--muted); }
.v2-picker-item.is-locked .v2-picker-name { color: var(--muted); }
.v2-picker-item.is-locked .v2-path-icon { background: var(--bg); color: var(--faint); }
.v2-picker-item .v2-lock { margin-left: auto; flex-shrink: 0; color: var(--faint); }
.v2-picker-full {
  margin: 8px 2px 2px; padding: 12px; border-radius: var(--r-btn);
  background: var(--accent-wash);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 18px; color: var(--ink-secondary);
}

/* ── Settings (boards 40–42) ─────────────────────────────────────────── */
.v2-settings { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--bg); color: var(--ink); }
.v2-set-nav { display: none; }
.v2-set-main { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.v2-set-list, .v2-set-section {
  width: 100%; max-width: 640px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 40px;
}
.v2-settings.is-list .v2-set-section { display: none; }
.v2-settings:not(.is-list) .v2-set-list { display: none; }
.v2-set-top { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.v2-set-top-title { font-size: 16px; font-weight: 600; }
.v2-set-me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 6px; color: inherit; text-decoration: none; }
.v2-set-plancard {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--pastel);
  color: inherit; text-decoration: none;
}
.v2-set-plancard-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.v2-set-plancard-text span { font-size: 12.5px; color: var(--muted); }
.v2-set-plancard-btn { flex-shrink: 0; }
.v2-set-group { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.v2-set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 13px 16px; border: 0; border-bottom: 1px solid var(--hairline-inner);
  background: transparent; color: var(--ink); font: 14px/20px var(--font-ui);
  text-align: left; text-decoration: none; cursor: pointer;
}
.v2-set-row:last-child { border-bottom: 0; }
.v2-set-row > span:first-child { flex-grow: 1; }
.v2-set-row svg { color: var(--faint); flex-shrink: 0; }
.v2-set-danger { color: var(--coral); }
.v2-set-logout-wide { width: 100%; height: 44px; justify-content: center; }
.v2-set-legal { text-align: center; font-size: 12px; color: var(--faint); }
.v2-set-legal a { color: var(--faint); }
.v2-set-h1 { margin: 8px 0 0; font-size: 26px; line-height: 34px; font-weight: 600; }
.v2-set-sub { margin: 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.v2-set-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.v2-set-card-accent { border-color: var(--pastel); }
.v2-set-card-title { font-size: 14px; font-weight: 600; }
.v2-set-field { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.v2-set-label { font-size: 13px; color: var(--ink-secondary); }
.v2-set-note { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.v2-set-muted { font-size: 13px; color: var(--muted); }
.v2-set-status { margin: 0; font-size: 12.5px; color: var(--coral); }
.v2-set-status.is-good { color: var(--green); }
.v2-set-status:empty { display: none; }
.v2-set-banner { margin: 0; padding: 10px 14px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--hairline); font-size: 13.5px; }
.v2-set-banner.is-good { border-color: var(--pastel); background: var(--accent-wash); }
.v2-set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-set-select, .v2-set-input, .v2-set-textarea {
  box-sizing: border-box; width: 100%;
  border: 1px solid var(--input-border); border-radius: var(--r-btn-tiny);
  background: var(--surface); color: var(--ink); font: 14px/20px var(--font-ui);
}
.v2-set-select, .v2-set-input { height: 36px; padding: 0 10px; }
.v2-set-select-inline { width: auto; }
.v2-set-textarea { padding: 10px 12px; resize: vertical; }
.v2-set-prompt { font-size: 12.5px; line-height: 18px; color: var(--ink-secondary); background: var(--bg); }
.v2-set-select:focus, .v2-set-input:focus, .v2-set-textarea:focus { outline: none; border-color: var(--input-border); }
.v2-set-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-set-tile {
  min-height: 48px; padding: 8px; border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font: 13px var(--font-ui); cursor: pointer;
}
.v2-set-tile:hover { background: var(--bg); }
.v2-set-connect { display: flex; flex-direction: column; gap: 8px; }
.v2-set-connect[hidden], .v2-set-connect [hidden] { display: none; }
.v2-set-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-set-choice {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center;
  border: 1px solid var(--input-border); border-radius: var(--r-btn);
  color: var(--ink); font-size: 13px; text-decoration: none;
}
.v2-set-choice.is-on { background: var(--pastel); border-color: var(--pastel); color: var(--pastel-ink); font-weight: 500; }
.v2-set-switch-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.v2-set-switch-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.v2-switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 40px; height: 22px; margin: 0; border-radius: 11px;
  background: var(--input-border); position: relative; cursor: pointer;
  transition: background-color 120ms ease-out;
}
.v2-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 9px; background: #ffffff;
  transition: transform 120ms ease-out;
}
.v2-switch:checked { background: var(--accent); }
.v2-switch:checked::after { transform: translateX(18px); }
.v2-meter { display: flex; flex-direction: column; gap: 6px; }
.v2-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.v2-meter-row > span:last-child { color: var(--muted); }
.v2-meter-bar { height: 6px; border-radius: 3px; background: var(--hairline-inner); overflow: hidden; }
.v2-meter-bar > span { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.v2-lock-label { display: inline-flex; align-items: center; gap: 6px; }
.v2-set-payments { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 480px) { .v2-paywall-list-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .v2-set-nav {
    width: 288px; flex-shrink: 0; box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: 0 16px; background: var(--bg-side); border-right: 1px solid var(--hairline-inner);
    position: sticky; top: 0; height: 100vh; height: 100dvh;
  }
  .v2-set-nav-head { display: flex; align-items: center; gap: 10px; height: 64px; }
  .v2-set-nav-title { font-size: 16px; font-weight: 600; }
  .v2-set-nav-links { display: flex; flex-direction: column; gap: 2px; }
  .v2-set-nav-links a { padding: 9px 12px; border-radius: var(--r-row); color: var(--ink); font-size: 14px; text-decoration: none; }
  .v2-set-nav-links a:hover { background: rgba(0, 0, 0, 0.04); }
  .v2-set-nav-links a.is-active { background: var(--bg-side-active); font-weight: 600; }
  .v2-set-nav-links a.v2-set-nav-admin { margin-top: 10px; color: var(--muted); font-size: 13px; }
  .v2-set-nav-foot { margin: auto 0 20px; }
  .v2-set-logout {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: 0; border-radius: var(--r-row);
    background: transparent; color: var(--ink-secondary); font: 14px var(--font-ui); text-align: left; cursor: pointer;
  }
  .v2-set-logout:hover { background: rgba(0, 0, 0, 0.04); }
  .v2-settings .v2-set-list { display: none; }
  .v2-settings .v2-set-section { display: flex; padding: 48px 24px; }
  .v2-set-phone-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-account-menu, .v2-paywall { animation: none; }
  .v2-switch, .v2-switch::after { transition: none; }
}

/* ── Onboarding (boards 47–50) and sign-in / sign-up (board 46) ─────── */
.v2-welcome, .v2-auth {
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 24px 24px max(28px, calc(env(safe-area-inset-bottom) + 16px));
  color: var(--ink);
}
.v2-welcome-step { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.v2-welcome-step[hidden] { display: none; }
.v2-welcome-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 28px; }
.v2-welcome-dots { display: inline-flex; gap: 6px; }
.v2-welcome-dots span { width: 22px; height: 4px; border-radius: 2px; background: var(--hairline); }
.v2-welcome-dots span.is-on { background: var(--accent); }
.v2-welcome-skip { border: 0; background: transparent; color: var(--muted); font: 13px var(--font-ui); cursor: pointer; padding: 6px 0; }
.v2-welcome-skip:hover { color: var(--ink); }
.v2-welcome-skip-center { align-self: center; }
.v2-welcome-orb { display: inline-flex; }
.v2-welcome-orb.is-breathing { animation: v2-breathe 2.4s ease-in-out infinite; }
@keyframes v2-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
.v2-welcome-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.v2-welcome-h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.5px; }
.v2-welcome-question { font-size: 24px; line-height: 32px; letter-spacing: 0; }
.v2-welcome-sub { margin: 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.v2-welcome-input {
  box-sizing: border-box; width: 100%; min-height: 120px; resize: none;
  padding: 14px 16px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--r-composer);
  background: var(--surface); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  font: 15px/22px var(--font-ui); color: var(--ink);
}
.v2-welcome-input:focus { outline: none; }
.v2-welcome-grow { flex: 1 1 auto; min-height: 16px; }
.v2-welcome-go, .v2-auth-go { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; }
.v2-welcome-drawer { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; border-bottom: 1px solid var(--hairline-inner); }
.v2-welcome-drawer[hidden] { display: none; }
.v2-welcome-soon { opacity: 0.5; cursor: default; }
.v2-welcome-reading { align-items: center; justify-content: center; text-align: center; }
.v2-started {
  align-self: stretch; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--hairline);
}
.v2-started-text { display: flex; flex-direction: column; min-width: 0; }
.v2-started-title { font-size: 13.5px; font-weight: 600; }
.v2-started-sub { font-size: 12px; line-height: 16px; color: var(--muted); }

.v2-auth { gap: 18px; padding-top: 56px; }
.v2-auth-orb { align-self: center; }
.v2-auth-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.v2-auth-h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.5px; }
.v2-auth-sub { margin: 0; max-width: 300px; font-size: 14px; line-height: 21px; color: var(--muted); }
.v2-auth-error { padding: 10px 14px; border-radius: var(--r-btn); background: #fbefea; color: var(--coral); font-size: 13px; line-height: 18px; }
.v2-auth-form { display: flex; flex-direction: column; gap: 10px; }
.v2-auth-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-secondary); }
.v2-auth-field input {
  height: 40px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--input-border); border-radius: var(--r-btn-tiny);
  background: var(--surface); color: var(--ink); font: 14px var(--font-ui);
}
.v2-auth-field input:focus { outline: none; border-color: var(--input-border); }
.v2-auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.v2-auth-check input { margin: 2px 0 0; accent-color: var(--accent); }
.v2-auth-forgot { align-self: flex-end; font-size: 13px; color: var(--accent); text-decoration: none; }
.v2-auth-foot { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.v2-auth-foot a { color: var(--accent); text-decoration: none; }
.v2-auth-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .v2-welcome-orb.is-breathing { animation: none; } }

/* ── Draft: Kept / Struck reversible, Mirror results (2026-10-04) ────── */
.v2-kept-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-kept .v2-ruled.is-extra { display: none; }
.v2-kept.is-expanded .v2-ruled.is-extra { display: flex; }
.v2-kept-more[hidden] { display: none; }
.v2-ruled.is-cleared .v2-kept-text { color: var(--muted); }
.v2-ruled.is-cleared .v2-kept-foot { font-size: 12px; color: var(--muted); }
.v2-struck > summary { cursor: pointer; list-style: none; }
.v2-struck > summary::-webkit-details-marker { display: none; }
.v2-struck > summary::after { content: " +"; color: var(--faint); }
.v2-struck[open] > summary::after { content: " −"; }
.v2-struck .v2-kept-text { color: var(--ink-secondary); text-decoration: line-through; text-decoration-color: var(--faint); }
.v2-struck .v2-ruled.is-cleared .v2-kept-text { text-decoration: none; }
.v2-reading-error { color: var(--coral); }
a.v2-open-result { text-decoration: none; }

/* ── Path page (boards 51–52) and conversation in a path (board 53) ─── */
.v2-path-head { display: flex; align-items: flex-start; gap: 16px; position: relative; width: min(100%, 760px); margin: 0 auto; box-sizing: border-box; padding: 8px 0 4px; }
.v2-path-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v2-path-head-text .v2-draft-title { margin: 0; }
.v2-path-head-text .v2-draft-sub { margin: 0; }
.v2-path-streak { font-size: 12.5px; color: var(--faint); }
.v2-path-streak[hidden] { display: none; }
.v2-path-head-actions { display: flex; align-items: center; gap: 8px; position: relative; }
.v2-pathpage-menu { top: 44px; right: 0; min-width: 240px; }
.v2-pathpage-finish {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border: 0; border-radius: var(--r-btn-tiny); background: transparent;
  color: var(--coral); font: 14px var(--font-ui); text-align: left; cursor: pointer;
}
.v2-pathpage-finish span { font-size: 11.5px; color: var(--faint); }
.v2-pathpage-finish:hover { background: var(--bg); }
.v2-path-grid {
  width: min(100%, 760px); margin: 0 auto; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 40px;
}
@media (min-width: 900px) { .v2-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-path-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v2-path-card-link { border: 0; padding: 0; background: transparent; color: var(--accent); font: 12.5px var(--font-ui); text-decoration: none; cursor: pointer; }
.v2-path-card-link:hover { color: var(--accent-dark); }
.v2-path-summarise { align-self: flex-start; }
.v2-path-summarise[hidden] { display: none; }
.v2-path-memory { margin: 0; font-size: 14px; line-height: 21px; }
.v2-path-convo, .v2-path-output {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-inner);
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.v2-path-convo:last-child, .v2-path-output:last-child { border-bottom: 0; }
.v2-path-convo-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-path-convo-snippet { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-path-convo-date { flex-shrink: 0; font-size: 12px; color: var(--faint); }
.v2-path-bucket { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 4px 0; }
.v2-pathpage .v2-card[hidden] { display: none; }
.v2-top-path { color: var(--accent); text-decoration: none; }
.v2-captures { display: flex; flex-direction: column; gap: 6px; margin-top: -10px; }
.v2-captures-label { font-size: 11.5px; color: var(--faint); }
.v2-captures-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-capture {
  height: 28px; padding: 0 10px; border-radius: 14px;
  display: inline-flex; align-items: center;
  background: var(--accent-wash); color: var(--pastel-ink); font-size: 12.5px;
  animation: v2-actions-reveal 160ms ease-out both;
}
.v2-user-row { align-self: flex-end; display: flex; align-items: center; gap: 6px; max-width: 100%; }
.v2-user-row .v2-user { align-self: auto; }
.v2-edit-btn {
  width: 28px; height: 28px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-btn-tiny); background: transparent; color: var(--faint);
  opacity: 0; cursor: pointer; transition: opacity 120ms ease-out;
}
.v2-user-row:hover .v2-edit-btn, .v2-edit-btn:focus-visible { opacity: 1; }
@media (hover: none) { .v2-edit-btn { opacity: 0.7; } }
.v2-edit-btn:hover { background: var(--bg-side-active); color: var(--ink); }
.v2-edit-btn[hidden] { display: none; }
.v2-edit-box { width: min(478px, 100%); display: flex; flex-direction: column; gap: 8px; }
.v2-edit-area {
  box-sizing: border-box; width: 100%; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--input-border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font: 14px/20px var(--font-ui);
}
.v2-edit-area:focus { outline: none; }
.v2-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .v2-capture { animation: none; } }

/* ── A Mirror inside the conversation (boards 57–59) ─────────────────── */
.v2-mirror-bar { height: 3px; background: var(--hairline); margin: 0 16px; border-radius: 2px; overflow: hidden; }
.v2-mirror-bar > span { display: block; height: 3px; width: 0; background: var(--accent); transition: width 200ms ease-out; }
.v2-mirror-pause { font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 4px; }
.v2-mirror-pause:hover { color: var(--ink); }
.v2-mirror-run .v2-thread { justify-content: flex-start; }
#v2MirrorForm[hidden] { display: none; }
.v2-preline { white-space: pre-line; }
.v2-choices { align-self: stretch; display: flex; flex-direction: column; gap: 8px; max-width: 528px; }
.v2-choice {
  box-sizing: border-box; width: 100%; padding: 12px 14px; text-align: left;
  border: 1px solid var(--input-border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font: 14px/20px var(--font-ui); cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.v2-choice:hover { background: var(--accent-wash); border-color: var(--pastel); }
.v2-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-mirror-skip, .v2-mirror-wrap {
  border: 0; padding: 6px 4px; background: transparent; cursor: pointer;
  font: 13px var(--font-ui); color: var(--muted);
}
.v2-mirror-wrap { align-self: flex-start; color: var(--accent); }
.v2-user.is-muted { background: transparent; color: var(--faint); font-style: italic; padding-top: 0; padding-bottom: 0; }
.v2-mirror-result {
  align-self: stretch; max-width: 528px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
}
.v2-mirror-result-title { font-size: 22px; line-height: 28px; font-weight: 600; }
.v2-mirror-result-headline { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--ink-secondary); }
.v2-mirror-dims { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.v2-mirror-dim { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.v2-mirror-dim-title { font-weight: 600; }
.v2-mirror-dim-read { color: var(--muted); }
.v2-mirror-quote { margin: 0; padding-left: 12px; border-left: 2px solid var(--hairline); font-size: 13.5px; line-height: 20px; color: var(--ink-secondary); }
.v2-mirror-own { display: flex; gap: 8px; }
.v2-mirror-result-foot a { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.v2-mirror-note { margin: -8px 0 0; font-size: 12px; color: var(--muted); }
.v2-mirror-talk { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .v2-mirror-bar > span { transition: none; } }

/* ── Explore (boards 54–55) ──────────────────────────────────────────── */
.v2-explore-inner { width: min(100%, 880px); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.v2-explore-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.v2-explore-head .v2-draft-title, .v2-explore-head .v2-draft-sub { margin: 0; }
.v2-explore-usage { font-size: 12.5px; color: var(--muted); }
.v2-explore-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v2-explore-search { flex: 1 1 260px; width: auto; }
.v2-explore .v2-set-choice { background: transparent; font-family: inherit; cursor: pointer; }
.v2-explore .v2-set-choice.is-on { background: var(--pastel); }
.v2-explore-section { display: flex; flex-direction: column; gap: 10px; }
.v2-explore-section[hidden] { display: none; }
.v2-explore-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v2-explore-domains { display: flex; flex-wrap: wrap; gap: 4px; }
.v2-explore-domain { border: 0; padding: 2px 8px; border-radius: 10px; background: transparent; color: var(--ink-secondary); font: 12px var(--font-ui); cursor: pointer; }
.v2-explore-domain:hover { background: var(--bg-side-active); }
.v2-explore-domain.is-on { background: var(--bg-side-active); color: var(--ink); font-weight: 600; }
.v2-explore-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px) { .v2-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .v2-explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-explore-card {
  display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  padding: 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none;
}
.v2-explore-card[hidden] { display: none; }
a.v2-explore-card:hover { border-color: var(--input-border); }
.v2-explore-card .v2-path-icon { flex-shrink: 0; }
.v2-explore-card.is-locked .v2-path-icon { background: var(--bg); color: var(--faint); }
.v2-explore-card.is-locked .v2-explore-card-name { color: var(--muted); }
.v2-explore-card .v2-lock { margin-left: auto; flex-shrink: 0; color: var(--faint); }
.v2-explore-card-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-explore-card-name { font-size: 14px; font-weight: 600; }
.v2-explore-card-sub { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.v2-explore-card-actions { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; padding-top: 2px; }
.v2-explore-card-actions a { color: var(--accent); text-decoration: none; }
.v2-explore-muted { color: var(--faint); }

/* Export tiles with icons; back-after-a-few-days question (2026-10-04). */
.v2-set-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; }
.v2-set-tile-icon { display: inline-flex; color: var(--accent-dark); }
.v2-away { width: min(100%, 520px); box-sizing: border-box; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.v2-away[hidden] { display: none; }
.v2-away-q { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-away-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Board 71–72: the conversation's menu, the delete sheet, path menu items (2026-10-04). */
.v2-convo-more { position: relative; display: flex; }
.v2-convo-more[hidden] { display: none; }
.v2-convo-menu { top: 40px; right: 0; min-width: 200px; }
.v2-pathpage-item {
  padding: 8px 10px; border: 0; border-radius: var(--r-btn-tiny); background: transparent;
  color: var(--ink); font: 14px var(--font-ui); text-align: left; cursor: pointer;
}
.v2-pathpage-item:hover, .v2-pathpage-item:focus-visible { background: var(--bg); }
.v2-delete { gap: 14px; }
.v2-delete-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-delete-list li { display: flex; align-items: flex-start; gap: 10px; }
.v2-delete-list li[hidden] { display: none; }
.v2-delete-list svg { flex-shrink: 0; margin-top: 3px; }
.v2-delete-goes svg { color: var(--coral); }
.v2-delete-stays svg { color: var(--accent); }
.v2-delete-go { height: 44px; justify-content: center; font-size: 15px; font-weight: 500; background: #fbeee8; color: var(--coral); border: 0; }
.v2-delete-go:disabled { opacity: 0.6; cursor: default; }

/* Board 68: move a General conversation into its path (2026-10-04). */
.v2-move { border-color: var(--accent-soft, #d9d2ef); }
.v2-move-head { display: flex; align-items: center; gap: 12px; }
.v2-move-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-move-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.v2-move-sub { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }

/* Boards 63–64: a quest in the conversation (2026-10-04). */
.v2-quest-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 4px 16px 8px; }
.v2-quest-step { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); }
.v2-quest-step-mark { width: 8px; height: 8px; border-radius: 4px; background: var(--input-border); display: inline-flex; align-items: center; justify-content: center; }
.v2-quest-step-mark svg { display: none; }
.v2-quest-step.is-current { color: var(--ink); font-weight: 600; }
.v2-quest-step.is-current .v2-quest-step-mark { background: var(--accent); }
.v2-quest-step.is-done { color: var(--accent); }
.v2-quest-step.is-done .v2-quest-step-mark { width: auto; height: auto; background: none; }
.v2-quest-step.is-done .v2-quest-step-mark svg { display: block; }
.v2-quest-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.v2-quest-card-title.is-done { color: var(--accent-dark); }
.v2-quest-card-notes { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: var(--muted); }
.v2-quest-deliverable { box-sizing: border-box; width: 100%; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.v2-quest-deliverable-head { font-size: 15px; font-weight: 600; color: var(--ink); }
.v2-quest-deliverable-body { font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-quest-deliverable-body h1 { font-size: 17px; margin: 0 0 6px; }
.v2-quest-deliverable-body h2 { font-size: 14.5px; margin: 10px 0 4px; }

/* Boards 60–62: Mirrors in the sidebar and as conversations (2026-10-04). */
.v2-drawer-count { margin-left: auto; margin-right: 6px; font-size: 11px; color: var(--faint); }
.v2-mirror-retake { height: 32px; padding: 0 12px; font-size: 13px; }
.v2-mirror-reading { box-sizing: border-box; width: 100%; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent-soft, #d9d2ef); display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.v2-mirror-reading-title { font-size: 21px; line-height: 27px; font-weight: 600; color: var(--ink); }
.v2-mirror-reading-mine { font-size: 12px; font-weight: 500; color: var(--accent); }
.v2-mirror-reading-headline { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2, #424242); }
.v2-mirror-reading-dims { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; line-height: 19px; }
.v2-mirror-reading-dims dt { color: var(--muted); }
.v2-mirror-reading-dims dd { margin: 0; color: var(--ink); }
.v2-mirror-reading-then { margin: 0; font-size: 12.5px; color: var(--accent-dark); }
.v2-mirror-reading .v2-btn[aria-pressed="true"] { border: 2px solid var(--accent); }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.v2-chip { height: 32px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); font: 13px var(--font-ui); cursor: pointer; }
.v2-chip[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--tint, #f0edf8); }
.v2-chip:disabled:not([aria-pressed="true"]) { opacity: 0.55; cursor: default; }
.v2-mirror-refine-line { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-mirror-refine-title { font-weight: 600; }
.v2-mirror-refine-before { color: var(--faint); }
.v2-mirror-refine-after { font-weight: 600; }
.v2-mirror-refine-edit { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-btn); border: 1px solid var(--input-border); font: 14px/20px var(--font-ui); resize: vertical; }

/* Boards 65–66, 73–78: A draft of you in tabs (2026-10-04). */
.v2-draft-tabs { width: min(100%, 760px); margin: 0 auto 16px; box-sizing: border-box; display: flex; gap: 18px; overflow-x: auto; border-bottom: 1px solid var(--hairline); scrollbar-width: none; }
.v2-draft-tabs::-webkit-scrollbar { display: none; }
.v2-draft-tab { flex-shrink: 0; padding: 8px 2px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.v2-draft-tab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.v2-draft-tab:hover { color: var(--ink); }
.v2-draft-section-title { width: min(100%, 760px); margin: 20px auto 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.v2-planet { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v2-planet-svg { width: min(100%, 520px); height: auto; font-family: var(--font-ui); }
.v2-planet-ring { stroke: var(--accent-soft, #d9d2ef); stroke-width: 1.5; stroke-dasharray: 3 6; }
.v2-planet-dot { fill: #cfc7ea; }
.v2-planet-dot.is-top { fill: var(--accent); }
.v2-planet-core { fill: #8577c6; }
.v2-planet-core-wave { fill: #b1a6e0; }
.v2-planet-you { fill: #fff; font-size: 17px; font-weight: 600; }
.v2-planet-count { fill: #f0edf8; font-size: 12px; }
.v2-planet-name { fill: var(--ink); font-size: 15px; font-weight: 600; }
.v2-planet-top { fill: var(--muted); font-size: 12.5px; }
.v2-planet-label:hover .v2-planet-name { fill: var(--accent-dark); }
.v2-planet-legend { text-align: center; }
.v2-planet-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v2-planet-area { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.v2-planet-area[hidden] { display: none; }
.v2-planet-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); }
.v2-planet-times { flex-shrink: 0; font-size: 12px; color: var(--faint); }
.v2-draft-bio, .v2-draft-recent { width: min(100%, 760px); margin: 12px auto 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.v2-draft-bio-text { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.v2-draft-composition { width: min(100%, 760px); margin: 12px auto 0; display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.v2-draft-composition-part.is-values { background: #6d5eac; }
.v2-draft-composition-part.is-patterns { background: #8577c6; }
.v2-draft-composition-part.is-strengths { background: #b1a6e0; }
.v2-draft-composition-part.is-goals { background: #cfc7ea; }
.v2-draft-composition-part.is-interests { background: #e6e1f5; }
.v2-draft-composition-part.is-themes { background: #d9d2ef; }
.v2-draft-profile { width: min(100%, 760px); margin: 12px auto 0; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .v2-draft-profile { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v2-draft-profile-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-draft-profile-card { display: flex; flex-direction: column; gap: 6px; }
.v2-draft-profile-item { font-size: 14px; line-height: 20px; color: var(--ink); }
.v2-tag { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tint, #f0edf8); color: var(--accent-dark); display: inline-flex; align-items: center; font-size: 12.5px; }
.v2-evolve-now, .v2-draft-main > .v2-card { width: min(100%, 760px); margin: 12px auto 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.v2-evolve-now-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-evolve-now-text { display: flex; flex-direction: column; gap: 2px; }
.v2-evolve-now-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.v2-evolve-row { display: flex; gap: 10px; font-size: 14px; line-height: 20px; color: var(--ink); }
.v2-evolve-kind { flex-shrink: 0; width: 72px; font-weight: 600; color: var(--accent); }
.v2-evolve-row.is-quiet .v2-evolve-kind { color: var(--faint); }
.v2-evolve-form { font-size: 18px; font-weight: 600; color: var(--ink); }
.v2-evolve-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); }
.v2-evolve-go { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: var(--accent); }
.v2-map { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.v2-map-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.v2-map-svg { width: 100%; height: auto; }
.v2-map-area { fill: var(--tint, #f0edf8); stroke: var(--accent-soft, #d9d2ef); }
.v2-map-area-name { fill: var(--ink-2, #424242); font-size: 13px; font-weight: 600; font-family: var(--font-ui); }
.v2-map-edge { stroke-width: 1.5; }
.v2-map-edge.is-supports { stroke: var(--accent); }
.v2-map-edge.is-contradicts { stroke: var(--coral); stroke-dasharray: 5 4; }
.v2-map-dot { fill: #b1a6e0; cursor: pointer; }
.v2-map-dot.is-on { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.v2-map-dot:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2; }
.is-dim { opacity: 0.25; }
.v2-map-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v2-map-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); }
.v2-map-key.is-contradicts { border-top: 2px dashed var(--coral); }
.v2-map-detail, .v2-map-list { display: flex; flex-direction: column; gap: 6px; }
.v2-map-detail[hidden], .v2-map-list[hidden], .v2-map-canvas[hidden] { display: none; }
.v2-map-link { margin: 0; font-size: 13px; color: var(--muted); }
.v2-map-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v2-map-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 6px 4px; border-bottom: 1px solid var(--hairline); }
.v2-map-table td { padding: 8px 4px; border-bottom: 1px solid var(--hairline); color: var(--ink); cursor: pointer; }
.v2-map-table tr.is-on td { font-weight: 600; }
.v2-tension-vs { color: var(--faint); font-weight: 400; }
.v2-tension-bar { height: 4px; border-radius: 2px; background: var(--hairline); }
.v2-tension-bar span { display: block; height: 4px; border-radius: 2px; background: var(--coral); }
.v2-tension.is-ruled { opacity: 0.6; }
.v2-shadow { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.v2-shadow-body { display: flex; flex-direction: column; gap: 6px; }
.v2-shadow-body[hidden], .v2-shadow-chat[hidden], .v2-persona-chat[hidden] { display: none; }
.v2-shadow-message { margin: 0; padding-left: 12px; border-left: 2px solid var(--accent-soft, #d9d2ef); font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-persona-grid { width: min(100%, 760px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .v2-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-persona { display: flex; flex-direction: column; gap: 10px; }
.v2-persona-head { display: flex; align-items: center; gap: 12px; }
.v2-persona-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 21px; background: #8577c6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.v2-persona-mark.is-future { background: #b1a6e0; }
.v2-persona-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.v2-persona-desc { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2, #424242); }
.v2-persona-thread { display: flex; flex-direction: column; gap: 8px; }
.v2-persona-me { align-self: flex-end; max-width: 85%; margin: 0; padding: 8px 12px; border-radius: 16px; background: #e9e6f3; font-size: 14px; line-height: 20px; }
.v2-persona-them { max-width: 92%; margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); white-space: pre-wrap; }
.v2-persona-form { display: flex; gap: 8px; }
.v2-persona-form label { flex: 1 1 auto; display: flex; }
.v2-persona-form .v2-set-input { flex: 1 1 auto; min-width: 0; }
.v2-tools-head { width: min(100%, 760px); margin: 8px auto 0; }
.v2-tools { width: min(100%, 760px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .v2-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-tool { display: flex; flex-direction: column; gap: 8px; }
.v2-tool-form { display: flex; flex-direction: column; gap: 8px; }
.v2-tool-personas { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.v2-tool-pick { display: inline-flex; align-items: center; gap: 6px; }
.v2-tool-out { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }

/* 2026-10-05: Draft of you — icons, no links; tools greyed out; Mirror run talk form. */
.v2-planet-icon { color: var(--accent); }
.v2-planet-icon svg { stroke: currentColor; }
.v2-area-chip { height: 34px; padding: 0 12px 0 10px; border-radius: 17px; border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); font: 13px var(--font-ui); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.v2-area-chip[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--tint, #f0edf8); padding: 0 11px 0 9px; }
.v2-area-chip-icon { display: inline-flex; color: var(--accent); }
.v2-area-chip-count { font-size: 11.5px; color: var(--faint); }
.v2-planet-area-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.v2-planet-area-title { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.v2-planet-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink); }
.v2-planet-item.is-top .v2-planet-item-text { font-weight: 600; }
.v2-planet-item-text { flex: 1 1 auto; min-width: 0; }
.v2-planet-strength { flex-shrink: 0; width: 28px; height: 6px; border-radius: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.v2-planet-strength::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--strength) * 20%); background: var(--accent); border-radius: 3px; }
.v2-planet-times { flex-shrink: 0; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--tint, #f0edf8); color: var(--accent-dark); display: inline-flex; align-items: center; font-size: 11.5px; }
.v2-draft-card-head { display: flex; align-items: center; gap: 8px; }
.v2-draft-card-head .v2-path-icon { width: 26px; height: 26px; }
.v2-persona-lock { margin-left: auto; }
.v2-soon-label { font-size: 12px; color: var(--faint); }
.v2-tools.is-soon .v2-tool { opacity: 0.5; filter: grayscale(0.6); pointer-events: none; }
.v2-mirror-talkform { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.v2-mirror-talkform .v2-set-input { flex: 1 1 auto; min-width: 0; }

/* Board 73 on web: the planet beside its areas (2026-10-05). */
@media (min-width: 1024px) {
  .v2-planet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
  .v2-planet-svg { grid-column: 1; grid-row: 1 / span 3; width: 100%; }
  .v2-planet-legend { grid-column: 1; grid-row: 4; }
  .v2-planet-areas { grid-column: 2; grid-row: 1; justify-content: flex-start; padding-top: 24px; }
  .v2-planet-area { grid-column: 2; grid-row: 2; }
}

.v2-tension-kept { margin: 0; padding: 12px 16px; border-radius: var(--r-card); background: var(--tint, #f0edf8); color: var(--accent-dark); font-size: 13.5px; line-height: 20px; }

.v2-shadow-reading { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.v2-shadow-reading[hidden] { display: none; }

/* "See all" in an area: the reading cards (2026-10-05). */
.v2-area-seeall { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: 13px var(--font-ui); cursor: pointer; }
.v2-area-all { width: min(100%, 760px); margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; }
.v2-area-all[hidden] { display: none; }
.v2-area-all-head { display: flex; justify-content: space-between; align-items: baseline; }
.v2-area-all-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.v2-area-all-more { align-self: center; }
.v2-area-all-more[hidden] { display: none; }

/* The grid (2026-10-05): the old Identity grid as its own page. */
.v2-grid-tools { width: min(100%, 860px); margin: 0 auto 12px; display: flex; flex-direction: column; gap: 10px; }
.v2-grid-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-grid-search { max-width: 360px; }
.v2-grid { width: min(100%, 860px); margin: 0 auto 40px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.v2-grid-head, .v2-grid-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 64px; gap: 12px; align-items: center; padding: 10px 16px; }
.v2-grid-head { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--hairline); }
.v2-grid-item { border-bottom: 1px solid var(--hairline); }
.v2-grid-item:last-of-type { border-bottom: 0; }
.v2-grid-item[hidden] { display: none; }
.v2-grid-row { width: 100%; border: 0; background: transparent; text-align: left; font: 14px/20px var(--font-ui); color: var(--ink); cursor: pointer; }
.v2-grid-row:hover, .v2-grid-item.is-open .v2-grid-row { background: var(--bg); }
.v2-grid-c-signal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.v2-grid-text { min-width: 0; }
.v2-grid-band { height: 20px; padding: 0 7px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 11px; background: var(--hairline); color: var(--muted); }
.v2-grid-band.is-current { background: #e3f4ee; color: #146b52; }
.v2-grid-band.is-recent { background: #eaf1fb; color: #2d5b98; }
.v2-grid-band.is-recurrent { background: var(--tint, #f0edf8); color: var(--accent-dark); }
.v2-grid-band.is-durable { background: #f3ecdf; color: #8a5a12; }
.v2-grid-band.is-dormant { background: #efefef; color: #777; }
.v2-grid-kept { font-size: 11px; color: var(--green); }
.v2-grid-area { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; background: var(--tint, #f0edf8); color: var(--accent-dark); }
.v2-grid-area span { display: inline-flex; }
.v2-grid-c-sure { display: flex; align-items: center; gap: 8px; }
.v2-grid-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.v2-grid-bar span { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.v2-grid-pct { flex-shrink: 0; width: 36px; text-align: right; font-size: 12px; color: var(--muted); }
.v2-grid-c-links { text-align: center; }
.v2-grid-links { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--bg); color: var(--accent-dark); font-size: 12px; }
.v2-grid-nolinks { color: var(--faint); }
.v2-grid-panel { padding: 4px 16px 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.v2-grid-panel[hidden] { display: none; }
.v2-grid-link { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.v2-grid-link-icon { display: inline-flex; width: 22px; height: 22px; border-radius: 11px; align-items: center; justify-content: center; background: var(--surface); }
.v2-grid-link.is-supports .v2-grid-link-icon { color: var(--green); }
.v2-grid-link.is-contradicts .v2-grid-link-icon { color: var(--coral); }
.v2-grid-link-rel { flex-shrink: 0; width: 82px; font-size: 12px; color: var(--muted); }
.v2-grid-link-other { padding-left: 8px; border-left: 3px solid var(--accent-soft, #d9d2ef); }
.v2-grid-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.v2-grid-item.is-struck { opacity: 0.5; }
.v2-grid-none { padding: 16px; }
@media (max-width: 640px) {
  .v2-grid-head { display: none; }
  .v2-grid-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "signal links" "area sure"; row-gap: 6px; }
  .v2-grid-c-signal { grid-area: signal; }
  .v2-grid-c-links { grid-area: links; }
  .v2-grid-c-area { grid-area: area; }
  .v2-grid-c-sure { grid-area: sure; min-width: 120px; }
}

/* The landing in the v2 design (2026-10-05). */
.v2-landing-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.v2-landing-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.v2-landing-logo em { font-style: italic; color: var(--accent); }
.v2-landing-links { display: none; gap: 22px; font-size: 14px; }
.v2-landing-links a { color: var(--muted); }
.v2-landing-links a:hover { color: var(--ink); }
.v2-landing-hero2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0 32px; align-items: center; }
.v2-landing-hero-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.v2-landing-hero-text .v2-landing-cta { justify-content: flex-start; }
.v2-landing-eyebrow { height: 26px; padding: 0 12px; border-radius: 13px; background: var(--tint, #f0edf8); color: var(--accent-dark); display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; }
.v2-landing-demo { position: relative; display: flex; flex-direction: column; gap: 12px; }
.v2-landing-demo-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 32px rgba(33, 29, 41, 0.07); }
.v2-landing-demo-me { align-self: flex-end; max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 18px; background: #e9e6f3; font-size: 14px; line-height: 20px; }
.v2-landing-demo-mirror { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.v2-landing-demo-offer { border: 1px solid var(--accent-soft, #d9d2ef); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.v2-landing-demo-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.v2-landing-demo-row { display: flex; align-items: center; gap: 10px; }
.v2-landing-demo-text { display: flex; flex-direction: column; font-size: 14px; }
.v2-landing-demo-text span { font-size: 12px; color: var(--muted); }
.v2-landing-demo-kept { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); font-size: 13px; color: var(--ink); box-shadow: 0 8px 24px rgba(33, 29, 41, 0.06); }
.v2-landing-quotes { overflow: hidden; padding: 12px 0 20px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.v2-landing-quotes-track { display: flex; gap: 14px; width: max-content; animation: v2-quotes 90s linear infinite; }
.v2-landing-quotes:hover .v2-landing-quotes-track { animation-play-state: paused; }
@keyframes v2-quotes { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v2-landing-quotes-track { animation: none; flex-wrap: wrap; width: auto; } .v2-landing-quote[aria-hidden="true"] { display: none; } }
.v2-landing-quote { margin: 0; width: 280px; flex-shrink: 0; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.v2-landing-stars { color: #c9a227; font-size: 12px; letter-spacing: 2px; }
.v2-landing-quote blockquote { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.v2-landing-quote figcaption { font-size: 12px; color: var(--muted); }
.v2-landing-why { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.v2-landing-lead { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-secondary); }
.v2-landing-lead-strong { color: var(--ink); }
.v2-landing-section > .v2-landing-h2 { text-align: center; }
.v2-landing-sub-center { margin: -6px auto 18px; text-align: center; }
.v2-landing-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.v2-landing-step { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.v2-landing-step-head { display: flex; justify-content: space-between; align-items: center; }
.v2-landing-step-n { font-size: 12px; font-weight: 600; color: var(--faint); }
.v2-landing-card .v2-path-icon, .v2-landing-step .v2-path-icon { width: 34px; height: 34px; }
.v2-landing-aud-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.v2-landing-aud { max-width: 760px; margin: 0 auto 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.v2-landing-aud[hidden] { display: none; }
.v2-landing-aud .v2-landing-p { font-size: 15px; line-height: 23px; }
.v2-landing-p-strong { color: var(--ink); font-weight: 500; }
.v2-landing-area { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.v2-landing-area-head { display: flex; align-items: center; gap: 10px; }
.v2-landing-final2 { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px 0 64px; }
.v2-landing-final2 .v2-landing-h2 { margin: 0; }
.v2-landing-section .v2-landing-note { text-align: center; }
@media (min-width: 768px) {
  .v2-landing-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-landing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .v2-landing-links { display: flex; }
  .v2-landing-hero2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 72px 0 48px; gap: 48px; }
  .v2-landing-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-landing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-landing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sign in / sign up on web: the promise beside the form (2026-10-05). */
.v2-auth-aside { display: none; }
@media (min-width: 1024px) {
  .v2-auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v2-auth-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px 48px 48px; background: linear-gradient(160deg, #efeaf9 0%, #e3dcf3 55%, #d9d2ef 100%); }
  .v2-auth-aside-body { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
  .v2-auth-aside-h { margin: 0; font-size: 34px; line-height: 42px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); }
  .v2-auth-aside-sub { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-secondary); }
  .v2-auth-aside-quotes { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
  .v2-auth-aside-quotes .v2-landing-quote { width: auto; background: rgba(255, 255, 255, 0.75); }
  .v2-auth-split > .v2-auth { align-self: center; justify-self: center; width: min(100% - 48px, 400px); padding-top: 0; }
}

/* Everything I've heard: change / delete a row (2026-10-05). */
.v2-grid-tools-row { display: flex; gap: 16px; padding-top: 2px; }
.v2-grid-tools-row[hidden], .v2-grid-edit[hidden], .v2-grid-confirm[hidden] { display: none; }
.v2-grid-delete-link { color: var(--coral); }
.v2-grid-edit { display: flex; flex-direction: column; gap: 8px; }
.v2-grid-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-btn); background: #fbefea; color: var(--coral); font-size: 13.5px; }
.v2-grid-danger { background: var(--coral); color: #fff; border: 0; }

/* Activation (2026-10-05): "check your inbox" and resend. */
.v2-auth-note { padding: 10px 14px; border-radius: var(--r-btn); background: var(--accent-wash); color: var(--pastel-ink); font-size: 13px; line-height: 18px; }
.v2-auth-resend { margin: -4px 0 0; }

/* The iOS app (2026-10-05): web-only billing stays out of the App Store build. */
.is-native-ios [data-web-billing] { display: none !important; }
.is-native-ios [data-store-hide] { display: none !important; }

/* Sign in with Apple (2026-10-05) — Apple's black button, per its guidelines. */
.v2-apple { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.v2-apple[hidden] { display: none; }
.v2-auth-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; }
.v2-auth-or::before, .v2-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.v2-apple-btn { height: 44px; width: 100%; border: 0; border-radius: var(--r-btn); background: #000; color: #fff; font: inherit; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.v2-apple-btn:disabled { opacity: .6; }

/* Subscription terms under the Premium plans (2026-10-05). */
.v2-paywall-terms { margin: 4px 0 0; font-size: 11.5px; line-height: 16px; color: var(--faint); text-align: center; }
.v2-paywall-terms a, .v2-set-note a { color: var(--muted); }

/* Face ID lock (2026-10-05): covers the app until Face ID succeeds. */
.v2-face-veil { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }

/* Help & contact (2026-10-05). */
.v2-help-faq { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.v2-help-item { border: 1px solid var(--hairline); border-radius: var(--r-row); background: var(--surface); padding: 12px 14px; }
.v2-help-item summary { cursor: pointer; font-weight: 500; }
.v2-help-item p { margin: 8px 0 0; color: var(--ink-secondary); line-height: 21px; }
.v2-help-h2 { margin: 12px 0 0; font-size: 17px; font-weight: 600; align-self: flex-start; }

/* ── iOS app shell (2026-10-05) ─────────────────────────────────
   html.is-native is set by v2-native.js inside the app only.
   1) Inputs at 16px: iOS zooms into smaller fields on focus and the page
      then stays zoomed and pannable. 2) No bounce, no sideways pan; on app
      pages only the conversation scrolls. 3) The keyboard: the frame shrinks
      by its height (--v2-kb, from the Keyboard plugin) so the composer sits on it. */
html.is-native { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.is-native, html.is-native body.v2 { overflow-x: hidden; max-width: 100%; }
html.is-native input, html.is-native textarea, html.is-native select { font-size: 16px; }
html.is-native:has(.v2-app), html.is-native:has(.v2-app) body.v2 { height: 100%; overflow: hidden; }
html.is-native .v2-app { height: calc(100dvh - var(--v2-kb, 0px)); }
html.is-native.is-keyboard .v2-composer-wrap { padding-bottom: 10px; }
@media (min-width: 1024px) {
  html.is-native .v2-shell { height: calc(100dvh - var(--v2-kb, 0px)); }
  html.is-native .v2-app { height: auto; }
}

/* Captured readings link to Self (2026-10-07). */
.v2-captures-see { align-self: center; font-size: 12px; color: var(--accent); text-decoration: none; padding: 0 4px; }
.v2-captures-see:hover { text-decoration: underline; }

/* The start of a new chat: what's new in Self + one suggestion (2026-10-07). */
.v2-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; width: min(100%, 560px); }
.v2-home-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left; text-decoration: none; color: var(--ink); }
a.v2-home-card:hover { border-color: var(--accent-soft, #d9d2ef); }
.v2-home-card-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.v2-home-card-title { font-size: 15px; font-weight: 600; line-height: 21px; }
.v2-home-card-sub { font-size: 13.5px; line-height: 19px; color: var(--muted); }
.v2-home-card-go { margin-top: 4px; font-size: 13px; color: var(--accent); }
.v2-home-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.v2 a.v2-captures-see { color: var(--accent); }   /* over `.v2 a { color: inherit }` */

/* A Mirror's full result (2026-10-07). */
.v2-mresult { width: min(100%, 640px); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.v2-mresult-card { display: flex; flex-direction: column; gap: 10px; }
.v2-mresult-quote { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); border-left: 2px solid var(--accent-soft, #d9d2ef); padding-left: 12px; }
.v2-mresult-dim { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.v2-mresult-dim:first-of-type { border-top: 0; padding-top: 0; }
.v2-mresult-dim-head { display: flex; align-items: center; gap: 12px; }
.v2-mresult-dim-title { flex: 1 1 auto; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.v2-mresult-bar { flex: 0 0 96px; height: 6px; border-radius: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.v2-mresult-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--accent); border-radius: 3px; }
.v2-mresult-dim-read { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.v2-mresult-prose { font-size: 15px; line-height: 23px; color: var(--ink); }
.v2-mresult-prose p { margin: 0 0 10px; }
.v2-mresult-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.v2-mresult-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink); }
.v2-mresult-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px 0 24px; }

/* Privacy & Terms in the v2 design (2026-10-07). */
.v2.legal-body { min-height: 100vh; background: var(--bg); color: var(--ink); }
.v2 .legal-wrap { width: min(100% - 32px, 720px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 0 48px; }
.v2 .legal-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 20px; }
.v2 .legal-back:hover { color: var(--ink); }
.v2 .legal-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.v2 .legal-updated { margin: 6px 0 24px; font-size: 13px; color: var(--muted); }
.v2 .legal-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 12px; }
.v2 .legal-h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.v2 .legal-h3 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; }
.v2 .legal-p { margin: 0 0 10px; font-size: 14.5px; line-height: 22px; color: var(--ink-secondary, #424242); }
.v2 .legal-p:last-child { margin-bottom: 0; }
.v2 .legal-p a, .v2 .legal-list a { color: var(--accent); }
.v2 .legal-list { margin: 0 0 10px; padding-left: 20px; font-size: 14.5px; line-height: 22px; color: var(--ink-secondary, #424242); display: flex; flex-direction: column; gap: 4px; }
.v2 .legal-callout { background: var(--accent-wash, #f0edf8); border-radius: var(--r-btn); padding: 12px 14px; font-size: 14px; line-height: 21px; margin: 6px 0 10px; color: var(--pastel-ink, #4f4380); }
.v2 .legal-divider { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0; }
.v2 .legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 10px; display: block; overflow-x: auto; }
.v2 .legal-table th, .v2 .legal-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.v2 .legal-table th { font-weight: 600; color: var(--ink); background: var(--bg); }

/* ── Answers: links, citations, sources, callouts, code, tables (2026-10-07) ── */
@media (min-width: 768px) {
  .v2-mirror { max-width: 720px; }   /* a readable answer column, inside the 760 thread */
}
.v2-mirror { min-width: 0; }
.v2-mirror .v2-link {
  color: var(--accent-dark); text-decoration: underline;
  text-decoration-color: var(--pastel); text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.v2-mirror .v2-link:hover { text-decoration-color: currentColor; }
.v2-cite { line-height: 0; }
.v2-cite-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px;
  border: 0; border-radius: 9px;
  background: var(--accent-wash); color: var(--accent-dark);
  font: 600 10.5px/1 var(--font-ui);
  vertical-align: 2px; cursor: pointer;
}
.v2-cite-btn:hover, .v2-cite-btn[aria-expanded="true"] { background: var(--pastel); }
.v2-cite-pop {
  position: absolute; z-index: 60;
  padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-row);
  background: var(--surface); color: var(--ink);
  font: 13px/1.45 var(--font-ui);
  animation: v2-actions-reveal 120ms ease-out both;
}
.v2-cite-pop[hidden] { display: none; }
.v2-cite-pub { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.v2-cite-title { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
.v2-cite-title:hover { text-decoration: underline; }
.v2-cite-excerpt {
  margin: 6px 0 0; color: var(--ink-secondary);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-cite-open { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }

.v2-sources {
  align-self: stretch; max-width: 720px;
  margin-top: -6px; padding: 0 4px;
  animation: v2-actions-reveal 160ms ease-out both;
}
.v2-sources.is-static { animation: none; }
.v2-sources-head { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.v2-sources-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-sources-list li[hidden] { display: none; }
.v2-source {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-btn-tiny);
  background: var(--surface); border: 1px solid var(--hairline-inner);
  color: var(--ink); text-decoration: none;
}
.v2-source:hover { border-color: var(--hairline); background: var(--bg-side); }
.v2-source-num {
  flex: none; min-width: 18px; height: 18px; border-radius: 9px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-dark); font-size: 10.5px; font-weight: 600;
}
.v2-source-body { display: flex; flex-direction: column; min-width: 0; }
.v2-source-title { font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-source-pub { font-size: 11.5px; line-height: 16px; color: var(--muted); }
.v2-sources-all { margin-top: 6px; font-size: 12.5px; }

.v2-callout {
  margin: 0 0 0.75em; padding: 10px 14px;
  border-radius: var(--r-btn); border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  font-size: 15px; line-height: 22px;
}
.v2-callout p { margin: 0; }
.v2-callout-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-dark); margin-bottom: 2px; }
.v2-callout-tip { border-left-color: var(--green); background: #eaf6f1; }
.v2-callout-tip .v2-callout-label { color: #146c51; }
.v2-callout-warning, .v2-callout-caution { border-left-color: var(--coral); background: #fbefe9; }
.v2-callout-warning .v2-callout-label, .v2-callout-caution .v2-callout-label { color: #8f3f1f; }

.v2-code {
  margin: 0 0 0.75em; max-width: 100%;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--surface); overflow: hidden;
}
.v2-code-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--hairline-inner); background: var(--bg-side);
}
.v2-code-lang { font-size: 12px; color: var(--muted); }
.v2-code-copy {
  height: 24px; padding: 0 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font: 12px var(--font-ui); cursor: pointer;
}
.v2-code-copy:hover { background: var(--bg-side-active); color: var(--ink); }
.v2-code pre {
  margin: 0; padding: 12px; overflow-x: auto;
  font: 13px/1.55 ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  white-space: pre; overflow-wrap: normal;
}
.v2-mirror .v2-code code { background: none; padding: 0; border-radius: 0; font: inherit; }
.tok-k { color: #6d3fb0; }
.tok-s { color: #1f7a4d; }
.tok-c { color: #7a7a7a; font-style: italic; }
.tok-n { color: #a14d12; }

.v2-md-table { margin: 0 0 0.75em; max-width: 100%; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-btn); }
.v2-md-table table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 20px; }
.v2-md-table th, .v2-md-table td { padding: 8px 12px; border-bottom: 1px solid var(--hairline-inner); text-align: left; vertical-align: top; overflow-wrap: normal; }
.v2-md-table th { background: var(--bg-side); font-weight: 600; white-space: nowrap; }
.v2-md-table tr:last-child td { border-bottom: 0; }

.v2-searching { margin-left: 8px; font-size: 13px; color: var(--muted); }

.v2-answer-more { position: relative; display: inline-flex; }
.v2-answer-menu {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 40;
  min-width: 150px; padding: 4px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--surface);
}
.v2-answer-menu[hidden] { display: none; }
.v2-answer-menu-item {
  display: block; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--r-btn-tiny);
  background: transparent; color: var(--ink); text-align: left;
  font: 13px var(--font-ui); cursor: pointer;
}
.v2-answer-menu-item:hover { background: var(--bg-side-active); }
.v2-answer-menu-item:disabled { color: var(--muted); cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .v2-sources, .v2-cite-pop { animation: none; }
}

/* Self: a tab switching in place (2026-10-12). */
.v2-draft-panel { transition: opacity 120ms ease-out; }
.v2-draft-panel.is-loading { opacity: 0.45; pointer-events: none; }

/* A path opens to its conversations (2026-10-12). */
button.v2-path-link {
  border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.v2-path-chev { flex-shrink: 0; margin-left: auto; color: var(--faint); transition: transform 140ms ease-out; }
.v2-path-link[aria-expanded="true"] .v2-path-chev { transform: rotate(90deg); }
.v2-path-convos { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 42px; }
.v2-path-convos[hidden] { display: none; }
.v2-path-convo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-btn-tiny);
  color: var(--ink); text-decoration: none;
}
.v2-path-convo:hover { background: var(--user-bubble); }
.v2-path-convo.is-active { background: var(--user-bubble); }
.v2-path-convo .v2-chat-row-title { font-size: 13px; font-weight: 400; }
.v2-path-convo-new { justify-content: flex-start; gap: 8px; color: var(--accent-dark); font-size: 13px; font-weight: 600; }
.v2-path-convo-all { font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .v2-path-chev { transition: none; } }