/* ============================================================
   Dearest — design tokens + responsive web-app shell
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#f1ead7;
  --bg-deep:#e3dac0;
  --card:#ffffff;
  --sidebar-bg:#efe7d0;

  /* Brand */
  --olive:#3e4a2f;
  --olive-deep:#2a3320;
  --olive-light:#5b6840;
  --olive-tint:#c8cdb3;
  --moss:#7a8861;

  /* Text */
  --ink:#252b1b;
  --ink-soft:#5a604a;
  --ink-mute:#8a8d76;
  --ink-on-olive:#f5eed8;

  /* Accents */
  --blush:#e6d4b8;
  --blush-strong:#c8a47e;
  --rose:#a6724b;
  --cocoa:#8d5a3c;
  --lip:#a23a2a;

  --line:#d5cdb9;
  --shadow:0 20px 60px rgba(40,46,20,.18);
  --shadow-sm:0 4px 16px rgba(40,46,20,.08);

  /* Layout */
  --sidebar-w:288px;
  --tabbar-h:72px;
  --content-max:880px;
  --card-max:560px;
  --card-wide-max:760px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

/* ============================================================
   Shell — sidebar + content
   ============================================================ */

.app-shell{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(170deg,#3e4a2f 0%,#4f5536 55%,#5b6840 100%);
  border-right:1px solid rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  padding:28px 22px;
  gap:24px;
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04), 4px 0 24px rgba(40,46,20,.12);
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/static/images/splash-bg.png');
  background-size:cover;
  background-position:center;
  opacity:.22;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.sidebar > *{position:relative;z-index:2}
.sidebar .brand{display:flex;align-items:center;gap:12px;padding:0 6px}
.sidebar .brand-mark{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.35);outline:1px solid rgba(255,255,255,.18)}
.sidebar .brand-name{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:14.5px;color:#f2ead2;letter-spacing:-.015em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;color:rgba(242,234,210,.78);font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .18s ease;position:relative}
.side-item svg{width:20px;height:20px;flex-shrink:0}
.side-item:hover{background:rgba(255,255,255,.07);color:#f2ead2}
.side-item.active{background:linear-gradient(180deg,#ecb6b6 0%,#c97a7a 100%);color:#3a1f17;box-shadow:0 8px 22px rgba(196,122,122,.32);font-weight:600}
.side-item.active svg{stroke:#3a1f17}
.side-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.18);cursor:pointer;transition:background .15s ease;border:1px solid rgba(255,255,255,.06)}
.side-user:hover{background:rgba(0,0,0,.28)}
.side-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--olive-tint);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.side-avatar img,.side-avatar svg{width:100%;height:100%;object-fit:cover;display:block}
.side-avatar .initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:18px;color:var(--olive-deep);background:linear-gradient(160deg,var(--blush),#d8c2a0)}
.side-user-info{min-width:0;flex:1}
.side-user-name{font-size:13.5px;font-weight:600;color:#f2ead2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-sub{font-size:10.5px;color:rgba(242,234,210,.55);letter-spacing:.08em;text-transform:uppercase}

.content-area{
  flex:1;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
}

.view-host{flex:1;position:relative;overflow:hidden}
.view{
  position:absolute;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
  /* C4 — Take inactive views out of the sequential focus order so
     Tab from splash doesn't leak through ~260 hidden controls. The
     `inert` attribute is the spec-compliant way but support is
     90%+; visibility:hidden gives us a reliable fallback that
     also removes the node from accessibility tree + tab order. */
  visibility:hidden;
}
.view.active{opacity:1;transform:translateX(0);pointer-events:auto;visibility:visible}
.view::-webkit-scrollbar{width:0}

/* Page wrappers — used by most views */
.page{padding:36px 28px 40px;min-height:100%;display:flex;justify-content:center}
.page-wide{padding:36px 28px 40px;max-width:var(--content-max);margin:0 auto;width:100%}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px 32px;
  width:100%;
  max-width:var(--card-max);
  box-shadow:var(--shadow-sm);
}
.card.card-wide{max-width:var(--card-wide-max)}

/* Sidebar shows on desktop only — mobile is hidden */
@media (max-width:1023px){
  .sidebar{display:none}
}
@media (min-width:1024px){
  .tabbar{display:none !important}
  body{background:linear-gradient(180deg,#f1ead7,#e8dec3)}
  .content-area{background:var(--bg)}
}

/* Tabbed app views reserve space for the bottom tabbar on mobile.
   Only views that actually render the tabbar get the padding — body.in-app
   is set in applyChrome() iff the current view is in APP_VIEWS. Otherwise
   (splash, pick-companion, onboarding, login, ...) the padding-free
   gradient runs full-height and the leaf overlay can cover it cleanly. */
@media (max-width:1023px){
  body.in-app .view{padding-bottom:var(--tabbar-h)}
}

/* ============================================================
   Buttons / chips / inputs
   ============================================================ */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;font:600 15px/1 'Inter',sans-serif;letter-spacing:.01em;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.primary{background:var(--olive);color:var(--ink-on-olive);box-shadow:0 8px 24px rgba(40,46,20,.18)}
.btn.primary:hover{background:var(--olive-deep);box-shadow:0 12px 30px rgba(40,46,20,.24)}
.btn.light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.light:hover{border-color:var(--ink-soft);box-shadow:var(--shadow-sm)}

.btn.full{width:100%}
.btn.danger{background:#fff;border:1px solid var(--lip);color:var(--lip)}
.btn.danger:hover{background:var(--lip);color:#fff}
.btn-label{display:inline-flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.icon-btn:hover{border-color:var(--ink-soft);color:var(--ink);box-shadow:var(--shadow-sm)}

/* ============================================================
   Icons — sprite reference base. Use <svg class="i"><use href="#i-x"/></svg>
   ============================================================ */
.i{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor}
.i-inline{width:16px;height:16px;margin-right:2px}

.field{margin:14px 0}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.input,.textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:500 15px 'Inter',sans-serif;color:var(--ink);outline:none;transition:border .2s ease,box-shadow .2s ease}
.input:focus,.textarea:focus{border-color:var(--olive);box-shadow:0 0 0 3px rgba(62,74,47,.10)}
.textarea{min-height:84px;resize:vertical}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 13px 'Inter',sans-serif;color:var(--ink);cursor:pointer;transition:all .18s ease}
.chip:hover{border-color:var(--ink-soft)}
.chip.active{background:var(--olive);color:var(--ink-on-olive);border-color:var(--olive)}

.slider-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.slider{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:6px;background:linear-gradient(90deg,var(--blush),var(--rose));outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:999px;background:#fff;border:2px solid var(--olive);cursor:pointer;box-shadow:0 4px 14px rgba(40,46,20,.20);transition:transform .15s ease,box-shadow .15s ease}
.slider::-webkit-slider-thumb:hover{transform:scale(1.10);box-shadow:0 6px 18px rgba(40,46,20,.28)}
.slider:focus::-webkit-slider-thumb,.slider:active::-webkit-slider-thumb{transform:scale(1.18);border-color:var(--olive-deep)}
.slider::-moz-range-thumb{width:26px;height:26px;border-radius:999px;background:#fff;border:2px solid var(--olive);cursor:pointer;box-shadow:0 4px 14px rgba(40,46,20,.20)}
.slider-value{min-width:46px;text-align:center;font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--rose)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Profile2 collapsible sections — visual rhythm for a long form */
.p2-section{border:1px solid var(--line);border-radius:18px;margin:14px 0 0;background:#fdfaf2;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}
.p2-section[open]{background:#fff;border-color:var(--olive-tint);box-shadow:var(--shadow-sm)}
.p2-section summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;user-select:none;transition:background .15s ease}
.p2-section summary::-webkit-details-marker{display:none}
.p2-section summary:hover{background:rgba(62,74,47,.04)}
.p2-section .p2-sec-num{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:14px;color:var(--rose);min-width:24px}
.p2-section .p2-sec-name{font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:var(--ink);letter-spacing:-.005em}
.p2-section .p2-sec-preview{flex:1;font-size:12.5px;color:var(--ink-mute);letter-spacing:.02em;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:4px}
.p2-section .p2-chev{width:18px;height:18px;color:var(--ink-mute);transform:rotate(0deg);transition:transform .25s ease;flex-shrink:0}
.p2-section[open] .p2-chev{transform:rotate(90deg);color:var(--olive)}
.p2-sec-body{padding:0 20px 22px;border-top:1px solid var(--line)}
.p2-sec-body .field:first-child{margin-top:14px}
@media (max-width:600px){
  .p2-section .p2-sec-preview{display:none}
}

/* Profile1 sectioned panels — each q feels like a quiet room */

/* Love language: stacked chip + info popover. Each row is its own positioning
   anchor so the tooltip can pop above without colliding with neighbours. */

.ll-row{position:relative;display:flex;align-items:center;gap:8px}
.ll-row > .chip{flex:1;justify-content:flex-start;text-align:left;font-size:14px;padding:11px 16px}
.ll-tip-btn{width:26px;height:26px;border-radius:999px;background:#fff;border:1px solid var(--blush-strong);color:var(--rose);font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s ease;line-height:1;padding:0}
.ll-tip-btn:hover,.ll-row.tip-open .ll-tip-btn{background:var(--rose);color:#fff;border-color:var(--rose);transform:scale(1.06);box-shadow:0 4px 10px rgba(166,114,75,.30)}
.ll-tip-btn:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.ll-tip{position:absolute;left:0;right:0;bottom:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--ink-soft);box-shadow:0 14px 32px rgba(40,46,20,.16);z-index:20;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}
.ll-tip strong{display:block;font-family:'Fraunces',serif;font-weight:600;font-style:italic;color:var(--rose);font-size:14px;margin-bottom:4px}
.ll-tip em{font-family:'Fraunces',serif;font-style:italic;color:var(--rose);font-weight:500}
/* Language gating — body[data-lang] is set in JS from form.lang / user.language.
   Default (no attr) shows English. */
.ll-tip [lang="th"]{display:none}
body[data-lang="th"] .ll-tip [lang="en"]{display:none}
body[data-lang="th"] .ll-tip [lang="th"]{display:inline}
.ll-tip::after{content:"";position:absolute;top:100%;right:18px;width:0;height:0;border:7px solid transparent;border-top-color:#fff}
.ll-tip::before{content:"";position:absolute;top:100%;right:17px;width:0;height:0;border:8px solid transparent;border-top-color:var(--line)}
.ll-row.tip-open .ll-tip{opacity:1;pointer-events:auto;transform:translateY(0)}
@media (hover:hover){
  .ll-row:hover .ll-tip{opacity:1;pointer-events:auto;transform:translateY(0)}
}

.link{color:var(--rose);text-decoration:none;font-weight:600}
.center{text-align:center}
.small{font-size:11px}
.muted{color:var(--ink-mute)}
.spacer-sm{height:8px}.spacer{height:18px}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 0 14px;margin-bottom:6px}
.topbar .back{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.topbar .back:hover{border-color:var(--ink-soft);color:var(--ink);box-shadow:var(--shadow-sm)}
.topbar .back .i{width:18px;height:18px}
.topbar .title{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft)}
.topbar .ghost{width:40px;height:40px}

.q-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
.q-title{font-family:'Fraunces',serif;font-weight:500;font-size:34px;line-height:1.05;letter-spacing:-.02em;margin:8px 0 18px}
.q-title i{font-style:italic;color:var(--rose)}

.signup-sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.6}

/* ============================================================
   Auth split — editorial olive panel left, form right (≥900px)
   On mobile, only the form is shown (aside hidden).
   ============================================================ */

/* ============================================================
   Splash — full-bleed editorial
   ============================================================ */

#view-splash{
  background:linear-gradient(170deg,#3e4a2f 0%,#4f5536 55%,#5b6840 100%);
  color:var(--ink-on-olive);
  overflow:hidden;
  /* keep .view's position:absolute / inset:0 so the gradient fills the viewport */
}
#view-splash::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/static/images/splash-bg.png');
  background-size:cover;
  background-position:center;
  opacity:.34;
  mix-blend-mode:soft-light;
}

/* Brand lockup — ring + wordmark + tagline as one unit, like the brand sheet.
   Width is fit-content so align-items:center centres the ring (and tagline)
   relative to the WORDMARK width, not the whole grid column. */

/* Wider, softer dark halo behind the lockup so the rose/cream text pops over
   the leafy bg. Generous negative offsets and a broad blur produce an
   atmosphere rather than a visible rectangle. */

.splash-hero{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(68px,10.2vw,128px);line-height:.92;letter-spacing:-.035em;color:#f4ecd6;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.splash-hero i{
  font-style:italic;
  font-weight:500;
  background:linear-gradient(180deg,#ecb6b6 0%,#c97a7a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.splash-sub{font-family:'Inter';font-size:16.5px;font-weight:400;color:rgba(245,238,216,.82);letter-spacing:.015em;margin-top:32px;line-height:1.65;max-width:520px}

.splash-cta{
  align-self:end;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:460px;
  width:100%;
}
#view-splash .btn.primary{background:var(--ink-on-olive);color:var(--olive-deep)}
#view-splash .btn.primary:hover{background:#fff7e2}
#view-splash .btn.light{background:rgba(255,255,255,.08);color:var(--ink-on-olive);border:1px solid rgba(245,238,216,.32);backdrop-filter:blur(6px)}

/* Right-side aside (portrait + CTAs). On mobile we hide the portrait so the
   .splash-side wrapper effectively only contains the buttons; on desktop the
   wrapper becomes a flex column with the portrait on top and the CTAs below. */

@keyframes breathe-glow{
  0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.03) rotate(.6deg)}
}
/* 22.5s cycle / 9 frames / 2.5s per slot.
   Fade in 0–2.2% (0.5s), hold 2.2–11.1% (2s with Ken Burns zoom),
   fade out 11.1–13.3% (0.5s), invisible the rest. Adjacent slots overlap by
   the 0.5s fade so neighbouring frames true-crossfade. */
@keyframes splash-portrait-cycle{
  0%   {opacity:0;transform:scale(1)}
  2.2% {opacity:1;transform:scale(1)}
  11.1%{opacity:1;transform:scale(1.05)}
  13.3%{opacity:0;transform:scale(1.05)}
  100% {opacity:0;transform:scale(1)}
}

/* Faint grain over the splash for editorial-print depth */
#view-splash::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .82 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
}
@media (max-width:899px){

  
  
  .splash-sub{font-size:15.5px;margin-top:24px}
}
@media (max-width:520px){

  
  
  .splash-hero{font-size:60px}

  .splash-sub{font-size:15px;margin-top:22px}
}
/* Desktop ≥ 900px — split layout. Brand + hero on the left, portrait + CTAs
   stacked on the right. The portrait fills most of the right column with
   editorial framing; buttons anchor below so nothing gets clipped on short
   widescreens (1080p / 21:9). */
@media (min-width:900px){

  

  /* Stack of all 9 preset portraits — one fades in at a time on a 22.5s loop,
     producing a "your companion can be anyone" vibe instead of a 3×3 chooser
     grid. Each frame: 0.5s fade in → 2s hold (with Ken Burns zoom) → 0.5s fade
     out → invisible until the cycle wraps. Frames are spaced 2.5s apart so
     the fade-in of N+1 overlaps with the fade-out of N (true crossfade). */

  

  

  

  /* Subtle bottom-fade so the caption + page bottom blend into the splash bg */
  
  /* Soft rose glow accent at the top-left of the portrait — ties to the ring's
     pearl + the wordmark's rose. Keeps it from feeling like a stock photo. */
  
  /* "9 of ∞" pill — frames the portrait as one of countless possibilities,
     reinforcing the create-your-own message without screaming it. */

  
  .splash-cta{
    align-self:stretch;
    max-width:none;
    width:100%;
    flex:none;
  }
  /* Slightly tighter cap so 3 hero lines fit even on 1080p widescreens */
  .splash-hero{font-size:clamp(72px,8.6vw,120px)}
}

/* ============================================================
   Home
   ============================================================ */

.home-inner{display:flex;flex-direction:column;gap:24px}
.greeting{display:flex;justify-content:space-between;align-items:center;gap:16px}
.greeting .hi{font-family:'Fraunces',serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em}
.greeting .hi i{font-style:italic;color:var(--rose)}
.greeting .sub{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

/* Editorial home hero — split layout on desktop, overlay-on-photo on mobile.
   Desktop: portrait fills the left half, the whisper sits in a cream panel on
   the right where the type can breathe and the face stays clearly visible. */
.home-hero{position:relative;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(40,46,20,.18);cursor:pointer;transition:transform .35s ease,box-shadow .35s ease;display:grid;grid-template-columns:1fr;min-height:280px}
.home-hero:hover{transform:translateY(-2px);box-shadow:0 30px 70px rgba(40,46,20,.24)}
.home-hero .portrait-bg{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(160deg,#5b6840,#3e4a2f);overflow:hidden}
.home-hero .portrait-bg img,.home-hero .portrait-bg svg{width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%}
.home-hero .ov{display:none}
.home-hero .txt{position:relative;padding:28px 28px 26px;background:linear-gradient(180deg,#f7f1de 0%,#efe6c9 100%);color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:10px}
.home-hero .txt::before{content:"";position:absolute;left:28px;top:28px;width:30px;height:1px;background:var(--olive);opacity:.55}
.home-hero .txt .k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive);font-weight:600;display:inline-flex;align-items:center;gap:7px;padding-top:14px}
.home-hero .txt h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.005em;color:var(--ink);font-style:italic}
.home-hero .txt h2 i{font-style:italic;color:var(--rose);font-weight:500}
.home-hero .txt p{font-size:12px;color:var(--ink-mute);letter-spacing:.06em;margin-top:4px}
.home-hero .action{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.94);color:var(--ink);padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(8px);z-index:3;transition:all .2s ease;box-shadow:0 4px 12px rgba(40,46,20,.18)}
.home-hero:hover .action{background:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)}

@media (min-width:768px){
  .home-hero{grid-template-columns:minmax(280px,46%) 1fr;min-height:360px}
  .home-hero .portrait-bg{aspect-ratio:auto;height:100%}
  .home-hero .portrait-bg img,.home-hero .portrait-bg svg{object-position:center 25%}
  .home-hero .txt{padding:36px 36px 32px;gap:14px}
  .home-hero .txt h2{font-size:clamp(22px,1.7vw,28px);line-height:1.4}
  /* Soft seam between photo and text panel */
  .home-hero .portrait-bg::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:48px;background:linear-gradient(90deg,transparent,rgba(247,241,222,.55));pointer-events:none}
}
@media (min-width:1100px){
  .home-hero{min-height:420px}
  .home-hero .txt h2{font-size:clamp(24px,1.8vw,30px)}
}

.home-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.home-grid{grid-template-columns:1fr 1fr;gap:24px}}

.home-section{display:flex;flex-direction:column}
.row-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.row-hdr h3{font-family:'Fraunces',serif;font-weight:500;font-size:22px;letter-spacing:-.01em}
.row-hdr a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;text-decoration:none}

.mood-card{background:#fff;border-radius:22px;padding:18px;border:1px solid var(--line);position:relative;overflow:hidden}
.mood-card::before{content:"";position:absolute;left:18px;right:18px;bottom:34px;height:1px;background:var(--line);opacity:.7;pointer-events:none}
.mood-card .mh{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.mood-card .mh span{font-size:12px;color:var(--ink-mute);letter-spacing:.12em;text-transform:uppercase}
.mood-card .mh b{font-family:'Fraunces',serif;font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--olive-deep)}
.mood-chart{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:16px;position:relative;z-index:1}
.mood-chart .bar{flex:1;background:linear-gradient(180deg,var(--moss),var(--olive-deep));border-radius:8px 8px 4px 4px;transition:height .5s cubic-bezier(.4,1.4,.6,1);min-height:6px;position:relative;box-shadow:0 2px 4px rgba(40,46,20,.08)}
.mood-chart .bar.empty{background:transparent;border:1px dashed var(--line);box-shadow:none;min-height:8px}
.mood-chart .bar.today{background:linear-gradient(180deg,var(--blush-strong),var(--rose));box-shadow:0 4px 10px rgba(166,114,75,.22)}
.mood-chart-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--ink-mute);letter-spacing:.16em;font-weight:600}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick{background:#fff;border-radius:22px;padding:18px;cursor:pointer;border:1px solid var(--line);transition:all .25s ease;position:relative;overflow:hidden}
.quick::after{content:"";position:absolute;inset:0;border-radius:22px;border:1.5px solid transparent;transition:border-color .2s ease;pointer-events:none}
.quick:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(40,46,20,.10)}
.quick:hover::after{border-color:var(--olive-tint)}
.quick .ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--olive-tint);margin-bottom:12px;color:var(--olive-deep)}
.quick .ico .i{width:22px;height:22px}
.quick h4{font-size:14.5px;font-weight:600;letter-spacing:.01em}
.quick p{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.quick.b1 .ico{background:linear-gradient(140deg,#cfd5b1,#b8c293)}
.quick.b2 .ico{background:linear-gradient(140deg,#d4ddc4,#bccaa0)}
.quick.b3 .ico{background:linear-gradient(140deg,#e6d4b8,#d4b78a);color:var(--cocoa)}
.quick.b4 .ico{background:linear-gradient(140deg,#d8d2bd,#c2b894)}

/* ============================================================
   Avatar grid + summary card
   ============================================================ */

.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media (min-width:600px){.avatar-grid{grid-template-columns:repeat(3,1fr)}}
.avatar{aspect-ratio:1/1.2;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;transition:transform .25s cubic-bezier(.4,1.4,.6,1),box-shadow .25s ease,border-color .2s ease;background:var(--olive-tint)}
.avatar:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(40,46,20,.22)}
.avatar.active{border-color:var(--olive);transform:translateY(-2px) scale(.99);box-shadow:0 0 0 4px rgba(62,74,47,.18),0 16px 36px rgba(40,46,20,.28)}
.avatar img,.avatar svg{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease}
.avatar:hover img,.avatar:hover svg{transform:scale(1.04)}
.avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34));opacity:0;transition:opacity .2s ease;pointer-events:none}
.avatar.active::after{opacity:1}
.avatar .name{position:absolute;left:10px;bottom:8px;font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:#fff;font-weight:500;letter-spacing:.01em;opacity:0;transition:opacity .2s ease}
.avatar.active .name{opacity:1}
.avatar .gen-badge{position:absolute;top:8px;right:8px;background:#fff;color:var(--rose);font-size:10px;font-weight:700;padding:4px 9px 4px 7px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;box-shadow:var(--shadow-sm)}
.avatar .gen-badge::before{content:"✦";font-size:11px;color:var(--rose)}

/* AI portrait tile — Gemini outputs 1024×1024 squares so the tile is square
   too; cropping to 1.5:1 (the old preset-tile shape) chopped off the upper
   chest and made it look like a tight headshot. Spans all 3 grid columns and
   uses a soft shadow + olive border to feel like the hero of the page. */
.avatar.your-one-tile{
  grid-column:1/-1;
  aspect-ratio:1/1;
  border-radius:22px;
  border-color:var(--olive);
  box-shadow:0 0 0 4px rgba(62,74,47,.18),0 24px 48px rgba(40,46,20,.28);
}
.avatar.your-one-tile img{object-fit:cover;object-position:center top}
.avatar.your-one-tile .gen-badge{
  top:14px;right:14px;font-size:11px;padding:5px 12px 5px 9px;
}

/* Preset-toggle link — the escape hatch when the user wants a stock photo
   after generating an AI one. Sits below the refine panel. */

/* The UA [hidden]{display:none} is at specificity 0,1,0 — same as a class —
   so site rules like .btn{display:inline-flex} win and the attribute stops
   working. Force it back with !important to keep hidden semantic. */
[hidden]{display:none!important}

/* Refine panel — appears under the 'your one' tile after generation. Lets
   the user type a tweak ('shorter hair, soft smile') and re-render with the
   prior portrait as conditioning so the face stays consistent. */

.refine-input{
  width:100%;
  font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.55;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(166,140,90,.28);
  border-radius:12px;
  padding:11px 14px;
  resize:vertical;min-height:74px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.refine-input:focus{
  outline:none;
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(201,122,122,.15);
}
.refine-input::placeholder{color:var(--ink-mute)}
.refine-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;
}
.refine-chips .chip{
  font-size:12px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(166,140,90,.28);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.refine-chips .chip:hover{
  background:#fff;color:var(--ink);border-color:var(--rose);
}
.refine-actions{
  display:flex;gap:10px;justify-content:flex-end;
}
.refine-actions .btn{flex:0 0 auto;padding:11px 22px;min-width:0;width:auto}
@media (max-width:480px){
  .refine-actions{flex-direction:column-reverse}
  .refine-actions .btn{width:100%}
}

.tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--bg-deep);color:var(--ink-soft)}

/* ============================================================
   Review — cinematic portrait-led "introducing them"
   ============================================================ */

.rev-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#f5eed8;backdrop-filter:blur(6px);border:1px solid rgba(245,238,216,.22)}

/* ============================================================
   Chat — fluid container with sticky header + footer
   ============================================================ */

#view-chat{padding:0}

.chat-head{padding:14px 22px;display:flex;align-items:center;gap:12px;background:rgba(241,234,215,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.chat-head .back{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.chat-head .back:hover{color:var(--ink);border-color:var(--ink-soft)}
.chat-head .back .i{width:18px;height:18px}
.chat-head .face{width:44px;height:44px;border-radius:999px;overflow:hidden;background:var(--olive-tint);box-shadow:var(--shadow-sm)}
.chat-head .face img,.chat-head .face svg{width:100%;height:100%;object-fit:cover}
.chat-head .name{flex:1;min-width:0}
.chat-head .name b{font-family:'Fraunces',serif;font-weight:500;font-size:20px;letter-spacing:-.01em;display:block;line-height:1}
.chat-head .name i{font-style:italic;color:var(--rose);font-weight:500}
.chat-head .name span{font-size:10.5px;color:var(--ink-mute);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:5px;align-items:center;margin-top:4px}
.chat-head .name span .dot{width:6px;height:6px;border-radius:999px;background:#55a66a;box-shadow:0 0 0 3px rgba(85,166,106,.18)}
.chat-head .acts{display:flex;gap:6px}
.chat-head .acts button{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.chat-head .acts button:hover{color:var(--ink);border-color:var(--ink-soft);box-shadow:var(--shadow-sm)}

.chat-head .acts button .i{width:18px;height:18px}

.chat-body{flex:1;overflow-y:auto;padding:18px 22px 16px;display:flex;flex-direction:column;gap:10px}
.chat-body.empty{justify-content:center;align-items:center}
.chat-empty-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:560px;width:100%;padding:0 6px;animation:emptyIn .4s ease}
@keyframes emptyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-empty-wrap .msg{align-self:auto;max-width:100%;text-align:left}
.chat-starters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.chat-starter{font:500 13px 'Inter',sans-serif;background:#fff;border:1px solid var(--line);color:var(--ink-soft);padding:9px 14px;border-radius:999px;cursor:pointer;transition:all .18s ease;letter-spacing:.01em}
.chat-starter:hover{background:var(--olive-tint);color:var(--olive-deep);border-color:var(--olive-tint);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.chat-body::-webkit-scrollbar{width:0}
.day-divider{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:6px 0 8px;font-weight:600}
.day-divider::before,.day-divider::after{content:"";flex:1;height:1px;background:var(--line);opacity:.65}
.msg{max-width:min(78%,580px);padding:14px 17px;border-radius:18px;font-size:14.5px;line-height:1.55;box-shadow:var(--shadow-sm);white-space:pre-wrap;word-wrap:break-word;letter-spacing:.005em}
.msg.me{align-self:flex-end;background:linear-gradient(160deg,var(--olive-light),var(--olive));color:var(--ink-on-olive);border-bottom-right-radius:6px;box-shadow:0 4px 14px rgba(40,46,20,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.msg.her{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;border:1px solid var(--line)}
.msg.her.rich{background:linear-gradient(160deg,#fff,#efe9d3);border:1px solid #d6cdb1}
.msg .quote{font-family:'Fraunces',serif;font-style:italic;font-size:15.5px;color:var(--rose);display:block;margin-top:8px;line-height:1.5}
/* Group of consecutive same-sender bubbles (multi-bubble assistant replies).
   Tighter gap than the 10px between separate exchanges + tighter corner
   radii on the inner edges so the bubbles read as a continuing thread. */
.chat-bubble-group{display:flex;flex-direction:column;align-items:flex-start;gap:5px;align-self:flex-start;max-width:100%}
.chat-bubble-group .msg.her{border-bottom-left-radius:18px}
.chat-bubble-group .msg.her:last-of-type{border-bottom-left-radius:6px}
.chat-bubble-group .msg.her:only-of-type{border-bottom-left-radius:6px}
.msg-feedback{display:flex;gap:6px;margin-top:6px;align-self:flex-start}
.msg-feedback button{width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;transition:all .18s ease;padding:0}
.msg-feedback button .i{width:14px;height:14px}
.msg-feedback button:hover{color:var(--ink-soft);border-color:var(--ink-soft);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.msg-feedback button[data-feedback="like"].on{background:var(--lip);border-color:var(--lip);color:#fff;box-shadow:0 4px 12px rgba(162,58,42,.30)}
.msg-feedback button[data-feedback="dislike"].on{background:var(--bg-deep);border-color:var(--blush-strong);color:var(--ink-soft)}
.typing{display:flex;gap:4px;align-self:flex-start;padding:13px 18px;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.typing span{width:7px;height:7px;border-radius:999px;background:var(--ink-mute);animation:bob 1.1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.typing.inline{display:inline-flex;background:transparent;border:0;box-shadow:none;padding:2px 0;align-self:auto}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* === Markdown body inside chat bubbles === */
.msg .md-body{white-space:normal}
.md-body > *:first-child{margin-top:0}
.md-body > *:last-child{margin-bottom:0}
.md-body p{margin:0 0 .55em;line-height:1.55}
.md-body strong{color:var(--olive-deep);font-weight:600}
.md-body em{font-family:'Fraunces',serif;font-style:italic;color:var(--rose)}
.md-body a{color:var(--lip);text-decoration:none;border-bottom:1px dashed rgba(162,58,42,.45);padding-bottom:1px;transition:color .15s ease,border-color .15s ease,background .15s ease;word-break:break-word}
.md-body a:hover{color:var(--lip);border-bottom-color:var(--lip);background:rgba(162,58,42,.06)}
.md-body ul,.md-body ol{margin:.4em 0 .6em;padding-left:1.4em}
.md-body ul{list-style:none;padding-left:1.1em}
.md-body ul li{position:relative;padding-left:.4em;margin:.18em 0;line-height:1.55}
.md-body ul li::before{content:"";position:absolute;left:-.85em;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--rose);opacity:.78}
.md-body ol li{margin:.18em 0;line-height:1.55}
.md-body ol li::marker{color:var(--olive-deep);font-weight:600;font-family:'Fraunces',serif}
.md-body ul ul,.md-body ol ol,.md-body ul ol,.md-body ol ul{margin:.2em 0;padding-left:1.1em}
.md-body h3,.md-body h4,.md-body h5,.md-body h6{font-family:'Fraunces',serif;font-weight:600;color:var(--ink);margin:.6em 0 .3em;line-height:1.25;letter-spacing:-.005em}
.md-body h3{font-size:17px}
.md-body h4{font-size:15.5px}
.md-body h5,.md-body h6{font-size:14.5px;font-style:italic;color:var(--ink-soft)}
.md-body blockquote{margin:.45em 0;padding:8px 14px;border-left:3px solid var(--rose);background:rgba(200,205,179,.35);border-radius:0 10px 10px 0;color:var(--ink-soft);font-family:'Fraunces',serif;font-style:italic;font-size:14.5px;line-height:1.5}
.md-body blockquote p{margin:0}
.md-body code{font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace;font-size:.92em;background:var(--bg-deep);padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--olive-deep)}
.md-body pre{margin:.5em 0;padding:11px 14px;background:var(--bg-deep);border:1px solid var(--line);border-radius:12px;overflow-x:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.md-body pre code{background:transparent;border:0;padding:0;color:var(--ink-soft);font-size:.9em;line-height:1.55;white-space:pre}
.md-body hr{border:0;border-top:1px solid var(--line);margin:.8em 0}
/* Tables — GitHub-flavoured. Wrap scrolls horizontally on narrow screens so
   a wide comparison doesn't overflow the bubble. */
.md-table-wrap{margin:.55em -4px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;line-height:1.45;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.md-table thead th{background:linear-gradient(180deg,#fdf7e8,#f5ecd2);color:var(--olive-deep);font-family:'Fraunces',serif;font-weight:600;text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);letter-spacing:.005em}
.md-table tbody td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tbody tr:last-child td{border-bottom:0}
.md-table tbody tr:nth-child(even) td{background:rgba(200,205,179,.18)}
.md-table tbody td strong{color:var(--olive-deep)}
.md-table tbody td em{color:var(--rose)}

/* Narration bubbles — when an entire assistant bubble is wrapped in italic,
   it's roleplay scene description (e.g. "*she walks over and sits beside you*").
   Style the whole bubble like a soft novel-page aside so dialogue and scene
   read visually apart. Class is applied by Views.markNarrationBubbles(). */
.msg.her.narration{background:linear-gradient(160deg,#fbf3df,#f4ead0);border:1px solid #d6cdb1;box-shadow:0 4px 14px rgba(166,114,75,.10)}
.msg.her.narration .md-body{font-family:'Fraunces',serif;font-style:italic;color:var(--rose);font-size:14.8px;line-height:1.55}
.msg.her.narration .md-body p{margin:0}
.msg.her.narration .md-body em{font-style:normal;color:var(--olive-deep)}  /* nested emphasis inside narration flips back so it still pops */

/* User bubble — emphasis on the olive ground reads better in light tones. */
.msg.me .md-body strong{color:#fff}
.msg.me .md-body em{color:#f3e7d6}
.msg.me .md-body a{color:#f3e7d6;border-bottom-color:rgba(243,231,214,.55)}
.msg.me .md-body a:hover{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}
.msg.me .md-body ul li::before{background:#f3e7d6}
.msg.me .md-body ol li::marker{color:#f3e7d6}
.msg.me .md-body code,.msg.me .md-body pre{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.12);color:#f3e7d6}
.msg.me .md-body pre code{color:#f3e7d6}
.msg.me .md-body blockquote{border-left-color:#f3e7d6;background:rgba(255,255,255,.08);color:#f3e7d6}

/* Streaming bubble — soft rose ring + blinking caret */
.msg.her.streaming{box-shadow:0 6px 18px rgba(162,58,42,.10),inset 0 0 0 1px rgba(162,58,42,.10);animation:streamGlow 2.2s ease-in-out infinite}
.stream-caret{display:inline-block;width:7px;height:15px;margin-left:3px;background:var(--rose);vertical-align:-2px;border-radius:1px;animation:caretBlink .85s steps(2,start) infinite;opacity:.85}
@keyframes caretBlink{50%{opacity:0}}
@keyframes streamGlow{0%,100%{box-shadow:0 6px 18px rgba(162,58,42,.10),inset 0 0 0 1px rgba(162,58,42,.10)}50%{box-shadow:0 8px 22px rgba(162,58,42,.16),inset 0 0 0 1px rgba(162,58,42,.18)}}
.chat-input{padding:14px 22px 16px;background:rgba(241,234,215,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0;position:sticky;bottom:0;z-index:5}
.chat-input .pill{flex:1;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;gap:8px;transition:border-color .2s ease,box-shadow .2s ease}
.chat-input .pill:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px rgba(62,74,47,.10)}
.chat-input .pill input{flex:1;border:0;outline:0;font:500 14.5px 'Inter',sans-serif;background:transparent;padding:11px 0}
.chat-input .send{width:44px;height:44px;border-radius:999px;background:var(--olive);color:var(--ink-on-olive);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;transition:background .15s ease,transform .15s ease}
.chat-input .send:hover{background:var(--olive-deep)}
.chat-input .send:active{transform:scale(.94)}
.chat-input .send .i{width:20px;height:20px}
.chat-input .mic{width:44px;height:44px;border-radius:999px;background:var(--blush);color:var(--ink);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:all .15s ease}
.chat-input .mic:hover{background:var(--blush-strong);color:#fff}
.chat-input .mic .i{width:20px;height:20px}
.chat-input .mic.recording{background:var(--lip);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* On mobile, account for tabbar height under the chat input */
@media (max-width:1023px){
  .chat-input{padding-bottom:calc(16px + var(--tabbar-h))}
}

/* ============================================================
   Mood / Memory / Profile
   ============================================================ */

.mood-hero{border-radius:24px;background:linear-gradient(160deg,#5b6840,#3e4a2f);padding:24px;color:var(--ink-on-olive);position:relative;overflow:hidden;margin:8px 0 20px}
.mood-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent 70%);opacity:.4}
.mood-hero .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.mood-hero h2{font-family:'Fraunces',serif;font-weight:500;font-size:32px;line-height:1.02;letter-spacing:-.02em;margin-top:6px}
.mood-hero h2 i{font-style:italic}
.mood-emojis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0 6px}
.mood-emoji{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .25s cubic-bezier(.4,1.4,.6,1);color:var(--ink-soft);padding:8px 4px;position:relative;overflow:hidden}
.mood-emoji .face{width:36px;height:36px;display:block;position:relative;z-index:2;transition:transform .3s ease}
.mood-emoji span{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-mute);text-transform:uppercase;position:relative;z-index:2}
.mood-emoji::before{content:"";position:absolute;inset:0;border-radius:20px;background:radial-gradient(80% 80% at 50% 30%,var(--halo,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:1}
.mood-emoji:hover{border-color:var(--olive-tint);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.mood-emoji:hover::before{opacity:.7}
.mood-emoji[data-key="low"]{--halo:rgba(166,114,75,.20)}
.mood-emoji[data-key="meh"]{--halo:rgba(138,141,118,.22)}
.mood-emoji[data-key="okay"]{--halo:rgba(122,136,97,.24)}
.mood-emoji[data-key="good"]{--halo:rgba(91,104,64,.30)}
.mood-emoji[data-key="bright"]{--halo:rgba(212,183,138,.40)}
.mood-emoji.active{border-color:transparent;color:var(--ink-on-olive);transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,46,20,.24)}
.mood-emoji.active::before{opacity:1;background:linear-gradient(160deg,var(--olive-light),var(--olive-deep))}
.mood-emoji.active[data-key="bright"]::before{background:linear-gradient(160deg,#c8a47e,#8d5a3c)}
.mood-emoji.active .face{transform:scale(1.08)}
.mood-emoji.active span{color:rgba(245,238,216,.92)}

.mem-filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.mem-filters .chip{font-size:12.5px;padding:8px 12px}
.memory-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.memory-card{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;transition:all .25s ease;position:relative;overflow:hidden}
.memory-card:hover{border-color:var(--olive-tint);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
/* Faint icon watermark inside the card — visual texture, not chrome */
.memory-card .memory-watermark{position:absolute;right:-8px;bottom:-8px;width:88px;height:88px;color:var(--olive-deep);opacity:.05;pointer-events:none}
.memory-card > *{position:relative;z-index:1}
.memory-card .ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--olive-tint);color:var(--olive-deep)}
.memory-card .ic .i{width:20px;height:20px}
.memory-card .ic.c2{background:#d4ddc4;color:var(--olive-deep)}.memory-card .ic.c3{background:#e6d4b8;color:var(--cocoa)}.memory-card .ic.c4{background:#d8d2bd;color:var(--olive-deep)}
.memory-card .c{flex:1;min-width:0}
.memory-card .c .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.memory-card .c .v{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.5}
.memory-card .c .d{font-size:11px;color:var(--ink-mute);margin-top:6px}
.memory-card .x{background:transparent;border:0;color:var(--ink-mute);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}
.memory-card .x:hover{background:#f6d5cf;color:var(--lip)}
.memory-card .x .i{width:14px;height:14px}
.memory-empty{text-align:center;padding:32px 8px;color:var(--ink-mute);display:flex;flex-direction:column;align-items:center;gap:14px}
.memory-empty-art{width:120px;height:80px;opacity:.85}
.memory-empty-text{font-size:13.5px;line-height:1.6;font-family:'Fraunces',serif;font-style:italic;color:var(--ink-soft);max-width:300px}

.profile-head{text-align:center;padding:18px 0 8px}
.profile-hero{position:relative;width:132px;height:132px;margin:0 auto 14px}
.profile-head .pic{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--olive-tint);box-shadow:0 14px 32px rgba(40,46,20,.20);border:4px solid #fff;position:relative;z-index:1}
.profile-head .pic img,.profile-head .pic svg{width:100%;height:100%;object-fit:cover;display:block}
.profile-head .pic .initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:54px;color:var(--olive-deep);background:linear-gradient(160deg,var(--blush),#d8c2a0)}
.profile-head .hero-cam{position:absolute;right:-2px;bottom:-2px;width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--olive);color:var(--ink-on-olive);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 14px rgba(40,46,20,.30);z-index:3;transition:transform .15s ease,background .2s ease}
.profile-head .hero-cam:hover{background:var(--olive-deep);transform:scale(1.05)}
.profile-head .hero-cam:active{transform:scale(.95)}
.profile-head .hero-cam .i{width:16px;height:16px}
.profile-head .hero-comp-chip{position:absolute;left:-6px;top:6px;width:42px;height:42px;border-radius:50%;border:3px solid #fff;overflow:hidden;background:var(--olive-tint);box-shadow:0 4px 10px rgba(40,46,20,.18);z-index:2}
.profile-head .hero-comp-chip .pic{width:100%;height:100%;border:0;box-shadow:none}
.profile-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:28px;margin-top:6px;letter-spacing:-.01em}
.profile-head h2 i{font-style:italic;color:var(--rose)}
.profile-head p{font-size:12px;color:var(--ink-mute);letter-spacing:.08em;margin-top:4px}
.edit-info-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);font:500 12.5px 'Inter',sans-serif;cursor:pointer;transition:all .18s ease}
.edit-info-btn:hover{border-color:var(--olive);color:var(--olive);box-shadow:var(--shadow-sm)}
.edit-info-btn .i{width:13px;height:13px}
.profile-hero.uploading .pic{opacity:.6}
.profile-hero.uploading::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:hero-spin .9s linear infinite;pointer-events:none}
@keyframes hero-spin{to{transform:rotate(360deg)}}

/* edit-info modal */
.edit-modal{position:fixed;inset:0;background:rgba(28,32,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1100;opacity:0;pointer-events:none;transition:opacity .18s ease;backdrop-filter:blur(2px)}
.edit-modal.show{opacity:1;pointer-events:auto}
.edit-modal.hidden{display:none}
.edit-modal-card{background:var(--bg);border-radius:24px;padding:22px 22px 18px;width:min(420px,100%);max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(20,24,12,.42);transform:translateY(8px);transition:transform .2s ease}
.edit-modal.show .edit-modal-card{transform:translateY(0)}
.edit-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.edit-modal-head h3{font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.edit-modal-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.edit-modal-close:hover{color:var(--ink);border-color:var(--ink-soft)}
.edit-modal-close .i{width:14px;height:14px}
.edit-modal-body{display:flex;flex-direction:column;gap:14px}
.edit-field{display:flex;flex-direction:column;gap:6px}
.edit-field>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.edit-field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:500 15px 'Inter',sans-serif;color:var(--ink);outline:none;transition:border .2s ease,box-shadow .2s ease}
.edit-field input:focus{border-color:var(--olive);box-shadow:0 0 0 3px rgba(62,74,47,.10)}
.edit-field .row{display:flex;flex-wrap:wrap;gap:8px}
.edit-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.edit-modal-foot .btn{height:44px;padding:0 18px;font-size:14px}
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:20px 0 4px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:center;transition:all .2s ease}
.stat:hover{border-color:var(--olive-tint);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.stat b{font-family:'Fraunces',serif;font-weight:500;font-size:28px;letter-spacing:-.02em;display:block;color:var(--rose);line-height:1}
.stat span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px;display:block;font-weight:600}
/* Section kickers in profile pages get a small icon prefix */
.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-top:18px}
.section-kicker .i{width:13px;height:13px;color:var(--rose);opacity:.85}

/* ----- Current-plan banner on the profile screen -----
   Visual changes per tier so the user can tell Free vs paid at a glance. */
.tier-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.tier-banner.is-paid{background:linear-gradient(135deg,#fff 0%,#fbf3ec 100%);border-color:var(--blush-strong)}
.tier-banner.is-canceled{background:#f7eee7;border-color:var(--line)}
.tier-banner.is-past-due{background:#fbe7df;border-color:#e8b3a0}
.tier-banner-left{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.tier-banner-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tier-banner-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.tier-banner-pill{display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--rose);color:#fff}
.tier-banner.is-canceled .tier-banner-pill{background:var(--ink-mute)}
.tier-banner.is-past-due .tier-banner-pill{background:var(--lip)}
.tier-banner-name{font-family:'Fraunces',serif;font-style:italic;font-size:24px;color:var(--ink);line-height:1.1}
.tier-banner-renew{font-size:12.5px;color:var(--ink-soft)}
.tier-banner-cta{padding:10px 18px;border-radius:14px;background:var(--ink);color:#fff;border:0;font-size:13.5px;font-weight:600;cursor:pointer;flex-shrink:0;transition:transform .15s ease,background .15s ease}
.tier-banner-cta:hover{background:var(--cocoa);transform:translateY(-1px)}
.tier-banner.is-paid .tier-banner-cta{background:var(--rose)}
.tier-banner.is-paid .tier-banner-cta:hover{background:var(--cocoa)}

/* ----- Post-payment success modal — full-screen overlay with centered card. ----- */
.pay-success{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,46,20,.45);backdrop-filter:blur(6px);animation:pay-fade .22s ease both}
.pay-success-card{max-width:420px;width:100%;background:#fff;border-radius:24px;padding:36px 28px 26px;text-align:center;box-shadow:0 30px 60px rgba(40,46,20,.25);animation:pay-pop .35s cubic-bezier(.18,1.2,.4,1) both}
.pay-success-tick{width:64px;height:64px;border-radius:50%;background:#dde9c5;color:#3e4a2f;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:pay-tick .5s cubic-bezier(.18,1.4,.4,1) .12s both}
.pay-success-tick svg{width:34px;height:34px}
.pay-success-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);font-weight:600;margin-bottom:8px}
.pay-success-title{font-family:'Fraunces',serif;font-size:30px;font-weight:500;color:var(--ink);margin:0 0 6px;line-height:1.15}
.pay-success-title i{color:var(--rose);font-style:italic;font-weight:500}
.pay-success-sub{font-size:14px;color:var(--ink-soft);margin:0 0 22px;line-height:1.5;min-height:21px}
.pay-success-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pay-success-row .btn{flex:1;min-width:140px}
@keyframes pay-fade{from{opacity:0}to{opacity:1}}
@keyframes pay-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pay-tick{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.menu{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:8px}
.menu-item{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500;transition:background .15s ease}
.menu-item:hover{background:rgba(62,74,47,.04)}
.menu-item:last-child{border-bottom:0}
.menu-item .ic{width:36px;height:36px;border-radius:11px;background:var(--bg-deep);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item .ic .i{width:18px;height:18px}
.menu-item .ic.ic-alert{background:#f5e3d6;color:var(--lip)}
.menu-item .ic.ic-danger{background:#f6d5cf;color:var(--lip)}
.menu-item .arr{margin-left:auto;color:var(--ink-mute);font-size:13px}
svg.arr.i{width:16px;height:16px;margin-left:auto;color:var(--ink-mute);flex-shrink:0}
.menu-item .toggle{margin-left:auto;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:all .2s ease;flex-shrink:0;cursor:pointer}
.menu-item .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.menu-item .toggle.on{background:var(--olive)}
.menu-item .toggle.on::after{left:20px}
.menu-item.danger-text{color:var(--lip)}
.menu-item.danger-text .ic{color:var(--lip)}

/* ============================================================
   Mobile tabbar + toast
   ============================================================ */

.tabbar{position:fixed;bottom:0;left:0;right:0;height:var(--tabbar-h);background:rgba(241,234,215,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;padding:4px 10px max(18px,env(safe-area-inset-bottom));z-index:30}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:0;cursor:pointer;color:var(--ink-mute);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.tabbar .tab.active{color:var(--ink)}
.tabbar .tab svg{width:22px;height:22px}
.tabbar .tab.fab{background:var(--olive);color:var(--ink-on-olive);width:54px;height:54px;border-radius:999px;margin-top:-18px;font-size:0;flex:0 0 auto}
.tabbar .tab.fab svg{width:22px;height:22px}

.toast{position:fixed;bottom:max(96px,calc(var(--tabbar-h) + 24px));left:50%;transform:translate(-50%,40px);background:var(--olive);color:var(--ink-on-olive);padding:12px 20px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;opacity:0;pointer-events:none;transition:all .3s ease;z-index:1000;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.error{background:var(--lip)}
@media (min-width:1024px){.toast{bottom:36px}}

.hidden{display:none!important}

/* Busy overlay */
.busy-shade{position:fixed;inset:0;background:rgba(244,236,227,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:1500;backdrop-filter:blur(6px)}
.busy-shade .spinner{width:54px;height:54px;border:3px solid rgba(168,99,76,.18);border-top-color:var(--lip);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-shade .label{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--ink);text-align:center;max-width:380px;line-height:1.3;letter-spacing:-.01em}

/* ============================================================
   Voice mode overlay (Realtime) — full-screen
   ============================================================ */

.voice-overlay{position:fixed;inset:0;z-index:2000;background:radial-gradient(900px 700px at 50% 20%,#5b6840 0%,#3e4a2f 50%,#2a3320 100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(48px,env(safe-area-inset-top)) 28px max(36px,env(safe-area-inset-bottom));opacity:0;pointer-events:none;transition:opacity .35s ease;color:var(--ink-on-olive)}
.voice-overlay.show{opacity:1;pointer-events:auto}
.voice-overlay.hidden{display:none}
.voice-top{text-align:center}
.voice-name{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:36px;color:#e6d4b8;letter-spacing:-.01em}
.voice-status{margin-top:12px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,238,216,.78);display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(245,238,216,.18);backdrop-filter:blur(8px)}
.voice-status::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(245,238,216,.42);transition:background .25s ease,box-shadow .25s ease}
.voice-overlay.listening .voice-status::before{background:#7bc28e;box-shadow:0 0 0 3px rgba(123,194,142,.25)}
.voice-overlay.speaking .voice-status::before{background:#f0c97a;box-shadow:0 0 0 3px rgba(240,201,122,.30)}
.voice-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.voice-orb-wrap{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.voice-orb{width:240px;height:240px;border-radius:50%;background-image:url('/static/images/logo.png');background-size:cover;background-position:center;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;transition:transform .3s ease;border:3px solid rgba(245,238,216,.18)}
.voice-orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.voice-overlay.speaking .voice-orb{transform:scale(1.05)}
.voice-rings{position:absolute;inset:0}
.voice-rings .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(230,212,184,.45);opacity:0;transform:scale(.8)}
.voice-overlay.speaking .voice-rings .ring{animation:voice-pulse 1.8s ease-out infinite}
.voice-rings .r2{animation-delay:.3s !important}
.voice-rings .r3{animation-delay:.6s !important}
.voice-overlay.listening .voice-rings .ring{animation:voice-listen 2.4s ease-in-out infinite}
@keyframes voice-pulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes voice-listen{0%,100%{transform:scale(.95);opacity:.3}50%{transform:scale(1.1);opacity:.55}}
.voice-caption{min-height:56px;max-height:140px;overflow:hidden;text-align:center;font-size:15px;line-height:1.55;color:rgba(245,238,216,.82);max-width:560px;padding:0 12px;transition:opacity .25s ease,transform .35s ease;letter-spacing:.005em}
.voice-caption b{color:#fff;font-weight:600}
.voice-caption.crossfade{opacity:.0;transform:translateY(4px)}
.voice-controls{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:14px}
.voice-btn{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--olive-deep);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .2s ease,color .2s ease}
.voice-btn .i{width:24px;height:24px}
.voice-btn:active{transform:scale(.96)}
.voice-btn.muted{background:var(--olive-deep);color:var(--ink-on-olive)}
.voice-end{background:var(--lip);color:#fff;width:74px;height:74px}
.voice-end .i{width:24px;height:24px}
.voice-end:hover{background:#9b2818}
.voice-overlay audio{display:none}

@media (max-width:600px){
  .voice-orb-wrap{width:220px;height:220px}
  .voice-orb{width:188px;height:188px}
}

/* ============================================================
   Mobile-first refinements
   ============================================================ */

@media (max-width:768px){
  .page,.page-wide{padding:24px 20px 32px}
  .card{padding:24px 22px;border-radius:20px}
  
  .q-title{font-size:30px}
  .greeting .hi{font-size:30px}
  .grid-2{grid-template-columns:1fr}
}

/* === Tier banner duplicate block removed — see the canonical rules
   ~140 lines above (.tier-banner / .tier-banner-cta etc). The duplicate
   here was overriding the white CTA text with --olive-deep, leaving a
   dark-on-dark "See plans" button that was unreadable. === */

/* Upgrade view */
.upgrade-page .upgrade-card{padding:28px 28px 36px}
.upgrade-hero{text-align:center;margin:6px 0 22px}
.upgrade-hero .q-kicker{margin-bottom:8px}
.upgrade-title{font-family:'Fraunces',serif;font-size:34px;line-height:1.08;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:0 0 10px}
.upgrade-title i{color:var(--rose);font-style:italic;font-weight:500}
.upgrade-sub{font-size:14px;color:var(--ink-soft);max-width:520px;margin:0 auto;line-height:1.55}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;transition:transform .15s ease,box-shadow .2s ease,border-color .15s ease}
.plan-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(40,46,20,.12);border-color:var(--blush-strong)}
.plan-card.is-featured{border-color:var(--olive);box-shadow:0 12px 32px rgba(40,46,20,.18);background:linear-gradient(165deg,#fff,#fbf5e7)}
.plan-card.is-current{border-color:var(--rose);background:linear-gradient(165deg,#fff,var(--blush))}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--olive);color:var(--ink-on-olive);padding:4px 12px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;box-shadow:var(--shadow-sm)}
.plan-head{display:flex;flex-direction:column;gap:4px}
.plan-kicker{font:600 10.5px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute)}
.plan-name{margin:0;font-family:'Fraunces',serif;font-size:18px;font-weight:500;line-height:1.25;color:var(--ink-soft)}
.plan-name i{font-style:italic;color:var(--ink)}
.plan-price{margin-top:6px;display:flex;align-items:baseline;gap:6px}
.plan-price .amt{font-family:'Fraunces',serif;font-size:32px;font-weight:600;color:var(--olive-deep);letter-spacing:-.02em;line-height:1}
.plan-price .int{font-size:13px;color:var(--ink-mute)}
.plan-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.5}
.plan-tick{width:14px;height:14px;flex:0 0 14px;color:var(--rose);margin-top:3px}
.plan-action{margin-top:auto}
.plan-cta{width:100%;border:0;border-radius:12px;padding:12px 14px;cursor:pointer;font:600 14px 'Inter',sans-serif;background:var(--olive);color:var(--ink-on-olive);box-shadow:0 6px 16px rgba(40,46,20,.18);transition:background .2s ease,transform .12s ease}
.plan-cta:hover:not([disabled]){background:var(--olive-deep);transform:translateY(-1px)}
.plan-cta[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.plan-cta.is-current{background:var(--rose);color:#fff}
.plan-cta.is-secondary{background:#fff;color:var(--ink-soft);border:1px solid var(--line)}

.plan-loading,.plan-empty{padding:24px;text-align:center;color:var(--ink-mute);font-size:14px}

.upgrade-foot{margin-top:18px;text-align:center}
.upgrade-foot .small{font-size:12px;color:var(--ink-mute)}

@media (max-width:600px){
  .upgrade-title{font-size:28px}
  .plan-grid{grid-template-columns:1fr}
}

/* === Current-plan panel (shown on /upgrade for paid users) === */
.current-plan-panel{position:relative;background:linear-gradient(165deg,#fff,#f7eedf);border:1px solid var(--blush-strong);border-radius:20px;padding:22px 22px 18px;margin-bottom:22px;box-shadow:0 8px 24px rgba(40,46,20,.08)}

.current-plan-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.current-plan-left .q-kicker{margin-bottom:4px}
.current-plan-name{margin:0;font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--olive-deep);letter-spacing:-.015em;line-height:1.1}
.current-plan-tagline{margin:4px 0 0;font-style:italic;color:var(--ink-soft);font-family:'Fraunces',serif;font-size:14.5px}
.current-plan-right{text-align:right;flex-shrink:0}
.current-plan-price{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--rose);line-height:1}
.current-plan-price span{font-size:13px;color:var(--ink-mute);font-weight:500;font-family:'Inter',sans-serif;margin-left:2px}
.current-plan-renew{margin:4px 0 0;font-size:12px;color:var(--ink-mute)}
.current-plan-features{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 14px}
.current-plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.5}
.current-plan-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.current-plan-actions .btn{padding:9px 16px;font-size:13px;border-radius:10px}

.upgrade-compare-head{font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--ink-soft);margin:6px 0 12px;font-weight:500}

@media (max-width:600px){
  .current-plan-row{flex-direction:column;align-items:flex-start}
  .current-plan-right{text-align:left}
  .current-plan-features{grid-template-columns:1fr}
}

/* ============================================================
   Onboarding (chat-style guest flow with James / Jane).
   Two views: #view-pick-companion (the chooser) and
   #view-onboarding (the chat-style step-by-step interview).
============================================================ */

/* ---- Pick companion (James / Jane) ----
   Theme matches the splash: olive gradient + leafy bg overlay + cream
   text. The portrait cards stay white so they feel like they're floating
   above the foliage, like postcards on a moss-covered table.

   Layout note: .view is position:absolute / inset:0, so its ::before
   only covers the viewport — when content scrolled past viewport height,
   the bottom showed plain green with no foliage. We put the leaf
   overlay on the inner .onb-pick (which grows with content) and let
   .onb-pick min-height the full scroll area. justify-content:center then
   pulls the cards to vertical-middle on tall screens (no dead top zone). */
#view-pick-companion{
  background:linear-gradient(170deg,#3e4a2f 0%,#4f5536 55%,#5b6840 100%);
  color:var(--ink-on-olive);
  overflow-y:auto;
  overflow-x:hidden;
}
.onb-pick{
  position:relative;
  min-height:100%;
  max-width:920px;
  margin:0 auto;
  /* Vertical rhythm: clamps with vh so the whole stack — brand, title,
     two cards, foot — fits one fold on shorter laptops, but breathes
     properly on tall desktops. */
  padding:clamp(20px,3vh,40px) 24px clamp(20px,3vh,40px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3.2vh,32px);
}
.onb-pick::before{
  /* Full-viewport-width leaf overlay that follows content height — break
     out of .onb-pick's 920px max-width via 100vw + center transform. */
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  background-image:url('/static/images/splash-bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}
.onb-pick > *{position:relative;z-index:1}
.onb-pick-head{position:relative;text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,18px)}
.onb-pick-head .back{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,238,216,.32);background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;color:var(--ink-on-olive);cursor:pointer;backdrop-filter:blur(6px);transition:background .15s ease}
.onb-pick-head .back:hover{background:rgba(255,255,255,.18)}
.onb-exit{position:absolute;right:0;top:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,238,216,.32);background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;color:var(--ink-on-olive);cursor:pointer;backdrop-filter:blur(6px);transition:background .15s ease}
.onb-exit:hover{background:rgba(255,255,255,.18)}
/* Brand lockup — ring + wordmark + tagline, mirroring the splash.
   Sized in vh-aware clamps so it shrinks on shorter laptops.
   The bottom margin sets the lockup apart from the heading group. */
.onb-pick-brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);margin-bottom:clamp(4px,1.4vh,16px)}
.onb-pick-brand::before{
  content:"";position:absolute;left:-120px;right:-120px;top:-40px;bottom:-20px;
  background:radial-gradient(ellipse 58% 62% at 50% 50%,rgba(12,18,4,.65) 0%,rgba(12,18,4,.25) 45%,rgba(12,18,4,0) 82%);
  filter:blur(20px);z-index:-1;pointer-events:none;
}
.onb-pick-ring-wrap{position:relative;width:clamp(48px,6.5vh,72px);aspect-ratio:1}
.onb-pick-ring-wrap::before{
  content:"";position:absolute;left:50%;top:50%;width:130%;height:130%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,108,108,.30) 0%,rgba(196,108,108,0) 68%),radial-gradient(closest-side,rgba(120,140,80,.20) 0%,rgba(120,140,80,0) 72%);
  filter:blur(16px);pointer-events:none;animation:breathe-glow 7s ease-in-out infinite;z-index:0;
}
.onb-pick-ring{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.onb-pick-wordmark{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(20px,2.4vh,26px);letter-spacing:-.005em;margin:0;line-height:1.05}
.onb-pick-wordmark .rose{color:var(--rose)}
.onb-pick-wordmark .cream{color:var(--ink-on-olive)}
.onb-pick-tagline{margin:0;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(245,238,216,.7);font-weight:500}
.onb-pick-tagline .dot{margin:0 6px;color:var(--rose)}

.onb-pick-kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,238,216,.72);font-weight:600;margin-top:0}
.onb-pick-title{font-family:'Fraunces',serif;font-size:clamp(28px,5vh,46px);font-weight:500;color:#f4ecd6;letter-spacing:-.025em;line-height:1.05;margin:0;max-width:680px;text-shadow:0 4px 24px rgba(0,0,0,.22)}
.onb-pick-title i{color:var(--rose);font-style:italic;font-weight:500}
.onb-pick-sub{font-size:clamp(13px,1.7vh,15px);color:rgba(245,238,216,.78);max-width:520px;margin:0;line-height:1.5}

/* Authed-only chunks of the pick-companion view — guest visitors see only
   the two Guides (James + Jane). Logged-in users reaching this screen via
   profile → Re-do introductions get the full 9-preset row revealed.
   Specificity is bumped via the doubled class selector so we win over the
   neighbouring `.onb-pick-grid` rule that also declares display:grid. */
.authed-only{display:none}
.onb-pick-grid.authed-only{display:none}
body.is-authed .onb-pick-section-label.authed-only{display:block}
body.is-authed .onb-pick-grid.authed-only{display:grid}

/* Section label between guide row and "more companions" row */
.onb-pick-section-label{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,238,216,.6);font-weight:600;align-self:flex-start;
  width:100%;max-width:980px;margin:0 0 -10px;padding:0 6px;
}

/* Featured guide grid — bigger cards (2 across).
   Cards stay white so they pop above the foliage. Hover ring tints
   warm-cream rather than blush so the contrast against the green stays
   gentle, not jarring. */
.onb-pick-grid{display:grid;width:100%}
.onb-pick-grid--featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vh,22px);max-width:720px}
.onb-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,12px);background:#fdf6e9;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:clamp(16px,2.4vh,22px) 18px clamp(18px,2.4vh,22px);cursor:pointer;text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 18px 40px rgba(12,18,4,.32);overflow:hidden}
.onb-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(12,18,4,.42);border-color:var(--rose)}
.onb-card:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.onb-card-photo{width:clamp(120px,18vh,180px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--blush);box-shadow:0 12px 28px rgba(40,46,20,.20);position:relative}
.onb-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.onb-card-name{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(22px,3vh,28px);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.onb-card-tag{font-size:clamp(11.5px,1.5vh,13px);color:var(--ink-soft);max-width:240px;line-height:1.4}
.onb-card-badge{
  position:absolute;top:14px;right:14px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--rose);padding:4px 9px;border-radius:99px;
}
.onb-pick-foot{margin:0;color:rgba(245,238,216,.55);font-size:12px}

/* OAuth row at the bottom — match splash colours so buttons read as
   primary actions on the dark olive backdrop. */

#view-pick-companion .oauth-btn{background:var(--ink-on-olive);color:var(--olive-deep);border:0}
#view-pick-companion .oauth-btn:hover{background:#fff7e2}

/* "More companions" grid — 3 cols on wide, 2 on narrow, 1 on phone */
.onb-pick-grid--more{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:980px;margin-top:8px;
}
.onb-pick-grid--more .onb-card{padding:18px 16px 22px;gap:10px;border-radius:20px}
.onb-pick-grid--more .onb-card-photo{width:140px;height:140px}
.onb-pick-grid--more .onb-card-name{font-size:24px}
.onb-pick-grid--more .onb-card-tag{font-size:12px;max-width:200px}

@media (max-width:900px){
  .onb-pick-grid--more{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
}
@media (max-width:640px){
  .onb-pick{padding:28px 16px 64px;gap:18px}
  .onb-pick-title{font-size:34px}
  .onb-pick-grid--featured{grid-template-columns:1fr;gap:18px;max-width:340px}
  .onb-pick-grid--more{grid-template-columns:repeat(2,1fr);gap:14px;max-width:340px}
  .onb-pick-grid--more .onb-card-photo{width:110px;height:110px}
  .onb-pick-grid--more .onb-card-name{font-size:20px}
  .onb-pick-grid--featured .onb-card-photo{width:160px;height:160px}
  .onb-pick-grid--featured .onb-card-name{font-size:26px}
}

/* ---- Onboarding chat ---- */
#view-onboarding{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.onb-chat{display:flex;flex-direction:column;flex:1;max-width:720px;width:100%;margin:0 auto;height:100vh;max-height:100vh;padding:0}
.onb-chat-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:rgba(241,234,215,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
/* The exit button is `position:absolute` for the pick-companion header
   (where it sits in the top-right corner). Inside the chat header it
   needs to flow as a normal flex item instead — otherwise it sticks to
   the right edge with no breathing room. */
.onb-chat-head .onb-exit{position:static;transform:none;width:36px;height:36px;border:1px solid var(--line);background:#fff;color:var(--ink);flex-shrink:0;backdrop-filter:none}
.onb-chat-head .onb-exit:hover{background:var(--bg);border-color:var(--blush-strong)}
.onb-chat-head .back,.onb-chat-head .ghost{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.onb-chat-head .ghost{background:transparent;border:none;cursor:default}
.onb-chat-id{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.onb-chat-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--blush);flex-shrink:0}
.onb-chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.onb-chat-name{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:18px;color:var(--ink);line-height:1}
.onb-chat-progress{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:3px}

.onb-chat-stream{flex:1;overflow-y:auto;padding:24px 20px 12px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.onb-chat-stream::-webkit-scrollbar{width:6px}
.onb-chat-stream::-webkit-scrollbar-thumb{background:var(--blush-strong);border-radius:6px}

.onb-bubble{display:flex;gap:10px;align-items:flex-end;animation:onb-fade-in .35s ease both}
.onb-bubble-comp{justify-content:flex-start}
.onb-bubble-me{justify-content:flex-end}
.onb-bubble-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--blush);flex-shrink:0}
.onb-bubble-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.onb-bubble-body{max-width:78%;padding:12px 16px;border-radius:20px;font-size:15.5px;line-height:1.55;color:var(--ink);box-shadow:var(--shadow-sm);font-family:'Inter',sans-serif}
.onb-bubble-comp .onb-bubble-body{background:#fff;border-bottom-left-radius:6px;border:1px solid var(--line)}
.onb-bubble-me .onb-bubble-body{background:var(--rose);color:#fff;border-bottom-right-radius:6px}
.onb-bubble-body p{margin:0 0 6px}
.onb-bubble-body p:last-child{margin-bottom:0}
@keyframes onb-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Reply panel — sticks at the bottom of the chat. */
.onb-chat-reply{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(241,234,215,0) 0%,var(--bg) 30%,var(--bg) 100%);padding:18px 20px 22px;border-top:1px solid transparent;z-index:4}
.onb-reply-panel{display:flex;flex-direction:column;gap:12px}
.onb-row{display:flex;gap:8px;align-items:stretch}
.onb-input{flex:1;font-family:'Inter',sans-serif;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none;resize:vertical;line-height:1.5}
.onb-input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(166,114,75,.15)}
textarea.onb-input{min-height:88px}

.btn.onb-send,.onb-send{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;background:var(--rose);color:#fff;border:none;border-radius:14px;font-size:14.5px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background .2s,opacity .2s,transform .15s}
.onb-send:hover:not(:disabled){background:var(--cocoa);transform:translateY(-1px)}
.onb-send:disabled{opacity:.45;cursor:not-allowed}
.onb-send svg{width:16px;height:16px}

.onb-skip{align-self:flex-start;background:none;border:none;color:var(--ink-mute);font-size:13px;cursor:pointer;padding:4px 8px;text-decoration:underline;text-underline-offset:3px;font-family:'Inter',sans-serif}
.onb-skip:hover{color:var(--ink-soft)}

/* Chips ---------- */
.onb-chips-wrap{display:flex;flex-direction:column;gap:10px}
.onb-chips{display:flex;flex-wrap:wrap;gap:8px}
.onb-chip{padding:9px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:14px;color:var(--ink);cursor:pointer;font-family:'Inter',sans-serif;transition:all .18s ease}
.onb-chip:hover{border-color:var(--blush-strong);background:var(--blush)}
.onb-chip.on{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 4px 12px rgba(166,114,75,.25)}

/* Contact form ---------- */
.onb-contact{display:flex;flex-direction:column;gap:8px}
.onb-help{font-size:12.5px;color:var(--ink-mute);margin:2px 0;line-height:1.4}
.onb-help.err{color:var(--lip)}
.onb-help-link{color:var(--lip);font-weight:500;text-decoration:underline;margin-left:4px}
.onb-help-link:hover{color:var(--rose)}

/* Yes / No ---------- */
.onb-yesno .btn{flex:1}

/* Values priority picker ---------- */
.onb-values{display:flex;flex-direction:column;gap:12px}
.onb-values-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:340px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fff}
.onb-value-chip{position:relative;padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:.04em;transition:all .15s ease}
.onb-value-chip:hover{border-color:var(--blush-strong)}
.onb-value-chip.on{background:var(--rose);border-color:var(--rose);color:#fff;padding-right:30px}
.onb-value-rank{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#fff;color:var(--rose);border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif}

/* Avatar pick ---------- */
.onb-avatars{display:flex;flex-direction:column;gap:14px}
.onb-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px;max-height:380px;overflow-y:auto;padding:4px}
.onb-avatar-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1.5px solid var(--line);background:#fff;border-radius:16px;cursor:pointer;transition:all .18s ease}
.onb-avatar-card:hover{border-color:var(--blush-strong);transform:translateY(-2px)}
.onb-avatar-card.on{border-color:var(--rose);box-shadow:0 0 0 3px rgba(166,114,75,.15)}
.onb-avatar-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--blush)}
.onb-avatar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.onb-avatar-label{font-size:12px;color:var(--ink-soft);font-family:'Inter',sans-serif}

/* Finalize state ---------- */
.onb-finalize{padding:20px;text-align:center;font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--ink-soft)}
.onb-finalize.err{color:var(--lip);font-style:normal;font-family:'Inter',sans-serif;font-size:14px}

@media (max-width:640px){
  .onb-chat-head{padding:12px 14px}
  .onb-chat-stream{padding:18px 14px 8px;gap:12px}
  .onb-chat-reply{padding:14px 14px 18px}
  .onb-bubble-body{font-size:14.5px;max-width:82%;padding:11px 14px}
  .onb-values-grid{max-height:280px}
  .onb-avatar-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .onb-avatar-photo{width:68px;height:68px}
}

/* ============================================================
   Daily-goal home card (Phase C)
============================================================ */
.home-goal-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.goal-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:8px}
.goal-q{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px;line-height:1.2}
.goal-row{display:flex;gap:10px;align-items:stretch}
.goal-input{flex:1;font-family:'Inter',sans-serif;font-size:15px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);outline:none}
.goal-input:focus{border-color:var(--rose);background:#fff;box-shadow:0 0 0 3px rgba(166,114,75,.12)}
.btn.goal-save,.goal-save{padding:11px 18px;background:var(--rose);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s}
.goal-save:hover:not(:disabled){background:var(--cocoa)}
.goal-pending{display:flex;flex-direction:column;gap:14px}
.goal-pending .goal-text,.goal-done .goal-text{font-family:'Fraunces',serif;font-size:22px;color:var(--ink);font-style:italic;line-height:1.3}
.goal-actions{display:flex;gap:8px}
.goal-actions .btn{padding:8px 16px;font-size:13px;border-radius:10px}
.goal-tick{background:var(--olive)!important;color:var(--ink-on-olive)!important;border:none}
.goal-tick:hover{background:var(--olive-deep)!important}
.goal-done{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.goal-done-mark{color:var(--olive);font-weight:600;font-size:14px;letter-spacing:.04em}
.goal-undo{padding:6px 12px!important;font-size:12px!important;border-radius:8px!important}
.goal-loading{color:var(--ink-mute);font-size:13px;text-align:center;padding:8px 0}

/* ============================================================
   Love-language picker (onboarding step)
============================================================ */
.onb-love-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.onb-love-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border:1.5px solid var(--line);background:#fff;border-radius:14px;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;transition:all .18s ease}
.onb-love-card:hover{border-color:var(--blush-strong);transform:translateY(-1px)}
.onb-love-card.on{border-color:var(--rose);background:#fff;box-shadow:0 0 0 3px rgba(166,114,75,.12)}
.onb-love-name{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:17px;color:var(--ink)}
.onb-love-hint{font-size:13px;color:var(--ink-mute);line-height:1.4}
@media (min-width:640px){.onb-love-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   OAuth + passkey buttons (splash quick-row, login screen)
============================================================ */

.oauth-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.login-oauth{margin:14px 0 16px;justify-content:center}
/* Generic OAuth button shell — used by both Google + Apple */
.oauth-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 22px;min-height:44px;min-width:200px;
  background:#fff;border:1px solid #dadce0;border-radius:24px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:500;color:#1f1f1f;letter-spacing:.01em;
  cursor:pointer;transition:box-shadow .18s ease,border-color .18s ease,background .18s ease;
  -webkit-font-smoothing:antialiased;
}
.oauth-btn:hover{box-shadow:0 1px 3px rgba(60,64,67,.12),0 1px 2px rgba(60,64,67,.08);border-color:#d2e3fc;background:#f8fbff}
.oauth-btn:active{background:#f1f3f4}
.oauth-btn:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}
.oauth-btn.full{width:100%}

/* Official Google G mark — DO NOT recolour. 18px per Google brand guidelines */
.g-logo{width:18px;height:18px;flex-shrink:0;display:block}

/* Apple uses a single white-on-black aesthetic per their guidelines */
.apple-btn{background:#000;color:#fff;border-color:#000}
.apple-btn:hover{background:#1a1a1a;border-color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.apple-btn:active{background:#2a2a2a}
.oauth-mark.a{display:inline-flex;width:18px;height:22px;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:18px;line-height:1}
.oauth-mark.a::before{content:"";display:block;width:14px;height:17px;background:currentColor;clip-path:polygon(50% 0,68% 4%,80% 18%,82% 32%,72% 42%,80% 56%,90% 70%,72% 90%,50% 100%,30% 96%,18% 80%,10% 60%,12% 40%,18% 26%,30% 12%);}

/* ============================================================
   Onboarding bubble streaming — typing dots + caret
============================================================ */
.onb-typing{display:inline-flex;gap:5px;align-items:center;padding:4px 0;height:18px}
.onb-typing > span{
  width:7px;height:7px;border-radius:50%;background:var(--ink-mute);display:inline-block;opacity:.4;
  animation:onb-bounce 1.2s infinite ease-in-out;
}
.onb-typing > span:nth-child(2){animation-delay:.15s}
.onb-typing > span:nth-child(3){animation-delay:.30s}
@keyframes onb-bounce{
  0%,100%{transform:translateY(0);opacity:.4}
  40%{transform:translateY(-4px);opacity:1}
}
.onb-stream-text{white-space:pre-wrap;font-size:15.5px;line-height:1.55;color:var(--ink);font-family:'Inter',sans-serif}
.onb-stream-caret{
  display:inline-block;color:var(--rose);margin-left:2px;font-weight:700;
  animation:onb-caret 1s infinite steps(2);
}
@keyframes onb-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .onb-typing > span,.onb-stream-caret{animation:none}
}

/* ============================================================
   Onboarding split layout — left brand+portrait, right chat.
   Replaces the previous single-column .onb-chat layout.
============================================================ */
#view-onboarding{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;padding:0}
.onb-shell{display:flex;flex-direction:column;flex:1;width:100%;min-height:100vh}

.onb-side{display:none}  /* hidden on mobile */

/* Right pane — same as old .onb-chat container */
.onb-chat-pane{display:flex;flex-direction:column;flex:1;max-width:720px;width:100%;margin:0 auto;height:100vh;max-height:100vh;padding:0;background:var(--bg)}

/* Header — desktop hides chat-id (it's redundant with side panel) */
.onb-chat-pane .onb-chat-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(241,234,215,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.onb-chat-pane .onb-chat-head .back{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.onb-chat-pane .onb-chat-head .back:hover{border-color:var(--blush-strong)}
.onb-chat-id{display:flex;align-items:center;gap:10px;flex:1;min-width:0}

/* Progress dot bar — replaces "1 OF 15" text on desktop. */
.onb-progress-bar{display:flex;gap:6px;flex:1;align-items:center;justify-content:center;padding:0 16px}
.onb-pip{flex:1;max-width:24px;min-width:8px;height:6px;border-radius:3px;background:var(--line);transition:background .25s ease, transform .2s ease}
.onb-pip.done{background:var(--rose)}
.onb-pip.current{background:var(--rose);transform:scaleY(1.4);box-shadow:0 0 0 2px rgba(166,114,75,.18)}

/* === Desktop ≥1024px: split layout, full-bleed === */
@media (min-width:1024px){
  .onb-shell{flex-direction:row;min-height:100vh;height:100vh}
  /* Left side — olive bg + brand + portrait */
  .onb-side{
    display:flex;flex-direction:column;
    flex:0 0 42%;max-width:560px;
    background:linear-gradient(170deg,#3e4a2f 0%,#4f5536 55%,#5b6840 100%);
    color:var(--ink-on-olive);
    padding:48px max(40px,3.5vw) 56px;
    position:relative;overflow:hidden;
    text-align:center;align-items:center;
  }
  .onb-side::before{
    content:"";position:absolute;inset:0;
    background-image:url('/static/images/splash-bg.png');background-size:cover;background-position:center;
    opacity:.30;mix-blend-mode:soft-light;
  }
  .onb-side > *{position:relative;z-index:2}

  .onb-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:auto}
  .onb-brand-ring{width:72px;height:72px;display:flex;align-items:center;justify-content:center}
  .onb-brand-ring img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
  .onb-brand-name{font-family:'Fraunces',serif;font-weight:500;font-size:22px;letter-spacing:-.01em;color:#fdf2dc}
  .onb-brand-tag{font-size:10px;letter-spacing:.32em;color:rgba(245,238,216,.72)}
  .onb-brand-tag .dot{margin:0 2px;color:var(--blush-strong)}

  .onb-side-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:24px 0}
  /* Portrait — concentric box-shadow rings give the editorial halo without
     a separate positioned element (which was prone to drift off-centre). */
  .onb-side-portrait{
    width:240px;height:240px;border-radius:50%;overflow:hidden;
    margin:0 auto 6px;padding:0;background:var(--blush);
    box-shadow:
      0 18px 50px rgba(0,0,0,.36),
      inset 0 0 0 4px rgba(245,238,216,.18),
      0 0 0 14px rgba(245,238,216,.06),
      0 0 0 16px rgba(245,238,216,.22);
    animation:onb-portrait-in .6s ease both;
  }
  .onb-side-portrait img{
    width:100%;height:100%;object-fit:cover;object-position:center top;
    display:block;transition:transform 8s ease;
    animation:onb-portrait-pulse 14s infinite ease-in-out;
  }
  @keyframes onb-portrait-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
  @keyframes onb-portrait-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

  .onb-side-name{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:42px;line-height:1;color:#fdf2dc;margin:8px 0 0;letter-spacing:-.01em}
  .onb-side-role{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,238,216,.78);margin:6px 0 0;font-weight:500}

  .onb-side-quote{
    margin:auto 0 0;padding:28px 12px 0;border-top:1px solid rgba(245,238,216,.18);
    font-family:'Fraunces',serif;font-style:italic;font-size:18px;line-height:1.5;color:rgba(245,238,216,.92);
    position:relative;
  }
  .onb-side-quote .quote-mark{position:absolute;left:-2px;top:14px;font-size:60px;line-height:1;color:var(--blush-strong);opacity:.55;font-family:'Fraunces',serif;font-weight:600}
  .onb-side-quote{padding-left:38px;text-align:left}

  .onb-chat-pane{flex:1;max-width:none;height:100vh;border-left:none}
  .onb-chat-pane .onb-chat-stream{padding:32px 48px 12px;max-width:720px;margin:0 auto;width:100%}
  .onb-chat-pane .onb-chat-reply{padding:18px 48px 28px;max-width:720px;margin:0 auto;width:100%}
  .onb-chat-pane .onb-chat-id{display:none} /* redundant with side panel */
  .onb-progress-bar{justify-content:center;max-width:520px}
}

/* === Mobile <1024px: keep chat as primary, hide side === */
@media (max-width:1023px){
  .onb-progress-bar{flex:0 0 auto;max-width:none}
  .onb-pip{max-width:14px;min-width:6px;height:5px}
}
@media (max-width:640px){
  .onb-chat-pane .onb-chat-id{display:flex}
  .onb-progress-bar{display:none}
}

/* ============================================================
   Onboarding portrait picker — dedicated full-screen view that
   replaces the cramped inline avatar grid in the chat reply.
============================================================ */
#view-pick-portrait{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);min-height:100vh;display:flex;flex-direction:column}
/* In-app portrait picker (reached from profile menu) reuses the onboarding
   shell's layout so 'Change their portrait' visually matches the onboarding
   pick-a-face step. Plain bg (no gradient) since it sits on top of app chrome. */
#view-portrait.view, #view-refine.view{display:flex;flex-direction:column;background:var(--bg)}
#view-portrait .onb-portrait-shell, #view-refine .onb-portrait-shell{padding-top:24px}
/* Refine view layout — portrait on the left, controls on the right at desktop;
   stacks on mobile. Mirrors the picker's two-pane layout for visual consistency. */
.refine-body{display:flex;gap:36px;align-items:flex-start;flex:1;padding:24px 0;flex-wrap:wrap;justify-content:center}
.refine-portrait-frame{width:340px;max-width:90vw;aspect-ratio:1;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(60,40,30,.05);flex-shrink:0}
.refine-portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}
.refine-controls{flex:1;min-width:300px;max-width:540px;display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:24px;padding:24px;box-shadow:0 1px 0 rgba(60,40,30,.05)}
.refine-controls .refine-input{width:100%;min-height:80px;border:1px solid rgba(60,40,30,.15);border-radius:14px;padding:12px 14px;font:inherit;resize:vertical;background:var(--bg)}
.refine-controls .refine-input:focus{outline:none;border-color:var(--lip)}
.refine-controls .refine-chips{display:flex;flex-wrap:wrap;gap:8px}
.refine-controls .refine-chips .chip{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid rgba(60,40,30,.15);background:var(--bg);cursor:pointer}
.refine-controls .refine-chips .chip:hover{border-color:var(--lip)}
.refine-controls .refine-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:4px}
.refine-controls .refine-done-row{margin-top:8px;border-top:1px solid rgba(60,40,30,.08);padding-top:16px}
.onb-portrait-shell{display:flex;flex-direction:column;flex:1;width:100%;max-width:1100px;margin:0 auto;padding:32px 24px 32px}

.onb-portrait-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}
.onb-portrait-head .back,.onb-portrait-head .ghost{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.onb-portrait-head .ghost{background:transparent;border:none;cursor:default}
/* Match the back button style + position so the X sits in the same row,
   not absolute-anchored to the viewport corner. */
.onb-portrait-head .onb-exit{position:static;transform:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;color:var(--ink);flex-shrink:0;backdrop-filter:none}
.onb-portrait-head .onb-exit:hover{background:var(--bg);border-color:var(--blush-strong)}
.onb-portrait-head-text{flex:1;text-align:center}
.onb-portrait-head-text .q-kicker{margin-bottom:6px}
.onb-portrait-title{font-family:'Fraunces',serif;font-size:42px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.05;margin:0}
.onb-portrait-title i{color:var(--rose);font-style:italic;font-weight:500}
.onb-portrait-sub{font-size:15px;color:var(--ink-soft);margin:8px 0 0;line-height:1.5;max-width:520px;margin-left:auto;margin-right:auto}

/* Body — preview left, grid right (desktop) */
.onb-portrait-body{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:flex-start;margin-bottom:28px}

.onb-portrait-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);position:sticky;top:24px}
.onb-portrait-preview-frame{
  width:240px;height:240px;border-radius:50%;overflow:hidden;background:var(--blush);
  box-shadow:0 18px 40px rgba(40,46,20,.18),inset 0 0 0 4px rgba(245,238,216,.6),0 0 0 12px rgba(245,238,216,.5),0 0 0 14px var(--blush-strong);
  margin-bottom:8px;
}
.onb-portrait-preview-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.onb-portrait-preview-name{font-family:'Fraunces',serif;font-style:italic;font-size:32px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.01em}
.onb-portrait-preview-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0;text-align:center}

/* Right: grid of cards */
.onb-portrait-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-content:flex-start}
.onb-portrait-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 14px;border:1.5px solid var(--line);background:#fff;border-radius:18px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.onb-portrait-card:hover{border-color:var(--blush-strong);transform:translateY(-2px)}
.onb-portrait-card.on{border-color:var(--rose);box-shadow:0 0 0 3px rgba(166,114,75,.18)}
.onb-portrait-card-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--blush);box-shadow:0 6px 16px rgba(40,46,20,.10)}
.onb-portrait-card-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.onb-portrait-card-name{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-soft);font-weight:500}

.onb-portrait-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;align-items:center;padding:18px 0 8px;border-top:1px solid var(--line)}

.onb-portrait-genai{min-width:auto;padding:11px 20px;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-radius:24px;transition:all .18s}
.onb-portrait-genai:hover:not(:disabled){border-color:var(--rose);background:#fff8f1}
.onb-portrait-genai:disabled{opacity:.65;cursor:wait}
.onb-portrait-genai .i{color:var(--rose)}
.onb-portrait-continue{padding:13px 32px;font-size:15px;border-radius:24px}

/* Mobile */
@media (max-width:880px){
  .onb-portrait-body{grid-template-columns:1fr;gap:20px}
  .onb-portrait-preview{position:static;padding:18px}
  .onb-portrait-preview-frame{width:180px;height:180px}
  .onb-portrait-preview-name{font-size:26px}
  .onb-portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .onb-portrait-card-photo{width:72px;height:72px}
  .onb-portrait-title{font-size:32px}
}
@media (max-width:520px){
  .onb-portrait-shell{padding:20px 14px 24px}
  .onb-portrait-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .onb-portrait-actions{flex-direction:column;align-items:stretch}
  .onb-portrait-actions .btn,.onb-portrait-genai{width:100%;justify-content:center}
}

/* ============================================================
   In-onboarding customize page (view-onb-customize)
============================================================ */
#view-onb-customize{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.onb-cust-shell{display:flex;flex-direction:column;flex:1;width:100%;max-width:780px;margin:0 auto;padding:0}
.onb-cust-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(241,234,215,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.onb-cust-head .back,.onb-cust-head .ghost{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.onb-cust-head .ghost{background:transparent;border:none;cursor:default}
.onb-cust-head .onb-exit{position:static;transform:none;width:36px;height:36px;border:1px solid var(--line);background:#fff;color:var(--ink);flex-shrink:0;backdrop-filter:none}
.onb-cust-head .onb-exit:hover{background:var(--bg);border-color:var(--blush-strong)}
.onb-cust-progress{display:flex;gap:6px;flex:1;align-items:center;justify-content:center;padding:0 16px;max-width:520px;margin:0 auto}
.onb-cust-body{padding:32px 24px 56px;display:flex;flex-direction:column;gap:18px}
.onb-cust-title{font-family:'Fraunces',serif;font-size:38px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.05;margin:0 0 8px}
.onb-cust-title i{color:var(--rose);font-style:italic;font-weight:500}
.onb-cust-body .signup-sub{margin:0 0 18px}
.onb-cust-body #onbCustContinue{margin-top:14px;border-radius:24px;padding:14px 24px;font-size:15px}
@media (max-width:640px){
  .onb-cust-body{padding:24px 16px 48px}
  .onb-cust-title{font-size:30px}
  .onb-cust-progress{display:none}
}
/* Generating overlay shown after user clicks Create — covers the entire
   viewport so the form is visually replaced by a focused loader while signup +
   portrait gen runs. position:fixed (not absolute) so it stays centered on the
   viewport regardless of how tall the form behind is — otherwise on a long
   customize form the loader's middle ends up far below the fold and the user
   sees only the bottom of the form. */
.onb-cust-loader{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(244,236,227,.96);backdrop-filter:blur(6px);padding:24px;overflow-y:auto}
.onb-cust-loader[hidden]{display:none}
.onb-cust-shell{position:relative}
.onb-cust-loader-card{max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto}
.onb-cust-loader-spinner{width:54px;height:54px;border-radius:50%;border:3px solid rgba(168,99,76,.18);border-top-color:var(--lip);animation:onb-cust-spin 1s linear infinite;margin-bottom:8px}
.onb-cust-loader.is-error .onb-cust-loader-spinner{display:none}
@keyframes onb-cust-spin{to{transform:rotate(360deg)}}
/* Mobile: scale down spinner + title so the loader fits on tiny screens. */
@media (max-width:640px){
  .onb-cust-loader{padding:16px}
  .onb-cust-loader-card{gap:10px}
  .onb-cust-loader-spinner{width:44px;height:44px;margin-bottom:4px}
  .onb-cust-loader-title{font-size:24px !important}
  .onb-cust-loader-sub{font-size:14px}
}
.onb-cust-loader-title{font-family:'Fraunces',serif;font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:0}
.onb-cust-loader-title i{color:var(--rose);font-style:italic;font-weight:500}
.onb-cust-loader-sub{margin:0;color:var(--ink-soft);font-size:15px}
.onb-cust-loader-err{margin:6px 0 0;color:#a83c3c;font-size:14px}
.onb-cust-loader-link{display:inline-block;margin-left:6px;color:var(--lip);font-weight:500;text-decoration:underline}
.onb-cust-loader-link:hover{color:var(--rose)}

/* ============================================================
   Onboarding stock-vs-customize chooser (view-onb-choose)
============================================================ */
#view-onb-choose{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);min-height:100vh;display:flex;flex-direction:column}

/* === Updated chooser: 11-stock grid + bottom action row ===
   Big editorial 3-col grid — square-rounded cards, photo dominates, no
   name labels (the conversation already revealed the persona).
   Selected card gets a rose ring. */

/* Hide the name label inside chooser cards — the photo IS the choice. */

/* ============================================================
   Onboarding "Exit and start over" button — reused across all
   onboarding views' top bars. Sits opposite the back button.
============================================================ */
.onb-exit{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all .18s;
}
.onb-exit:hover{border-color:var(--lip);color:var(--lip);background:#fff5f3}
.onb-exit:focus-visible{outline:2px solid var(--lip);outline-offset:2px}
.onb-exit .i{width:18px;height:18px}
/* Pick-companion has a centered head; absolutely position the exit so the
   centered title doesn't fight for the same row. */
#view-pick-companion .onb-exit{position:absolute;right:16px;top:0}
#view-pick-companion .onb-pick-head{position:relative;padding-top:0}

/* ============================================================
   V3 redesign — cream/sepia + copper accents (matches v2-ref).
   Replaces the older dark-gold global theme + v2 dark onboarding
   scope. Below: theme overrides + new component styles for
   splash, onboarding, chat, dream life.
   ============================================================ */

:root{
  /* Re-skin the accent slot from olive (green) to copper for the
     primary brand stroke. .btn.primary / .chip.active etc. use --olive
     for the brand fill — remapping makes them copper without touching
     each rule. */
  --olive:#c89878;        /* primary copper */
  --olive-deep:#a87555;   /* deep copper — hover/pressed */
  --olive-light:#dcb195;  /* light copper */
  --olive-tint:#f3e3d0;   /* warm tint */
  --moss:#9b6d4d;         /* deep copper */
  --ink-on-olive:#ffffff; /* white text on copper buttons */

  --rose:#b8825c;         /* italic accent */
  --blush:#f3e3d0;
  --blush-strong:#c89878;

  /* Copper gradient + glow used across CTAs */
  --copper-1:#dcb195;
  --copper-2:#c89878;
  --copper-3:#a87555;
  --copper-grad:linear-gradient(180deg,var(--copper-1) 0%,var(--copper-2) 50%,var(--copper-3) 100%);
  --copper-glow:0 12px 28px rgba(168,117,85,.32);
}

/* Body remains cream — keep base */
body{background:var(--bg);color:var(--ink)}

/* Primary button → copper gradient */
.btn.primary{
  background:var(--copper-grad);
  color:#fff;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}

/* ============================================================
   V3 Splash — full-bleed couple hero + serif headline + copper CTA.
   Matches v2-ref/S__18120780.jpg. Replaces splash-grid/splash-portrait.
   ============================================================ */

#view-splash.view{padding:0;background:#1a1612}
.v3-splash{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  background:#0f0c0a;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.v3-splash-bg{
  position:absolute;inset:0;
  background:url('/static/images/v3/splash-hero.png?v=2') center top / cover no-repeat;
  z-index:1;
}
.v3-splash-bg::after{
  /* warm vignette bottom for legibility of headline + CTA */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,215,0) 0%,
    rgba(241,234,215,0) 35%,
    rgba(241,234,215,.55) 55%,
    rgba(241,234,215,.93) 70%,
    #f1ead7 82%);
}
.v3-splash-top{
  position:relative;z-index:3;
  padding:14px 22px 0;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.v3-splash-brand{
  display:flex;flex-direction:column;
  color:var(--ink);
}
.v3-splash-brand h1{
  font-family:'Fraunces',serif;
  font-weight:600;font-size:22px;line-height:1.05;
  letter-spacing:.02em;color:#7c4a2c;
  text-shadow:0 1px 6px rgba(255,255,255,.4);
}
.v3-splash-brand .sub{
  margin-top:6px;
  font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(26,22,18,.7);
}
.v3-splash-brand .line{
  margin-top:6px;height:1.5px;width:36px;
  background:linear-gradient(90deg,#c89878,transparent);
}

.v3-splash-hero{
  position:relative;z-index:3;
  margin-top:auto;
  padding:0 26px 24px;
}
.v3-splash-headline{
  font-family:'Fraunces',serif;
  font-weight:700;font-size:54px;line-height:.98;
  letter-spacing:-.02em;
  color:#1a1612;
  text-transform:uppercase;
}
.v3-splash-headline i{
  display:inline-block;
  font-style:italic;font-weight:600;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-splash-sub{
  margin-top:14px;
  font-family:'Fraunces',serif;
  font-weight:500;font-size:18px;letter-spacing:.02em;
  color:#1a1612;text-transform:uppercase;
}
.v3-splash-tag{
  margin-top:14px;font-size:14.5px;line-height:1.45;
  color:rgba(26,22,18,.78);max-width:380px;
}
.v3-splash-tag u{
  text-decoration:none;color:#a87555;font-weight:500;
  border-bottom:1px solid rgba(168,117,85,.42);
}
.v3-splash-cta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;
  margin-top:22px;
  background:var(--copper-grad);
  color:#fff;
  border:none;border-radius:999px;
  padding:18px 26px;
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .18s,box-shadow .18s;
}
.v3-splash-cta:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}
.v3-splash-cta svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.v3-splash-chips{
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:8px 14px;
  flex-wrap:wrap;
  font-size:12px;color:rgba(26,22,18,.75);
}
.v3-splash-chips .ch{
  display:inline-flex;align-items:center;gap:5px;
}
.v3-splash-chips .ch svg{width:14px;height:14px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-splash-chips .sep{color:rgba(26,22,18,.35);font-size:8px;}
.v3-splash-foot{
  position:relative;z-index:3;
  padding:10px 22px 22px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;color:rgba(26,22,18,.68);
  background:#f1ead7;
}
.v3-splash-foot svg{width:13px;height:13px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0}
.v3-splash-foot b{color:#a87555;font-weight:500}

@media (min-width:900px){
  .v3-splash{min-height:100dvh}
  .v3-splash-headline{font-size:72px}
  .v3-splash-sub{font-size:22px}
  .v3-splash-tag{font-size:16px;max-width:520px}
  .v3-splash-hero{padding:0 60px 36px;max-width:720px;margin-left:0;margin-right:auto}
  .v3-splash-cta{max-width:520px}
}

/* ============================================================
   V3 Onboarding — 3-card flow over coastal hero bg.
   Matches v2-ref/S__18120781, S__18120782, S__18120783.
   Card 1: Choose Your Companion (type+gender+name)
   Card 2: Choose Your Companion Presence (3x3 portrait grid)
   Card 3: Birth info + email/phone + OAuth + signup
   ============================================================ */

#view-onb-v3.view{padding:0;background:#1a1612}
.v3-onb{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#0f0c0a;
  overflow:hidden;
}
.v3-onb-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  background-repeat:no-repeat;
  transition:background-image .4s ease;
  z-index:1;
}
.v3-onb-bg.is-step1{background-image:url('/static/images/v3/onb-step1-bg.png?v=2')}
.v3-onb-bg.is-step2{background-image:url('/static/images/v3/onb-step1-bg.png?v=2');filter:brightness(.55) blur(2px)}
.v3-onb-bg.is-step3{background-image:url('/static/images/v3/onb-step3-bg.png')}
.v3-onb-back{
  position:absolute;top:14px;left:14px;z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.85);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.v3-onb-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

.v3-onb-hero{
  position:relative;z-index:3;
  padding:60px 24px 16px;
  color:#1a1612;
}
.v3-onb-hero h1{
  font-family:'Fraunces',serif;
  font-weight:600;font-size:34px;line-height:1.05;
  letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(255,255,255,.45);
}
.v3-onb-hero h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-onb-hero p{
  margin-top:10px;font-size:15px;line-height:1.45;
  color:rgba(26,22,18,.78);max-width:300px;
}
.v3-onb-hero .privacy{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;color:rgba(26,22,18,.72);
}
.v3-onb-hero .privacy svg{width:18px;height:18px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}

/* Card (frosted glass overlay) */
.v3-onb-card{
  position:relative;z-index:3;
  margin-top:auto;
  padding:22px 22px 16px;
  background:rgba(241,234,215,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top-left-radius:26px;border-top-right-radius:26px;
  box-shadow:0 -10px 40px rgba(0,0,0,.20);
}
.v3-onb-section{margin-bottom:18px}
.v3-onb-section:last-of-type{margin-bottom:0}
.v3-onb-label{
  font-size:13px;font-weight:500;color:#1a1612;
  margin-bottom:10px;
}

/* Type chips (Warm / Playful / Romantic) — 3 in a row */
.v3-onb-types{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.v3-onb-type{
  position:relative;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:16px;
  padding:18px 8px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:all .2s;
  color:#1a1612;
  font-family:inherit;
}
.v3-onb-type:hover{background:rgba(255,255,255,.7)}
.v3-onb-type.on{
  background:#dcb195;
  border-color:#a87555;
  color:#1a1612;
}
.v3-onb-type.on::after{
  content:"";position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:11px;background-repeat:no-repeat;
}
.v3-onb-type .ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.v3-onb-type .ico svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-onb-type .lbl{font-size:13px;font-weight:500}

/* Gender pair (Male / Female) */
.v3-onb-genders{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v3-onb-gender{
  position:relative;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  padding:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .2s;color:#1a1612;
  font-family:inherit;font-size:14px;
}
.v3-onb-gender.on{background:#dcb195;border-color:#a87555;font-weight:500}
.v3-onb-gender.on::after{
  content:"";position:absolute;top:8px;right:8px;
  width:16px;height:16px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:10px;background-repeat:no-repeat;
}
.v3-onb-gender svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}

/* Inputs */
.v3-onb-input-row{position:relative}
.v3-onb-input-row .ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:rgba(26,22,18,.55);pointer-events:none;
}
.v3-onb-input-row .ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-onb-input{
  width:100%;
  padding:14px 14px 14px 42px;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  font-family:inherit;font-size:14.5px;color:#1a1612;
  transition:border-color .18s,background .18s;
}
.v3-onb-input::placeholder{color:rgba(26,22,18,.45)}
.v3-onb-input:focus{outline:none;border-color:#a87555;background:rgba(255,255,255,.85)}
.v3-onb-input.dropdown{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a87555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position:right 14px center;background-size:18px;background-repeat:no-repeat;
  padding-right:42px;
}

/* Big NEXT button */
.v3-onb-next{
  width:100%;
  margin-top:18px;
  padding:18px 22px;
  background:var(--copper-grad);
  color:#fff;border:none;border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:var(--copper-glow), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:filter .18s,box-shadow .18s,opacity .18s;
}
.v3-onb-next:hover{filter:brightness(1.04);box-shadow:0 18px 32px rgba(168,117,85,.42), inset 0 1px 0 rgba(255,255,255,.45)}
.v3-onb-next:disabled{opacity:.5;cursor:not-allowed}
.v3-onb-next svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

/* Step 2: presence picker — light cream full-page, no bg image overlay */
/* Step 2 — keep a soft cream background but restore a height-bounded
   slot so the layout matches step 1's photo-banner footprint. (No
   actual photo because the 32 portrait tiles ARE the visual hero.) */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#f1ead7;
  background-image:none;
  filter:none;
  height:60px;  /* leave room above the title so the back button + spacing match step 1 */
}
.v3-onb-presence{
  position:relative;z-index:3;
  padding:62px 22px 24px;
  text-align:center;
}
.v3-onb-presence h1{
  font-family:'Fraunces',serif;
  font-weight:600;font-size:22px;line-height:1.15;
  letter-spacing:-.005em;color:#1a1612;
  /* Mixed-case to match step 1's "Choose Your Companion" treatment.
     Italicised <i> word still gets the copper gradient via the rule
     below. */
}
.v3-onb-presence h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-onb-presence p{
  margin:8px auto 0;font-size:13px;line-height:1.45;
  color:rgba(26,22,18,.7);max-width:320px;
}
.v3-onb-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;
  margin-top:22px;padding:0 4px;
}
.v3-onb-portrait{
  position:relative;
  aspect-ratio:3/4;
  background:#f0e6d3;
  border-radius:12px;overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.v3-onb-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.v3-onb-portrait:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.v3-onb-portrait.on{
  border-color:#a87555;
  box-shadow:0 0 0 2px rgba(168,117,85,.25), 0 12px 24px rgba(168,117,85,.20);
}
.v3-onb-portrait.on::after{
  content:"";position:absolute;bottom:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:#1a1612;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcb195' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:14px;background-repeat:no-repeat;
}
.v3-onb-presence-foot{
  margin-top:24px;padding:0 22px 16px;
  text-align:center;color:rgba(26,22,18,.6);
  font-size:12px;line-height:1.6;
}
.v3-onb-presence-foot svg{width:18px;height:18px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none;margin:0 auto 6px;display:block}

/* Step 3: birth info — bg image w/ panels stacked over cream gradient */
.v3-onb-birth-block,
.v3-onb-account-block{
  background:rgba(255,255,255,.85);
  border-radius:18px;
  padding:18px;
  margin-bottom:12px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.v3-onb-block-title{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:18px;color:#1a1612;
  margin-bottom:14px;
}
.v3-onb-account-block .v3-onb-block-title{font-size:18px}
.v3-onb-account-block .v3-onb-block-sub{
  margin-top:-10px;margin-bottom:14px;
  font-size:13px;color:rgba(26,22,18,.65);line-height:1.4;
}
.v3-onb-field+.v3-onb-field{margin-top:10px}
.v3-onb-phone-row{display:flex;gap:8px}
.v3-onb-phone-row .v3-onb-input-row{flex:1}
.v3-onb-cc{
  flex:0 0 90px;position:relative;
  background:rgba(241,234,215,.6);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;
}
.v3-onb-cc .flag{font-size:18px}
.v3-onb-cc svg{width:14px;height:14px;color:#a87555;stroke:currentColor;stroke-width:2;fill:none}
.v3-onb-oauth-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;
}
.v3-onb-oauth{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 8px;
  background:#fff;
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:14px;
  cursor:pointer;font-size:12.5px;color:#1a1612;font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.v3-onb-oauth:hover{border-color:#a87555;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.v3-onb-oauth svg{width:16px;height:16px}
.v3-onb-oauth.apple svg{fill:#000;stroke:none}
.v3-onb-oauth.google svg{fill:none;stroke:none}

/* Mobile-only — phone shell handles outer chrome already */
@media (min-width:900px){
  #view-onb-v3 .v3-onb{
    max-width:480px;margin:0 auto;
    box-shadow:0 30px 80px rgba(0,0,0,.20);
  }
}

/* ============================================================
   V3 Chat — full portrait hero + overlay bubbles.
   Matches v2-ref/S__18120784.jpg. Replaces .chat-shell layout.
   ============================================================ */

#view-chat.view{padding:0;background:#f1ead7}
.v3-chat{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#f1ead7;
  overflow:hidden;
}
.v3-chat-head{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:10px;
  /* env(safe-area-inset-top) — reserves room for the iOS Safari
     URL bar / notch so the back arrow + companion name aren't
     hidden behind the browser chrome (#107 report). */
  padding:max(14px, env(safe-area-inset-top, 14px)) 14px 12px;
  background:#f1ead7;
  border-bottom:1px solid rgba(26,22,18,.06);
}
.v3-chat-back{
  flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;
}
.v3-chat-back svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
.v3-chat-avatar{
  flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  overflow:hidden;background:#e6dcc4;
  border:1.5px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.v3-chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.v3-chat-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.v3-chat-name{
  font-family:'Fraunces',serif;
  font-size:18px;font-weight:500;color:#1a1612;
}
.v3-chat-status{
  margin-top:3px;
  font-size:11.5px;color:rgba(26,22,18,.62);
  display:flex;align-items:center;gap:5px;
}
.v3-chat-status .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 2px rgba(74,222,128,.18);
}
.v3-chat-acts{display:flex;align-items:center;gap:6px}
.v3-chat-dream{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;background:#dcb195;color:#1a1612;
  border:none;border-radius:999px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  transition:filter .18s;
}
.v3-chat-dream:hover{filter:brightness(1.06)}
.v3-chat-dream svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}

.v3-chat-stage{
  position:relative;flex:1;
  background:#f1ead7;
  overflow:hidden;
}
.v3-chat-hero{
  position:absolute;inset:0;
  background:url('/static/images/v3/chat-hero-james.png') center top / cover no-repeat;
  z-index:1;
}
.v3-chat-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,215,0) 0%,
    rgba(241,234,215,0) 55%,
    rgba(241,234,215,.6) 80%,
    rgba(241,234,215,.92) 100%);
}
.v3-chat-body{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  /* CRITICAL: `justify-content:flex-end` + `overflow-y:auto` is a
     known Chromium bug — the flex-end alignment collapses
     scrollHeight to clientHeight so the user can't scroll up to see
     history (#96 report). The fix is `justify-content:flex-start`
     (default) + `margin-top:auto` on the first child below — that
     pins content to the bottom when short AND lets the user scroll
     up freely when content overflows. */
  padding:18px 14px 14px;gap:10px;z-index:3;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Pin content to the bottom when shorter than the body (the
   "starting state" the user sees when they first open chat). When
   the content grows past the body height, this margin collapses to
   0 and the scroll engages naturally. */
.v3-chat-body > *:first-child{margin-top:auto}
.v3-chat-body::-webkit-scrollbar{width:6px}
.v3-chat-body::-webkit-scrollbar-thumb{background:rgba(168,117,85,.25);border-radius:3px}

/* Bubbles — overlay on hero */

/* Input bar */
.v3-chat-input{
  position:relative;z-index:5;
  padding:10px 14px 14px;
  background:#f1ead7;
  display:flex;align-items:center;gap:10px;
}
.v3-chat-input .pill{
  flex:1;display:flex;align-items:center;
  background:#fff;border-radius:999px;
  padding:0 8px 0 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.v3-chat-input input{
  flex:1;border:none;outline:none;background:transparent;
  padding:14px 0;font-size:14.5px;color:#1a1612;
  font-family:inherit;
}
.v3-chat-input input::placeholder{color:rgba(26,22,18,.42)}
.v3-chat-input-send{
  width:36px;height:36px;border-radius:50%;
  background:var(--copper-grad);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 4px 12px rgba(168,117,85,.30);
  flex-shrink:0;
}
.v3-chat-input-send svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.v3-chat-input-side{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(26,22,18,.10);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.v3-chat-input-side svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

/* ============================================================
   V3 Dream Life — 3 lifestyle selector cards.
   Matches v2-ref/S__18120785.jpg. New view #view-dream-life.
   ============================================================ */

#view-dream-life.view{padding:0;background:#f1ead7}
.v3-dream{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:#f1ead7;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.v3-dream-head{
  display:flex;align-items:center;
  padding:14px 14px 0;
}
.v3-dream-back{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.v3-dream-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.v3-dream-hero{
  padding:14px 22px 18px;
}
.v3-dream-hero h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:30px;line-height:1.1;letter-spacing:-.01em;color:#1a1612;
}
.v3-dream-hero h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#c89878 0%,#a87555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-dream-cards{
  display:flex;flex-direction:column;gap:12px;
  padding:0 18px;
}
.v3-dream-card{
  position:relative;
  display:block;width:100%;
  aspect-ratio:5/2.4;
  border-radius:16px;overflow:hidden;
  background:#1a1411;
  border:none;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .2s,box-shadow .2s;
}
.v3-dream-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.v3-dream-card .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
}
.v3-dream-card .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(10,8,7,.85) 0%,
    rgba(10,8,7,.50) 50%,
    rgba(10,8,7,.20) 100%);
}
.v3-dream-card.c-billionaire .bg{background-image:url('/static/images/v3/dreamlife/billionaire.png')}
.v3-dream-card.c-wealth .bg{background-image:url('/static/images/v3/dreamlife/generational-wealth.png')}
.v3-dream-card.c-love .bg{background-image:url('/static/images/v3/dreamlife/love-freedom.png')}
.v3-dream-card .body{
  position:relative;z-index:2;
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:16px 60px 16px 18px;text-align:left;
  color:#fff;
}
.v3-dream-card .body h3{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:19px;line-height:1.12;letter-spacing:-.005em;
}
.v3-dream-card .body p{
  margin-top:6px;font-size:11.5px;line-height:1.45;
  color:rgba(255,255,255,.82);max-width:200px;
}
.v3-dream-card .pick{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  background:transparent;
  z-index:3;
}
.v3-dream-card.on{
  outline:2px solid #c89878;outline-offset:-2px;
  box-shadow:0 0 0 4px rgba(168,117,85,.18), 0 14px 28px rgba(168,117,85,.28);
}
.v3-dream-card.on .pick{
  background:#c89878;border-color:#c89878;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position:center;background-size:12px;background-repeat:no-repeat;
}

.v3-dream-toggle{
  margin:14px 18px 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;
  background:rgba(255,255,255,.65);
  border:1.5px solid rgba(26,22,18,.08);
  border-radius:16px;
  color:#a87555;font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;
}
.v3-dream-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

.v3-dream-cta{
  margin:14px 18px 0;
  padding:18px;
  background:linear-gradient(180deg,#b8825c,#8b5e3c);
  color:#fff;border:none;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px;
  letter-spacing:.005em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px rgba(139,94,60,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.v3-dream-cta:hover{filter:brightness(1.05)}
.v3-dream-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}

.v3-dream-foot{
  margin-top:auto;
  padding:14px 22px 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;color:rgba(26,22,18,.65);
}
.v3-dream-foot svg{width:13px;height:13px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none}
.v3-dream-foot b{color:#a87555;font-weight:500}

@media (min-width:900px){
  .v3-dream{max-width:480px;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.20)}
}

/* ============================================================
   V3 chat — adapt existing .msg.her / .msg.me to overlay style
   when inside .v3-chat-body (so we don't have to rewrite the
   message renderer). White bubble for her, copper for me.
   ============================================================ */
.v3-chat-body .msg{
  max-width:84%;padding:10px 16px;border-radius:22px;
  font-size:14.5px;line-height:1.4;color:#1a1612;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  margin:0;
  border:none;
}
.v3-chat-body .msg.her{
  align-self:flex-start;background:#fff;color:#1a1612;
  border-top-left-radius:6px;
}
.v3-chat-body .msg.me{
  align-self:flex-end;
  background:var(--copper-grad);color:#fff;
  border-top-right-radius:6px;
  box-shadow:0 4px 14px rgba(168,117,85,.25);
}
.v3-chat-body .msg .md-body p{margin:0;color:inherit}
.v3-chat-body .msg .md-body a{color:#a87555}
.v3-chat-body .msg-feedback{
  margin:4px 0 8px 6px;display:flex;gap:6px;align-self:flex-start;
}
.v3-chat-body .msg-feedback button{
  background:rgba(255,255,255,.85);border:1px solid rgba(26,22,18,.10);
  color:#a87555;border-radius:999px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.v3-chat-body .msg-feedback button .i{width:14px;height:14px}
.v3-chat-body .msg-feedback button.on{background:#dcb195;color:#1a1612;border-color:#a87555}
.v3-chat-body .day-divider{
  align-self:center;background:rgba(255,255,255,.7);color:rgba(26,22,18,.65);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.v3-chat-body .typing{
  background:#fff;padding:14px 16px;border-radius:22px;
  border-top-left-radius:6px;align-self:flex-start;
  display:inline-flex;gap:5px;box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.v3-chat-body .typing span{
  width:7px;height:7px;border-radius:50%;background:#a87555;opacity:.35;
  animation:typing-dot 1.2s ease-in-out infinite;
}
.v3-chat-body .typing span:nth-child(2){animation-delay:.15s}
.v3-chat-body .typing span:nth-child(3){animation-delay:.30s}
@keyframes typing-dot{
  0%,80%,100%{opacity:.35;transform:translateY(0)}
  40%{opacity:.95;transform:translateY(-3px)}
}
.v3-chat-body .chat-empty-wrap{
  margin:auto;text-align:center;padding:20px;
}
.v3-chat-body .chat-starters{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;
}
.v3-chat-body .chat-starter{
  background:rgba(255,255,255,.85);color:#1a1612;
  border:1.5px solid rgba(168,117,85,.25);border-radius:999px;
  padding:8px 14px;font-size:13px;cursor:pointer;
}
.v3-chat-body .chat-starter:hover{background:#fff;border-color:#a87555}

/* ── Tap-to-continue follow-up chips ──────────────────────────────────────
   Rendered under the companion's latest reply. A vertical "↳ suggestion"
   list (cf. the SuperGrok reference) re-skinned into the cream/copper theme:
   a soft white card with copper arrows and hairline dividers. Tapping a row
   sends it as the next message. */
.v3-chat-body .chat-followups{
  /* !important on the load-bearing box props: the generic ".v3-chat-body > *"
     and "> div:not(...)" rules force width:auto/max-width:84%/margin:0 with
     !important on every direct child, which would otherwise clobber the card. */
  align-self:flex-start !important;
  width:min(100%, 330px) !important;
  max-width:330px !important;
  margin:2px 0 10px 2px !important;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(168,117,85,.20);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(168,117,85,.13);
  animation:followIn .42s cubic-bezier(.2,.7,.3,1) both;
}
.v3-chat-body .chat-followups-hint{
  font:600 10.5px 'Inter',sans-serif;
  letter-spacing:.13em;text-transform:uppercase;
  color:#a87555;
  padding:11px 16px 7px;
}
.v3-chat-body .chat-followup{
  display:flex;align-items:center;gap:11px;
  width:100%;text-align:left;
  background:transparent;border:none;
  border-top:1px solid rgba(168,117,85,.12);
  padding:12px 16px;cursor:pointer;
  font:500 14px 'Inter',sans-serif;color:#3a3327;
  transition:background .15s ease,padding-left .15s ease;
}
.v3-chat-body .chat-followup::before{
  content:"↳";
  color:#a87555;font-size:16px;font-weight:700;line-height:1;
  flex:0 0 auto;transform:translateY(1px);
}
.v3-chat-body .chat-followup span{flex:1 1 auto;line-height:1.35}
.v3-chat-body .chat-followup:hover{background:rgba(220,177,149,.20);padding-left:19px}
.v3-chat-body .chat-followup:active{background:rgba(220,177,149,.34)}
@keyframes followIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Free-trial countdown strip (chat view) ──────────────────────────────── */
.trial-banner{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;width:100%;
  border:none;cursor:pointer;text-align:left;
  padding:8px 16px;
  background:var(--copper-grad, linear-gradient(180deg,#dcb195,#a87555));
  color:#fff;font:600 12.5px 'Inter',sans-serif;letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(168,117,85,.28);
}
.trial-banner-dot{font-size:13px;opacity:.9;line-height:1}
.trial-banner-text{flex:1 1 auto}
.trial-banner-cta{
  flex:0 0 auto;background:rgba(255,255,255,.22);
  padding:3px 12px;border-radius:999px;font-weight:700;
  border:1px solid rgba(255,255,255,.35);
}
.trial-banner:hover .trial-banner-cta{background:rgba(255,255,255,.32)}

/* ── Trial-ended gate header (upgrade view) ──────────────────────────────── */
.trial-ended-notice{
  margin:4px 0 18px;padding:20px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(220,177,149,.22),rgba(168,117,85,.12));
  border:1px solid rgba(168,117,85,.28);
}
.trial-ended-emoji{font-size:26px;color:var(--rose,#a6724b);margin-bottom:4px}
.trial-ended-title{
  font-family:'Fraunces',serif;font-weight:600;font-size:22px;
  color:#3c2516;margin:0 0 6px;
}
.trial-ended-sub{margin:0;color:var(--ink-soft,#5a604a);font-size:14px;line-height:1.45}

/* ── Monthly / yearly billing toggle (upgrade page) ──────────────────────── */
.billing-cycle{
  display:inline-flex;align-self:center;margin:0 auto 6px;gap:4px;
  padding:4px;border-radius:999px;
  background:rgba(168,117,85,.10);border:1px solid rgba(168,117,85,.20);
}
.billing-cycle[hidden]{display:none}
.billing-cycle .bc-opt{
  display:inline-flex;align-items:center;gap:7px;
  border:none;background:transparent;cursor:pointer;
  padding:7px 16px;border-radius:999px;
  font:600 13px 'Inter',sans-serif;color:var(--ink-soft,#5a604a);
  transition:background .15s ease,color .15s ease;
}
.billing-cycle .bc-opt.active{
  background:var(--copper-grad, linear-gradient(180deg,#dcb195,#a87555));
  color:#fff;box-shadow:0 3px 10px rgba(168,117,85,.28);
}
.billing-cycle .bc-save{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.25);padding:2px 7px;border-radius:999px;
}
.billing-cycle .bc-opt:not(.active) .bc-save{
  background:rgba(166,114,75,.16);color:var(--rose,#a6724b);
}
.plan-subprice{margin-top:4px;font-size:12px;color:var(--ink-mute,#8a8d76)}

/* Splash trial note under the CTA — sits on the CREAM area, so it must be a
   dark copper tone, not white (white was invisible on cream). */
.v3-splash-trial{
  margin:12px 0 0;text-align:center;
  font:700 12px 'Inter',sans-serif;letter-spacing:.04em;
  color:#8a5a38;
}

/* ============================================================
   V3 polish — pass after first capture.
   1) Bump DEEPLY copper darker for legibility on cream.
   2) Add a soft cream scrim behind v3-onb hero text so the
      headline stays readable even when the bg portrait fills
      the full frame (step3).
   3) Sidebar / tabbar restyle for cream/copper consistency.
   ============================================================ */

/* 1) Splash headline italic — deeper copper for stronger contrast. */
.v3-splash-headline i{
  background:linear-gradient(180deg,#a87555 0%,#7c4a2c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.18));
}

/* 2) Onboarding hero scrim — cream radial behind the top text */
.v3-onb-hero{
  background:
    radial-gradient(ellipse 95% 70% at 35% 30%,
      rgba(241,234,215,.85) 0%,
      rgba(241,234,215,.55) 45%,
      rgba(241,234,215,0) 75%);
  padding-top:78px;
}
.v3-onb-hero h1, .v3-onb-hero p, .v3-onb-hero .privacy{
  text-shadow:0 1px 6px rgba(255,255,255,.55);
}
/* Soft top bar so the back button + status text always read well */
.v3-onb::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(180deg,
    rgba(241,234,215,.55) 0%,
    rgba(241,234,215,0) 100%);
  z-index:2;pointer-events:none;
}

/* 3) Re-skin the legacy olive sidebar to cream/copper so authed views
   (home, mood, memory, profile) sit consistently with the new theme. */
.sidebar{
  background:linear-gradient(170deg,#e8d8be 0%,#dcc9a6 55%,#cfb88c 100%) !important;
  border-right:1px solid rgba(168,117,85,.25) !important;
  box-shadow:inset -1px 0 0 rgba(168,117,85,.10), 4px 0 24px rgba(60,40,20,.10) !important;
}
.sidebar::before{opacity:.18;mix-blend-mode:multiply !important}
.sidebar .brand-mark{outline:1px solid rgba(168,117,85,.30);box-shadow:0 4px 14px rgba(168,117,85,.18)}
.sidebar .brand-name{color:#3c2516;text-shadow:none !important}
.side-item{color:rgba(60,37,22,.78) !important}
.side-item:hover{background:rgba(168,117,85,.10) !important;color:#1a1612 !important}
.side-item.active{
  background:var(--copper-grad) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(168,117,85,.30) !important;
}
.side-item.active svg{stroke:#fff !important}
.side-user{background:rgba(255,255,255,.45) !important;border-color:rgba(168,117,85,.20) !important}
.side-user:hover{background:rgba(255,255,255,.75) !important}
.side-user-name{color:#3c2516 !important}
.side-user-sub{color:rgba(60,37,22,.65) !important}

/* Body cream override for V3 fullscreen views (no chrome) */
body:not(.in-app) .content-area,
body:not(.in-app) .app-shell{
  background:#f1ead7;
  display:block;
}
body:not(.in-app) .view-host{height:100vh;height:100dvh}
body:not(.in-app) .view{
  min-height:100vh;min-height:100dvh;
  padding:0 !important;
}

/* ============================================================
   V3 polish pass 2 — readability + scrim strength.
   Italic copper accent inside onb hero was getting lost on busy
   portraits. Solid darker copper + stronger cream scrim.
   ============================================================ */

/* Onboarding hero italic — use a solid darker copper (no gradient) so
   the word reads cleanly even over a busy photo bg. */
.v3-onb-hero h1 i,
.v3-onb-presence h1 i{
  background:none !important;
  -webkit-background-clip:initial;
  -webkit-text-fill-color:initial;
  background-clip:initial;
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,255,255,.55);
}

/* Stronger cream scrim — left side near-opaque, fades to transparent
   across the upper third. Keeps headline + sub crisp. */
.v3-onb-hero{
  background:
    linear-gradient(180deg,
      rgba(241,234,215,.95) 0%,
      rgba(241,234,215,.85) 35%,
      rgba(241,234,215,.40) 70%,
      rgba(241,234,215,0) 100%),
    radial-gradient(ellipse 75% 90% at 5% 25%,
      rgba(241,234,215,.85) 0%,
      rgba(241,234,215,.30) 50%,
      rgba(241,234,215,0) 80%);
  padding-top:78px;padding-bottom:14px;
}
.v3-onb-hero p{color:#3c2516 !important}

/* Splash DEEPLY — even darker italic */
.v3-splash-headline i{
  background:linear-gradient(180deg,#8b5e3c 0%,#5e3a20 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* ============================================================
   V3 polish pass 3 — match ref's frosted-glass card transparency.
   Ref shows ~55% gray frosted card; we were at 92% cream which
   read as a solid panel. Drop opacity so the photo glows through.
   ============================================================ */
.v3-onb-card{
  background:linear-gradient(180deg,
    rgba(170,150,130,.55) 0%,
    rgba(170,150,130,.70) 100%);
  backdrop-filter:blur(22px) saturate(1.05);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);
}
.v3-onb-card .v3-onb-label{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.18)}
.v3-onb-type{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);color:#fff}
.v3-onb-type:hover{background:rgba(255,255,255,.28)}
.v3-onb-type.on{background:#dcb195;border-color:#a87555;color:#1a1612}
.v3-onb-gender{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);color:#fff}
.v3-onb-gender.on{background:#dcb195;border-color:#a87555;color:#1a1612}
.v3-onb-input{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.28);
  color:#fff;
}
.v3-onb-input::placeholder{color:rgba(255,255,255,.65)}
.v3-onb-input:focus{background:rgba(255,255,255,.40);border-color:#fff}
.v3-onb-input-row .ico{color:rgba(255,255,255,.75)}
/* On step3 the cards (white "Birth Information" / "Save your journey") need
   to remain solid white — they're stacked panels, not floating fields. */
.v3-onb-birth-block, .v3-onb-account-block{
  background:rgba(255,255,255,.92);
}
.v3-onb-birth-block .v3-onb-input,
.v3-onb-account-block .v3-onb-input{
  background:rgba(241,234,215,.55);
  border-color:rgba(26,22,18,.10);color:#1a1612;
}
.v3-onb-birth-block .v3-onb-input::placeholder,
.v3-onb-account-block .v3-onb-input::placeholder{color:rgba(26,22,18,.45)}
.v3-onb-birth-block .v3-onb-input:focus,
.v3-onb-account-block .v3-onb-input:focus{
  background:#fff;border-color:#a87555;
}
.v3-onb-birth-block .v3-onb-input-row .ico,
.v3-onb-account-block .v3-onb-input-row .ico{color:rgba(26,22,18,.55)}

/* ============================================================
   V3 splash — rework to match ref (image #28) more closely.
   Lighter / airier feel, smaller type, chips wrapped in a
   rounded outline pill, photo dominates the upper ~2/3.
   ============================================================ */
.v3-splash-bg::after{
  /* Lighter white fade — less cream, more airy. Photo dominates
     the upper 65% of the screen; the bottom fades to soft cream. */
  background:linear-gradient(180deg,
    rgba(255,253,247,0) 0%,
    rgba(255,253,247,0) 50%,
    rgba(255,253,247,.40) 62%,
    rgba(255,253,247,.85) 74%,
    #fdfaf2 84%) !important;
}
.v3-splash{background:#fdfaf2}
.v3-splash-foot{background:#fdfaf2}

/* Wordmark: brighter copper, slightly smaller */
.v3-splash-brand h1{
  font-size:18px;font-weight:700;letter-spacing:.04em;
  color:#a87555;
  text-shadow:0 1px 4px rgba(255,253,247,.7);
  line-height:1.05;
}
.v3-splash-brand .sub{
  margin-top:4px;font-size:8.5px;letter-spacing:.30em;
  color:rgba(26,22,18,.62);
  font-weight:500;
}
.v3-splash-brand .line{margin-top:5px;width:32px;height:1.5px;background:#c89878}

/* Account icon: hollow circle, no opaque bg */

/* Hero: smaller headline. Sits lower on the screen so the photo gets
   more vertical real estate. */
.v3-splash-hero{padding:0 22px 14px}
.v3-splash-headline{
  font-size:26px;line-height:1.02;
  font-weight:700;letter-spacing:-.018em;
  color:#1a1612;
}
.v3-splash-headline i{
  font-size:.95em;
  background:linear-gradient(180deg,#c89878 0%,#9e6b48 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.v3-splash-sub{
  margin-top:10px;font-size:15px;letter-spacing:.04em;
  font-weight:500;color:#1a1612;
}
.v3-splash-tag{
  margin-top:8px;font-size:13.5px;line-height:1.4;
  color:rgba(26,22,18,.72);max-width:340px;
}
.v3-splash-tag u{
  color:#c89878;
  border-bottom:none;font-weight:400;
}

/* CTA: slightly smaller, more subtle copper, arrow on right */
.v3-splash-cta{
  margin-top:16px;
  padding:16px 22px;
  font-size:13px;letter-spacing:.16em;
  background:linear-gradient(180deg,#d8a78a 0%,#b8825c 100%);
  box-shadow:0 8px 20px rgba(168,117,85,.22), inset 0 1px 0 rgba(255,255,255,.30);
  justify-content:space-between;
}
.v3-splash-cta span{flex:1;text-align:center}
.v3-splash-cta svg{width:18px;height:18px;flex-shrink:0}

/* Chips: wrap in a rounded outline pill, 4 in one row, no separators */
.v3-splash-chips{
  margin-top:12px;
  padding:11px 16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(168,117,85,.22);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(60,40,20,.06);
  gap:6px 12px;flex-wrap:nowrap;justify-content:space-around;
  font-size:11.5px;font-weight:500;color:#1a1612;
}
.v3-splash-chips .ch{gap:5px;font-weight:500}
.v3-splash-chips .ch svg{width:14px;height:14px;color:#a87555}
.v3-splash-chips .sep{display:none}

/* Footer: smaller, no bg block — sits flush in the splash */
.v3-splash-foot{
  padding:10px 22px 16px;
  font-size:11px;color:rgba(26,22,18,.55);
  background:transparent;
}
.v3-splash-foot b{color:#a87555;font-weight:600}

@media (min-width:900px){
  .v3-splash-headline{font-size:60px}
  .v3-splash-sub{font-size:18px}
  .v3-splash-tag{font-size:14.5px;max-width:480px}
  .v3-splash-hero{padding:0 60px 24px;max-width:680px;margin-left:0;margin-right:auto}
  .v3-splash-cta{max-width:520px;padding:18px 24px}
  .v3-splash-chips{max-width:520px;margin-left:0;margin-right:auto;justify-content:space-between}
  .v3-splash-foot{padding:10px 60px 18px;justify-content:flex-start}
}

/* ============================================================
   V3 splash polish 2 — fix DEEPLY contrast + scrim start.
   ============================================================ */
.v3-splash-bg::after{
  background:linear-gradient(180deg,
    rgba(255,253,247,0) 0%,
    rgba(255,253,247,0) 38%,
    rgba(255,253,247,.55) 52%,
    rgba(255,253,247,.92) 66%,
    #fdfaf2 78%) !important;
}
/* Headline: solid black, text-shadow for crisp edges on photo bleed */
.v3-splash-headline{
  text-shadow:0 1px 8px rgba(255,253,247,.65), 0 0 22px rgba(255,253,247,.55);
}
/* DEEPLY italic — solid darker copper (no gradient clip = no photo bleed) */
.v3-splash-headline i{
  background:none !important;
  -webkit-background-clip:initial;-webkit-text-fill-color:initial;
  background-clip:initial;
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.7), 0 0 16px rgba(255,253,247,.55);
}
.v3-splash-sub{text-shadow:0 1px 6px rgba(255,253,247,.6)}
.v3-splash-tag{text-shadow:0 1px 4px rgba(255,253,247,.55)}

/* ============================================================
   V3 splash polish 3 — wordmark contrast over bright sky.
   ============================================================ */
/* Soft cream-white panel behind the wordmark area top-left so the
   copper title + sub never collide with a busy sky/photo. */
.v3-splash-top::before{
  content:"";position:absolute;top:0;left:0;
  width:260px;height:140px;
  background:radial-gradient(ellipse 70% 90% at 30% 30%,
    rgba(255,253,247,.85) 0%,
    rgba(255,253,247,.5) 45%,
    rgba(255,253,247,0) 80%);
  z-index:1;pointer-events:none;
}
.v3-splash-top > *{position:relative;z-index:2}
.v3-splash-brand h1{text-shadow:0 1px 8px rgba(255,253,247,.7), 0 0 16px rgba(255,253,247,.45)}
.v3-splash-brand .sub{text-shadow:0 1px 6px rgba(255,253,247,.6)}

/* ============================================================
   V3 onboarding step 1 — restructure: photo TOP, headline overlay
   bottom-left of photo, card at BOTTOM only. Matches ref #31.
   ============================================================ */
.v3-onb{
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#fdfaf2;
}
/* BG image now only covers TOP HALF of screen so the card can sit at the
   bottom without compressing the photo. */
.v3-onb-bg{
  position:absolute;top:0;left:0;right:0;
  height:58vh;height:58dvh;
  bottom:auto !important;
  background-size:cover;background-position:center top;
  z-index:1;
}
/* Soft white fade at the very bottom of the photo so the headline reads
   cleanly when it sits over the lower portion of the image. */
.v3-onb-bg::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,
    rgba(40,30,20,0) 0%,
    rgba(40,30,20,.25) 55%,
    rgba(40,30,20,.55) 90%,
    rgba(40,30,20,.65) 100%);
  pointer-events:none;
}
/* Soft tan transition between photo and card (no harsh edge) */
.v3-onb-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(180deg,rgba(40,30,20,0),rgba(40,30,20,.10));
  pointer-events:none;
}

/* Hero text now WHITE, overlaid on the bottom-left of the photo. */
.v3-onb-hero{
  position:absolute;z-index:3;
  top:auto !important;
  bottom:calc(42vh + 8px);
  left:0;right:0;
  padding:0 22px 22px;
  background:none !important;
  pointer-events:none;
}
.v3-onb-hero h1{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  font-size:30px;line-height:1.05;
}
.v3-onb-hero h1 i{
  color:#f0c8a6 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45) !important;
  background:none !important;-webkit-text-fill-color:initial;
}
.v3-onb-hero p{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  font-size:14px;line-height:1.4;
  margin-top:6px;
}
.v3-onb-hero .privacy{color:rgba(255,255,255,.92) !important}
.v3-onb-hero .privacy svg{color:#f0c8a6 !important}

/* Card: short, fixed at bottom. Reduced padding for compact layout. */
.v3-onb-card{
  position:relative;z-index:3;
  margin-top:0;
  padding:18px 18px 18px;
  border-top-left-radius:24px;border-top-right-radius:24px;
}
.v3-onb-section{margin-bottom:14px}

/* Step 1-specific overrides so the card height stays predictable */
#view-onb-v3 .v3-onb-bg.is-step1{height:42vh;height:42dvh}
#view-onb-v3 .v3-onb-bg.is-step1 + .v3-onb-back ~ * .v3-onb-hero,
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  bottom:calc(58vh + 8px);
}

/* Soft brand-cream backdrop behind the back button so it doesn't blend
   into a dark photo area. */
.v3-onb-back{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}

/* Step 2 / step 3 keep their existing layouts (presence has no photo
   overlap; step 3 still uses split cream cards). Resetting step3 hero
   back to dark text on cream scrim since it sits over a tall photo. */
#view-onb-v3 .v3-onb-bg.is-step3{height:30vh;height:30dvh}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;bottom:auto;
  padding:78px 22px 14px;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 0%,
    rgba(253,250,242,.78) 55%,
    rgba(253,250,242,.30) 100%);
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;text-shadow:0 1px 8px rgba(255,253,247,.55);
  font-size:28px;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:0 1px 4px rgba(255,253,247,.45);
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy svg{color:#a87555 !important}

/* ============================================================
   Reset previous attempt — pure step1 layout via direct selectors.
   ============================================================ */
/* Common: card pinned at bottom, photo absolute behind */
.v3-onb{display:flex;flex-direction:column;background:#fdfaf2;justify-content:flex-end}
.v3-onb-bg{position:absolute;inset:0;z-index:1}
#onbV3Stage{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Step 1: photo TOP-HALF, headline overlay bottom of photo, card BOTTOM */
#view-onb-v3 .v3-onb-bg.is-step1{
  height:50vh;height:50dvh;
  bottom:auto;
  background-position:center 30%;
}
/* Dark scrim at bottom of photo for white text legibility */
.v3-onb-bg.is-step1::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg,
    rgba(20,15,10,0) 0%,
    rgba(20,15,10,.15) 45%,
    rgba(20,15,10,.55) 85%,
    rgba(20,15,10,.75) 100%);
}

/* Step 1 hero — sits at the bottom of the photo as a WHITE overlay */
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  margin-top:calc(50vh - 130px);
  margin-top:calc(50dvh - 130px);
  background:none;
  padding:0 22px 14px;
  z-index:3;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff;font-size:30px;line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35);
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.35) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  font-size:14px;line-height:1.4;margin-top:6px;
}

/* Step 3: photo 30vh top, hero text DARK on cream scrim, panels below */
#view-onb-v3 .v3-onb-bg.is-step3{height:30vh;height:30dvh;bottom:auto}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;margin-top:0;
  padding:78px 22px 18px;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.55) 35%,
    rgba(253,250,242,.92) 65%,
    #fdfaf2 100%);
  z-index:3;
}

/* Step 2 (presence): full cream bg, no photo overlay (existing behavior) */

/* All steps' BACK button gets a white pill background */
.v3-onb-back{background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.7)}

/* ============================================================
   V3 onb step1 — clean rewrite. Removes flex conflicts; uses
   absolute positioning for the photo + hero overlay, with the
   card pushed down via padding-top in normal flow.
   ============================================================ */
.v3-onb{
  display:block !important;
  position:relative;
  min-height:100vh;min-height:100dvh;
  background:#fdfaf2;
}
#onbV3Stage{
  display:block !important;
  position:relative;z-index:2;
  min-height:auto !important;
}

/* === Step 1 === */
#view-onb-v3 .v3-onb-bg.is-step1{
  position:absolute;top:0;left:0;right:0;bottom:auto !important;
  height:50vh;height:50dvh;
  background-position:center 32%;
  z-index:1;
}
/* Dark gradient at bottom of photo so the white hero text reads */
.v3-onb-bg.is-step1::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:55%;
  background:linear-gradient(180deg,
    rgba(20,15,10,0) 0%,
    rgba(20,15,10,.20) 50%,
    rgba(20,15,10,.65) 90%,
    rgba(20,15,10,.78) 100%);
  pointer-events:none;
}

/* Stage pushed below the photo. Hero gets a NEGATIVE margin so it lifts
   into the photo's lower fade. */
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage{
  padding-top:50vh;padding-top:50dvh;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage > div > .v3-onb-hero,
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  margin-top:-150px !important;
  padding:0 22px 18px !important;
  background:none !important;
  z-index:5;
  pointer-events:auto;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-size:28px;line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 26px rgba(0,0,0,.4) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;-webkit-text-fill-color:initial !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35) !important;
}
.v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.95) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.5) !important;
  font-size:14px;line-height:1.4;margin-top:6px;
}

/* === Step 3 === */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:30vh;height:30dvh;bottom:auto !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{padding-top:18vh;padding-top:18dvh}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;margin-top:0 !important;
  padding:24px 22px 18px !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 35%,
    #fdfaf2 100%) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:0 1px 8px rgba(255,253,247,.55) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;background:none !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
.v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:none !important;
  font-size:13px !important;
}

/* ============================================================
   V3 onb hero — FINAL clean rules. Reset all the conflicting
   prior overrides for .v3-onb-hero with concrete per-step rules.
   ============================================================ */
/* Reset base hero to none of: absolute positioning, bottom offset,
   inherited radial-gradient, padding-top of 78px. */
.v3-onb-hero{
  position:relative !important;
  top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
  margin-top:0 !important;
  padding:0 22px 14px !important;
  background:none !important;
  pointer-events:auto !important;
}

/* === Step 1: hero overlays the bottom of a top-half photo === */
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
  margin-top:-160px !important;
  padding:0 22px 16px !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1{
  color:#fff !important;font-size:28px;line-height:1.05;font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.65), 0 0 26px rgba(0,0,0,.4) !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#f3c8a5 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:#f3c8a5 !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35) !important;
}
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.5) !important;
  font-size:14px;line-height:1.4;margin-top:6px;
}

/* === Step 3 === */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  padding:24px 22px 18px !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,.95) 35%,
    #fdfaf2 100%) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;font-weight:600;
  text-shadow:0 1px 8px rgba(255,253,247,.55) !important;
  line-height:1.1;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:#8b5e3c !important;
  text-shadow:0 1px 8px rgba(255,253,247,.6) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#3c2516 !important;text-shadow:none !important;
  font-size:13px !important;margin-top:6px;
}

/* ============================================================
   V3 onb card — darken frosted glass for better text contrast.
   Was too light/tan; white text was washing out. Switch to a
   darker neutral with stronger backdrop blur.
   ============================================================ */
.v3-onb-card{
  background:linear-gradient(180deg,
    rgba(48,38,30,.62) 0%,
    rgba(48,38,30,.75) 100%) !important;
  backdrop-filter:blur(26px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.1) !important;
  border-top:1px solid rgba(255,255,255,.10);
}
.v3-onb-card .v3-onb-label{
  color:#fff !important;
  font-weight:500;font-size:13.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* Inactive chips: hollow with white border outline (matches ref) */
.v3-onb-type{
  background:rgba(255,255,255,.10) !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.v3-onb-type:hover{background:rgba(255,255,255,.20) !important}
.v3-onb-type.on{
  background:#dcb195 !important;
  border-color:#dcb195 !important;
  color:#1a1612 !important;
}
.v3-onb-type .ico svg, .v3-onb-type .lbl{
  text-shadow:0 1px 4px rgba(0,0,0,.25);
}
.v3-onb-type.on .ico svg, .v3-onb-type.on .lbl{text-shadow:none}

.v3-onb-gender{
  background:rgba(255,255,255,.10) !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.v3-onb-gender:hover{background:rgba(255,255,255,.20) !important}
.v3-onb-gender.on{
  background:#dcb195 !important;
  border-color:#dcb195 !important;
  color:#1a1612 !important;
}

/* Inputs: keep frosted but tinted slightly darker */
.v3-onb-card .v3-onb-input{
  background:rgba(255,255,255,.14) !important;
  border:1.5px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
}
.v3-onb-card .v3-onb-input::placeholder{color:rgba(255,255,255,.62) !important}
.v3-onb-card .v3-onb-input:focus{
  background:rgba(255,255,255,.25) !important;
  border-color:#fff !important;
}
.v3-onb-card .v3-onb-input-row .ico{color:rgba(255,255,255,.75) !important}

/* ============================================================
   V3 onb step 2 (presence) — pure white airy bg, scrollable
   grid that holds all 47 portraits with the NEXT button pinned
   below the grid (not floating).
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#ffffff !important;
  background-image:none !important;
  filter:none !important;
  height:100vh;height:100dvh;bottom:0;
}
.v3-onb-bg.is-step2::before,
.v3-onb-bg.is-step2::after{display:none !important}
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage{padding-top:0 !important}

.v3-onb-presence{
  background:#ffffff;
  padding-top:62px;
}
.v3-onb-presence h1{color:#1a1612;font-weight:700}
.v3-onb-presence h1 i{
  color:#a87555 !important;
  background:none !important;
  -webkit-text-fill-color:#a87555 !important;
}
.v3-onb-presence p{color:rgba(26,22,18,.62)}

/* Grid: keep 3 columns; allow grid + below content to scroll naturally. */
.v3-onb-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:0 14px;margin-top:18px;
}
.v3-onb-portrait{
  aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:2px solid transparent;background:#f5f0e6;
  box-shadow:0 2px 10px rgba(40,30,20,.06);
  cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.v3-onb-portrait img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center 22%;
}
.v3-onb-portrait:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,30,20,.16)}
.v3-onb-portrait.on{
  border-color:#a87555;
  box-shadow:0 0 0 2px rgba(168,117,85,.30), 0 12px 24px rgba(168,117,85,.20);
}

.v3-onb-presence-foot{
  margin-top:18px;padding:0 22px;
  color:rgba(26,22,18,.58);font-size:12px;line-height:1.6;
}
.v3-onb-presence-foot svg{color:#a87555;margin:0 auto 4px;display:block}

/* NEXT button — flow inline (NOT fixed), so user scrolls past grid */
.v3-onb-presence + div .v3-onb-next,
.v3-onb-presence .v3-onb-next,
.v3-onb-presence + .v3-onb-next{
  margin:16px 18px 28px !important;
}

/* ============================================================
   V3 fullscreen views — allow content to scroll past viewport.
   Earlier `view-host{overflow:hidden}` + `height:100vh` clipped
   the 47-portrait presence grid. Restore natural body scroll.
   ============================================================ */
body:not(.in-app) .view-host{
  height:auto !important;
  min-height:100vh;min-height:100dvh;
  overflow:visible !important;
}
body:not(.in-app) .view{overflow:visible}
body:not(.in-app) .app-shell{min-height:100vh;min-height:100dvh;height:auto}

/* ============================================================
   V3 presence picker — pagination (9/page × 6 pages).
   Grid is fixed-size (3×3) so the whole page fits in one viewport
   with no scroll; user navigates via arrows / dots / swipe.
   ============================================================ */
.v3-presence-pager{
  position:relative;
  padding:0 14px;margin-top:18px;
  overflow:hidden;
}
.v3-presence-pager .v3-onb-grid{
  /* Override the page-wide grid styling so it sits inside the pager
     without extra padding. */
  padding:0 !important;margin-top:0 !important;
  min-height:330px;
}
@media (min-width:420px){
  .v3-presence-pager .v3-onb-grid{min-height:360px}
}

/* Nav row: prev arrow | dots | next arrow */
.v3-presence-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 14px 4px;
}
.v3-presence-arrow{
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(168,117,85,.25);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#a87555;
  box-shadow:0 2px 10px rgba(40,30,20,.08);
  transition:opacity .15s,transform .15s,background .15s,border-color .15s;
}
.v3-presence-arrow:hover{background:#fdfaf2;border-color:#a87555}
.v3-presence-arrow:active{transform:scale(.94)}
.v3-presence-arrow[disabled]{opacity:.30;cursor:not-allowed;pointer-events:none}
.v3-presence-arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

.v3-presence-dots{
  display:flex;align-items:center;gap:8px;
}
.v3-page-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(26,22,18,.18);
  border:none;cursor:pointer;padding:0;
  transition:background .18s,transform .18s,width .18s;
}
.v3-page-dot:hover{background:rgba(168,117,85,.55)}
.v3-page-dot.on{
  background:#a87555;
  width:24px;border-radius:4px;
}

/* Page info text */
.v3-onb-presence-foot{
  margin-top:6px !important;
  font-size:11.5px;letter-spacing:.06em;
  color:rgba(26,22,18,.55);text-align:center;
  text-transform:uppercase;font-weight:500;
}
.v3-onb-presence-foot svg{display:none !important}

/* ============================================================
   V3 presence picker — warmer cream bg to match splash/step1.
   Was pure white; user wanted the warm sepia tone instead.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2{
  background:#fdfaf2 !important;
  background-image:none !important;
}
.v3-onb-presence{background:#fdfaf2 !important}
.v3-onb-portrait{background:#f3e8d4 !important}
.v3-presence-arrow{
  background:rgba(255,255,255,.85);
  border-color:rgba(168,117,85,.30);
}

/* ============================================================
   V3 onb step 3 — fix input contrast (was inheriting the dark-
   frost rules from step 1) + collapse trailing whitespace below
   the NEXT button.
   ============================================================ */

/* Step 3 birth/account panels are SOLID WHITE — inputs need DARK
   text + dark placeholder + dark icons. The earlier
   .v3-onb-card .v3-onb-input rule (white text on dark frost) was
   bleeding through. Be explicit. */
.v3-onb-birth-block,
.v3-onb-account-block{
  background:#ffffff !important;
  box-shadow:0 6px 24px rgba(60,40,20,.08);
}
.v3-onb-birth-block .v3-onb-input,
.v3-onb-account-block .v3-onb-input{
  background:rgba(243,232,212,.40) !important;
  border:1.5px solid rgba(168,117,85,.20) !important;
  color:#1a1612 !important;
}
.v3-onb-birth-block .v3-onb-input::placeholder,
.v3-onb-account-block .v3-onb-input::placeholder{
  color:rgba(26,22,18,.50) !important;
  opacity:1 !important;
}
.v3-onb-birth-block .v3-onb-input:focus,
.v3-onb-account-block .v3-onb-input:focus{
  background:#fff !important;border-color:#a87555 !important;
}
.v3-onb-birth-block .v3-onb-input-row .ico svg,
.v3-onb-account-block .v3-onb-input-row .ico svg{color:#a87555 !important}
.v3-onb-birth-block .v3-onb-input-row .ico,
.v3-onb-account-block .v3-onb-input-row .ico{color:#a87555 !important}
/* Country-code chip on phone row */
.v3-onb-card .v3-onb-cc{
  background:rgba(243,232,212,.55) !important;
  border:1.5px solid rgba(168,117,85,.20) !important;
}
.v3-onb-card .v3-onb-cc svg{color:#a87555 !important}
/* OAuth buttons */
.v3-onb-card .v3-onb-oauth{
  background:#fff !important;color:#1a1612 !important;
  border:1.5px solid rgba(26,22,18,.10) !important;
}
.v3-onb-card .v3-onb-oauth:hover{border-color:#a87555 !important}

/* Step 3: SOLID cream card wrapping the white panels (not dark frost) */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 18px 16px !important;
  border-top:none !important;
  border-radius:0 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card > .v3-onb-next{
  margin-top:16px !important;
  margin-bottom:24px !important;
}
/* Privacy badge text + icon dark on cream for step 3 */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.78) !important;
  text-shadow:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy svg{
  color:#a87555 !important;
}

/* Collapse trailing whitespace — view container shouldn't grow past
   content on step 3. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-bottom:env(safe-area-inset-bottom,0);
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage::after{
  /* fill the gap below the card with the same cream so there's no
     visible empty band even if the document height is taller than
     content. */
  content:"";display:block;
  height:env(safe-area-inset-bottom,0);
  background:#fdfaf2;
}
/* Ensure the page bg under step 3 is cream end-to-end */
#view-onb-v3:has(.v3-onb-bg.is-step3),
.v3-onb:has(.is-step3){background:#fdfaf2}

/* ============================================================
   Step 3 — collapse the empty cream band that appeared below NEXT
   when content height < viewport height. Allow the .v3-onb to
   shrink to content; the cream body bg already extends behind.
   ============================================================ */
#view-onb-v3:has(.v3-onb-bg.is-step3) .v3-onb{
  min-height:0 !important;
}
/* Fallback (no :has support): scope by stage child containing step3 */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  padding-bottom:18px;
}
/* Body bg stays cream end-to-end so any leftover gap below the SPA
   view doesn't read as a different color. */
body{background:#fdfaf2}

/* ============================================================
   V3 step 3 — full split layout matching ref #41.
   Photo fills the WHOLE screen (positioned right). Cream gradient
   from left lets the headline read. Form panels become FROSTED
   GLASS so the photo continues to glow through behind them.
   ============================================================ */

/* Photo bg fills the whole page — couple shifted to the right
   side of the frame so the left ~40% is free for the headline. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:100vh;height:100dvh;
  bottom:0 !important;
  background-position:78% top !important;
  background-size:cover !important;
  background-color:#faf6ed !important;
}
.v3-onb-bg.is-step3::after{
  content:"";position:absolute;inset:0;
  /* Cream-white wash that's near-opaque on the LEFT and fades to
     transparent on the right where the couple should remain
     visible. Plus a soft top + bottom fade to keep depth. */
  background:
    linear-gradient(to right,
      rgba(255,253,247,.96) 0%,
      rgba(255,253,247,.88) 30%,
      rgba(255,253,247,.40) 58%,
      rgba(255,253,247,.10) 78%,
      rgba(255,253,247,0)   100%),
    linear-gradient(to bottom,
      rgba(255,253,247,.20) 0%,
      rgba(255,253,247,0)   25%,
      rgba(255,253,247,0)   75%,
      rgba(255,253,247,.50) 100%);
  pointer-events:none;
}

/* Stage has no top padding — headline now SITS OVER the photo as a
   left-aligned overlay, not below it. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{padding-top:0 !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  padding:62px 22px 18px !important;
  background:none !important;
  max-width:60%;  /* keep text on the left half */
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:0 1px 6px rgba(255,253,247,.7) !important;
  font-weight:600;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  -webkit-text-fill-color:#8b5e3c !important;
  text-shadow:0 1px 6px rgba(255,253,247,.6) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:#1a1612 !important;
  text-shadow:0 1px 6px rgba(255,253,247,.6) !important;
  font-size:13px !important;
  margin-top:8px;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.78) !important;
  text-shadow:0 1px 4px rgba(255,253,247,.55) !important;
}

/* === The cards: frosted glass over the photo === */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:linear-gradient(180deg,
    rgba(255,253,247,.62) 0%,
    rgba(255,253,247,.78) 100%) !important;
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 32px rgba(60,40,20,.10) !important;
  margin-bottom:12px;
  border-radius:20px;
}

/* Inputs inside frosted cards — semi-transparent */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-input,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-input{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(168,117,85,.18) !important;
  color:#1a1612 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-input:focus,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-input:focus{
  background:#fff !important;border-color:#a87555 !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card .v3-onb-cc{
  background:rgba(255,255,255,.45) !important;
  border:1px solid rgba(168,117,85,.18) !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card .v3-onb-oauth{
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(26,22,18,.10) !important;
  backdrop-filter:blur(8px);
}

/* Block titles inside frosted cards */
.v3-onb-birth-block .v3-onb-block-title,
.v3-onb-account-block .v3-onb-block-title{
  color:#8b5e3c !important;
}

/* Step 3 NEXT button — copper gradient stays prominent over photo */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  margin-top:14px;margin-bottom:24px;
  box-shadow:0 12px 28px rgba(168,117,85,.30), inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* ============================================================
   V3 step 3 — push photo further right + stronger cream wash on
   left so headline reads cleanly.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step3{
  background-position:95% top !important;
}
.v3-onb-bg.is-step3::after{
  background:
    linear-gradient(to right,
      rgba(255,253,247,.98) 0%,
      rgba(255,253,247,.94) 25%,
      rgba(255,253,247,.72) 45%,
      rgba(255,253,247,.30) 65%,
      rgba(255,253,247,.05) 85%,
      rgba(255,253,247,0)   100%),
    linear-gradient(to bottom,
      rgba(255,253,247,.40) 0%,
      rgba(255,253,247,0)   30%,
      rgba(255,253,247,0)   70%,
      rgba(255,253,247,.60) 100%) !important;
}

/* Card frosted-glass: a bit lighter / whiter so it reads as airy */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:linear-gradient(180deg,
    rgba(255,253,247,.78) 0%,
    rgba(255,253,247,.88) 100%) !important;
  backdrop-filter:blur(24px) saturate(1.1);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
}

/* Step 3 — solid cream backdrop behind the headline area only.
   Photo continues right + below the cards but the headline pocket
   is opaque so the words read crisply. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  background:linear-gradient(110deg,
    rgba(255,253,247,.97) 0%,
    rgba(255,253,247,.95) 55%,
    rgba(255,253,247,.55) 75%,
    rgba(255,253,247,0) 100%) !important;
  padding:62px 22px 20px !important;
  max-width:100% !important;
}

/* Step 3 — ensure the photo bg DOESN'T cap at 100vh when content
   is taller. Extend with the container so cards always have photo
   bleeding behind them, and the bottom doesn't show a stale cap. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:100% !important;height:auto !important;
  top:0;bottom:0 !important;
  min-height:100vh;min-height:100dvh;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  /* Pad bottom so NEXT button has breathing room above the safe-area */
  padding-bottom:max(env(safe-area-inset-bottom),12px);
}

/* ============================================================
   V3 step 3 — FINAL: photo as small banner at top, form lives
   on cream BELOW the photo (no overlap). Page sized to fit
   content (no trailing empty band).
   ============================================================ */

/* Photo: confined to a top banner ~38vh. Body below is solid cream. */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:38vh !important;height:38dvh !important;
  bottom:auto !important;top:0 !important;
  background-position:center 28% !important;
  background-size:cover !important;
}
/* Soft cream fade at the bottom of the photo (transitions into the
   solid cream section below). No diagonal scrim — text lives below. */
.v3-onb-bg.is-step3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:35%;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.55) 60%,
    rgba(253,250,242,1) 100%) !important;
  pointer-events:none;
}

/* Stage starts BELOW the photo (padding-top = photo height). */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:38vh !important;
  padding-top:38dvh !important;
  background:#fdfaf2;
  padding-bottom:18px;
}

/* Hero — solid cream bg, dark text. NOT a scrim overlay. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  position:relative;
  padding:18px 22px 8px !important;
  background:#fdfaf2 !important;
  max-width:100% !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{
  color:#1a1612 !important;font-size:24px !important;
  text-shadow:none !important;font-weight:600;line-height:1.1;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1 i{
  color:#8b5e3c !important;
  -webkit-text-fill-color:#8b5e3c !important;text-shadow:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{
  color:rgba(26,22,18,.78) !important;text-shadow:none !important;
  font-size:13px !important;margin-top:8px;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  color:rgba(26,22,18,.72) !important;text-shadow:none !important;
  margin-top:10px;
}

/* Cards — solid WHITE panels on cream, with subtle shadow. No frosted
   glass since they're not over a photo. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  background:#fdfaf2 !important;
  padding:0 18px 16px !important;
  backdrop-filter:none !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  background:#ffffff !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid rgba(168,117,85,.10) !important;
  box-shadow:0 6px 18px rgba(60,40,20,.06) !important;
}

/* NEXT button — sits after the card stack, normal flow */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  margin:14px 0 0 !important;
}

/* Outer container fits content — STEP 3 ONLY. Step 1 + step 2 need
   the shell to fill 100vh/100dvh like splash/login. Otherwise the
   bezel shrinks 61px and bg bleeds past the rounded corner. */
body[data-v3-step="3"] #view-onb-v3 .v3-onb{min-height:0 !important}
body[data-v3-step="3"] .view-host{min-height:0 !important;height:auto !important}

/* ============================================================
   Step 3 — NUCLEAR overrides for the bg sizing/positioning.
   Earlier accumulated rules left min-height:100vh + bottom:auto
   conflicts which forced the bg to fill the screen even though
   we wanted a 38vh banner.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step3{
  position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;
  bottom:auto !important;
  height:38vh !important;height:38dvh !important;
  min-height:0 !important;max-height:38dvh !important;
  background-position:center 28% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Nuke the leftover ::after gradient that was covering the whole photo. */
#view-onb-v3 .v3-onb-bg.is-step3::after{
  content:"" !important;
  position:absolute !important;
  inset:auto !important;
  top:auto !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  height:30% !important;
  background:linear-gradient(180deg,
    rgba(253,250,242,0) 0%,
    rgba(253,250,242,.60) 65%,
    rgba(253,250,242,1) 100%) !important;
  pointer-events:none;
}

/* Step 3 — stage must NOT paint a cream bg over the top portion
   where the photo banner lives. Use transparent for the stage,
   then put cream on each content child instead so the layout is
   photo (visible at top) → cream area (form below). */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  background:transparent !important;
  padding-top:0 !important;
}
/* The wrap div that JS injects holds: .v3-onb-hero + .v3-onb-card.
   Push it down via margin-top so the photo above stays visible,
   and give the wrap a cream bg so anything from .v3-onb-hero down
   reads on cream. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  margin-top:38vh;margin-top:38dvh;
  background:#fdfaf2;
  border-top-left-radius:24px;border-top-right-radius:24px;
  position:relative;z-index:2;
  box-shadow:0 -10px 28px rgba(60,40,20,.10);
}

/* Step 3 — prevent the wrap's margin-top:38vh from escaping the
   stage (margin-collapse was adding 320px of phantom height to
   the .v3-onb container, leaving an empty band below NEXT). Use
   padding-top on the stage instead so the photo banner sits in
   the stage's padding area + content stacks naturally. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:38vh !important;padding-top:38dvh !important;
  background:transparent !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage > div{
  margin-top:0 !important;
  background:#fdfaf2 !important;
  border-top-left-radius:24px !important;border-top-right-radius:24px !important;
}
/* The photo banner area + everything below is now in one stacked column
   inside the stage. v3-onb height = stage height. No phantom margin. */

/* Step 3 — make ALL container chains height:auto so the document
   ends right after the NEXT button (no 600px trailing cream band). */
body:has(#view-onb-v3.active) .view-host,
body:has(#view-onb-v3.active) #view-onb-v3,
body:has(#view-onb-v3.active) .app-shell,
body:has(#view-onb-v3.active) .content-area{
  min-height:0 !important;
  height:auto !important;
}
/* Body bg is cream so anything overflow shows the same color. */

/* Body class added by JS when v3 onboarding is active. */
/* Step 3 fit-content overrides — SCOPED to step 3 only. Step 1+2
   must keep 100vh/100dvh to render at the splash/login footprint. */
body[data-v3-step="3"] .v3-onb-active,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] #view-onb-v3{
  min-height:0 !important;
  height:auto !important;
}
body.v3-onb-active{background:#fdfaf2 !important}

/* Step 3 — force the v3-onb container + stage to fit content. */
body[data-v3-step="3"] #onbV3Stage{overflow:visible}
body[data-v3-step="3"] #view-onb-v3,
body[data-v3-step="3"] #view-onb-v3 > div{
  overflow:hidden;
}
/* Also kill the photo bg's ::after gradient extending past 100vh */
#view-onb-v3 .v3-onb-bg.is-step3{
  max-height:38vh !important;max-height:38dvh !important;
}

/* Step 1 + step 2 — fill the view completely + clip at rounded edge.
   Need to override the rogue `display:block !important` from earlier
   that broke the flex layout — without flex the .v3-onb collapsed to
   content height (784px) instead of viewport height. */
body[data-v3-step="1"] #view-onb-v3 .v3-onb,
body[data-v3-step="2"] #view-onb-v3 .v3-onb{
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
}

/* Body cream must extend perfectly under the v3-onb so any trailing
   document height blends seamlessly. No visible edge between
   content end and document end. */
body.v3-onb-active{
  background:#fdfaf2 !important;
  background-image:none !important;
}
body.v3-onb-active::after{
  /* In case any container ends with a shadow, blanket cream over */
  content:"";position:fixed;left:0;right:0;bottom:0;
  height:env(safe-area-inset-bottom,0);
  background:#fdfaf2;z-index:1;pointer-events:none;
}

/* ============================================================
   V3 onb — scroll lock. Make the view itself the scroll
   container (fixed to viewport height), so the document body
   NEVER grows beyond viewport. Result: user can't scroll past
   the NEXT button into empty cream — the view scrolls within
   its 100vh window and stops at the content's end.
   ============================================================ */
html, body.v3-onb-active{
  height:100vh;height:100dvh;
  overflow:hidden !important;
  margin:0;
}
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* The .v3-onb wrapper inside the view fits content normally. */
body.v3-onb-active[data-v3-step="3"] .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* Undo the unconditional html overflow:hidden — only body+inner
   containers should lock when v3 onboarding is active. */
html{overflow:auto !important}
html:has(body.v3-onb-active){overflow:hidden}

/* UNDO the scroll lock — it broke step 1/2 clicks. JS handles
   step 3 scroll constraint instead. */
html{overflow:auto !important}
body.v3-onb-active,
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host,
body.v3-onb-active #view-onb-v3{
  height:auto !important;
  overflow:visible !important;
}

/* ============================================================
   Step 3 ONLY — scroll lock at the document level.
   Uses body[data-v3-step="3"] set by JS, so step 1 + step 2
   keep their natural scroll. Document height is capped to the
   viewport, eliminating the empty cream band below NEXT.
   ============================================================ */
body[data-v3-step="3"].v3-onb-active{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body[data-v3-step="3"].v3-onb-active .app-shell,
body[data-v3-step="3"].v3-onb-active .content-area,
body[data-v3-step="3"].v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body[data-v3-step="3"].v3-onb-active #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* Make the photo banner align to top of the scrollable view */
body[data-v3-step="3"].v3-onb-active .v3-onb-bg.is-step3{
  position:sticky;top:0;
  height:38vh;height:38dvh;
  max-height:38dvh !important;
  z-index:1;
}

/* ============================================================
   FINAL: scroll lock for step 3. Use simplest possible cascade.
   Step 3 = body height capped, view-onb-v3 = scroll container.
   ============================================================ */
body[data-v3-step="3"]{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;max-height:100dvh !important;
  overflow:hidden !important;
  margin:0 !important;padding:0 !important;
}
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;
  overflow:hidden !important;
  min-height:0 !important;
}
body[data-v3-step="3"] #view-onb-v3{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  -webkit-overflow-scrolling:touch;
}
body[data-v3-step="3"] #view-onb-v3 > .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* ============================================================
   Step 3 — alternative: photo smaller + form compact so EVERYTHING
   fits in 1 viewport without needing scroll. Removes the need for
   scroll-lock entirely. Undoes the broken view-scroll attempts.
   ============================================================ */
body[data-v3-step="3"]{height:auto !important;overflow:visible !important}
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] #view-onb-v3{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  max-height:none !important;
}

/* Smaller photo banner — 24vh (was 38vh) */
#view-onb-v3 .v3-onb-bg.is-step3{
  height:24vh !important;height:24dvh !important;
  max-height:24dvh !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:24vh !important;padding-top:24dvh !important;
}

/* Tighter spacing on hero + cards */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero{
  padding:12px 22px 4px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero h1{font-size:21px !important;line-height:1.05}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero p{font-size:12.5px !important;margin-top:4px}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-hero .privacy{
  margin-top:6px;font-size:11px;
}

#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card{
  padding:0 16px 12px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block{
  padding:12px !important;margin-bottom:8px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-birth-block .v3-onb-block-title,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-block-title{
  font-size:15px !important;margin-bottom:8px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-account-block .v3-onb-block-sub{
  font-size:11.5px !important;margin-bottom:8px !important;margin-top:-4px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-field{margin-bottom:6px !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-input{
  padding:10px 14px 10px 38px !important;
  font-size:13px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-oauth-row{margin-top:6px !important}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-oauth{
  padding:9px 8px !important;font-size:11.5px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next{
  padding:14px 18px !important;
  font-size:13px !important;
  margin-top:8px !important;margin-bottom:12px !important;
}

/* ============================================================
   RESET — restore default .view-host overflow:hidden + .view
   overflow-y:auto so .view is the scroll container.
   ============================================================ */
body.v3-onb-active{height:auto !important;overflow:visible !important}
body.v3-onb-active .app-shell{
  height:auto !important;min-height:100vh !important;min-height:100dvh !important;
  overflow:visible !important;
}
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;
  min-height:100vh !important;min-height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active .content-area{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
body.v3-onb-active #view-onb-v3{
  /* The original .view CSS already sets position:absolute, inset:0,
     overflow-y:auto, so we just need to make sure nothing fights it. */
  height:auto !important;
  overflow-y:auto !important;
}
/* Step 3: the v3-onb fits content inside the scrollable view. The .view
   absolute box clips beyond viewport, so no overflow on body. */
body[data-v3-step="3"] #view-onb-v3 .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* ============================================================
   FULL RESET — wipe all the v3-onb-active scroll/height overrides.
   Restore default: .view-host{overflow:hidden} + .view scrolls
   inside. No special v3 layout overrides. Page natural.
   ============================================================ */
body.v3-onb-active,
body.v3-onb-active *{
  /* don't touch */
}
body.v3-onb-active{
  height:100% !important;overflow:hidden !important;
  background:#fdfaf2;
}
html:has(body.v3-onb-active){overflow:hidden}
body.v3-onb-active .app-shell{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
body.v3-onb-active .content-area{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
body.v3-onb-active .view-host{
  height:100vh !important;height:100dvh !important;min-height:0 !important;
  overflow:hidden;
}
/* The .view itself is the scroll container (overflow-y:auto by default).
   Don't override its position:absolute or overflow rules. */
body.v3-onb-active #view-onb-v3{
  /* inherit default .view styling — explicit min-height/height:auto so
     v3-onb fits content. */
  height:100% !important;
  min-height:0 !important;
}
body.v3-onb-active[data-v3-step="3"] .v3-onb{
  min-height:0 !important;height:auto !important;
}

/* html + body need explicit 100vh, not %, since % needs ancestor with set height */
html, body{height:100%}
body.v3-onb-active{
  height:100vh !important;height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* ============================================================
   REMOVE all CSS-driven scroll-lock attempts (broke step 1/2
   clicks). JS now toggles inline body+html overflow on step 3.
   ============================================================ */
body.v3-onb-active,
body.v3-onb-active .app-shell,
body.v3-onb-active .content-area,
body.v3-onb-active .view-host,
body.v3-onb-active #view-onb-v3{
  height:auto !important;min-height:auto !important;
  overflow:visible !important;
}
body[data-v3-step="3"],
body[data-v3-step="3"] .app-shell,
body[data-v3-step="3"] .content-area,
body[data-v3-step="3"] .view-host,
body[data-v3-step="3"] #view-onb-v3{
  height:auto !important;min-height:auto !important;
  overflow:visible !important;max-height:none !important;
}
/* Restore view-host's natural overflow:hidden (was set in original CSS) */
.view-host{overflow:hidden}
.view{overflow-y:auto;overflow-x:hidden}
body.v3-onb-active::after{content:none !important;display:none !important}

/* ============================================================
   App-shell + content-area + view-host need 100vh to give the
   .view content room. My earlier min-height:auto collapsed them
   to 0. Restore explicit 100vh.
   ============================================================ */
.app-shell{min-height:100vh;min-height:100dvh}
body.v3-onb-active .app-shell,
body[data-v3-step='1'] .app-shell,
body[data-v3-step='2'] .app-shell,
body[data-v3-step='3'] .app-shell{
  min-height:100vh !important;min-height:100dvh !important;
  height:100vh !important;height:100dvh !important;
}
body.v3-onb-active .content-area,
body[data-v3-step='1'] .content-area,
body[data-v3-step='2'] .content-area,
body[data-v3-step='3'] .content-area{
  height:100vh !important;height:100dvh !important;
}
body.v3-onb-active .view-host,
body[data-v3-step='1'] .view-host,
body[data-v3-step='2'] .view-host,
body[data-v3-step='3'] .view-host{
  height:100vh !important;height:100dvh !important;
  overflow:hidden !important;
}
/* view itself is the scroll container (default .view styling) */
body.v3-onb-active #view-onb-v3{
  position:absolute !important;inset:0 !important;
  overflow-y:auto !important;overflow-x:hidden !important;
  height:auto !important;
}

/* Force 100vh (not 100dvh) since dvh resolves oddly in some headless
   browser contexts. Last word; should win. */
.app-shell{min-height:100vh}
body.v3-onb-active .app-shell,
body[data-v3-step='1'] .app-shell,
body[data-v3-step='2'] .app-shell,
body[data-v3-step='3'] .app-shell{
  min-height:100vh !important;height:100vh !important;
}
body.v3-onb-active .content-area,
body[data-v3-step='1'] .content-area,
body[data-v3-step='2'] .content-area,
body[data-v3-step='3'] .content-area{height:100vh !important}
body.v3-onb-active .view-host,
body[data-v3-step='1'] .view-host,
body[data-v3-step='2'] .view-host,
body[data-v3-step='3'] .view-host{height:100vh !important;overflow:hidden !important}

/* Higher-specificity rule with id-based selector to force win over
   all earlier !important min-height:auto rules. */
html body.v3-onb-active div.app-shell{
  min-height:100vh !important;height:100vh !important;
  display:flex !important;
}
html body.v3-onb-active div.app-shell main.content-area{
  height:100vh !important;
  flex:1 !important;
}
html body.v3-onb-active div.app-shell main.content-area .view-host{
  height:100vh !important;
  overflow:hidden !important;
}

/* Critical: body itself must be 100vh so children can fill. The latest
   rule matching `body.v3-onb-active` had height:auto which was making
   body collapse to 0. This rule MUST come last. */
body.v3-onb-active{
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

/* === MARKER-2026-FINAL === unique rule to verify css freshness */
body.v3-onb-active .app-shell{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
}
body.v3-onb-active .content-area{
  height:100vh !important;
  flex:1 !important;
}
body.v3-onb-active .view-host{
  height:100vh !important;
  overflow:hidden !important;
}

/* ============================================================
   V3 desktop responsiveness — centered phone-frame on ≥900px.
   The design is mobile-first (matches the v2-ref iPhone shots);
   on desktop we center it as a 440px-wide phone frame with a
   soft cream gradient behind (no harsh black).
   ============================================================ */

@media (min-width:900px){
  /* Body bg for desktop = soft cream gradient (matches the cream-copper
     palette). Replaces the previous near-black canvas. */
  body.v3-onb-active{
    background:
      radial-gradient(ellipse 60% 80% at 50% 0%,
        rgba(241,234,215,1) 0%,
        rgba(232,220,196,1) 45%,
        rgba(212,192,156,1) 100%) !important;
  }
  #view-splash.view.active{
    background:
      radial-gradient(ellipse 60% 80% at 50% 0%,
        rgba(241,234,215,1) 0%,
        rgba(232,220,196,1) 45%,
        rgba(212,192,156,1) 100%) !important;
  }

  /* Centered phone-frame container for splash + onb-v3 + dream-life +
     chat. 440px wide, full viewport height, with rounded corners +
     subtle drop shadow so it reads as a device. */
  #view-splash > .v3-splash,
  #view-onb-v3 > .v3-onb,
  #view-dream-life > .v3-dream,
  #view-chat > .v3-chat{
    max-width:440px !important;
    width:100% !important;
    height:100vh !important;height:100dvh !important;
    max-height:900px !important;
    margin:max(0px,calc((100vh - 900px) / 2)) auto !important;
    border-radius:42px !important;
    overflow:hidden !important;
    box-shadow:
      0 30px 80px rgba(60,40,20,.32),
      0 8px 24px rgba(60,40,20,.18),
      0 0 0 1px rgba(168,117,85,.08) !important;
    position:relative !important;
  }

  /* Splash photo bg — clip to the frame radius */
  #view-splash > .v3-splash{
    background:#fdfaf2;
  }

  /* Onb-v3 frame keeps photo/forms inside the rounded device shape */
  #view-onb-v3 > .v3-onb{
    background:#fdfaf2;
  }

  /* Dream-life frame */
  #view-dream-life > .v3-dream{
    background:#fdfaf2;
  }

  /* Chat frame */
  #view-chat > .v3-chat{
    background:#fdfaf2;
  }

  /* Make sure the absolute-positioned bg images stay clipped inside
     the frame (radius is on the frame, not on .v3-*-bg). */
  #view-splash > .v3-splash .v3-splash-bg,
  #view-onb-v3 > .v3-onb .v3-onb-bg,
  #view-chat > .v3-chat .v3-chat-hero{
    border-radius:inherit;
  }

  /* The .view itself stops being a scroll container at desktop —
     the phone-frame is the visual viewport. Body cream extends
     around it. */
  body.v3-onb-active #view-onb-v3,
  body #view-splash,
  body #view-dream-life,
  body #view-chat{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
  }

  /* Splash chip pill stays compact inside the frame */
  #view-splash > .v3-splash .v3-splash-chips{
    max-width:none;
    margin-left:0;margin-right:0;
    justify-content:space-around;
    font-size:11px;
  }

  /* Onb step 1 — keep the photo banner + form scroll BEHAVIOR
     within the framed area. JS scroll-lock for step 3 still
     applies inside the frame. */
  body[data-v3-step='3'] #view-onb-v3 > .v3-onb{
    height:100vh !important;max-height:900px !important;
  }
}

/* Very wide desktop — keep frame shape, just more breathing room */
@media (min-width:1400px){
  #view-splash > .v3-splash,
  #view-onb-v3 > .v3-onb,
  #view-dream-life > .v3-dream,
  #view-chat > .v3-chat{
    max-width:460px !important;
  }
}

/* ============================================================
   V3 desktop frame — keep MOBILE typography inside the 440px
   centered phone-frame on ≥900px. Earlier @media bumped fonts
   to desktop sizes which overflow the 440px frame. Pin them
   back to mobile sizes.
   ============================================================ */
@media (min-width:900px){
  /* Splash — restore mobile-scaled type inside the frame */
  #view-splash > .v3-splash .v3-splash-brand h1{
    font-size:18px !important;line-height:1.05 !important;
  }
  #view-splash > .v3-splash .v3-splash-brand .sub{font-size:8.5px !important}
  #view-splash > .v3-splash .v3-splash-headline{
    font-size:26px !important;line-height:1.02 !important;
  }
  #view-splash > .v3-splash .v3-splash-sub{
    font-size:15px !important;letter-spacing:.04em !important;
  }
  #view-splash > .v3-splash .v3-splash-tag{
    font-size:13.5px !important;line-height:1.4 !important;
    max-width:none !important;
  }
  #view-splash > .v3-splash .v3-splash-cta{
    max-width:none !important;
    padding:16px 22px !important;
    font-size:13px !important;letter-spacing:.16em !important;
  }
  #view-splash > .v3-splash .v3-splash-hero{
    padding:0 22px 14px !important;max-width:none !important;
  }
  #view-splash > .v3-splash .v3-splash-chips{
    max-width:none !important;font-size:11px !important;
    padding:11px 12px !important;gap:6px !important;
    justify-content:space-between !important;
  }
  #view-splash > .v3-splash .v3-splash-chips .ch{font-size:10.5px !important;gap:4px !important}
  #view-splash > .v3-splash .v3-splash-chips .ch svg{width:12px !important;height:12px !important}
  #view-splash > .v3-splash .v3-splash-foot{
    padding:10px 22px 16px !important;justify-content:center !important;
    font-size:11px !important;
  }
  #view-splash > .v3-splash .v3-splash-top{padding:14px 22px 0 !important}

  /* Onb-v3 inside frame — keep mobile spacing */
  #view-onb-v3 > .v3-onb .v3-onb-hero h1{font-size:24px !important;line-height:1.05 !important}
  #view-onb-v3 > .v3-onb .v3-onb-hero p{font-size:14px !important}
  #view-onb-v3 > .v3-onb .v3-onb-card{padding:18px 18px 16px !important}
  #view-onb-v3 > .v3-onb .v3-onb-next{padding:16px 22px !important;font-size:13px !important;letter-spacing:.16em !important}

  /* Chat inside frame */
  #view-chat > .v3-chat .v3-chat-name{font-size:17px !important}
  #view-chat > .v3-chat .v3-chat-dream{font-size:11px !important;padding:7px 11px !important}

  /* Dream Life inside frame */
  #view-dream-life > .v3-dream .v3-dream-hero h1{font-size:28px !important;line-height:1.1 !important}
  #view-dream-life > .v3-dream .v3-dream-card .body h3{font-size:18px !important}

  /* All view buttons — ensure they don't break out of the frame */
  #view-splash > .v3-splash,
  #view-onb-v3 > .v3-onb,
  #view-dream-life > .v3-dream,
  #view-chat > .v3-chat{
    overflow:hidden !important;
  }
  #view-splash > .v3-splash *,
  #view-onb-v3 > .v3-onb *{
    max-width:100%;
    box-sizing:border-box;
  }

  /* Photo bg sized to frame width */
  #view-splash > .v3-splash .v3-splash-bg{
    background-size:cover !important;
    background-position:center !important;
  }
}

/* ============================================================
   V3 chat — push the empty-state opener + starter chips to the
   BOTTOM of the chat area so they don't cover the companion's
   face. The pin-to-bottom is now done via `margin-top:auto` on
   the first child (see .v3-chat-body rule above) so history
   scroll-up actually works in Chromium — flex-end+overflow:auto
   silently collapses scrollHeight to clientHeight.
   ============================================================ */
.v3-chat-body{
  padding-bottom:14px !important;
}
.v3-chat-body .chat-empty-wrap{
  margin-top:auto !important;
  margin-bottom:0 !important;
  padding:14px 16px 0 !important;
  text-align:left !important;
  width:100%;
}
.v3-chat-body .chat-starters{
  justify-content:flex-start !important;
  margin-top:10px !important;
}
.v3-chat-body .chat-empty-wrap .msg.her{
  align-self:flex-start !important;
  max-width:84% !important;
}

/* ============================================================
   V3 chat — split layout: hero photo TOP half, chat body BOTTOM
   half (scrollable). Long replies scroll within the bottom area
   so the companion's face is never covered.
   ============================================================ */
.v3-chat-stage{
  display:flex !important;
  flex-direction:column !important;
}
/* Hero (photo) — fills the upper half + does NOT scroll */
.v3-chat-hero{
  position:relative !important;
  inset:auto !important;
  flex:0 0 50% !important;
  width:100%;
  min-height:50%;
  z-index:1;
}
.v3-chat-hero::after{
  /* keep the soft cream fade at bottom of photo so the top of the
     chat body blends into the photo */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,215,0) 0%,
    rgba(241,234,215,0) 65%,
    rgba(241,234,215,.55) 85%,
    rgba(241,234,215,.92) 100%);
  pointer-events:none;
}
/* Body — fills the lower half + scrolls internally */
.v3-chat-body{
  position:relative !important;
  inset:auto !important;
  flex:1 1 50% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px 14px 14px !important;
  background:transparent !important;
  z-index:2;
}
.v3-chat-body::-webkit-scrollbar{width:5px}
.v3-chat-body::-webkit-scrollbar-thumb{background:rgba(168,117,85,.30);border-radius:3px}

/* On desktop framed view: same split inside the phone-frame */
@media (min-width:900px){
  #view-chat > .v3-chat .v3-chat-stage{height:auto !important;flex:1 1 auto !important}
}

/* Chat hero needs explicit pixel/vh height — flex-basis:50% needs the
   flex parent to have defined height, otherwise it collapses to 0.
   Use vh-based height + background-image inherited from JS. */
.v3-chat-stage{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
}
.v3-chat-hero{
  position:relative !important;
  flex:0 0 auto !important;
  height:50vh !important;height:50dvh !important;
  width:100% !important;
  background-size:cover !important;
  background-position:center 20% !important;
  background-repeat:no-repeat !important;
}
.v3-chat-body{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px 14px !important;
  background:#fdfaf2 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
/* desktop frame: hero is 50% of frame height */
@media (min-width:900px){
  #view-chat > .v3-chat .v3-chat-hero{
    height:46% !important;
    min-height:0 !important;
  }
}

/* ============================================================
   V3 chat — LOCK page = viewport. Only .v3-chat-body scrolls.
   Structure:
     .v3-chat (100vh, flex column)
       ├── .v3-chat-head (auto height)
       ├── .v3-chat-stage (flex:1, the rest)
       │     ├── .v3-chat-hero (50% of stage, no scroll)
       │     └── .v3-chat-body (flex:1, overflow-y:auto)
       └── .v3-chat-input (auto height)
   ============================================================ */
#view-chat{
  position:absolute !important;inset:0 !important;
  overflow:hidden !important;
}
.v3-chat{
  height:100vh !important;height:100dvh !important;
  max-height:100vh !important;max-height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.v3-chat-head{flex:0 0 auto !important}
.v3-chat-stage{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.v3-chat-hero{
  flex:0 0 50% !important;
  height:auto !important;
  min-height:0 !important;
  width:100% !important;
}
.v3-chat-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.v3-chat-input{flex:0 0 auto !important}

/* Desktop framed chat — same locked behavior inside the frame */
@media (min-width:900px){
  #view-chat > .v3-chat{
    height:100vh !important;
    max-height:900px !important;
  }
  #view-chat > .v3-chat .v3-chat-hero{flex:0 0 46% !important}
}

/* ============================================================
   V3 chat body — disable child shrinking. With display:flex on
   body + content >> container, flex children were shrinking to
   fit (msgs compressed to ~12px each), making scrollHeight ==
   clientHeight (no scrollbar). Force msgs to stay full size so
   the body actually overflows + scrolls.
   ============================================================ */
.v3-chat-body{
  display:block !important;
  padding:14px 14px !important;
  gap:0 !important;
}
.v3-chat-body > *{
  flex-shrink:0 !important;
  margin-bottom:8px !important;
}
/* Restore the pin-to-bottom for the EMPTY state. We use the same
   margin-top:auto on the first child pattern as the populated state
   so we never re-introduce the Chromium flex-end+scroll bug. */
.v3-chat-body.empty{
  display:flex !important;
  flex-direction:column !important;
}
.v3-chat-body.empty > *:first-child{margin-top:auto}

/* ============================================================
   V3 chat — header icon buttons (phone + SOS) restored alongside
   the Dream Life pill. Both buttons share the same minimal pill
   shape so they read as a row of actions.
   ============================================================ */
.v3-chat-iconbtn{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1px solid rgba(168,117,85,.22);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1612;
  box-shadow:0 2px 8px rgba(60,40,20,.08);
  flex-shrink:0;
  transition:filter .15s,box-shadow .15s,background .15s,border-color .15s;
}
.v3-chat-iconbtn:hover{background:#fdfaf2;border-color:#a87555}
.v3-chat-iconbtn:active{transform:scale(.94)}
.v3-chat-iconbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none}
.v3-chat-iconbtn#sosBtn{color:#a23a2a;border-color:rgba(162,58,42,.30)}
.v3-chat-iconbtn#sosBtn:hover{background:#fff5f3;border-color:#a23a2a}
.v3-chat-iconbtn#micBtn{color:#a87555}
.v3-chat-iconbtn#micBtn:hover{color:#7c4a2c}
/* Tighten the acts row so 3 controls fit cleanly on mobile */
.v3-chat-acts{gap:6px !important}
.v3-chat-dream{padding:8px 11px !important;font-size:11.5px !important}
.v3-chat-dream svg{width:13px !important;height:13px !important}

/* ============================================================
   V3 chat bubbles — must be width:fit-content (only as wide as
   text), right-aligned for me, left-aligned for her. The earlier
   display:block + flex-shrink:0 fix made bubbles stretch full
   row. Restore flex column but with flex-shrink:0 on children +
   width-auto so bubbles wrap to their content.
   ============================================================ */
.v3-chat-body{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
}
.v3-chat-body > *{
  flex-shrink:0 !important;
  margin:0 !important;
  width:auto !important;
  max-width:84% !important;
}
.v3-chat-body .msg.me{
  align-self:flex-end !important;
  margin-left:auto !important;
}
.v3-chat-body .msg.her{
  align-self:flex-start !important;
  margin-right:auto !important;
}
.v3-chat-body .day-divider{
  align-self:center !important;
  margin:6px auto !important;
}
.v3-chat-body .msg-feedback{
  align-self:flex-start !important;
}
/* Wrapping div around her message + feedback (created by makeMessage).
   Exclude .chat-followups — its own rule sets a fixed-width copper card and
   this high-specificity selector would otherwise force it to shrink-to-fit. */
.v3-chat-body > div:not(.msg):not(.day-divider):not(.typing):not(.chat-empty-wrap):not(.chat-followups){
  width:auto !important;max-width:84% !important;
  align-self:flex-start !important;
}

/* ============================================================
   BOB brand rename — splash wordmark is now a single bold "BOB"
   instead of a two-line "MY BETTER HALF AI". Scale it up to read
   as the brand.
   ============================================================ */
.v3-splash-brand h1{
  font-size:28px !important;
  letter-spacing:.05em !important;
  font-weight:700 !important;
}
.v3-splash-brand .sub{
  font-size:10px !important;
  letter-spacing:.20em !important;
  margin-top:2px !important;
  font-weight:500 !important;
}
.v3-splash-brand .line{margin-top:6px;width:36px;height:2px}

/* Sidebar brand mark — bigger so the cream-on-cream copper "B"
   icon reads properly, brand-name uses serif. */
.sidebar .brand-mark{
  width:42px !important;height:42px !important;
  border-radius:10px !important;object-fit:contain !important;
  background:#fdfaf2 !important;
  outline:1px solid rgba(168,117,85,.18) !important;
  box-shadow:0 2px 8px rgba(60,40,20,.10) !important;
}
.sidebar .brand-name{
  font-family:'Fraunces',serif !important;
  font-weight:700 !important;font-size:18px !important;
  letter-spacing:.04em !important;
  font-style:normal !important;
  color:#3c2516 !important;
  text-shadow:none !important;
}

/* Login wordmark — BOB big, Better Half AI smaller */

/* ============================================================
   Login page — V3 cream+copper theme overhaul.
   Was olive-green floral; now uses the splash hero couple photo +
   warm cream gradient + copper BOB wordmark + copper italic
   "welcome back." matching the rest of the app.
   ============================================================ */

/* ============================================================
   Login mobile (<900px) — V3 redesign: photo banner at top
   showing the splash hero + BOB branding overlay, frosted form
   card slides up below over the photo. Matches splash + onb step
   1 visual rhythm. The full-screen empty card on cream is gone.
   ============================================================ */
@media (max-width:899px){
  #view-login{
    background:#fdfaf2 !important;
    overflow-y:auto !important;
  }
  
  /* Show the aside as a photo banner at top instead of hiding it */

  

  /* Brand lockup: BOB top-left over the photo */

  

  

  /* "welcome back." headline sitting at the bottom of the banner */

  

  /* Form card slides up over the photo */

  /* Back button minimal floating top-left of the photo */

  

  

  

  

  
}

/* Mobile login fixes: prevent card from clipping "hi," + space the
   "welcome back." banner text higher so the form card doesn't cover it. */

/* Mobile login final: back button into the photo banner, hi/again
   centered in the card (not under back button). */

/* ============================================================
   Onb step 1 NEXT — smaller, less dominant pill.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-next,
#view-onb-v3 #onbV3Stage .v3-onb-next{
  padding:12px 18px !important;
  font-size:12px !important;letter-spacing:.16em !important;
  max-width:280px !important;
  margin-left:auto !important;margin-right:auto !important;
  margin-top:14px !important;
}
#view-onb-v3 #onbV3Stage .v3-onb-next svg{width:15px !important;height:15px !important}

/* ============================================================
   Onb-v3 fullscreen — kill the dark band at the bottom of step 1
   by making both the view and the v3-onb container use cream bg,
   and forcing v3-onb to fill the view fully.
   ============================================================ */
#view-onb-v3.view{background:#fdfaf2 !important}
#view-onb-v3 > .v3-onb{
  background:#fdfaf2 !important;
  min-height:100% !important;
}
body.v3-onb-active{background:#fdfaf2 !important}

/* Even smaller NEXT button on step 1 */
#view-onb-v3 #onbV3Stage .v3-onb-next{
  padding:10px 14px !important;
  font-size:11px !important;letter-spacing:.14em !important;
  max-width:200px !important;
  margin-top:10px !important;margin-bottom:6px !important;
}
#view-onb-v3 #onbV3Stage .v3-onb-next svg{width:13px !important;height:13px !important}

/* ============================================================
   Step 3 NEXT button — center horizontally + match step 1 small
   pill size. Earlier scoped rule was zeroing the left/right
   margins which left-aligned the button.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next,
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-card > .v3-onb-next{
  display:flex !important;
  margin:14px auto 16px !important;
  padding:10px 14px !important;
  font-size:11px !important;letter-spacing:.14em !important;
  max-width:200px !important;
}
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-next svg{
  width:13px !important;height:13px !important;
}

/* ============================================================
   Real-phone responsiveness — iOS Safari + small Android.
   Fixes:
   1. Use 100dvh wherever we had 100vh so the URL bar doesn't
      eat the layout.
   2. Add env(safe-area-inset-bottom) padding on bottom-anchored
      elements (chat input, splash CTA area, NEXT pills).
   3. -webkit-overflow-scrolling:touch on every scrolling
      container so iOS momentum-scrolls properly.
   4. Compact spacing at small heights (≤700px) so the form
      fits one viewport on iPhone SE.
   ============================================================ */

/* 1) dvh fallbacks where we hard-locked 100vh — the body lock
   in JS uses inline 100vh; CSS dvh fallback gives us elasticity. */
@supports (height: 100dvh){
  body{min-height:100dvh}
  .v3-onb,.v3-splash,.v3-chat,.v3-dream{min-height:100dvh}
}

/* 2) safe-area padding on bottom-anchored elements */
.v3-chat-input{padding-bottom:max(14px, env(safe-area-inset-bottom)) !important}
.v3-splash-foot{padding-bottom:max(16px, env(safe-area-inset-bottom)) !important}
.v3-onb-card,.v3-onb-account-block{padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}
.v3-dream-foot{padding-bottom:max(18px, env(safe-area-inset-bottom)) !important}

/* 3) iOS momentum scroll on every scrollable area */
.view,
.v3-chat-body,
#view-onb-v3,
#view-login,
#view-splash,
#view-dream-life,
#view-chat{
  -webkit-overflow-scrolling:touch;
}

/* 4) Compact spacing on short viewports (iPhone SE landscape, small
   Android phones). Trims paddings + font sizes so the whole form
   fits in 667px without scrolling. */
@media (max-height:720px){
  .v3-onb-hero{padding:14px 22px 8px !important}
  .v3-onb-hero h1{font-size:22px !important}
  .v3-onb-hero p{font-size:12px !important;margin-top:6px !important}
  .v3-onb-card{padding:14px 18px 12px !important}
  .v3-onb-section{margin-bottom:10px !important}
  .v3-onb-type{padding:12px 6px 10px !important}
  .v3-onb-type .ico{width:22px;height:22px}
  .v3-onb-type .ico svg{width:20px;height:20px}
  .v3-onb-type .lbl{font-size:12px}
  .v3-onb-gender{padding:10px !important;font-size:13px !important}
  .v3-onb-input{padding:11px 14px 11px 38px !important;font-size:13.5px !important}
  .v3-onb-input-row .ico svg{width:16px;height:16px}
  .v3-onb-next{padding:9px 14px !important;margin-top:8px !important}

  /* Splash trim */
  .v3-splash-headline{font-size:22px !important}
  .v3-splash-sub{font-size:13px !important;margin-top:6px !important}
  .v3-splash-tag{font-size:12.5px !important;margin-top:6px !important}
  .v3-splash-cta{padding:13px 18px !important;margin-top:12px !important}
  .v3-splash-chips{margin-top:8px !important;padding:9px 12px !important;font-size:10.5px !important}
  .v3-splash-foot{padding-top:6px !important}

  /* Login mobile trim */
  
}

/* More aggressive compact at short heights — form must fit
   <= 740px viewport without scroll. */
@media (max-height:760px){
  .v3-onb-bg.is-step1{height:35vh !important;max-height:240px !important}
  .v3-onb-hero{padding:8px 22px 4px !important}
  .v3-onb-hero h1{font-size:20px !important;line-height:1.05 !important}
  .v3-onb-hero p{font-size:11.5px !important;margin-top:4px !important;max-width:none !important}
  .v3-onb-card{padding:12px 16px 8px !important;border-top-left-radius:22px;border-top-right-radius:22px}
  .v3-onb-section{margin-bottom:8px !important}
  .v3-onb-label{font-size:12.5px !important;margin-bottom:6px !important}
  .v3-onb-types{gap:6px !important}
  .v3-onb-type{padding:9px 4px 7px !important}
  .v3-onb-type .ico{width:18px;height:18px}
  .v3-onb-type .ico svg{width:17px;height:17px}
  .v3-onb-type .lbl{font-size:11.5px}
  .v3-onb-genders{gap:6px !important}
  .v3-onb-gender{padding:8px !important;font-size:12.5px !important}
  .v3-onb-gender svg{width:15px;height:15px}
  .v3-onb-input{padding:9px 12px 9px 34px !important;font-size:13px !important}
  .v3-onb-input-row .ico{left:12px}
  .v3-onb-input-row .ico svg{width:14px;height:14px}
  .v3-onb-next{padding:8px 14px !important;font-size:10.5px !important;margin-top:6px !important}
  .v3-onb-next svg{width:12px;height:12px}
}

/* Login mobile — aggressive compact at short heights. Form must fit
   the viewport on iPhone SE + small Android. */

/* ============================================================
   iPhone SE / small-screen final fix for 3 views that hid the
   action button (step 2 presence picker, step 3 birth, dream-life).
   ============================================================ */

/* Step 2 — presence picker compact: smaller grid tiles + tighter
   pager + reduced spacing so NEXT fits viewport. */
@media (max-height:760px){
  .v3-onb-presence{padding-top:36px !important}
  .v3-onb-presence h1{font-size:18px !important;line-height:1.1 !important}
  .v3-onb-presence p{font-size:11.5px !important;margin-top:4px !important}
  .v3-presence-pager{margin-top:10px !important}
  .v3-presence-pager .v3-onb-grid{
    gap:6px !important;
    min-height:0 !important;
  }
  .v3-onb-portrait{border-radius:10px !important}
  .v3-presence-nav{padding:8px 14px 2px !important;gap:10px !important}
  .v3-presence-arrow{width:32px;height:32px}
  .v3-presence-arrow svg{width:14px;height:14px}
  .v3-page-dot{width:6px;height:6px}
  .v3-page-dot.on{width:18px}
  .v3-onb-presence-foot{margin-top:2px !important;font-size:10.5px !important}
  .v3-onb-presence + div .v3-onb-next,
  .v3-onb-presence .v3-onb-next{margin:8px 18px 14px !important}
}

/* Dream-life — make the view scrollable internally so user can
   reach the CTA + footer even on iPhone SE. The scroll-lock made
   the view height:100% but didn't enable overflow-y. */
#view-dream-life{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
body[data-v3-step] #view-dream-life,
body.v3-onb-active #view-dream-life{
  /* override any inline lock so user can scroll past viewport */
  overflow-y:auto !important;
}
.v3-dream{
  min-height:100% !important;
  padding-bottom:env(safe-area-inset-bottom,16px) !important;
}
@media (max-height:760px){
  .v3-dream-hero{padding:8px 22px 10px !important}
  .v3-dream-hero h1{font-size:22px !important;line-height:1.1 !important}
  .v3-dream-cards{gap:8px !important;padding:0 14px !important}
  .v3-dream-card{aspect-ratio:5/2.1 !important}
  .v3-dream-card .body h3{font-size:15px !important}
  .v3-dream-card .body p{font-size:10.5px !important;margin-top:3px !important}
  .v3-dream-toggle{margin:10px 14px 0 !important;padding:10px 14px !important;font-size:11.5px !important}
  .v3-dream-cta{margin:10px 14px 0 !important;padding:14px !important;font-size:13px !important}
  .v3-dream-foot{padding:10px 22px 14px !important;font-size:11px !important}
}

/* Step 3 — already scrolls inside view, but ensure the inner stage
   has bottom padding so the NEXT button + footer aren't hugging the
   safe-area edge on phones with home indicator. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-bottom:max(20px, env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   Splash "Sign in" link — for returning users who couldn't
   find the small account icon top-right.
   ============================================================ */
.v3-splash-signin{
  margin-top:10px;text-align:center;
  font-size:13px;color:rgba(26,22,18,.72);
}
.v3-splash-signin a{
  color:#a87555;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(168,117,85,.35);padding-bottom:1px;
}
.v3-splash-signin a:hover{color:#7c4a2c;border-bottom-color:#7c4a2c}

/* ============================================================
   ISSUE #3 — Tabbar visible on chat + dream-life
   Reserve space at the bottom of these fullscreen V3 views so
   the .tabbar (fixed, var(--tabbar-h)) doesn't overlap content.
   ============================================================ */
.v3-chat-input{
  margin-bottom:calc(var(--tabbar-h, 76px) + env(safe-area-inset-bottom)) !important;
}
.v3-dream{
  padding-bottom:calc(16px + var(--tabbar-h, 76px) + env(safe-area-inset-bottom)) !important;
}
/* Desktop has the sidebar instead of a tabbar (sidebar is in-flow);
   strip the bottom offset so we don't end up with a huge gap. */
@media (min-width:900px){
  .v3-chat-input{margin-bottom:0 !important}
  .v3-dream{padding-bottom:14px !important}
}

/* ============================================================
   ISSUE #5 — Width fit (no horizontal overflow under 480px)
   ============================================================ */
html,body{overflow-x:hidden !important;max-width:100vw}
#view-splash.view,#view-login.view,#view-onb-v3.view,#view-chat.view,#view-dream-life.view{
  overflow-x:hidden !important;max-width:100vw;
}
.v3-onb-card,.v3-onb-hero,.v3-splash-hero,.v3-dream-hero,.v3-chat-hero{
  box-sizing:border-box !important;max-width:100% !important;
}
.v3-onb-phone-row{flex-wrap:wrap !important;gap:8px !important}
.v3-onb-input-row{min-width:0 !important}
@media (max-width:480px){
  .v3-onb-grid{gap:8px !important}
  .v3-splash-chips{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .v3-splash-chips .sep{display:none}
}

/* ============================================================
   ISSUE #8 — Splash "Sign in" upgraded to outlined pill button so
   returning users see it as a clear, tappable secondary action.
   ============================================================ */
.v3-splash-signin{
  margin-top:14px !important;text-align:center;
  font-size:13.5px;color:rgba(26,22,18,.78);
}
.v3-splash-signin a{
  display:inline-block;margin-left:6px;
  color:#a87555 !important;font-weight:600;text-decoration:none;
  padding:8px 18px;border:1.5px solid rgba(168,117,85,.55);
  border-radius:999px;background:rgba(255,255,255,.55);
  transition:background .2s,border-color .2s,color .2s;
}
.v3-splash-signin a:hover{
  background:#fff;border-color:#7c4a2c;color:#7c4a2c !important;
}
@media (max-width:480px){
  .v3-splash-signin{font-size:12.5px;margin-top:10px}
  .v3-splash-signin a{padding:7px 14px;font-size:12.5px}
}

/* ============================================================
   ISSUE #4 — Country code as a real <select> over the existing
   v3-onb-cc chip. The native select is invisible (opacity:0) and
   sits on top of the chip so the chip's visual style stays intact
   while the native picker drives behaviour.
   ============================================================ */
.v3-onb-cc{
  position:relative;display:flex;align-items:center;gap:6px;
  cursor:pointer;user-select:none;flex-shrink:0;
}
.v3-onb-cc .flag{font-size:18px;line-height:1}
.v3-onb-cc .dial{
  font-size:13px;font-weight:600;color:#5b3e2a;letter-spacing:.02em;
}
.v3-onb-cc-select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
  font-size:16px;  /* iOS: prevent zoom on focus */
  border:0;background:transparent;color:transparent;
  appearance:none;-webkit-appearance:none;
}
.v3-onb-cc-select option{
  color:#1a1612;background:#fff;font-size:14px;padding:8px;
}

/* ============================================================
   ISSUE #7 — Coming Soon overlay for Dream Life / Future Self
   ============================================================ */
#view-dream-life.coming-soon-active .v3-dream-cards{
  opacity:.45;pointer-events:none;filter:saturate(.7);
}
#view-dream-life.coming-soon-active .v3-dream-toggle,
#view-dream-life.coming-soon-active .v3-dream-cta{
  opacity:.55;pointer-events:none;
}
.v3-dream-coming-soon{display:none}
#view-dream-life.coming-soon-active .v3-dream-coming-soon{
  display:flex;position:absolute;inset:0;z-index:30;
  align-items:center;justify-content:center;
  padding:24px;
  /* Lighter scrim so the user can still read the Dream Life cards
     behind — they're the visual preview of what's coming. */
  background:radial-gradient(ellipse at center,rgba(26,22,18,.25) 0%,rgba(26,22,18,.42) 70%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
/* Less aggressive dim on the cards themselves so the photos read
   through the scrim instead of going muddy. */
#view-dream-life.coming-soon-active .v3-dream-cards{
  opacity:.78 !important;
  filter:saturate(.92) !important;
}
.v3-dream-cs-card{
  width:100%;max-width:380px;
  background:linear-gradient(180deg,#fdfaf2 0%,#f2e8d6 100%);
  border:1px solid rgba(168,117,85,.30);
  border-radius:22px;padding:24px 22px 20px;
  box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);
  text-align:center;
}
.v3-dream-cs-badge{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.20em;color:#7c4a2c;
  background:rgba(168,117,85,.18);border:1px solid rgba(168,117,85,.35);
  padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.v3-dream-cs-title{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:28px;line-height:1.05;color:#1a1612;
  margin:0 0 8px;
}
.v3-dream-cs-title i{
  background:linear-gradient(180deg,#d8a78a 0%,#8b5e3c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-style:italic;
}
.v3-dream-cs-sub{
  font-size:13px;line-height:1.45;color:rgba(26,22,18,.72);
  margin:0 0 18px;
}
.v3-dream-cs-form{
  display:flex;flex-direction:column;gap:10px;
}
.v3-dream-cs-input{
  width:100%;box-sizing:border-box;
  padding:13px 16px;font-size:14.5px;
  background:#fff;border:1.5px solid rgba(168,117,85,.30);
  border-radius:12px;color:#1a1612;
  font-family:inherit;
}
.v3-dream-cs-input::placeholder{color:rgba(26,22,18,.40)}
.v3-dream-cs-input:focus{outline:none;border-color:#a87555}
.v3-dream-cs-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 16px;
  background:linear-gradient(180deg,#d8a78a 0%,#b8825c 100%);
  color:#fff;border:0;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:0 12px 22px rgba(168,117,85,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .15s,box-shadow .15s;
}
.v3-dream-cs-btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(168,117,85,.40),inset 0 1px 0 rgba(255,255,255,.28)}
.v3-dream-cs-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
@media (max-width:480px){
  .v3-dream-cs-card{padding:20px 18px 16px;border-radius:18px}
  .v3-dream-cs-title{font-size:24px}
  .v3-dream-cs-sub{font-size:12px;margin-bottom:14px}
}

/* ============================================================
   ISSUE #2 — Refine button on view-portrait + reference image
   upload widget on view-refine.
   ============================================================ */
.onb-portrait-refine{
  background:#fff;border:1.5px solid rgba(168,117,85,.45) !important;
  color:#a87555 !important;
}
.onb-portrait-refine:hover{background:#fbf6ec;border-color:#7c4a2c !important;color:#7c4a2c !important}

.refine-ref-wrap{
  position:relative;display:flex;align-items:center;gap:12px;
  margin:10px 0 4px;padding:10px 12px;
  background:#fbf5ea;border:1px dashed rgba(168,117,85,.50);
  border-radius:12px;min-height:54px;
}
.refine-ref-pick{
  display:inline-flex;align-items:center;gap:8px;flex:1;
  padding:8px 12px;background:transparent;border:0;
  color:#5b3e2a;font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;font-family:inherit;
}
.refine-ref-pick svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.refine-ref-pick .when-set{display:none}
.refine-ref-wrap.has-image .when-empty{display:none}
.refine-ref-wrap.has-image .when-set{display:inline}
.refine-ref-preview{
  display:none;width:48px;height:48px;
  border-radius:8px;object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.20);flex-shrink:0;
}
.refine-ref-wrap.has-image .refine-ref-preview{display:block}
.refine-ref-clear{
  display:none;width:26px;height:26px;border-radius:50%;
  background:rgba(168,117,85,.18);border:0;color:#7c4a2c;
  cursor:pointer;font-size:18px;line-height:1;font-family:inherit;
}
.refine-ref-wrap.has-image .refine-ref-clear{display:block}
.refine-ref-clear:hover{background:rgba(168,117,85,.30);color:#1a1612}

/* ============================================================
   Tiny-viewport (320–340px) final polish — chat header was the
   only spot left where Dream Life pill could overlap the
   companion name. Truncate the name + hide pill label below 360.
   ============================================================ */
.v3-chat-head .v3-chat-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:359px){
  /* Hide the "Dream Life" word; keep the sparkle icon as the affordance */
  .v3-chat-head [data-nav="dream-life"] span{display:none !important}
  .v3-chat-head [data-nav="dream-life"]{padding:6px 8px !important;min-width:0}
  
}

/* ============================================================
   DEEP AUDIT FIX 1 — Bottom-most content was being covered by
   the fixed bottom tabbar (z:30). Every authed APP view needs
   safe-area + tabbar-height padding at the bottom so its last
   button is always tappable. Applied at the .view scroll level
   so internal content reserves space.
   ============================================================ */
@media (max-width:899px){
  #view-home, #view-mood, #view-memory, #view-profile,
  #view-upgrade, #view-customize, #view-portrait, #view-refine{
    padding-bottom:calc(var(--tabbar-h, 76px) + env(safe-area-inset-bottom) + 16px) !important;
    box-sizing:border-box !important;
  }
}

/* DEEP AUDIT FIX 2 — Dream Life back button + Future Self card
   click-targets. The Coming Soon overlay was catching ALL clicks
   so the back button beneath it became unreachable. Make the
   backdrop visual-only (pointer-events:none) and only restore
   pointer events on the card itself, so back/tabbar/anything
   underneath stays clickable. */
.v3-dream-coming-soon{pointer-events:none !important}
.v3-dream-coming-soon .v3-dream-cs-card{pointer-events:auto !important}
/* Also lift the back button visually above the overlay so users
   immediately see they can leave the "preview" screen. */
.v3-dream-back{position:relative;z-index:35}

/* DEEP AUDIT FIX 3 — Memory cards were clipping their key:value
   text (overflow:hidden + fixed line-height). Let them grow + wrap. */
.memory-card{overflow:visible !important; height:auto !important}
.memory-card .k, .memory-card .v{
  white-space:normal !important;word-break:break-word !important;
  overflow:visible !important; text-overflow:clip !important;
}

/* DEEP AUDIT FIX 4 — Mood hero "how's your inner weather?" was
   wrapping but overflow:hidden was cutting the second line off. */
.mood-hero{overflow:visible !important; height:auto !important}
.mood-hero h2{
  white-space:normal !important; overflow:visible !important;
  text-overflow:clip !important; line-height:1.05;
}

/* DEEP AUDIT FIX 5 — view-dream-life on desktop: a 137px trapped
   scroll under .v3-dream was reported. Allow internal scroll so
   tall content (Coming Soon card on desktop) is still reachable. */
@media (min-width:900px){
  .v3-dream{overflow-y:auto; max-height:100vh}
}

/* ============================================================
   DEEP AUDIT FIX 1b — Padding-bottom inside a scroll container
   doesn't push the LAST element above a fixed bottom tabbar
   (the element scrolls to the bottom regardless of padding).
   Real fix: shrink the view's bottom inset by var(--tabbar-h)
   on mobile so the view container itself ends above the tabbar.
   Now any content (incl. customize chips, save buttons, menu
   rows) sits in an area that doesn't reach the tabbar.
   ============================================================ */
@media (max-width:899px){
  #view-home.view, #view-mood.view, #view-memory.view,
  #view-profile.view, #view-upgrade.view, #view-customize.view,
  #view-portrait.view, #view-refine.view{
    bottom:calc(var(--tabbar-h, 76px) + env(safe-area-inset-bottom)) !important;
  }
  /* No need for our earlier padding-bottom hack — strip it so the
     view doesn't double-up the offset (visible empty cream stripe). */
  #view-home, #view-mood, #view-memory, #view-profile,
  #view-upgrade, #view-customize, #view-portrait, #view-refine{
    padding-bottom:16px !important;
  }
}

/* ============================================================
   E2E FIX PASS — CSS support for the JS/HTML fixes above
   ============================================================ */

/* L1 — Onb step 1/2 NEXT shake + missing-field flash */
@keyframes v3-onb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.v3-onb-shake { animation: v3-onb-shake .35s ease; }
@keyframes v3-onb-missing-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,90,70,0); }
  30%, 70% { box-shadow: 0 0 0 3px rgba(220,90,70,.30); }
}
.v3-onb-missing {
  animation: v3-onb-missing-flash 1.2s ease;
  border-radius: 14px;
}

/* M1 / M26 — inline signup error row inside step 3 card */
.v3-onb-error {
  margin-top: 12px;
  padding: 11px 14px;
  background: rgba(220, 90, 70, .12);
  border: 1px solid rgba(220, 90, 70, .35);
  border-radius: 12px;
  color: #c14a3e;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* L17 — Mood hero card retheme from legacy dark olive to V3 cream/copper */
#view-mood .mood-hero {
  background: linear-gradient(180deg, #f9efdc 0%, #f1ddc0 100%) !important;
  color: #5b3e2a !important;
  border: 1px solid rgba(168, 117, 85, .22);
  box-shadow: 0 6px 18px rgba(168, 117, 85, .12);
}
#view-mood .mood-hero .k {
  color: rgba(91, 62, 42, .72) !important;
  letter-spacing: .18em;
}
#view-mood .mood-hero h2 {
  color: #1a1612 !important;
}
#view-mood .mood-hero h2 i {
  background: linear-gradient(180deg, #d8a78a 0%, #8b5e3c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* L12 — Login aside "welcome back" italic was illegible against the
   high-contrast couple photo. Reinforce the text-shadow scrim. */

/* L18 — SOS row label spacing (give the label and the trailing 'add' a
   real gap so "SOS emergency contactadd" no longer reads as one word) */
#sosContactRow .lbl {
  flex: 1;
  padding-right: 12px;
}

/* M14 — Splash CTA can briefly inherit pointer-events:none before the
   view picks up .active. Force-enable so the first tap always lands. */
.v3-splash-cta { pointer-events: auto !important; }

/* M13 — Make the dimmed Dream Life cards LOOK non-interactive (clear
   the hover lift + cursor:pointer when behind the Coming Soon overlay) */
#view-dream-life.coming-soon-active .v3-dream-card {
  cursor: default !important;
}
#view-dream-life.coming-soon-active .v3-dream-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   A11Y — extra-flow round
   ============================================================ */

/* L7 — Brand-consistent focus rings on V3 controls. */
*:focus-visible {
  outline: 2px solid var(--rose, #a6724b);
  outline-offset: 2px;
}
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--rose, #a6724b);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Skip the outline on the splash CTA which has its own ring */
.v3-splash-cta:focus-visible {
  outline-offset: 4px;
}

/* H17 — Bump helper-text colors that fell below 4.5:1 (the audit
   called out rgba(26,22,18,0.55) on cream). Keep 0.72+. */
.muted, .small.muted {
  color: rgba(26,22,18,0.78);
}
.v3-onb-label, .v3-onb-block-title, .v3-onb-block-sub {
  color: rgba(26,22,18,0.85);
}

/* C5 — Make menu-item rows + home tiles look + behave like buttons.
   role=button + tabindex=0 added via JS at boot; this just makes
   the focus ring sensible. */
.menu-item[tabindex], .tile[tabindex] {
  cursor: pointer;
}

/* ============================================================
   GLOBAL BACK BUTTON STANDARD — every view's "back" arrow uses
   the same size, position, and styling. Audit-driven (Image #68):
   previously back buttons ranged 34→40px and lived in 6 different
   positions across views.
   ============================================================ */

/* In-page topbar back (mood/memory/profile/upgrade/customize/portrait/
   refine + edit modal) — bring 40px boxes down to 36px + frosted */
.topbar .back{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  border:none !important;
  color:#1a1612 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.10) !important;
  display:flex;align-items:center;justify-content:center;
}
.topbar .back .i{width:18px;height:18px}

/* Mobile: pin the in-page back arrow to the VIEWPORT's top-left edge
   (14/14) so it sits at exactly the same screen coordinates as the V3
   fullscreen back arrows (chat / dream / onb-v3 / login / portrait).
   Without this it inherited the card's offset and padding and ended
   up at top:39 left:35. */
@media (max-width:899px){
  .card .topbar{position:static;min-height:24px}
  .card .topbar .back{
    position:fixed !important;
    top:14px !important;left:14px !important;
    z-index:40;
  }
  .card .topbar .title{padding:0 50px}
}

/* Chat header back — was 34px transparent. Match the standard. */
.v3-chat-back{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  border:none !important;color:#1a1612 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.10) !important;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.v3-chat-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* Dream-life back — already 36px, keep size, just ensure same styling. */
.v3-dream-back{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  border:none !important;color:#1a1612 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.10) !important;
  display:flex;align-items:center;justify-content:center;
}

/* Onb-v3 back — position:fixed doesn't work because the parent .view
   has `transform` (which establishes a containing block, breaking
   fixed-to-viewport). Use position:sticky so it sticks within the
   scrolling .v3-onb container. Negative margin-bottom so it doesn't
   shift the hero down. */
.v3-onb-back{
  position:sticky !important;
  top:14px !important;
  margin:14px 0 -50px 14px !important;
  align-self:flex-start;
  z-index:50 !important;
  width:36px !important;height:36px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 2px 12px rgba(0,0,0,.10) !important;
}

/* Portrait + refine back — were 40px, lived outside .topbar so the
   global rule didn't catch them. Style explicitly. */
.onb-portrait-head .back, .refine-head .back, #appPortraitBack, #appRefineBack{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  border:none !important;color:#1a1612 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.10) !important;
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:899px){
  #appPortraitBack, #appRefineBack{
    position:absolute !important;
    top:14px !important;left:14px !important;
    z-index:5;
  }
}

/* Login back — match the standard (top-LEFT, 36px, white frosted).
   Earlier we moved it to top-RIGHT to avoid the BOB wordmark, but the
   wordmark already has a text-shadow + we add a little extra padding-left
   so the brand stays readable beside the back button. */

/* ============================================================
   UNIFY DESKTOP GUEST LAYOUT — every guest-facing V3 view (splash,
   login, onb-v3) renders as a 440px phone shell centered on a
   cream-tan desktop background. Earlier login was the only view
   still rendering the auth-split side-by-side (couple photo aside
   + form main), so the three pages looked completely different on
   desktop. Now every guest view shares the same shell.
   ============================================================ */
@media (min-width:900px){
  /* Force login to mirror the splash/onb-v3 shell shape — same
     cream-tan desktop background so all three guest views share the
     same chrome (not the dark slate from earlier). */
  #view-login.view{
    padding:0 !important;
    background:#f1ead7 !important;
    display:flex !important;
    align-items:center;justify-content:center;
  }
  /* Drop the wide aside; render as a vertical mobile-shaped shell. */
  
  /* photo banner = upper third; form = lower two thirds, sliding up
     over the photo banner so there's no white gap. */

  
  /* Promote the aside into a top photo banner like the mobile view. */

  

  

  

  

  
  /* Form card sliding up over the photo */

  /* Back button — needs to pin to the .auth-split shell (top-left of
     photo banner), so we strip position from .card and .auth-main so
     the absolute topbar walks up to .auth-split (the next relative
     ancestor). */

  

  

  

  

}

/* ============================================================
   BACK BUTTON ANCHOR — absolute-pin to the .v3-onb shell so it
   always sits at top:14 left:14 of the 900px container, regardless
   of step. (Sticky+flex was leaving step 2's back floating in the
   middle of the title because .v3-onb didn't scroll.)
   ============================================================ */
#view-onb-v3 > .v3-onb > .v3-onb-back,
#view-onb-v3 .v3-onb-back{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  margin:0 !important;
  width:36px !important;height:36px !important;
  z-index:50 !important;
}
/* Step 2 — tighten title padding so it doesn't overlap with the
   absolute-positioned back. */
body[data-v3-step="2"] .v3-onb-presence{
  padding-top:60px !important;
}

/* ============================================================
   STEP 2 PAGE 4 FIX — content was being pushed to bottom because
   .v3-onb inherits `justify-content:flex-end`. On the last page
   (only 5 portraits in a 3x3 grid) the partial grid + everything
   above it floated down. Force top-align for step 2.
   ============================================================ */
body[data-v3-step="2"] #view-onb-v3 .v3-onb{
  justify-content:flex-start !important;
}

/* ============================================================
   MOBILE STEP 1/2/3 — let the view scroll if content exceeds the
   viewport (iOS Safari URL bar shrinks usable height). Don't fight
   the existing layout pattern — just keep the .v3-onb shell at
   min-height:100dvh and allow the view to scroll naturally.
   ============================================================ */
@media (max-width:899px){
  #view-onb-v3{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #view-onb-v3 .v3-onb{
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
  }
  /* Step 2 — top-aligned so partial last page doesn't drop content. */
  body[data-v3-step="2"] #view-onb-v3 .v3-onb{
    justify-content:flex-start !important;
  }
}

/* ============================================================
   LOGIN REDESIGN — match splash structure
   Mobile-first: full-bleed photo bg + BOB top-left + headline
   overlay + cream form section + footer privacy line.
   ============================================================ */

#view-login.view{
  padding:0 !important;
  background:#1a1612;
  overflow-y:auto;
  overflow-x:hidden;
}
/* Two-zone vertical layout: photo banner (with brand + headline
   overlay) on top + form/foot zone on the bottom. Locked to 100dvh
   so it fills exactly one screen — no empty cream stretch below. */
.v3-login{
  position:relative;
  height:100vh;height:100dvh;
  min-height:100vh;min-height:100dvh;
  background:#fdfaf2;
  display:flex;flex-direction:column;
  overflow:hidden;
}
/* Photo zone — fixed 48% of the shell, gradient blending to cream
   at its bottom edge so the form area joins seamlessly. */
.v3-login-photo{
  flex:0 0 48%;
  position:relative;
  background:
    url('/static/images/v3/splash-hero.png?v=2') center 18% / cover no-repeat;
  overflow:hidden;
}
.v3-login-photo::after{
  /* Top scrim for brand readability + bottom blend to cream */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,10,.30) 0%,
    rgba(20,15,10,0) 22%,
    rgba(20,15,10,0) 55%,
    rgba(253,250,242,.55) 88%,
    #fdfaf2 100%);
  pointer-events:none;
}
.v3-login-back{
  position:absolute;top:14px;left:14px;z-index:10;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;cursor:pointer;
  color:#1a1612;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.v3-login-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* Brand + headline overlay sit ABSOLUTE on top of the photo zone */
.v3-login-top{
  position:absolute;z-index:3;
  top:20px;left:60px;right:22px;
}
.v3-login-brand{position:relative;display:inline-block}
.v3-login-brand h1{
  font-family:'Fraunces',serif;
  font-weight:700;font-size:24px;line-height:1;
  letter-spacing:.04em;
  background:linear-gradient(180deg,#f3c8a5 0%,#d8a78a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.v3-login-brand .sub{
  display:block;
  font-size:10.5px;font-weight:500;
  letter-spacing:.28em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  margin-top:2px;
}
.v3-login-brand .line{
  display:block;width:34px;height:1.5px;
  background:#d8a78a;margin-top:6px;border-radius:1px;
}

/* Headline overlay — anchored to the BOTTOM of the photo zone so
   it sits on the dark gradient + cream blend like splash's anchor. */
.v3-login-hero{
  position:absolute;z-index:3;
  left:22px;right:22px;bottom:18px;
}
.v3-login-headline{
  font-family:'Fraunces',serif;
  font-weight:600;font-size:38px;line-height:1.0;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.35);
  margin:0;
}
.v3-login-headline i{
  font-style:italic;
  background:linear-gradient(180deg,#f3c8a5 0%,#d8a78a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.v3-login-sub{
  margin-top:10px;
  font-size:14px;line-height:1.45;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  max-width:340px;
}

/* Form zone — fills remaining 52% of the shell, padded + form
   stays compact + foot pinned to bottom via flex */
.v3-login-form{
  flex:1 1 auto;
  position:relative;z-index:4;
  padding:18px 22px 0;
  background:#fdfaf2;
  display:flex;flex-direction:column;
  overflow-y:auto;
  min-height:0;
}
.v3-login-field{margin-top:14px}
.v3-login-field:first-child{margin-top:0}
.v3-login-field label{
  display:block;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:10.5px;font-weight:600;
  color:rgba(26,22,18,.6);
  margin-bottom:6px;
}
.v3-login-field input{
  width:100%;box-sizing:border-box;
  padding:14px 16px;font-size:14.5px;
  background:#fff;
  border:1.5px solid rgba(168,117,85,.22);
  border-radius:14px;
  color:#1a1612;font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.v3-login-field input::placeholder{color:rgba(26,22,18,.38)}
.v3-login-field input:focus{outline:none;border-color:#a87555;box-shadow:0 0 0 3px rgba(168,117,85,.15)}

.v3-login-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:18px;
  padding:16px 22px;
  background:linear-gradient(180deg,#d8a78a 0%,#b8825c 100%);
  color:#fff;
  border:0;border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(168,117,85,.35), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .15s,box-shadow .15s;
}
.v3-login-cta:hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(168,117,85,.4), inset 0 1px 0 rgba(255,255,255,.28)}
.v3-login-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

#view-login .oauth-row.login-oauth{
  margin-top:10px;
  display:flex;flex-direction:column;gap:8px;
}
#view-login .oauth-btn{
  background:#fff !important;
  border:1.5px solid rgba(26,22,18,.10) !important;
  border-radius:999px !important;
  padding:13px !important;
  color:#1a1612 !important;
  font-size:13.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:10px;
}

.v3-login-create{
  text-align:center;margin-top:14px;
  font-size:13px;color:rgba(26,22,18,.72);
}
.v3-login-create a{
  color:#a87555;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(168,117,85,.35);padding-bottom:1px;
}
.v3-login-create a:hover{color:#7c4a2c;border-bottom-color:#7c4a2c}

.v3-login-foot{
  position:relative;z-index:3;
  margin-top:auto;  /* push to bottom of .v3-login-form flex container */
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 0 max(14px, env(safe-area-inset-bottom));
  font-size:11.5px;color:rgba(26,22,18,.62);
  letter-spacing:.04em;
  background:#fdfaf2;
}
.v3-login-foot svg{width:13px;height:13px;color:#a87555;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0}
.v3-login-foot b{color:#a87555;font-weight:500}

/* Tiny phone — tighten headline */
@media (max-height:680px){
  .v3-login-photo{flex-basis:44%}
  .v3-login-headline{font-size:32px}
}

/* Desktop — wrap in 440px phone shell on cream-tan bg, like splash */
@media (min-width:900px){
  #view-login.view{
    background:#f1ead7;
    display:flex;align-items:center;justify-content:center;
  }
  .v3-login{
    width:440px;max-width:440px;
    height:min(900px,100vh);
    border-radius:42px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    overflow:hidden;
  }
}
.v3-login-headline i{
  /* Solid darker copper + heavier shadow so it stays readable on the
     busy photo. */
  background:none !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  background-clip:initial !important;
  color:#f3c8a5 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.75), 0 0 24px rgba(0,0,0,.6) !important;
}
.v3-login-headline{
  text-shadow:0 2px 22px rgba(0,0,0,.65), 0 0 30px rgba(0,0,0,.4) !important;
}
.v3-login-sub{
  text-shadow:0 2px 12px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.45) !important;
  color:#fff !important;
}

/* ============================================================
   MOBILE STEP 1 — rewrite so the photo + headline + form flow
   top-down naturally (no calc(dvh) margins that iOS Safari
   miscalculates while the URL bar shows/hides).
   ============================================================ */
@media (max-width:899px){
  /* Base .v3-onb has justify-content:flex-end — fine on desktop where
     it pushes content to the bottom of the 900px shell — but on mobile
     where the shell is taller than content, it leaves empty space at
     the top. Force top-align for every step on mobile. */
  body[data-v3-step="1"] #view-onb-v3 .v3-onb,
  body[data-v3-step="2"] #view-onb-v3 .v3-onb,
  body[data-v3-step="3"] #view-onb-v3 .v3-onb{
    justify-content:flex-start !important;
  }
  body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1{
    /* Photo becomes a real block element in the flex column instead
       of an absolute-positioned background — its height drives layout. */
    position:relative !important;
    height:48vh !important;
    height:48dvh !important;
    min-height:280px !important;
    margin:0 !important;
    inset:auto !important;
    width:100% !important;
    z-index:1;
  }
  /* Drop the dark scrim ::after on the photo so the cream blend takes
     over below — keeps form readable + matches login's photo blend. */
  body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1::after{
    background:linear-gradient(180deg,
      rgba(20,15,10,0) 0%,
      rgba(20,15,10,.10) 45%,
      rgba(253,250,242,.45) 85%,
      #fdfaf2 100%) !important;
  }
  /* Headline overlay anchored to the bottom of the photo via absolute
     positioning INSIDE the photo bg, so no calc() viewport math. */
  /* Headline flows in normal flow below the photo. Pulled UP with
     negative margin so it visually sits on the cream-blend gradient
     at the bottom of the photo. No calc(dvh) → predictable on
     every browser (especially iOS Safari's URL-bar viewport math). */
  body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-hero{
    position:relative !important;
    margin:-90px 0 0 !important;
    padding:0 22px 14px !important;
    z-index:3;
  }
  body[data-v3-step="1"] #view-onb-v3 .v3-onb-bg.is-step1 ~ #onbV3Stage .v3-onb-card{
    position:relative !important;
    margin-top:0 !important;
    padding-top:14px !important;
    background:#fdfaf2;
    border-top-left-radius:24px;
    border-top-right-radius:24px;
    box-shadow:0 -10px 30px rgba(60,40,20,.10);
    z-index:2;
  }
  body[data-v3-step="1"] #view-onb-v3 #onbV3Stage{
    position:relative !important;
    padding-top:0 !important;  /* kill the desktop 50dvh stage offset */
    z-index:2;
  }
}

/* ============================================================
   ONB STEP 2 — Refine Companion button + sub-view
   ============================================================ */

/* Two-button row at the bottom of the presence picker */
.v3-presence-actions{
  display:flex;flex-direction:column;gap:10px;
  align-items:stretch;
}

/* Refine Companion — secondary outlined pill, disabled until pick */
.v3-onb-refine{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 18px;
  background:#fff;
  color:#a87555;
  border:1.5px solid rgba(168,117,85,.45);
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, opacity .15s;
}
.v3-onb-refine:hover:not(:disabled){
  background:#fbf6ec;border-color:#7c4a2c;color:#7c4a2c;
}
.v3-onb-refine:disabled{
  opacity:.45;cursor:not-allowed;
}
.v3-onb-refine svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}

/* --- Refine sub-stage (replaces the grid after click) --- */
.v3-onb-refine-stage{
  padding:60px 22px 22px;
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  /* Let the shell parent control height (mobile = view scrolls;
     desktop = 900px shell). min-height:100dvh broke desktop by
     forcing the substep taller than the shell → buttons cropped. */
}
/* Desktop — tighter spacing + smaller canvas so every button fits
   inside the 900px phone shell without scrolling. */
@media (min-width:900px){
  .v3-onb-refine-stage{
    padding:50px 22px 14px;
    gap:8px;
  }
  .v3-onb-refine-head h1{font-size:22px !important}
  .v3-onb-refine-head p{font-size:12px !important;margin-top:3px}
  .v3-onb-refine-canvas{
    max-height:38dvh !important;
    max-width:240px !important;
    border-radius:14px !important;
  }
  .v3-onb-refine-canvas img{max-height:38dvh !important}
  .v3-onb-refine-prompt textarea{min-height:54px !important;font-size:13px !important;padding:9px 12px !important}
  .v3-onb-refine-prompt label{font-size:9.5px !important;margin-bottom:4px !important}
  .v3-onb-refine-chips{gap:5px !important;margin-top:5px !important}
  .v3-onb-refine-chips .chip{padding:5px 10px !important;font-size:10.5px !important}
  .v3-onb-refine-actions .v3-onb-refine-discard,
  .v3-onb-refine-actions .v3-onb-refine-generate{padding:10px 14px !important;font-size:12px !important}
  .v3-onb-refine-stage > .v3-onb-next{padding:10px 14px !important;font-size:12px !important;margin-top:6px}
}
.v3-onb-refine-back{
  position:absolute;top:14px;left:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;cursor:pointer;
  color:#1a1612;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  z-index:5;
}
.v3-onb-refine-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

.v3-onb-refine-head{text-align:center;padding:0 14px}
.v3-onb-refine-head h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:24px;line-height:1.05;color:#1a1612;margin:0;
}
.v3-onb-refine-head h1 i{
  font-style:italic;
  background:linear-gradient(180deg,#d8a78a 0%,#8b5e3c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.v3-onb-refine-head p{
  margin-top:6px;font-size:13px;line-height:1.4;
  color:rgba(26,22,18,.7);
}

.v3-onb-refine-canvas{
  position:relative;
  width:100%;
  /* Let the image set its own height (no aspect-ratio crop). Hard-cap
     so it never blows past the visible area; cream fill behind in case
     the natural aspect leaves bars on the sides. */
  max-height:60dvh;
  background:#f1ead7;
  border-radius:18px;
  overflow:hidden;
  margin:0 auto;max-width:360px;
  box-shadow:0 10px 28px rgba(60,40,20,.18);
  display:flex;align-items:center;justify-content:center;
}
.v3-onb-refine-canvas img{
  width:100%;height:auto;
  max-height:60dvh;
  object-fit:contain;
  display:block;
}
.v3-onb-refine-busy{
  position:absolute;inset:0;
  background:rgba(20,15,10,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#fff;font-size:13px;backdrop-filter:blur(6px);
}
.v3-onb-refine-busy .spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:v3-spin 1s linear infinite;
}
@keyframes v3-spin{to{transform:rotate(360deg)}}

.v3-onb-refine-prompt label{
  display:block;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;font-weight:600;
  color:rgba(26,22,18,.6);
  margin-bottom:6px;
}
.v3-onb-refine-prompt textarea{
  width:100%;box-sizing:border-box;
  padding:12px 14px;font-size:14px;line-height:1.45;
  background:#fff;
  border:1.5px solid rgba(168,117,85,.22);
  border-radius:14px;
  color:#1a1612;font-family:inherit;
  resize:vertical;min-height:78px;
}
.v3-onb-refine-prompt textarea:focus{
  outline:none;border-color:#a87555;
  box-shadow:0 0 0 3px rgba(168,117,85,.15);
}
.v3-onb-refine-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.v3-onb-refine-chips .chip{
  padding:6px 12px;font-size:11.5px;
  background:rgba(168,117,85,.10);
  border:1px solid rgba(168,117,85,.22);
  color:#7c4a2c;border-radius:999px;
  cursor:pointer;font-family:inherit;
}
.v3-onb-refine-chips .chip:hover{
  background:rgba(168,117,85,.18);
}

.v3-onb-refine-actions{
  display:flex;gap:10px;
}
.v3-onb-refine-discard{
  flex:0 0 auto;padding:12px 18px;
  background:#fff;color:rgba(26,22,18,.65);
  border:1.5px solid rgba(26,22,18,.10);
  border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:500;
  cursor:pointer;
}
.v3-onb-refine-generate{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;
  background:linear-gradient(180deg,#d8a78a 0%,#b8825c 100%);
  color:#fff;border:0;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 22px rgba(168,117,85,.30),inset 0 1px 0 rgba(255,255,255,.28);
}
.v3-onb-refine-generate:disabled{opacity:.55;cursor:not-allowed}
.v3-onb-refine-generate svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}

/* ============================================================
   V3 onb STEP 2 — fit-to-viewport responsive layout.
   Problem: the presence grid is the tallest step. render() locks the
   onb root to height:100% + overflow:hidden on desktop (≥900px), so the
   action menu (pager + Refine + NEXT) was clipped below the fold with no
   scroll; on mobile the whole page scrolled to reach NEXT.
   Fix: bound step 2 to the viewport. Header stays at the top, the grid
   fills the remaining height with tiles that scale to fit (no fixed 3:4
   height → 3×3 always fits), and the pager nav + page-info + Refine +
   NEXT are pinned at the bottom so they are ALWAYS visible. Last in the
   cascade + high specificity so it wins the many earlier step-2 rules.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage{
  display:flex !important;          /* beat the global #onbV3Stage{display:block!important} */
  flex-direction:column !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}
/* the un-classed wrap div render() appends + the presence block both
   become flex columns that fill the stage */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage > div{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
}
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-onb-presence{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding-bottom:0 !important;
}
/* title + subtitle: natural height, never shrink */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-onb-presence > h1,
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-onb-presence > p{
  flex:0 0 auto;
}
/* grid area takes all remaining height (scrolls only as a last resort) */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-presence-pager{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-presence-pager .v3-onb-grid{
  flex:1 1 auto;min-height:0 !important;
  grid-auto-rows:minmax(0,1fr);
  align-content:stretch;
}
/* tiles fill their grid cell instead of a fixed 3:4 ratio, so the whole
   3×3 page always fits the available height on any viewport */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-onb-portrait{
  aspect-ratio:auto;
  height:100%;min-height:0;
}
/* pager nav + page-info + action buttons: pinned, always visible */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-presence-nav,
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-onb-presence-foot,
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-presence-actions{
  flex:0 0 auto;
}
/* the actions row owns the bottom safe-area spacing now that presence
   has padding-bottom:0 (overrides the inline padding on the element) */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage .v3-presence-actions{
  padding:2px 22px max(18px, env(safe-area-inset-bottom,18px)) !important;
}

/* ============================================================
   V3 onb step 2 → Refine sub-step: undo the lock-to-viewport
   clamps above. The step-2 rules set #onbV3Stage to
   `height:100dvh + overflow:hidden + flex-column` so the
   grid stays one-page. But the Refine substep renders into
   the SAME #onbV3Stage (the user clicks REFINE without a fresh
   render() call, so the bg-class is still `is-step2`) and its
   content (head + portrait + textarea + chips + actions + Save)
   is taller than the viewport on mobile — buttons got clipped
   below the fold with no scroll escape (#97 report).
   Detect the substep via `:has(.v3-onb-refine-stage)` and let
   the stage grow + the view's overflow-y:auto take over.
   ============================================================ */
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage:has(.v3-onb-refine-stage){
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
#view-onb-v3 .v3-onb-bg.is-step2 ~ #onbV3Stage:has(.v3-onb-refine-stage) > div{
  flex:0 0 auto;
  display:block;
  min-height:0;
}
/* Safety: also let the view itself scroll (inline overflow-y:auto is
   already applied by onboarding_v3.js render() — this just guards
   against any later rule re-locking it). */
body[data-v3-step="2"] #view-onb-v3:has(.v3-onb-refine-stage){
  overflow-y:auto !important;
}

/* ============================================================
   In-app "Change their portrait" — V3 presence picker reused
   post-login. View id is #view-portrait; the .v3-onb shell from
   the onb path is reused with a `.portrait-v3` modifier so the
   dark background + step-1/3 photo overlays don't bleed in. The
   .view default already has overflow-y:auto so vertical scroll
   works inside the in-app frame; we just have to make sure
   .v3-onb sizes to content (not 100vh + overflow:hidden, which
   was clipping the REFINE/NEXT actions row below the fold).
   ============================================================ */
#view-portrait .v3-onb.portrait-v3{
  /* Override the dark shell (#0f0c0a default in .v3-onb) — we want
     the same warm cream as the onboarding step-2 view. */
  background:#fdfaf2;
  /* CRITICAL: kill the inherited 100vh + overflow:hidden from the
     base .v3-onb rule — that combination clipped the actions row
     (REFINE + NEXT) below the visible fold. The in-app shell's
     own .view-host owns the height; we just want this element to
     grow with its content so all sections render and the .view
     scrolls them into view when they don't fit the viewport. */
  min-height:auto;
  height:auto;
  overflow:visible;
}
#view-portrait .v3-onb.portrait-v3 .portrait-v3-bg{
  /* Soft cream band behind the title — mirrors the 60px reserve
     used by .v3-onb-bg.is-step2 in the onb flow. No photo. */
  background:#fdfaf2;
  background-image:none;
  filter:none;
  height:60px;
  bottom:auto;
}
/* Stage just stacks its rendered sections — no flex, no overflow
   clamps, no implicit min-height. Let height come from content. */
#view-portrait .v3-onb.portrait-v3 .v3-onb-stage{
  position:relative;z-index:2;
  display:block;
}
/* In the in-app shell the V3 grid stretches naturally — let the 3×3
   page settle at its aspect-ratio default (no height clamp). */
#view-portrait .v3-onb.portrait-v3 .v3-onb-portrait{
  aspect-ratio:3/4;
  height:auto;
  min-height:0;
}
/* Actions row — Refine + NEXT stacked, full width inside their container. */
#view-portrait .v3-onb.portrait-v3 .v3-presence-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:6px 22px max(20px, env(safe-area-inset-bottom,20px));
}
/* Pager doesn't need a min-height in-app — that 330–360px reservation
   was sized for the onb step's exact-viewport layout. Let it size to
   the rendered 3×3 page so dots + actions show right under it. */
#view-portrait .v3-onb.portrait-v3 .v3-presence-pager{
  overflow:visible;
}
#view-portrait .v3-onb.portrait-v3 .v3-presence-pager .v3-onb-grid{
  min-height:auto !important;
}
/* The in-app picker still ships a tabbar/sidebar (it's in APP_VIEWS),
   so leave room above the bottom dock on small screens. */
@media (max-width:899px){
  body.in-app #view-portrait .v3-onb.portrait-v3 .v3-presence-actions{
    padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));
  }
}

/* Desktop / tablet (≥900px): the in-app shell is sidebar + full-width
   main, so without a clamp the V3 grid blows up to 1500px-wide tiles
   (the broken state in Image #93). Constrain the picker to a centered
   480px card so it matches profile/customize/upgrade. */
@media (min-width:900px){
  #view-portrait .v3-onb.portrait-v3{
    padding:32px 28px 40px;
    background:transparent;
  }
  /* The card surface — rounded sheet centered in the content area.
     No overflow:hidden so the contained actions row is always visible;
     no fixed height so the card grows with its sections. */
  #view-portrait .v3-onb.portrait-v3 .v3-onb-stage{
    width:100%;
    max-width:480px;
    margin:0 auto;
    background:#fdfaf2;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow-sm);
    padding:20px 0 16px;
    position:relative;
  }
  /* Hide the 60px sticky cream band — the card itself is the surface. */
  #view-portrait .v3-onb.portrait-v3 .portrait-v3-bg{display:none}
  /* Back arrow pinned to the card's top-left corner (not the viewport). */
  #view-portrait .v3-onb.portrait-v3 > .v3-onb-back{
    position:absolute;
    top:46px;
    left:calc(50% - 240px + 16px);
    transform:none;
  }
  /* Trim the inner padding so the title sits closer to the card top — the
     62px from .v3-onb-presence was sized for a full-bleed onb step. */
  #view-portrait .v3-onb.portrait-v3 .v3-onb-presence{
    padding:32px 18px 12px;
    background:transparent !important;
  }
  /* Pager + grid stay inside the 480-px card → 3 cols × ~140px tiles. */
  #view-portrait .v3-onb.portrait-v3 .v3-presence-pager{
    padding:0 14px;
  }
  #view-portrait .v3-onb.portrait-v3 .v3-onb-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    padding:0 !important;
  }
  /* Action row hugs the card bottom on desktop (no tabbar). */
  #view-portrait .v3-onb.portrait-v3 .v3-presence-actions{
    padding:8px 18px 20px;
  }
  /* Page info text + nav row fit the narrower card width. */
  #view-portrait .v3-onb.portrait-v3 .v3-presence-nav{
    padding:12px 14px 2px;
  }
}


/* ============================================================
   Login + onboarding: give the desktop margin the SAME backdrop as
   the splash (หน้าแรก) — cream radial gradient + soft botanical leaf
   overlay — so the centered phone-frame no longer floats on a flat
   cream canvas. Desktop-only: on mobile the frame fills the viewport
   so there is no margin to decorate. Mirrors #view-splash.view.active
   (radial) + #view-splash::before (splash-bg.png, soft-light).
   ============================================================ */
@media (min-width:900px){
  #view-login.view,
  #view-login.view.active,
  #view-onb-v3.view,
  #view-onb-v3.view.active{
    background:
      radial-gradient(ellipse 60% 80% at 50% 0%,
        rgba(241,234,215,1) 0%,
        rgba(232,220,196,1) 45%,
        rgba(212,192,156,1) 100%) !important;
  }
  #view-login::before,
  #view-onb-v3::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url('/static/images/splash-bg.png');
    background-size:cover;
    background-position:center;
    opacity:.34;
    mix-blend-mode:soft-light;
    pointer-events:none;
  }
}


/* ============================================================
   Chat input focus ring — put it on the FIELD (.pill), not the
   inner <input>. The input sits inside the pill's asymmetric padding
   (18px left / 8px right), so its focus outline drew a rounded-rect
   floating INSIDE the white field instead of hugging the field edge
   (the "orange border ≠ field" issue). Suppress the input outline and
   ring the pill itself — box-shadow follows the pill's 999px radius
   exactly, so it hugs the field's real edge.
   ============================================================ */
.v3-chat-input input:focus,
.v3-chat-input input:focus-visible{
  outline:none !important;
}
.v3-chat-input .pill:focus-within{
  box-shadow:0 0 0 2px #b8825c, 0 4px 14px rgba(0,0,0,.08) !important;
}

/* ============================================================
   Guest views — belt & suspenders.
   applyChrome() sets `tabbar.style.display = "none"` for views
   in GUEST_VIEWS, but a stray reset elsewhere could re-show it.
   Force-hide the bottom dock + sidebar whenever the body is NOT
   marked .in-app (which only the authed in-app views set).
   ============================================================ */
body:not(.in-app) #tabbar,
body:not(.in-app) #sidebar{
  display:none !important;
}
/* Splash + login should never scroll past their hero — they're
   single-screen entry views. Clamp body on these specifically
   (NOT on onb-v3 which needs natural mobile scroll). */
@media (max-width:899px){
  body:not(.in-app):not(.v3-onb-active){
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
  }
}

/* ============================================================
   iOS Safari auto-zoom prevention.
   Any focused input with computed font-size < 16px triggers
   iOS Safari to zoom the viewport in on focus — and iOS often
   refuses to zoom back out when the keyboard dismisses, leaving
   the page stuck zoomed and clipped (#99/#100 report on V3 onb
   step 1 + companion-name + nickname inputs).
   Force every form control on mobile to >=16px so iOS never
   zooms in. Desktop (≥900px) keeps the tighter typography from
   the component-specific rules. Tagged !important because the
   per-component rules use the same property and need to lose at
   this breakpoint.
   ============================================================ */
@media (max-width:899px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  input:not([type]),
  textarea,
  select{
    font-size:16px !important;
  }
}

/* ============================================================
   V3 onb step 3 — placeholder overlay for empty date/time inputs.
   iOS Safari ignores the `placeholder` attribute on type=date and
   type=time, so onboarding_v3.js renders a sibling <span> with
   the placeholder text and toggles --hidden via a `change`/`input`
   listener. Position + typography must match the native
   ::placeholder on the Country of Birth field exactly (#105 user
   wants visual parity).
   ============================================================ */
.v3-onb-input-row{position:relative}
.v3-onb-date-placeholder{
  position:absolute;
  left:42px; right:14px;
  top:50%; transform:translateY(-50%);
  color:rgba(26,22,18,.45);
  font-family:inherit;font-size:14.5px;font-weight:400;
  line-height:normal;letter-spacing:normal;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.v3-onb-date-placeholder--hidden{display:none}
/* Step 3 scopes the input to 13px + padding-left:38px (the high-
   specificity rules at #view-onb-v3 .v3-onb-bg.is-step3 …). Mirror
   the overlay so it matches the Country of Birth placeholder
   exactly — same font-size, same left edge. */
#view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage .v3-onb-date-placeholder{
  font-size:13px !important;
  left:38px;
  right:14px;
}

/* ============================================================
   V3 onb mobile — let the document scroll naturally on every step.
   Years of layer-by-layer fixes left ~10 conflicting !important
   rules locking body to 100vh + overflow:hidden when v3-onb-active.
   The toughest competitor was
     body[data-v3-step="3"].v3-onb-active { height:100vh !important }
   at specificity (0,2,1). We use selector specificity (0,2,2)
   via the `html` prefix so we definitively win every step.
   #106 report: NEXT button at y=818 was clipped at the body edge
   (844) with no scroll escape because the body was hard-locked.
   ============================================================ */
@media (max-width:899px){
  html body.v3-onb-active,
  html body[data-v3-step="3"].v3-onb-active,
  html body[data-v3-step="3"],
  html body.v3-onb-active .app-shell,
  html body.v3-onb-active .content-area,
  html body.v3-onb-active .view-host,
  html body.v3-onb-active #view-onb-v3,
  html body[data-v3-step="3"] .app-shell,
  html body[data-v3-step="3"] .content-area,
  html body[data-v3-step="3"] .view-host,
  html body[data-v3-step="3"] #view-onb-v3{
    height:auto !important;
    max-height:none !important;
    min-height:100dvh !important;
    overflow:visible !important;
  }
  html:has(body.v3-onb-active){
    height:auto !important;
    max-height:none !important;
    overflow:hidden auto !important;
  }
  /* The .view default has position:absolute + inset:0. On mobile
     we need it position:relative so it flows in document, with
     min-height so it fills the viewport on initial load. */
  html body.v3-onb-active #view-onb-v3,
  html body[data-v3-step="3"] #view-onb-v3{
    position:relative !important;
    inset:auto !important;
  }
}

/* ============================================================
   Re-do introductions, step 3 — fill the empty cream gap.
   The signup step-3 reserves 30dvh for the photo + ~25dvh for
   the form (email/phone/OAuth). Redo strips the account block,
   so the form is only ~40dvh tall — leaving an awkward cream
   band between the photo and the headline.
   Push the photo to ~48dvh and let the hero text + birth block
   slide right up against it. Scoped to `body.v3-redo-active`
   so the signup layout stays untouched.
   ============================================================ */
body.v3-redo-active[data-v3-step="3"] #view-onb-v3 .v3-onb-bg.is-step3{
  height:48vh !important;
  height:48dvh !important;
  max-height:48dvh !important;
}
body.v3-redo-active[data-v3-step="3"] #view-onb-v3 .v3-onb-bg.is-step3 ~ #onbV3Stage{
  padding-top:42vh !important;
  padding-top:42dvh !important;
}
/* Trim hero top padding so the headline sits right under the photo. */
body.v3-redo-active[data-v3-step="3"] #view-onb-v3 .v3-onb-hero{
  padding-top:14px !important;
  padding-bottom:10px !important;
}
/* Position:cover the bg so it fills the larger 48dvh frame cleanly
   (default background-size:cover already does this — explicit for
   any rule that may have changed it). */
body.v3-redo-active[data-v3-step="3"] #view-onb-v3 .v3-onb-bg.is-step3{
  background-size:cover !important;
  background-position:center 30% !important;
}

/* ============================================================
   ████  BoB REDESIGN (2026-06)  ████
   Override layer matching the new_ui/ mockups. Organized as:
   tokens → bottom nav → splash → onboarding → home → mood →
   memory → profile/settings → chat → desktop phone-canvas.
   Appended last so these rules win the cascade.
   ============================================================ */

/* ---------- Tokens (extend, warm the ink) ---------- */
:root{
  --surface-warm:#efe8d7;   /* warm-cream raised cards (vs pure-white --card) */
  --card-edge:#f7f1e3;      /* inset top highlight on warm cards */
  --taupe-screen:#a99c88;   /* darker mushroom screen — Home + chat scrim */
  --taupe-panel:#8e8070;    /* translucent taupe panels — whisper / plan card */
  --group-card:#ddd3bd;     /* settings grouped-list container */
  --mocha-deep:#6b5e4f;     /* workhorse: FAB, selected, icon badges */
  --espresso:#2b2520;       /* headline + primary ink (warm neutral) */
  --cta-1:#a88f6f;          /* primary button gradient top */
  --cta-2:#7e6a50;          /* primary button gradient bottom */
  --cta-grad:linear-gradient(180deg,var(--cta-1),var(--cta-2));
  --danger:#9d5b5b;         /* muted destructive (SOS / delete badges) */
  --online:#58af6e;         /* chat "online" presence dot */
  --toggle-off:#cdc4b1;     /* toggle OFF track */
  --accent-on-dark:#bb9c7e; /* italic accent + wordmark over dark photos */
  --glass-bubble:rgba(224,215,200,.55);      /* AI chat bubble glass */
  --glass-bubble-user:rgba(243,237,224,.82); /* user chat bubble glass */

  /* Warm the ink off its olive cast (was greenish #252b1b) */
  --ink:#2b2520;
  --ink-soft:#5c5448;
  --ink-mute:#8d8473;
}

/* ---------- Bottom tab bar (5 + center FAB) ---------- */
.tabbar{
  background:rgba(243,236,218,.96);
  border-top:1px solid rgba(214,204,182,.7);
  backdrop-filter:blur(14px);
}
.tabbar .tab{color:#9a8d79;letter-spacing:.12em;font-weight:600}
.tabbar .tab.active{color:var(--espresso)}
.tabbar .tab svg{width:24px;height:24px;stroke-width:1.7}
.tabbar .tab.active svg{stroke-width:2}
.tabbar .tab.fab{
  background:var(--copper-grad) !important;
  color:#fff !important;
  width:60px;height:60px;margin-top:-22px;
  box-shadow:0 10px 24px rgba(168,117,85,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.tabbar .tab.fab svg{width:26px;height:26px;stroke-width:1.7}
.tabbar .tab.fab.active{color:#fff}

/* ---------- Global components (muted-copper CTAs, mocha chips) ---------- */
.btn.primary{
  background:var(--cta-grad);
  box-shadow:0 12px 26px rgba(120,100,72,.30), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn.primary:hover{filter:brightness(1.04);box-shadow:0 16px 30px rgba(120,100,72,.38), inset 0 1px 0 rgba(255,255,255,.4)}
.chip.active,.chip.on{background:var(--mocha-deep);border-color:var(--mocha-deep);color:#fff}

/* ---------- Splash (mockup 1) ---------- */
#view-splash.view{background:#15110d}
.v3-splash-bg::after{
  background:linear-gradient(180deg,
    rgba(18,14,10,0) 0%, rgba(18,14,10,0) 38%,
    rgba(18,14,10,.5) 62%, rgba(18,14,10,.86) 100%) !important;
}
.v3-splash{justify-content:flex-end}
.v3-splash-brand h1{font-family:'Inter',sans-serif !important;font-style:normal !important;font-weight:800 !important;font-size:30px !important;letter-spacing:-.01em !important;color:#fff !important;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.v3-splash-brand .sub{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600;margin-top:3px}
.v3-splash-brand .line{display:block;width:34px;height:2px;background:var(--accent-on-dark);margin-top:9px;border-radius:2px}
.v3-splash-hero{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;padding:0 24px max(26px,env(safe-area-inset-bottom)) !important;position:relative;z-index:3}
.v3-splash-headline{
  font-family:'Inter',sans-serif !important;font-weight:800 !important;
  font-size:clamp(30px,8.4vw,40px) !important;line-height:1.07 !important;
  letter-spacing:-.02em !important;color:#fff !important;text-align:left !important;
  text-transform:none !important;text-shadow:0 2px 18px rgba(0,0,0,.45);margin:0
}
.v3-splash-headline i{
  font-family:'Fraunces',serif !important;font-style:italic !important;font-weight:500 !important;
  color:var(--accent-on-dark) !important;-webkit-text-fill-color:initial !important;background:none !important
}
.v3-splash-sub{color:rgba(255,255,255,.86) !important;font-size:15.5px !important;margin-top:12px !important;text-shadow:0 1px 10px rgba(0,0,0,.45);text-align:left}
.v3-splash-cta{
  width:100%;height:60px;border-radius:999px;background:var(--cta-grad) !important;color:#fff !important;
  font:700 14px/1 'Inter',sans-serif !important;letter-spacing:.10em;text-transform:uppercase;
  margin-top:24px;border:0;display:flex;align-items:center;justify-content:center;gap:0;
  box-shadow:0 16px 32px rgba(40,28,18,.45), inset 0 1px 0 rgba(255,255,255,.3)
}
.v3-splash-trial{color:rgba(255,255,255,.8) !important;font-size:12.5px !important;text-align:center;margin-top:15px !important;letter-spacing:.02em}
.v3-splash-signin{color:rgba(255,255,255,.82) !important;font-size:13.5px !important;text-align:center;margin-top:9px !important}
.v3-splash-signin a{color:#fff !important;font-weight:700;text-decoration:underline}

/* ---------- Home (mockup 5) — darker taupe screen ---------- */
#view-home.view{background:linear-gradient(180deg,#ab9e8a 0%,#9c8e79 60%,#cdc1a6 100%)}
#view-home .home-inner{padding:18px 18px 28px}
#view-home .greeting .hi{color:#f4efe2;font-family:'Inter',sans-serif;font-weight:800;font-size:26px;line-height:1.12;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(40,30,20,.25)}
#view-home .greeting .hi i{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#fff}
#view-home .greeting .sub{color:rgba(244,239,226,.82);font-size:13.5px;margin-top:4px}
#view-home .greeting .icon-btn{background:var(--espresso);color:#fff;border:0;border-radius:14px;width:42px;height:42px}
#view-home .greeting .icon-btn svg{color:#fff}
#view-home .home-hero{border-radius:22px;overflow:hidden;box-shadow:0 16px 36px rgba(50,38,24,.28);min-height:330px}
#view-home .home-hero .ov{background:linear-gradient(180deg,rgba(30,24,18,0) 30%,rgba(40,32,22,.55) 70%,rgba(40,32,22,.82) 100%)}
#view-home .home-hero .txt .k{color:rgba(255,255,255,.78);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
#view-home .home-hero .txt h2{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:#f4eede;font-size:21px;line-height:1.34;margin-top:6px}
#view-home .home-hero .txt p{color:rgba(255,255,255,.72);font-size:13px;margin-top:8px;font-style:normal}
#view-home .home-grid{display:flex;flex-direction:column;gap:18px;margin-top:16px}
#view-home .home-section:has(.quick-grid){order:-1}
#view-home .row-hdr h3{color:#f1ece0;font-size:15px}
#view-home .row-hdr a{color:rgba(244,239,226,.8)}
#view-home .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view-home .quick{border-radius:18px;padding:16px;background:rgba(247,241,227,.5);border:1px solid rgba(255,255,255,.25);box-shadow:0 6px 18px rgba(50,38,24,.18);backdrop-filter:blur(6px)}
#view-home .quick.b1{background:var(--surface-warm);box-shadow:0 8px 20px rgba(50,38,24,.22), inset 0 1px 0 var(--card-edge)}
#view-home .quick .ico{width:38px;height:38px;border-radius:11px;background:transparent;color:var(--mocha-deep);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
#view-home .quick.b1 .ico svg,#view-home .quick .ico svg{color:var(--mocha-deep)}
#view-home .quick h4{color:var(--espresso);font-size:15px;font-weight:700}
#view-home .quick p{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
#view-home .mood-card{background:rgba(247,241,227,.5);border:1px solid rgba(255,255,255,.25);border-radius:18px;backdrop-filter:blur(6px)}
#view-home .mood-card .mh span{color:var(--ink-soft)}
#view-home .mood-card .mh b{color:var(--espresso)}

/* ---------- Mood check-in (mockup 6) — light cream, segmented emojis ---------- */
#view-mood .page{padding:0;display:block}
#view-mood .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:24px 22px 40px;min-height:100%}
#view-mood .topbar .title{font-weight:600;color:var(--espresso)}
#view-mood .mood-hero{text-align:left}
#view-mood .mood-hero .k{color:var(--ink-mute);letter-spacing:.24em;text-transform:uppercase;font-size:11px}
#view-mood .mood-hero h2{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;line-height:1.08;color:var(--espresso);margin-top:6px}
#view-mood .mood-hero h2 i{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--rose)}
#view-mood .mood-emojis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:22px 0}
#view-mood .mood-emoji{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:66px;border-radius:18px;background:var(--surface-warm);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--card-edge);cursor:pointer;transition:all .15s ease}
#view-mood .mood-emoji span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
#view-mood .mood-emoji .face{width:26px;height:26px;color:var(--ink-soft)}
#view-mood .mood-emoji.active{background:var(--mocha-deep);border-color:var(--mocha-deep);box-shadow:0 8px 18px rgba(60,50,38,.26)}
#view-mood .mood-emoji.active span,#view-mood .mood-emoji.active .face{color:#fff}
#view-mood .field label{color:var(--ink-soft);font-weight:600}
#view-mood .slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--bg-deep);outline:none}
#view-mood .slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--copper-2);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer}
#view-mood .slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--copper-2);border:3px solid #fff;cursor:pointer}
#view-mood .slider-value{font-family:'Fraunces',serif;font-size:19px;color:var(--espresso)}
#view-mood .textarea{background:var(--surface-warm);border:1px solid var(--line);border-radius:16px}

/* ---------- Memory (mockup 7) — taupe cards on cream ---------- */
#view-memory .page{padding:0;display:block}
#view-memory .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:24px 22px 40px;min-height:100%}
#view-memory .topbar .title{font-weight:600;color:var(--espresso)}
#view-memory .q-kicker{color:var(--ink-mute);letter-spacing:.22em;text-transform:uppercase;font-size:11px}
#view-memory .q-title{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;color:var(--espresso)}
#view-memory .q-title i{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--rose)}
#view-memory .memory-list{display:flex;flex-direction:column;gap:12px}
#view-memory .memory-card{background:var(--taupe-panel);border:0;border-radius:18px;box-shadow:0 6px 16px rgba(60,50,38,.18);padding:15px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
#view-memory .memory-card .ic{width:52px;height:52px;border-radius:50%;background:var(--mocha-deep);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#view-memory .memory-card .ic svg{color:#fff;width:22px;height:22px}
#view-memory .memory-card .c{flex:1;min-width:0}
#view-memory .memory-card .c .k{color:rgba(255,255,255,.78);font-size:12.5px}
#view-memory .memory-card .c .v{font-family:'Fraunces',serif;color:#fff;font-size:19px;line-height:1.22}
#view-memory .memory-card .c .d{color:rgba(255,255,255,.62);font-size:11.5px;margin-top:3px}
#view-memory .memory-card .x{color:rgba(255,255,255,.72);background:transparent;border:0}
#view-memory .memory-watermark{display:none}
#view-memory .btn.light{background:transparent;border:1.5px solid var(--line);color:var(--espresso)}
#view-memory .btn.danger{background:transparent;border:1.5px solid rgba(157,91,91,.45);color:var(--danger)}

/* ---------- Profile + Settings (mockups 8 + 9) ---------- */
#view-profile .page{padding:0;display:block}
#view-profile .card{background:transparent;border:0;box-shadow:none;max-width:none;width:100%;border-radius:0;padding:22px 22px 40px;min-height:100%}
#view-profile .topbar .title{font-weight:600;color:var(--espresso)}
#view-profile .profile-head{text-align:center}
#view-profile .profile-hero .pic-user{width:120px;height:120px;border-radius:50%;background:var(--taupe-screen);box-shadow:0 8px 22px rgba(60,50,38,.2)}
#view-profile .profile-hero .pic-user .initial{font-family:'Fraunces',serif;color:var(--mocha-deep);font-size:54px;background:transparent}
#view-profile .profile-hero .hero-cam{background:var(--mocha-deep);color:#fff;border:2px solid var(--bg)}
#view-profile .profile-hero .hero-cam svg{color:#fff}
#view-profile .profile-head h2{font-family:'Fraunces',serif;font-style:normal;font-weight:600;color:var(--espresso);font-size:28px}
#view-profile .profile-head h2 i{font-style:normal}
#view-profile .profile-head #profileSub{color:var(--ink-soft);font-size:14px}
#view-profile .edit-info-btn{border:1.5px solid var(--line);background:transparent;color:var(--espresso);border-radius:999px;height:48px;padding:0 26px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
#view-profile .edit-info-btn svg{color:var(--espresso)}
#view-profile .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
#view-profile .stat{background:var(--surface-warm);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(60,52,40,.10), inset 0 1px 0 var(--card-edge);padding:16px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
#view-profile .stat b{font-family:'Fraunces',serif;font-weight:500;font-size:38px;color:var(--espresso)}
#view-profile .stat span{font-size:13px;color:var(--ink-soft)}
#view-profile .tier-banner{background:var(--taupe-panel);border:0;border-radius:20px;box-shadow:0 8px 20px rgba(60,50,38,.2);padding:18px 20px}
#view-profile .tier-banner-kicker{color:rgba(255,255,255,.78)}
#view-profile .tier-banner-name{font-family:'Fraunces',serif;color:#fff;font-size:26px;font-weight:500}
#view-profile .tier-banner-renew{color:rgba(255,255,255,.78)}
#view-profile .tier-banner-cta{background:var(--mocha-deep);color:#fff;border:0;border-radius:999px;padding:0 18px;height:40px;font-weight:600}
#view-profile .section-kicker{display:block;margin-top:22px;margin-bottom:8px;font-size:17px;font-weight:600;color:var(--ink-soft);letter-spacing:0;text-transform:capitalize}
#view-profile .section-kicker .i,#view-profile .section-kicker svg{display:none}
#view-profile .menu{background:var(--surface-warm);border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(60,52,40,.10);overflow:hidden}
#view-profile .menu-item{padding:16px 16px;gap:15px;font-size:16px;font-weight:500;color:var(--espresso);border-bottom:1px solid var(--line)}
#view-profile .menu-item .ic{width:40px;height:40px;border-radius:50%;background:var(--mocha-deep);color:#fff}
#view-profile .menu-item .ic svg{color:#fff;width:20px;height:20px}
#view-profile .menu-item .ic.ic-alert,#view-profile .menu-item .ic.ic-danger{background:var(--danger);color:#fff}
#view-profile .menu-item .ic.ic-alert svg,#view-profile .menu-item .ic.ic-danger svg{color:#fff}
#view-profile .menu-item .arr{color:var(--ink-soft);margin-left:auto}
#view-profile .menu-item.danger-text{color:var(--danger)}
#view-profile .menu-item.danger-text .ic{background:var(--danger);color:#fff}
#view-profile .menu-item .toggle{margin-left:auto;width:52px;height:32px;border-radius:999px;background:var(--toggle-off)}
#view-profile .menu-item .toggle::after{width:26px;height:26px;top:3px;left:3px}
#view-profile .menu-item .toggle.on{background:var(--mocha-deep)}
#view-profile .menu-item .toggle.on::after{left:calc(100% - 29px)}

/* ---------- Chat (mockup 10) — full portrait + glass bubbles ---------- */
#view-chat .v3-chat{background:var(--taupe-screen)}
#view-chat .v3-chat-head{background:transparent;border-bottom:0;backdrop-filter:none}
#view-chat .v3-chat-back{background:var(--espresso);color:#fff;border-radius:14px;width:40px;height:40px}
#view-chat .v3-chat-back svg{color:#fff}
#view-chat .v3-chat-name{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
#view-chat .v3-chat-status{color:rgba(255,255,255,.82)}
#view-chat .v3-chat-status .dot{background:var(--online)}
#view-chat .v3-chat-dream{background:var(--glass-bubble);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px}
#view-chat .v3-chat-dream svg{color:#fff}
#view-chat .v3-chat-iconbtn{background:var(--glass-bubble);color:#fff;border:1px solid rgba(255,255,255,.22)}
#view-chat .v3-chat-iconbtn svg{color:#fff}
#view-chat .v3-chat-hero::after{background:linear-gradient(180deg,rgba(150,138,120,0) 0%,rgba(150,138,120,0) 44%,rgba(150,138,120,.42) 70%,rgba(140,128,112,.8) 100%) !important}
#view-chat .v3-chat-body .msg.her{background:var(--glass-bubble);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:0 8px 20px rgba(110,95,70,.16)}
#view-chat .v3-chat-body .msg.her .md-body,#view-chat .v3-chat-body .msg.her .quote{color:#fff}
#view-chat .v3-chat-body .msg.me{background:var(--glass-bubble-user);color:var(--espresso);box-shadow:0 6px 16px rgba(60,52,40,.14)}
#view-chat .v3-chat-body .typing{background:var(--glass-bubble);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28)}
#view-chat .v3-chat-body .typing span{background:rgba(255,255,255,.78)}
#view-chat .v3-chat-body .day-divider{background:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
#view-chat .msg-row{display:flex;gap:8px;align-items:flex-end;max-width:88%}
#view-chat .msg-row.her{align-self:flex-start}
#view-chat .msg-row.me{align-self:flex-end;flex-direction:row-reverse}
#view-chat .msg-row .msg{max-width:100%}
#view-chat .msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
#view-chat .v3-chat-input{background:transparent;border-top:0}
#view-chat .v3-chat-input .pill{background:#fff;border:1px solid rgba(26,22,18,.08);box-shadow:0 6px 16px rgba(0,0,0,.14);display:flex;align-items:center;padding-right:10px}
#view-chat .v3-chat-input input{color:var(--espresso)}
#view-chat .v3-chat-wave{color:var(--ink-mute);display:flex;align-items:center}
#view-chat .v3-chat-wave svg{width:20px;height:20px}
#view-chat .v3-chat-input-side{background:#fff;color:var(--espresso);box-shadow:0 4px 12px rgba(0,0,0,.12)}
#view-chat .v3-chat-input-side svg{color:var(--espresso)}
#view-chat .v3-chat-input-send{background:var(--cta-grad);color:#fff;width:42px;height:42px;box-shadow:0 8px 20px rgba(110,95,70,.3)}
#view-chat .v3-chat-input-send svg{color:#fff}

/* ---------- Desktop: centered phone canvas (no sidebar) ---------- */
@media (min-width:1024px){
  body, body.in-app, body:not(.in-app){
    background:radial-gradient(1100px 720px at 50% -8%, #efe7d2 0%, #e2d6ba 68%, #d8cbac 100%) !important;
  }
  .sidebar{display:none !important}
  .app-shell, body.in-app .app-shell, body:not(.in-app) .app-shell{
    display:flex !important;align-items:center;justify-content:center;
    min-height:100dvh;height:100dvh;padding:0 !important;
  }
  .content-area, body.in-app .content-area, body:not(.in-app) .content-area{
    flex:0 0 432px !important;width:432px !important;max-width:432px !important;min-width:0 !important;
    height:min(948px,calc(100dvh - 36px)) !important;
    margin:0 auto !important;border-radius:46px !important;overflow:hidden !important;
    background:var(--bg) !important;display:flex !important;flex-direction:column !important;
    position:relative !important;
    box-shadow:0 50px 110px rgba(60,42,22,.32), 0 0 0 11px #14110d, 0 0 0 12px rgba(255,255,255,.05) !important;
  }
  .content-area .view-host, body:not(.in-app) .view-host, body.in-app .view-host{
    flex:1 !important;height:auto !important;position:relative !important;overflow:hidden !important;
  }
  .content-area .view, body:not(.in-app) .view, body.in-app .view{min-height:0 !important}
  .tabbar{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;display:flex !important}
  body.in-app .view{padding-bottom:var(--tabbar-h) !important}
  .toast{bottom:36px}
}

/* ---------- BoB polish pass ---------- */
.v3-splash-sub{text-transform:none !important;letter-spacing:normal !important}
.v3-splash-headline i{text-shadow:0 2px 14px rgba(0,0,0,.6) !important}
#view-home .greeting .hi i{overflow-wrap:anywhere}
#view-mood .mood-hero{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
#view-mood .mood-hero h2{text-transform:none}
#view-profile .profile-head h2,#view-profile .profile-head h2 i,#view-profile #profileName{color:var(--espresso) !important}
#view-chat .v3-chat-body .msg.her{background:rgba(74,64,50,.46) !important}

/* ── Companions (multi) — web parity with the mobile Companions screen ── */
.companions-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.comp-row{display:flex;align-items:center;gap:13px;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:11px 12px;cursor:pointer;transition:border-color .15s ease}
.comp-row:hover{border-color:var(--copper-2)}
.comp-row.active{border-color:var(--copper-2);border-width:2px;padding:10px 11px}
.comp-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:var(--bg-deep,#e3dac0);display:flex;align-items:center;justify-content:center}
.comp-av img{width:100%;height:100%;object-fit:cover}
.comp-mono{font-family:'Fraunces',serif;font-size:20px;color:var(--copper-3)}
.comp-meta{flex:1;min-width:0}
.comp-name{font-weight:600;color:var(--ink);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-sub{font-size:12.5px;color:var(--ink-mute);margin-top:1px}
.comp-active-dot{width:26px;height:26px;border-radius:50%;background:var(--copper-3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.comp-del{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink-mute);font-size:15px;line-height:1;cursor:pointer;flex:none}
.comp-del:hover{color:var(--danger,#9d5b5b);background:rgba(0,0,0,.05)}

/* Dream Life — "back to normal" exit (over the dark dream photo) */
.v3-dream-exit{display:block;margin:12px auto 0;background:transparent;border:0;color:#fff;opacity:.85;font:600 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.3px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.v3-dream-exit:hover{opacity:1}

/* Mood — "already checked in today" note above the (disabled) save button */
.mood-today-note{display:flex;align-items:center;gap:8px;background:var(--bg-deep,#e3dac0);border:1px solid var(--copper-3);border-radius:14px;padding:11px 14px;font:500 13.5px/1.4 'Inter',system-ui,sans-serif;color:var(--ink);margin-bottom:12px}

/* Chat — per-message timestamps (parity with mobile). A small dark pill keeps
   the time legible over any portrait area (bright or dark). */
#view-chat .v3-chat-body .msg-time{margin:-2px 8px 9px;padding:0 2px}
#view-chat .v3-chat-body .msg-time.me{text-align:right}
#view-chat .v3-chat-body .msg-time.her{text-align:left}
#view-chat .v3-chat-body .msg-time span{display:inline-block;font:600 10.5px/1 'Inter',system-ui,sans-serif;color:rgba(255,255,255,.96);background:rgba(20,14,8,.34);padding:3px 8px;border-radius:9px;letter-spacing:.3px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}