/* Structure/glass-card language still follows mesha.fun (near-black base,
   translucent glass cards, Space Grotesk/DM Sans/JetBrains Mono); accent
   recolored from gold to green per operator request. */
:root {
  --bg: #080808;
  --bg-2: #0c0c0e;
  --card: #0c1410;
  --border: #ffffff1a;
  --border-soft: #ffffff0f;
  --fill-soft: #ffffff08;
  --text: #ffffff;
  --text-dim: #ededf0;
  --text-mute: #9aa0a8;
  --brand: #22c55e;
  --brand-2: #4ade80;
  --brand-3: #86efac;
  --brand-dark: #15803d;
  --warn: #ff8a2a;
  --radius: 18px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font-body);
  /* vh first as a fallback for WebViews without dvh support (notably some
     in-app browsers, e.g. tapping the link from inside the X app) — an
     unsupported unit invalidates the WHOLE declaration, so without this
     fallback those browsers fell through to auto height, which is exactly
     what made the app screen grow to fit its content and need scrolling
     to reach the input row/menu instead of everything fitting on screen. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* the page itself never scrolls — only .chat-log does */
}

.glow {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 55vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(34,197,94,0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#app { position: relative; z-index: 1; height: 100%; }

.screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto; /* gate/username cards are short and won't need it, but never trap content if a small screen ever needs it */
}
/* REAL BUG FIXED HERE (2026-09-17): a class selector's `display` always
   beats the browser's own [hidden]{display:none} rule (author CSS outranks
   user-agent CSS even at equal specificity), so app.js's `el.hidden = true`
   was doing NOTHING visually — gate/username/main all rendered stacked at
   once, which is exactly the "shows everything simultaneously on refresh"
   bug report. This selector is MORE specific than plain `.screen` (class +
   attribute), so it wins and actually hides the element.

   ONE MORE LAYER OF THE SAME BUG (still 2026-09-17, reported again after
   the fix above): `.screen[hidden]` (class+attribute, specificity 0,2,0)
   and `.screen.app-screen` below (two classes, ALSO 0,2,0) tie — and since
   `.screen.app-screen` comes later in this file, IT won by source order
   whenever main-screen carried both `class="screen app-screen"` AND
   `hidden`, so main-screen specifically (not gate/username) kept bleeding
   through behind the passcode card. `.screen.app-screen[hidden]` below is
   three parts (0,3,0) — it now beats `.screen.app-screen` regardless of
   source order, which is the actual fix, not just moving rules around. */
.screen[hidden] { display: none; }
.screen.app-screen[hidden] { display: none; }
.screen.app-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden; /* only .chat-log inside scrolls */
}

.card {
  background: linear-gradient(180deg, var(--fill-soft), transparent), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.card.center { text-align: center; }

.pixie-mark {
  font-size: 32px;
  color: var(--brand-2);
  text-shadow: 0 0 24px rgba(34,197,94,0.5);
  margin-bottom: 6px;
}
.pixie-mark.small { font-size: 18px; margin: 0 6px 0 0; }

.steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.step-dot { width: 20px; height: 4px; border-radius: 2px; background: var(--border); transition: background .2s; }
.step-dot.active { background: var(--brand); }
.step-dot.done { background: var(--brand-dark); }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 6px;
  color: var(--text);
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--text);
}
.sub { color: var(--text-mute); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }
.sub.warn { color: var(--warn); }

form { display: flex; gap: 8px; }
#space-form { flex-direction: column; align-items: stretch; margin-top: 6px; }

input[type="text"], input[type="url"] {
  flex: 1;
  background: var(--fill-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; /* 16px+ so iOS Safari doesn't auto-zoom on focus */
  outline: none;
  transition: border-color .15s;
}
input.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
input::placeholder { color: var(--text-mute); }
input:focus { border-color: var(--brand); }

button {
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04140a;
  font-size: 15px;
  transition: transform .1s, filter .15s;
}
button:hover { filter: brightness(1.1); }
button:active { transform: scale(0.97); }

.error { color: var(--warn); font-size: 13px; margin: 14px 0 0; }
.insight { color: var(--text-mute); font-size: 12px; margin: 16px 0 0; line-height: 1.5; opacity: 0.8; }
.divider { border: none; border-top: 1px solid var(--border-soft); margin: 20px 0 16px; }
.status { color: var(--brand-3); font-size: 13px; margin: 14px 0 0; line-height: 1.5; }

/* ── main app shell — one screen, full height, mobile-first ────── */
.topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(10px);
  z-index: 3;
  flex: 0 0 auto;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }

.pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--fill-soft); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 6px 11px; font-size: 12px; color: var(--text-mute);
  white-space: nowrap;
  min-width: 0; /* lets it shrink/ellipsis instead of forcing the topbar to overflow on a narrow phone */
  overflow: hidden;
  text-overflow: ellipsis;
}
#space-pill { flex: 1 1 auto; }
.pill.center { margin: 0 auto 14px; width: fit-content; }
#sheet-space-pill { margin: 10px 0 16px; width: fit-content; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; transition: background .2s; flex: 0 0 auto; }
.pill.available .pill-dot { background: var(--brand-2); box-shadow: 0 0 8px #4ade8099; }
.pill.in-space .pill-dot { background: var(--warn); box-shadow: 0 0 8px #ff8a2a99; }
.pill.unknown .pill-dot { background: #666; }

/* ── chat — the whole main screen, not one tab among several ───── */
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
}
.msg {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04140a;
  border-bottom-right-radius: 4px;
}
.msg.pixie {
  align-self: flex-start;
  background: var(--fill-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-bottom-left-radius: 4px;
}
.msg.system {
  align-self: center;
  color: var(--text-mute);
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: center;
}
.msg audio { margin-top: 8px; width: 220px; max-width: 100%; height: 32px; }

.chat-input-row {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-soft);
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: 8px;
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(10px);
}
.icon-btn {
  background: var(--fill-soft);
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-btn.accent { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #04140a; }
.icon-btn.recording { background: var(--warn); color: #140c00; box-shadow: 0 0 0 4px rgba(255,138,42,0.25); }
.pill-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--fill-soft); color: var(--text-dim);
  border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 8px 13px; font-size: 12.5px; font-family: var(--font-body); font-weight: 600;
  white-space: nowrap;
}
.pill-btn:active { background: var(--border); }
#back-btn { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
/* Fills the width Controls used to occupy next to it (removed per operator
   request — one clear action beats two half-labeled icons). */
.pill-btn.wide {
  padding: 9px 16px;
  font-size: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04140a;
  border-color: transparent;
}
.pill-btn.wide:active { filter: brightness(0.92); background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }

#live-call-row { text-align: center; padding: 0 12px 10px; flex: 0 0 auto; }
.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--brand-3);
  width: 100%;
}

/* ── sheets — Space-join / Controls, slide up over the chat instead
   of navigating to a separate tab/page ─────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 10; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 10px 22px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 14px; }
.sheet-close {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fill-soft); border: 1px solid var(--border-soft);
  color: var(--text-mute); font-size: 14px; padding: 0;
}

@media (max-width: 480px) {
  .card { padding: 22px 18px; }
  .brand { font-size: 16px; }
}

/* ── Buy minutes (pay.js) ─────────────────────────────────────────────── */
.insight a, .sub a { color: var(--brand); text-decoration: none; }
.insight a:hover, .sub a:hover { text-decoration: underline; }
.pkg-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 14px; }
.pkg {
  flex: 1 1 96px; background: var(--fill-soft); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 8px; color: var(--text-dim); font-family: var(--font-body); font-size: 13px; cursor: pointer; line-height: 1.35;
}
.pkg b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--text); }
.pkg.selected { border-color: var(--brand); background: #22c55e1f; }
.pay-box {
  display: flex; align-items: center; gap: 8px; text-align: left; margin: 10px 0;
  background: var(--fill-soft); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px;
}
.pay-box .pay-label { flex: 0 0 auto; font-size: 11px; color: var(--text-mute); width: 62px; line-height: 1.25; }
.pay-box code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.copy-btn {
  flex: 0 0 auto; width: auto; margin: 0; padding: 7px 12px; font-size: 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
}
.pill.minutes { cursor: pointer; color: var(--brand); border-color: #22c55e55; font-family: var(--font-mono); flex: 0 0 auto; }
.pill.minutes.low { color: var(--warn); border-color: #ff8a2a66; }

/* ── Layout fit, every screen (2026-10-04) ────────────────────────────────
   Forms used to lay out as one row (input + button side by side). On a phone
   the input's own minimum width pushed the button — and on the buy screen the
   package buttons too — past the edge of the card. Inside a card everything
   now stacks, full width, and nothing can be wider than the card. */
.card form { flex-direction: column; align-items: stretch; gap: 10px; }
.card form input, .card form button { width: 100%; }
input[type="text"], input[type="url"] { min-width: 0; max-width: 100%; }
.card { max-width: min(440px, 100%); overflow-wrap: anywhere; }
.card h1 { line-height: 1.15; }
/* A card taller than the screen scrolls from its top instead of being cut off above. */
.screen:not(.app-screen) { align-items: flex-start; }
.screen:not(.app-screen) > .card { margin: auto; }
.field-label { display: block; text-align: left; font-size: 12px; color: var(--text-mute); margin-bottom: -4px; }
.pkg-row { width: 100%; }
.pkg { min-width: 0; width: auto; }
.card form .pkg { width: auto; }
.pay-box { flex-wrap: wrap; }
.pay-box .pay-label { width: 100%; }
.pay-box code { flex: 1 1 0; }
.pay-box .copy-btn { width: auto; }
#done-continue { width: 100%; margin-top: 14px; }
/* The minutes pill is a button, so undo the big green button look it inherits. */
.pill.minutes { background: var(--fill-soft); padding: 6px 10px; font-size: 12px; font-weight: 500; border: 1px solid #22c55e55; border-radius: 999px; }
.sheet-panel form input { min-width: 0; }
@media (max-width: 400px) {
  .card { padding: 22px 16px; }
  .card h1 { font-size: 24px; }
  .screen { padding: 16px 12px; }
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 400px) {
  /* Room for the Space timer and the minutes clock: keep the mark, drop the word. */
  .brand { font-size: 0; }
  .brand .pixie-mark.small { font-size: 18px; margin-right: 0; }
}

/* ── "Get Pixie to join your Space" — its own line under the top bar ───────── */
.space-cta { flex: 0 0 auto; padding: 12px 16px 10px; text-align: center; border-bottom: 1px solid var(--border-soft); }
.space-cta-btn { width: 100%; max-width: 440px; padding: 14px 18px; font-size: 16px; border-radius: 14px; }
.space-cta-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-mute); line-height: 1.4; }
.topbar #space-pill { flex: 1 1 auto; }
@media (max-width: 400px) { .space-cta { padding: 10px 12px 8px; } .space-cta-btn { font-size: 15px; } }

/* ── Buy: any number of hours, the price line, and the cancel confirmation ── */
#buy-custom { display: flex; flex-direction: column; gap: 10px; }
.price-line { margin: 0; font-size: 14px; color: var(--brand-3); min-height: 20px; }
.confirm-box { margin-top: 14px; padding: 14px; border: 1px solid #ff8a2a66; border-radius: 14px; background: #ff8a2a12; text-align: left; }
.confirm-box p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.confirm-actions { display: flex; gap: 8px; margin-top: 12px; }
.confirm-actions button { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: 14px; }
.btn-quiet { background: var(--fill-soft); border: 1px solid var(--border); color: var(--text); }
.btn-danger { background: var(--warn); color: #1a0d00; }

.balance-line { margin: 0 0 10px; padding: 8px 12px; display: inline-block; border: 1px solid #22c55e55; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--brand); background: var(--fill-soft); }

/* ── Front page: "Buy minutes" leads, the whitelist code sits under it ── */
.gate-main-btn { width: 100%; padding: 16px 20px; font-size: 16px; }
#gate-form { margin-top: 14px; }

/* A form is display:flex, which beats the browser's own [hidden] rule — so a hidden form stayed on screen.
   Anything marked hidden is hidden, whatever its display. */
[hidden] { display: none !important; }

/* ── emoji controls (2026-10-12): how to run her on stage, shown in the Space sheet ── */
.controls-card { margin-top: 18px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--fill-soft); text-align: left; }
.controls-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.control-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.control-row b { color: var(--text); font-weight: 600; }
.control-emoji { flex: 0 0 34px; font-size: 24px; line-height: 1; text-align: center; }
.controls-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-mute); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THEME 2026-10-12 — the look of Spear's links page (bolt-drum-river-honey.grok.me), asked for by
   Stephen: warm off-white on near-black, one serif italic display face, hairline outlines instead
   of glass cards, a filled "feature" button, numbered link rows, and a light/dark switch.
   Everything above still does the layout; this block only re-skins it, so it can be removed (or the
   backup in pixie_site\public_backup_2026-10-12_before-theme put back) to return to the green look.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --bg: #0e0e10;
  --bg-2: #141417;
  --surface: #18181b;
  --card: transparent;
  --text: #f3f1ec;
  --text-dim: #e6e3dc;
  --text-mute: #a39e94;
  --border: rgba(243, 241, 236, 0.14);
  --border-soft: rgba(243, 241, 236, 0.09);
  --line-strong: rgba(243, 241, 236, 0.28);
  --fill-soft: rgba(243, 241, 236, 0.05);
  --on-fill: #0e0e10;          /* text on a filled (feature) button */
  --hint-on-fill: #514e49;
  --brand: #f3f1ec;
  --brand-2: #f3f1ec;
  --brand-3: #c4bfb6;
  --brand-dark: #f3f1ec;
  --warn: #e9a15b;
  --bar: rgba(14, 14, 16, 0.88);
  --radius: 16px;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ec;
  --bg-2: #fbf9f4;
  --surface: #fffcf8;
  --text: #171614;
  --text-dim: #2b2925;
  --text-mute: #5e5a53;
  --border: rgba(23, 22, 20, 0.12);
  --border-soft: rgba(23, 22, 20, 0.08);
  --line-strong: rgba(23, 22, 20, 0.24);
  --fill-soft: rgba(23, 22, 20, 0.04);
  --on-fill: #f4f2ec;
  --hint-on-fill: #c4bfb6;
  --brand: #171614;
  --brand-2: #171614;
  --brand-3: #5e5a53;
  --brand-dark: #171614;
  --warn: #b45f12;
  --bar: rgba(244, 242, 236, 0.9);
}

.glow { display: none; }
body { font-family: var(--font-body); color: var(--text-dim); }

/* Cards lose the glass: content sits straight on the page, left-aligned, like the links page. */
.card, .card.center {
  background: none; border: 0; box-shadow: none; text-align: left;
  padding: 8px 8px 20px; max-width: min(24rem, 100%);
}
h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 10vw, 3.25rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 14px; }
.card h1 { line-height: 0.95; }
h1.display-name { font-size: clamp(3.25rem, 12vw, 4.25rem); line-height: 0.9; margin: 8px 0 16px; }
h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.85rem; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
.kicker { margin: 0; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); font-size: 0.75rem; font-weight: 600; }
.sub { font-size: 0.975rem; line-height: 1.55; max-width: 34ch; }
.insight { font-size: 0.8125rem; opacity: 1; }
.insight a, .sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rule { border: 0; height: 1px; background: var(--border); margin: 22px 0 0; }
.pixie-mark { color: var(--text-mute); text-shadow: none; font-size: 22px; }
.step-dot.active { background: var(--text); }
.step-dot.done { background: var(--text-mute); }
.steps { justify-content: flex-start; }
.field-label { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.6875rem; font-weight: 600; margin-bottom: -2px; }

/* The top row of the front page: her status on the left, the light/dark switch on the right. */
.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 2.75rem; margin-bottom: 26px; }
.gate-top .pill { margin: 0; }

/* Her picture, in the same ringed round frame as the links page. */
.avatar-frame {
  width: 7.5rem; height: 7.5rem; border-radius: 999px; overflow: hidden; position: relative; margin: 6px 0 24px 6px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 5px var(--bg), 0 0 0 6px var(--border);
}
.avatar { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.gate-top { margin-bottom: 18px; }

/* Buttons: one filled style (the "feature" button), no gradients. */
button {
  font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em;
  background: var(--text); color: var(--on-fill); border: 1px solid var(--text); border-radius: 14px;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease), opacity .2s var(--ease);
}
button:hover { filter: none; opacity: 0.9; }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: default; }
input[type="text"], input[type="url"] { background: transparent; border-color: var(--border); border-radius: 14px; }
input:focus { border-color: var(--line-strong); background: var(--fill-soft); }

/* Numbered link rows (front page). */
.link-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.link-btn {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 4.25rem; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text);
  text-decoration: none; text-align: left; font-family: var(--font-body); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.link-btn:hover { background: var(--surface); border-color: var(--line-strong); opacity: 1; }
.link-btn:active { transform: scale(0.98); }
.link-btn--feature, .link-btn--feature:hover { background: var(--text); color: var(--on-fill); border-color: var(--text); }
.link-btn--feature:hover { opacity: 0.9; }
.link-index { flex: none; width: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-size: 0.75rem; font-weight: 600; color: var(--text-mute); }
.link-copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.link-title { font-size: 0.975rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.link-hint { font-size: 0.8125rem; line-height: 1.3; color: var(--text-mute); font-weight: 500; }
.link-btn--feature .link-index, .link-btn--feature .link-hint { color: var(--hint-on-fill); }
.link-arrow { flex: none; font-size: 1rem; opacity: 0.7; }
.insight a.link-btn, .sub a.link-btn { text-decoration: none; }

/* Light / dark switch. */
.theme-toggle {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; font-size: 1rem;
}
.theme-toggle:hover { background: var(--surface); border-color: var(--line-strong); opacity: 1; }
.theme-toggle.small { width: 36px; height: 36px; font-size: 0.875rem; }
.topbar .theme-toggle { margin-left: auto; }   /* always at the right edge, whatever pills are showing */
.theme-icon { position: absolute; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.theme-icon--sun { opacity: 0; transform: scale(0.25); }
.theme-icon--moon { opacity: 1; transform: scale(1); }
[data-theme="light"] .theme-icon--sun { opacity: 1; transform: scale(1); }
[data-theme="light"] .theme-icon--moon { opacity: 0; transform: scale(0.25); }

/* Main app. */
.topbar, .chat-input-row { background: var(--bar); }
.brand { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; }
.pixie-mark.small { font-size: 14px; }
.pill { background: transparent; border-color: var(--border); color: var(--text-mute); }
.pill.minutes, .pill.minutes.low { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 10px; }
.pill.minutes.low { color: var(--warn); border-color: var(--warn); }
.pill.available .pill-dot { background: #5fbf7f; box-shadow: none; }
.pill.in-space .pill-dot { box-shadow: none; }
.space-cta { text-align: left; padding: 14px 16px 12px; }
.space-cta-btn { max-width: none; min-height: 3.5rem; text-align: left; padding: 14px 18px; font-size: 0.975rem; }
.space-cta-hint { font-size: 0.8125rem; line-height: 1.45; }
.msg { border-radius: 16px; }
.msg.user { background: var(--text); color: var(--on-fill); }
.msg.pixie { background: transparent; border-color: var(--border); }
.msg.system { font-family: var(--font-body); letter-spacing: 0.02em; }
.icon-btn { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; }
.icon-btn:hover { background: var(--surface); border-color: var(--line-strong); opacity: 1; }
.icon-btn.accent { background: var(--text); color: var(--on-fill); border-color: var(--text); }
.icon-btn.recording { background: var(--warn); color: var(--on-fill); border-color: var(--warn); box-shadow: none; }
.pill-btn, .pill-btn.wide, .pill-btn.wide:active { background: transparent; color: var(--text); border-color: var(--border); }
.ghost-btn { background: transparent; border: 1px solid var(--border); color: var(--text); }
.ghost-btn:hover { background: var(--surface); border-color: var(--line-strong); opacity: 1; }

/* Sheets, buying, confirmations. */
.sheet-panel { background: var(--bg-2); border-top-color: var(--border); box-shadow: none; }
.sheet-close { background: transparent; border: 1px solid var(--border); color: var(--text-mute); }
.status, .price-line { color: var(--brand-3); }
.pkg { background: transparent; border-color: var(--border); color: var(--text-dim); border-radius: 14px; }
.pkg b { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.pkg.selected { border-color: var(--text); background: var(--fill-soft); }
.pay-box, .controls-card { background: transparent; border-color: var(--border); }
.copy-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.btn-quiet { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger { background: var(--warn); color: var(--on-fill); border-color: var(--warn); }
.balance-line { border-color: var(--border); color: var(--text); background: transparent; }
.confirm-box { border-color: var(--warn); background: transparent; }
.controls-title { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.6875rem; color: var(--text-mute); }

/* The gentle rise the links page opens with (off for people who ask for less motion). */
@keyframes rise { from { opacity: 0; filter: blur(4px); transform: translateY(12px); } to { opacity: 1; filter: none; transform: none; } }
.rise { animation: rise .42s var(--ease) both; }
.d1 { animation-delay: .02s; } .d2 { animation-delay: .08s; } .d3 { animation-delay: .14s; } .d4 { animation-delay: .20s; }
.d5 { animation-delay: .26s; } .d6 { animation-delay: .32s; } .d7 { animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
@media (max-width: 400px) { .brand { font-size: 0; } .card h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); } .card h1.display-name { font-size: 3.25rem; } }

/* ══ Main screen redesign (2026-10-15) ══════════════════════════════════════════════════════════════════════
   Her picture is the centre of the page. Rings around it say what she is doing:
   free = a slow green breath · in a Space = an amber pulse · on a call = rings that move with her voice
   (--her, 0..1, set every frame from the sound actually playing) and a faint inner ring with yours (--me). */
:root { --free: #5fbf7f; --live: #e9a15b; --callc: var(--text); }
[data-theme="light"] { --free: #2f8a52; --live: #b45f12; }

#main-screen.app-screen { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; }
.main-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 20px; width: 100%; max-width: 560px; margin: 0 auto; }

.stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 0 8px; }
.orb {
  --her: 0; --me: 0; --ring: var(--border);
  position: relative; width: 11rem; height: 11rem; padding: 0; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-items: center; margin-bottom: 18px;
}
.orb:disabled { cursor: default; opacity: 1; }
.orb:hover { opacity: 1; }
.orb:active { transform: scale(0.97); }
.orb-pfp {
  position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; object-position: center 40%;
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 5px var(--bg), 0 0 0 6px var(--ring);
  transition: box-shadow .4s var(--ease), transform .12s linear;
}
.orb-ring { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--ring); opacity: 0; pointer-events: none; z-index: 1; }
.orb-me { position: absolute; inset: -3px; border-radius: 999px; z-index: 1; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 calc(2px + var(--me) * 10px) color-mix(in srgb, var(--callc) 18%, transparent); transition: opacity .3s; }

/* free: a slow breath in green */
.orb[data-state="free"] { --ring: var(--free); }
.orb[data-state="free"] .orb-ring--1 { animation: breathe 3.6s ease-in-out infinite; }
/* live in a Space: amber pulses travelling out */
.orb[data-state="space"] { --ring: var(--live); }
.orb[data-state="space"] .orb-ring { animation: pulse-out 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.orb[data-state="space"] .orb-ring--2 { animation-delay: .8s; }
.orb[data-state="space"] .orb-ring--3 { animation-delay: 1.6s; }
/* calling: a ring that turns while the line opens */
.orb[data-state="connecting"] { --ring: var(--callc); }
.orb[data-state="connecting"] .orb-ring--1 { opacity: 1; border-color: transparent; border-top-color: var(--callc); border-right-color: var(--callc); inset: -10px; animation: spin 1s linear infinite; }
/* on a call: rings sized by her voice, the inner one by yours */
.orb[data-state="listening"], .orb[data-state="talking"] { --ring: var(--callc); }
.orb[data-state="listening"] .orb-me, .orb[data-state="talking"] .orb-me { opacity: 1; }
.orb[data-state="listening"] .orb-ring--1 { opacity: .5; inset: -8px; animation: breathe 2.2s ease-in-out infinite; }
.orb[data-state="talking"] .orb-ring { animation: none; }
.orb[data-state="talking"] .orb-ring--1 { opacity: calc(.35 + var(--her) * .65); inset: calc(-6px - var(--her) * 14px); }
.orb[data-state="talking"] .orb-ring--2 { opacity: calc(var(--her) * .55); inset: calc(-12px - var(--her) * 26px); }
.orb[data-state="talking"] .orb-ring--3 { opacity: calc(var(--her) * .3); inset: calc(-18px - var(--her) * 40px); }
.orb[data-state="talking"] .orb-pfp { transform: scale(calc(1 + var(--her) * .035)); }

@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .9; transform: scale(1.07); } }
@keyframes pulse-out { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orb .orb-ring { animation: none !important; } .orb[data-state="free"] .orb-ring--1, .orb[data-state="space"] .orb-ring--1 { opacity: .8; } }

.stage-state { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--text); letter-spacing: .01em; min-height: 1.4rem; }
.state-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--text-mute); }
.stage-state[data-state="free"] .state-dot { background: var(--free); }
.stage-state[data-state="space"] .state-dot { background: var(--live); animation: blink 1.6s ease-in-out infinite; }
.stage-state.on-call .state-dot { background: var(--callc); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

.call-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; min-height: 3.25rem;
  border-radius: 999px; font-size: 1rem; width: auto;
}
.call-btn .call-icon { font-size: .7rem; color: var(--free); }
.call-btn.on { background: transparent; color: var(--text); border-color: var(--line-strong); }
.call-btn.on .call-icon { color: #d9534f; }
.stage-hint { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--text-mute); max-width: 30ch; }

.panel { border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 16px; margin: 18px 0 0; }
.panel h2 { font-size: 1.6rem; margin: 2px 0 6px; }
.panel h3 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; margin: 0 0 4px; color: var(--text); }
.panel-kicker { margin: 0; display: flex; align-items: center; gap: 7px; letter-spacing: .14em; text-transform: uppercase; font-size: .6875rem; font-weight: 600; color: var(--text-mute); }
.panel-sub { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: var(--text-dim); }
.panel--live { border-color: color-mix(in srgb, var(--live) 55%, var(--border)); }
.panel--live .panel-kicker { color: var(--live); }
.live-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--live); animation: blink 1.6s ease-in-out infinite; }
.mono { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.inline-form { display: flex; gap: 8px; margin: 0; }
.inline-form input { flex: 1 1 auto; min-width: 0; margin: 0; }
.inline-form button { flex: 0 0 auto; width: auto; padding: 0 18px; margin: 0; }
.ghost-link { display: inline-block; margin: 2px 0 4px; color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.howto { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.howto summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text); list-style: none; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: ' +'; color: var(--text-mute); }
.howto[open] summary::after { content: ' −'; }
.howto .control-row { margin-top: 10px; }
.controls-mini { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: .8125rem; color: var(--text-mute); }

.chat-section { margin-top: 24px; }
.chat-section .chat-log { padding: 10px 0 0; overflow: visible; min-height: 0; flex: none; }
.chat-input-row { width: 100%; }
@media (min-width: 600px) { .chat-input-row { padding-left: calc(50% - 280px + 12px); padding-right: calc(50% - 280px + 12px); } }
@media (max-height: 700px) { .orb { width: 8.5rem; height: 8.5rem; } .stage { padding-top: 16px; } }
.inline-form { flex-direction: row; align-items: stretch; }
.inline-form input { min-height: 3rem; }
.inline-form button { min-height: 3rem; border-radius: 14px; }
/* room for the rings to grow without touching the top bar or the status line */
.stage { padding-top: 46px; }
.orb { margin-bottom: 40px; }
@media (max-height: 700px) { .stage { padding-top: 36px; } .orb { margin-bottom: 32px; } }

/* ══ Three sections (2026-10-15, second pass) ════════════════════════════════════════════════════════════
   The same colour language everywhere: green = available, amber = busy / live in a Space. */
/* her picture now shows the CALL line: free (green breath, set above) or busy with someone else (amber, still) */
.orb[data-state="busy"] { --ring: var(--live); cursor: not-allowed; }
.orb[data-state="busy"] .orb-ring--1 { opacity: .9; }
.orb[data-state="busy"] .orb-pfp { filter: saturate(.75); }
.stage-state[data-state="busy"] .state-dot { background: var(--live); }
.stage-state[data-state="call"] .state-dot { background: var(--callc); animation: blink 1s ease-in-out infinite; }
.call-btn:disabled { opacity: .55; }
.stage { padding-bottom: 4px; }

/* the Space card: a coloured frame and dot that match her picture */
.space-card { border-width: 1.5px; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.space-card .panel-kicker .state-dot { width: 8px; height: 8px; }
.space-card[data-state="free"] { border-color: var(--free); box-shadow: 0 0 0 4px color-mix(in srgb, var(--free) 12%, transparent); }
.space-card[data-state="free"] .panel-kicker { color: var(--free); }
.space-card[data-state="free"] .state-dot { background: var(--free); animation: blink 2.4s ease-in-out infinite; }
.space-card[data-state="space"] { border-color: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 12%, transparent); }
.space-card[data-state="space"] .panel-kicker { color: var(--live); }
.space-card[data-state="space"] .state-dot { background: var(--live); animation: blink 1.6s ease-in-out infinite; }
.space-card h2 { margin-top: 8px; }

/* the chat: a folding panel in the page's own type and colours */
.chat-panel { padding: 0; overflow: hidden; margin-bottom: 8px; }
.chat-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 18px; min-height: 0;
  background: transparent; color: var(--text); border: 0; border-radius: 0; text-align: left; cursor: pointer;
}
.chat-toggle:hover { background: var(--fill-soft); opacity: 1; }
.chat-toggle:active { transform: none; }
.chat-toggle-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.45rem; letter-spacing: -0.01em; flex: 1 1 auto; }
.chat-unread { background: var(--text); color: var(--on-fill); border-radius: 99px; min-width: 1.4rem; height: 1.4rem; padding: 0 6px; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.chat-chevron { font-size: 1.1rem; color: var(--text-mute); transition: transform .25s var(--ease); transform: rotate(-90deg); line-height: 1; }
.chat-panel.open .chat-chevron { transform: none; }
.chat-body { border-top: 1px solid var(--border-soft); }
.chat-panel .chat-log { max-height: min(46vh, 420px); overflow-y: auto; padding: 14px 16px 6px; gap: 12px; display: flex; flex-direction: column; flex: none; min-height: 0; }
.chat-empty { margin: 0; padding: 4px 18px 10px; font-size: .8125rem; color: var(--text-mute); }
.chat-panel .msg { max-width: 88%; font-size: .9375rem; line-height: 1.55; border-radius: 14px; padding: 10px 13px; display: flex; flex-direction: column; gap: 4px; }
.chat-panel .msg.user { align-self: flex-end; background: var(--fill-soft); color: var(--text); border: 1px solid var(--border); border-bottom-right-radius: 4px; }
.chat-panel .msg.pixie { align-self: flex-start; background: transparent; color: var(--text-dim); border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; padding: 2px 0 2px 12px; }
.chat-panel .msg.system { align-self: center; font-size: .8125rem; color: var(--text-mute); }
.msg-who { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); }
.voice-btn {
  align-self: flex-start; width: auto; min-height: 0; margin-top: 4px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 99px; font-size: .78rem; font-weight: 600;
}
.voice-btn:hover { background: var(--fill-soft); border-color: var(--line-strong); opacity: 1; }
.voice-btn.playing { border-color: var(--free); color: var(--free); }
.voice-icon { font-size: .7rem; }
.chat-panel .chat-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border-soft); background: transparent; backdrop-filter: none; width: auto; }
.chat-panel .chat-input-row input { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 44px; }
.chat-panel .icon-btn { width: 44px; height: 44px; }
@media (min-width: 600px) { .chat-panel .chat-input-row { padding-left: 12px; padding-right: 12px; } }
/* tighter: the three sections fit a phone with little or no scrolling */
.orb { width: 8.75rem; height: 8.75rem; margin-bottom: 30px; }
.stage { padding-top: 34px; }
.call-btn { margin-top: 12px; padding: 12px 24px; min-height: 3rem; }
.stage-hint { margin-top: 8px; }
.panel { margin-top: 16px; padding: 16px 16px 14px; }
.space-card h2 { font-size: 1.5rem; }
.chat-panel { padding: 0; }
.chat-chevron { transform: rotate(-90deg); }
.chat-panel.open .chat-chevron { transform: none; }
.call-btn:disabled .call-icon { color: var(--live); }
@media (max-height: 700px) { .orb { width: 7.5rem; height: 7.5rem; margin-bottom: 26px; } .stage { padding-top: 28px; } }

/* ══ Offline (2026-10-15): her server is switched off ═══════════════════════════════════════════════════ */
.offline-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid #d9534f; border-radius: 12px; font-size: .875rem; line-height: 1.5; color: var(--text-dim); }
.offline-banner { margin-top: 16px; }
.pill.offline .pill-dot { background: #d9534f; }
.orb[data-state="offline"] { --ring: var(--border); cursor: default; }
.orb[data-state="offline"] .orb-pfp { filter: grayscale(1) brightness(.75); }
.orb[data-state="offline"] .orb-ring { animation: none; opacity: 0; }
.stage-state[data-state="offline"] .state-dot { background: #d9534f; animation: none; }
.space-card[data-state="offline"] { border-color: var(--border); box-shadow: none; }
.space-card[data-state="offline"] .panel-kicker { color: var(--text-mute); }
.space-card[data-state="offline"] .state-dot { background: #d9534f; animation: none; }
.pixie-offline .chat-panel, .pixie-offline .space-card form { opacity: .6; }

/* ---- Pixie comes alive (2026-10-16): idle = depth loop drifting, talking = her talking clip ---- */
.avatar-frame { position: relative; }
.avatar-vid { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.avatar-vid.on { opacity: 1; }
.orb-vid { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .12s linear, box-shadow .4s var(--ease); }
.orb-vid--idle { z-index: 3; animation: pixie-bob 5.5s ease-in-out infinite; }
.orb-vid--talk { z-index: 4; }
.orb-vid--idle.ready { opacity: 1; }
.orb[data-state="talking"] .orb-vid--talk.ready { opacity: 1; transform: scale(calc(1 + var(--her) * .035)); }
.orb[data-state="talking"] .orb-vid--idle { animation-play-state: paused; }
.orb[data-state="busy"] .orb-vid { filter: saturate(.75); }
.orb[data-state="offline"] .orb-vid { filter: grayscale(1) brightness(.75); }
@keyframes pixie-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-2px) rotate(-.8deg); } 65% { transform: translateY(1px) rotate(.7deg); } }
@media (prefers-reduced-motion: reduce) { .orb-vid, .avatar-vid { display: none; } }

/* ── Pixie, alive from one still (2026-10-16) ─────────────────────────────────────────────────────────────────
   Stephen: the video loops skipped and one frame cut her face. Her picture is now the sharp depth still (her X
   profile picture) with motion done in CSS, which cannot skip: a slow breath and head tilt at rest, a livelier bob
   while she talks. It uses the separate translate/rotate/scale properties, so it adds to the voice-driven
   transform: scale(...) of the talking state instead of replacing it. */
.orb-vid--idle, .avatar-vid { display: none !important; }
/* the talking clip moves like the still does while she talks, so the hand-over is not a jump */
.orb[data-state="talking"] .orb-vid--talk { animation: pixie-talking 1.7s ease-in-out infinite; }
.orb-pfp, .avatar { animation: pixie-idle 7s ease-in-out infinite; will-change: translate, rotate, scale; }
.orb[data-state="talking"] .orb-pfp { animation: pixie-talking 1.7s ease-in-out infinite; }
.orb[data-state="offline"] .orb-pfp { animation: none; }
@keyframes pixie-idle {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  22% { translate: 0 -2px; rotate: -1.1deg; scale: 1.012; }
  50% { translate: 0 -1px; rotate: 0deg; scale: 1.022; }
  76% { translate: 0 -2.5px; rotate: 1.1deg; scale: 1.01; }
}
@keyframes pixie-talking {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -2px; rotate: -1.4deg; }
  62% { translate: 0 -1px; rotate: 1.2deg; }
}
@media (prefers-reduced-motion: reduce) { .orb-pfp, .avatar { animation: none !important; } }