/* 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; }
.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; } }

.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); }

/* 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. */
@media (max-width:430px){
  .chat-action-pill .cap-ic{ display:none; }
  .chat-action-pill .cap-label{ display:inline; }
  .chat-action-pill{ padding:5px 10px; }
  .chat-head{ gap:8px; padding-left:12px; padding-right:12px; }
  .chat-id{ gap:6px; min-width:0; }
  .chat-logo-img{ height:32px; }
}

/* ═══════════ 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; }