/*
 * mobile.css — web-only responsive overrides
 *
 * server.js injects this stylesheet and the three mobile nav elements:
 *   <input #mobile-nav-toggle>   — hidden checkbox that drives the CSS drawer
 *   <label .mobile-hamburger>    — visible toggle button (☰ / ✕)
 *   <label .mobile-backdrop>     — full-screen tap-to-close overlay
 * All three are siblings of #chat-screen in the DOM, which makes the CSS
 * sibling combinator (~) work for targeting children of #chat-screen.
 *
 * In Electron these elements are never injected, so this file is a no-op
 * even if it somehow got linked. The .mobile-* classes are hidden by default.
 */

/* ── Elements hidden by default (desktop / Electron) ───────────────────── */
.mobile-nav-toggle  { display: none; }
.mobile-hamburger   { display: none; }
.mobile-backdrop    { display: none; }
.mobile-back-arrow  { display: none; }

/* ── Landscape orientation block ───────────────────────────────────────── */
@media (orientation: landscape) and (max-width: 900px) {
  body::after {
    content: 'Please rotate your device to portrait mode';
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg, #1a1a2e);
    color: var(--subtext0, #a6adc8);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    padding: 2rem;
    pointer-events: all;
  }
  /* Freeze all scrolling while the overlay is showing */
  body { overflow: hidden; }
}

/* ── Tablet (≤ 768 px): hide the members pane ──────────────────────────── */
@media (max-width: 768px) {
  #members-pane {
    display: none !important;
  }
}

/* ── Phone (≤ 480 px): sidebar drawer + hamburger ──────────────────────── */
@media (max-width: 480px) {
  /* Seed -webkit-fill-available on html so the body/screen % chain resolves
     to the visual viewport height on iOS 12–15.3 */
  html {
    height: -webkit-fill-available;
    height: 100dvh;
  }

  /* Old hamburger button — fully hidden (replaced by inline back-arrow) */
  .mobile-hamburger { display: none !important; }

  /* Back arrow — shown inside #channel-header, inline with the channel name */
  .mobile-back-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text);
    padding: 0 0.4rem 0 0;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Hide the back arrow while the drawer is open (user is already in the nav) */
  #mobile-nav-toggle:checked ~ #chat-screen .mobile-back-arrow {
    display: none;
  }

  /* Left panel: pulled out of flow as a fixed drawer, off-screen by default */
  #left-panel {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 4000;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    width: 100% !important;
  }

  /* Drawer — open state: cover the full screen */
  #mobile-nav-toggle:checked ~ #chat-screen #left-panel {
    transform: translateX(0);
  }

  /* Hide the chat pane and members pane while the drawer is open */
  #mobile-nav-toggle:checked ~ #chat-screen #chat-pane,
  #mobile-nav-toggle:checked ~ #chat-screen #members-pane {
    visibility: hidden;
  }

  /* Backdrop: no longer needed for closing (tap sidebar items instead),
     but keep it wired up as a fallback close target behind the drawer */
  #mobile-nav-toggle:checked ~ .mobile-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 3999;
    cursor: pointer;
  }

  /* Touch-friendly minimum tap targets */
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* iOS virtual keyboard: prevent whole-app upward shift by sizing to the
     visual viewport. -webkit-fill-available covers iOS 12–15.3;
     100dvh covers iOS 15.4+ and Chrome 108+. */
  .screen {
    height: -webkit-fill-available;
    height: 100dvh;
  }

  /* Anchor the message input bar to the visual viewport so it stays visible
     when the keyboard appears, regardless of any scroll/shift offset. */
  #message-panel {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* Extend message list padding to clear the fixed bar */
  #message-list {
    padding-bottom: 80px;
  }
}