/* Phones, and Mercury added to the iPhone home screen.

   On phones the page itself scrolls (not <main>), so Safari's glass search bar and the notch show
   the app through them, the bars collapse as you scroll, and the home-screen app fills the whole
   screen. A community chat still fills the window and scrolls inside, like a messaging app. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg1); }

/* Taps feel native: no grey flash, no wait for a double-tap zoom, no text-selection on controls. */
@media (hover: none) and (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, label, summary, select, [role=button], [data-nav] { touch-action: manipulation; }
  .tabbar, .more-sheet, .topbar, .btn, .icon-btn, .pill, .chip-btn, .seg, .sub-tabs { -webkit-user-select: none; user-select: none; }
  .tabbar a, .more-sheet a { -webkit-touch-callout: none; }
  .btn.sm { height: 32px; }
}

@media (max-width: 760px) {
  /* the top bar's height, notch included, for anything that sticks under it */
  :root { --tb-h: calc(50px + env(safe-area-inset-top)); }

  /* The wallpaper reaches past every edge: under the notch, behind Safari's bars, and below the
     home indicator (iOS 26 home-screen apps can report a viewport shorter than the screen). */
  #bg, #bg-dim, #grain { top: -80px; bottom: -80px; }

  /* A page that fills the window (a community's chat) is pinned to the screen. */
  html { height: auto; }
  #app { position: fixed; inset: 0; height: auto; }

  /* Every other page (and sign-in, onboarding) scrolls the document. */
  body:not(.dc-mode):has(> #app > .shell), body:has(> #app .auth), body:has(> #app .ob) { height: auto; min-height: 100vh; overflow: visible; overflow-x: hidden; }
  body:not(.dc-mode) #app:has(> .shell), #app:has(.auth), #app:has(.ob) { position: relative; inset: auto; min-height: 100vh; display: block; overflow: visible; }
  .auth, .ob { min-height: 100vh; }
  .ob-top { padding-top: calc(14px + env(safe-area-inset-top)); }
  body:not(.dc-mode) .shell { display: block; }
  body:not(.dc-mode) #main { overflow: visible; overflow-x: clip; scroll-behavior: auto; }
  /* nothing behind an open sheet scrolls along with it */
  body:is(.sb-open, .more-open, .pc-open):has(> #app > .shell), body:has(.modal-wrap):has(> #app > .shell) { overflow: hidden; }

  /* The top bar stays put, frosted, fading into the page; under the notch it's the same glass. */
  .topbar { position: sticky; top: 0; isolation: isolate; }
  .topbar::after {
    content: ''; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 6, 8, .62), rgba(6, 6, 8, .38) 70%, rgba(6, 6, 8, 0));
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
  }
  .topbar-right .icon-btn { width: 36px; height: 36px; }
  .dash-editbar { top: calc(var(--tb-h) + 4px); }
  .set-rail { top: var(--tb-h); }
  .set-sec { scroll-margin-top: calc(var(--tb-h) + 58px); }
  #toasts { top: calc(var(--tb-h) + 8px); }

  /* tab bar: a floating glass pill that clears the home indicator */
  .tabbar { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 24px; padding: 5px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .tabbar a, .tabbar button { padding: 7px 0 5px; border-radius: 19px; }
  .more-sheet { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); }
  main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* sheets clear the home indicator and keep their scrolling to themselves */
  .modal-wrap { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .modal { max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .drawer { bottom: max(6px, env(safe-area-inset-bottom)); height: min(78dvh, calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .drawer-body, .sidebar, .dm-body, .more-sheet { overscroll-behavior: contain; }
  .sidebar, body.no-sidebar .sidebar { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

  /* ── direct messages: open, a sheet over the bottom; folded, a bubble you can drag ── */
  #dm-pops { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); }
  .dm-win { height: min(86dvh, calc(100dvh - 24px - env(safe-area-inset-top)), 720px); }
  .dm-comp { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body:has(.dm-win:not(.folded)) #dm-pops { bottom: calc(min(86dvh, 720px) + 10px); }
  .dm-wh .icon-btn { width: 36px; height: 36px; }

  .dm-win.folded {
    position: fixed; z-index: 56; right: 12px; bottom: var(--bub-b, calc(max(10px, env(safe-area-inset-bottom)) + 82px));
    width: 56px; height: 56px; border-radius: 50%; overflow: visible; touch-action: none;
    box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .3s cubic-bezier(.2, 1.2, .3, 1), opacity .25s, translate .4s cubic-bezier(.2, 1.15, .3, 1);
  }
  .dm-win.folded.left { right: auto; left: 12px; }
  .dm-win.folded.dragging { transition: none; transform: scale(1.08); }
  .dm-win.folded .dm-wh { height: 100%; padding: 0; border: 0; justify-content: center; }
  .dm-win.folded .dm-wh > :not(.dm-who):not([data-close]) { display: none; }
  .dm-win.folded .dm-who { flex: none; width: 100%; height: 100%; padding: 0; justify-content: center; border-radius: 50%; }
  .dm-win.folded .dm-who .grow { display: none; }
  .dm-win.folded .dm-pav { transform: scale(1.55); }
  .dm-win.folded [data-close] { position: absolute; top: -5px; left: -5px; width: 22px; height: 22px; color: var(--text); background: rgba(28, 28, 32, .96); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
  .dm-win.folded.left [data-close] { left: auto; right: -5px; }
  .dm-win.folded [data-close] .ic { width: 12px; height: 12px; }
  .dm-unread { display: none; }
  .dm-win.folded .dm-unread:not([hidden]) { display: grid; place-items: center; position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #0a0a0b; background: #fff; box-shadow: 0 0 0 2px rgba(14, 14, 18, .95); }
  .dm-win.folded.left .dm-unread { right: auto; left: -4px; }
  /* out of the way of the menus and the voice pill */
  body:is(.more-open, .sb-open) .dm-win.folded { opacity: 0; pointer-events: none; }
  body:has(.vc-pill) .dm-win.folded:not([style*="--bub-b"]) { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); }
  body.dc-chatting .dm-win.folded:not([style*="--bub-b"]) { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 80px); }

  .vc-pill { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); }
  body.dc-mode #main { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px); }
  body.dc-chatting #main { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}