/* Vision AI — "muse" layout: floating mascot + status pill, frosted header/composer, cosmic background.
   Dark sage identity from the Meta AI artifact. Motion uses transform/opacity only. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-var-latin.woff2") format("woff2"); }
:root {
  --fg: #fff;
  --fg-rgb: 255,255,255;
  --accent-bg: #fff;
  --ink-rgb: 11,11,20;
  --glass-rgb: 24,25,38;
  --cosmos-1: #1A1B33;
  --cosmos-2: #0E0F1D;
  --accent-fg: #0B0B14;
  --ink: #0B0B14;
  --ink-2: #11121C;
  --panel: rgba(22,23,34,.72);
  --card: rgba(24,25,39,.84); /* frosted, near-solid: the sky never shows through text (was .055 white) */
  --card-solid: #1B1C28;
  --line: rgba(var(--fg-rgb),.09);
  --line-soft: rgba(var(--fg-rgb),.06);
  --line-strong: rgba(var(--fg-rgb),.14);
  --muted: #A3A6B4;
  --muted-2: #8E91A3; /* >= 4.5:1 on the darkest panels (was #7E8192, 4.4:1) */
  --sage: #5A7558;
  --sage-2: #8FAE8C;
  --sage-light: #A8C7A5;
  --bubble-bot: rgba(30,31,48,.9);
  --bubble-user: #CFE0F7;
  --bubble-user-ink: #0E1624;
  --physical: #8CAEEC;
  --spiritual: #C9A7FF;
  --heart: #FFB4A3;
  --gold: #E3B77A;
  --orb: #8E7CFF;
  --danger: #FF8A7A;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-msg: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rail-w: 76px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --head-h: calc(var(--safe-t) + 154px);
  --comp-h: calc(var(--safe-b) + 84px);
  --col: 760px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(143,174,140,.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb),.12) transparent; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3, p, ol, ul, dl, dd, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: #fff; color: #000; font-weight: 600; font-size: 13px; transition: transform .2s; }
.skip-link:focus { transform: translateY(60px); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sage-light); outline-offset: 2px; }

/* ---------- Cosmic background ---------- */
.cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, var(--cosmos-1) 0%, var(--cosmos-2) 45%, var(--ink) 75%); }
.cosmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebula { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; }
.n1 { width: 70vmax; height: 50vmax; left: -20vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(110,86,255,.35), transparent); animation: drift1 38s ease-in-out infinite alternate; }
.n2 { width: 60vmax; height: 45vmax; right: -22vmax; bottom: -16vmax; background: radial-gradient(closest-side, rgba(90,117,88,.32), transparent); animation: drift2 46s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(-7vmax, -5vmax, 0) scale(1.1); } }

/* ---------- Glass primitives ---------- */
.glass-btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(var(--fg-rgb),.08); color: var(--fg);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(var(--fg-rgb),.14); transition: transform .2s var(--ease-out), background-color .2s;
}
.glass-btn:hover { background: rgba(var(--fg-rgb),.12); }
.glass-btn:active { transform: scale(.94); }
.glass-btn svg { width: 22px; height: 22px; }
.glass-round { width: 44px; flex-shrink: 0; }
.glass-pill { padding: 0 16px; font-size: 14px; font-weight: 600; }

/* ---------- Mascot ---------- */
.mascot { --m: 76px; position: relative; width: var(--m); height: var(--m); padding: 0; border: 0; background: none; border-radius: 50%; flex-shrink: 0; display: block; }
.mascot-float { position: absolute; inset: 0; animation: bob 4s ease-in-out infinite; will-change: transform; }
.mascot-xl { --m: 200px; }
.mascot-disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #1a1540; isolation: isolate; box-shadow: 0 0 0 2px rgba(var(--fg-rgb),.22), 0 10px 30px rgba(20,10,60,.55); transform: scale(var(--ms, 1)); transition: transform .6s var(--spring); }
.mascot-disc video, .mascot-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mascot-disc video { opacity: 0; transition: opacity .5s ease; }
.mascot-disc video.is-ready { opacity: 1; }
.mascot-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(var(--fg-rgb),.16), rgba(var(--fg-rgb),0) 40%); pointer-events: none; }
.mascot-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(142,124,255,.55), rgba(90,117,88,.18) 60%, transparent 72%); opacity: .7; animation: glow 4s ease-in-out infinite; pointer-events: none; }
.mascot-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(168,199,165,.55); opacity: .0; animation: ring 4s ease-out infinite; pointer-events: none; }
.mascot-ring.r2 { animation-delay: 2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Idle fallback: while the video can't run (Low Power Mode, still loading, blocked autoplay) the poster breathes,
   so the lion is never frozen. Hidden under the video once it plays. */
.mascot-disc.is-still img { animation: lion-breathe 3.2s ease-in-out infinite; transform-origin: 50% 62%; }
.mascot-disc.is-still + .mascot-glow, .mascot-float:has(.is-still) .mascot-glow { animation-duration: 3.2s; }
@keyframes lion-breathe { 0%, 100% { transform: scale(1) translateY(0) rotate(0deg); filter: brightness(1); } 35% { transform: scale(1.045) translateY(-1.5%) rotate(-1.2deg); filter: brightness(1.08); } 70% { transform: scale(1.02) translateY(-.5%) rotate(.8deg); filter: brightness(1.03); } }
@keyframes bob-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes glow-soft { 0%, 100% { opacity: .55; } 50% { opacity: .8; } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.04); } }
@keyframes ring { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.32); } }
body.is-busy .mascot-head { --ms: 1.09; }
body.is-busy .mascot-glow { animation-duration: 1.2s; }
body.is-busy .mascot-ring { animation-duration: 1.4s; border-color: rgba(142,124,255,.8); }
body.is-busy .mascot-ring.r2 { animation-delay: .7s; }

/* ---------- Sign in ---------- */
.auth { position: fixed; inset: 0; z-index: 40; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px); }
.auth-inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: authIn .7s var(--ease-out) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-mascot { margin: 8px 0 28px; }
.auth-steps { position: relative; width: 100%; display: grid; }
.auth-step { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.auth-step.is-active { animation: stepIn .45s var(--ease-out) both; }
.auth-step.is-leaving { animation: stepOut .25s ease both; pointer-events: none; }
@keyframes stepIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes stepOut { to { opacity: 0; transform: translateX(-22px); } }
.auth-title { font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; background: linear-gradient(180deg, #fff 30%, #C9D6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-h2 { font-size: 26px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.auth-sub strong { color: var(--fg); font-weight: 600; }
.auth-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.auth-btn { position: relative; height: 54px; border-radius: 999px; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 650; transition: transform .2s var(--ease-out), background-color .2s, opacity .2s; }
.auth-btn svg { width: 20px; height: 20px; }
.auth-btn:active { transform: scale(.97); }
.auth-btn-primary { background: var(--accent-bg); color: var(--accent-fg); box-shadow: 0 10px 30px rgba(142,124,255,.25); }
.auth-btn-primary:hover { background: #EEF2FF; }
.auth-btn-glass { background: rgba(var(--fg-rgb),.08); border-color: var(--line-strong); color: var(--fg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.auth-btn .spinner { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.18); border-top-color: #0B0B14; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.auth-btn.is-loading .btn-label { opacity: 0; }
.auth-btn.is-loading .spinner { opacity: 1; transform: scale(1); animation: spin .8s linear infinite; }
.auth-btn.is-loading { pointer-events: none; }
.btn-label { transition: opacity .2s; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-link { background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px; border-radius: 10px; }
.auth-link:hover { color: var(--fg); }
.auth-row { display: flex; justify-content: space-between; }
.auth-field { height: 56px; border-radius: 18px; padding: 0 18px; font-size: 17px; background: rgba(var(--fg-rgb),.07); border: 1px solid var(--line-strong); color: var(--fg); text-align: center; transition: border-color .2s; }
.auth-field:focus { border-color: rgba(168,199,165,.7); }
.auth-error { min-height: 20px; font-size: 13px; color: var(--danger); }
.auth-error:empty { min-height: 0; }
.auth-dev { font-size: 12px; color: var(--sage-light); background: rgba(90,117,88,.18); border: 1px dashed rgba(168,199,165,.4); border-radius: 12px; padding: 6px 10px; }
.code-boxes { display: flex; justify-content: center; gap: 8px; }
.code-boxes input { width: 48px; height: 58px; border-radius: 16px; text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(var(--fg-rgb),.07); border: 1px solid var(--line-strong); color: var(--fg); transition: border-color .2s, transform .2s var(--spring); caret-color: var(--sage-light); }
.code-boxes input:focus { border-color: rgba(168,199,165,.8); transform: translateY(-2px); }
.code-boxes input.is-filled { border-color: rgba(207,224,247,.5); }
.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.welcome-check { width: 84px; height: 84px; margin: 0 auto 6px; color: var(--sage-light); animation: pop .6s var(--spring) both; }
.welcome-check svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .25s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.auth-legal { margin-top: 28px; display: flex; gap: 10px; font-size: 12px; color: var(--muted-2); }
.auth-legal a:hover { color: var(--fg); }
body.show-auth .app { visibility: hidden; }

/* ---------- Shell ---------- */
.app { position: relative; z-index: 1; height: 100vh; height: 100dvh; width: 100%; display: flex; overflow: hidden; }
.shell { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rail { display: none; }

/* ---------- Top bar: floating mascot + status pill ---------- */
.topbar { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: var(--head-h); padding: calc(var(--safe-t) + 14px) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; view-transition-name: topbar; }
.topbar > * { pointer-events: auto; }
.topbar-blur { position: absolute; inset: 0 0 -24px; z-index: 0; pointer-events: none !important; background: linear-gradient(180deg, rgba(var(--ink-rgb),.96) 0%, rgba(var(--ink-rgb),.88) 62%, rgba(var(--ink-rgb),0) 100%);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.hero { position: absolute; z-index: 1; left: 50%; top: calc(var(--safe-t) + 6px); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.mascot-head { --m: 98px; cursor: pointer; transition: transform .45s var(--spring); }
.status-pill {
  position: relative; margin-top: -14px; min-width: 172px; max-width: min(72vw, 320px); padding: 8px 18px 7px; border-radius: 18px; text-align: center;
  background: rgba(var(--glass-rgb),.92); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(var(--fg-rgb),.1); transition: transform .45s var(--spring);
}
.status-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.status-dot[data-status="live"] { background: var(--sage-2); box-shadow: 0 0 8px rgba(143,174,140,.9); }
.status-dot[data-status="connecting"] { background: #FBBF24; }
.status-line { position: relative; display: grid; height: 19px; overflow: hidden; font-size: 13px; color: var(--muted); }
.status-text { position: relative; grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .25s var(--ease-out), opacity .25s ease; }
.status-text.is-enter { transform: translateY(70%); opacity: 0; }
.status-text.is-leave { transform: translateY(-70%); opacity: 0; }
.status-text.is-busy::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--orb); vertical-align: middle; animation: blinkDot 1s ease-in-out infinite; }
@keyframes blinkDot { 50% { opacity: .2; } }
body:not([data-view="chat"]) .mascot-head { transform: scale(.52); transform-origin: 50% 0; }
body:not([data-view="chat"]) .status-pill { transform: translateY(-46px) scale(.92); }
body:not([data-view="chat"]) { --head-h: calc(var(--safe-t) + 104px); }
.credits-pill { color: var(--fg); }
.credits-pill svg { width: 16px; height: 16px; color: var(--gold); }
.credits-pill.is-low { border-color: rgba(227,183,122,.6); background: rgba(227,183,122,.16); }
.credits-pill.is-bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.14); } }

/* ---------- Main scroller ---------- */
.main { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--head-h); view-transition-name: main;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--head-h) - 44px), #000 calc(var(--head-h) + 4px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--head-h) - 44px), #000 calc(var(--head-h) + 4px)); }
body[data-view="chat"] .main { padding-bottom: calc(var(--comp-h) + 12px); }
.main:focus-visible { outline: none; }
.view { min-height: 100%; }
.container { width: 100%; max-width: var(--col); margin: 0 auto; padding: 8px 16px calc(var(--safe-b) + 32px); }
.h2 { font-size: 22px; font-weight: 750; line-height: 1.3; letter-spacing: -.02em; }
.card { border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(var(--fg-rgb),.06); }
.stagger { animation: cardIn .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.view-enter { animation: viewIn .32s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
::view-transition-old(main) { animation: vtOut .18s ease both; }
::view-transition-new(main) { animation: vtIn .34s var(--ease-out) both; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation-duration: .3s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Chat ---------- */
.view-chat { display: flex; flex-direction: column; }
.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: var(--col); margin: 0 auto; padding: 20px 16px 8px; }
.welcome-title { font-size: 28px; line-height: 1.25; font-weight: 750; letter-spacing: -.03em; text-align: center; margin-bottom: 6px; }
.welcome-sub { font-size: 14px; color: var(--muted); text-align: center; max-width: 420px; margin-bottom: 22px; }
.welcome-q { font-size: 17px; line-height: 1.45; color: rgba(var(--fg-rgb),.92); text-align: center; max-width: 440px; margin-bottom: 8px; text-wrap: balance; }
.checkin { width: 100%; margin-bottom: 18px; padding: 14px 16px; border-radius: 22px 22px 22px 8px; background: var(--bubble-bot); border: 1px solid var(--line-soft); font-size: 15px; line-height: 1.5; color: rgba(var(--fg-rgb),.92); }
.checkin-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sage-light); margin-bottom: 4px; letter-spacing: .02em; }
.checkin-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(var(--fg-rgb),.06); font-size: 13px; font-weight: 600; transition: transform .2s var(--ease-out), background-color .2s; }
.chip:hover { background: rgba(var(--fg-rgb),.1); }
.chip:active { transform: scale(.96); }
.chip-sage { background: rgba(90,117,88,.3); border-color: rgba(168,199,165,.4); color: #E4F1E2; }
.suggestions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.suggestion { text-align: left; padding: 13px 16px; border-radius: 18px; background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(var(--fg-rgb),.9); transition: background-color .2s, border-color .2s, transform .2s var(--ease-out); }
.suggestion:hover { background: rgba(var(--fg-rgb),.08); border-color: var(--line-strong); }
.suggestion:active { transform: scale(.985); }
.suggestion:disabled { opacity: .55; cursor: default; }

.thread { width: 100%; max-width: var(--col); margin: 0 auto; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.msg { position: relative; display: flex; flex-direction: column; }
.msg-user { align-items: flex-end; }
.msg-bot { align-items: flex-start; }
.msg + .msg-user, .msg-user + .msg-bot { margin-top: 6px; }
.bubble { position: relative; max-width: 84%; padding: 12px 16px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; -webkit-touch-callout: none; }
.msg-bot .bubble { background: var(--bubble-bot); border: 1px solid var(--line-soft); color: rgba(var(--fg-rgb),.93); border-radius: 24px; }
.msg-user .bubble { background: var(--bubble-user); color: var(--bubble-user-ink); border-radius: 24px; }
.bubble img.msg-photo { display: block; max-width: 220px; width: 100%; border-radius: 16px; margin: -4px -6px 8px; }
.msg-user.is-new { animation: userIn .22s var(--ease-msg) both; }
.msg-bot.is-new { animation: botIn .5s var(--spring) both; transform-origin: 0 100%; }
@keyframes userIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes botIn { from { opacity: 0; transform: translateX(-14px) scale(.94); } to { opacity: 1; transform: none; } }
.w { animation: wordIn .28s ease both; }
@keyframes wordIn { from { opacity: 0; } to { opacity: 1; } }
.bubble.is-stopped::after { content: " · stopped"; color: var(--muted-2); font-size: 13px; }
.bubble-error { border-color: rgba(255,138,122,.35) !important; }
.typing { display: inline-flex; gap: 5px; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--bubble-bot); border: 1px solid var(--line-soft); }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--fg-rgb),.7); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }
.react-chip { position: absolute; bottom: -12px; z-index: 2; min-width: 30px; height: 28px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; background: #2A2C3D; border: 2px solid var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.35); animation: chipPop .45s var(--spring) both; }
.msg-user .react-chip { right: 6px; }
.msg-bot .react-chip { left: 10px; }
.msg.has-react { margin-bottom: 12px; }
@keyframes chipPop { from { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }
.react-picker { position: fixed; z-index: 70; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(var(--glass-rgb),.92); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: pickerIn .3s var(--spring) both; transform-origin: 50% 100%; }
.react-picker button { width: 40px; height: 44px; border-radius: 50%; border: 0; background: none; font-size: 24px; transition: transform .18s var(--spring), background-color .15s; }
.react-picker button:hover, .react-picker button:focus-visible { background: rgba(var(--fg-rgb),.1); transform: scale(1.18); }
@keyframes pickerIn { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }

/* action cards + sources */
.acts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 84%; width: 320px; }
@media (min-width: 768px) { .acts { width: 400px; } }
.act { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 18px; background: rgba(90,117,88,.16); border: 1px solid rgba(168,199,165,.28); animation: actIn .5s var(--spring) both; }
.act-ico { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: rgba(168,199,165,.22); color: #E4F1E2; }
.act-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.act-body strong { display: block; font-size: 12px; font-weight: 600; color: var(--sage-light); letter-spacing: .02em; }
.act-btns { display: flex; gap: 6px; flex-shrink: 0; }
.act-btn { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(var(--fg-rgb),.06); font-size: 13px; font-weight: 600; }
.act-btn-primary { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.act.is-confirm { background: rgba(227,183,122,.12); border-color: rgba(227,183,122,.35); }
.act.is-confirm .act-ico { background: rgba(227,183,122,.25); }
.act.is-undone, .act.is-declined, .act.is-failed { background: rgba(var(--fg-rgb),.04); border-color: var(--line); }
.act.is-undone .act-ico, .act.is-declined .act-ico, .act.is-failed .act-ico { background: rgba(var(--fg-rgb),.08); color: var(--muted); }
.act.is-undone .act-body, .act.is-declined .act-body { color: var(--muted); }
@keyframes actIn { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
.act-ico.check { animation: pop .5s .1s var(--spring) both; }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 84%; }
.src { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 220px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: rgba(var(--fg-rgb),.85); background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line); animation: actIn .45s var(--spring) both; }
.src:hover { background: rgba(var(--fg-rgb),.1); }
.src b { font-weight: 600; color: var(--physical); }
.src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-saved { font-size: 12px; color: var(--muted); margin-top: 6px; padding-left: 6px; animation: actIn .45s var(--spring) both; }
.signin-card { max-width: 84%; margin-top: 8px; padding: 14px; border-radius: 20px; background: rgba(142,124,255,.12); border: 1px solid rgba(142,124,255,.3); font-size: 14px; animation: actIn .5s var(--spring) both; }
.signin-card .chip { margin-top: 10px; margin-right: 6px; }

/* ---------- Composer ---------- */
.composer-wrap { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; padding: 18px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);
  background: linear-gradient(0deg, rgba(var(--ink-rgb),.9) 30%, rgba(var(--ink-rgb),0)); }
.composer-wrap > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.composer { display: flex; align-items: flex-end; gap: 4px; min-height: 56px; padding: 6px; border-radius: 28px; background: rgba(var(--glass-rgb),.66); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 12px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(var(--fg-rgb),.08); transition: border-color .2s; }
.composer:focus-within { border-color: rgba(207,224,247,.35); }
.comp-btn { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; color: rgba(var(--fg-rgb),.85); display: flex; align-items: center; justify-content: center; transition: background-color .2s, transform .2s var(--ease-out); }
.comp-btn:hover { background: rgba(var(--fg-rgb),.08); }
.comp-btn:active { transform: scale(.9); }
.comp-btn svg { width: 24px; height: 24px; }
.mic-btn { color: var(--muted); }
.mic-btn[aria-pressed="true"] { color: var(--fg); background: rgba(255,138,122,.25); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255,138,122,.12); } }
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 150px; margin: 0; padding: 11px 6px; border: 0; background: transparent; resize: none; font-size: 17px; line-height: 22px; color: var(--fg); overflow-y: auto; }
.composer textarea:focus-visible { outline: none; }
.composer:has(textarea:focus-visible) { border-color: rgba(168,199,165,.55); box-shadow: 0 0 0 3px rgba(168,199,165,.16); }
.composer textarea::placeholder { color: var(--muted-2); }
.send-btn { position: relative; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--bubble-user); color: var(--bubble-user-ink); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--spring), opacity .2s, background-color .25s; }
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn:not(:disabled):active { transform: scale(.9); }
.send-btn svg { width: 22px; height: 22px; transition: transform .3s var(--spring), opacity .2s; }
.i-stop { position: absolute; width: 14px; height: 14px; border-radius: 3.5px; background: var(--bubble-user-ink); transform: scale(0) rotate(-45deg); opacity: 0; transition: transform .35s var(--spring), opacity .2s; }
.send-btn.is-stop { opacity: 1; }
.send-btn.is-stop svg { transform: scale(0) rotate(45deg); opacity: 0; }
.send-btn.is-stop .i-stop { transform: none; opacity: 1; }
.attach-preview { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px; width: max-content; border-radius: 18px; background: rgba(var(--glass-rgb),.8); border: 1px solid var(--line-strong); animation: actIn .4s var(--spring) both; margin-left: 0 !important; }
.attach-preview img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.attach-note { font-size: 12px; color: var(--muted); padding-right: 8px; }
.attach-x { position: absolute; top: -8px; left: 44px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: #3A3C52; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 9px 10px 9px 16px; border-radius: 20px; font-size: 13px; background: rgba(227,183,122,.14); border: 1px solid rgba(227,183,122,.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: actIn .45s var(--spring) both; }
.nudge .chip { flex-shrink: 0; white-space: nowrap; height: 30px; background: var(--gold); color: #1B1407; border-color: var(--gold); }

/* ---------- Finance ---------- */
.view-finance { display: flex; flex-direction: column; gap: 16px; }
.card-hero { padding: 20px; }
.nw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nw-row { margin-top: 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nw-value { font-size: 38px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.badge-sage { padding: 3px 9px; border-radius: 99px; background: rgba(90,117,88,.25); border: 1px solid rgba(168,199,165,.35); font-size: 12px; font-weight: 600; color: var(--sage-light); }
.badge-sage.is-down { background: rgba(255,138,122,.14); border-color: rgba(255,138,122,.35); color: var(--danger); }
.meter { margin-top: 14px; height: 8px; width: 240px; max-width: 100%; border-radius: 99px; background: rgba(var(--fg-rgb),.07); overflow: hidden; }
.meter-fill, .usage-fill, .goal-bar > div { height: 100%; width: 100%; border-radius: 99px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.meter-fill { background: linear-gradient(90deg, var(--sage), var(--sage-light)); }
.meter-label { margin-top: 6px; font-size: 12px; color: var(--muted); }
.spark svg { display: block; overflow: visible; }
.spark path.line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 1.4s .2s var(--ease-out) forwards; }
.spark polygon { opacity: 0; animation: fadeIn .8s .6s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.spark-desktop { display: none; }
.spark-mobile { margin-top: 16px; }
.spark-mobile svg { width: 100%; height: auto; }
.btn-row { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn { height: 42px; padding: 0 18px; border-radius: 99px; font-size: 14px; font-weight: 650; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .15s var(--ease-out), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--accent-bg); color: var(--accent-fg); }
.btn-primary:hover { background: #EEF2FF; }
.btn-secondary { background: rgba(var(--fg-rgb),.08); border-color: var(--line-strong); font-weight: 550; }
.btn-secondary:hover { background: rgba(var(--fg-rgb),.12); }
.btn-danger { background: rgba(255,138,122,.1); border-color: rgba(255,138,122,.35); color: var(--danger); font-weight: 600; }
.btn-danger.is-armed { background: var(--danger); color: #2A0B06; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.grow { flex: 1; }
.card-list { overflow: hidden; }
.list-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-title { font-size: 14px; font-weight: 650; }
.list-count { font-size: 12px; color: var(--muted); }
.log-list > li { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); animation: cardIn .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
.log-list > li:first-child { border-top: 0; }
.log-main { font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; }
.log-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.log-dot { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: rgba(var(--fg-rgb),.06); color: rgba(var(--fg-rgb),.6); font-variant-numeric: tabular-nums; }
.log-dot.is-high { background: rgba(90,117,88,.25); color: var(--sage-light); }
.log-dot.is-neg { background: rgba(255,138,122,.12); color: var(--danger); }

/* ---------- Goals ---------- */
.view-goals { display: grid; gap: 14px; align-content: start; }
.goals-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.goal-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.goal { position: relative; border-radius: 20px; padding: 16px; background: var(--card); border: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: box-shadow .2s, border-color .2s, opacity .2s; animation: cardIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
.goal.is-dragging { z-index: 5; border-color: rgba(var(--fg-rgb),.22); box-shadow: 0 20px 48px rgba(0,0,0,.45); cursor: grabbing; transition: none; animation: none; background: var(--card-solid); }
.goal.is-flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(168,199,165,.7); } 100% { box-shadow: 0 0 0 14px rgba(168,199,165,0); } }
.goal-top { display: flex; align-items: center; justify-content: space-between; }
.dim-chip { font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid; line-height: 1.5; background: transparent; }
.dim-Financial { background: rgba(90,117,88,.22); border-color: rgba(168,199,165,.35); color: var(--sage-light); }
.dim-Physical { background: rgba(140,174,236,.15); border-color: rgba(140,174,236,.25); color: var(--physical); }
.dim-Spiritual { background: rgba(201,167,255,.15); border-color: rgba(201,167,255,.25); color: var(--spiritual); }
.dim-Heart { background: rgba(255,180,163,.15); border-color: rgba(255,180,163,.25); color: var(--heart); }
.goal-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-title { margin-top: 12px; font-size: 15px; font-weight: 550; line-height: 1.3; border-radius: 6px; padding: 1px 0; cursor: text; user-select: text; -webkit-user-select: text; }
.goal-title:focus { outline: 1px dashed rgba(var(--fg-rgb),.3); outline-offset: 3px; }
.goal-bar { margin-top: 12px; height: 7px; border-radius: 99px; background: rgba(var(--fg-rgb),.07); overflow: hidden; }
.bar-Financial { background: linear-gradient(90deg, var(--sage), var(--sage-light)); } .bar-Physical { background: var(--physical); } .bar-Spiritual { background: var(--spiritual); } .bar-Heart { background: var(--heart); }
.goal-actions { margin-top: 12px; display: flex; gap: 8px; }
.mini-btn { font-size: 12px; padding: 0 12px; height: 30px; border-radius: 99px; background: rgba(var(--fg-rgb),.08); border: 1px solid var(--line); transition: background-color .2s, color .2s; }
.mini-btn:hover { background: rgba(var(--fg-rgb),.12); }
.mini-btn-quiet { background: rgba(var(--fg-rgb),.04); border-color: var(--line-soft); color: rgba(var(--fg-rgb),.65); }
.goals-hint { border-radius: 18px; padding: 12px; background: rgba(var(--fg-rgb),.03); border: 1px dashed var(--line-soft); font-size: 12px; color: var(--muted); text-align: center; }
.rem-list li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.rem-list li:first-child { border-top: 0; }
.rem-list li.is-due { background: rgba(227,183,122,.08); }
.rem-when { font-size: 12px; color: var(--muted); }
.rem-text { flex: 1; min-width: 0; }
.rem-empty { padding: 14px 18px; font-size: 13px; color: var(--muted); }

/* ---------- Memory ---------- */
.view-memory { display: grid; gap: 14px; align-content: start; }
.mem-list { display: grid; gap: 10px; }
.mem-list li { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); animation: cardIn .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); transition: opacity .25s, transform .25s; }
.mem-list li.is-leaving { opacity: 0; transform: translateX(20px) scale(.97); }
.mem-text { flex: 1; font-size: 15px; }
.mem-date { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.empty { padding: 24px; border-radius: 20px; text-align: center; font-size: 14px; color: var(--muted); background: rgba(var(--fg-rgb),.03); border: 1px dashed var(--line); }
.empty .btn { margin-top: 12px; }

/* ---------- Vault ---------- */
.vault-card { position: relative; overflow: hidden; border-radius: 24px; padding: 22px; min-height: 420px; }
.dot-grid { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 24px 24px; pointer-events: none; }
.vault-inner { position: relative; }
.vault-sub { margin-top: 6px; font-size: 14px; color: var(--muted); max-width: 540px; }
.vault-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.vault-grid li { animation: cardIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
.frag { display: block; width: 100%; text-align: left; border-radius: 18px; padding: 16px; background: rgba(0,0,0,.2); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease-out); }
.frag:hover { border-color: rgba(var(--fg-rgb),.16); }
.frag[aria-pressed="true"] { border-color: rgba(168,199,165,.5); box-shadow: 0 0 0 1px rgba(168,199,165,.25), 0 12px 32px rgba(0,0,0,.3); transform: translateY(-2px); }
.frag-top { display: flex; align-items: center; justify-content: space-between; }
.frag-icon { width: 36px; height: 36px; border-radius: 12px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.frag-tag { font-size: 11px; padding: 3px 9px; border-radius: 99px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line); color: rgba(var(--fg-rgb),.65); }
.frag-title { display: block; margin-top: 12px; font-size: 15px; font-weight: 550; }
.frag-desc { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 55; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(4,4,10,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s ease both; }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); padding: calc(var(--safe-t) + 16px) 14px calc(var(--safe-b) + 16px) calc(var(--safe-l) + 14px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
  background: rgba(var(--glass-rgb),.86); border-right: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: 20px 0 60px rgba(0,0,0,.5); animation: drawerIn .42s var(--ease-out) both; }
.drawer.is-closing .drawer-panel { animation: drawerOut .25s ease both; }
.drawer.is-closing .drawer-backdrop { animation: fadeOut .25s ease both; }
@keyframes drawerIn { from { transform: translateX(-104%); } to { transform: none; } }
@keyframes drawerOut { to { transform: translateX(-104%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
.drawer-account { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.05); text-align: left; }
.drawer-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drawer-who strong { font-size: 15px; }
.drawer-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; background: linear-gradient(135deg, var(--sage), #3B3F7A); border: 1px solid var(--line-strong); }
.avatar-lg { width: 52px; height: 52px; font-size: 20px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 14px; font-size: 15px; font-weight: 550; color: rgba(var(--fg-rgb),.85); transition: background-color .2s; }
.drawer-nav a:hover { background: rgba(var(--fg-rgb),.06); }
.drawer-nav a[aria-current="page"] { background: rgba(var(--fg-rgb),.1); color: var(--fg); }
.drawer-nav li { animation: cardIn .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms + 80ms); }
.drawer-sep { height: 1px; margin: 6px 12px; background: var(--line); }
.drawer-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.drawer-model { width: 100%; font-size: 11px; color: var(--muted-2); }

/* ---------- Sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(4,4,10,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s ease both; }
.sheet-panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - var(--safe-t) - 24px); overflow-y: auto; border-radius: 30px 30px 0 0; padding: 12px 20px calc(20px + var(--safe-b)); border: 1px solid var(--line-strong); border-bottom: 0;
  box-shadow: 0 -12px 48px rgba(0,0,0,.5); background: rgba(var(--glass-rgb),.92); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); animation: sheetUp .5s var(--ease-out) both; }
.sheet.is-closing .sheet-panel { animation: sheetDown .28s ease both; }
.sheet.is-closing .sheet-backdrop { animation: fadeOut .28s ease both; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { to { transform: translateY(100%); } }
.sheet-handle { width: 40px; height: 5px; border-radius: 99px; background: rgba(var(--fg-rgb),.22); margin: 0 auto 16px; }
.sheet-title { font-size: 20px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }
.sheet-desc { margin-top: 3px; font-size: 13px; color: var(--muted); }
.sheet-form { margin-top: 16px; display: grid; gap: 12px; }
.field { height: 48px; border-radius: 16px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line-strong); padding: 0 16px; font-size: 16px; color: var(--fg); transition: border-color .2s; }
.field::placeholder { color: rgba(var(--fg-rgb),.45); }
.field:focus { border-color: rgba(168,199,165,.6); }
.field[aria-invalid="true"] { border-color: rgba(255,138,122,.7); }
.field-error { font-size: 12px; color: var(--danger); margin-top: -4px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 8px; }
.sheet-actions-col { flex-direction: column; margin-top: 18px; }
.topup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topup-balance { text-align: right; }
.topup-num { display: block; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.topup-unit { font-size: 12px; color: var(--muted); }
.usage { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line); }
.usage-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.usage-row span:last-child { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.usage-bar { margin-top: 8px; height: 8px; border-radius: 99px; background: rgba(var(--fg-rgb),.07); overflow: hidden; }
.usage-fill { background: linear-gradient(90deg, var(--orb), var(--physical)); }
.usage-note { margin-top: 8px; font-size: 12px; color: var(--muted-2); }
.packs { margin-top: 14px; display: grid; gap: 10px; }
.pack { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 20px; background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line); animation: cardIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.pack.is-featured { background: linear-gradient(135deg, rgba(142,124,255,.18), rgba(90,117,88,.14)); border-color: rgba(142,124,255,.4); }
.pack-main { flex: 1; min-width: 0; }
.pack-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.pack-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--gold); color: #1B1407; }
.pack-credits { font-size: 13px; color: rgba(var(--fg-rgb),.85); margin-top: 2px; }
.pack-credits b { font-variant-numeric: tabular-nums; }
.pack-approx { font-size: 12px; color: var(--muted); }
.pack-bonus { color: var(--sage-light); font-weight: 600; }
.pack-buy { min-width: 92px; }
.pack-buy.is-loading { opacity: .6; pointer-events: none; }
.topup-fine { margin-top: 12px; font-size: 12px; color: var(--muted-2); text-align: center; }
.topup-close { width: 100%; margin-top: 12px; }
.acct-head { display: flex; align-items: center; gap: 14px; }
.acct-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-stats div { padding: 12px; border-radius: 16px; background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line); }
.acct-stats dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.acct-stats dd { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.acct-note { margin-top: 12px; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + var(--safe-b)); height: 40px; padding: 0 16px; border-radius: 99px; display: flex; align-items: center; white-space: nowrap; transform: translateX(-50%);
  background: rgba(var(--glass-rgb),.92); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 32px rgba(0,0,0,.4); font-size: 13px; font-weight: 550; animation: toastIn .4s var(--spring) both; }
body[data-view="chat"] .toast { bottom: calc(var(--comp-h) + 16px); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 90; padding: 12px 16px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line-strong); font-size: 13px; }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .rail { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px 0; width: var(--rail-w); flex-shrink: 0; background: rgba(var(--glass-rgb),.55); border-right: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-y: auto; scrollbar-width: none; }
  .rail-logo img { display: block; border-radius: 10px; }
  .rail-nav { display: flex; flex-direction: column; gap: 6px; }
  .rail-btn { position: relative; width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 19px; transition: background-color .2s, transform .2s var(--ease-out); }
  .rail-btn:hover { background: rgba(var(--fg-rgb),.07); }
  .rail-btn:active { transform: scale(.94); }
  .rail-btn[aria-current="page"] { background: rgba(var(--fg-rgb),.1); box-shadow: 0 0 0 1px var(--line-strong); }
  .rail-btn[aria-current="page"]::after { content: ""; position: absolute; right: -15px; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 99px; background: var(--sage-light); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  :root { --head-h: 164px; }
  body:not([data-view="chat"]) { --head-h: 110px; }
  .mascot-head { --m: 106px; }
  .container { padding: 8px 24px 40px; }
  .suggestions { grid-template-columns: 1fr 1fr; }
  .bubble { max-width: 72%; }
  .acts, .sources { max-width: 72%; }
  .card-hero { padding: 24px; }
  .spark-desktop { display: block; }
  .spark-mobile { display: none; }
  .goal-grid, .vault-grid { grid-template-columns: 1fr 1fr; }
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 30px; border-bottom: 1px solid var(--line-strong); padding-bottom: 22px; }
  .composer-wrap { padding-left: 24px; padding-right: 24px; }
  .auth-title { font-size: 48px; }
  .mascot-xl { --m: 220px; }
}
@media (max-width: 359px) { .welcome-title { font-size: 24px; } .code-boxes input { width: 42px; } .status-pill { min-width: 150px; } }
@media (max-height: 700px) { .mascot-xl { --m: 150px; } .auth-mascot { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .nebula, .mascot-ring, .typing i { animation: none !important; }
  .mascot-ring { display: none; }
  /* Reduce Motion: no bouncing, but the lion still gently floats and glows (and its slow idle loop plays). */
  .mascot-float { animation: bob-soft 6s ease-in-out infinite !important; }
  .mascot-glow { animation: glow-soft 5s ease-in-out infinite !important; }
  .mascot-disc.is-still img { animation: lion-breathe 6s ease-in-out infinite !important; }
  ::view-transition-old(main), ::view-transition-new(main) { animation: none !important; }
}
@media (hover: none) { .rail-btn:hover, .glass-btn:hover { background: rgba(var(--fg-rgb),.08); } }
@media (forced-colors: active) { .status-dot, .meter-fill, .goal-bar > div, .usage-fill { forced-color-adjust: none; } }

/* ---------- Legal + 404 pages ---------- */
.page-plain { overflow: auto; }
.plain { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: calc(var(--safe-t) + 40px) 20px calc(var(--safe-b) + 48px); }
.plain h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.plain h2 { font-size: 18px; font-weight: 700; margin: 26px 0 8px; }
.plain p, .plain li { color: rgba(var(--fg-rgb),.82); font-size: 15px; margin-bottom: 10px; }
.plain ul { list-style: disc; padding-left: 20px; }
.plain a { color: var(--physical); text-decoration: underline; }
.review { padding: 12px 14px; border-radius: 14px; background: rgba(227,183,122,.14); border: 1px solid rgba(227,183,122,.4); color: #F6DDB8 !important; font-size: 14px !important; }
.page-404 { overflow: auto; }
.lost { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; }
.lost-orb { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--fg-rgb),.2), 0 0 40px rgba(142,124,255,.45); object-fit: cover; margin-bottom: 24px; animation: bob 4s ease-in-out infinite; }
/* first paint: keep the cosmos, fade the app/auth in once /api/me answers (max ~1.2s) */
body.is-booting .app, body.is-booting .auth { opacity: 0; }
.app, .auth { transition: opacity .35s var(--ease-out); }
.toast-undo { margin-left: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(168,199,165,.2); color: #E4F1E2; font-size: 12px; font-weight: 650; }
.goal-meta { margin-top: 4px; font-size: 12px; color: var(--muted-2); }
.checkin-text { font-size: 14.5px; line-height: 1.45; }
.drawer-legal { width: 100%; margin-top: 0; } .drawer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Interac e-Transfer step ---------- */
.topup-pane.is-enter { animation: stepIn .38s var(--ease-out) both; }
.topup-pane.is-back { animation: paneBack .38s var(--ease-out) both; }
@keyframes paneBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.et-head { display: flex; align-items: center; gap: 12px; }
.et-back { width: 40px; height: 40px; flex-shrink: 0; }
.et-back svg { width: 20px; height: 20px; }
.et-titles { flex: 1; min-width: 0; }
.et-status { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 650;
  background: rgba(227,183,122,.14); border: 1px solid rgba(227,183,122,.4); color: #F6DDB8; transition: background .3s, border-color .3s, color .3s; }
.et-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blinkDot 1.4s ease-in-out infinite; }
.et-status[data-status="approved"] { background: rgba(168,199,165,.18); border-color: rgba(168,199,165,.5); color: #DDEEDB; }
.et-status[data-status="approved"] i, .et-status[data-status="expired"] i, .et-status[data-status="rejected"] i, .et-status[data-status="cancelled"] i { animation: none; }
.et-status[data-status="expired"], .et-status[data-status="cancelled"] { background: rgba(var(--fg-rgb),.06); border-color: var(--line-strong); color: var(--muted); }
.et-status[data-status="rejected"] { background: rgba(255,138,122,.12); border-color: rgba(255,138,122,.4); color: #FFC9C0; }
.et-status.is-changed { animation: bump .5s var(--spring); }
.et-steps { display: grid; gap: 10px; margin-top: 18px; }
.et-row { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  animation: cardIn .5s var(--ease-out) both; }
.et-row:nth-child(2) { animation-delay: 70ms; } .et-row:nth-child(3) { animation-delay: 140ms; }
.et-n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(142,124,255,.22); color: #DCD5FF; }
.et-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.et-label { font-size: 12px; color: var(--muted); }
.et-val { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.et-email { font-size: 15px; }
.et-code { font-size: 22px; letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--fg); }
.et-row-code { background: linear-gradient(135deg, rgba(142,124,255,.16), rgba(227,183,122,.10)); border-color: rgba(142,124,255,.35); }
.copy-btn { flex-shrink: 0; min-width: 70px; height: 36px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 650; background: rgba(var(--fg-rgb),.1); border: 1px solid var(--line-strong); transition: background .2s, transform .2s var(--spring); }
.copy-btn:hover { background: rgba(var(--fg-rgb),.16); }
.copy-btn:active { transform: scale(.94); }
.copy-btn.is-copied { background: rgba(168,199,165,.25); border-color: rgba(168,199,165,.55); color: #E4F1E2; animation: bump .4s var(--spring); }
.et-note { margin-top: 14px; font-size: 14px; line-height: 1.45; color: rgba(var(--fg-rgb),.85); }
.et-expiry { margin-top: 6px; font-size: 12.5px; color: var(--muted-2); }
.et-done { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 18px; background: rgba(90,117,88,.2); border: 1px solid rgba(168,199,165,.4); animation: actIn .5s var(--spring) both; }
.et-done div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: rgba(var(--fg-rgb),.85); }
.et-done b { font-size: 17px; color: var(--fg); }
.et-done-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--sage-light); color: #10200F; animation: pop .5s .1s var(--spring) both; }
.et.is-final .et-steps { opacity: .5; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); font-weight: 550; }
.btn-quiet:hover { color: var(--fg); }
.btn-quiet.is-armed { color: var(--danger); }
.et-waiting { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; text-align: left;
  background: rgba(227,183,122,.12); border: 1px solid rgba(227,183,122,.35); color: #F6DDB8; }
.et-waiting b { font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; }

/* ---------- /admin ---------- */
.page-admin { overflow: auto; }
.admin { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 48px); }
.admin-head { display: flex; align-items: center; gap: 12px; }
.admin-back img { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--fg-rgb),.18), 0 0 24px rgba(142,124,255,.45); }
.admin-title { flex: 1; min-width: 0; }
.admin-title h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.admin-title p { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.admin-refresh { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }
.admin-refresh.is-spinning { animation: spin .7s linear; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.stat span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat b { display: block; margin-top: 2px; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.admin-search { margin-top: 16px; display: grid; gap: 10px; }
.admin-search input { width: 100%; height: 48px; padding: 0 16px; border-radius: 16px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line-strong); color: var(--fg); font-size: 16px; }
.admin-search input:focus-visible { outline: none; border-color: rgba(168,199,165,.6); box-shadow: 0 0 0 3px rgba(168,199,165,.16); }
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-filters .chip[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.admin-hint { margin: 12px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.admin-list { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 768px) { .admin-list { grid-template-columns: 1fr 1fr; } .admin { padding-top: 32px; } }
.tu { padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); animation: cardIn .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.tu.is-pending { border-color: rgba(227,183,122,.35); background: linear-gradient(160deg, rgba(227,183,122,.08), var(--card) 60%); }
.tu-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tu-code { font-family: ui-monospace, Menlo, monospace; font-size: 21px; font-weight: 700; letter-spacing: .1em; }
.tu-amount { margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.tu-amount small { font-size: 13px; font-weight: 550; color: var(--muted); margin-left: 6px; }
.tu-meta { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.5; }
.tu-meta b { color: var(--fg); font-weight: 600; }
.tu-btns { display: flex; gap: 8px; margin-top: 14px; }
.tu-btns .btn { flex: 1; height: 44px; }
.tu .et-status { height: 26px; font-size: 12px; }
.btn-approve.is-armed { background: var(--sage-light); border-color: var(--sage-light); color: #10200F; }
.btn-reject { background: rgba(255,138,122,.1); border-color: rgba(255,138,122,.35); color: #FFC9C0; }
.btn-reject.is-armed { background: var(--danger); color: #2A0D08; border-color: var(--danger); }
.tu.is-flash { animation: flash 1s ease-out; }
.admin-audit { margin-top: 28px; }
.admin-audit h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.admin-audit ol { border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.admin-audit li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 14px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.admin-audit li:first-child { border-top: 0; }
.admin-audit time { color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-audit .au-act { font-weight: 650; }
.admin-audit .au-act[data-a="approve"] { color: var(--sage-light); } .admin-audit .au-act[data-a="reject"] { color: var(--danger); }
.admin-audit .au-detail { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- first name (onboarding step + Account sheet) ---------- */
#authName { text-align: center; }
.acct-name { display: grid; gap: 6px; margin: 4px 0 14px; }
.acct-name-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--fg-rgb),.6); }
.acct-name-row { display: flex; gap: 8px; }
.acct-name-row .field { flex: 1; min-width: 0; }
.acct-name-row .btn { flex: none; height: 48px; padding: 0 18px; }
.acct-name .field-error { margin-top: 0; min-height: 0; }
.acct-name .field-error:empty { display: none; }

/* ---------- What Vision AI has learned about you (Memory view) ---------- */
.learned { margin-top: 28px; padding: 18px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.learned-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learned-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.learned-sub { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.learned-summary { font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 16px; background: rgba(168,199,165,.09); border: 1px solid rgba(168,199,165,.22); margin-bottom: 12px; }
.learned-summary b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage, #A8C7A5); margin-bottom: 4px; }
.learned-group { margin-top: 12px; }
.learned-group h4 { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(var(--fg-rgb),.6); margin-bottom: 6px; }
.learned-group ul { display: grid; gap: 6px; }
.learned-group li { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line); transition: opacity .25s, transform .25s; }
.learned-group li.is-leaving { opacity: 0; transform: translateX(16px); }
.learned-text { flex: 1; min-width: 0; font-size: 14px; }
.learned-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.learned-group li .field { flex: 1; height: 40px; font-size: 14px; }
.learned-empty { font-size: 14px; color: var(--muted); padding: 8px 0; }
#learnedClear { margin-top: 14px; }
.learned.is-paused .learned-groups, .learned.is-paused .learned-summary { opacity: .6; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 44px; height: 26px; border-radius: 999px; background: rgba(var(--fg-rgb),.16); position: relative; transition: background-color .2s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s var(--spring, ease); }
.switch input:checked + .switch-track { background: #6f9d6b; }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid #fff; outline-offset: 2px; }
.switch-label { font-size: 13px; color: rgba(var(--fg-rgb),.8); }
.mem-list li.is-pinned { border-color: rgba(168,199,165,.35); }

/* crisis support card (9-8-8 / 911) */
.crisis { margin-top: 8px; align-self: stretch; display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(255,138,122,.1); border: 1px solid rgba(255,138,122,.35); font-size: 14px; text-align: left; }
.crisis strong { font-size: 15px; }
.crisis-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-user .crisis { margin-left: auto; max-width: 420px; }

/* ================= Music (device-only tracks) ================= */
.music-drop { margin-top: 14px; border-radius: 22px; border: 1.5px dashed var(--line-strong); background: rgba(var(--fg-rgb),.03); transition: border-color .2s, background-color .2s; }
.music-drop.is-over { border-color: rgba(168,199,165,.8); background: rgba(168,199,165,.08); }
.music-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; font-size: 14px; color: var(--muted); }
.music-empty strong { color: var(--fg); font-size: 16px; }
.music-empty .btn { margin-top: 8px; }
.music-empty-ico { font-size: 34px; }
.music-deck { padding: 16px; display: grid; gap: 10px; }
.music-drop:has(.music-deck:not([hidden])) { border-style: solid; border-color: var(--line); background: var(--card); }
.deck-now { display: flex; align-items: center; gap: 12px; }
.deck-art { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, #3b2f7a, #1d3b33); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb),.12); flex: none; }
.deck-text { display: grid; min-width: 0; }
.deck-text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-text span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deck-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 78px; }
.deck-btns { display: flex; align-items: center; gap: 6px; }
.deck-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(var(--fg-rgb),.07); color: var(--fg); display: grid; place-items: center; transition: background-color .2s, transform .15s; }
.deck-btn:hover { background: rgba(var(--fg-rgb),.12); }
.deck-btn:active { transform: scale(.93); }
.deck-btn svg { width: 20px; height: 20px; }
.deck-btn[aria-pressed="true"] { color: var(--sage-light, #cfe3cc); background: rgba(168,199,165,.18); }
.deck-play { width: 52px; height: 52px; background: var(--accent-bg); color: var(--accent-fg); }
.deck-play:hover { background: #EEF2FF; }
.deck-play svg { width: 24px; height: 24px; }
.i-pause { display: none; }
.is-playing > .i-play { display: none; }
.is-playing > .i-pause { display: block; }
.deck-vol { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.deck-vol svg { width: 18px; height: 18px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; --p: 0%; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #cfe3cc var(--p), rgba(var(--fg-rgb),.14) var(--p)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(var(--fg-rgb),.14); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: #cfe3cc; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.range-sm { width: 90px; }
#mVolume { background: transparent; }
#mVolume::-webkit-slider-runnable-track { background: rgba(var(--fg-rgb),.18); }
.track-list { display: grid; gap: 8px; margin-top: 14px; }
.track { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.track.is-current { border-color: rgba(168,199,165,.45); background: rgba(168,199,165,.07); }
.track-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; background: none; color: inherit; text-align: left; border-radius: 12px; }
.track-text { display: grid; min-width: 0; }
.track-text strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-text span { font-size: 12px; color: var(--muted); }
.track-eq, .mini-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 18px; height: 16px; flex: none; }
.track-eq i, .mini-eq i { width: 4px; height: 30%; border-radius: 2px; background: rgba(var(--fg-rgb),.4); }
.track.is-current .track-eq i, .mini-player .mini-eq i { background: #cfe3cc; }
.track.is-playing .track-eq i, body.is-playing-music .mini-eq i { animation: eq .9s ease-in-out infinite; }
.track-eq i:nth-child(2), .mini-eq i:nth-child(2) { animation-delay: -.3s !important; }
.track-eq i:nth-child(3), .mini-eq i:nth-child(3) { animation-delay: -.6s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.music-foot { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* mini-player: mobile = bar above the composer (or the bottom edge on other views) */
.mini-player { position: absolute; z-index: 16; left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); max-width: var(--col); margin: 0 auto; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-radius: 18px; background: rgba(var(--glass-rgb),.82); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; animation: cardIn .4s var(--ease-out) both; }
body[data-view="chat"] .mini-player { bottom: calc(var(--comp-h) - 6px); }
.mini-progress { position: absolute; left: 0; top: 0; height: 2px; width: var(--p, 0%); background: #cfe3cc; transition: width .25s linear; }
.mini-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; }
.mini-text { display: grid; min-width: 0; }
.mini-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btns { display: flex; align-items: center; gap: 2px; }
.mini-ctl { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--fg); display: grid; place-items: center; }
.mini-ctl svg { width: 20px; height: 20px; }
.mini-play { background: var(--accent-bg); color: var(--accent-fg); width: 38px; height: 38px; }
body.has-player .main { padding-bottom: calc(var(--safe-b) + 84px); }
body.has-player[data-view="chat"] .main { padding-bottom: calc(var(--comp-h) + 74px); }
body.has-player .toast { bottom: calc(var(--safe-b) + 80px); }
body.has-player[data-view="chat"] .toast { bottom: calc(var(--comp-h) + 70px); }
@media (min-width: 768px) {
  /* desktop: the player lives in the sidebar */
  .mini-player { position: fixed; left: 0; right: auto; bottom: 18px !important; width: var(--rail-w); height: auto; margin: 0; padding: 12px 0 10px; flex-direction: column; gap: 6px; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 20; }
  .mini-progress { left: 14px; right: 14px; top: 0; width: auto; height: 2px; background: rgba(var(--fg-rgb),.12); }
  .mini-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: #cfe3cc; }
  .mini-now { flex: none; justify-content: center; }
  .mini-text { display: none; }
  .mini-eq { width: 22px; height: 18px; }
  .mini-btns { flex-direction: column; gap: 4px; }
  .mini-ctl { width: 36px; height: 36px; }
  .mini-ctl svg { width: 18px; height: 18px; }
  body.has-player[data-view="chat"] .main { padding-bottom: calc(var(--comp-h) + 12px); }
  body.has-player:not([data-view="chat"]) .main { padding-bottom: 0; }
  body.has-player .toast { bottom: 24px; }
  body.has-player[data-view="chat"] .toast { bottom: calc(var(--comp-h) + 16px); }
  .rail { padding-bottom: 190px; }
}

/* the vibing lion: bobs on the beat, glow pulses with the music */
.mascot-head.is-vibing .mascot-float { animation: none; transition: transform .08s linear; }
.mascot-head.is-vibing .mascot-glow { animation: none; opacity: var(--vibe, .6); transform: scale(calc(.92 + var(--vibe, .6) * .22)); background: radial-gradient(closest-side, rgba(255,200,90,.6), rgba(142,124,255,.35) 55%, transparent 72%); transition: opacity .08s linear, transform .08s linear; }
.mascot-head.is-vibing .mascot-ring { animation-duration: 1.6s; }
body.is-vibing .status-dot { background: #ffcf6e; box-shadow: 0 0 10px rgba(255,207,110,.8); }
@media (prefers-reduced-motion: reduce) {
  .mascot-head.is-vibing .mascot-float { transform: none !important; }
  .track.is-playing .track-eq i, body.is-playing-music .mini-eq i { animation: none; height: 60%; }
}

/* status pill: "+N" when several things run at once, tap to see them all */
.status-more { margin-left: 2px; height: 18px; min-width: 24px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(var(--fg-rgb),.1); color: var(--fg); font-size: 11px; font-weight: 700; line-height: 16px; }
.activity-list { margin-top: 6px; min-width: 210px; padding: 8px 10px; border-radius: 16px; background: rgba(var(--glass-rgb),.92); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,.4); display: grid; gap: 6px; font-size: 13px; animation: cardIn .25s var(--ease-out) both; }
.activity-list li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.activity-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orb); animation: blinkDot 1s ease-in-out infinite; flex: none; }
.activity-list li:first-child { font-weight: 650; }

/* =====================================================================
   Extras: daily ritual, Progress, Journal, History, quick replies, Settings, onboarding questions
   ===================================================================== */
/* segmented radio (onboarding + theme) */
.seg { display: grid; gap: 8px; }
.seg-2 { grid-template-columns: repeat(2, 1fr); } .seg-3 { grid-template-columns: repeat(3, 1fr); } .seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 6px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(var(--fg-rgb),.05); font-size: 13px; font-weight: 650; text-align: center; transition: background-color .2s, border-color .2s, transform .2s var(--spring); }
.seg span b { font-size: 20px; line-height: 1; font-weight: 400; }
.seg span small { font-size: 11px; font-weight: 500; color: var(--muted); }
.seg input:checked + span { background: rgba(143,174,140,.2); border-color: var(--sage-light); box-shadow: 0 0 0 3px rgba(143,174,140,.16); transform: translateY(-1px); }
.seg input:focus-visible + span { outline: 2px solid var(--sage-light); outline-offset: 2px; }
.seg-sm span { min-height: 42px; flex-direction: row; gap: 6px; }
.auth-about { gap: 12px; }
.about-q { display: grid; gap: 8px; text-align: left; }
.about-q legend { font-size: 13px; font-weight: 650; margin-bottom: 8px; color: rgba(var(--fg-rgb),.86); }

/* daily ritual card */
.ritual { width: 100%; margin-bottom: 14px; text-align: left; }
.ritual-form, .ritual-done { position: relative; padding: 16px; border-radius: 24px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(142,124,255,.16), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(90,117,88,.18), transparent 60%), rgba(var(--fg-rgb),.05);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(var(--fg-rgb),.08); }
.ritual[data-kind="evening"] .ritual-form { background: radial-gradient(120% 90% at 100% 0%, rgba(201,167,255,.18), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(140,174,236,.14), transparent 60%), rgba(var(--fg-rgb),.05); }
.ritual.is-pop .ritual-done, .ritual.is-pop .ritual-form { animation: ritualPop .55s var(--spring) both; }
@keyframes ritualPop { 0% { transform: scale(.96); opacity: .6; } 60% { transform: scale(1.012); } 100% { transform: none; opacity: 1; } }
.ritual-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ritual-label { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--sage-light); display: inline-flex; gap: 6px; align-items: center; }
.streak-badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(227,183,122,.16); color: var(--gold); border: 1px solid rgba(227,183,122,.3); white-space: nowrap; }
.streak-badge.is-new { background: rgba(var(--fg-rgb),.06); color: var(--muted); border-color: var(--line); font-weight: 600; }
.ritual-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ritual-q-col { flex-direction: column; align-items: stretch; gap: 6px; }
.ritual-qt { font-size: 13px; font-weight: 600; color: rgba(var(--fg-rgb),.84); }
.ritual-input { height: 44px; font-size: 15px; }
.ritual-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ritual-hint { font-size: 12px; color: var(--muted); }
.ritual-recall { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.ritual-recall b { color: rgba(var(--fg-rgb),.92); font-weight: 600; }
.rate { display: flex; gap: 6px; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-opt { width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line); font-size: 20px; transition: transform .2s var(--spring), background-color .2s, border-color .2s; }
.rate-opt:hover { transform: translateY(-2px); }
.rate input:checked + .rate-opt { background: rgba(143,174,140,.24); border-color: var(--sage-light); transform: scale(1.1); box-shadow: 0 6px 16px rgba(90,117,88,.35); }
.rate input:focus-visible + .rate-opt { outline: 2px solid var(--sage-light); outline-offset: 2px; }
.rate-energy .rate-opt { font-size: 15px; color: var(--physical); font-weight: 800; letter-spacing: -2px; }
.rate-energy input:checked + .rate-opt { background: rgba(140,174,236,.22); border-color: var(--physical); box-shadow: 0 6px 16px rgba(140,174,236,.3); }
.rate-sm .rate-opt { width: 34px; height: 34px; font-size: 17px; border-radius: 12px; }
.ritual-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ritual-done > div { flex: 1; min-width: 160px; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.ritual-done > div b { color: var(--fg); font-size: 14px; }
.ritual-done-ico { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sage-light); color: #10200F; font-weight: 800; flex-shrink: 0; }
.ritual-coach { margin-top: 12px; }
.ritual-done .ritual-coach { margin-top: 0; }
.ritual-inline { margin: 0; }

/* Progress */
.view-progress, .view-journal, .view-history { display: grid; gap: 14px; align-content: start; }
.streak-pill .streak-badge { height: 30px; font-size: 13px; }
.chart-card { overflow: hidden; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.lg-mood { background: var(--sage-2); } .lg-energy { background: var(--physical); }
.trend { padding: 10px 14px 14px; }
.trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-svg .grid { stroke: rgba(var(--fg-rgb),.07); stroke-width: 1; }
.trend-svg .axis { fill: var(--muted-2); font-size: 8px; font-family: var(--font); }
.ln-mood, .ln-energy { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ln-mood { stroke: var(--sage-2); } .ln-energy { stroke: var(--physical); stroke-dasharray: 4 3; opacity: .9; }
.dt-mood { fill: var(--sage-2); } .dt-energy { fill: var(--physical); }
.trend-svg path, .trend-svg circle { animation: fade .6s ease both; }
.chart-foot { margin-top: 6px; font-size: 12px; color: var(--muted); }
.chart-foot b { color: var(--fg); }
.chart-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.chart-empty span { font-size: 26px; }
.wheel-wrap { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 10px; padding: 8px 14px 16px; }
.wheel-wrap .wheel { width: 100%; display: flex; justify-content: center; }
.wheel-svg { width: 100%; max-width: 280px; height: auto; display: block; overflow: visible; }
.wheel-svg .ring { fill: none; stroke: rgba(var(--fg-rgb),.08); }
.wheel-svg .spoke { stroke: rgba(var(--fg-rgb),.08); }
.wheel-lbl { fill: rgba(var(--fg-rgb),.85); font-size: 12px; font-weight: 600; font-family: var(--font); }
.wheel-cur { stroke: var(--sage-light); stroke-width: 2; stroke-linejoin: round; transform-origin: 50% 50%; animation: wheelIn .7s var(--spring) both; }
.wheel-prev { fill: none; stroke: rgba(var(--fg-rgb),.35); stroke-dasharray: 4 4; }
.wheel-dot { stroke: var(--ink); stroke-width: 2; }
.wheel-empty { fill: var(--muted); font-size: 12px; font-family: var(--font); }
@keyframes wheelIn { from { transform: scale(.2); opacity: 0; } }
.wheel-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13px; width: 100%; max-width: 320px; }
.wheel-legend .wl-when { grid-column: 1 / -1; text-align: center; }
.wheel-legend li { display: flex; align-items: center; gap: 6px; }
.wheel-legend .wl-name { flex: 1; color: var(--muted); }
.wheel-legend small { font-size: 10px; font-weight: 700; }
.wheel-legend .wl-when { font-size: 11px; color: var(--muted-2); }
.up { color: var(--sage-light); } .down { color: var(--heart); }
.wheel-form { padding: 0 16px 16px; display: grid; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.wheel-slider { display: grid; grid-template-columns: 96px 1fr 24px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.wheel-slider output { text-align: right; font-variant-numeric: tabular-nums; }
.wheel-slider input { width: 100%; accent-color: var(--sage-2); }
.review-card .list-head { flex-wrap: wrap; }
#reviewBody { padding: 14px 16px 16px; display: grid; gap: 12px; }
.review-weeks { display: flex; gap: 6px; flex-wrap: wrap; }
.week-chip { height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); color: var(--muted); }
.week-chip.is-on { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.rv-range { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.rv-note { font-size: 15px; line-height: 1.5; font-weight: 500; }
.rv-summary { font-size: 14px; color: rgba(var(--fg-rgb),.8); }
.rv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rv-stats div { padding: 10px 6px; border-radius: 16px; background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line-soft); text-align: center; display: grid; gap: 2px; }
.rv-stats b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.rv-stats span { font-size: 11px; color: var(--muted); }
.rv-areas { display: grid; gap: 8px; }
.rv-area { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(var(--fg-rgb),.035); border: 1px solid transparent; }
.rv-area.is-focus { border-color: rgba(227,183,122,.45); background: rgba(227,183,122,.08); }
.rv-ico { font-size: 20px; width: 28px; text-align: center; }
.rv-main { flex: 1; display: grid; gap: 4px; min-width: 0; }
.rv-top { display: flex; justify-content: space-between; font-size: 14px; }
.rv-main small { font-size: 12px; color: var(--muted); }
.rv-bar { height: 6px; border-radius: 6px; background: rgba(var(--fg-rgb),.08); overflow: hidden; }
.rv-bar i { display: block; height: 100%; transform-origin: 0 50%; border-radius: 6px; transition: transform .8s var(--ease-out); }
.rv-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.rv-list { display: grid; gap: 4px; font-size: 14px; }
.rv-focus { padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(227,183,122,.16), rgba(142,124,255,.12)); border: 1px solid rgba(227,183,122,.3); display: grid; gap: 6px; }
.rv-focus-lbl { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.rv-focus p { font-size: 15px; line-height: 1.45; }
.rv-focus .btn-row { margin-top: 4px; }

/* Journal + History */
.lock-note { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); }
.journal-new { padding: 14px; display: grid; gap: 10px; }
.journal-text { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; width: 100%; }
.journal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.journal-new .btn { justify-self: start; }
.switch-sm .switch-track { width: 38px; height: 22px; }
.switch-sm .switch-track::after { width: 16px; height: 16px; }
.switch-sm input:checked + .switch-track::after { transform: translateX(16px); }
.switch-label { font-size: 13px; color: rgba(var(--fg-rgb),.8); }
.search-field { width: 100%; height: 44px; font-size: 15px; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%239a9db0' stroke-width='2'/%3E%3Cpath d='M16 16l4 4' stroke='%239a9db0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: 14px 50%; }
.journal-list, .history-list { display: grid; gap: 10px; }
.journal-item { padding: 14px 16px; display: grid; gap: 8px; animation: cardIn .35s var(--ease-out) both; }
.ji-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.ji-mood { font-size: 18px; }
.ji-text { font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ji-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ji-btns { display: flex; gap: 6px; }
.mini-btn.is-armed, .hi-del.is-armed { background: rgba(255,138,122,.18); border-color: rgba(255,138,122,.5); color: var(--danger); }
mark { background: rgba(227,183,122,.35); color: inherit; border-radius: 4px; padding: 0 2px; }
.history-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; animation: cardIn .35s var(--ease-out) both; }
.hi-main { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; padding: 10px; border-radius: 16px; background: none; border: 0; transition: background-color .2s; }
.hi-main:hover { background: rgba(var(--fg-rgb),.04); }
.hi-top { display: flex; align-items: center; gap: 8px; }
.hi-title { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; background: rgba(143,174,140,.22); color: var(--sage-light); }
.hi-snip { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hi-meta { font-size: 11px; color: var(--muted-2); }

/* quick-reply chips under the latest reply */
.quick-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; max-width: min(88%, 560px); }
.quick-chip { height: 32px; font-size: 13px; font-weight: 600; color: var(--sage-light); border-color: rgba(168,199,165,.35); background: rgba(90,117,88,.14); animation: chipIn .4s var(--spring) both; }
.quick-chip:nth-child(2) { animation-delay: .06s; } .quick-chip:nth-child(3) { animation-delay: .12s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(.94); } }
.mic-btn.is-live { color: var(--danger); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 50% { box-shadow: 0 0 0 6px rgba(255,138,122,.18); } }

/* Settings */
.sheet-settings { display: grid; gap: 4px; max-height: 88vh; overflow-y: auto; }
.set-group { padding: 12px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.set-group:first-of-type { border-top: 0; }
.set-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.set-text { display: grid; gap: 2px; flex: 1; }
.set-text b { font-size: 15px; font-weight: 600; }
.set-text small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.set-coach { display: grid; gap: 8px; }
.set-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 14px; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%239a9db0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 12px center; }
select.field option { color: #111; }
.set-field .field { height: 44px; width: 100%; }

@media (min-width: 768px) {
  .rv-areas { grid-template-columns: 1fr 1fr; }
  .view-progress { grid-template-columns: 1fr 1fr; align-items: start; }
  .view-progress > .goals-head, .view-progress > .ritual, .view-progress > .review-card { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .rate-opt { width: 36px; height: 36px; } .wheel-wrap { grid-template-columns: 1fr; justify-items: center; } }

/* =====================================================================
   Light theme (Settings → Appearance, or the device setting). Same identity: sage + gold + cosmic violet on warm paper.
   ===================================================================== */
[data-theme="light"] {
  color-scheme: light;
  --fg: #15172A; --fg-rgb: 21,23,42;
  --accent-bg: #15172A; --accent-fg: #fff;
  --ink: #F5F2EB; --ink-2: #ECE7DD; --ink-rgb: 245,242,235; --glass-rgb: 255,255,255;
  --cosmos-1: #E9E3F7; --cosmos-2: #F2EEE6;
  --panel: rgba(255,255,255,.78); --card: rgba(255,255,255,.66); --card-solid: #FFFFFF;
  --line: rgba(21,23,42,.1); --line-soft: rgba(21,23,42,.07); --line-strong: rgba(21,23,42,.16);
  --muted: #555A6C; --muted-2: #676C7E;
  --sage: #4F6A4D; --sage-2: #4F6E4C; --sage-light: #3E5C3C;
  --bubble-bot: rgba(255,255,255,.8); --bubble-user: #DCE8FA; --bubble-user-ink: #0E1624;
  --physical: #2F5DB0; --spiritual: #7446C9; --heart: #B8452F; --gold: #8A5A12; --danger: #B83A2A;
}
[data-theme="light"] body { color: var(--fg); }
[data-theme="light"] .cosmos canvas { opacity: .9; } /* js/cosmos.js draws darker, fainter stars in light mode */
[data-theme="light"] .nebula { opacity: .35; }
[data-theme="light"] .auth-title { background: linear-gradient(180deg, #15172A 30%, #5B4BB5); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .chip-sage, [data-theme="light"] .quick-chip { color: #2F4A2D; background: rgba(90,117,88,.14); border-color: rgba(79,106,77,.35); }
[data-theme="light"] .card, [data-theme="light"] .ritual-form, [data-theme="light"] .ritual-done { box-shadow: 0 12px 36px rgba(60,50,90,.1), inset 0 1px 0 rgba(255,255,255,.8); }
[data-theme="light"] .glass-btn { box-shadow: 0 8px 24px rgba(60,50,90,.12), inset 0 1px 0 rgba(255,255,255,.8); background: rgba(255,255,255,.7); }
[data-theme="light"] .sheet-backdrop, [data-theme="light"] .drawer-backdrop { background: rgba(40,36,60,.28); }
[data-theme="light"] .switch-track::after { box-shadow: 0 1px 3px rgba(0,0,0,.25); }
[data-theme="light"] .ritual-done-ico { color: #fff; }
[data-theme="light"] .wheel-dot { stroke: #fff; }
[data-theme="light"] .streak-badge { background: rgba(227,183,122,.22); border-color: rgba(138,90,18,.3); }
[data-theme="light"] select.field option { color: #111; }

/* ---------- Design refresh (see refs/DESIGN-NOTES.md): mono micro-labels, tighter display type, arch portal,
   tone-tagged glass cards, arrow-chip CTAs. Shared by dark and light themes. ---------- */
:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "DejaVu Serif", serif; }
.kicker { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kicker-idx { color: var(--gold); }
/* sign in */
.auth-mascot { height: calc(var(--m) * 1.1); margin-bottom: 26px; }
.auth-mascot .mascot-disc, .auth-mascot .mascot-disc::after { border-radius: 999px 999px 34px 34px; }
.auth-mascot .mascot-disc { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),.18), 0 30px 80px rgba(142,124,255,.35), 0 0 60px rgba(227,183,122,.16); }
.auth-mascot .mascot-ring { display: none; }
.auth-mascot::before { content: ""; position: absolute; inset: -22px -30px; border-radius: 50%; border: 1px dashed rgba(227,183,122,.3); animation: orbit 50s linear infinite; pointer-events: none; }
.auth-mascot::after { content: ""; position: absolute; top: 50%; right: -34px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: bob 3s ease-in-out infinite; pointer-events: none; }
@keyframes orbit { to { transform: rotate(360deg); } }
.auth-kicker { margin-bottom: 4px; }
.auth-title { font-size: clamp(40px, 11vw, 52px); line-height: .98; letter-spacing: -.05em; }
.auth-btn { border-radius: 18px; }
.auth-btn-primary { justify-content: center; padding: 0 58px; }
.auth-btn-primary::after { content: ""; position: absolute; right: 7px; top: 7px; bottom: 7px; width: 40px; border-radius: 12px; background: var(--ink) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23F4F2FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform .3s var(--spring); }
.auth-btn-primary:hover::after { transform: translateX(3px) rotate(-8deg); }
.auth-btn-primary.is-loading::after { opacity: 0; }
.area-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.area-dots li { display: inline-flex; align-items: center; gap: 6px; }
.area-dots li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone); }
/* chat home */
.welcome-kicker { margin-bottom: 6px; }
.welcome-title { font-size: clamp(30px, 8vw, 40px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; }
.suggestion { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; border-radius: 20px; background: linear-gradient(160deg, rgba(var(--fg-rgb),.07), rgba(var(--fg-rgb),.02) 70%); transition: transform .3s var(--ease-out), background .2s, border-color .2s; overflow: hidden; }
.suggestion[data-area]::before { content: attr(data-area); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tone, var(--muted)); }
.suggestion::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--orb)) 40%, transparent), transparent 70%); opacity: .35; transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.suggestion:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone, var(--fg)) 35%, transparent); }
.suggestion:hover::after { opacity: .7; transform: scale(1.2); }
/* cards: mono micro-labels for card headings */
.ritual-label, .checkin-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ritual, .checkin { border-radius: 22px; }
/* centre the chat home when it fits, but never push its top out of reach when it's taller than the screen */
.welcome { justify-content: flex-start; }
.welcome > :first-child { margin-top: auto; }
.welcome > :last-child { margin-bottom: auto; }
.welcome { padding-top: 28px; }
/* shadcn-style sheet close button (top-right X, labelled for screen readers) */
.sheet-panel { position: relative; }
.sheet-x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.06); color: var(--muted); transition: background .2s, color .2s, transform .2s var(--spring); }
.sheet-x:hover { background: rgba(var(--fg-rgb),.12); color: var(--fg); }
.sheet-x:active { transform: scale(.94); }
.sheet-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* empty states for new people (no sample data) */
.nw-empty { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(var(--fg-rgb),.72); max-width: 46ch; }
.view-finance.is-empty .nw-value { opacity: .5; }
.view-finance.is-empty .spark { display: none; }
.empty-note { margin: 0; padding: 12px 18px 16px; font-size: 14px; line-height: 1.5; color: rgba(var(--fg-rgb),.62); }
.empty-note[hidden] { display: none; }
.goals-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px; border-radius: 22px; border: 1px dashed rgba(var(--fg-rgb),.22); background: rgba(var(--glass-rgb),.35); color: rgba(var(--fg-rgb),.72); font-size: 14px; line-height: 1.5; list-style: none; }
.goals-empty b { color: var(--fg, #fff); font-size: 16px; }
.goals-empty-ico { font-size: 26px; }
.view-finance.is-empty #refreshBtn { display: none; }

/* ================= answers: inline citations + copy/share ================= */
.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border-radius: 6px; font-size: 10.5px; font-weight: 700; vertical-align: 2px; text-decoration: none; color: #0e1020; background: var(--sage-light); }
.cite:hover { background: #fff; }
.msg-tools { display: flex; gap: 6px; margin: 6px 0 0 4px; }
.msg-tool { height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; color: var(--muted); background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line); }
.msg-tool:hover { color: var(--fg); background: rgba(var(--fg-rgb),.1); }

/* ================= Skills page ================= */
.sk-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.sk-h small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.sk-row:first-child { border-top: 0; }
.sk-ic { font-size: 22px; width: 30px; text-align: center; flex: none; }
.sk-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sk-tx b { font-size: 14.5px; font-weight: 600; }
.sk-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.sk-cost { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(227,183,122,.16); color: var(--gold); white-space: nowrap; }
.sk-cost.is-free { background: rgba(143,174,140,.18); color: var(--sage-light); }
.sk-sub { flex-wrap: wrap; padding-left: 56px; }
.sk-sub .input { flex: 1 1 180px; height: 36px; border-radius: 12px; padding: 0 12px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line-strong); color: var(--fg); }
.sk-sub small { flex-basis: 100%; color: var(--muted-2); font-size: 12px; }
.sk-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.is-on, .sk-mode.is-on { background: rgba(143,174,140,.28); border-color: rgba(168,199,165,.6); color: #eaf5e8; }
.disc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.disc-card { text-align: left; display: grid; gap: 6px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(142,124,255,.16), rgba(var(--fg-rgb),.04)); transition: transform .2s var(--spring), border-color .2s; }
.disc-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.disc-card span { font-size: 22px; } .disc-card b { font-size: 14px; line-height: 1.3; } .disc-card small { font-size: 12px; color: var(--sage-light); }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tb-card { padding: 14px 16px; }
.tb-card h4 { font-size: 14px; margin: 0 0 8px; }
.tb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tb-item label { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.tb-item.is-done span { text-decoration: line-through; color: var(--muted); }
.tb-item small { color: var(--muted); font-size: 12px; }
.tb-empty { color: var(--muted-2); font-size: 13px; }
.tb-timer { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.tb-ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--sage-light) var(--p), rgba(var(--fg-rgb),.1) 0); -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px); mask: radial-gradient(circle, transparent 12px, #000 13px); flex: none; }
.tb-tt { flex: 1; display: grid; } .tb-tt b { font-variant-numeric: tabular-nums; font-size: 18px; } .tb-tt small { color: var(--muted); font-size: 12px; }
/* breathing guide */
.breath { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8,8,20,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s; }
.breath.is-open { opacity: 1; }
.breath-card { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 28px; }
.breath-name { color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.breath-orb { --dur: 4s; width: 220px; height: 220px; display: grid; place-items: center; }
.breath-core { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cfe7cb, #6f9d6b 45%, rgba(142,124,255,.55) 75%, transparent 76%); box-shadow: 0 0 60px rgba(143,174,140,.45); transform: scale(.45); transition: transform var(--dur) cubic-bezier(.45,0,.55,1), opacity var(--dur); opacity: .7; }
.breath-orb.is-in .breath-core { transform: scale(1); opacity: 1; }
.breath-say { font-size: 26px; font-weight: 700; }
.breath-count { font-size: 18px; color: var(--sage-light); font-variant-numeric: tabular-nums; min-height: 22px; }
@media (prefers-reduced-motion: reduce) { .breath-core { transform: scale(.8) !important; transition: opacity var(--dur) ease !important; } .breath-orb.is-in .breath-core { opacity: 1; } .breath-orb:not(.is-in) .breath-core { opacity: .45; } }

/* ================= music: covers, repeat, moods, full player ================= */
.deck-art { position: relative; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #3b2c8c, #16122e 60%, #6b4b1f); border: 0; padding: 0; font-size: 22px; flex: none; cursor: pointer; }
.deck-art .cover-img, .mini-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-cover { width: 34px; height: 34px; border-radius: 9px; flex: none; margin-right: 8px; }
[data-music="repeat"] { position: relative; }
[data-music="repeat"] .rep-one { display: none; position: absolute; top: 3px; right: 2px; font-style: normal; font-size: 9px; font-weight: 800; width: 13px; height: 13px; border-radius: 50%; background: var(--sage-light); color: #10121e; place-items: center; }
[data-music="repeat"][data-mode="one"] .rep-one { display: grid; }
[data-music="repeat"][aria-pressed="true"], [data-music="shuffle"][aria-pressed="true"] { color: var(--sage-light); }
.music-x { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.music-x-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.music-moods { display: flex; gap: 8px; flex-wrap: wrap; }
.player-sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.ps-scrim { position: absolute; inset: 0; background: rgba(5,5,14,.55); opacity: 0; transition: opacity .28s; }
.player-sheet.is-open .ps-scrim { opacity: 1; }
.ps-card { --tint: var(--cover-tint, 88, 70, 190); position: relative; width: min(100%, 460px); max-height: 100dvh; overflow: auto; border-radius: 28px 28px 0 0; padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 12px; justify-items: center; color: #fff; transform: translateY(100%); transition: transform .32s var(--spring); isolation: isolate; box-shadow: 0 -20px 60px rgba(0,0,0,.45); touch-action: pan-x; }
.player-sheet.is-open .ps-card { transform: none; }
.ps-card.is-drag { transition: none; }
.ps-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% 18%, rgba(var(--tint), .75), rgba(12,10,30,.97) 72%), #0c0a1e; }
.ps-grab { width: 100%; height: 22px; background: none; border: 0; display: grid; place-items: center; cursor: grab; }
.ps-grab span { width: 44px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.35); }
.ps-art { position: relative; width: min(84vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.ps-viz { position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; }
.ps-cover { position: relative; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); background: linear-gradient(145deg, #3b2c8c, #120f2a 55%, #7a5724); transition: border-radius .35s, width .35s; }
.ps-art[data-viz="ring"] .ps-cover { width: 58%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 50px rgba(var(--tint), .55); }
.ps-art[data-viz="bars"] .ps-cover { width: 62%; border-radius: 18px; box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.55); }
.ps-cover .cover-img, .ps-fallback img, .ps-lion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(142,124,255,.45), transparent 60%), linear-gradient(145deg, #3b2c8c, #120f2a 55%, #7a5724); }
.ps-fallback img { opacity: .9; }
.ps-art[data-center="lion"] .cover-img { display: none; }
.ps-art[data-viz="ring"].is-playing[data-center="cover"] .cover-img { animation: cover-spin 30s linear infinite; }
@keyframes cover-spin { to { transform: rotate(360deg); } }
.ps-meta { text-align: center; width: 100%; } .ps-title { font-size: 22px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-artist { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 15px; }
.ps-seek { width: 100%; } .ps-times { width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; margin-top: -6px; }
.ps-ctls { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ps-ctls .deck-btn { color: #fff; }
.ps-play { width: 64px; height: 64px; }
.ps-vol { display: flex; align-items: center; gap: 10px; width: 100%; color: rgba(255,255,255,.7); } .ps-vol svg { width: 18px; } .ps-vol input { flex: 1; }
.ps-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.seg button { height: 30px; padding: 0 12px; font-size: 12px; color: rgba(255,255,255,.75); background: none; border: 0; }
.seg button[aria-pressed="true"] { background: rgba(255,255,255,.18); color: #fff; }
.seg button:disabled { opacity: .4; }
.ps-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ps-links { display: flex; gap: 16px; font-size: 13px; } .ps-links a { color: rgba(255,255,255,.8); }
@media (min-width: 900px) { .player-sheet { align-items: center; } .ps-card { border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .ps-card { transition: opacity .2s; transform: none; opacity: 0; } .player-sheet.is-open .ps-card { opacity: 1; } .ps-art .cover-img { animation: none !important; } }

/* ================= karaoke ================= */
.k-stage { position: relative; overflow: hidden; border-radius: 26px; padding: 22px 18px 18px; min-height: 300px; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, rgba(142,124,255,.35), rgba(10,9,26,.96) 70%); border: 1px solid var(--line); box-shadow: 0 0 calc(10px + var(--mic, 0) * 70px) rgba(255, 196, 90, calc(var(--mic, 0) * .8)); transition: box-shadow .12s linear; }
.k-fan { position: relative; display: flex; align-items: center; gap: 12px; }
.k-mascot { --m: 92px; }
.k-cover { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; opacity: .9; }
body.is-chorus .k-mascot .mascot-float { animation: k-cheer .45s ease-in-out infinite alternate !important; }
body.is-cheering .k-mascot .mascot-float { animation: k-cheer .28s ease-in-out infinite alternate !important; }
@keyframes k-cheer { from { transform: translateY(0) rotate(-4deg) scale(1); } to { transform: translateY(-14px) rotate(4deg) scale(1.08); } }
.k-line { --k: 0; font-size: clamp(24px, 6.2vw, 44px); font-weight: 800; line-height: 1.18; max-width: 22ch; margin: 6px 0 0; color: transparent; background: linear-gradient(90deg, #ffd27a calc(var(--k) * 100%), rgba(255,255,255,.92) calc(var(--k) * 100% + .5%)); -webkit-background-clip: text; background-clip: text; text-wrap: balance; }
.k-line.is-in { animation: k-in .35s var(--spring); }
@keyframes k-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.k-next { font-size: clamp(15px, 3.6vw, 20px); color: rgba(255,255,255,.5); margin: 0; min-height: 1.3em; max-width: 30ch; }
.k-stage-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.k-tapbtn { width: 100%; max-width: 420px; height: 64px; font-size: 16px; }
.k-fxbox { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.k-fx { position: absolute; bottom: -30px; font-size: 26px; animation: k-float 2.4s ease-out forwards; }
@keyframes k-float { to { transform: translate(var(--dx), -380px) rotate(25deg); opacity: 0; } }
.k-stage.is-full { position: fixed; inset: 0; z-index: 85; border-radius: 0; min-height: 100dvh; }
.k-stage.is-full .k-line { font-size: clamp(30px, 8vw, 72px); }
.k-label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 6px; }
.k-lyrics { width: 100%; border-radius: 16px; padding: 12px 14px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line-strong); color: var(--fg); font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; }
.k-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.k-fine { font-size: 12px; color: var(--muted-2); margin: 10px 0 0; line-height: 1.45; }
.k-source { font-size: 13px; color: var(--sage-light); margin: 12px 0 6px; }
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.k-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(var(--fg-rgb),.03); font-size: 14px; }
.k-row.is-chorus { background: rgba(227,183,122,.1); } .k-row.is-tap { outline: 2px solid var(--sage-light); }
.k-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--sage-light); background: none; border: 0; min-width: 62px; text-align: left; }
.k-tx { flex: 1; min-width: 0; }
.k-encore { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; background: rgba(6,5,16,.6); opacity: 0; transition: opacity .25s; }
.k-encore.is-open { opacity: 1; }
.k-encore-card { width: min(92vw, 380px); border-radius: 26px; padding: 26px 22px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(227,183,122,.35), #15122d 70%); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 8px; justify-items: center; }
.k-encore-lion img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; animation: k-cheer .35s ease-in-out infinite alternate; }
.k-encore h3 { font-size: 30px; margin: 4px 0 0; }
.k-stars { font-size: 30px; color: #ffd27a; letter-spacing: 4px; margin: 0; min-height: 1em; }
@media (prefers-reduced-motion: reduce) { body.is-chorus .k-mascot .mascot-float, body.is-cheering .k-mascot .mascot-float, .k-encore-lion img { animation: bob-soft 3s ease-in-out infinite !important; } .k-line.is-in { animation: none; } }

/* Floating mascot: bigger (≈98 px phone / 106 px desktop), soft halo, centred over the status pill */
.mascot-head .mascot-disc { box-shadow: 0 0 0 2px rgba(var(--fg-rgb),.2), 0 12px 34px rgba(20,10,60,.55), 0 0 34px rgba(142,124,255,.42), 0 0 70px rgba(227,183,122,.14); }
.mascot-head .mascot-glow { inset: -24%; }
.mascot-head + .status-pill { margin-top: -16px; }

/* volume: slider on desktop/Android; on iPhone/iPad (volume is read-only) a mute button + "use your phone's volume buttons" */
.vol-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; flex: none; cursor: pointer; }
.vol-btn:hover { background: rgba(var(--fg-rgb),.08); }
.vol-btn svg { width: 18px; height: 18px; }
.vol-btn .vol-x { display: none; }
.vol-btn[aria-pressed="true"] .vol-x { display: inline; } .vol-btn[aria-pressed="true"] .vol-wave { display: none; }
.vol-range { display: flex; flex: 1; align-items: center; min-width: 0; }
.vol-range input { width: 100%; }
.vol-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ps-vol .vol-hint { color: rgba(255,255,255,.7); }
[data-vol].is-fixed .vol-range { display: none; }

/* chat names: rename dialog, history ••• menu, pinned; companion moods (avatar glow) */
.status-pill { cursor: default; }
body[data-view="chat"] .status-pill { cursor: pointer; }
.rn-dlg { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(6,5,16,.55); opacity: 0; transition: opacity .18s; padding: 20px; }
.rn-dlg.is-open { opacity: 1; }
.rn-card { width: min(100%, 360px); padding: 18px; border-radius: 22px; background: var(--card-solid, #17152e); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.5); display: grid; gap: 12px; }
.rn-card h3 { margin: 0; font-size: 17px; }
.rn-btns { display: flex; justify-content: flex-end; gap: 8px; }
.history-item { position: relative; }
.hi-more { flex: none; letter-spacing: 1px; }
.hi-pin { font-size: 13px; }
.history-item.is-pinned { border-color: rgba(227,183,122,.35); }
.hi-menu { position: absolute; right: 8px; top: calc(100% - 8px); z-index: 30; min-width: 170px; padding: 6px; border-radius: 16px; background: var(--card-solid, #1b1836); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0,0,0,.45); display: grid; }
.hi-mi { text-align: left; padding: 10px 12px; border-radius: 10px; background: none; border: 0; color: var(--fg); font-size: 14px; }
.hi-mi:hover, .hi-mi:focus-visible { background: rgba(var(--fg-rgb),.08); }
.hi-mi.is-danger { color: var(--danger); } .hi-mi.is-armed { background: rgba(255,138,122,.16); }
.comp-moods { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-note { margin: 4px 0 8px; }
body[data-mood="sunny"] .mascot-glow { background: radial-gradient(closest-side, rgba(255,200,90,.6), rgba(255,160,60,.2) 60%, transparent 72%); }
body[data-mood="focused"] .mascot-glow { background: radial-gradient(closest-side, rgba(120,220,170,.5), rgba(60,140,120,.2) 60%, transparent 72%); }
body[data-mood="cosmic"] .mascot-glow { background: radial-gradient(closest-side, rgba(90,170,255,.6), rgba(142,124,255,.25) 60%, transparent 72%); }
body[data-mood="fierce"] .mascot-glow { background: radial-gradient(closest-side, rgba(255,110,80,.6), rgba(255,170,60,.22) 60%, transparent 72%); }
body[data-mood="sunny"] .mascot-head .mascot-disc { box-shadow: 0 0 0 2px rgba(255,210,120,.35), 0 12px 34px rgba(20,10,60,.5), 0 0 38px rgba(255,190,90,.45); }
body[data-mood="focused"] .mascot-head .mascot-disc { box-shadow: 0 0 0 2px rgba(140,230,180,.3), 0 12px 34px rgba(20,10,60,.5), 0 0 38px rgba(100,210,160,.4); }
body[data-mood="cosmic"] .mascot-head .mascot-disc { box-shadow: 0 0 0 2px rgba(120,180,255,.35), 0 12px 34px rgba(20,10,60,.5), 0 0 38px rgba(80,160,255,.5); }
body[data-mood="fierce"] .mascot-head .mascot-disc { box-shadow: 0 0 0 2px rgba(255,140,100,.35), 0 12px 34px rgba(20,10,60,.5), 0 0 38px rgba(255,110,70,.45); }
.set-comp { display: grid; gap: 10px; }
.set-comp .set-field { align-items: start; }
.set-comp .set-field > span:first-child { padding-top: 10px; }
.set-comp .comp-moods { min-width: 0; }
.set-comp .comp-mood { height: 34px; padding: 0 12px; font-size: 13px; }
/* Settings → Your sign */
.set-opt { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.set-hint { font-size: 12px; color: var(--muted); margin: 6px 2px 10px; }

/* ---------- music: Cosmos visualizer + Vibe mode ---------- */
.ps-cosmos { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.ps-card[data-vizmode="cosmos"] .ps-bg { background: radial-gradient(120% 70% at 50% 18%, rgba(var(--tint), .35), rgba(6,5,20,.98) 70%), #06050f; }
.vibe { position: fixed; inset: 0; z-index: 95; background: #05040f; color: #fff; opacity: 0; transition: opacity .7s var(--ease-out, ease); touch-action: manipulation; -webkit-user-select: none; user-select: none; overflow: hidden; }
.vibe.is-on { opacity: 1; }
.vibe-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vibe-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 22px) calc(env(safe-area-inset-left) + 16px); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.vibe-ui.is-shown { opacity: 1; }
.vibe-ui.is-shown button { pointer-events: auto; }
.vibe-x { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vibe-x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.vibe-bottom { display: grid; gap: 12px; justify-items: center; text-align: center; background: radial-gradient(60% 100% at 50% 100%, rgba(5,4,15,.55), transparent); padding-top: 30px; }
.vibe-meta { display: grid; gap: 2px; max-width: min(90vw, 520px); }
.vibe-meta b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vibe-meta span { font-size: 13.5px; color: rgba(255,255,255,.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vibe-ctls { display: flex; gap: 18px; align-items: center; }
.vibe-ctls .deck-btn { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vibe-ctls .deck-play { background: rgba(255,255,255,.92); color: #0b0a1c; }
.vibe-hint { font-size: 11.5px; color: rgba(255,255,255,.45); margin: 0; }
@media (prefers-reduced-motion: reduce) { .vibe, .vibe-ui { transition-duration: .01s; } }
.vibe { background: radial-gradient(90% 70% at 50% 46%, #1d1650 0%, #0c0a26 45%, #05040f 100%); }

/* Read-aloud: the lion's glow + a gentle "talking" swell follow the voice's loudness envelope (--speak, 0..1). */
.mascot-head.is-speaking .mascot-float { animation: none; transform: scale(calc(1 + var(--speak, 0) * .05)) translateY(calc(var(--speak, 0) * -2px)); transition: transform .06s linear; }
.mascot-head.is-speaking .mascot-glow { animation: none; opacity: calc(.35 + var(--speak, 0) * .65); transform: scale(calc(.94 + var(--speak, 0) * .24)); background: radial-gradient(closest-side, rgba(255,214,150,.7), rgba(236,110,200,.32) 55%, transparent 72%); transition: opacity .06s linear, transform .06s linear; }
body.is-speaking .status-dot { background: #ff9fd8; box-shadow: 0 0 10px rgba(255,159,216,.85); }
.set-voice { flex-wrap: wrap; gap: 10px; }
.set-voice-ctl { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; }
.set-voice-ctl select { flex: 1; min-width: 0; min-height: 40px; border-radius: 12px; padding: 6px 10px; background: rgba(var(--fg-rgb),.06); color: inherit; border: 1px solid rgba(var(--fg-rgb),.16); font: inherit; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .mascot-head.is-speaking .mascot-float { transform: none; } }

/* Option A charts: Life Balance radar (Progress) + Net worth over time (Finance). SVG = sharp on retina. */
.chart-sub { margin: -4px 16px 4px; font-size: 12.5px; color: var(--muted); }
.radar-svg { max-width: 300px; }
.radar-svg .radar-tick { fill: var(--muted-2); font-size: 8px; font-family: var(--font); }
.radar-empty { margin: 4px 14px 16px; border: 1px dashed rgba(var(--fg-rgb),.14); border-radius: 16px; }
#wheelFoot { margin: -6px 16px 14px; text-align: center; }
.wheel-legend .wl-name { display: flex; flex-direction: column; line-height: 1.2; }
.wheel-legend .wl-why { font-size: 10.5px; font-weight: 500; color: var(--muted-2); }
.wheel-legend b { font-variant-numeric: tabular-nums; }
.nw-card { padding-bottom: 12px; }
.nw-chart { position: relative; padding: 4px 10px 0; min-height: 120px; }
.nw-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.nw-svg .grid { stroke: rgba(var(--fg-rgb),.07); stroke-width: 1; }
.nw-svg .axis { fill: var(--muted-2); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.nw-svg .nw-line { fill: none; stroke: var(--sage-light, #b9d4b5); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.nw-svg .nw-dot { fill: var(--bg, #0b0a18); stroke: var(--sage-light, #b9d4b5); stroke-width: 2; }
.nw-svg .nw-dot.is-last, .nw-svg .nw-dot.is-on { fill: var(--sage-light, #b9d4b5); r: 5px; }
.nw-svg .nw-cursor { stroke: rgba(var(--fg-rgb),.22); stroke-dasharray: 3 3; }
.nw-readout { min-height: 18px; margin: 4px 2px 0; font-size: 12.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
#nwChartChange.is-neg { background: rgba(229,115,115,.16); color: #f2a3a3; }
.nw-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 16px 4px; align-items: end; }
.nw-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.nw-f input { min-height: 42px; border-radius: 12px; padding: 8px 10px; background: rgba(var(--fg-rgb),.06); color: var(--fg); border: 1px solid rgba(var(--fg-rgb),.14); font: inherit; font-size: 16px; width: 100%; min-width: 0; }
.nw-f-note { grid-column: 1 / -1; }
.nw-form .btn { grid-column: 1 / -1; justify-self: start; }
.nw-err { grid-column: 1 / -1; color: #f2a3a3; font-size: 13px; margin: 0; }
.nw-entries { list-style: none; margin: 8px 16px 0; padding: 0; display: grid; gap: 6px; }
.nw-entries li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; font-size: 13.5px; padding: 6px 0; border-top: 1px solid rgba(var(--fg-rgb),.06); }
.nw-entries li small { grid-column: 1 / 3; color: var(--muted-2); font-size: 12px; }
.nw-entries .nw-e-day { color: var(--muted); font-variant-numeric: tabular-nums; }
.nw-entries b { font-variant-numeric: tabular-nums; }
.nw-entries .nw-del { grid-row: 1; grid-column: 3; background: none; border: 0; color: var(--muted-2); min-width: 36px; min-height: 32px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; }
.nw-entries .nw-del.is-armed { color: #f2a3a3; background: rgba(229,115,115,.12); }
.nw-entries .nw-more { color: var(--muted-2); font-size: 12px; display: block; }
@media (min-width: 720px) { .nw-form { grid-template-columns: 160px 1fr 1.4fr auto; } .nw-f-note { grid-column: auto; } .nw-form .btn { grid-column: auto; } }

/* ===== Mascot scenes: header art per sidebar page (Leo + catchphrase bubble), parallax cosmos, beat glow ===== */
.scene { --bob: 0px; --tilt: 0deg; --glow: .4; --px: 0px; --py: 0px; position: relative; margin: 0 0 14px; height: clamp(170px, 34vw, 230px); border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 10%, #2a1660 0%, #160d3a 45%, #0b0820 100%); box-shadow: 0 10px 34px rgba(10,5,40,.45), inset 0 0 0 1px rgba(255,255,255,.07); }
.scene-sky, .scene-sky i { position: absolute; inset: -24px; display: block; }
.scene-l0 { background: radial-gradient(60% 50% at 78% 18%, rgba(236,110,200,.38), transparent 70%), radial-gradient(50% 60% at 18% 80%, rgba(110,120,255,.32), transparent 70%); background-size: cover; background-position: center; transform: translate3d(calc(var(--px) * .3), calc(var(--py) * .3), 0) scale(1.04); }
.scene-l1 { background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 68%, #ffe9c9 50%, transparent 51%), radial-gradient(1.2px 1.2px at 58% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 52%, #cfd8ff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 88% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 40%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 86%, #ffd6f2 50%, transparent 51%), radial-gradient(1px 1px at 66% 84%, #fff 50%, transparent 51%);
  background-size: 260px 180px; opacity: .85; transform: translate3d(calc(var(--px) * .7), calc(var(--py) * .7), 0); }
.scene-l2 { background: radial-gradient(closest-side at 86% 26%, rgba(255,214,150,.0) 60%, rgba(255,214,150,.0) 61%), radial-gradient(34px 34px at 84% 26%, #f3c58a 0 60%, transparent 62%), radial-gradient(70px 14px at 84% 27%, transparent 0 55%, rgba(243,197,138,.55) 57% 62%, transparent 64%); transform: translate3d(calc(var(--px) * 1.2), calc(var(--py) * 1.2), 0); opacity: .9; }
.scene.has-art .scene-l2 { display: none; }
.scene-glow { position: absolute; left: 6%; bottom: -30%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(236,110,200,.55), rgba(142,124,255,.25) 60%, transparent 72%); opacity: var(--glow); transform: scale(calc(.9 + var(--glow) * .25)); pointer-events: none; z-index: 1; }
.scene-actor { position: absolute; z-index: 2; left: 2%; bottom: 0; height: 100%; transform: translate3d(0, var(--bob), 0) rotate(var(--tilt)); transform-origin: 50% 100%; will-change: transform; }
.scene-art { height: 100%; width: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); user-select: none; -webkit-user-drag: none; }
.scene.has-art .scene-actor { inset: 0; height: auto; transform: translate3d(0, calc(var(--bob) * .5), 0); }
.scene.has-art .scene-art { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; filter: none; }
.scene-prop { position: absolute; right: -14%; top: 38%; font-size: clamp(26px, 6vw, 38px); filter: drop-shadow(0 0 12px rgba(236,110,200,.75)); transform: translateY(calc(var(--bob) * -1.4)); }
.scene-bubble { position: absolute; z-index: 3; right: 12px; top: 16px; max-width: min(58%, 340px); margin: 0; display: flex; gap: 6px; align-items: flex-start; padding: 10px 10px 10px 14px; border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.94); color: #1d1240; font-weight: 700; font-size: clamp(13px, 3.4vw, 15.5px); line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: bubbleIn .55s var(--spring, cubic-bezier(.2,1.4,.4,1)) both .15s; }
.scene-bubble::before { content: ''; position: absolute; left: -7px; bottom: 10px; border: 8px solid transparent; border-right-color: rgba(255,255,255,.94); border-left: 0; }
.scene.has-art .scene-bubble { top: auto; bottom: 12px; }
.scene-line { flex: 1; }
.scene-say { flex: none; border: 0; background: rgba(29,18,64,.08); color: inherit; border-radius: 10px; min-width: 32px; min-height: 32px; font-size: 15px; cursor: pointer; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
/* driving scenes: CSS road + glyph strip (and wheel spin overlays when the art defines them) */
.scene-road { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%; perspective: 260px; overflow: hidden; pointer-events: none; }
.scene-road .road-lines { position: absolute; inset: 0; transform: rotateX(58deg); transform-origin: 50% 100%; background: linear-gradient(90deg, transparent 0 46%, rgba(120,240,255,.55) 46% 54%, transparent 54%) 0 0 / 100% 40px, repeating-linear-gradient(90deg, rgba(120,240,255,.18) 0 1px, transparent 1px 34px), linear-gradient(rgba(120,240,255,0), rgba(120,240,255,.28)); animation: roadRun .6s linear infinite; }
.scene-road .road-glyphs { position: absolute; left: 0; right: -200px; bottom: 8%; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='32'%3E%3Ctext x='6' y='24' font-size='20' fill='%23ffd76e' font-family='Arial' font-weight='700'%3E%24%3C/text%3E%3Cpath d='M70 8h18l6 7-15 15-15-15z' fill='%2397f0ff' opacity='.9'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 32px; opacity: .75; animation: glyphRun 1.6s linear infinite; }
@keyframes roadRun { to { background-position: 0 40px, 0 0, 0 0; } }
@keyframes glyphRun { to { transform: translateX(-120px); } }
.scene .wheel-spin { position: absolute; z-index: 2; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 70%); mix-blend-mode: screen; animation: spin .35s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.scene.is-beat .scene-glow { transition: opacity .06s linear; }
html.motion-lite .scene-road i, html.motion-off .scene-road i, html.motion-lite .scene .wheel-spin, html.motion-off .scene .wheel-spin { animation: none; }
html.motion-lite .scene, html.motion-off .scene { --bob: 0px !important; --tilt: 0deg !important; --px: 0px !important; --py: 0px !important; }
@media (prefers-reduced-motion: reduce) { .scene-bubble { animation: none; } .scene-road i, .scene .wheel-spin { animation: none; } }
@media (min-width: 900px) { .scene { height: 240px; } .scene-bubble { top: 26px; right: 22px; } }

/* Chat sky beat pulse (js/cosmos.js sets --kick 0..1 on #mascotBtn / .auth-mascot on every kick): a neon line ring that
   pulses outward and fades, and the dashed orbit ring swells. Transform/opacity only. */
.kick-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(120,240,255,.9); box-shadow: 0 0 18px rgba(255,110,230,.55), inset 0 0 14px rgba(120,240,255,.35); opacity: calc(var(--kick, 0) * .95); scale: calc(1.55 - var(--kick, 0) * .55); pointer-events: none; will-change: opacity, scale; }
.auth-mascot .kick-ring { inset: -22px -30px; }
.auth-mascot::before { scale: calc(1 + var(--kick, 0) * .1); }
@media (prefers-reduced-motion: reduce) { .kick-ring { display: none; } }

/* ---------- Readability over the sky (WCAG AA on iPhone) ----------
   js/cosmos.js erases stars / planets / nebulae / beat flashes from behind every visible text box; here text sits on
   near-solid panels and words that float directly on the sky get a soft dark shadow. */
.seg span, .chip, .auth-field, .auth-btn-glass, .checkin, .field, .set-field select, .set-field input { background-color: rgba(var(--glass-rgb),.86); }
.seg input:checked + span { background: rgba(48,66,50,.92); }
.chip.is-on, .sk-mode.is-on { background: rgba(48,66,50,.92); }
.chip-sage { background: rgba(40,56,42,.92); }
.sheet-panel, .toast, .activity-list, .status-pill { background-color: rgba(var(--glass-rgb),.97); }
@media (max-width: 767.98px) { .mini-player { background-color: rgba(var(--glass-rgb),.96); } }
:root:not([data-theme="light"]) :is(.auth, .welcome, .hero, .view, .lp-hero, .lp-section, .voices, main) :is(h1, h2, h3, h4, p, li, legend, label, small, .kicker, .auth-sub, .welcome-sub, .welcome-q, .status-line, .auth-legal, a) {
  text-shadow: 0 1px 2px rgba(5,6,14,.75), 0 0 14px rgba(5,6,14,.55);
}
:root:not([data-theme="light"]) :is(.msg-user .bubble, .btn-primary, .auth-btn-primary, .auth-btn-primary *, .bubble-user-ink) { text-shadow: none; }
.auth-sub, .welcome-sub, .status-line, .auth-legal, .about-q legend { color: #C3C6D3; } /* brighter secondary text over the sky */
[data-theme="light"] .auth-sub, [data-theme="light"] .welcome-sub, [data-theme="light"] .status-line, [data-theme="light"] .auth-legal, [data-theme="light"] .about-q legend { color: var(--muted); }

.msg-tool.msg-speak { min-width: 34px; padding: 0 9px; font-size: 13px; }
.msg-tool.msg-speak.is-on { color: var(--fg); background: rgba(var(--fg-rgb),.16); border-color: rgba(var(--fg-rgb),.34); }