/* ============================================================================
   mobile.css — phones and portrait tablets.
   Loaded LAST (after styles.css, the inline <style> blocks in index.html, and
   dark.css) so it can override without an !important arms race. Only rules
   that fight an existing !important carry one.

   The problem it solves: below ~980px the page simply stacked — logo, donate
   bar, nav, banners — and the message log, which is `flex: 1 1 auto` inside a
   column that had no height to give, collapsed to 40px. Both side panels were
   hidden outright, taking the rooms list, XP Shop, Drunken Penguin, the
   leaderboard and the online list with them.

   The fix is to stop treating the page as a document that scrolls and start
   treating it as an app: a full-height flex column where only the message log
   scrolls, with the two side panels reachable as drawers from a bottom bar.
   ========================================================================= */

@media (max-width: 980px) {
  html, body { height: 100%; }
  /* The PAGE never scrolls; the message log does. Without this the whole
     column scrolls away and the composer disappears above the keyboard. */
  body { overflow: hidden; }

  .window {
    /* svh = the small viewport height: the size with iOS Safari's toolbars
       SHOWING, so nothing is ever hidden under them. dvh/vh are fallbacks
       for browsers that don't know svh. */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    max-width: none;
    border-radius: 0;
  }

  /* ── Header: one compact row ─────────────────────────────────────────── */
  /* A narrow-screen rule turns the topbar into a COLUMN, which is how three
     small controls became 223px of a 800px phone. Force it back to a single
     row that scrolls sideways if it must. */
  .topbar {
    flex: 0 0 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 5px 8px !important;
    gap: 8px !important;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > * { flex: 0 0 auto; }
  /* `body.is-ultra-compact-width .topbar` (a JS-applied class, so specificity
     0,2,0) stacks the topbar into a column — that alone was 222px of an
     800px phone. Matching its weight is the only way to win. */
  body.is-ultra-compact-width .topbar,
  body.is-compact-width .topbar,
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.is-ultra-compact-width .brand-mark-shell {
    width: 112px !important;
    max-width: 112px !important;
  }
  .topbar .brand-lockup,
  .topbar .topbar-actions,
  .topbar #userActions { flex-direction: row !important; align-items: center !important; }
  /* The same class hides the rooms panel outright; the drawer needs it back. */
  body.is-ultra-compact-width .chat-shell > .sidebar.channels-panel { display: block !important; }
  /* The avatar + Log out stack is 76px tall on its own — lay it out sideways
     and shrink the chip. */
  .topbar-user-stack {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #topbarUserChip {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  #topbarUserChip img { width: 34px !important; height: 34px !important; }
  /* The logo image keeps its desktop size inside the shrunken shell and gets
     cropped — scale it to fit instead. */
  .brand-mark-shell .brand-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-height: 100% !important;
  }
  .topbar-actions,
  #userActions { flex-wrap: nowrap !important; }
  .brand-lockup { flex-direction: row !important; align-items: center !important; gap: 8px; }
  .brand-mark-shell {
    height: 40px !important;
    width: 112px !important;
    max-width: 112px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  /* The donate bar, recent-donations strip, Spotify dock and Track of the
     Week each cost 40–60px of height on a screen that has none to spare.
     They stay one tap away in the ☰ menu drawer instead. */
  .support-stack,
  .topbar-spotify-dock,
  .support-bar-dock,
  .track-of-the-week-banner { display: none !important; }
  .topbar-actions { gap: 6px !important; flex-wrap: nowrap; }
  .topbar-user-stack { transform: scale(0.86); transform-origin: right center; }

  /* Nav chips: one horizontally-scrollable row rather than a wrapped block,
     so VIP / Book WPZ / Tour dates stay reachable without eating the screen. */
  .session-strip {
    flex: 0 0 auto;
    padding: 0 8px !important;
    margin: 0 !important;
  }
  .session-pill {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 6px !important;
    border-radius: 12px !important;
  }
  .session-pill::-webkit-scrollbar { display: none; }
  /* index.html's inline blocks force these into COLUMNS with !important —
     `.title-stack` at 107px and `.main-menu-row` at ≤900px are what made the
     nav strip 176px tall. Everything here needs the same weight to win, and
     the row scrolls sideways instead of stacking. */
  .session-strip .title-stack,
  .session-strip .main-menu-row,
  .session-strip .main-menu-left,
  .session-strip .session-links,
  .session-strip .main-menu-right {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    width: auto !important;
  }
  .session-strip .title-stack { gap: 6px !important; }
  .session-strip .title-detail { display: none !important; }  /* subtitle line */
  .session-strip .session-links { display: flex !important; }
  /* Nav chips and the spin/bell/profile tools ride in ONE scrolling strip
     instead of two stacked rows — worth ~40px of chat on a phone. */
  #wpzTopTools {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .session-strip .session-pill { padding: 3px 6px !important; }
  .session-strip .main-menu-trigger,
  .session-strip .session-link,
  .session-strip .book-wpz-link,
  .session-strip .vip-link,
  #wpzTopTools > * {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  .guest-notice { font-size: 11px !important; }

  /* ── The chat fills everything that's left ───────────────────────────── */
  .chat-shell {
    flex: 1 1 auto;
    display: block !important;          /* out of the grid entirely */
    grid-template-columns: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 8px;
    gap: 0;
    overflow: hidden;
  }
  .main-column {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .message-log {
    flex: 1 1 auto !important;
    min-height: 0 !important;           /* the 240px floor is what pinned it */
    padding: 10px 12px !important;
  }
  .message-form { flex: 0 0 auto; }
  .room-header { flex: 0 0 auto; padding: 6px 10px !important; }
  #roomPinnedMessage {
    flex: 0 0 auto;
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Side panels become drawers ──────────────────────────────────────── */
  .chat-shell > .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 2147483000;
    width: min(300px, 86vw);
    max-width: 86vw;
    height: 100%;
    margin: 0;
    padding: 10px 8px calc(70px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    box-shadow: 0 0 40px rgba(4, 14, 26, 0.45);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .chat-shell > .sidebar.channels-panel {
    left: 0;
    /* An existing narrow-screen rule sets display:none on this panel; without
       overriding it the drawer slid in something invisible. */
    display: block !important;
    transform: translateX(-102%);
  }
  /* Beats `body.is-compact-width .users-panel{display:none!important}`, which
     is what removed the online list from every iPad in portrait. */
  .chat-shell > .sidebar.users-panel {
    right: 0;
    display: block !important;
    width: min(300px, 86vw) !important;
    min-width: 0 !important;
    transform: translateX(102%);
  }
  body.wpz-drawer-menu .chat-shell > .sidebar.channels-panel { transform: none; }
  body.wpz-drawer-people .chat-shell > .sidebar.users-panel { transform: none; }

  .wpz-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 2147482999;
    background: rgba(4, 14, 26, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  body.wpz-drawer-menu .wpz-drawer-scrim,
  body.wpz-drawer-people .wpz-drawer-scrim { opacity: 1; pointer-events: auto; }

  /* ── Bottom bar ──────────────────────────────────────────────────────── */
  .wpz-mobile-bar {
    display: flex;
    flex: 0 0 auto;
    /* Above the drawers AND the scrim: with a drawer open you must still be
       able to tap straight across to another tab, the way a real app works.
       Below this the scrim swallowed the taps. */
    position: relative;
    z-index: 2147483002;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(246, 251, 255, 0.96);
    border-top: 1px solid rgba(90, 167, 255, 0.18);
    backdrop-filter: blur(12px);
  }
  .wpz-mobile-bar button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;                  /* comfortable tap target */
    padding: 4px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #5b7794;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
  }
  .wpz-mobile-bar button span.ico { font-size: 17px; line-height: 1; }
  .wpz-mobile-bar button.is-on { background: rgba(90, 167, 255, 0.16); color: #2f6fae; }
  .wpz-mobile-bar .wpz-mobile-badge {
    position: absolute;
    transform: translate(14px, -10px);
    min-width: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff5f5f;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
  }

  /* ── Things that must not overflow a small screen ────────────────────── */
  .wpz-game-win,
  .wpz-inbox,
  .wpz-fwin { max-width: calc(100vw - 16px); }
  .admin-panel { max-width: 100%; overflow-x: auto; }
  .wpz-pedestal { margin: 0 0 6px; font-size: 11.5px; padding: 7px 12px; }
  .wpz-pedestal-days { display: none; }   /* the name is the point */
}

/* Phones proper: trim harder still. */
@media (max-width: 560px) {
  .session-strip {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .session-strip::-webkit-scrollbar { display: none; }
  .session-strip > * { flex: 0 0 auto; }
  .session-strip .session-pill { border: 0 !important; background: transparent !important; }
  .brand-mark-shell { height: 32px !important; width: 88px !important; }
  /* On a 360px screen the header contents genuinely don't fit on one line.
     A sideways-scrolling bar would hide the avatar and theme toggle off the
     right edge where nobody would find them, so it wraps to two short rows
     instead — everything visible, ~30px. */
  .topbar {
    padding: 4px 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 4px !important;
    column-gap: 6px !important;
    overflow-x: hidden !important;
  }
  .topbar #userActions button,
  .topbar .topbar-actions button { font-size: 10.5px !important; padding: 4px 8px !important; }
  .chat-shell { padding: 0 6px; }
  .message-log { padding: 8px 10px !important; }
  .room-header .room-topic { display: none; }
  .wpz-mobile-bar button { font-size: 9.5px; }
}

/* Landscape phones are ~380px tall — every fixed strip has to go or there is
   no chat left at all. */
@media (max-width: 980px) and (max-height: 460px) {
  .session-strip { display: none !important; }
  .topbar { padding: 3px 8px !important; }
  .brand-mark-shell { height: 28px !important; width: 80px !important; }
  .wpz-mobile-bar button { min-height: 38px; font-size: 9px; }
}

@media (max-width: 980px) {
  html[data-theme="dark"] .wpz-mobile-bar {
    background: rgba(27, 27, 28, 0.97);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  html[data-theme="dark"] .wpz-mobile-bar button { color: #93a7bb; }
  html[data-theme="dark"] .wpz-mobile-bar button.is-on { background: rgba(90, 167, 255, 0.2); color: #7cc0ff; }
}

/* Desktop keeps both out of the document. Written as a MIN-width query on
   purpose: as a plain rule it sat after the mobile block, matched everywhere,
   and (same specificity, later in the file) hid the bar on phones too. */
@media (min-width: 981px) {
  .wpz-mobile-bar,
  .wpz-drawer-scrim { display: none !important; }
}