/* ============================================================
   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:'Cal Sans',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;
}