/* ---------------------------------------------------------------- 2. Foundations: sizes you can tap and read */
html{-webkit-text-size-adjust:100%}
body{font-size:16px}
input,select,textarea{font-size:16px}                         /* iOS zooms into anything smaller when you tap it */
.btn{min-height:48px}
.btn.mini{min-height:44px;padding:8px 16px;font-size:.9rem}
.chip{min-height:44px;padding:10px 16px;font-size:.95rem}
.tab{min-height:44px}
.field input,.field textarea,.field select{min-height:50px}
.check{gap:12px;padding:6px 0}
.check input{width:24px;height:24px;margin-top:0;flex:none}
label.radio{display:flex;align-items:center;gap:10px;min-height:44px}
.hint,.note,.hint-line,.item small,small,.fb-title small{font-size:.8rem}
.badge{min-width:22px;height:22px;font-size:.75rem}
.card{padding:20px 16px;border-radius:24px}
.app{padding:12px 12px 20px}
body.has-appbar .app{padding-bottom:100px}                    /* room for the tab bar, only where there is a tab bar */
a{text-underline-offset:3px}
.hint-line a,.note a,.hint a{display:inline-block;padding:7px 2px}   /* a link in a sentence is still a tap target */
.btn.ghost,.back{min-width:44px;min-height:44px}

/* ---------------------------------------------------------------- 3. The bars */
.appbar-in{padding:0 10px;gap:8px}
.brand{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.iconbtn{width:44px;height:44px}
.me-btn{min-width:44px;min-height:44px;justify-content:center}
.appbar .timechip{min-height:44px;padding:4px 12px}
.mainnav{padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
.navbtn{min-height:56px}
.navbtn .lbl{font-size:.75rem;font-weight:600}
.fb-title small{font-size:.78rem}

/* ---------------------------------------------------------------- 4. Home: the mood cards live in styles.css and adapt to the width of the grid (three across on a phone) */
.home-foot{gap:12px}

/* ---------------------------------------------------------------- 5. Landing: fills the screen, one clear choice */
.card.landing{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:16px 16px 22px}
.card.landing .top{flex:none}
.card.landing .top [data-auth="signup"]{display:none}          /* "Start talking" below does the same, so the top keeps just Login */
.card.landing .top .btn{min-height:44px;font-size:.9rem}
.card.landing .hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center}
.card.landing .hero h1{font-size:clamp(2.2rem,11vw,3rem);line-height:1.08}
.card.landing .hero>p{font-size:1rem}
.card.landing .hero .row{flex-direction:column;gap:12px;width:100%}
.card.landing .hero .row .btn.big{flex:none;width:100%;min-height:56px;font-size:1.08rem}

/* ---------------------------------------------------------------- 6. Sign-up and log-in */
.pubbar .btn,.pubbar select{min-height:44px}
.auth-form .btn.primary,.auth-form .btn.big{width:100%;min-height:54px}
.auth-form .chips .chip{flex:1 1 auto}

/* ---------------------------------------------------------------- 7. People in a list (friends, requests, search, history): the name next to the face, buttons below in an even grid */
.item{padding:12px;gap:10px 12px;border-radius:18px}
.item .avatar-bubble,.item .face{flex:none}
.item .grow{flex:1 1 0;min-width:0}
.item .btns{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.item .btns .btn{width:100%;min-height:44px;padding:8px 10px;white-space:nowrap}
.item .btns:has(>:only-child){flex:0 0 auto;display:flex}      /* a single button (Add, Accept) sits at the right of the row */
.item .btns:has(>:only-child) .btn{width:auto;min-width:92px}
.item.tap{cursor:pointer}
.tabs .tab{padding:10px 6px;font-size:.92rem}

/* ---------------------------------------------------------------- 8. Messages: one thing at a time, the box above the keyboard */

/* ---------------------------------------------------------------- 9. Settings: a short list of four groups; tap one to open it */
.setgrp{border:2px solid var(--line);border-radius:18px;background:var(--card);margin:10px 0 0;overflow:hidden}
.setgrp>summary{pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 16px;margin:0;list-style:none}
.setgrp>summary::after{content:'›';font-size:1.6rem;line-height:1;color:var(--muted);transform:rotate(90deg);transition:transform .2s}
.setgrp[open]>summary::after{transform:rotate(-90deg)}
.setgrp .sg-text{display:grid;gap:2px;min-width:0}
.setgrp .sg-t{font-size:1.05rem;font-weight:700}
.setgrp .sg-d{display:block;font-size:.8rem;color:var(--muted)}
.setgrp[open]>summary{border-bottom:2px solid var(--hair2)}
.setgrp .sg-body{padding:14px 16px 18px;gap:18px}
.screen[data-screen="settings"] .head{padding:8px 0 4px}

/* ---------------------------------------------------------------- 10. Plus: the button stays within reach while you look at the plans */
.cta-bar{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;margin:16px auto 6px !important;padding:10px 0;background:linear-gradient(to bottom,transparent,var(--card) 30%)}
.cta-bar .btn{width:100%}

/* ---------------------------------------------------------------- 11. Dialogs rise from the bottom as sheets; search is a full screen of its own */
.overlay{place-items:end center;padding:0}
.modal{width:100%;max-width:560px;border-radius:24px 24px 0 0;border-bottom-width:0;max-height:92vh;max-height:92dvh;overflow:auto;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));position:relative}
.modal::before{content:'';display:block;width:42px;height:5px;border-radius:3px;background:var(--hair2);margin:-8px auto 6px}
.modal .actions{display:grid;grid-template-columns:1fr;gap:10px}
.modal .actions .btn{width:100%}
.pf-head{gap:12px}
.searchpop{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;z-index:25}
.searchpop[hidden]{display:none}
.sp-box{min-height:52px}
.sp-box input{font-size:16px}
.sp-x{width:44px;height:44px}
.searchpop .list{flex:1;max-height:none}
.sp-recent{min-height:48px}
#toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center;font-size:.9rem}

/* ---------------------------------------------------------------- 12. Second pass, from the audit */
.card.auth{grid-template-columns:minmax(0,1fr)}
.card.auth>*{min-width:0}
.auth-form{min-width:0;max-width:100%}
#langLanding,#langPub{width:44px;min-height:44px}
.kind-link{display:inline-flex;align-items:center;min-height:44px}
.screen[data-screen="moodmatch"] .head button{min-height:44px;padding:10px 12px}
#openWeek,#shareWeek{min-height:44px;padding:10px 14px}
label.check{min-height:44px}
.badge,.tg,.kind-title,.ptitle,#pBadge,#pBadgeMe{font-size:.78rem}
.dbars span,.dbars small,.weekrow span,.weekrow small{font-size:.75rem}
#mmFeeling button{min-height:44px;padding:10px 12px;font-size:.95rem}
.plan .tg{font-size:.78rem}
.convo-side{font-size:.75rem}
.msg time{font-size:.75rem}

/* ---------------------------------------------------------------- 13. Polish from reviewing the screens */
.searchpop .list{align-content:start}
#chName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang="hi-Latn"] .hint-line{font-size:.8rem}
/* ---------------------------------------------------------------- 14. Landing on a shorter phone: tighter, and the decoration goes first */
@media (max-height:780px){
  .card.landing{padding:12px 16px 16px}
  .card.landing .hero{gap:12px}
  .card.landing .hero h1{font-size:clamp(1.9rem,9.5vw,2.5rem)}
  .card.landing .hero>p{font-size:.95rem}
}
@media (max-height:700px){
  .card.landing .hero>p:last-child{display:none}
  .card.landing .hero{gap:10px}
}
@media (max-height:760px){.card.landing .hero>p:last-child{display:none}}

/* ---------------------------------------------------------------- 15. The narrowest phones (360px and under): the top bar must still fit with 44px buttons */
@media (max-width:380px){
  .appbar-in{gap:6px;padding:0 8px}
  .appbar .timechip{padding:4px 8px;gap:5px}
  .tbar{width:34px}
}

.calls-pause{margin-left:0}
.calls-pause .btn{white-space:nowrap}

/* ---------------------------------------------------------------- 16. Landing with the phone held sideways: both buttons side by side, above the fold */
@media (max-height:520px){
  .card.landing{min-height:0;padding:10px 16px 14px}
  .card.landing .hero{gap:8px;justify-content:flex-start}
  .card.landing .hero h1{font-size:1.7rem}
  .card.landing .hero>p:not(.hint-line):not(.err){display:none}
  .card.landing .hero .row{flex-direction:row}
  .card.landing .hero .row .btn.big{flex:1 1 0;min-height:48px}
}

/* ---------------------------------------------------------------- 17. Text buttons ("Change", "Not ready to talk? Just check in") are real tap targets */
.linkbtn{min-height:44px;padding:10px 6px;display:inline-flex;align-items:center}

/* ---------------------------------------------------------------- 18. Landing header on a very narrow phone (320px): the logo ring alone, so the three buttons stay on one row */
@media (max-width:340px){
  .card.landing .top .logo{font-size:0;gap:0}
  .card.landing .top-actions{gap:6px}
}

/* ---------------------------------------------------------------- 19. The "nobody is online" panel keeps its Cancel button on screen even with 44px text buttons and Hindi's longer lines */
@media (max-width:480px){
  .finding.few-open{padding:12px 14px;gap:6px}
  .few{gap:4px}
}
p .linkbtn,.hint-line .linkbtn{min-height:0;padding:4px 2px;display:inline}      /* a text button inside a sentence stays part of the line; the stand-alone ones above keep 44px */

/* ---------------------------------------------------------------- Sign up and Log in (phone): one screen, one hairline weight, a clear order
   The page is the card (no box around it). Tabs are plain text with an underline, fields are soft fills with a 1px edge, "Create account" is
   the one blue button, and "Start as a guest" is a quiet secondary under it. The two long legal paragraphs shrink to one short line each. */
:root{--hair:color-mix(in srgb,var(--ink) 16%,transparent)}
html:has(.screen[data-screen="auth"]:not([hidden])),body:has(.screen[data-screen="auth"]:not([hidden])),body:has(.screen[data-screen="auth"]:not([hidden])) .app{background:var(--card)}
body:has(.screen[data-screen="auth"]:not([hidden])) .pubbar{border-bottom:1px solid var(--hair)}
body:has(.screen[data-screen="auth"]:not([hidden])) .app{padding:0 20px 8px}
.screen[data-screen="auth"] .card.auth{border:0;box-shadow:none;background:transparent;border-radius:0;min-height:calc(100dvh - 58px - 8px)}
.screen[data-screen="auth"] .card.auth > .auth-form{padding:4px 0 0;gap:8px;justify-content:center}
.screen[data-screen="auth"] .card.auth > .auth-form > .tabs{order:1}
.screen[data-screen="auth"] #authTitle{order:2}
.screen[data-screen="auth"] #signupForm,.screen[data-screen="auth"] #loginForm{order:3}
.screen[data-screen="auth"] #socialRow{order:4}
.screen[data-screen="auth"] .quickstart{order:5}
.screen[data-screen="auth"] #acctDivider,.screen[data-screen="auth"] #orDivider{display:none}      /* the two thick dividers go; one hairline sits above the guest option */

.screen[data-screen="auth"] .tabs{border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:0;gap:0}
.screen[data-screen="auth"] .tab{min-height:40px;padding:0 4px;border-radius:0;background:transparent;color:var(--muted);font-size:.95rem;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.screen[data-screen="auth"] .tab[aria-selected="true"]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
.screen[data-screen="auth"] #authTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}      /* still the page's heading for screen readers; the tab above already says it */

.screen[data-screen="auth"] form.auth-form{padding:0;gap:8px}
.screen[data-screen="auth"] .field{gap:2px;font-size:.75rem;line-height:1.25;font-weight:500;color:var(--muted)}
.screen[data-screen="auth"] .field input{min-height:44px;padding:8px 14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card));color:var(--ink);font-size:16px}
.screen[data-screen="auth"] .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.screen[data-screen="auth"] .two{gap:8px}
.screen[data-screen="auth"] .chips{display:grid;grid-template-columns:1fr 1fr;gap:6px}      /* two by two, balanced */
.screen[data-screen="auth"] .chip{min-height:40px;padding:4px 10px;border:1px solid var(--hair);font-size:.85rem;text-align:center;white-space:nowrap}
.screen[data-screen="auth"] .chip[aria-pressed="true"]{border-color:var(--brand)}
.screen[data-screen="auth"] .err{min-height:0;font-size:.8rem}
.screen[data-screen="auth"] .err:empty{display:none}
.screen[data-screen="auth"] form button[type="submit"]{order:2;min-height:48px;border:0;border-radius:12px;font-size:1rem;font-weight:600}
.screen[data-screen="auth"] #signupForm .hint-line{order:3}
.screen[data-screen="auth"] .hint-line{font-size:.75rem;line-height:1.35;text-align:center;color:var(--muted)}
.screen[data-screen="auth"] .hint-line a{display:inline;padding:4px 0;min-height:0;margin:0;line-height:inherit}      /* links inside the sentence stay on the line; they were adding gaps */

.screen[data-screen="auth"] .quickstart{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--hair);gap:6px}
.screen[data-screen="auth"] #guestBtn{min-height:46px;background:transparent;color:var(--ink);border:1px solid var(--hair);border-radius:12px;box-shadow:none;font-size:.95rem;font-weight:600}
.screen[data-screen="auth"] #socialRow{margin-top:2px;gap:6px}
.screen[data-screen="auth"] #socialRow .social-cap{display:block;margin:2px 0 0}
.social-row .btn.social{min-height:46px;border-radius:12px;font-size:.88rem}
@media (max-width:379px){.social-row .btn.social span{display:none}}      /* a narrower phone: the logos alone (the buttons keep their full names for screen readers), so no label is ever clipped */
.up-social .social-cap{display:block}

/* Log in has only two fields, so it gets roomier sizes and sits a little above the middle (the optical centre) */
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) > .auth-form{padding-bottom:7vh}      /* the same outer gap as Sign up (8px), so the first field sits at the same height on both tabs */
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) form.auth-form{gap:12px}
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) .field input{min-height:50px}
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) form button[type="submit"]{min-height:50px}
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) #guestBtn{min-height:50px}
.screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) .quickstart{margin-top:8px;padding-top:16px}

/* a shorter phone: the same page, tightened */
@media (max-height:760px){
  .screen[data-screen="auth"] .card.auth > .auth-form,.screen[data-screen="auth"] form.auth-form{gap:5px}
  .screen[data-screen="auth"] .field input{min-height:40px;padding:4px 14px}
  .screen[data-screen="auth"] .chip{min-height:40px;padding:4px 10px}
  .screen[data-screen="auth"] .chips{gap:5px}
  .screen[data-screen="auth"] form button[type="submit"]{min-height:46px}
  .screen[data-screen="auth"] .quickstart{margin-top:2px;padding-top:8px;gap:5px}
  .screen[data-screen="auth"] #guestBtn{min-height:44px}
  .screen[data-screen="auth"] .tab{min-height:40px}
  .screen[data-screen="auth"] .hint-line{line-height:1.3}
  body:has(.screen[data-screen="auth"]:not([hidden])) .app{padding-bottom:2px}
  .screen[data-screen="auth"] .card.auth:has(#loginForm:not([hidden])) > .auth-form{padding-bottom:3vh}
}

/* ---------------------------------------------------------------- Age check (phone): a centred dialog, not a bottom sheet
   One card with a soft shadow (no hard border, no grab handle), a round 18+ badge, a centred title and one short line, the date of birth,
   the gender choices two by two, and one full-width Continue. Sizes are for a thumb: 44px fields, a 50px button, 12px+ text. */
#ageOverlay{place-items:center;padding:20px}
#ageOverlay .modal{width:min(100%,400px);max-height:none;border:0;border-radius:22px;padding:22px 20px 20px;gap:12px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4)}
#ageOverlay .modal::before{content:'18+';display:grid;place-items:center;width:56px;height:56px;margin:0 auto 2px;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
#ageOverlay h2{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
#ageOverlay .age-sub{font-size:.875rem;line-height:1.45;margin:0 4px 4px}
#ageOverlay .field{text-align:left;gap:4px;font-size:.75rem;line-height:1.25;font-weight:500;color:var(--muted)}
#ageOverlay .field input{min-height:48px;padding:8px 14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card));color:var(--ink);font-size:16px}
#ageOverlay .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
#ageOverlay .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#ageOverlay .chip{min-height:44px;padding:4px 10px;border:1px solid var(--hair);font-size:.875rem;text-align:center;white-space:nowrap}
#ageOverlay .chip[aria-pressed="true"]{border-color:var(--brand)}
#ageOverlay .err{min-height:0;font-size:.8rem;text-align:center}
#ageOverlay .err:empty{display:none}
#ageOverlay .actions{margin-top:2px}
#ageOverlay .actions .btn{min-height:50px;border:0;border-radius:12px;font-size:1rem;font-weight:600}
@media (max-height:640px){#ageOverlay{padding:12px}#ageOverlay .modal{gap:8px;padding:16px 18px 16px}#ageOverlay .modal::before{width:44px;height:44px;font-size:.95rem}#ageOverlay .age-sub{margin-bottom:0}}

/* ---------------------------------------------------------------- The phone app shell: flat white pages
   Inside the app, every page except Home, the call and the landing/sign-in pages is plain content on a white page (body.flat-page is set by the screen switcher):
   no box, no heavy border, no shadow, like Sign up. One set of numbers: page side padding 16px, section gap 12-14px, body 15px, small 13px, label 12px, hairline 1px. */
body.flat-page,body.flat-page .app{background:var(--card)}
body.flat-page .app{padding-left:16px;padding-right:16px}
body.flat-page .screen > .bento > .card,body.flat-page .screen > .card{border:0;box-shadow:none;background:transparent;border-radius:0;padding:8px 0 16px}
body.flat-page .head h1{font-size:1.375rem;line-height:1.2}
body.flat-page .head .h-light{font-size:.9rem !important}

/* shared components on flat pages */
body.flat-page .btn{border:1px solid var(--hair);border-radius:12px;box-shadow:none}
body.flat-page .btn.primary,body.flat-page .btn.danger{border-color:transparent}
body.flat-page .btn.mini{min-height:40px;padding:6px 12px;font-size:.85rem}
body.flat-page .chip{border:1px solid var(--hair)}
body.flat-page .chip[aria-pressed="true"]{border-color:var(--brand)}
body.flat-page .tabs{border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:0;gap:0}
body.flat-page .tab{min-height:44px;border-radius:0;background:transparent;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
body.flat-page .tab[aria-selected="true"]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
body.flat-page .item,body.flat-page .opt{border:1px solid var(--hair);border-radius:14px;box-shadow:none}
body.flat-page .field input,body.flat-page .field textarea,body.flat-page .field select{border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
body.flat-page .field input:focus,body.flat-page .field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}

/* gender: one column, the picture on the left, the label never wraps */

/* friends: the buttons on each friend sit in an even three-column grid */
body[data-page="friends"] #friendList .item .btns,body[data-page="history"] .item .btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;flex:1 1 100%}
body[data-page="friends"] #friendList .item .btns .btn,body[data-page="history"] .item .btns .btn{min-width:0;padding:6px 4px;white-space:nowrap}

/* chat: back, face and name on one row; Call, Block and Report together on the next */
body.flat-page .screen > .card.msgs-card{padding:0}

/* invite: the three numbers sit side by side */
body[data-page="invite"] #inviteStats{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;width:100% !important}

/* sections on a page are separated by a hairline, not boxed */
body.flat-page .panel{border:0;border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none;background:transparent;padding:14px 0}
body.flat-page .setgrp,body.flat-page .pay-row,body.flat-page .banner,body.flat-page .upnudge{border:1px solid var(--hair);border-radius:14px;box-shadow:none}
body.flat-page .vibe{min-height:44px;border:1px solid var(--hair);border-radius:12px;font-size:.9rem;box-shadow:none}

/* feedback: shorter, so it nearly fits one screen */

/* one line weight everywhere on flat pages: the outline colour becomes the soft hairline, and the usual outlined pieces drop to 1px */
body.flat-page{--line:var(--hair)}
body.flat-page :is(.btn,.chip,.tab,.item,.opt,.setgrp,.pay-row,.banner,.vibe,.plan,.msg.them,.field input,.field textarea,.field select,.msgs-search){border-width:1px}
body.flat-page .plan[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
body.flat-page #appbar{border-bottom-width:1px}

/* the call screens use the same hairline weight */
body[data-page="call"]{--line:var(--hair)}
body[data-page="call"] .card.call :is(.btn,.chip,.tab,.voice,.prompt,.games,.chat,input){border-width:1px}

/* games: the tabs share the row with a small round Close, and nothing overlaps */
.card.call .g-head{display:flex;align-items:center;gap:8px;width:100%}
.card.call .g-head .tabs{flex:1 1 0;min-width:0;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:0;gap:0}
.card.call .g-head .tab{flex:1 1 auto;min-width:0;min-height:40px;padding:0 6px;border-radius:0;background:transparent;color:var(--muted);font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:2px solid transparent;margin-bottom:-1px}
.card.call .g-head .tab[aria-selected="true"]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
.card.call #gClose{position:relative;flex:none;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;font-size:.75rem;text-indent:-9999px;overflow:hidden;white-space:nowrap}      /* the word stays for screen readers; a cross is drawn */
.card.call #gClose::before{content:"\2715";position:absolute;inset:0;display:grid;place-items:center;text-indent:0;font-size:1rem;line-height:1}
.card.call #gBody{align-items:start;align-content:center;justify-items:center;flex:1}
.card.call #gBody .btn{min-width:170px;border-radius:12px}

/* dialogs (bottom sheets and the centred one) use the same hairline weight */
.overlay{--line:var(--hair)}
.overlay :is(.btn,.chip,input,textarea,select,.opt,.reason){border-width:1px}

/* ---------------------------------------------------------------- Profile (phone): a compact header, the three shortcuts right under it, lighter stat boxes */
body[data-page="profile"] .pcol{display:flex;flex-direction:column;gap:0}
body[data-page="profile"] .pcol > .pcard{order:1;padding:6px 0 10px}
body[data-page="profile"] .pcol > .links{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:14px 0 14px}
body[data-page="profile"] .pcol > .links .btn{min-width:0;padding:6px 4px;white-space:nowrap}
body[data-page="profile"] .pcol > .panel:not(.pcard):not(.links){order:3}
body[data-page="profile"] .me-av.xl{width:76px;height:76px;font-size:2.4rem}
body[data-page="profile"] .pname{font-size:1.3rem;margin:6px 0 0}
body[data-page="profile"] .pbadges{margin:2px 0}
body[data-page="profile"] .pmeta{font-size:.8rem;margin:2px 0 6px}
body[data-page="profile"] .ptitle{font-size:.8rem}
body[data-page="profile"] .stats{gap:8px}
body[data-page="profile"] .stat{border:1px solid var(--hair);border-radius:14px;box-shadow:none;padding:10px 12px}
body[data-page="profile"] .stat b{font-size:1.25rem}
body[data-page="profile"] .stat span{font-size:.75rem;margin-top:2px}
body[data-page="profile"] .dbars{height:72px;min-height:0}

/* Plus (phone): each plan is a compact row, the name and notes on the left, the price on the right */
body[data-page="recharge"] .plans{gap:12px;margin-top:4px}
body[data-page="recharge"] .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm pr" "pd pr" "sv pr";align-items:center;column-gap:12px;row-gap:1px;padding:12px 14px;border-radius:14px;box-shadow:none;outline:0}
body[data-page="recharge"] .plan .nm{grid-area:nm;font-size:.95rem}
body[data-page="recharge"] .plan .pr{grid-area:pr;font-size:1.45rem}
body[data-page="recharge"] .plan .pd{grid-area:pd}
body[data-page="recharge"] .plan .sv{grid-area:sv}
body[data-page="recharge"] .plan .tg{top:-10px;border-width:1px}


/* setup and feedback screens have no tab bar, so they do not reserve room for one */
body.flow-mode .app{padding-bottom:16px}

/* ---------------------------------------------------------------- Batch 1: one consistent frame
   The top bar, the tab bar and the setup-flow bar keep the same light weight on every page (Home included), so the header never "changes weight" as you move. */
#appbar,#flowbar,.mainnav{--line:var(--hair)}
#appbar,#flowbar{border-bottom-width:1px}
#appbar *,#flowbar *{border-width:1px}
.mainnav{border-top-width:1px}
.mainnav .navbtn .badge{position:absolute;top:1px;left:calc(50% + 8px);margin:0;min-width:18px;height:18px;padding:0 4px;font-size:.75rem;line-height:1}      /* in the corner of the icon, not over it */

/* Landing: the first screen follows the same style as Sign up */
body.is-landing,body.is-landing .app{background:var(--card)}
body.is-landing{--line:var(--hair)}
body.is-landing .card.landing{border:0;box-shadow:none;background:transparent;border-radius:0}
body.is-landing .btn,body.is-landing .iconbtn,body.is-landing .lang-sel{border-width:1px}
body.is-landing .btn{border-radius:12px}
body.is-landing .btn.primary{border-color:transparent}
body.is-landing .card.landing .hero .row .btn.big{border-radius:14px}
body.is-landing .hint-line{line-height:1.35}
body.is-landing .hint-line a{display:inline;padding:4px 0;min-height:0;margin:0;line-height:inherit}

/* Setup pages: more room between the options, and the note sits at the bottom of the screen */
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] > .bento > .card,body[data-page="gender"] .screen[data-screen="gender"] > .bento > .card{display:flex;flex-direction:column;min-height:calc(100vh - 58px - 36px);min-height:calc(100dvh - 58px - 36px)}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .note,body[data-page="gender"] .screen[data-screen="gender"] .note{margin-top:auto;padding-top:14px;text-align:center}

/* Limit: centred in the screen. Match found: full-width buttons anchored at the bottom. Call: the three status chips fit on one row. */
body[data-page="limit"] .screen[data-screen="limit"] .card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:calc(100vh - 58px - 36px);min-height:calc(100dvh - 58px - 36px);padding-bottom:6vh}
body[data-page="found"] .card.found{display:flex;flex-direction:column;min-height:calc(100vh - 58px - 36px);min-height:calc(100dvh - 58px - 36px)}
body[data-page="found"] .found-actions{margin-top:auto;display:grid;grid-template-columns:1fr;gap:10px;padding-top:16px}
body[data-page="found"] .found-actions .btn{width:100%;min-height:50px}
.card.call .call-top > span:nth-child(2){gap:6px !important}      /* they may wrap on a long label (Hindi, Hinglish); wrapping is safer than a row that can run off the screen */
.card.call .call-top .fpill{padding:3px 8px;white-space:nowrap}

/* chat times are readable (12px, normal contrast), and the active avatar button has a quiet ring */
#appbar #meMenuBtn.active{border-width:2px !important;border-color:var(--ink)}

/* dialogs: the same corner shape as the pages (12px), no hard edge on a sheet, and clear bullets in the first-call guide */
.overlay .modal{border:0;box-shadow:0 -10px 40px rgba(0,0,0,.22)}
.overlay .btn{border-radius:12px}
.overlay :is(input,textarea,select){border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
#guideOverlay .perks{padding-left:0 !important;list-style:none !important;display:grid;gap:10px;margin:0}
#guideOverlay .perks li{position:relative;padding-left:22px;list-style:none;font-size:.95rem;line-height:1.4}
#guideOverlay .perks li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ---------------------------------------------------------------- Review round 2: search, friend rows, call chips, empty states */
/* Search: the field keeps its own clear button; the page's close becomes the word Cancel */
.sp-box{border-width:1px;border-radius:12px;padding-right:6px}
#spClose{display:none}
.sp-cancel{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:transparent;color:var(--brand);font-size:1rem;font-weight:600}

/* Friend rows: the main actions first, Remove and Block as quiet red text after them */
body.flat-page .item .btns .btn.quiet{order:9;border-color:transparent;background:transparent;color:var(--danger-ink);font-weight:600}

/* Call chips (chat or games open): the partner's name gets more room than "You", and the pictures are a little smaller */
body .card.call.chat-open #vThem,body .card.call.games-open #vThem{flex:1.8 1 0}      /* 'body' raises this above call-compact.css, which loads later and has an equally specific rule */
body .card.call.chat-open #vYou,body .card.call.games-open #vYou{flex:1 1 0}
.card.call.chat-open .voice .face,.card.call.games-open .voice .face{width:32px}

/* Empty states: a soft card with an icon, not a bare dashed box */
body.flat-page p.empty{border:1px dashed var(--hair);border-radius:14px;padding:28px 18px;text-align:center;color:var(--muted);background:transparent;font-size:.95rem;line-height:1.45}
body.flat-page p.empty::before{display:block;font-size:2rem;line-height:1.2;margin-bottom:6px}
#historyList p.empty::before{content:"\1F3A7"}
#friendList p.empty::before{content:"\1FAF6"}
body[data-page="week"] .weekday{padding:14px 2px;min-height:104px;font-size:.78rem}
body[data-page="week"] .weekday .face{width:86%;font-size:1.5rem}


/* ---------------------------------------------------------------- Review round 3: Find, Messages, Plus, and one-line notes */
/* Notes at the bottom of a page: small, centred, one line */
body.flat-page .note{font-size:.75rem;line-height:1.4;margin:16px 0 0;text-align:center;color:var(--muted)}
body.flat-page .hint{font-size:.75rem;line-height:1.4;text-align:center;color:var(--muted)}

/* Find: room between the tabs, the box, and the results; results never touch each other; the details stay on one line */
body[data-page="friends"] #findPane:not([hidden]){display:flex;flex-direction:column;gap:14px;padding-top:16px}
body[data-page="friends"] #findPane .field.search{margin:0}
body[data-page="friends"] #findHint{margin:0;padding:0 4px}
body[data-page="friends"] #findList{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
body[data-page="friends"] #findList .item,body[data-page="friends"] #reqPane .item{box-sizing:border-box;width:auto;min-width:0;padding:12px 14px;gap:12px;flex-wrap:nowrap;align-items:center}
body[data-page="friends"] #findList .item .grow,body[data-page="friends"] #reqPane .item .grow{min-width:0}
body[data-page="friends"] #findList .item small,body[data-page="friends"] #reqPane .item small{font-size:.75rem;line-height:1.35;display:block;margin-top:1px}      /* the full text is shown; it wraps to a second line when needed */
body[data-page="friends"] #findList .item .btn,body[data-page="friends"] #reqPane .item .btn{flex:none;min-width:84px}
body[data-page="friends"] #reqPane{display:grid;gap:10px;padding-top:12px}
body[data-page="friends"] #reqPane:not([hidden]){display:grid}

/* Messages list: a centred title like every other page, a field like every other field, rows with room and a hairline between them */

/* Chat: one tidy header (back, picture, name and state), the three actions in an even row below, a calm composer, a one-line note */

/* Plus: a compact heading, even spacing between sections, the minute pack as a row like the plans, the code field on its own line */
body[data-page="recharge"] .screen[data-screen="recharge"] .head{padding:0 0 6px}
body[data-page="recharge"] .screen[data-screen="recharge"] .head .h-bold{font-size:1.6rem !important}
body[data-page="recharge"] .screen[data-screen="recharge"] .head .h-light{font-size:.95rem !important}
body[data-page="recharge"] .screen[data-screen="recharge"] .card > div[style*="display:grid"]{gap:28px !important;margin-top:28px !important}
body[data-page="recharge"] .screen[data-screen="recharge"] .actions.cta-bar{margin:20px auto 0 !important}
body[data-page="recharge"] .sect{font-size:1.05rem;margin:0 0 10px}
body[data-page="recharge"] #packs .pay-row{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
body[data-page="recharge"] #packs .pay-row > div{flex:1;min-width:0;display:grid;gap:2px}
body[data-page="recharge"] #packs .pay-row small{font-size:.8125rem;line-height:1.35;color:var(--muted)}
body[data-page="recharge"] #packs .pay-row .btn{flex:none;min-width:76px;min-height:44px}
body[data-page="recharge"] #couponIn{flex:1 1 100% !important;min-width:100% !important;min-height:48px}
body[data-page="recharge"] #couponApply,body[data-page="recharge"] #couponRedeem{flex:1 1 calc(50% - 4px);min-height:44px;padding:0 8px;font-size:.85rem;white-space:nowrap}
body[data-page="recharge"] .screen[data-screen="recharge"] .set{margin-top:28px !important}
body[data-page="recharge"] .perks li{margin:.5em 0}
body[data-page="recharge"] .screen[data-screen="recharge"] .card{padding-bottom:36px}
body.flat-page .note br.nl{display:inline}

/* ---------------------------------------------------------------- Review round 4: Requests, and a light/dark button inside the app */
/* Requests: the person on the first line (picture, name, details), the actions in an even row below; a sent request keeps its one button on the right */
body[data-page="friends"] #reqPane h3,body[data-page="friends"] #reqPane .sect{font-size:.95rem;margin:10px 0 2px}
body[data-page="friends"] #reqPane .item{flex-wrap:wrap;row-gap:10px;align-items:center}
body[data-page="friends"] #reqPane .item .grow{flex:1 1 0;min-width:0}
body[data-page="friends"] #reqPane .item .btns:has(.btn:nth-child(2)){flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}      /* two buttons share the row in halves, three in thirds */
body[data-page="friends"] #reqPane .item .btns .btn{min-width:0;min-height:42px;padding:0 6px;white-space:nowrap}
body[data-page="friends"] #reqPane .item .btns:not(:has(.btn:nth-child(2))) .btn{min-width:84px}
/* a light/dark button on the Profile page (the avatar opens Profile on a phone, so this is where it lives) */
body[data-page="profile"] .pcard{position:relative}
body[data-page="profile"] .pcard-theme{display:inline-grid;position:absolute;top:4px;right:0;z-index:1}

/* ---------------------------------------------------------------- Plan a call (phone): who it is for, quick choices with real times, a plain summary
   A round avatar and the title; five quick choices as chips (two across, the last one full width); the chosen time in plain words
   ("Wed, 8 Oct . 9:00 PM") instead of a mm/dd/yyyy field; a note; one clear button and a quiet Cancel. The date field only appears for "Pick a time". */
#planOverlay .modal{gap:0;padding:20px 20px calc(18px + env(safe-area-inset-bottom,0px))}
#planOverlay .plan-head{display:flex;align-items:center;gap:14px;margin:2px 0 18px}
#planOverlay .plan-head-text{display:block;min-width:0}
#planOverlay .plan-avatar{display:grid;place-items:center;flex:none;width:56px;height:56px;border:3px solid #0B0B14;border-radius:50%;background:var(--soft);font-size:1.9rem;line-height:1}
#planOverlay #planTitle{margin:0;font-size:1.25rem;font-weight:800;line-height:1.25}
#planOverlay .plan-sub{display:block;margin:3px 0 0;font-size:.875rem;line-height:1.35;color:var(--muted)}
#planOverlay .plan-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#planOverlay .plan-chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:60px;padding:10px 14px;border:1px solid var(--hair);border-radius:14px;background:var(--card);box-shadow:none;color:var(--ink);text-align:left}
#planOverlay .plan-chip b{font-size:.9375rem;font-weight:700;line-height:1.25}
#planOverlay .plan-chip small{font-size:.8125rem;line-height:1.25;color:var(--muted)}
#planOverlay .plan-chip[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 1px var(--brand)}
#planOverlay .plan-chip:active{transform:scale(.985)}
#planOverlay .plan-pick{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:center;gap:8px;min-height:52px}
#planOverlay .plan-pick::before{content:"\1F4C5";font-size:1.1rem;line-height:1}
#planOverlay .plan-when{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:.9375rem;font-weight:600;line-height:1.3}
#planOverlay .plan-when:empty{display:none}
#planOverlay .plan-when::before{content:"\23F0";font-size:1.05rem;line-height:1}
#planOverlay #planAtLabel{display:none}
#planOverlay .modal.plan-custom #planAtLabel{display:grid;margin-top:12px}
#planOverlay .field{gap:6px;margin-top:18px;font-size:.875rem;font-weight:600}
#planOverlay .field input{min-height:48px;padding:8px 14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card));font-size:16px}
#planOverlay .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
#planOverlay #planErr{min-height:0;margin-top:8px;font-size:.875rem;color:var(--danger-ink)}
#planOverlay #planErr:empty{display:none}
#planOverlay .actions{gap:6px;margin-top:20px}
#planOverlay #planGo{min-height:54px;border:0;border-radius:14px;font-size:1.0625rem;font-weight:700}
#planOverlay #planNo{min-height:48px;border:0;background:none;box-shadow:none;color:var(--muted);font-weight:600}
@media (max-height:620px){      /* a short phone: the sheet tightens so "Suggest this time" stays in reach even with the date field open */
  #planOverlay .modal{padding-top:14px}
  #planOverlay .plan-head{margin-bottom:12px}
  #planOverlay .plan-chip{min-height:52px;padding:8px 12px}
  #planOverlay .plan-pick{min-height:46px}
  #planOverlay .plan-when{margin-top:10px;padding:10px 12px}
  #planOverlay .field{margin-top:12px}
  #planOverlay .actions{margin-top:14px}
}

/* the smallest phones (320px): the top bar was 339px wide (logo, search, bell, minutes chip and avatar), which made the whole app zoom out; each piece gives up a few pixels */
@media (max-width:340px){
  #appbar .appbar-in{gap:4px;padding-left:6px;padding-right:6px}
  .appbar-right{gap:4px}
  #searchBtn,#bellBtn,#meMenuBtn{width:40px;height:40px;min-width:40px}
  .appbar .timechip{gap:6px;padding:5px 10px}
  .mainnav{padding-left:2px;padding-right:2px}
  .navbtn{min-width:0;padding-left:0;padding-right:0}
}


/* ---------------------------------------------------------------- Messages and Chat (phone)
   THE LIST: a soft search field, an "Active now" strip of the friends who are online, and rows with a presence dot, a clear unread state
   (bolder name, darker preview, a blue time and a badge) and a divider that starts after the avatar.
   THE CHAT: an open conversation owns the whole screen (no top bar, no tab bar). One header row: back, the same round avatar and presence dot as the
   list, the name with a green "Online now", a round Call button and a More menu holding Block and Report. A soft "Private" notice sits under it.
   Messages are grouped (one group per person per 5 minutes, a time only at the end of a group), a separator marks each new day, and the box is a pill with a round send button. */
body[data-page="messages"] .screen[data-screen="messages"] > .card{padding:0}
body[data-page="messages"] .msgs-layout{height:calc(100vh - 180px);height:calc(100dvh - 180px);min-height:360px}
body[data-page="messages"] .msgs-list{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
body[data-page="messages"] .msgs-list-head{padding:4px 0 10px;text-align:center}
body[data-page="messages"] .msgs-title{font-size:1.375rem;font-weight:800;text-align:center}
body[data-page="messages"] .msgs-search{min-height:48px;margin:0 0 10px;padding:8px 14px 8px 44px;border:0;border-radius:14px;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 14px center / 20px no-repeat;font-size:16px}
body[data-page="messages"] .convo-active{display:block;margin:0 0 6px}
body[data-page="messages"] .convo-active .convo-label{margin:4px 2px 8px;padding:0}
body[data-page="messages"] .act-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
body[data-page="messages"] .act-row::-webkit-scrollbar{display:none}
body[data-page="messages"] .act-av{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px;width:64px;padding:0;border:0;background:none;color:var(--ink)}
body[data-page="messages"] .act-av .rav{width:56px;height:56px;font-size:1.7rem;border:2px solid var(--brand)}
body[data-page="messages"] .act-av .pdot{width:14px;height:14px;right:0;bottom:0}
body[data-page="messages"] .act-name{max-width:64px;overflow:hidden;font-size:.75rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
body[data-page="messages"] .convos{padding:0 0 12px}
body[data-page="messages"] .convo{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 0;border:0;border-radius:0;background:linear-gradient(var(--hair),var(--hair)) right bottom / calc(100% - 66px) 1px no-repeat}
body[data-page="messages"] .convo:active{background-color:var(--soft)}
body[data-page="messages"] .convo .rav{width:52px;height:52px;font-size:1.6rem}
body[data-page="messages"] .convo .pdot{width:14px;height:14px}
body[data-page="messages"] .convo-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
body[data-page="messages"] .convo-name{font-size:1rem;font-weight:600;line-height:1.25}
body[data-page="messages"] .convo-prev{font-size:.875rem;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="messages"] .convo-side{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:6px;font-size:.75rem;color:var(--muted)}
body[data-page="messages"] .convo.unread .convo-name{font-weight:800}
body[data-page="messages"] .convo.unread .convo-prev{color:var(--ink);font-weight:600}
body[data-page="messages"] .convo.unread .convo-side > span{color:var(--brand);font-weight:700}
body[data-page="messages"] .convo-label{margin:14px 2px 2px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* an open conversation: the whole screen */
body[data-page="messages"]:has(.msgs-layout.thread-open) :is(#appbar,.mainnav){display:none}
body[data-page="messages"]:has(.msgs-layout.thread-open) .app{padding:0}
body[data-page="messages"] .msgs-layout.thread-open{height:100vh;height:100dvh;min-height:0}
body[data-page="messages"] .msgs-layout.thread-open .msgs-thread{height:100%}
body[data-page="messages"] .msgs-open{display:flex;flex-direction:column;height:100%;padding:0}
body[data-page="messages"] .chat-head{order:0;display:flex;align-items:center;gap:10px;margin:0;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;border-bottom:1px solid var(--hair);background:var(--card)}
body[data-page="messages"] .chat-head .back-list{position:relative;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;font-size:.75rem;text-indent:-9999px;overflow:hidden;white-space:nowrap}
body[data-page="messages"] .chat-head .back-list::before{content:"";position:absolute;left:17px;top:15px;width:11px;height:11px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);text-indent:0}
body[data-page="messages"] .chat-head #chFace{display:none}
body[data-page="messages"] .chat-head .ch-av{position:relative;display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--soft);font-size:1.45rem;line-height:1}
body[data-page="messages"] .chat-head .ch-av .pdot{width:13px;height:13px}
body[data-page="messages"] .chat-head .grow{flex:1;min-width:0}
body[data-page="messages"] .chat-head .grow h2{margin:0;overflow:hidden;font-size:1.0625rem !important;font-weight:700 !important;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
body[data-page="messages"] .chat-head .nm-av{display:none}
body[data-page="messages"] .chat-head .grow small{display:block;font-size:.8125rem !important;line-height:1.3}
body[data-page="messages"] .chat-head .grow small.on{color:var(--ok-ink,#0F7A3C);font-weight:600}
body[data-page="messages"] .chat-head .btns{position:relative;display:flex;flex:none;align-items:center;gap:6px;margin:0}
body[data-page="messages"] #chCall,body[data-page="messages"] #chMore{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;font-size:.75rem;text-indent:-9999px;overflow:hidden;white-space:nowrap}
body[data-page="messages"] #chCall{background:var(--brand);color:var(--brand-ink)}
body[data-page="messages"] #chCall:disabled{background:var(--soft);color:var(--muted);opacity:1}
body[data-page="messages"] #chMore{display:inline-block;background:none;color:var(--ink)}
body[data-page="messages"] #chCall::before,body[data-page="messages"] #chMore::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;text-indent:0}
body[data-page="messages"] #chCall::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-page="messages"] #chMore::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='19' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='19' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-page="messages"] .ch-menu{display:none}
body[data-page="messages"] .ch-menu.open{position:absolute;top:50px;right:0;z-index:20;display:grid;gap:2px;min-width:180px;padding:6px;border:1px solid var(--hair);border-radius:14px;background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,.18)}
body[data-page="messages"] .ch-menu .btn{justify-content:flex-start;min-height:48px;padding:0 14px;border:0;border-radius:10px;background:none;font-size:.9375rem;font-weight:600;color:var(--ink)}
body[data-page="messages"] .ch-menu #chBlock{color:var(--danger-ink)}
body[data-page="messages"] .msgs-open .hint{order:1;align-self:center;margin:10px 16px 2px;padding:5px 12px;border-radius:999px;background:var(--soft);font-size:.75rem;line-height:1.3;text-align:center;color:var(--muted)}
body[data-page="messages"] .msgs-open .hint::before{content:"\1F512 "}
body[data-page="messages"] #dmMsgs{order:2;flex:1;min-height:0;max-height:none;margin:0;padding:8px 14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain}
body[data-page="messages"] .support{order:3;margin:0 12px 6px}
body[data-page="messages"] #dmForm{order:4;display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);background:var(--card)}
body[data-page="messages"] #dmInput{flex:1;min-width:0;min-height:48px;padding:0 18px;border:0;border-radius:24px;background:var(--soft);font-size:16px}
body[data-page="messages"] #dmInput:focus{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 40%,transparent)}
body[data-page="messages"] #dmForm .btn{position:relative;flex:none;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:0;border-radius:50%;font-size:.75rem;text-indent:-9999px;overflow:hidden;white-space:nowrap;transition:background .15s,color .15s}
body[data-page="messages"] #dmForm .btn::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;text-indent:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-page="messages"] #dmForm:has(#dmInput:placeholder-shown) .btn{background:var(--soft);color:var(--muted)}      /* empty: a quiet grey button; typing turns it blue */
/* the messages */
body[data-page="messages"] .msg{max-width:80%;gap:3px;padding:9px 14px;border:0;border-radius:20px;box-shadow:none;font-size:1rem;line-height:1.4}
body[data-page="messages"] .msg.me{background:var(--brand);color:var(--brand-ink)}
body[data-page="messages"] .msg.them{background:var(--soft);color:var(--ink)}
body[data-page="messages"] .msg.gs{margin-top:10px}
body[data-page="messages"] .msg.me:not(.gs){border-top-right-radius:6px}
body[data-page="messages"] .msg.me:not(.ge){border-bottom-right-radius:6px}
body[data-page="messages"] .msg.them:not(.gs){border-top-left-radius:6px}
body[data-page="messages"] .msg.them:not(.ge){border-bottom-left-radius:6px}
body[data-page="messages"] .msg time{display:none}
body[data-page="messages"] .msg.ge time{display:block;align-self:flex-end;font-size:.75rem;line-height:1.2}
body[data-page="messages"] .msg.them.ge time{color:var(--muted);opacity:1}
body[data-page="messages"] .msg-day{display:block;align-self:center;margin:16px 0 6px;padding:4px 12px;border-radius:999px;background:var(--soft);font-size:.75rem;font-weight:600;color:var(--muted)}
body[data-page="messages"] .msg-day:first-child{margin-top:8px}
body[data-page="messages"] .msg.sys{align-self:center;max-width:90%;padding:10px 16px;background:none;color:var(--muted);font-size:.9375rem;text-align:center}

/* ---------------------------------------------------------------- The two choice pages (phone): "Who do you want to connect" and "Match style" are ONE design
   Step 1 and Step 2 share everything: the same top offset (24px under the bar), the same heading size, the same card (hairline, 20px corners, 12px padding),
   the same 14px gap, the same footer note in the same place. The cards FILL the height between the heading and the note (a grid whose rows share the space, with a
   floor so nothing is squeezed and a ceiling so nothing is oversized), and each picture is as tall as its card, so on a taller phone the pictures grow instead of
   leaving dead bands. The heading is one size for every emotion; only its number of lines changes. */
body[data-page="gender"] .screen[data-screen="gender"],body[data-page="moodmatch"] .screen[data-screen="moodmatch"]{--h:min(5.4vw,1.4375rem)}
body[data-page="gender"] .screen[data-screen="gender"] > .bento > .card,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] > .bento > .card{display:flex;flex-direction:column;min-height:calc(100vh - 58px - 36px);min-height:calc(100dvh - 58px - 36px);padding:24px 0 18px}
body[data-page="gender"] .screen[data-screen="gender"] .head,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .head{margin:0;padding:0;text-align:center}
body[data-page="gender"] .screen[data-screen="gender"] .head h1{margin:0;font-size:var(--h) !important;font-weight:800;line-height:1.25;white-space:nowrap}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #mmLight{margin:0;font-size:min(4.6vw,1.125rem) !important;font-weight:300;line-height:1.3;text-wrap:balance}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #mmBold{margin:6px 0 0;font-size:var(--h) !important;font-weight:800;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .feeling{margin:10px 0 0;font-size:.9rem}
body[data-page="gender"] .screen[data-screen="gender"] .gcards{--rows:5;--rowmin:72px;--rowmax:112px;--iconmax:84px}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #opts{--rows:3;--rowmin:84px;--rowmax:112px;--iconmax:84px}
body[data-page="gender"] .screen[data-screen="gender"] .gcards,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #opts{display:grid;flex:1 1 0;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--rowmin),1fr);align-content:start;gap:14px;width:100%;max-width:none;margin:24px 0 0;padding:0 0 20px;box-sizing:content-box;
  min-height:calc(var(--rows) * var(--rowmin) + (var(--rows) - 1) * 14px);max-height:calc(var(--rows) * var(--rowmax) + (var(--rows) - 1) * 14px)}      /* the cards stay a normal size; spare room is one natural space above the footer note */
body[data-page="gender"] .screen[data-screen="gender"] .gcard,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:0;padding:12px;border:1px solid var(--hair);border-radius:20px;box-shadow:none;text-align:left;grid-column:auto}
body[data-page="gender"] .screen[data-screen="gender"] .gcard .g-art,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt .opt-icon{flex:none;width:auto;height:100%;max-height:var(--iconmax,120px);aspect-ratio:1;margin:0;border-radius:18px;object-fit:cover;object-position:50% 25%}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt .opt-icon img{display:block;width:100%;height:100%;object-fit:cover}
body[data-page="gender"] .screen[data-screen="gender"] .gcard span,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt h3{margin:0;font-size:1.25rem;font-weight:700;line-height:1.2}
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt > div:not(.opt-icon){flex:1;min-width:0}
body[data-page="gender"] .screen[data-screen="gender"] .gcard span{text-wrap:balance}      /* "Women & non-binary" breaks as Women & / non-binary, never at the hyphen */
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt p{display:-webkit-box;margin:4px 0 0;overflow:hidden;font-size:.9375rem;line-height:1.35;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}
body[data-page="gender"] .screen[data-screen="gender"] .gcard[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 1px var(--brand)}
body[data-page="gender"] .screen[data-screen="gender"] .gcard:active,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt:active{transform:scale(.985)}
body[data-page="gender"] .screen[data-screen="gender"] .gcard:focus-visible,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
body[data-page="gender"] .screen[data-screen="gender"] .note{margin:auto 0 0;padding:0 0 6px;text-align:center}      /* its list fills the screen, so the note ends up at the bottom */
body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .note{margin:0;padding:0 0 6px;text-align:center}      /* the note sits right under the cards it explains, not stranded at the bottom of the screen */
@media (max-height:660px){      /* a short phone: tighter paddings and gaps so five choices (and three taller ones) still fit */
  body[data-page="gender"] .screen[data-screen="gender"] > .bento > .card,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] > .bento > .card{padding-top:16px}
  body[data-page="gender"] .screen[data-screen="gender"] .gcards,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #opts{gap:10px;margin-top:16px;padding:0 0 14px;min-height:calc(var(--rows) * var(--rowmin) + (var(--rows) - 1) * 10px)}
  body[data-page="gender"] .screen[data-screen="gender"] .gcards{--rowmin:66px}
}
@media (max-height:600px){      /* the smallest screens (320x568): as compact as the words allow */
  body[data-page="gender"] .screen[data-screen="gender"] > .bento > .card,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] > .bento > .card{padding-top:12px}
  body[data-page="gender"] .screen[data-screen="gender"] .gcards,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #opts{gap:8px;margin-top:12px;padding:0 0 10px;min-height:calc(var(--rows) * var(--rowmin) + (var(--rows) - 1) * 8px)}
  body[data-page="gender"] .screen[data-screen="gender"] .gcards{--rowmin:60px}
  body[data-page="moodmatch"] .screen[data-screen="moodmatch"] #opts{--rowmin:76px}
  body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .feeling{margin-top:6px}
}
@media (max-width:340px){      /* the smallest phones: slightly smaller words, and room for a third line, so a long Hindi or Hinglish description is never cut */
  body[data-page="gender"] .screen[data-screen="gender"] .gcard span,body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt h3{font-size:1.1rem}
  body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .opt p{font-size:.75rem}
  body[data-page="moodmatch"] .screen[data-screen="moodmatch"] .feeling{font-size:.8125rem;gap:4px}      /* so "Aap feel kar rahe ho: Ghabrahat  badlo" stays on one line */
}


/* ---------------------------------------------------------------- Call feedback (phone): one question at a time, room to breathe
   The person you just talked to, the question, big stars. Only after you rate do the follow-up questions slide in below the stars.
   Then the person actions, the audio checkbox, a comment, and Submit. The page scrolls like any form; nothing is squeezed to fit.
   On a phone the order is: the reconnect banner, the person, then the question (the markup keeps the laptop order). */
body[data-page="feedback"] .screen[data-screen="feedback"] > .card{display:flex;flex-direction:column;padding:10px 0 32px;background:transparent}
body[data-page="feedback"] #reconnect{order:-3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px;padding:12px 14px;border:0;border-radius:14px;background:var(--soft);font-size:.875rem;line-height:1.4;flex-wrap:nowrap}
body[data-page="feedback"] #reconnect .btn{flex:none;min-height:44px}
body[data-page="feedback"] .fb-person{order:-2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 0}
body[data-page="feedback"] .fb-face{position:relative;display:grid;place-items:center;width:88px;height:88px;border:3px solid #0B0B14;border-radius:50%;overflow:hidden;font-size:2.4rem;line-height:1;background:linear-gradient(180deg,var(--g1),var(--g2))}
body[data-page="feedback"] .fb-face img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;pointer-events:none}
body[data-page="feedback"] .fb-person b{font-size:1.0625rem;font-weight:700;line-height:1.3;text-align:center}
body[data-page="feedback"] .screen[data-screen="feedback"] .head{order:-1;padding:4px 0 6px !important;margin:0;text-align:center}
body[data-page="feedback"] .screen[data-screen="feedback"] .head h1{font-size:1.625rem;line-height:1.2}
body[data-page="feedback"] .fb{display:flex;flex-direction:column;gap:28px;padding:10px 0 0}
body[data-page="feedback"] .fb h2{margin:0 0 12px;font-size:.9375rem;font-weight:700;line-height:1.3}
body[data-page="feedback"] .fb > div:first-child h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}      /* the big heading already asks the question */
body[data-page="feedback"] .stars{justify-content:center;gap:8px}
body[data-page="feedback"] .star{width:52px;height:52px;padding:3px}
body[data-page="feedback"] .stars + .fb-hint{display:block;margin:10px 0 0;font-size:.8125rem;line-height:1.4;text-align:center;color:var(--muted)}
body[data-page="feedback"] .fb:has(.star[aria-pressed="true"]) .fb-hint{display:none}
/* the follow-ups appear once you have rated */
body[data-page="feedback"] .fb:not(:has(.star[aria-pressed="true"])) .fb-opt{display:none}
@media (prefers-reduced-motion:no-preference){body[data-page="feedback"] .fb .fb-opt{animation:fbIn .24s ease-out}@keyframes fbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}}
body[data-page="feedback"] #heard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid var(--hair);border-radius:14px}
body[data-page="feedback"] #heard .vibe{min-height:48px;padding:0 6px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:.9375rem;font-weight:600}
body[data-page="feedback"] #heard .vibe + .vibe{border-left:1px solid var(--hair)}
body[data-page="feedback"] #vibes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-page="feedback"] #vibes .vibe{min-height:52px;padding:0 12px;border:1px solid var(--hair);border-radius:14px;box-shadow:none;font-size:.9375rem;font-weight:600}
body[data-page="feedback"] #vibes .vibe::before{font-size:1.15rem;line-height:1}
body[data-page="feedback"] #vibes .vibe[data-v="good"]::before{content:"\1F60A"}
body[data-page="feedback"] #vibes .vibe[data-v="okay"]::before{content:"\1F610"}
body[data-page="feedback"] #vibes .vibe[data-v="bad"]::before{content:"\1F641"}
body[data-page="feedback"] #vibes .vibe[data-v="report"]::before{content:"\1F6A9"}
/* this person: the friend button is a real button, Block is quiet text */
body[data-page="feedback"] .upnudge{border:0;border-radius:16px;background:var(--soft);padding:14px;margin-bottom:18px}
body[data-page="feedback"] #goodNudge{margin:0 0 12px;font-size:.875rem;line-height:1.45;color:var(--muted)}
body[data-page="feedback"] .fb .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin:0}
body[data-page="feedback"] #fbFriend{min-height:48px;border-radius:12px;font-weight:600}
body[data-page="feedback"] #fbBlock{min-height:48px;padding:0 14px;border:0;background:none;box-shadow:none;font-weight:600;color:var(--danger-ink)}
body[data-page="feedback"] .check{display:flex;align-items:center;gap:12px;min-height:48px;font-size:.9375rem}
body[data-page="feedback"] .check input{flex:none;width:22px;height:22px;margin:0}
body[data-page="feedback"] .field{display:flex;flex-direction:column;gap:0}
body[data-page="feedback"] .field h2{margin:0 0 10px !important}
body[data-page="feedback"] .field textarea{min-height:104px;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card));font-size:16px;line-height:1.45;resize:none}
body[data-page="feedback"] #sendFb{min-height:54px;margin-top:2px;border:0;border-radius:14px;font-size:1.0625rem;font-weight:700}
/* what to do next: a clear order, Submit first, then a quiet way on */
body[data-page="feedback"] .after{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:18px 0 0}
body[data-page="feedback"] #newChat{min-height:52px;border:0;border-radius:14px;font-weight:700}      /* the main way on; it steps back to an outline while Submit is the main action */
body[data-page="feedback"] .screen[data-screen="feedback"] .card:has(.star[aria-pressed="true"]):not(:has(#fbThanks:not([hidden]))) #newChat{border:1px solid var(--hair);background:transparent;color:var(--ink);font-weight:600}
body[data-page="feedback"] #goHome{min-height:48px;border:0;background:none;box-shadow:none;color:var(--muted);font-weight:600}
body[data-page="feedback"] .screen[data-screen="feedback"] .card:has(#fbThanks:not([hidden])) .head{display:none}      /* after submitting, the thanks replaces the question */
body[data-page="feedback"] .thanks{padding:24px 0 8px}


/* ---------------------------------------------------------------- Pay sheet (phone): a modern checkout
   A clear header (title and plan, a big amount), a small Test mode pill instead of the dashed box, four method tiles with icons, a form area that is always
   the same height so the sheet never jumps when you change method, UPI apps and banks as even two-column tiles, Expiry and CVV side by side, the test-only
   checkbox as one quiet line, a Pay button with a lock (grey until the form is complete) and a quiet Cancel. The waiting and result screens get a larger
   status mark and a clean receipt. A laptop keeps its own checkout. */
#payOverlay .modal.pay{padding:16px 18px 0;max-height:94vh;max-height:94dvh}
#payOverlay #payMain{display:flex !important;flex-direction:column;gap:0 !important}
#payOverlay #payMain[hidden]{display:none !important}      /* once you have paid (or while waiting), the form must go away */
#payOverlay .pay-top{align-items:center;padding:6px 0 14px;border-bottom:1px solid var(--hair)}
#payOverlay .pay-top h2{margin:0;font-size:1.125rem;font-weight:800;line-height:1.25}
#payOverlay .pay-top small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.3}
#payOverlay .pay-top .amt{font-size:1.75rem;font-weight:800;letter-spacing:-.01em;line-height:1}
#payOverlay .demo{display:flex;align-items:center;gap:8px;align-self:flex-start;margin:12px 0 0;padding:5px 12px;border:0;border-radius:999px;background:var(--soft);color:var(--ink);font-size:.75rem;font-weight:600;line-height:1.3}
#payOverlay .demo::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#E0A100}
#payOverlay .paytabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;border:0}
#payOverlay .paytabs .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:8px 2px;border:1px solid var(--hair);border-radius:14px;background:var(--card);box-shadow:none;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--ink)}
#payOverlay .paytabs .tab::before{content:"";width:22px;height:22px;background:currentColor}
#payOverlay .paytabs .tab:nth-child(1)::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat}
#payOverlay .paytabs .tab:nth-child(2)::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") center/contain no-repeat}
#payOverlay .paytabs .tab:nth-child(3)::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center/contain no-repeat}
#payOverlay .paytabs .tab:nth-child(4)::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E") center/contain no-repeat}
#payOverlay .paytabs .tab[aria-selected="true"]{border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 1px var(--brand);color:var(--ink)}
#payOverlay #payBody{display:grid !important;gap:14px !important;align-content:start;min-height:268px;margin:16px 0 0}
#payOverlay #payBody .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#payOverlay #payBody .chip{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 12px;border:1px solid var(--hair);border-radius:14px;background:var(--card);font-size:.9375rem;font-weight:600;color:var(--ink)}
#payOverlay #payBody .chip[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 1px var(--brand);color:var(--ink)}
#payOverlay #payBody .divider{font-size:.8125rem}
#payOverlay #payBody .divider::before,#payOverlay #payBody .divider::after{height:1px;background:var(--hair)}
#payOverlay #payBody .field{display:grid;gap:6px;font-size:.8125rem;font-weight:600}
#payOverlay #payBody .field input{min-height:48px;padding:8px 14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--card));font-size:16px;font-weight:400}
#payOverlay #payBody .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
#payOverlay #payBody .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:12px}
#payOverlay #payBody .hint{margin:0;font-size:.8125rem;line-height:1.4;color:var(--muted)}
#payOverlay #failBox{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0 0;padding:0;font-size:.75rem;line-height:1.3;color:var(--muted)}
#payOverlay #failBox input{flex:none;width:18px;height:18px;margin:0}
#payOverlay #payMain .actions{position:sticky;bottom:0;z-index:2;display:grid;gap:6px;margin:12px -18px 0;padding:12px 18px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);background:var(--card)}      /* Pay and Cancel stay pinned at the bottom; on a short phone the form scrolls above them */
#payOverlay #payGo{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border:0;border-radius:14px;font-size:1.0625rem;font-weight:700}
#payOverlay #payGo::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
#payOverlay #payGo:disabled{background:var(--soft);color:var(--muted);opacity:1;cursor:not-allowed}
#payOverlay #payCancel{min-height:48px;border:0;background:none;box-shadow:none;color:var(--muted);font-weight:600}
/* waiting and result */
#payOverlay #payState{align-content:center;gap:14px;min-height:300px;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
#payOverlay .spin{width:56px;height:56px;border-width:5px}
#payOverlay .pstate h2{margin:0;font-size:1.375rem;font-weight:800;line-height:1.25}
#payOverlay .pstate p{max-width:32ch;margin:0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
#payOverlay .okmark{width:80px;height:80px}
#payOverlay .okmark svg{width:42px;height:42px}
#payOverlay .rcpt{gap:0;padding:0 16px;border:1px solid var(--hair);border-radius:16px;font-size:.9375rem}
#payOverlay .rcpt div{padding:12px 0;border-bottom:1px solid var(--hair)}
#payOverlay .rcpt div:last-child{border-bottom:0}
#payOverlay .rcpt span:last-child{font-weight:700;color:var(--ink);text-align:right}
#payOverlay .pstate .actions{display:grid;gap:6px;margin-top:6px}
#payOverlay .pstate .actions .btn{min-height:54px;border-radius:14px;font-weight:700}
#payOverlay .pstate .actions .btn:not(.primary){min-height:48px;border:0;background:none;box-shadow:none;color:var(--muted);font-weight:600}
/* small labels are never under 12px on a phone (the Plus pill in the top bar, the Paid tag in the payment history) */
.timechip .plusword,.tag-ok{font-size:.75rem}

/* ---------------------------------------------------------------- Landing on a phone: the illustration pinned to the bottom edge
   The top bar, then the headline, the text and the two buttons together in the middle of the room that is left, then the whole picture at full width, flush with the
   bottom of the screen. */
body.is-landing .app{padding-bottom:0}
.card.landing{gap:0;padding:12px 16px 0;height:max(520px,calc(100vh - 16px));height:max(520px,calc(100dvh - 16px))}      /* a definite height, so the picture (not the page) gives way on a short phone */
.card.landing .hero{display:contents}
.card.landing .hero > h1{order:1;margin:auto 0 0;text-align:center;font-size:clamp(2rem,10vw,2.55rem)}
.card.landing .hero > p:not(.hint-line):not(.err):not(:last-child){order:2;margin:10px auto 0;text-align:center;font-size:.9375rem;line-height:1.45}
.card.landing .hero > .row{order:3;margin:16px 0 0;gap:10px}
.card.landing .hero .row .btn.big{min-height:52px}
.card.landing .hero > .hint-line{order:4;margin:14px -4px 0;font-size:.75rem;letter-spacing:-.01em}
.card.landing .hero > .err{order:5}
.card.landing .hero > p:last-child{order:6;margin:10px auto auto;text-align:center}
.card.landing .land-art{order:7;flex:0 1 auto;min-height:100px;margin:12px -16px 0;aspect-ratio:1.878}
@media (min-height:800px){      /* a tall phone has room: the headline and the text go back up to their larger size */
  .card.landing .hero > h1{font-size:clamp(2.4rem,11.6vw,3.05rem)}
  .card.landing .hero > p:not(.hint-line):not(.err):not(:last-child){font-size:1rem;margin-top:14px}
}
@media (max-height:600px){      /* the smallest screens (320x568): a little tighter so Hinglish still fits without scrolling */
  .card.landing{padding-top:8px}
  .card.landing .hero > h1{font-size:clamp(1.7rem,9vw,2rem)}
  .card.landing .hero > p:not(.hint-line):not(.err):not(:last-child){font-size:.875rem;margin-top:6px}
  .card.landing .hero > .row{margin-top:10px}
  .card.landing .hero > .hint-line{margin-top:10px}
}

/* ---------------------------------------------------------------- Landing on a phone: the full subtitle on two lines
   Both sentences and the tagline stay. The subtitle is sized to the screen (12.5px on a 390px phone, 12px on a 360px phone, never below 12px or above 13px),
   a little wider than the text column and balanced, so it takes two lines instead of three. The small print uses the full width. */
.card.landing{padding-left:12px;padding-right:12px}
.card.landing .land-art{margin-left:-12px;margin-right:-12px}
.card.landing .hero > p:not(.hint-line):not(.err):not(:last-child){max-width:none;margin:10px -4px 0;font-size:clamp(12px,3.2vw,13px);letter-spacing:-.01em;line-height:1.4;text-wrap:balance}
.card.landing .hero > .hint-line{max-width:none !important;text-wrap:balance}

/* ---------------------------------------------------------------- Consistency pass (phone)
   One set of rules so the whole app feels like one product: toasts at the top (never on top of a sheet's buttons), Sign up and Log in
   top-aligned (the tabs stay put), the age check as a bottom sheet like every other dialog, Home as a flat page with the same soft cards as the rest, soft borders on
   the report options and the search box, and one look for every empty list, with a next step. */
#toast{top:calc(env(safe-area-inset-top,0px) + 10px);bottom:auto;transform:translate(-50%,-14px);width:max-content;max-width:calc(100vw - 24px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
#toast.show{transform:translate(-50%,0)}
.screen[data-screen="auth"] .card.auth > .auth-form{justify-content:flex-start;padding-top:18px}
#ageOverlay{place-items:end center;padding:0}
#ageOverlay .modal{position:relative;width:100%;max-width:none;border-radius:22px 22px 0 0;padding:24px 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.22)}
#ageOverlay .modal::after{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--hair)}
.screen[data-screen="mood"] .home-main{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 4px}
.screen[data-screen="mood"] .mood-tile{border:1px solid var(--hair);border-radius:16px;box-shadow:none}
.radio{border:1px solid var(--hair)}
.radio:has(input:checked){border-color:var(--brand);background:var(--soft)}
.sp-box{border-color:var(--hair);background:var(--soft)}
.sp-box:focus-within{border-color:var(--brand)}
/* every empty list looks the same: a soft dashed card, an icon, the sentence, and a way forward */
body.flat-page p.empty,#convoList p.rail-empty{display:block;border:1px dashed var(--hair);border-radius:14px;padding:28px 18px;text-align:center;color:var(--muted);background:transparent;font-size:.95rem;line-height:1.45}
#convoList p.rail-empty::before{content:"\1F4AC";display:block;font-size:2rem;line-height:1.2;margin-bottom:6px}
.empty-cta{display:flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;margin:14px auto 0;padding:0 22px;border:0;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-size:.9375rem;font-weight:700}
.screen[data-screen="mood"] .home-head{padding-top:14px}      /* the same breathing room under the top bar as the other pages' headings */

/* ---------------------------------------------------------------- Page titles: one size, one distance under the top bar
   Every top-level page title is 22px, and its first line of text starts 37px below the top bar (it used to be anywhere from 25 to 59px, and Recharge and Invite were larger). */
body.flat-page .screen[data-screen="friends"] .head,
body.flat-page .screen[data-screen="history"] .head,
body.flat-page .screen[data-screen="week"] .head,
body.flat-page .screen[data-screen="settings"] .head{padding-top:8px}
body[data-page="recharge"] .screen[data-screen="recharge"] .head{padding:8px 0 6px}
body[data-page="recharge"] .screen[data-screen="recharge"] .head .h-bold{font-size:1.375rem !important}
body[data-page="messages"] .msgs-list-head{padding-top:16px}
.screen[data-screen="mood"] .home-head{padding-top:26px}
.screen[data-screen="invite"] h1{font-size:1.375rem !important;margin-top:8px}

/* ---------------------------------------------------------------- Consistency pass, part 2 (phone)
   A friend row shows the round avatar, like Requests and Find (the "Feeling ..." line still says how they feel); the person sheet has one clear main button, a quiet Close and a
   quiet red Block, like the pay and plan sheets; and every popover (notifications, search, account) has the same soft border and shadow as the rest of the app. */
.item:has(.ab-phone) > .face{display:none}
.item .ab-phone{display:grid}
.item .nm-av{display:none}
#personOverlay .actions{display:grid;gap:6px;margin-top:12px}
#personOverlay #pfMain{min-height:54px;border-radius:14px;font-size:1.0625rem;font-weight:700}
#personOverlay #pfClose{min-height:48px;border:0;background:none;box-shadow:none;color:var(--muted);font-weight:600}
#personOverlay .pf-more{display:flex;justify-content:center;gap:4px;margin-top:0}
:root{--danger-text:#C42740}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--danger-text:#FF8696}}
:root[data-theme="dark"]{--danger-text:#FF8696}
#personOverlay .pf-more .btn{min-height:44px;padding:0 18px;border:0;background:none;box-shadow:none;color:var(--danger-text);font-weight:600}
.pop{border:1px solid var(--hair);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.2)}
body[data-page="mood"],body[data-page="mood"] .app{background:var(--card)}      /* Home is white like every other page (it was the only grey one) */

/* Sign up and Log in WITH the provider buttons: the caption goes (the brand buttons say what they are) and a few gaps tighten, so the page is no taller than before */
.screen[data-screen="auth"] .card.auth:has(#socialRow:not([hidden])) #socialRow .social-cap{display:none}
.screen[data-screen="auth"] .card.auth:has(#socialRow:not([hidden])) > .auth-form{gap:6px}
.screen[data-screen="auth"] .card.auth:has(#socialRow:not([hidden])) .quickstart{margin-top:0;padding-top:6px;gap:4px}
.screen[data-screen="auth"] .card.auth:has(#socialRow:not([hidden])) #signupForm.auth-form{gap:6px}
.screen[data-screen="auth"] .card.auth:has(#socialRow:not([hidden])) .field{gap:3px}

/* Recent voices on a phone: the Reconnect button gets its own full-width line (it is the main thing to do, and its countdown must never be clipped),
   and the four tabs of the Friends page stay on one line each, count beside the word */
.item .btns .reconnect-btn{grid-column:1 / -1}
.screen[data-screen="friends"] #friendTabs .tab{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;padding-left:4px;padding-right:4px;font-size:.88rem}