/* ─────────────────────────────────────────────────────────────
   Uplyft Design Prototypes — Responsive / Mobile-native mode
   Desktop  ≥ 768px : Phone mockup wrapper shown as-is
   Mobile   < 768px : Full-screen native app (no phone chrome)
───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* ── 1. Strip desktop presentation chrome ─────────────── */
  .design-toolbar  { display: none !important; }
  .status-bar      { display: none !important; }

  /* ── 2. Body: full screen, no centering, no padding ───── */
  body {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: #000 !important; /* covered by phone-frame; safe fallback */
    min-height: 100dvh;
    overscroll-behavior: none;
  }

  /* ── 3. Phone frame → real full-screen container ───────── */
  /* Use position:fixed so the URL bar appearing/disappearing
     never causes layout reflow or body scroll.               */
  .phone-frame {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* ── 4. Scrollable app area: fill the frame ────────────── */
  .app {
    width: 100% !important;
    height: 100% !important;
    /* Top: account for iOS notch / Dynamic Island                  */
    /* Bottom: reserve space for fixed nav + home indicator         */
    padding-top:    env(safe-area-inset-top,    0px)  !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* ── 5. Bottom nav: fixed to real device bottom ─────────── */
  .bottom-nav {
    position: fixed  !important;
    bottom:   0      !important;
    left:     0      !important;
    right:    0      !important;
    width:    100%   !important;
    /* Grow height to fill home-indicator safe area on iPhone       */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    /* Keep the 76px visual height consistent                       */
    min-height: 56px !important;
    height: auto     !important;
    z-index: 10000   !important;
    box-sizing: border-box !important;
  }

  /* ── 6. Mini player (home.html) ─────────────────────────── */
  /* On mobile, position:sticky can fail on iOS (scroll container
     quirks). Switch to position:fixed so it's always pinned above
     the nav bar regardless of scroll position or which card fired it.
     Nav bar = 56px content + env(safe-area-inset-bottom) padding.    */
  .mini-player {
    position: fixed !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left:   0    !important;
    right:  0    !important;
    width:  100% !important;
    box-sizing: border-box !important;
    z-index: 9998 !important; /* below overlays (9999) but above everything else */
  }

  /* ── 7. Full-screen overlays & sheets ───────────────────── */
  /* All overlays are position:absolute;inset:0 inside .phone-frame
     which is now the full viewport — they already cover correctly.
     Just round only the top corners for bottom-sheet feel.         */
  .gd-overlay       { border-radius: 0 !important; }
  .composer-overlay { border-radius: 0 !important; }

  .setting-sheet,
  .sub-sheet {
    border-radius: 20px 20px 0 0 !important;
  }

  /* ── 8. Profile hero: trim the extra top breathing room ─── */
  /* Desktop hero had 60px top padding to clear the status bar */
  .profile-hero {
    padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
  }

  /* ── 9. Home sticky header bar ──────────────────────────── */
  /* The group-bar / sticky header also had 390px; let it flow */
  .groups-bar-wrap,
  .composer-header,
  .msg-header {
    width: 100% !important;
  }

  /* ── 10. Fitness fixed nav bar ───────────────────────────── */
  /* fitness.html already uses position:fixed but with width:390px */
  /* .bottom-nav rule above already handles it                     */

  /* ── 11. Prevent horizontal scroll on any child ─────────── */
  .app > * {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── 12. Full-width sheet backdrops ─────────────────────── */
  .sheet-backdrop,
  .sub-backdrop,
  .cg-backdrop,
  .em-backdrop {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ── 13. Archive sheet: fix iOS left-shift ───────────────── */
  /* Inside .app (a scroll container), position:absolute can    */
  /* mis-anchor on iOS Safari. Switch to fixed so it's always  */
  /* relative to the viewport, not the scroll container.       */
  .archive-sheet {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
  }

  /* ── 14. Graduation banner: clear fixed nav on mobile ─────── */
  .graduation-banner.show {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}