/* Samayo — Vedic Kundli funnel. Dark cosmic theme (gold-on-ink, manuscript linework). */
:root{
  --ink:#f4ecdc;
  --ink-soft:rgba(244,236,220,0.70);
  --ink-faint:rgba(244,236,220,0.42);
  --gold:#f3c87e;
  --gold-deep:#caa15a;
  --gold-bright:#ffe6bf;
  --copper:#d98a4f;
  --navy-0:#1a0c06;
  --line:rgba(243,200,126,0.20);
  --line-soft:rgba(243,200,126,0.12);
  /* funnel surfaces */
  --card:rgba(20,11,6,0.62);
  --card-on:rgba(46,24,11,0.80);
  --field:rgba(8,4,12,0.52);
  --sage:#9fbf8e;
  --halo:0 1px 2px rgba(0,0,0,.92), 0 2px 14px rgba(0,0,0,.8);
  --ease-house:cubic-bezier(.2,.7,.2,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  /* ── Type system (single source of truth) ── */
  --display:"Cinzel", Georgia, serif;                        /* inscriptional caps: labels, CTAs, wordmark */
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;  /* upright old-style serif: headings + body */
  --deva:"Tiro Devanagari Sanskrit", "Noto Sans Devanagari", serif;
  /* type scale (mobile-first) */
  --fs-h1:clamp(28px,6.4vw,34px);
  --fs-h2:clamp(24px,5.2vw,30px);
  --fs-h3:21px;
  --fs-h4:18px;
  --fs-h5:17px;         /* card titles */
  --fs-body:16.5px;     /* primary reading text — never below 16 */
  --fs-body-sm:15px;
  --fs-small:13.5px;
  --fs-caption:12.5px;
  --fs-label:11.5px;    /* uppercase eyebrows / labels (Cinzel) */
  --fs-button:13px;
  /* restrained weights */
  --fw-body:400;
  --fw-heading:500;
  --fw-brand:600;       /* the held brand name only */
  /* rhythm */
  --lh-heading:1.3;
  --lh-body:1.62;
  --ls-heading:.008em;
  --ls-body:.004em;
  --ls-label:.16em;
  --ls-deva:.04em;      /* Devanagari: tight enough to keep matras attached */
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
/* solid dark base catches iOS overscroll/repaint gaps (never the white page default) */
html{ background:#0e0805; }
html,body{ min-height:100%; }
body{
  /* TODO(landing brown): this radial-gradient is the dark-brown backdrop seen behind
     the centered column in production (Image 1). On the landing page it's meant to be
     fully covered by .lp-hero's parchment (index.html:83). Where the parchment isn't
     full-bleed, this brown shows through the gutters. Remove/override for landing if
     we want the full parchment look (Image 2). */
  background:radial-gradient(ellipse at 50% 32%, #6b4a2c 0%, #4a3018 45%, #34210f 78%, #241509 100%);
  background-color:#241509;   /* lighter warm-caramel hero (fallback under the gradient) */
  color:var(--ink);
  font-family:var(--serif);
  font-feature-settings:"onum" 1, "liga" 1, "calt" 1;
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; overflow-x:hidden;
}
/* Landing page owns its own full-bleed parchment (.lp-hero, index.html:83) — kill the
   dark cosmic backdrop so no brown bleeds through the gutters (Image 1 → Image 2). */
body:has(.lp-hero){ background:#e6d6c0; }
html:has(.lp-hero){ background:#e6d6c0; }
/* the chat fills exactly the visible viewport (height = --vvh from JS); page is locked */
body.on-chat{ height:var(--vvh, 100dvh); overflow:hidden; }
body.on-chat .app{ height:100%; min-height:0; }
/* faint constellation dust */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255,205,150,.5), transparent),
    radial-gradient(1px 1px at 68% 18%, rgba(255,170,60,.42), transparent),
    radial-gradient(2px 2px at 84% 58%, rgba(255,190,140,.4), transparent),
    radial-gradient(1px 1px at 33% 73%, rgba(255,160,50,.4), transparent),
    radial-gradient(1.5px 1.5px at 12% 84%, rgba(255,195,150,.38), transparent),
    radial-gradient(1px 1px at 52% 40%, rgba(255,180,90,.3), transparent),
    radial-gradient(1px 1px at 92% 30%, rgba(255,200,150,.38), transparent),
    radial-gradient(1px 1px at 44% 12%, rgba(255,165,60,.34), transparent);
  opacity:.5;
}

/* WebGL mandala — fixed behind everything, only revealed on the hero screen */
#gl{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;
  opacity:0; transition:opacity .8s var(--ease-house); pointer-events:none;
}
body.theme-dark #gl{ opacity:.72; }
body.on-chat #gl{ opacity:0; }   /* chat is the cream theme now — no mandala behind it */
/* Landing owns a flat parchment surface — kill the animated mandala that would
   otherwise glow/rotate through the gutters (.lp-hero, index.html:83). */
body:has(.lp-hero) #gl{ opacity:0 !important; }

/* app column */
.app{
  position:relative; z-index:2;
  width:100%; max-width:600px; margin:0 auto; min-height:100vh; min-height:100dvh;
}

/* ───────── Topbar ───────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:16px 22px 12px;
  background:linear-gradient(180deg, rgba(11,5,9,.92) 64%, rgba(11,5,9,0));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* ─── Shared circular icon button — single source of truth ───
   One token for every round icon button (back, download, overflow, profile).
   Only the inner <svg> differs. The orange .chat-send is intentionally separate. */
.icon-btn{
  width:36px; height:36px; flex:0 0 auto; border-radius:50%; padding:0;
  border:1px solid var(--line); background:rgba(20,11,6,.5); color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.icon-btn:hover{ border-color:var(--gold); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn:disabled, .icon-btn[disabled]{ opacity:.45; cursor:default; }
.icon-btn[hidden]{ display:none; }
.icon-btn svg{ width:18px; height:18px; }
body:not(.theme-dark) .icon-btn{ background:rgba(243,200,126,.10); border-color:#d9b25e; color:#b8892a; }
body:not(.theme-dark) .icon-btn:hover{ border-color:#c8721a; }

/* back button keeps only its show/hide toggle; all appearance comes from .icon-btn */
.back-btn{ display:none; }
.back-btn.show{ display:inline-flex; }
.logo-wrap{ flex:1; display:flex; justify-content:center; align-items:center; gap:3px; }
.logo-s{ font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-shadow:0 0 14px rgba(243,200,126,.25); }
.logo-o{ width:23px; height:23px; display:block; margin-bottom:1px;
  filter:drop-shadow(0 1px 6px rgba(243,200,126,.45)); }
.logo-img{ height:38px; width:auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(40,25,15,.18)); }
.topbar .spacer{ width:34px; flex:0 0 auto; }

/* ───────── Progress ───────── */
.progress-bar{ height:2px; background:var(--line-soft); margin:0 22px; overflow:hidden; }
.progress-bar.hide{ opacity:0; }
.progress-fill{ height:100%; width:4%;
  background:linear-gradient(90deg, var(--copper), var(--gold));
  box-shadow:0 0 10px rgba(243,200,126,.5);
  transition:width .6s var(--ease-house); }

/* ───────── Screens ───────── */
/* NOTE: opacity-only entrance — animating transform here would make .screen a
   containing block and break the position:fixed .cta-dock (Continue button). */
.screen{ display:none; position:relative; z-index:1;
  padding:12px 26px calc(152px + env(safe-area-inset-bottom)); animation:fadeUp .42s ease both; }
.screen.active{ display:block; }
@keyframes fadeUp{ from{opacity:0;} to{opacity:1;} }
.stagger>*{ opacity:0; animation:rise .55s var(--ease-house) forwards; }
.stagger>*:nth-child(1){ animation-delay:.06s; }
.stagger>*:nth-child(2){ animation-delay:.15s; }
.stagger>*:nth-child(3){ animation-delay:.24s; }
.stagger>*:nth-child(4){ animation-delay:.33s; }
.stagger>*:nth-child(5){ animation-delay:.42s; }
.stagger>*:nth-child(6){ animation-delay:.51s; }
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ───────── Typography system ───────── */
/* labels / eyebrows — inscriptional caps */
.eyebrow{ font-family:var(--display); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--gold); margin-bottom:12px; text-shadow:var(--halo); }
.deva{ font-family:var(--deva); color:var(--gold-deep); letter-spacing:var(--ls-deva); }
/* headings — upright old-style serif, sentence case, calm rhythm */
h1,h2,h3,h4,h5,h6{ font-family:var(--serif); font-style:normal; font-weight:var(--fw-heading);
  color:var(--ink); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); text-shadow:var(--halo); }
h1{ font-size:var(--fs-h1); text-shadow:0 2px 22px rgba(0,0,0,.78), 0 0 6px rgba(0,0,0,.55); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
h5,h6{ font-size:var(--fs-body); }
/* held emphasis inside headings — gold, upright (never italic) */
.hl, h1 em, h2 em, h3 em, h4 em, h1 strong, h2 strong, h3 strong{
  color:var(--gold); font-style:normal; font-weight:var(--fw-brand); }
/* the brand name "Samayo" — ONE reusable treatment everywhere it appears */
.samayo{ font-family:var(--serif); color:var(--gold); font-style:normal; font-weight:var(--fw-brand);
  font-variant-caps:small-caps; letter-spacing:.03em; }
/* body / lead — upright, comfortable, a step dimmer than headings */
.lead, .body{ font-family:var(--serif); font-style:normal; font-weight:var(--fw-body);
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-soft); letter-spacing:var(--ls-body);
  max-width:38ch; text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.8); }
.small{ font-family:var(--serif); font-size:var(--fs-small); line-height:1.5; color:var(--ink-soft); }
.fine{ font-family:var(--serif); font-size:var(--fs-caption); line-height:1.5; color:var(--ink-faint); letter-spacing:.02em; }

/* ───────── Sticky CTA dock + buttons ───────── */
.cta-dock{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:35;
  width:100%; max-width:600px;
  padding:14px 26px calc(18px + env(safe-area-inset-bottom));
  /* mostly opaque so scrolling content disappears cleanly behind it (no see-through overlap) */
  background:linear-gradient(180deg, rgba(14,8,5,0) 0, rgba(14,8,5,.97) 24px, #0e0805 60px);
  box-shadow:0 -10px 26px -10px rgba(0,0,0,.6);
  pointer-events:none;
}
.cta-dock>*{ pointer-events:auto; }
.screen:not(.active) .cta-dock{ display:none !important; }
.btn{
  position:relative; overflow:hidden; width:100%;
  font-family:var(--display); font-size:var(--fs-button); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--navy-0); border:none; cursor:pointer;
  background:linear-gradient(110deg,#f7d49a 0%,#ffe9c6 38%,#e0a85c 60%,#f7d49a 100%);
  background-size:220% 100%; animation:btnsheen 7s linear infinite;
  padding:17px 26px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 12px 32px -8px rgba(243,200,126,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s var(--ease-house), box-shadow .3s var(--ease-house), opacity .2s;
}
.btn::before{ content:""; position:absolute; inset:4px; z-index:0; pointer-events:none;
  border:1px solid rgba(120,60,12,.4); }
.btn>*{ position:relative; z-index:1; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn:hover{ box-shadow:0 16px 40px -8px rgba(243,200,126,.78), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:active{ transform:scale(.978); }
.btn:disabled{ opacity:.34; box-shadow:none; cursor:not-allowed; animation:none; }
@keyframes btnsheen{ to{ background-position:220% 0; } }
.btn-sub{ text-align:center; font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-top:10px; }

/* ───────── Hero (screen 0) ───────── */
.screen.hero-screen{ padding:0; }
.home-footer{ margin-top:8px; text-align:center; font-family:var(--display);
  font-size:9.5px; letter-spacing:.04em; color:var(--ink-faint); opacity:.7; line-height:1.3; }
.hero{ position:relative; width:100%; min-height:100vh; min-height:100dvh; overflow:hidden; }
.hero-inner{ position:relative; z-index:2; min-height:100vh; min-height:100dvh;
  padding:calc(22px + env(safe-area-inset-top)) 30px calc(202px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
/* brand (top) and body (bottom) sit in normal flow — never overlap */
.hero-body{ display:flex; flex-direction:column; }
/* brand block: SAMAY⊙ wordmark + bilingual tagline, centred at the top of the hero */
.brand{ position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.wordmark{ display:inline-flex; align-items:center; line-height:1; font-family:var(--display);
  font-weight:600; font-size:30px; text-transform:uppercase; color:var(--ink);
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(243,200,126,.25); }
.wordmark>span{ letter-spacing:.12em; }              /* trailing tracking doubles as the gap before the O */
.wordmark-o{ width:1.16em; height:1.16em; display:block; margin-bottom:.04em;
  --mark-orn:1;                                      /* reveal tripundra + flame (hero only) */
  filter:drop-shadow(0 1px 7px rgba(243,200,126,.45)); }
.wordmark-img{ width:158px; max-width:44vw; height:auto; display:block;
  filter:drop-shadow(0 1px 7px rgba(243,200,126,.35)); }
/* two-line typewriter tagline: Hindi line, then romanised line below */
.tagline{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:8px; }
.tag-row{ display:flex; align-items:center; justify-content:center; min-height:1.2em; }
.tag-deva{ font-family:var(--deva); font-size:21px; letter-spacing:.03em; color:var(--gold); text-shadow:var(--halo); }
.tag-rom{ font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.20em;
  text-transform:uppercase; color:var(--ink-soft); text-shadow:var(--halo); }
.tag-caret{ display:inline-block; width:2px; height:1em; margin-left:3px; background:var(--gold);
  align-self:center; animation:tagblink 1.05s steps(1) infinite; }
.tag-caret.done{ display:none; }                 /* stop blinking + remove once typing finishes */
@keyframes tagblink{ 50%{ opacity:0; } }
/* Devanagari triad eyebrow above the headline */
.hero-deva{ font-family:var(--deva); font-size:16.5px; letter-spacing:var(--ls-deva); color:var(--gold);
  margin-bottom:10px; opacity:.95;
  text-shadow:0 1px 3px rgba(0,0,0,.96), 0 2px 14px rgba(0,0,0,.85); }
.hero-badge{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  background:rgba(12,6,3,.74); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:8px 15px; font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:14px; text-shadow:var(--halo); }
.hero-badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold); flex-shrink:0; }
.hero h1{ font-size:clamp(30px,8vw,40px); line-height:1.2; min-height:3.3em;
  text-shadow:0 2px 5px rgba(0,0,0,.96), 0 2px 30px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.7); }
.hero .lead{ font-size:clamp(16px,4.3vw,18px); line-height:1.55;
  color:rgba(248,242,229,.95); margin-top:12px; min-height:2.3em;
  text-shadow:0 1px 3px rgba(0,0,0,.98), 0 2px 18px rgba(0,0,0,.9); }
/* rotating hero copy: horizontal slide carousel (auto-advance + seamless loop + manual swipe) */
.hero-carousel{ overflow:hidden; width:100%; touch-action:pan-y; cursor:grab; }
.hero-carousel:active{ cursor:grabbing; }
.hero-track{ display:flex; transition:transform .58s var(--ease-house); will-change:transform; }
.hero-slide{ flex:0 0 100%; min-width:100%; }
.hero-controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.hero-arrow{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line);
  background:rgba(20,11,6,.5); color:var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s, color .2s; }
.hero-arrow:hover{ border-color:var(--gold); color:var(--gold-bright); }
.hero-arrow svg{ width:15px; height:15px; }
.hero-dots{ display:flex; align-items:center; gap:7px; }
.hero-dot{ width:7px; height:7px; padding:0; border:none; border-radius:50%; background:rgba(243,200,126,.32);
  cursor:pointer; transition:background .25s, width .25s; }
.hero-dot.on{ width:18px; border-radius:4px; background:var(--gold-bright); }
.hero-divider{ width:42px; height:1px; margin:12px 0;
  background:linear-gradient(90deg, var(--gold), transparent); }
.hero-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.hero-stat{ position:relative; background:rgba(12,6,3,.80);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); padding:12px 6px; text-align:center; }
.hero-stat::before{ content:""; position:absolute; inset:4px; pointer-events:none;
  background:
    radial-gradient(circle at 0 0,        var(--gold) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 100% 0,      var(--gold) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 0 100%,      var(--gold) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 100% 100%,   var(--gold) 0 1.4px, transparent 2.2px); }
.hero-stat b{ display:block; font-family:var(--serif); font-size:clamp(18px,5.6vw,30px); font-weight:600;
  color:var(--gold); text-shadow:var(--halo); }
.hero-stat span{ display:block; font-family:var(--display); font-size:clamp(9px,2.6vw,12px); font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--gold-bright); margin-top:4px; line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.9); }
.hero .cta-dock{ background:linear-gradient(180deg, rgba(14,8,5,0) 0, rgba(14,8,5,.97) 24px, #0e0805 60px); }

/* ───────── Goal cards (screen 1) ───────── */
.goal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:20px; }
.goal-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:17px 15px 15px; cursor:pointer; font-family:inherit; text-align:left;
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
  transition:border-color .3s, background .3s, box-shadow .3s, transform .15s;
}
.goal-card::before{ content:""; position:absolute; inset:6px; pointer-events:none; z-index:1;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(circle at 0 0,        var(--gold) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 100% 0,      var(--gold) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 0 100%,      var(--gold) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 100% 100%,   var(--gold) 0 1.5px, transparent 2.3px); }
.goal-card:hover{ border-color:rgba(243,200,126,.45); transform:translateY(-2px); }
.goal-card:active{ transform:scale(.975); }
.goal-card.on{ border-color:var(--gold); background:var(--card-on);
  box-shadow:0 0 0 1px rgba(243,200,126,.4), 0 12px 36px -12px rgba(243,200,126,.4); }
.goal-card.on::before{ border-color:rgba(243,200,126,.45); }
.goal-card .gc-icon{ position:relative; z-index:2; color:var(--gold-deep);
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:5px; }
.goal-card .gc-icon svg{ width:26px; height:26px; display:block;
  filter:drop-shadow(0 1px 4px rgba(184,137,42,.35)); }
.goal-card .gc-graha{ font-family:var(--deva); font-size:11.5px; line-height:1;
  color:inherit; letter-spacing:var(--ls-deva); }
.goal-card.on .gc-icon{ color:var(--gold-bright); }
.goal-card .gc-title{ font-family:var(--serif); font-size:var(--fs-h5); font-weight:var(--fw-heading);
  letter-spacing:var(--ls-heading); color:var(--ink); line-height:1.25; position:relative; z-index:2; }
.goal-card .gc-sub{ font-family:var(--serif); font-size:var(--fs-caption); color:var(--ink-soft); line-height:1.45;
  position:relative; z-index:2; }
.goal-card .gc-check{ position:absolute; top:11px; right:11px; z-index:3; width:18px; height:18px;
  border-radius:50%; border:1.5px solid var(--gold-deep); background:transparent;
  display:flex; align-items:center; justify-content:center; transition:.2s; }
.goal-card.on .gc-check{ background:var(--gold); border-color:var(--gold); }
.goal-card .gc-check svg{ width:10px; height:10px; stroke:var(--navy-0); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:0; transition:opacity .15s; }
.goal-card.on .gc-check svg{ opacity:1; }
.selection-hint{ text-align:center; font-family:var(--display); font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold-deep); margin-top:14px; }
.limit-warn{ display:none; text-align:center; font-family:var(--serif); font-size:var(--fs-small);
  color:var(--copper); margin-top:8px; animation:fadeUp .3s ease; }
.limit-warn.show{ display:block; }

/* ───────── L2 options (screen 2) ───────── */
.l2-option{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line);
  padding:16px; margin-bottom:11px; cursor:pointer; font-family:inherit;
  transition:border-color .25s, background .25s, transform .15s;
}
.l2-option:hover{ border-color:rgba(243,200,126,.4); }
.l2-option:active{ transform:scale(.99); }
.l2-option.on{ border-color:var(--gold); background:var(--card-on);
  box-shadow:0 0 0 1px rgba(243,200,126,.35); }
.l2-option .lo-num{ width:27px; height:27px; border-radius:50%; background:rgba(8,4,10,.6);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:12px; font-weight:600; color:var(--gold);
  flex-shrink:0; margin-top:1px; transition:.2s; }
.l2-option.on .lo-num{ background:var(--gold); border-color:var(--gold); color:var(--navy-0); }
.l2-option .lo-txt b{ display:block; font-family:var(--serif); font-size:var(--fs-body); font-weight:var(--fw-heading);
  color:var(--ink); line-height:1.34; letter-spacing:var(--ls-heading); }
.l2-option .lo-txt span{ display:block; font-family:var(--serif); font-size:var(--fs-small); color:var(--ink-soft);
  line-height:1.45; margin-top:4px; }
.l2-hint{ text-align:center; font-family:var(--serif); font-size:var(--fs-small);
  color:var(--ink-soft); margin-top:6px; }
/* 6th option: free-text "write your own" */
.l2-write{ cursor:text; }
.l2-write .lo-num{ font-family:var(--serif); font-size:14px; }
.l2-write-input{ display:block; width:100%; margin-top:6px; padding:0; background:transparent;
  border:none; outline:none; resize:none; overflow:hidden; font-family:var(--serif);
  font-size:var(--fs-body); color:var(--ink); line-height:1.45; }
.l2-write-input::placeholder{ color:var(--ink-soft); opacity:.85; }
.transition-copy{ background:rgba(243,200,126,.07); border:1px solid var(--line-soft);
  padding:13px 15px; margin-bottom:18px; }
.transition-copy p{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); line-height:1.55; }

/* ───────── Bridge (screen 3) ───────── */
.bridge-card{ position:relative; overflow:hidden; margin-top:18px; padding:28px 24px;
  background:linear-gradient(135deg, rgba(46,24,11,.85), rgba(20,11,6,.8));
  border:1px solid var(--line); }
.bridge-card::before{ display:none; }
.bridge-card h3{ position:relative; font-family:var(--serif); font-size:22px; font-weight:var(--fw-heading);
  color:var(--ink); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); }
.bridge-card h3 strong{ font-style:normal; font-weight:600; color:var(--gold); }
.bridge-card .bc-sub{ position:relative; font-family:var(--serif); font-size:13.5px; color:var(--ink-soft);
  margin-top:13px; line-height:1.55; }
.bridge-goals{ position:relative; display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.bridge-goal-tag{ display:inline-flex; align-items:center; gap:5px; background:rgba(243,200,126,.12);
  border:1px solid var(--line); padding:5px 12px; font-family:var(--display); font-size:11px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-bright); }

/* ───────── Birth data (screen 4) ───────── */
.field-group{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.field-block{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-deep); }
.field-input-wrap{ position:relative; display:flex; align-items:center; background:var(--field);
  border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.field-input-wrap:focus-within{ border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(243,200,126,.14); }
.field-input-wrap input{ flex:1; border:none; outline:none; background:transparent;
  padding:14px 14px; font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:var(--fw-body); }
.field-input-wrap input::placeholder{ color:var(--ink-faint); }
.field-input-wrap input::-webkit-calendar-picker-indicator{ filter:invert(.8) sepia(.5) saturate(3) hue-rotate(2deg); cursor:pointer; }
.field-input-wrap .fi-icon{ padding:0 12px; color:var(--gold-deep); }
.field-input-wrap .fi-icon svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; display:block; }
/* Time-of-birth: three selects (hour/min/AM-PM) + a hidden value input, replacing
   <input type="time"> (which crashes the Instagram Android in-app browser). Three
   SEPARATE boxes, each styled like a .field-input-wrap with its own focus ring;
   the OS renders the open list natively. */
.tob-selects{ display:flex; align-items:stretch; gap:8px; min-width:0; }
.tob-mount{ display:block; min-width:0; }
.tob-box{ flex:1; display:flex; align-items:center; min-width:0; background:var(--field);
  border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.tob-box:focus-within{ border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(243,200,126,.14); }
/* appearance:none is LOAD-BEARING, not cosmetic: with native appearance WebKit
   zeroes author padding on selects, and once background/border are customised it
   discards author min-height too (empirically: the control collapses to ~22px on
   iOS — half its siblings, under the 44pt tap minimum). With appearance:none both
   engines honor the padding, so all three selects sit level with the inputs.
   The stripped native arrow is re-drawn as the background chevron. */
.tob-box select{ flex:1; width:100%; min-width:0; border:none; outline:none;
  padding:14px 22px 14px 12px; min-height:49px;
  font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:var(--fw-body);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b08d57' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px; }
.tob-box select.ph{ color:var(--ink-faint); }  /* closed control still on its placeholder */
.tob-box select option[value=""]{ color:var(--ink-faint); }
/* option list is OS-drawn on mobile; on desktop dark theme keep it readable */
.tob-box select option{ background:var(--field); color:var(--ink); }
.field-helper{ font-family:var(--serif); font-size:var(--fs-caption); color:var(--ink-soft); line-height:1.45; }
.field-helper.warn{ color:var(--gold); }
.time-unknown-btn{ display:inline-flex; align-items:center; gap:5px; font-family:var(--serif);
  font-size:12.5px; color:var(--gold); cursor:pointer; background:none; border:none; padding:0; margin-top:3px; }
.time-unknown-btn svg{ stroke:currentColor; fill:none; }
/* "Don't know my exact time of birth" checkbox + 80% note */
.time-unknown{ display:flex; align-items:center; gap:8px; margin-top:8px; cursor:pointer;
  font-family:var(--serif); font-size:13px; color:var(--ink-soft); }
.time-unknown input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto; }
.time-unknown-note{ margin:6px 0 0; font-family:var(--serif); font-size:12px; line-height:1.45;
  color:var(--gold); opacity:.85; }
.privacy-note{ display:flex; align-items:center; gap:9px; background:rgba(20,11,6,.55);
  border:1px solid var(--line-soft); padding:12px 13px; margin-top:6px; }
.privacy-note svg{ width:15px; height:15px; stroke:var(--sage); fill:none; flex-shrink:0; }
.privacy-note span{ font-family:var(--serif); font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

/* ───────── Loader (screen 5) ───────── */
.loader-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:74vh; padding:24px 0; }
.loader-ring-wrap{ position:relative; width:108px; height:108px; margin-bottom:30px; }
.loader-ring-wrap svg{ transform:rotate(-90deg); filter:drop-shadow(0 0 10px rgba(243,200,126,.4)); }
.loader-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:28px; font-weight:600; color:var(--gold); }
.loader-title{ font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); text-align:center; margin-bottom:10px; text-shadow:var(--halo); }
.loader-msg{ font-family:var(--serif); font-size:var(--fs-small); color:var(--ink-soft);
  text-align:center; min-height:22px; transition:opacity .3s; }
.loader-steps{ width:100%; margin-top:30px; display:flex; flex-direction:column; }
.lstep{ display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.lstep:last-child{ border-bottom:none; }
.lstep .ls-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; transition:background .4s; }
.lstep .ls-dot.done{ background:var(--gold); }
.lstep .ls-dot.active{ background:var(--gold-bright); box-shadow:0 0 0 3px rgba(243,200,126,.2);
  animation:pulse 1.2s ease infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(243,200,126,.2); } 50%{ box-shadow:0 0 0 6px rgba(243,200,126,.08); } }
.lstep span{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); transition:color .3s; }
.lstep.active-step span{ color:var(--ink); font-weight:600; }
.lstep.done-step span{ color:var(--ink-faint); }

/* ───────── Phone capture (screen 6) ───────── */
.phone-ready-card{ position:relative; overflow:hidden; margin-bottom:20px; padding:24px; text-align:center;
  background:linear-gradient(135deg, rgba(46,24,11,.85), rgba(20,11,6,.8)); border:1px solid var(--line); }
.phone-ready-card::after{ content:""; position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);
  width:200px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(243,200,126,.22), transparent 70%); pointer-events:none; }
.phone-ready-card .prc-eyebrow{ position:relative; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:9px; }
.phone-ready-card h2{ position:relative; font-size:26px; }
.phone-ready-card h2 strong{ font-style:normal; font-weight:600; color:var(--gold); }
.phone-ready-card .prc-sub{ position:relative; font-family:var(--serif); font-size:13.5px; color:var(--ink-soft);
  margin-top:9px; line-height:1.5; }
.charts-row{ position:relative; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:15px; }
.chart-tag{ background:rgba(243,200,126,.12); border:1px solid var(--line); padding:4px 9px;
  font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--gold-bright); }
.social-proof{ text-align:center; font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; }
.social-proof b{ color:var(--gold); font-weight:600; }
.phone-field-wrap{ display:flex; align-items:center; overflow:hidden; margin-bottom:11px;
  background:var(--field); border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.phone-field-wrap:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,200,126,.14); }
.phone-cc{ padding:0 12px 0 14px; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink-soft);
  border-right:1px solid var(--line); height:52px; display:flex; align-items:center; }
.phone-field-wrap input{ flex:1; border:none; outline:none; background:transparent; padding:0 14px;
  font-family:var(--serif); font-size:16px; color:var(--ink); height:52px; font-weight:500; }
.phone-field-wrap input::placeholder{ color:var(--ink-faint); }
.phone-field-wrap.is-readonly{ opacity:.7; background:rgba(255,255,255,.02); }
.phone-field-wrap.is-readonly input{ color:var(--ink-soft); cursor:default; }
.field-hint{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); margin:-6px 0 11px; }
.trust-row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.trust-item{ display:flex; align-items:center; gap:5px; font-family:var(--serif); font-size:12px; color:var(--ink-faint); }
.trust-item svg{ width:13px; height:13px; stroke:var(--sage); stroke-width:2; fill:none; }

/* ───────── Confirmation (screen 7) ───────── */
.journey-steps{ margin-top:22px; }
.jstep{ display:flex; gap:14px; padding-bottom:20px; position:relative; }
.jstep:not(:last-child)::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:1px; background:var(--line); }
.jstep .js-dot{ width:29px; height:29px; border-radius:50%; border:1px solid var(--line); background:rgba(8,4,10,.6);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--display);
  font-size:12px; font-weight:600; color:var(--ink-faint); z-index:1; }
.jstep.done .js-dot{ background:var(--sage); border-color:var(--sage); color:var(--navy-0); }
.jstep.done .js-dot svg{ width:13px; height:13px; stroke:var(--navy-0); stroke-width:2.8; fill:none; }
.jstep.here .js-dot{ background:var(--gold); border-color:var(--gold); color:var(--navy-0);
  box-shadow:0 4px 14px rgba(243,200,126,.34); }
.jstep .js-body{ padding-top:4px; }
.jstep .js-body b{ display:block; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.jstep.done .js-body b{ color:var(--ink-soft); }
.jstep .js-tag{ display:inline-block; background:rgba(243,200,126,.12); border:1px solid var(--line);
  padding:2px 8px; font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); margin-left:8px; }
.jstep .js-body p{ font-family:var(--serif); font-size:13px; color:var(--ink-faint); line-height:1.5; margin-top:2px; }
.trust-tiles{ display:flex; gap:9px; margin-top:16px; }
.ttile{ flex:1; position:relative; background:var(--card); border:1px solid var(--line); padding:14px 8px; text-align:center; }
.ttile b{ display:block; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--gold); }
.ttile span{ display:block; font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:3px; line-height:1.3; }
.orn-divider{ display:flex; align-items:center; gap:11px; margin:20px 0; }
.orn-divider::before, .orn-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.orn-divider span{ font-size:14px; color:var(--gold); opacity:.7; }

/* ───────── Responsive ───────── */
@media (max-width:380px){
  .screen{ padding-left:20px; padding-right:20px; }
  .goal-grid{ gap:9px; }
  .goal-card{ padding:14px 12px 13px; }
  .hero-inner{ padding-left:24px; padding-right:24px; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce){
  .stagger>*{ animation:none; opacity:1; }
  .screen{ animation:none; }
  .btn{ animation:none !important; }
  .lstep .ls-dot.active{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ═══════════ Light "parchment" theme — funnel screens 1–7 ═══════════
   The hero (screen 0, body.theme-dark) stays dark with the mandala; every other
   screen flips to the brand's beige/parchment palette via re-scoped tokens. */
body:not(.theme-dark){
  --ink:#1c1510;
  --ink-soft:#4a3728;
  --ink-faint:#8c7b6e;
  --gold:#b8892a;
  --gold-deep:#9a7320;
  --gold-bright:#c8721a;
  --copper:#b84c2e;
  --line:#ddd4c4;
  --line-soft:#e7dfd0;
  --card:#faf6f0;
  --card-on:#fdf0e3;
  --field:#ffffff;
  --sage:#9a7320;            /* trust / done accents → gold (was green) for consistency */
  --navy-0:#ffffff;          /* white tick / numerals on the gold-saffron chips */
  --halo:none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(200,114,26,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 100% 60%, rgba(184,137,42,.06) 0%, transparent 60%),
    #f5efe6;
}
/* drop the dark-sky dust on parchment */
body:not(.theme-dark)::before{ display:none; }

/* topbar + progress on parchment */
body:not(.theme-dark) .topbar{
  background:linear-gradient(180deg, rgba(245,239,230,.97) 70%, rgba(245,239,230,0)); }
/* back-btn appearance now handled by the shared .icon-btn token */
body:not(.theme-dark) .logo-s{ color:var(--ink); text-shadow:none; }
body:not(.theme-dark) .progress-bar{ background:#ede4d6; }
/* brand mark identical everywhere: on cream the ring gets its dark "compass face"
   (inside the ring only — not a chip) so the exact warm ring + bright star read just
   like the dark hero. Only the ring's cream highlight is deepened so it doesn't wash. */
body:not(.theme-dark) .mark-face{ fill:#1c1008; }
body:not(.theme-dark) .gring-3{ stop-color:#9a6a2a; }
body:not(.theme-dark) .logo-o{ filter:drop-shadow(0 1px 2px rgba(40,25,15,.28)); }

/* kill dark text-halos; brighten copy on light bg */
body:not(.theme-dark) .lead,
body:not(.theme-dark) .loader-title{ text-shadow:none; }
body:not(.theme-dark) .eyebrow{ color:#c8721a; text-shadow:none; }

/* CTA → saffron→vermillion pill, white text, no gold sheen */
body:not(.theme-dark) .btn{
  background:linear-gradient(135deg,#c8721a 0%,#b84c2e 100%);
  color:#fff; animation:none;
  box-shadow:0 10px 28px rgba(200,114,26,.34); }
body:not(.theme-dark) .btn::before{ display:none; }
body:not(.theme-dark) .btn:hover{ box-shadow:0 14px 34px rgba(200,114,26,.46); }

/* parchment CTA dock — opaque so content disappears cleanly behind it */
body:not(.theme-dark) .cta-dock{
  background:linear-gradient(180deg, rgba(245,239,230,0) 0, rgba(245,239,230,.98) 24px, #f5efe6 60px);
  box-shadow:0 -10px 26px -10px rgba(28,21,16,.14); }

/* cleaner parchment cards: drop gold corner-dots, add soft depth */
body:not(.theme-dark) .goal-card::before{ display:none; }
body:not(.theme-dark) .goal-card,
body:not(.theme-dark) .l2-option,
body:not(.theme-dark) .ttile{ box-shadow:0 2px 12px rgba(28,21,16,.06); }

/* white form fields: reset the dark calendar-picker filter */
body:not(.theme-dark) .field-input-wrap input::-webkit-calendar-picker-indicator{ filter:none; }
body:not(.theme-dark) .privacy-note{ background:#ede4d6; border-color:var(--line); }

/* loader ring → saffron on a light track */
body:not(.theme-dark) #loaderRing{ stroke:#c8721a; }
body:not(.theme-dark) .loader-ring-wrap circle:first-child{ stroke:#ede4d6; }

/* dark accent cards (bridge / phone-ready) keep their dark fill → light text */
body:not(.theme-dark) .bridge-card h3{ color:#faf3e8; }
body:not(.theme-dark) .bridge-card .bc-sub{ color:rgba(250,243,232,.72); }
body:not(.theme-dark) .bridge-goal-tag{
  color:rgba(250,243,232,.9); background:rgba(200,114,26,.22); border-color:rgba(200,114,26,.4); }
body:not(.theme-dark) .phone-ready-card h2{ color:#faf3e8; }
body:not(.theme-dark) .phone-ready-card .prc-eyebrow{ color:rgba(250,243,232,.6); }
body:not(.theme-dark) .phone-ready-card .prc-sub{ color:rgba(250,243,232,.72); }
body:not(.theme-dark) .chart-tag{
  color:rgba(250,243,232,.82); background:rgba(200,114,26,.22); border-color:rgba(200,114,26,.34); }
/* selection markers → gold (match Step-1 dots): L2 numbers + journey "future" dots */
body:not(.theme-dark) .l2-option .lo-num{ background:transparent; border-color:var(--gold-deep); color:var(--gold-deep); }
body:not(.theme-dark) .jstep:not(.done):not(.here) .js-dot{ background:transparent; border-color:var(--gold-deep); color:var(--gold-deep); }

/* ═══════════ AI Chat (Screen 8) — IN-FLOW flex column; nothing fixed but the mandala ═══════════
   The chat is a normal flex column that fills body.on-chat (height = --vvh). No position:fixed
   on the column or the input, so the iOS keyboard can never strand a ghost overlay. */
.chat-screen{ padding:0 !important; }
.chat-screen.active{ display:flex !important; flex-direction:column; height:100%; overflow:hidden; }

/* header — fixed height */
.chat-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  background:linear-gradient(180deg, rgba(12,6,3,.97), rgba(12,6,3,.84));
  border-bottom:1px solid var(--line); }
/* .chat-back now consumes the shared .icon-btn token */
.chat-id{ display:flex; align-items:center; gap:10px; }
.chat-logo{ width:30px; height:30px; display:block; filter:drop-shadow(0 1px 6px rgba(243,200,126,.45)); }
.chat-logo-img{ height:40px; width:auto; display:block; filter:drop-shadow(0 1px 6px rgba(243,200,126,.4)); }
.chat-id-txt{ display:flex; flex-direction:column; line-height:1.2; }
.chat-name{ font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); }
.chat-status{ display:flex; align-items:center; gap:6px; font-family:var(--serif); font-size:11.5px;
  color:var(--gold-deep); letter-spacing:.02em; }
.chat-live{ width:6px; height:6px; border-radius:50%; background:#7ec97e; box-shadow:0 0 6px #7ec97e;
  animation:typedot 1.6s ease-in-out infinite; }
.chat-spacer{ flex:1; }

/* message list — the ONLY scroller (min-height:0 lets flex actually shrink it) */
.chat-stream{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:13px; padding:18px 18px 12px; }
.chat-stream::-webkit-scrollbar{ width:0; }
/* session-break divider (shown when a returning user's birth details changed) */
.chat-divider{ display:flex; align-items:center; gap:10px; margin:18px 6px 14px;
  font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); }
.chat-divider::before,.chat-divider::after{ content:''; flex:1 1 auto; height:1px;
  background:var(--ink-faint); opacity:.28; }
.chat-bubble{ max-width:86%; font-family:var(--serif); font-size:15.5px; line-height:1.56;
  padding:13px 16px; border-radius:16px; animation:rise .42s var(--ease-house) both; }
.chat-bubble.ai{ align-self:flex-start; color:var(--ink); border-bottom-left-radius:5px;
  background:rgba(18,10,6,.94); border:1px solid var(--line);
  text-shadow:0 1px 2px rgba(0,0,0,.55); }
.chat-bubble.ai .who{ display:block; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.chat-bubble.ai b{ color:var(--gold-bright); font-weight:600; }
.chat-bubble.ai .samayo{ color:var(--gold); font-variant-caps:small-caps; font-weight:600; letter-spacing:.03em; }
.chat-bubble.me{ align-self:flex-end; color:var(--navy-0); font-weight:500; border-bottom-right-radius:5px;
  background:linear-gradient(135deg,#f7d49a,#e0a85c); box-shadow:0 8px 22px -10px rgba(243,200,126,.6); }
.chat-bubble.typing .dots{ display:inline-flex; gap:5px; padding:2px 0; }
.chat-bubble.typing .dots i{ width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:typedot 1s infinite; }
.chat-bubble.typing .dots i:nth-child(2){ animation-delay:.16s; }
.chat-bubble.typing .dots i:nth-child(3){ animation-delay:.32s; }
@keyframes typedot{ 0%,100%{ opacity:.32; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* "you've been signed out" banner — shown when an orphaned account session is detected
   at boot (local cache present, auth token gone). Fixed overlay so DOM placement is moot. */
.relogin-banner{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center;
  justify-content:center; gap:12px; flex-wrap:wrap; padding:9px 16px; font-family:var(--serif);
  font-size:13.5px; color:var(--ink); background:rgba(243,200,126,.14);
  border-bottom:1px solid var(--gold); backdrop-filter:saturate(1.2) blur(6px); }
.relogin-btn{ font-family:var(--serif); font-size:13px; font-weight:600; color:#1a1208;
  background:var(--gold, #c9a24b); border:none; border-radius:14px; padding:6px 16px; cursor:pointer; }
.relogin-btn:hover{ filter:brightness(1.06); }

/* suggested-questions row — horizontal scroll, its own flex row */
.chat-chips{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px;
  padding:4px 16px 8px; }
.chat-chips::-webkit-scrollbar{ height:0; }
/* chips wrap their text (grow vertically) and never scroll horizontally:
   white-space:normal + overflow-wrap + max-width:100%; flex:0 1 auto so a long
   chip can size down to the row and wrap instead of overflowing. */
.chat-chip{ flex:0 1 auto; max-width:100%; font-family:var(--serif); font-size:13.5px; color:var(--gold-bright);
  background:rgba(243,200,126,.08); border:1px solid var(--line); border-radius:16px;
  padding:8px 14px; cursor:pointer; white-space:normal; overflow-wrap:break-word; text-align:left;
  transition:border-color .2s, background .2s; }
.chat-chip:hover{ border-color:var(--gold); background:rgba(243,200,126,.15); }
/* input bar — IN FLOW (not fixed); solid bg so nothing shows through */
.chat-input{ flex:0 0 auto; display:flex; align-items:center; gap:9px;
  padding:8px 16px calc(10px + env(safe-area-inset-bottom));
  background:#0e0805; border-top:1px solid var(--line); }
.chat-input input{ flex:1; min-width:0; background:rgba(8,4,12,.55); border:1px solid var(--line);
  border-radius:999px; padding:13px 18px; font-family:var(--serif); font-size:16px; color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .2s; }
.chat-input input::placeholder{ color:var(--ink-faint); }
.chat-input input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,200,126,.14); }
.chat-send{ width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer;
  color:var(--navy-0); background:linear-gradient(135deg,#f7d49a,#e0a85c);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(243,200,126,.6); transition:transform .15s; }
.chat-send:active{ transform:scale(.94); }
.chat-send svg{ width:18px; height:18px; }

/* ═══════════ Chat onboarding: phases, form cards, loader, profile ═══════════ */
/* only show suggested questions + the text input in the final 'chat' phase */
.chat-screen:not([data-phase="chat"]) .chat-chips,
.chat-screen:not([data-phase="chat"]) .chat-input{ display:none; }

/* header profile button (shown only in the chat phase) */
/* .chat-profile-btn now consumes the shared .icon-btn token (position:relative kept below for its badge) */

/* in-stream form card (birth details + WhatsApp) */
.chat-form{ align-self:stretch; background:rgba(18,10,6,.94); border:1px solid var(--line); border-radius:16px;
  padding:16px; display:flex; flex-direction:column; gap:12px; animation:rise .42s var(--ease-house) both; }
.chat-form .field-group{ margin-top:0; gap:12px; }
.cf-warn{ font-family:var(--serif); font-size:13px; color:var(--copper); margin:0; }
.cf-btn{ align-self:stretch; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy-0); border:none; border-radius:999px; padding:14px; cursor:pointer;
  background:linear-gradient(110deg,#f7d49a,#e0a85c); box-shadow:0 8px 22px -10px rgba(243,200,126,.6); }
.cf-btn:active{ transform:scale(.98); }
.cf-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* full-area astrology loader, centred in the message area */
.chat-loader{ align-self:center; width:100%; display:flex; flex-direction:column; align-items:center;
  padding:18px 4px; animation:rise .42s var(--ease-house) both; }

/* profile editor — slides up over the chat */
.chat-profile{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; background:#120804;
  transform:translateY(100%); transition:transform .32s var(--ease-house); pointer-events:none; }
.chat-profile.open{ transform:none; pointer-events:auto; }
.chat-profile-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px; border-bottom:1px solid var(--line); }
.chat-profile-head h3{ font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }
.profile-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:rgba(20,11,6,.5);
  color:var(--gold); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.profile-close svg{ width:15px; height:15px; }
.profile-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:14px; padding:18px; }
.profile-body .field-group{ margin-top:0; gap:12px; }
.profile-save{ flex:0 0 auto; margin:0 18px calc(16px + env(safe-area-inset-bottom)); }

/* ── Chat answer: markdown bubbles + retry (M7) ── */
.chat-bubble.ai .ai-md p{ margin:0 0 .5em; }
.chat-bubble.ai .ai-md p:last-child{ margin-bottom:0; }
.chat-bubble.ai .ai-md b{ color:var(--gold-bright); font-weight:600; }
.chat-bubble.ai .ai-md em{ color:var(--ink); font-style:italic; opacity:.92; }
.chat-bubble.ai .ai-md ul{ margin:.35em 0; padding-left:1.15em; }
.chat-bubble.ai .ai-md li{ list-style:disc; margin:.18em 0; }
.chat-retry{ margin-left:6px; font-family:var(--serif); font-size:13.5px; color:var(--navy-0);
  background:linear-gradient(135deg,#f7d49a,#e0a85c); border:none; border-radius:999px;
  padding:4px 12px; cursor:pointer; }
.chat-retry:active{ transform:scale(.96); }

/* "Thinking…" indicator shown during the pause between answer bubbles */
.chat-thinking .thinking-label{ font-family:var(--serif); font-style:italic; font-size:14px;
  color:var(--gold); margin-right:8px; }
.chat-thinking .dots{ display:inline-flex; gap:5px; vertical-align:middle; }

/* ── Reasoning block (collapsible) + follow-up chips (M7b) ── */
.reasoning-block{ align-self:stretch; border:1px solid var(--line); border-radius:14px;
  background:rgba(18,10,6,.6); overflow:hidden; animation:rise .42s var(--ease-house) both; }
.rb-head{ width:100%; display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer;
  background:none; border:none; color:var(--gold); font-family:var(--display); font-size:11px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.rb-spark{ color:var(--gold); }
.rb-title{ flex:1; text-align:left; }
.rb-cat{ color:var(--gold-deep); }
.rb-chev{ width:14px; height:14px; flex:0 0 auto; transition:transform .2s; }
.reasoning-block.rb-open .rb-chev{ transform:rotate(180deg); }
.rb-body{ display:none; padding:0 14px 14px; }
.reasoning-block.rb-open .rb-body{ display:block; }
.rb-sec{ margin-top:11px; }
.rb-label{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px; }
.rb-sec p{ font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink); margin:0; }
.rb-sec ul{ margin:0; padding-left:1.1em; }
.rb-sec li{ font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--ink); list-style:disc; margin:.14em 0; }
.rb-na{ font-style:italic; color:var(--ink-faint); }

.chat-followups{ align-self:stretch; display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;
  animation:rise .42s var(--ease-house) both; }

/* ── Multiperson people panel (M8b) — reuses .chat-profile slide-up ── */
.people-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--gold); color:var(--navy-0); font-family:var(--display);
  font-size:9.5px; font-weight:600; line-height:16px; text-align:center; }
.chat-profile-btn{ position:relative; }
.people-hint{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); margin:0 0 12px; }
.people-empty{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-faint); margin:0 0 6px; }
.people-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.person-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:rgba(18,10,6,.5); }
.person-meta{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.person-meta b{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.person-meta span{ font-family:var(--serif); font-size:12.5px; color:var(--gold-deep); }
.person-del{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  background:rgba(20,11,6,.5); color:var(--gold); cursor:pointer; }
/* active state + per-profile actions (+ Add / Edit / Delete) */
.person-row.on{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(243,200,126,.30); }
.person-acts{ flex:0 0 auto; display:flex; gap:6px; }
.person-act{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 9px; border-radius:8px; border:1px solid var(--line);
  background:rgba(20,11,6,.5); color:var(--ink-soft); cursor:pointer; transition:border-color .2s, color .2s; white-space:nowrap; }
.person-act:hover{ border-color:var(--gold); color:var(--gold-bright); }
.person-act.person-toggle.on{ border-color:var(--gold); background:var(--gold); color:var(--navy-0); }
.person-act.person-danger:hover{ border-color:#c0603a; color:#e08a63; }
.people-add{ border-top:1px solid var(--line); padding-top:14px; }
/* Add + Done sit together under the form. Done used to be pinned to the panel
   footer, which put the panel's exit a full scroll away from the form you were
   filling in. Add takes the space it needs; Done stays a fixed, quieter width. */
.people-actions{ display:flex; gap:9px; align-items:stretch; }
.people-actions .cf-btn{ flex:1 1 auto; align-self:auto; }
.cf-btn-outline{ flex:0 0 auto; font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); cursor:pointer;
  background:transparent; border:1px solid var(--gold); border-radius:999px; padding:14px 20px;
  transition:background .16s, color .16s, border-color .16s; }
.cf-btn-outline:hover{ background:rgba(243,200,126,.10); color:var(--ink); }
.cf-btn-outline:active{ transform:scale(.98); }
.people-add .field-group{ margin-top:0; gap:11px; margin-bottom:12px; }

/* ── Free-questions flow: counter pill + bottom sheets (unlock / paywall) ── */
.free-counter{ flex:0 0 auto; align-self:center; font-family:var(--display); font-size:10.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-0);
  background:linear-gradient(135deg,#f7d49a,#e0a85c); border-radius:999px; padding:4px 10px; }

.sheet-backdrop{ position:absolute; inset:0; z-index:14; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .16s; }
.sheet-backdrop.show{ opacity:1; pointer-events:auto;
  /* Blur the chat behind the sheet so a gated answer can't be read until the
     number is given — soft (not a harsh blackout), so it doesn't feel heavy-handed. */
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }

.unlock-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:15;
  background:#1a0f08; border-top:1px solid var(--line); border-radius:20px 20px 0 0;
  padding:14px 20px calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:11px;
  transform:translateY(115%); transition:transform .24s var(--ease-house);
  box-shadow:0 -18px 50px -20px rgba(0,0,0,.8); }
.unlock-sheet.open{ transform:none; }
.us-grip{ width:38px; height:4px; border-radius:2px; background:var(--line); align-self:center; margin-bottom:4px; }
.us-eyebrow{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }
.us-title{ font-family:var(--serif); font-size:19px; line-height:1.3; color:var(--ink); font-weight:500; }
.us-sub{ font-family:var(--serif); font-size:14.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.us-fine{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); text-align:center; margin:2px 0 0; }
.us-later{ background:none; border:none; color:var(--ink-soft); font-family:var(--serif); font-size:14px;
  padding:6px; cursor:pointer; }

/* ── Second-person confirmation dialog ──
   Same bottom-sheet chassis as unlock/paywall, but ADVISORY: it never blocks the
   message, so "Continue anyway" is a visible peer of "Add person" rather than a
   buried link. A false positive must cost exactly one tap. */
/* A compact form, not a summary: every field is live the moment the drawer
   opens, so there is no Edit/Done round trip for a one-character correction.
   The key column is fixed so the controls line up as a column the eye can scan. */
.sp-card{ border:1px solid var(--line); border-radius:14px; padding:2px 13px;
  background:rgba(255,255,255,.03); display:flex; flex-direction:column; }
.sp-row{ display:flex; gap:10px; align-items:center; min-height:44px; padding:6px 0;
  font-family:var(--serif); font-size:14px; border-bottom:1px solid var(--line); }
.sp-row:last-child{ border-bottom:none; }
.sp-row .sp-k{ flex:0 0 60px; color:var(--ink-faint); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; font-family:var(--display); font-weight:600; }
.sp-row .sp-v{ flex:1 1 auto; min-width:0; }
.sp-row .sp-v .field-input-wrap{ display:block; }
.sp-row .sp-v input{ width:100%; }
/* The three time boxes have to share one row with the label, so they run tighter
   than the full-width birth form's copy of the same control. */
.sp-row .sp-v .tob-selects{ gap:6px; }
.sp-row .sp-v .tob-selects select{ font-size:13px; padding:8px 4px; }

/* The relation combobox is the panel's, unchanged — but the panel opens it in a
   full-height scrolling body, whereas here it drops inside a card row with the
   Add button immediately beneath, so this instance is capped to three options
   and scrolls for the rest.
   150px is measured, not derived: the first group's header sits above the rows,
   so header + three items + the box's own padding lands there. A computed
   "3 × item height" undershoots by exactly that header and shows only two.
   max-height, not height, so a filtered list of one match doesn't render as a
   tall empty box. */
#spCard .relation-ac{ max-height:150px; }

/* Reactivate mode shows the saved record read-only — nothing about it is in
   question, only whether it takes part in this reading. */
/* the saved value disagreeing with what the message said */
.sp-diff{ display:block; font-size:11.5px; font-style:normal; color:var(--gold-deep,#9a7320);
  margin-top:2px; letter-spacing:.01em; }
.sp-static{ display:block; font-family:var(--serif); font-size:14px; color:var(--ink);
  font-weight:500; padding:9px 0; word-break:break-word; }

.sp-skip{ background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-soft); font-family:var(--serif); font-size:14px; padding:9px 6px; cursor:pointer;
  transition:border-color .16s, color .16s; }
.sp-skip:hover{ border-color:var(--gold); color:var(--ink); }
#spWarn{ margin:0; }
/* This sheet is taller than the unlock/paywall ones and grows again while a row
   is being edited, so it scrolls internally instead of running off the top of a
   short screen (or behind the keyboard once a field has focus). */
.sp-sheet{ max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ── Fix: reasoning block vanishing during streaming ──
   .chat-stream is a fixed-height flex column. Children default to flex-shrink:1,
   and .reasoning-block has overflow:hidden (so its auto min-height resolves to 0),
   making it the shrinkable item — as streaming answer bubbles grew the column,
   flex compressed the reasoning block to 0 (clipped bottom-to-top). Pin every
   stream child to its natural height so the container SCROLLS instead of squishing. */
.chat-stream > * { flex-shrink: 0; }

/* searchable city dropdown — portalled to <body> (position:fixed) so it never clips */
.place-ac-anchor{ position:relative; }
.place-ac{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1000;
  max-height:240px; overflow-y:auto;
  background:#241509; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.55); padding:4px; }
.place-ac-item{ display:block; width:100%; text-align:left; background:none; border:0;
  color:var(--ink); font-family:var(--serif); font-size:14px; line-height:1.35;
  padding:10px 12px; border-radius:8px; cursor:pointer; white-space:normal; }
.place-ac-item:hover, .place-ac-item.active{ background:rgba(243,200,126,.14); color:var(--gold-bright); }
/* Non-clickable status hint (offline / unreachable / no-match) at the foot of the list. */
.place-ac-note{ padding:8px 12px; font-family:var(--serif); font-size:12.5px; line-height:1.35;
  color:rgba(243,200,126,.62); border-top:1px solid rgba(243,200,126,.12); cursor:default;
  user-select:none; }
body:not(.theme-dark) .place-ac-note{ color:#8a6d3b; border-top-color:#e6dcc7; }
/* In-flight spinner pinned just inside the right edge of the place input. */
.place-ac-spin{ position:absolute; right:12px; top:50%; margin-top:-7px;
  width:14px; height:14px; box-sizing:border-box; border-radius:50%;
  border:2px solid rgba(243,200,126,.25); border-top-color:var(--gold-bright);
  animation:place-ac-rot .6s linear infinite; pointer-events:none; display:none; }
.place-ac-spin.on{ display:block; }
@keyframes place-ac-rot{ to{ transform:rotate(360deg); } }

/* ═══════════════ WALLET (Phase 1) ═══════════════ */
/* header balance pill */
.wallet-pill{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--display); color:var(--gold-bright); background:rgba(243,200,126,.10);
  border:1px solid var(--line); border-radius:999px; padding:4px 5px 4px 9px; cursor:pointer; }
.wallet-pill .wp-ic{ width:14px; height:14px; }
.wallet-pill .wp-amt{ font-family:var(--serif); font-size:13px; font-weight:600; }
.wallet-pill .wp-plus{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:linear-gradient(135deg,#f7d49a,#e0a85c); color:var(--navy-0); font-size:14px; font-weight:700; line-height:1; }

/* install / add-to-home-screen pill — mirrors the wallet pill */
/* .install-pill (download) consumes .icon-btn; only its right margin is unique */
.install-pill{ margin-right:6px; }

/* add-to-wallet + recharge-complete bottom sheets (mirror .unlock-sheet) */
.wallet-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:15;
  background:#1a0f08; border-top:1px solid var(--line); border-radius:20px 20px 0 0;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; max-height:90%; overflow-y:auto;
  transform:translateY(118%); transition:transform .34s var(--ease-house);
  box-shadow:0 -18px 50px -20px rgba(0,0,0,.8); }
.wallet-sheet.open{ transform:none; }
.aw-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.aw-id{ display:flex; gap:10px; align-items:center; }
.aw-ic{ display:inline-flex; width:38px; height:38px; border-radius:11px; align-items:center; justify-content:center;
  background:rgba(243,200,126,.12); color:var(--gold-bright); }
.aw-ic svg{ width:20px; height:20px; }
.aw-title{ font-family:var(--serif); font-size:18px; color:var(--ink); font-weight:600; margin:0; }
.aw-current,.rd-current{ font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); margin:1px 0 0; }
.aw-close{ background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:4px; }
.aw-close svg{ width:20px; height:20px; }
.aw-summary{ background:rgba(243,200,126,.08); border:1px solid var(--line); border-radius:14px; padding:13px 15px; }
.aw-summary-label{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.aw-summary-row{ display:flex; align-items:center; gap:10px; margin:3px 0; }
.aw-summary-amt{ font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); }
.aw-summary-bonus{ font-family:var(--display); font-size:11px; font-weight:600; color:#3f9e6f; background:rgba(63,158,111,.14); border:1px solid rgba(63,158,111,.4); border-radius:999px; padding:3px 9px; }
.aw-newbal{ font-family:var(--serif); font-size:12.5px; color:var(--ink-soft); }
.aw-section-label{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
.wallet-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.wallet-tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:14px 6px;
  cursor:pointer; transition:border-color .2s, background .2s; }
.wallet-tile.on{ border-color:var(--gold); background:rgba(243,200,126,.12); }
.wallet-tile .wt-amt{ font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.wallet-tile .wt-bonus{ font-family:var(--display); font-size:11.5px; font-weight:600; color:#3f9e6f; }
.wallet-tile .wt-pop{ position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:8.5px; font-weight:700; letter-spacing:.08em; color:var(--navy-0);
  background:linear-gradient(135deg,#f7d49a,#e0a85c); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.aw-custom{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.aw-custom .aw-cur{ color:var(--ink-faint); font-family:var(--serif); font-size:16px; }
.aw-custom input{ flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--serif); font-size:15px; padding:13px 0; }
.aw-fine{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); text-align:center; margin:0; }
/* recharge-complete */
.wallet-done .rd-check{ align-self:center; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(127,214,160,.14); color:#7fd6a0; margin:6px 0 2px; }
.wallet-done .rd-check svg{ width:32px; height:32px; }
.wallet-done .rd-check.is-pending{ background:rgba(243,200,126,.10); color:var(--gold); }
.wallet-done .rd-check.is-pending svg{ animation:rd-spin 1.1s linear infinite; }
@keyframes rd-spin{ to{ transform:rotate(360deg); } }
.wallet-done .rd-check.is-error{ background:rgba(220,80,60,.12); color:#e06050; }
.wallet-done .rd-retry{ font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy-0); border:none; border-radius:999px; padding:14px; cursor:pointer;
  background:linear-gradient(110deg,#f7d49a,#e0a85c); box-shadow:0 8px 22px -10px rgba(243,200,126,.6);
  align-self:stretch; margin-top:4px; }
.wallet-done .rd-retry:active{ transform:scale(.98); }
.rd-added{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); text-align:center; }
.rd-bonus{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); text-align:center; }
.rd-newbal-card{ display:flex; align-items:center; justify-content:space-between; background:rgba(243,200,126,.08); border:1px solid var(--line); border-radius:13px; padding:14px 16px; }
.rd-newbal-card span{ font-family:var(--serif); font-size:14px; color:var(--ink-soft); }
.rd-newbal-card b{ font-family:var(--serif); font-size:20px; color:var(--ink); }
/* wallet panel */
.wallet-body{ display:flex; flex-direction:column; gap:14px; padding:16px; overflow-y:auto; }
.wallet-card{ background:linear-gradient(135deg, rgba(243,200,126,.16), rgba(243,200,126,.05)); border:1px solid var(--line); border-radius:18px; padding:18px; }
.wc-label{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); }
.wc-bal{ font-family:var(--serif); font-size:38px; font-weight:700; color:var(--ink); line-height:1.1; margin:4px 0 2px; }
.wc-sub{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); }
.wc-actions{ display:flex; gap:10px; margin-top:14px; }
.wc-topup{ flex:1; align-self:auto; margin:0; }
.wc-refresh{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; color:var(--ink); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.06em; padding:0 16px; cursor:pointer; }
.wallet-stats{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.wallet-stats > div{ flex:1; text-align:center; padding:12px 6px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.wallet-stats > div:last-child{ border-right:none; }
.wallet-stats span{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.1em; color:var(--ink-faint); }
.wallet-stats b{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.wallet-activity-head{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
.wallet-ledger{ display:flex; flex-direction:column; }
.wl-row{ display:flex; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line); }
.wl-row:last-child{ border-bottom:none; }
.wl-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; }
.wl-ic.in{ background:rgba(127,214,160,.14); color:#7fd6a0; }
.wl-ic.out{ background:rgba(243,200,126,.10); color:var(--gold-bright); }
/* min-width:0 lets this column actually shrink once the invoice button joins the
   row — without it the flex default (min-width:auto) keeps the date at full width
   and pushes the amount off the edge on a 320px screen. */
.wl-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.wl-meta b{ font-family:var(--serif); font-size:14.5px; color:var(--ink); font-weight:600; }
.wl-meta span{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-amt{ flex:0 0 auto; font-family:var(--serif); font-size:15px; font-weight:600; }
.wl-amt.in{ color:#7fd6a0; }
.wl-amt.out{ color:var(--ink); }
.wl-empty{ font-family:var(--serif); font-size:13.5px; color:var(--ink-faint); text-align:center; padding:18px 0; }

/* Tax-invoice download, shown only on captured top-up rows. */
.wl-inv{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:5px 9px;
  border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer;
  font-family:var(--serif); font-size:11.5px; letter-spacing:.02em; color:var(--gold);
  transition:border-color .18s ease, background .18s ease, color .18s ease; }
.wl-inv:hover{ border-color:var(--gold-deep); background:rgba(243,200,126,.08); color:var(--gold-bright); }
.wl-inv:disabled{ cursor:default; opacity:.6; }
.wl-inv svg{ width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.wl-inv-dots{ width:11px; height:11px; flex:0 0 auto; border-radius:50%;
  border:1.6px solid rgba(243,200,126,.28); border-top-color:var(--gold); animation:wlInvSpin .7s linear infinite; }
@keyframes wlInvSpin{ to{ transform:rotate(360deg); } }
/* Below ~360px the label is what has to go, not the button. */
@media (max-width:360px){ .wl-inv span{ display:none; } .wl-inv{ padding:6px; } }
@media (prefers-reduced-motion:reduce){ .wl-inv-dots{ animation:none; } }

/* "Load more" — one stream, so the only direction that means anything is older. */
.wl-more{ width:100%; margin:14px 0 2px; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; padding:12px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold);
  transition:border-color .18s ease, background .18s ease, color .18s ease; }
.wl-more:hover{ border-color:var(--gold-deep); background:rgba(243,200,126,.06); color:var(--gold-bright); }
.wl-more:disabled{ cursor:default; opacity:.6; }
.wl-more em{ font-family:var(--serif); font-style:normal; font-size:11.5px;
  letter-spacing:0; text-transform:none; color:var(--ink-faint); }

.wl-note{ font-family:var(--serif); font-size:12.5px; line-height:1.45; color:var(--gold-bright);
  background:rgba(243,200,126,.08); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; margin:0 0 10px; }

/* payment sheet — order summary + GST + methods */
.pm-summary{ background:rgba(243,200,126,.06); border:1px solid var(--line); border-radius:14px; padding:13px 15px; }
.pm-sum-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pm-sum-head span{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.pm-change{ background:none; border:none; color:var(--gold-bright); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.05em; cursor:pointer; }
.pm-row{ display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-family:var(--serif); font-size:14.5px; color:var(--ink-soft); }
.pm-row b{ color:var(--ink); font-weight:600; }
.pm-bonus-row span, .pm-bonus-row b{ color:#3f9e6f; }
.pm-divider{ height:1px; background:var(--line); margin:7px 0; }
.pm-total span{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.pm-total b{ font-family:var(--serif); font-size:20px; }
.pm-methods{ display:flex; flex-direction:column; gap:9px; }
.pm-method{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px 14px; cursor:pointer; text-align:left; }
.pm-method.on{ border-color:var(--gold); background:rgba(243,200,126,.08); }
.pm-m-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(243,200,126,.10); color:var(--gold-bright); }
.pm-m-ic svg{ width:20px; height:20px; }
.pm-m-txt{ flex:1; display:flex; flex-direction:column; }
.pm-m-txt b{ font-family:var(--serif); font-size:15px; color:var(--ink); font-weight:600; }
.pm-m-txt small{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); }
.pm-radio{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); }
.pm-method.on .pm-radio{ border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px #1a0f08; }

/* honor the hidden attribute (display:inline-flex above would otherwise override [hidden]) */
.wallet-pill[hidden]{ display:none; }

/* logout button in the profile panel */
.profile-logout{ display:block; width:100%; margin-top:14px; background:none; border:1px solid var(--line);
  color:var(--ink-soft); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; border-radius:12px; padding:12px; cursor:pointer; }
.profile-logout:hover{ border-color:#c66; color:#e88; }

/* give-feedback button in the profile panel */
.profile-feedback{ display:block; width:100%; margin-top:18px; background:none; border:1px solid var(--line);
  color:var(--gold); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; border-radius:12px; padding:12px; cursor:pointer; }
.profile-feedback:hover{ border-color:var(--gold); }

/* feedback modal: star rating + note */
#fbForm{ flex:1 1 auto; display:flex; flex-direction:column; }
.fb-content{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:0 22px; }
.fb-content .field-block{ width:100%; }
.fb-hint{ width:100%; margin:0; text-align:left; font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
.fb-stars{ display:flex; width:100%; justify-content:space-between; gap:8px; }
.fb-star{ background:none; border:none; cursor:pointer; font-size:34px; line-height:1; padding:0;
  color:rgba(243,200,126,.22); transition:color .15s ease, transform .1s ease; }
.fb-star:active{ transform:scale(.9); }
.fb-star.filled{ color:#f3c87e; }
#chatFeedback .field-input-wrap textarea{ flex:1; border:none; outline:none; background:transparent;
  resize:vertical; min-height:90px; padding:14px; font-family:var(--serif); font-size:16px;
  color:var(--ink); font-weight:var(--fw-body); }
#chatFeedback .field-input-wrap textarea::placeholder{ color:var(--ink-faint); }
#fbSubmit{ align-self:flex-end; width:auto; margin-top:6px; padding-left:34px; padding-right:34px; }
.fb-thanks{ font-family:var(--serif); font-size:16px; color:var(--gold); text-align:center; padding:32px 8px; margin:0; }

/* hero "Log in" link + returning-user login modal */
.hero-login{ display:block; margin:12px auto 0; background:none; border:none; cursor:pointer;
  font-family:var(--serif); font-size:14px; color:var(--ink-soft); }
.hero-login b{ color:var(--gold-bright); font-weight:600; }
.login-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-modal[hidden]{ display:none; }
.login-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(2px); }
.login-card{ position:relative; z-index:1; width:100%; max-width:380px; background:#1a0f08;
  border:1px solid var(--line); border-radius:20px; padding:26px 22px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); }
.login-x{ position:absolute; top:10px; right:14px; background:none; border:none; color:var(--ink-soft);
  font-size:24px; line-height:1; cursor:pointer; }
.login-eyebrow{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.login-title{ font-family:var(--serif); font-size:22px; color:var(--ink); font-weight:500; margin:0; }
.login-sub{ font-family:var(--serif); font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 2px; }
/* OTP action links: use the gold accent (was browser-default blue, clashed with the dark/gold modal) */
.login-sub a, .us-fine a{ color:var(--gold); text-decoration:none; }
.login-sub a:hover, .us-fine a:hover{ color:var(--gold-bright); text-decoration:underline; }

/* Login modal — always cream + orange, independent of the page theme (it opens
   over the theme-dark hero). Scoped to .login-card so funnel reuse is untouched. */
.login-card{ background:#faf4ea; border-radius:0; border:1px solid #c4a25e;
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.7), inset 0 0 0 2px rgba(196,162,94,.35), 0 24px 70px rgba(28,21,16,.34); }
.login-card .login-x{ color:#7a5c3c; }
.login-card .login-eyebrow{ color:#b8892a; text-shadow:none; }
.login-card .login-title{ color:#3a2410; text-shadow:none; }
.login-card .login-sub{ color:#7a5c3c; }
.login-card .login-sub a{ color:#b8892a; }
.login-card .login-sub a:hover{ color:#9a7320; }
.login-card .phone-field-wrap{ background:#fff; border-color:rgba(58,36,16,.18); }
.login-card .phone-field-wrap:focus-within{ border-color:#b8892a; box-shadow:0 0 0 3px rgba(184,137,42,.16); }
.login-card .phone-cc{ color:#5c3f24; border-right-color:rgba(58,36,16,.14); }
.login-card .phone-field-wrap input{ color:#3a2410; }
.login-card .phone-field-wrap input::placeholder{ color:#a78a66; }
.login-card .cf-btn{ background:linear-gradient(135deg,#c8721a,#b84c2e); color:#fff; border-radius:0; box-shadow:0 10px 28px rgba(200,114,26,.34); }
.login-card .cf-btn:hover{ background:linear-gradient(135deg,#b86514,#a8442a); }
.login-card .cf-warn{ color:#b84c2e; }

/* faked-login locked reading (Feature 6) */
.locked-reading{ align-self:stretch; border:1px solid var(--line); border-radius:16px; padding:16px 17px;
  background:rgba(18,10,6,.6); display:flex; flex-direction:column; gap:9px; animation:rise .42s var(--ease-house) both; }
.lock-head{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.lock-ic{ width:16px; height:16px; flex:0 0 auto; }
.lock-preview{ font-family:var(--serif); font-size:15px; line-height:1.6; color:var(--ink-soft);
  filter:blur(4.5px); user-select:none; pointer-events:none; max-height:3.4em; overflow:hidden; }
.lock-sub{ font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); margin:0; }
.lock-unlock-btn{ align-self:flex-start; margin-top:2px; }

/* ── AstroLogic — discovery cards + life-domain green/red questions ───────── */
.astro-tabs{ display:none; flex:0 0 auto; gap:24px; padding:8px 18px 0; border-bottom:1px solid var(--line-soft); }
.astro-tabs.show{ display:flex; }
.astro-tab{ background:none; border:none; font-family:var(--display); font-size:13px; letter-spacing:.04em;
  color:var(--ink-soft); padding:8px 2px 9px; cursor:pointer; border-bottom:2px solid transparent; }
.astro-tab.is-active{ color:var(--ink); border-bottom-color:var(--gold); }
.astro-pane{ display:none; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:16px; }
.chat-screen.view-astro .chat-stream,
.chat-screen.view-astro .chat-chips,
.chat-screen.view-astro .chat-input{ display:none !important; }
.chat-screen.view-astro .astro-pane{ display:block; }
.astro-pane-title{ font-family:var(--display); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin:2px 2px 10px; }
.astro-hero{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.astro-card{ display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:2px; padding:13px 15px; cursor:pointer; font:inherit; transition:border-color .2s; }
.astro-card:hover{ border-color:var(--gold); }
.astro-tag{ display:inline-block; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.05em;
  border-radius:999px; padding:3px 9px; margin-bottom:8px; }
.astro-card.green .astro-tag,.astro-zone-label.green{ color:#8fe0b4; }
.astro-card.green .astro-tag{ background:rgba(120,210,160,.12); }
.astro-card.red .astro-tag,.astro-zone-label.red{ color:var(--copper); }
.astro-card.red .astro-tag{ background:rgba(217,138,79,.14); }
.astro-card .astro-q-text{ font-family:var(--serif); font-size:14.5px; line-height:1.5; color:var(--ink); }
.astro-domains{ display:flex; flex-direction:column; gap:8px; }
.astro-dom{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:rgba(20,11,6,.35); }
.astro-dom-head{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 14px;
  background:none; border:none; font-family:var(--display); font-size:14px; color:var(--ink); cursor:pointer; text-align:left; }
.astro-dom-counts{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--ink-soft); }
.astro-dom-counts .g{ color:#8fe0b4; } .astro-dom-counts .r{ color:var(--copper); }
.astro-chev{ width:13px; height:13px; stroke:var(--ink-soft); fill:none; stroke-width:2.2; transition:transform .2s; }
.astro-dom.open .astro-chev{ transform:rotate(180deg); }
.astro-dom-body{ display:none; padding:2px 14px 14px; }
.astro-dom.open .astro-dom-body{ display:block; }
.astro-zone-label{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.04em; margin:12px 0 7px; }
.astro-q{ display:block; width:100%; text-align:left; font-family:var(--serif); font-size:13.5px; color:var(--gold-bright);
  background:rgba(243,200,126,.08); border:1px solid var(--line); border-radius:2px; padding:9px 13px; margin-bottom:7px;
  cursor:pointer; line-height:1.45; transition:border-color .2s, background .2s; }
.astro-q:hover{ border-color:var(--gold); background:rgba(243,200,126,.15); }
.astro-q-head{ display:block; }
.astro-q-hook{ display:block; font-family:var(--serif); font-size:11.5px; color:var(--ink-faint); margin-top:4px; line-height:1.4; }
.astro-sparse{ font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); padding:4px 0 2px; }
.astro-loading{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); padding:18px 2px; line-height:1.5; }
/* curiosity-gap card extras: teaser hook + uncover affordance (mechanism stays hidden) */
.astro-hook{ display:block; font-family:var(--serif); font-size:12.5px; color:var(--ink-soft); margin-top:7px; line-height:1.45; }
.astro-uncover{ display:block; font-family:var(--display); font-size:10.5px; letter-spacing:.06em; color:var(--gold); margin-top:9px; }

/* ── Consolidated chat header menu (kebab) ── */
.consolidated-hide{ display:none !important; }
.chat-menu-wrap{ position:relative; display:flex; align-items:center; }
/* .chat-menu-btn (overflow) now consumes the shared .icon-btn token */
.chat-menu{ position:absolute; top:42px; right:0; min-width:184px; background:var(--card-on);
  border:1px solid var(--line); border-radius:12px; padding:5px; z-index:60; flex-direction:column; }
.chat-menu[hidden]{ display:none; }
.chat-menu:not([hidden]){ display:flex; }
.chat-menu-item{ text-align:left; background:none; border:none; font-family:var(--serif); font-size:14px;
  color:var(--ink); padding:10px 12px; border-radius:8px; cursor:pointer; }
.chat-menu-item:hover{ background:rgba(243,200,126,.10); }
.chat-menu-item.danger{ color:var(--copper); }

/* ═══════════ Cream chat + AstroLogic (parchment theme on screen 3) ═══════════
   The chat now uses body:not(.theme-dark). Variable-based styles adapt for free;
   these rules recolor the surfaces that were hardcoded dark and fix text contrast
   on the gold pills. Scoped so the dark hero (screen 0) is untouched. */
/* chat chrome */
body:not(.theme-dark) .chat-head{ background:linear-gradient(180deg, rgba(245,239,230,.98), rgba(245,239,230,.9)); }
body:not(.theme-dark) .chat-logo-img{ filter:none; opacity:1; }   /* full colour logo (brown + peach) on cream */
/* chat-back icon color now unified via .icon-btn light-theme token */
body:not(.theme-dark) .chat-input{ background:#f5efe6; }
body:not(.theme-dark) .chat-input input{ background:#fff; color:var(--ink); }
body:not(.theme-dark) .chat-send{ background:linear-gradient(135deg,#c8721a,#b84c2e); color:#fff; }
body:not(.theme-dark) .chat-input input:focus{ box-shadow:0 0 0 3px rgba(184,137,42,.16); }
/* bubbles */
body:not(.theme-dark) .chat-bubble.ai{ background:#fffdf9; text-shadow:none; box-shadow:0 2px 12px rgba(28,21,16,.05); }
body:not(.theme-dark) .chat-bubble.me{ color:#3a2a14; }                 /* dark text on the gold pill (was white) */
body:not(.theme-dark) .cf-btn{ background:linear-gradient(135deg,#c8721a,#b84c2e); color:#fff;
  box-shadow:0 8px 22px -10px rgba(200,114,26,.5); }
/* forms / slide-up panels / reasoning card */
body:not(.theme-dark) .chat-form,
body:not(.theme-dark) .reasoning-block{ background:#fffdf9; }
body:not(.theme-dark) .chat-profile{ background:#f5efe6; }               /* details / people / wallet / feedback panels */
body:not(.theme-dark) .profile-close{ background:#fff; }
/* bottom sheets (unlock / wallet / paywall / payment) */
body:not(.theme-dark) .unlock-sheet,
body:not(.theme-dark) .wallet-sheet{ background:#faf4ea; box-shadow:0 -18px 50px -20px rgba(28,21,16,.22); }
/* AstroLogic surfaces */
body:not(.theme-dark) .astro-dom{ background:#faf4ea; }
body:not(.theme-dark) .astro-q,
body:not(.theme-dark) .chat-chip{ background:#fbf1df; }
body:not(.theme-dark) .astro-q:hover,
body:not(.theme-dark) .chat-chip:hover{ background:#f6e8d0; }
body:not(.theme-dark) .chat-menu-item:hover{ background:#f3e6cf; }
/* green retuned for cream (red/copper already adapts via the variable) */
body:not(.theme-dark) .astro-card.green .astro-tag,
body:not(.theme-dark) .astro-zone-label.green,
body:not(.theme-dark) .astro-dom-counts .g{ color:#2e7d52; }
body:not(.theme-dark) .astro-card.green .astro-tag{ background:#e2efe5; }

/* ═══════════ Chat header action chips (state-driven) ═══════════
   State 1 (free phase): [free counter] [Add people] [⋮]
   State 2 (exhausted):  [wallet + top-up] [Add people] [⋮]
   Order is DOM order; visibility is toggled in updateCounter() (free vs wallet). */
.chat-action-pill{ position:relative; flex:0 0 auto; align-self:center; display:inline-flex; align-items:center;
  gap:6px; font-family:var(--display); font-size:11px; letter-spacing:.04em; color:var(--gold-bright);
  background:rgba(243,200,126,.10); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px 5px 9px; cursor:pointer; white-space:nowrap; }
.chat-action-pill .cap-ic{ width:16px; height:16px; flex:0 0 auto; }
.chat-action-pill:hover{ border-color:var(--gold); }

/* WhatsApp brand mark. Two deliberate exceptions to how the sibling icons are
   drawn, both because it is somebody else's logo and not ours to restyle:
   it keeps WhatsApp green instead of inheriting the header's gold, and it sits
   a touch smaller (17px vs 18px) because the official glyph fills its viewBox
   edge to edge while our outline icons carry padding — matched by eye, not by
   number. Specificity is 3 classes so it beats the .chat-head .icon-btn svg
   sizing in the narrow-screen block below. */
.chat-head .wa-head-btn .wa-ic{ width:17px; height:17px; color:#25D366; }
.wa-head-btn:hover{ border-color:#25D366; }

/* high-contrast counter + cream chips */
body:not(.theme-dark) .free-counter{ background:linear-gradient(135deg,#c8721a,#b8892a); color:#fff; font-size:11px; padding:5px 12px; }
body:not(.theme-dark) .chat-action-pill{ background:#fff; border-color:#d9b25e; color:#5a3a12; }
body:not(.theme-dark) .chat-action-pill .cap-ic{ color:#b8892a; }
body:not(.theme-dark) .wallet-pill{ background:#fff; border-color:#d9b25e; color:#5a3a12; }
body:not(.theme-dark) .wallet-pill .wp-ic{ color:#b8892a; }
body:not(.theme-dark) .wallet-pill .wp-amt{ color:#5a3a12; }
body:not(.theme-dark) .wallet-pill .wp-plus{ width:22px; height:22px; background:linear-gradient(135deg,#c8721a,#b84c2e); color:#fff; }
body:not(.theme-dark) .people-badge{ background:#c8721a; color:#fff; }

/* narrow screens (app mode): show the text label (drop the icon) so the
   button's meaning stays visible — same intent as web mode. Tighten the
   header spacing so the wallet + label + menu still fit without overflow. */
/* Narrow screens (app mode). The row is
     [back][logo][spacer][wallet|counter][Add people][WA][⋮]
   and .chat-spacer is the only elastic part, so once it collapses every further
   pixel has to come out of a fixed item. Measured at 390px (iPhone 12–15, the
   commonest width) with the wallet showing, which is the widest state:

     padding 24 + back 32 + logo 60 + wallet 88 + "Add people" 82
              + WA 32 + kebab 32 + gaps 48  =  ~398px  →  overflows by 8px

   Adding a seventh control means giving something up. The wallet ICON is the
   cheapest thing in the row: it is pure decoration next to "₹0", which already
   says "money" unambiguously, and the pill keeps its balance, its "+" and its
   aria-label. So the label on "Add people" stays — it is the only place that
   feature is named anywhere in the UI — and the wallet glyph goes instead. */
@media (max-width:430px){
  .chat-action-pill .cap-ic{ display:none; }
  .chat-action-pill .cap-label{ display:inline; }
  .chat-action-pill{ padding:5px 10px; }
  .wallet-pill .wp-ic{ display:none; }
  .chat-head{ gap:8px; padding-left:12px; padding-right:12px; }
  .chat-id{ gap:6px; min-width:0; }
  .chat-logo-img{ height:32px; }
  /* 36→32 across the three round buttons buys back the 12px the new icon and
     its gap cost. Tap target stays at 32px, still above the 24px WCAG 2.2
     minimum and comfortable for a thumb. */
  .chat-head .icon-btn{ width:32px; height:32px; }
  .chat-head .icon-btn svg{ width:17px; height:17px; }
}

/* ≤400px covers the bulk of phones in portrait (390 = iPhone 12–15, 375 =
   SE3/13 mini, 384 = many Androids). "Add people" is set in Cinzel — an
   inscriptional caps face, and a wide one — so its label is the largest soft
   cost in the row; a step down to 10px keeps it fully legible at this size
   while giving back roughly a character's width. The rest comes from the gaps
   and the horizontal padding, not from any control. */
@media (max-width:400px){
  .chat-head{ gap:6px; padding-left:10px; padding-right:10px; }
  .chat-action-pill{ padding:5px 9px; }
  .chat-action-pill .cap-label{ font-size:10px; }
}

/* ≤375px (iPhone SE3, 13 mini, older Androids). Below this the wallet glyph and
   the tightened spacing are no longer enough and the label genuinely does not
   fit, so the pill falls back to its icon — the same icon it shows above 430px,
   with its aria-label, tooltip and count badge intact. Keeping the text here
   would only truncate it to "Add peopl…", which reads worse than the glyph. */
@media (max-width:375px){
  .chat-action-pill .cap-ic{ display:inline-flex; }
  .chat-action-pill .cap-label{ display:none; }
}

/* Very narrow (≤360px: iPhone SE, Galaxy A0x). Only the logo left to give. */
@media (max-width:360px){
  .chat-logo-img{ height:28px; }
}

/* Belt and braces for the long tail of widths and font fallbacks: if the row
   still cannot fit, the "Add people" label truncates rather than pushing the
   menu button off-screen. Arithmetic says it never should — this is here so a
   wider font on some device degrades legibly instead of breaking the header. */
.chat-action-pill{ min-width:0; }
.chat-action-pill .cap-label{ overflow:hidden; text-overflow:ellipsis; }

/* ═══════════ Relation combobox (Add people → Relation) ═══════════
   Anchored to the .field-input-wrap (already position:relative via .place-ac-anchor).
   Grouped, scrollable; cream-styled to match the parchment chat. */
.relation-ac{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1000;
  max-height:300px; overflow-y:auto; background:#fffdf9; border:1px solid #d9cbb4;
  border-radius:4px; box-shadow:0 12px 30px -12px rgba(28,21,16,.30); padding:4px; }
.relation-ac-group{ padding:9px 12px 5px; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:#b08a3a; background:#faf4ea; border-radius:3px; margin-top:2px; }
.relation-ac-group:first-child{ margin-top:0; }
.relation-ac-item{ display:block; width:100%; text-align:left; background:none; border:0;
  color:#1c1510; font-family:var(--serif); font-size:14.5px; line-height:1.35; padding:9px 12px;
  border-radius:3px; cursor:pointer; white-space:normal; }
.relation-ac-item:hover, .relation-ac-item.active{ background:#f6e8d0; }
.relation-ac-custom{ color:#9a7320; border-top:1px solid #efe6d5; margin-top:2px; }

/* ═══════════ People panel — cream surfaces (Add people) ═══════════ */
/* added-person card (name uses --ink, subtitle uses --gold-deep — both adapt) */
body:not(.theme-dark) .person-row{ background:#faf4ea; border-color:#d9cbb4; }
body:not(.theme-dark) .person-row.on{ border-color:#d9b25e; box-shadow:0 0 0 1px rgba(184,137,42,.2); }
body:not(.theme-dark) .person-act{ background:#fff; border-color:#d9cbb4; color:#5a4a3a; }
body:not(.theme-dark) .person-act:hover{ border-color:#c8721a; color:#9a7320; }
body:not(.theme-dark) .person-act.person-toggle.on{ background:linear-gradient(135deg,#c8721a,#b8892a); border-color:#b8892a; color:#fff; }
body:not(.theme-dark) .person-act.person-danger{ color:#b84c2e; border-color:#e3c3b6; }
body:not(.theme-dark) .person-act.person-danger:hover{ border-color:#b84c2e; color:#b84c2e; }
body:not(.theme-dark) .person-del{ background:#fff; border-color:#d9cbb4; color:#9a7320; }
/* location autocomplete dropdown — match the relation combobox */
body:not(.theme-dark) .place-ac{ background:#fffdf9; border-color:#d9cbb4; box-shadow:0 12px 30px -12px rgba(28,21,16,.28); }
body:not(.theme-dark) .place-ac-item{ color:#1c1510; }
body:not(.theme-dark) .place-ac-item:hover,
body:not(.theme-dark) .place-ac-item.active{ background:#f6e8d0; color:#1c1510; }