/* ============================================
   Campfire V2 — Mobile Responsive Overrides
   Loaded after common.css on all pages.
   Desktop users see NO changes from this file.
   ============================================ */

/* Hidden on desktop — only visible inside mobile breakpoints */
.buddy-drawer-overlay, .buddy-drawer-toggle,
.chat-drawer-overlay, .chat-drawer-toggle { display: none; }
/* Count text — full on desktop, short on mobile */
.count-short { display: none; }
/* Mobile-only elements — hidden on desktop */
.mobile-menu-carousel { display: none; }
.carousel-toggle { display: none; }
.menu-collapse-toggle { display: none; }

/* ========== NARROW SCREEN (≤1024px) ==========
   Single "narrow" breakpoint at 1024px (was 768). Below 1024, every
   desktop layout (A, B, C, venue, room) collapses to the same mobile
   chrome — no in-between layouts. Layout C's overlay panels + floating
   chat input need ~1024px to fit without conflict, so 1024 is the
   threshold for the largest layout; smaller layouts (A, B) also get
   mobile chrome at this width which is acceptable for the simplicity
   of one breakpoint vs per-layout duplication.
   The ≤480 and ≤375 blocks below cascade additional phone-only
   tightening (smaller fonts, narrower drawer, etc.). */
@media (max-width: 1024px) {

  /* ---- Prevent text selection / sticky highlights on tap ---- */
  button, .btn, .menu-btn, .action-btn, a, .tab, .s-tab, .sub-tab,
  .settings-tab, .layout-icon, .buddy-drawer-toggle,
  .cf-card, .continue-card, .entry-btn, .campfire-btn, .twitch-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
  }

  /* Prevent ALL text selection on campfire/creator pages (no copy-highlight) */
  .app-layout, .live-view, .setup-view {
    -webkit-user-select: none; user-select: none;
  }
  /* But allow selection in inputs and chat messages */
  .app-layout input, .app-layout textarea, .app-layout .chat-msg,
  .live-view input, .live-view textarea, .live-view .chat-msg {
    -webkit-user-select: text; user-select: text;
  }

  /* Kill sticky :hover on touch — buttons highlight only while pressed */
  @media (hover: none) {
    .menu-btn:hover, .btn:hover, .action-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-muted);
    }
    /* Move arrows keep their orange style — reset hover to match resting state */
    .move-arrow:hover {
      background: rgba(255, 107, 53, 0.2);
      border-color: rgba(255, 107, 53, 0.4);
      color: var(--accent);
    }
    .move-arrow:active, .move-arrow.pressed {
      background: rgba(255, 107, 53, 0.45) !important;
      border-color: rgba(255, 107, 53, 0.8) !important;
      box-shadow: 0 0 10px rgba(255, 107, 53, 0.4), inset 0 0 6px rgba(255, 107, 53, 0.15);
      color: #fff !important;
    }
  }

  /* ---- Touch targets ---- */
  .btn, .action-btn, .menu-btn, .tab, .s-tab, .sub-tab,
  .settings-tab, .layout-icon {
    min-height: 44px;
  }
  .btn-sm { min-height: 36px; }
  .btn-xs { min-height: 32px; }

  /* Readable mobile defaults. iOS focus-zoom is prevented at the viewport-meta
     level (maximum-scale=1.0), so smaller per-input overrides below are safe. */
  input, select, textarea { font-size: 16px !important; }
  .chat-input { font-size: 12px !important; }
  #font-picker { font-size: 7px !important; }

  /* ---- Footer — sticky on regular pages, hidden on campfire pages.
     bottom: env(safe-area-inset-bottom) raises it above the home
     indicator on iOS (no-op on Android with no safe area). Standard
     pattern; no custom additions. The viewport-fit=cover meta on each
     page is what makes the env() value non-zero on iOS. ---- */
  .site-footer {
    position: fixed; left: 0; right: 0;
    bottom: env(safe-area-inset-bottom);
    padding: 8px 10px; opacity: 0.6;
  }
  /* Hide footer on campfire/creator views */
  .app-layout ~ .site-footer,
  .setup-view ~ .site-footer,
  .live-view ~ .site-footer { display: none !important; }

  /* ---- Viewport handling ---- */
  /* Regular pages can scroll */
  html, body { height: auto !important; overflow: auto !important; }
  /* ---- Layout LOCK for immersive pages ----
     position:fixed + inset:0 + overflow:hidden on html, body, AND the
     main container PINS the layout to the viewport. iOS Safari can't
     scroll it when the input focuses (which was the "keyboard pushes
     everything up + doesn't restore on close" bug). 100vh = large
     viewport (never shrinks with keyboard or address bar). Combined
     with interactive-widget=overlays-content (viewport meta) and the
     fixed-position input bar below, the keyboard now truly overlays
     the bottom — canvas + arrows + chat stay rock-solid where they
     are, only the input bar slides up. */
  html:has(.app-layout), html:has(.live-view) {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    height: 100lvh !important;
  }
  body:has(.app-layout), body:has(.live-view) {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    height: 100lvh !important; max-height: 100lvh !important;
    display: flex !important; flex-direction: column !important;
  }
  .app-layout {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100lvh !important; max-height: 100lvh !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  body:has(.live-view) .live-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100lvh !important; max-height: 100lvh !important;
    flex: 1 !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
    gap: 0 !important; padding: 0 !important;
  }
  /* Creator control bar: compact on mobile */
  .control-bar-wrap { margin-bottom: 0 !important; flex-shrink: 0; }
  .control-bar { padding: 4px 8px !important; gap: 6px !important; font-size: 10px !important; flex-wrap: wrap; }
  .control-bar .stat { font-size: 9px; }
  .control-bar .btn { min-height: 32px; padding: 4px 8px !important; font-size: 10px !important; }

  /* Safe area insets for notch/dynamic island */
  .app-layout, .live-view {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* ============================================================
     UNIFIED MOBILE CHAT LAYOUT
     One layout for all desktop layouts (A, B, C, venue, room). On
     narrow screens we don't try to be clever with floating bars or
     overlay panels — they're cramped and easy to mis-tap. Instead:
     - Top bar (chat-menu-bar): 44px (its desktop default)
     - Bottom input bar: 44px tall, all internal elements 32px so
       the emoji/input/send buttons line up at the same height
     - Chat is always shown (the .collapsed class is neutralized
       below); collapse is a desktop-only feature
     - Venue / Layout C have their floating absolute chrome undone;
       chat-input flows as the last flex column item, just like A/B
     ============================================================ */

  /* Chat input bar height: 44px outer, 32px inner elements */
  .chat-input-area {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .chat-input,
  .send-button,
  .emote-button {
    height: 32px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .chat-input { padding: 4px 10px !important; }
  .send-button { padding: 0 12px !important; }
  .emote-button {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide collapse-toggle buttons inside the input bar — collapse is a
     desktop-only feature, mobile always shows chat. */
  .chat-input-area .chat-expand-btn,
  .chat-input-area .buddy-expand-btn { display: none !important; }

  /* Always-visible chat — neutralize the .collapsed class on mobile so
     transitioning from desktop (where chat may be collapsed) to a narrow
     viewport always reveals the chat. The campfire-mode collapse rules
     in campfire.html / my-campfire.html load AFTER mobile.css (their
     <style> blocks come after the <link> to mobile.css), so we need to
     match their specificity AND add an `html` prefix for the extra
     element to win the cascade. Three layout-targeted selectors below
     mirror the three inline rule patterns. */
  html .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.collapsed,
  html .layout-frame.world-venue .chat-panel-wrap.collapsed,
  html .layout-frame.layout-c .chat-panel-wrap.collapsed {
    display: flex !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 120px !important;
    transform: none !important;
  }
  html .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.collapsed .chat-window,
  html .layout-frame.world-venue .chat-panel-wrap.collapsed .chat-window,
  html .layout-frame.layout-c .chat-panel-wrap.collapsed .chat-window {
    display: flex !important;
    height: 100% !important;
    box-shadow: revert !important;
  }
  html .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.collapsed .chat-menu-bar,
  html .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.collapsed .chat-container,
  html .layout-frame.world-venue .chat-panel-wrap.collapsed .chat-menu-bar,
  html .layout-frame.world-venue .chat-panel-wrap.collapsed .chat-container,
  html .layout-frame.layout-c .chat-panel-wrap.collapsed .chat-menu-bar,
  html .layout-frame.layout-c .chat-panel-wrap.collapsed .chat-container {
    display: flex !important;
  }
  /* chat-blur-gate visibility is controlled by JS (inline display: 'none'
     for joined users) — inline styles outweigh our class-level !important,
     so the blur-gate's normal show/hide logic resumes naturally once we
     override the desktop hide rule. */

  /* Layout A & B: chat-panel-wrap holds the whole chat. chat-input-area
     is position:fixed (taken out of flow), so chat-window's flex layout
     no longer reserves space for it — chat-container would expand to
     cover the entire chat-window, with the fixed input bar visually
     overlapping the bottom rows. Margin-bottom on chat-panel-wrap pulls
     the WHOLE chat panel up by exactly the input bar's footprint
     (44px input + 8px breathing + safe-area), guaranteeing chat content
     ends above the input bar regardless of any other padding/sizing. */
  .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap {
    padding: 0 8px 0 8px !important;
    margin-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }

  /* Venue + Layout C — undo their desktop floating chrome so they look
     identical to Layout A/B on mobile. The chat-input-area, reparented
     to layout-frame for desktop floating, becomes the last flex column
     item with its own bottom margin for breathing room. */
  .layout-frame.world-venue,
  .layout-frame.layout-c {
    display: flex !important;
  }
  /* MESSAGE INPUT BAR — fixed to the bottom of the VISUAL viewport so it
     ALWAYS sits just above the keyboard / address bar, regardless of
     what space we're in or where the input lives in DOM. The visual-
     viewport offset (--vv-bottom-offset, set by mobile.js from the
     visualViewport API) accounts for both the on-screen keyboard AND
     mobile-browser chrome. With layout-frame at 100vh + position:fixed
     (constant), when the keyboard opens the layout stays in place and
     ONLY this bar lifts. The `html` prefix bumps specificity to beat
     the per-page inline <style> blocks (which use `position: absolute
     !important`).
     - bottom = vv-offset + safe-area-inset-bottom: bar sits ABOVE the
       iOS home indicator (no transparent strip below it).
     - box-sizing: border-box + height: 44px from the rule above gives
       an EXACTLY 44px-tall bar (no extra padding-bottom growing it).
     - solid background + 1px top border visually separates input from
       chat history above (so chat content can't bleed through). */
  html .chat-input-area {
    position: fixed !important;
    bottom: calc(var(--vv-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    transition: bottom 0.18s ease !important;
    z-index: 1100 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
  }
  /* Venue + Layout C: chat-input-area is reparented to layout-frame
     (sibling of widget-area). Padding-bottom reserves space so the
     widget canvas + above-chat-bar don't extend under the fixed input
     bar. Campfire layouts (A/B) use chat-panel-wrap's margin-bottom
     instead — see rule above. */
  .layout-frame.world-venue,
  .layout-frame.layout-c {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  .layout-frame.world-venue .above-chat-bar,
  .layout-frame.layout-c .above-chat-bar {
    /* `relative` (not `static`) so the bar still establishes a
       containing block for its absolutely-positioned .audio-control
       child. With `static`, .audio-control's top:50% resolves to
       layout-frame's height, jumping the audio button to the vertical
       center of the canvas instead of the bar. `relative` keeps the
       bar in normal flow but contains the absolute child to its own
       (small) height. */
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 4px 0 !important;
  }
  /* VENUE + Layout C on mobile: chat-panel-wrap is a RIGHT-side DRAWER
     (the wide immersive canvas reads better without a bottom panel
     eating its height; chat slides in from the right when needed).
     The drawer leaves room for the top header AND the bottom chrome
     (just the 44px message input — move-arrows are hidden on mobile).
     CAMPFIRE (Layout A/B) uses a different pattern — see the
     .chat-mobile-collapsed rule below; chat there stacks below the
     canvas and collapses inline. */
  .layout-frame.world-venue .chat-panel-wrap,
  .layout-frame.layout-c .chat-panel-wrap {
    position: fixed !important;
    top: calc(50px + env(safe-area-inset-top)) !important;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    right: -310px !important; left: auto !important;
    width: 310px !important; max-width: 88vw !important;
    height: auto !important; max-height: none !important;
    z-index: 5000 !important;
    flex: 0 0 auto !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    background: var(--bg-card);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.4);
    transform: none !important;
  }
  .layout-frame.world-venue .chat-panel-wrap.open,
  .layout-frame.layout-c .chat-panel-wrap.open { right: 0 !important; }

  /* Widget area flex-shrinks to share space with the bottom chrome
     (above-chat-bar + input). NEVER set width/height 100% here. */
  .layout-frame.world-venue .widget-area,
  .layout-frame.layout-c .widget-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  /* Edge toggle chevrons (venue/Layout C desktop) — meaningless when
     panels are stacked drawers on mobile. */
  .layout-frame.world-venue .chat-toggle,
  .layout-frame.world-venue .buddy-toggle,
  .layout-frame.layout-c .chat-toggle,
  .layout-frame.layout-c .buddy-toggle { display: none !important; }

  /* CAMPFIRE collapse — toggled by the chat-drawer-toggle button for
     Layout A/B (chat-panel-wrap stacks below the canvas there). Hide
     ONLY the message history (menu-bar + container + blur-gate) so
     the chat-input-area inside chat-window stays visible — that's
     the "bottom bar with profile pic, text input, emoji, send" that
     stays anchored when chat collapses (matches the venue chrome).
     Distinct class name (.chat-mobile-collapsed) avoids fighting
     the existing .collapsed overrides that mobile.css uses to
     neutralize desktop-collapsed state on small viewports. */
  .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.chat-mobile-collapsed .chat-menu-bar,
  .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.chat-mobile-collapsed .chat-container,
  .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.chat-mobile-collapsed .chat-blur-gate {
    display: none !important;
  }
  .layout-frame:not(.world-venue):not(.layout-c) .chat-panel-wrap.chat-mobile-collapsed {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* (Venue/Layout C never gets .chat-mobile-collapsed — they use the
     right-side drawer pattern with .open instead.) */

  /* ---- Mobile venue perspective fix ----
     The desktop strategy puts `perspective` on .campfire-area itself
     (alongside `zoom`) to keep sprites + floor in a flat 2D stacking
     order (see widget.css comment around line 1829). On mobile browsers
     — especially WebKit/iOS — the combination of `zoom` and `perspective`
     on the SAME element flattens the 3D rendering context: rotateX(60°)
     reduces to a uniform scaleY, so the floor renders as a flat
     squashed rectangle with no depth foreshortening (no trapezoid).
     Fix: let perspective propagate from the widget-container (already
     set there by widget-renderer.js) via transform-style:preserve-3d
     on the canvas, and force the floor + grid into their own 3D layer
     with translateZ(0). Tradeoff: sprite-floor z-stacking can bisect
     a sprite at the floor's tilt center — acceptable on mobile vs.
     a completely flat venue. */
  .campfire-area.venue-mode {
    transform-style: preserve-3d !important;
  }
  .campfire-area.venue-mode .venue-floor,
  .campfire-area.venue-mode .venue-floor-grid {
    -webkit-transform: rotateX(var(--view-angle, 60deg)) translateZ(0) !important;
    transform: rotateX(var(--view-angle, 60deg)) translateZ(0) !important;
    will-change: transform;
  }

  /* ---- Chat Drawer (RIGHT side) — mirrors the Buddy Drawer system ---- */
  .chat-drawer-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 4998;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .chat-drawer-overlay.open { opacity: 1; pointer-events: auto; }
  .chat-drawer-toggle {
    display: flex;
    position: absolute; top: 6px; right: 6px; z-index: 599;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(20, 20, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; color: var(--text-muted);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: color 0.15s;
  }
  .chat-drawer-toggle:active .btn-icon { background-color: var(--accent); }

  /* ---- Page header — stays at top, never hidden ---- */
  .page-header-wrap {
    flex-shrink: 0; z-index: 3000;
  }
  .page-header {
    padding: 6px 10px; gap: 4px;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center;
    min-height: 44px;
  }
  .page-header > div {
    flex-shrink: 1; min-width: 0;
    display: flex !important; align-items: center;
  }
  .page-header a {
    min-height: 40px; display: inline-flex; align-items: center;
    font-size: 11px; white-space: nowrap;
  }
  /* Hide desktop-only nav links (My Campfire, Admin) — they're in the hamburger */
  .nav-link-desktop { display: none !important; }
  /* Scale down logo */
  .page-header .logo-wrap { width: 100px !important; height: 24px !important; }
  /* Center the logo section */
  .page-header > div:nth-child(2) { flex: 1 !important; justify-content: center; }
  /* Hamburger button — bigger tap target */
  .page-header button {
    min-width: 44px; min-height: 44px; padding: 10px !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* Nav dropdown — wider, bigger links */
  #nav-menu { min-width: 180px !important; }
  #nav-menu a { padding: 14px 16px !important; font-size: 14px !important; }

  /* Notification bell badge — desktop inline-style is top:-5px right:-5px
     which sits the badge above the bell. On mobile that reads as floating
     too high; lower so it sits on the bell's upper-right corner. */
  #notif-badge {
    top: -2px !important;
    right: -3px !important;
  }

  /* ---- Buddy Drawer System ---- */
  .buddy-drawer-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 4999;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .buddy-drawer-overlay.open { opacity: 1; pointer-events: auto; }

  .buddy-panel {
    /* `!important` on left / z-index / transition is REQUIRED so the
       drawer pattern survives room.css's high-specificity overrides
       (`body.immersive #immersive-shell .layout-frame.world-venue
       .buddy-panel { position:absolute; left:0; z-index:50;
       transition:transform... }` at specificity 0,3,2). Without
       !important the room rules win those three properties, leaving
       the drawer permanently on-screen at the wrong stacking level
       and with no slide animation. */
    position: fixed !important; left: -280px !important;
    /* Drawer sits BELOW the page header and ABOVE the bottom message
       input (move-arrows are hidden on mobile). Header ≈ 44–50px,
       input bar 44px + 8px breathing room + iOS safe area. */
    top: calc(50px + env(safe-area-inset-top)) !important;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    width: 280px !important;
    height: auto !important; max-height: none !important;
    z-index: 5000 !important; flex-shrink: 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .buddy-panel.open { left: 0 !important; }
  .buddy-panel.swiping { transition: none !important; }


  /* Hide campfire info bar on mobile (saves vertical space) */
  .campfire-info-bar { display: none !important; }

  /* ---- Count text: icon-only on mobile ---- */
  .count-full { display: none !important; }
  .count-short { display: inline !important; }

  /* ---- Campfire page vertical stack — everything fits in viewport ---- */
  .app-layout { padding: 0 !important; gap: 0 !important; }

  .layout-frame {
    flex-direction: column !important; width: 100% !important;
    max-height: none !important; gap: 0 !important;
    flex: 1 !important; min-height: 0 !important;
    display: flex !important;
  }
  .layout-frame.layout-b {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: none !important; grid-template-rows: none !important;
  }

  .right-column {
    width: 100% !important; flex: 1; min-height: 0; gap: 0 !important;
    display: flex; flex-direction: column;
  }

  /* Widget and chat: widget gets slightly more space, chat stays usable */
  .widget-area {
    flex: 1.2 !important; min-height: 0;
    position: relative; overflow: hidden;
  }
  .chat-panel-wrap {
    flex: 1 !important; min-height: 120px;
    padding: 0 4px 4px 4px;
  }

  /* ---- Widget action menu (mobile) ----
   * Inherits the MY CAMPFIRE pill look + the `top: calc(100% + 16px)`
   * positioning from common.css. The desktop position (8px below the
   * orange toggle button) is also the right place on mobile, so we
   * don't override `top` anymore — it lands just below .info-bar-wrap.
   * This block only handles mobile-specific concerns: clamp width so
   * the pill doesn't overlap the left/right canvas toggles, and add
   * the collapse/expand animation triggered by .menu-collapse-toggle. */
  .widget-menu {
    width: auto !important; max-width: calc(100% - 100px);
    margin: 0 !important;
    justify-content: center; flex-wrap: nowrap;
    padding: 4px 8px !important;
    z-index: 500;
    /* Collapsed by default on mobile */
    max-height: 0; opacity: 0; overflow: hidden !important;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .widget-menu.mobile-open {
    /* 60px = 28px button + 8px container padding + ~8px box-shadow room */
    max-height: 60px; opacity: 1;
    overflow: visible !important;
  }

  /* Hide creator widget-menu on mobile — actions are in carousel */
  .live-view .widget-menu { display: none !important; }

  /* Menu collapse toggle — floats on display like buddy toggle */
  .menu-collapse-toggle {
    display: flex;
    position: absolute; top: 6px; left: 6px; z-index: 600;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(20,20,20,0.7); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-muted); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: color 0.15s;
  }
  .menu-collapse-toggle.active .btn-icon {
    background-color: var(--accent);
  }

  /* Buddy toggle stacks below menu toggle */
  .menu-collapse-toggle ~ .buddy-drawer-toggle { top: 46px; }

  /* ---- Toggle buttons: carousel on top, buddy below ---- */
  .carousel-toggle {
    display: flex;
    position: absolute; top: 6px; left: 6px; z-index: 600;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(20,20,20,0.7); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-muted); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: color 0.15s;
  }
  .carousel-toggle.active .btn-icon {
    background-color: var(--accent);
  }

  .buddy-drawer-toggle {
    display: flex;
    position: absolute; top: 6px; left: 6px; z-index: 599;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(20,20,20,0.7); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; color: var(--text-muted);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: color 0.15s;
  }
  .buddy-drawer-toggle:active .btn-icon {
    background-color: var(--accent);
  }
  /* When carousel toggle exists, push buddy below it */
  .carousel-toggle ~ .buddy-drawer-toggle { top: 46px; }

  /* ---- Mobile toggle button styling — UNIFIED ----
     All four floating toggle buttons (menu/carousel/buddy/chat) share
     the same visual language: orange icon at rest, button fills orange
     with WHITE icon when active (drawer/menu open). Overrides the
     earlier per-button :active / .active rules above. */
  .menu-collapse-toggle .btn-icon,
  .carousel-toggle .btn-icon,
  .buddy-drawer-toggle .btn-icon,
  .chat-drawer-toggle .btn-icon {
    background-color: var(--accent) !important;
  }
  .menu-collapse-toggle.active,
  .carousel-toggle.active,
  .buddy-drawer-toggle.active,
  .chat-drawer-toggle.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }
  .menu-collapse-toggle.active .btn-icon,
  .carousel-toggle.active .btn-icon,
  .buddy-drawer-toggle.active .btn-icon,
  .chat-drawer-toggle.active .btn-icon {
    background-color: #fff !important;
  }

  /* Hide test user buttons on mobile */
  .menu-btn[title="Add 5 test users"],
  .menu-btn[title="Remove test users"] { display: none !important; }

  /* Layout toggle — hidden on mobile */
  .layout-toggle { display: none !important; }
  .menu-toggle-btn { display: none !important; }

  /* Content area — flex to fill remaining viewport, no gaps */
  .content-area {
    padding: 0 !important; gap: 0 !important;
    flex: 1 !important; min-height: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
  }
  .main-content {
    padding: 0 !important; gap: 0 !important;
    flex-direction: column !important; flex: 1 !important; min-height: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    display: flex !important;
  }

  /* ---- Arrow buttons + volume bar above chat ---- */
  .right-column > .move-arrows { display: none !important; }
  .above-chat-bar {
    margin: 0 !important;
    padding: 4px 8px !important;
  }
  /* Audio button right edge needs to match the chat-window right edge
     (chat-panel-wrap has 8px side padding). And height needs to match
     the move arrows (28px) — without this, the audio button is taller
     than the arrows and visually creates a different gap to the chat
     window below since they share a flex row. */
  .above-chat-bar .audio-control {
    right: 8px !important;
  }
  .above-chat-bar .audio-mute-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Mobile: just mute button, no slider */
  .audio-slider-wrap { display: none !important; }
  .move-arrow {
    min-height: 28px; min-width: 32px;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none !important; user-select: none !important;
    -webkit-touch-callout: none;
  }
  .move-arrows {
    -webkit-user-select: none; user-select: none;
    touch-action: none;
    /* Reset absolute positioning when moved to chat header */
    position: static !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* ---- Creator: hide desktop bar, show floating carousel on mobile ---- */
  .desktop-only-bar { display: none !important; }

  /* ---- Creator carousel: centered pill, collapsed by default ---- */
  .mobile-menu-carousel {
    display: flex; align-items: center; gap: 6px;
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    z-index: 500;
    -webkit-user-select: none; user-select: none;
    /* Collapsed by default */
    max-height: 0; opacity: 0; pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .mobile-menu-carousel.open { max-height: 60px; opacity: 1; pointer-events: auto; }

  .carousel-track-wrap {
    width: 240px;
    overflow: hidden; border-radius: 10px;
    flex-shrink: 0;
  }
  .carousel-track {
    display: flex; width: 480px; /* 2 panels × 240px */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .carousel-track.swiping { transition: none; }

  .carousel-panel {
    width: 240px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 6px 10px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .carousel-panel .menu-btn {
    padding: 6px 10px; min-height: 36px; font-size: 14px;
    background: rgba(28,28,28,0.95); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px; color: #fff; cursor: pointer;
  }
  .carousel-panel .btn { min-height: 36px; font-size: 12px; }
  .carousel-stat {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    white-space: nowrap;
  }
  .carousel-stat strong { color: var(--accent); margin-right: 2px; }

  /* Dots sit outside the menu container, to the right */
  .carousel-dots {
    display: flex; flex-direction: column; gap: 4px;
    flex-shrink: 0;
  }
  .carousel-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.2); transition: background 0.2s;
    cursor: pointer;
  }
  .carousel-dot.active { background: var(--accent); }


  /* Connection badge — hide desktop version on mobile (carousel has its own) */
  .conn-badge-wrap { display: none !important; }

  /* ---- Chat: hide full connection text, keep dot (moved to title by JS) ---- */
  .chat-header-status { display: none !important; }
  .chat-title { display: inline-flex !important; align-items: center; }
  #font-picker {
    font-size: 7px !important; padding: 2px 4px !important;
    min-height: 0 !important; height: auto !important;
  }

  /* ---- my-campfire: settings drawer full-width ---- */
  .settings-drawer {
    width: 100vw !important; left: -100vw !important;
  }
  .settings-overlay.open .settings-drawer { left: 0 !important; }

  /* ---- Login page ---- */
  .login-card { width: auto !important; max-width: 420px; margin: 0 16px !important; }

  /* ---- Admin modal ---- */
  .modal { width: calc(100vw - 32px) !important; max-width: 380px; }

  /* ---- Admin table: hide less important columns ---- */
  .admin-content table th:nth-child(3),
  .admin-content table td:nth-child(3),
  .admin-content table th:nth-child(5),
  .admin-content table td:nth-child(5),
  .admin-content table th:nth-child(7),
  .admin-content table td:nth-child(7) { display: none; }

  .admin-content td, .admin-content th { padding: 8px; font-size: 12px; }
  .search-input { width: 100% !important; }

  /* ---- Stats cards: wrap 2x2 ---- */
  .stats { flex-wrap: wrap; }
  .stats .card { flex: 1 1 calc(50% - 8px); min-width: 100px; }

  /* ---- Profile: reorder sections for mobile ---- */
  .profile-layout {
    padding: 12px !important; gap: 12px !important;
    flex-direction: column !important;
  }
  .left-col, .center-col, .right-col { width: 100% !important; }
  .center-col { order: 1; }
  .left-col   { order: 2; }
  .right-col  { order: 3; }
}

/* Hidden on desktop */
.stats-toggle { display: none; }

/* ========== MOBILE (480px) ========== */
@media (max-width: 480px) {

  /* ---- Page header — compact ---- */
  .page-header .logo-wrap { width: 80px !important; height: 20px !important; }

  /* ---- Hero / landing ---- */
  .hero h1 { font-size: 28px !important; }
  .hero p { font-size: 14px; }
  .hero { padding: 60px 16px 40px !important; }
  .welcome-nav { padding: 12px 16px !important; }
  .welcome-nav .login-link { padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- Login buttons ---- */
  .entry-btn, .campfire-btn, .twitch-btn { min-height: 48px; }
  .login-card { margin: 0 12px !important; padding: 24px 16px !important; }

  /* ---- Campfires grid: single column ---- */
  .campfire-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .discover-content { padding: 20px 12px 80px !important; }
  .search-bar { max-width: 100% !important; }

  /* ---- Campfire page specifics ---- */
  .campfire-info-bar { padding: 4px 12px; font-size: 10px; flex-shrink: 0; }
  .campfire-info-bar .campfire-title { font-size: 12px; }
  .control-bar-wrap { flex-shrink: 0; }

  /* Widget menu — icon only on mobile */
  .widget-menu .menu-btn { padding: 8px 10px !important; min-height: 44px; font-size: 11px !important; }
  .menu-btn-label { display: none !important; }

  /* Chat — keyboard handling. Touch targets handled by the 1024px block
     (the 44px chat bar is itself the hit area; individual elements don't
     need to be 44px tall). */
  .emote-panel { max-height: 200px; }

  /* Keyboard-aware layout.
     --kb-height (set by mobile.js) = layout-viewport height - visual-viewport height.
     Modern browsers honoring interactive-widget=resizes-content shrink the layout
     viewport, so --kb-height stays ~0 and the flex layout naturally repositions.
     Older iOS leaves layout viewport intact, so --kb-height equals keyboard height
     and the transform below lifts the input above the keyboard. Same code, both paths. */
  .chat-window {
    display: flex !important; flex-direction: column !important;
    min-height: 0;
  }
  .chat-container { flex: 1; min-height: 0; overscroll-behavior: contain; }
  /* (Old translateY(--kb-height) lift is gone — the new position:fixed
     + bottom:var(--vv-bottom-offset) approach above replaces it, and
     handles keyboard + address bar in one place.) */

  /* my-campfire: hide share links */
  .share-link { display: none !important; }

  /* Admin */
  .admin-content { padding: 12px !important; }
  .modal input, .modal select { min-height: 44px; }

  /* Profile */
  .section { padding: 12px !important; }
  .profile-layout .btn { min-height: 44px; }
}

/* ========== SMALL MOBILE (375px) ========== */
@media (max-width: 375px) {

  /* Buddy drawer narrower */
  .buddy-panel { width: 260px !important; left: -260px; }

  /* Widget menu — even more compact */
  .widget-menu .menu-btn { padding: 6px 8px !important; font-size: 10px !important; }

  /* Hide speaker label in chat to save space */
  .chat-input-area .speaker-label { display: none !important; }

  /* Login card tighter */
  .login-card { margin: 0 8px !important; padding: 20px 12px !important; }

  /* Admin: hide more columns */
  .admin-content table th:nth-child(6),
  .admin-content table td:nth-child(6) { display: none; }
  .modal { width: calc(100vw - 16px) !important; padding: 16px !important; }
}