/* ═══════════════════════════════════════════════════════════════════════════
   GamerZone · Mobile & touch layer (loaded last, overrides earlier sheets)
   Small-screen layout, touch affordances, safe areas, soft-keyboard fixes
   and bottom-sheet presentation for popovers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Viewport height: dvh tracks the collapsing URL bar on mobile ────────── */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
body { overscroll-behavior: none; }
.messages, .sidebar-scroll, .members, .fs-content, .home-body, .voice-stage,
.qs-results, .ep-grid, .search-pop, .perm-list { overscroll-behavior: contain; }

/* Mobile-only header buttons: hidden on desktop. (styles3's `.icon-btn
   { display:inline-grid }` outranked styles.css's `.mobile-bar { display:none }`,
   so these buttons leaked into the desktop header.) */
.icon-btn.mobile-bar { display: none; }

/* ── Touch input refinements ─────────────────────────────────────────────── */
@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  button, a, label, select, .chan, .dm-item, .member, .rail-item, .msg,
  .reaction, .friend-row, .home-tab, .sp-item, .qs-item, .ctx-item,
  .discover-card { touch-action: manipulation; }

  /* Long-press opens menus — kill selection/callout so it doesn't fight it. */
  .msg, .member, .chan, .dm-item, .voice-tile, .voice-user, .rail-item {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }

  /* Hover-only affordances are dead on touch; long-press menus replace them. */
  .msg-actions { display: none !important; }
  .chan:hover .chan-actions { display: none; }

  /* Comfortable touch targets */
  .icon-btn { width: 40px; height: 40px; }
  .chan { padding-top: 10px; padding-bottom: 10px; }
  .dm-item { padding-top: 9px; padding-bottom: 9px; }
  .member { padding-top: 8px; padding-bottom: 8px; }
  .reaction { padding: 5px 10px; }
  .home-tab { padding: 8px 14px; }

  /* 16px inputs so iOS Safari doesn't auto-zoom into focused fields */
  .input, .composer textarea, .search-input, .qs-input, select, textarea,
  input[type='text'], input[type='password'], input[type='email'], input[type='search'] {
    font-size: 16px !important;
  }
}

/* ── Small-screen layout ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sidebar never wider than the screen minus the rail */
  :root { --sidebar: min(260px, calc(100vw - var(--rail) - 24px)); }

  /* Soft keyboard: JS keeps --vvh synced to visualViewport.height */
  .app, .auth-wrap { height: var(--vvh, 100%); }
  .auth-wrap { overflow-y: auto; }

  /* Opaque drawers: glass blur over the chat is unreadable and slow on phones */
  /* As a fixed drawer the rail no longer gets its 76px grid column, so give it
     an explicit width — the sidebar sits at left:var(--rail) and a narrower
     rail leaves a gap between both drawers. */
  .rail { background: var(--bg-1); backdrop-filter: none; width: var(--rail); }
  .sidebar { background: var(--bg-2); backdrop-filter: none; }
  body.nav-open .rail, body.nav-open .sidebar { box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55); }

  /* Members list becomes a right-hand drawer (was display:none) */
  .members {
    display: block; position: fixed; top: 0; bottom: 0; right: 0; z-index: 60;
    width: min(300px, 86vw); transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    background: var(--bg-2); backdrop-filter: none; border-left: 1px solid var(--stroke);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body.members-open .members { transform: none; }
  body.members-open::after {
    content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5);
  }

  /* Safe areas: notch on top, home indicator below */
  .rail { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); padding-left: env(safe-area-inset-left); }
  .sidebar-head { padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
  .userbar { padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); }
  .chat-head, .home-head { padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
  .composer-wrap { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }

  /* Chat spacing tuned for narrow screens */
  .msg { padding-left: 12px; padding-right: 12px; }
  .msg .msg-gutter { width: 40px; }
  .messages { padding-top: 10px; }
  .day-divider { margin: 14px 12px 8px; }
  .msg-welcome { padding: 20px 14px 16px; }
  .msg-welcome h2 { font-size: 22px; }
  .attachments, .yt-embed { max-width: 100%; }
  .reply-ref .r-text { max-width: none; }
  .typing-row { padding: 0 14px; }

  /* Headers: fewer, tighter elements */
  .icon-btn.mobile-bar { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .chat-head { padding-left: 8px; padding-right: 8px; gap: 8px; }
  .home-head { padding-left: 8px; padding-right: 8px; gap: 10px; }
  .ch-topic { display: none; }
  .ch-title { font-size: 15px; min-width: 0; }
  .ch-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-tabs { overflow-x: auto; flex: 1; scrollbar-width: none; }
  .home-tabs::-webkit-scrollbar { display: none; }
  .home-tab { white-space: nowrap; flex: none; }
  .home-body { padding: 16px 14px; }
  .discover-grid { grid-template-columns: 1fr; }

  /* Friends */
  .friend-row { flex-wrap: wrap; }
  .friend-row .fr-actions { flex-wrap: wrap; }
  .add-friend-box { flex-direction: column; }
  .add-friend-box .btn { width: 100%; }

  /* Voice stage fits a 320px screen */
  .voice-controls { gap: 8px; padding: 10px; align-self: stretch; justify-content: space-evenly; }
  .vc-btn { width: 46px; height: 46px; font-size: 19px; }
  .voice-stage { padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .voice-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .stream-focus, .stream-focus video { max-height: 40vh; }

  /* Fullscreen settings: close button no longer overlaps the horizontal nav,
     and both clear the notch / Dynamic Island (safe-area top). */
  .fs-nav { padding: calc(12px + env(safe-area-inset-top)) 60px 12px 10px; }
  .fs-close {
    top: calc(12px + env(safe-area-inset-top)); right: 12px;
    width: 40px; height: 40px; background: rgba(0, 0, 0, 0.35);
  }
  .fs-content { padding: 18px 14px calc(40px + env(safe-area-inset-bottom)); }
  .fs-view h2 { font-size: 20px; }
  .account-card { flex-wrap: wrap; }
  .profile-layout { grid-template-columns: 1fr; }

  /* Modals breathe on small screens */
  .overlay { padding: 12px; }
  .modal { padding: 22px 18px; max-height: calc(100% - 24px); overflow-y: auto; }
  .auth-card { padding: 28px 20px; }
  .invite-box code { font-size: 14px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; }
  .qs-overlay { padding-top: 8vh; }

  /* Aurora backdrop: static and cheaper on phone GPUs */
  .aurora::before, .aurora::after, .aurora span { animation: none; filter: blur(60px); opacity: 0.3; }
}

/* ── Toasts: top of the screen, clear of keyboard and thumbs ─────────────── */
@media (max-width: 700px) {
  .toasts { top: calc(10px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(-16px); } }
}

/* ── Bottom sheets ────────────────────────────────────────────────────────
   JS (modals.presentPopover) adds .sheet to popovers + a .sheet-backdrop
   behind them on small screens instead of anchor-positioning them. */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 148;
  background: rgba(3, 2, 10, 0.55); animation: fade 0.18s;
}
.sheet {
  position: fixed !important;
  left: 10px !important; right: 10px !important; top: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: auto !important; max-width: none !important;
  max-height: min(72vh, 560px); overflow-y: auto;
  z-index: 205; border-radius: 18px;
  animation: sheet-up 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Grab handle on menu-like sheets */
.ctx-menu.sheet::before, .vol-pop.sheet::before, .emoji-pop.sheet::before {
  content: ''; display: block; flex: none; width: 42px; height: 4px; border-radius: 2px;
  background: var(--stroke-strong); margin: 6px auto 8px;
}
.ctx-menu.sheet .ctx-item { padding: 13px 14px; font-size: 15px; }
.emoji-pop.sheet { height: min(56vh, 440px); overflow: hidden; }
.gif-pop.sheet { height: min(66vh, 520px); overflow: hidden; }
.icon-pop.sheet .icon-pop-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.emoji-pop.sheet .ep-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.search-pop.sheet { max-height: min(72vh, 560px); }
.profile-pop.sheet { overflow-y: auto; }