/* ===== FINAL7 — mobile redesign (Tinder/Bumble level). Loaded after app.css. ===== */

/* ---------- Match screen (all widths) ---------- */
#match{ padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)) !important; }
#match .m-inner{ width:100%; max-width:380px; margin:auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; }
#match h1{ font-size:clamp(2rem,9vw,2.6rem) !important; margin:0 0 8px !important; letter-spacing:-.5px; text-shadow:0 4px 20px rgba(0,0,0,.18); }
#match p{ margin:0 0 32px; font-size:1rem; opacity:.95; }
#match .faces{ margin:24px 0 20px !important; display:flex; justify-content:center; align-items:center; }
#match .faces img{ width:min(38vw,150px) !important; height:min(38vw,150px) !important; border:4px solid #fff !important; box-shadow:0 12px 32px rgba(0,0,0,.25); }
#match .faces img:first-child{ transform:rotate(-8deg) translateX(14px) !important; position:relative; z-index:1; }
#match .faces img:last-child{ transform:rotate(8deg) translateX(-14px) !important; position:relative; z-index:2; }
#match .m-actions{ width:100%; display:flex; flex-direction:column; gap:12px; }
#match .m-msg{ width:100%; min-height:54px; border-radius:999px; background:#fff; color:#ff2d6a; font-weight:900; font-size:1.05rem; border:0; box-shadow:0 10px 30px rgba(0,0,0,.18); }
#match .m-keep{ width:100%; min-height:50px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:.98rem; border:2px solid rgba(255,255,255,.75); }

/* Profile hero tap zones + bars (all widths; arrows stay on desktop) */
#profile .hero-bars{ position:absolute; top:calc(8px + var(--safe-t)); left:12px; right:12px; z-index:6; display:flex; gap:4px; pointer-events:none; }
#profile .hero-bars i{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.4); box-shadow:0 0 6px rgba(0,0,0,.25); }
#profile .hero-bars i.on, #profile .hero-bars i.seen{ background:#fff; }
#profile .tap-l, #profile .tap-r{ position:absolute; top:0; bottom:0; width:35%; z-index:3; background:transparent; border:0; padding:0; min-height:0; }
#profile .tap-l{ left:0; } #profile .tap-r{ right:0; }
#profile .hero::after{ content:""; position:absolute; left:0; right:0; top:0; height:96px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.38), transparent); }

@media (max-width:767px){
  :root{ --gutter:16px; }

  /* ---------- Landing ---------- */
  .app{ padding-left:calc(16px + var(--safe-l)) !important; padding-right:calc(16px + var(--safe-r)) !important; }
  .topbar{ padding-top:calc(10px + var(--safe-t)) !important; padding-bottom:6px !important; }
  .brand{ font-size:1.3rem !important; }
  .stories{ gap:14px !important; padding-top:6px !important; padding-bottom:14px !important; }
  .story{ width:64px !important; }
  .story .ring{ width:60px !important; height:60px !important; padding:2.5px !important; }
  .story .ring img{ border-width:2.5px !important; }
  .story .nm{ font-size:.72rem !important; margin-top:6px !important; }

  .deck{
    height: clamp(330px, min(133vw, 70dvh, calc(100dvh - 236px - var(--safe-t) - var(--safe-b))), 640px) !important;
    margin:0 !important;
  }
  .card{ border-radius:20px !important; border:0 !important; box-shadow:0 14px 36px rgba(26,15,20,.18), 0 2px 8px rgba(26,15,20,.08) !important; }
  .card img.hero{ object-position:center 20% !important; }
  .card .grad{ display:none !important; }
  .card .meta{
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    padding:72px 16px 18px !important; margin:0 !important; border-radius:0 !important;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.75) 100%) !important;
    box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .card .meta h2{ font-size:28px !important; line-height:1.1 !important; font-weight:800 !important; margin:0 !important; text-shadow:0 2px 10px rgba(0,0,0,.4) !important; }
  .card .meta h2 em{ font-size:24px !important; font-weight:500 !important; opacity:.95; }
  .card .chips{ gap:8px !important; margin:10px 0 10px !important; }
  .card .chip{ font-size:12px !important; padding:5px 10px !important; background:rgba(255,255,255,.2) !important; color:#fff; }
  .card .chip.hot{ background:var(--grad-cta) !important; }
  .card .bio{ font-size:15px !important; line-height:1.4 !important; max-height:none !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 6px rgba(0,0,0,.45) !important; }
  .stamp{ top:calc(24px) !important; }

  .actions{ gap:20px !important; padding:16px 0 calc(12px + var(--safe-b)) !important; margin:0 !important; }
  .actions .nope, .actions .like{ width:60px !important; height:60px !important; min-width:60px !important; min-height:60px !important; font-size:1.6rem !important; }
  .actions .info{ width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; font-size:1.15rem !important; }
  .actions button{ box-shadow:0 8px 22px rgba(26,15,20,.12) !important; border-width:1.5px !important; }
  .footer{ padding:16px 16px calc(24px + var(--safe-b)) !important; margin-top:8px !important; }

  /* ---------- Profile ---------- */
  #profile .hero{ height:clamp(300px, min(62dvh, 133vw, calc(100dvh - 250px - env(safe-area-inset-bottom))), 640px) !important; min-height:0 !important; }
  #profile .hero-img{ object-position:center 15% !important; }
  #profile .gal-nav, #profile .gal-dots{ display:none !important; }
  #profile .hero .back{
    width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important;
    top:calc(20px + var(--safe-t)) !important; left:12px !important;
    background:rgba(0,0,0,.35) !important; color:#fff !important; font-size:1.05rem !important;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:none !important; z-index:7 !important; border:0 !important;
  }
  #profile .body{ padding:24px 16px 0 !important; }
  #profile .body h2{ font-size:30px !important; line-height:1.1 !important; font-weight:800 !important; margin:0 0 10px !important; }
  #profile .body h2 em{ font-size:24px !important; font-weight:500 !important; }
  #profile .body .chips{ margin:0 0 16px !important; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  #profile .p-bio{ font-size:16px !important; line-height:1.45 !important; margin:0 0 24px !important; color:#4a3640 !important; }
  #profile .gal{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; margin:0 !important; }
  #profile .gal-tile{ aspect-ratio:3/4 !important; border-radius:12px !important; min-width:0 !important; min-height:0 !important; border:0 !important; overflow:hidden; position:relative; }
  #profile .gal-tile img{ width:100%; height:100%; object-fit:cover; }
  #profile .gal-tile.lockwrap img{ filter:blur(10px) brightness(.8) !important; transform:scale(1.15); }
  #profile .gal-tile.lockwrap img.pre-blurred{ filter:none !important; transform:none !important; } /* D11 */
  #profile .gal-tile.lockwrap::after{ content:"🔒"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:15px;
    background:rgba(255,255,255,.92); box-shadow:0 4px 12px rgba(0,0,0,.25); z-index:2; }
  #profile .profile-scroll{ padding-bottom:16px !important; }

  /* ---------- Lightbox ---------- */
  #lightbox .lb-stage img{ width:100vw !important; max-width:100vw !important; height:auto !important;
    max-height:calc(100dvh - 140px - var(--safe-t) - var(--safe-b)) !important; object-fit:contain !important; border-radius:0 !important; }
  #lightbox .lb-prev, #lightbox .lb-next{ display:none !important; }
  #lightbox .lb-close{ top:calc(12px + var(--safe-t)) !important; right:12px !important; width:44px !important; height:44px !important; }
  #lightbox .lb-dots{ bottom:calc(20px + var(--safe-b)) !important; }
  #lightbox .lb-dots i{ width:7px; height:7px; }
  #lightbox .lb-dots i.on{ width:20px; border-radius:999px; }

  /* ---------- Chat ---------- */
  #chat .bubbles{ padding:16px 16px 20px !important; gap:8px !important; }
  #chat .bubble{ max-width:78% !important; }
  #chat .bubble.photo, #chat .bubble.locked, #chat #hotBubble, #chat #lockedBubble{
    width:70% !important; max-width:70% !important; min-height:0 !important; padding:0 !important; border-radius:16px !important; overflow:hidden; }
  #chat .bubble.photo img, #chat #hotBubble img, #chat .bubble.photo .photo-frame{
    width:100% !important; height:auto !important; aspect-ratio:3/4 !important; min-height:0 !important; object-fit:cover; border-radius:16px !important; }
  #chat .bubble.locked .lock-media{ aspect-ratio:3/4 !important; border-radius:14px !important; }
  #chat .bubble.locked .lock-media img{ width:100% !important; height:100% !important; }
}

/* very narrow */
@media (max-width:359px){
  .card .meta h2{ font-size:26px !important; }
  .story{ width:58px !important; } .story .ring{ width:56px !important; height:56px !important; }
  #profile .body h2{ font-size:28px !important; }
}

/* chat items must never shrink inside the flex column */
#chat .bubbles > *{ flex-shrink:0 !important; }
@media (max-width:767px){
  #chat #hotBubble, #chat #lockedBubble{ aspect-ratio:3/4; height:auto !important; }
  #chat #hotBubble img{ height:100% !important; }
  #chat #lockedBubble .lock-media{ height:100%; }
}

/* gallery filler tile (mobile 3-col only) */
#profile .gal-tile.more-tile{ display:none; }
@media (max-width:767px){
  #profile .gal-tile.more-tile{ display:grid; place-items:center; aspect-ratio:auto !important; min-height:0;
    background:linear-gradient(135deg,#ff2d6a,#ff8a1a) !important; color:#fff; font-weight:800; font-size:14px; padding:12px; text-align:center; }
  #profile .gal-tile.more-tile::after{ content:none !important; }
  #profile .gal-tile.more-tile .more-txt{ font-size:14px !important; line-height:1.3 !important; color:#fff !important; }
  /* compact sticky CTA */
  #profile > .cta-bar{ padding-top:10px !important; gap:8px !important; }
  #profile .cta-bar .cta-secondary button{ min-height:38px !important; padding:6px 12px !important; }
  #profile .cta-bar > .primary{ min-height:50px !important; padding:12px !important; }
  /* soft fade where scroll content meets the bar */
}

/* ≥768: keep the classic dots/arrows, no duplicate bars/tap zones */
@media (min-width:768px){
  #profile .hero-bars, #profile .hero .tap-l, #profile .hero .tap-r{ display:none !important; }
}
@media (max-width:767px){
  #profile .back{ background:rgba(0,0,0,.45) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:0 2px 10px rgba(0,0,0,.25) !important; }
}