/* ============================================================
   v5.18.3 — Mobile pitch dominance fix
   ------------------------------------------------------------
   User report: "Users say screen should be bigger on mobile"
   (screenshot showed pitch ~30% of viewport with large dead gap
    between pitch and stats/chat panels).

   Root cause:
     • v517-2.css:44   .pitch-wrap height 44vh, max-height 380px
                       — caps the pitch at ~38-44% of viewport.
     • v517-2.css:142  chat fixed at top: calc(64px + 44vh + 44px)
                       — top-pinned with stale 44vh formula leaves
                       dead space when actual pitch is shorter.

   Fix:
     1. Pitch grows: min-height 58vh, no max cap, flex 1.
     2. Chat-default mode: BOTTOM-anchored with fixed 46vh height,
        replacing the top-pinned formula. Removes dead-zone math.
     3. Stats panel sits in flow above chat, scrolls under chat.
        Padding-bottom on .broadcast = chat height + mnav so the
        last stats row isn't permanently hidden.

   Loaded LAST so it wins the cascade.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Pitch reclaims space ---- */
  /* Use clamp so the pitch is generous on tall phones (iPhone 14+: ~58vh)
     but doesn't blow past the chat panel on small phones (iPhone SE). */
  .pitch-wrap {
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: clamp(320px, 56vh, 560px) !important;
    max-height: none !important;
    flex: 1 1 auto !important;
  }

  /* Pitch canvas fills its wrap */
  .pitch-wrap #pitch {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* ---- Reserve flow space below content for the fixed chat panel ---- */
  /* Chat (default mode) is fixed-position bottom-anchored. Stats sits
     above the chat in flow; padding-bottom lets it scroll into view.
     Use clamp() for chat height: ~40vh, min 250px, max 360px. */
  body.chat-mode-default .broadcast,
  body:not(.chat-mode-mini):not(.chat-mode-full) .broadcast {
    padding-bottom: calc(clamp(250px, 40vh, 360px) + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* In mini-mode, only the 36px chat bar + 72px mnav need clearance */
  body.chat-mode-mini .broadcast {
    padding-bottom: calc(36px + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* In full-mode, chat covers everything anyway, so just mnav clearance */
  body.chat-mode-full .broadcast {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Chat panel: BOTTOM-anchored in default mode ---- */
  /* This replaces v517-2.css line 142 (`top: calc(64px + 44vh + 44px)`)
     which left a dead gap when the pitch was its capped height. We pin
     to bottom with a fixed proportional height — independent of pitch. */
  body.chat-mode-default #vflLiveFeel.live-feel,
  body:not(.chat-mode-mini):not(.chat-mode-full) #vflLiveFeel.live-feel {
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    /* clamp: keeps chat usable on small phones without covering pitch */
    height: clamp(250px, 40vh, 360px) !important;
    max-height: clamp(250px, 40vh, 360px) !important;
    min-height: 250px !important;
  }

  /* Stats stays compact and in-flow */
  .stats {
    flex: 0 0 auto;
  }
}