/* YAL Spaces — native app–style mobile shell (phones & small touch devices) */

:root {
  --yi-bg: #000000;
  --yi-text: #e7e9ea;
  --yi-muted: #71767b;
  --yi-border: #2f3336;
  --yi-panel: #16181c;
  --yi-blue: #1d9bf0;
  --yi-red: #f4212e;
  --yi-btn-primary: #eff3f4;
  --yi-btn-primary-text: #0f1419;
  --yi-touch-min: 44px;
  --yi-space-dock-h: 72px;
}

/* Lock page scroll while full-screen Space is open */
html.yi-space-locked,
html.yi-space-locked body {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  position: fixed !important;
  overscroll-behavior: none;
}

html.yi-space-locked body {
  touch-action: manipulation;
}

/* Align accents with X mobile */
.yi-live-pill {
  border-color: var(--yi-border) !important;
  background: var(--yi-panel);
}

.yi-start-btn {
  background: var(--yi-btn-primary) !important;
  color: var(--yi-btn-primary-text) !important;
}

.yi-start-btn:hover {
  background: #d7dbdc !important;
}

.yi-mic-btn:not(.muted):not(.disabled) {
  background: var(--yi-btn-primary) !important;
  color: var(--yi-btn-primary-text) !important;
}

.yi-pass-host-btn {
  background: transparent !important;
  color: var(--yi-text) !important;
  border: 1px solid #536471 !important;
}

.yi-reaction-float {
  background: rgba(15, 20, 25, 0.88) !important;
}

.yi-speaker-av-wrap.yi-speaking-ring .yi-speaker-av-inner {
  box-shadow: 0 0 0 2px var(--yi-text) !important;
}

.yi-minimized-dot {
  background: var(--yi-red) !important;
}

.yi-hand-btn.raised {
  background: var(--yi-btn-primary) !important;
  color: var(--yi-btn-primary-text) !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) and (pointer: coarse), (max-width: 760px), ((max-width: 900px) and (hover: none) and (pointer: coarse)) {
  body.yi-in-space-mobile .x-center {
    padding-bottom: 0 !important;
  }

  /* The app's bottom tab bar stays visible across the whole mobile app. It is
     hidden ONLY while a Space is actually open full-screen (or the join preview
     is up) so the Space owns the screen. When the Space is minimized to the
     pill, the tab bar comes back (the pill floats just above it). */
  body.yi-in-space-mobile #yal-mnav,
  body.yi-in-space-mobile #yal-fab,
  body.yi-in-space-mobile .yal-mnav-backdrop,
  body.yi-space-preview-open #yal-mnav,
  body.yi-space-preview-open #yal-fab,
  body.yi-space-preview-open .yal-mnav-backdrop {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── Full-screen live room ── */
  body.yi-in-space-mobile #yi-live-dock-root {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 12500 !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0 !important;
    pointer-events: none;
    background: var(--yi-bg) !important;
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  /* Pin the full-screen room to the VISIBLE viewport. Order matters: the last
     valid declaration wins, so the dynamic/small viewport units must come AFTER
     the 100vh fallback. Using 100vh last (the old order) made the room taller
     than the visible area on iOS Safari, pushing the bottom control dock off
     screen ("buttons half-cut"). svh guarantees the dock is always reachable. */
  body.yi-in-space-mobile #yi-live-dock-root {
    height: 100vh !important;
    height: 100dvh !important;
    height: 100svh !important;
  }

  body.yi-in-space-mobile #yi-live-dock-root .yi-overlay.yi-overlay-live {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    background: var(--yi-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.yi-in-space-mobile #yi-live-dock-root .yi-overlay.yi-overlay-live .yi-live-room,
  body.yi-in-space-mobile #yi-live-dock-root .yi-live-room {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Top bar — compact, thumb-friendly */
  .yi-live-room-head {
    flex-shrink: 0;
    padding: 4px 8px 4px 4px !important;
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    border-bottom: 1px solid var(--yi-border);
    min-height: 48px;
  }

  /* Keep the minimize control on mobile (same as desktop) so users can collapse
     the Space to the pill and get the app + bottom bar back without leaving. */
  .yi-live-room-head button#yi-minimize {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem !important;
    line-height: 1;
    flex-shrink: 0;
  }

  .yi-live-room-head button {
    min-width: var(--yi-touch-min);
    min-height: var(--yi-touch-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .yi-live-toolbar {
    gap: 4px !important;
    flex-wrap: nowrap;
    max-width: calc(100vw - 60px);
  }

  .yi-invite-top-btn {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .yi-leave-btn,
  .yi-end-space-btn {
    font-size: 0.72rem !important;
    padding: 8px 10px !important;
    min-height: 36px;
  }

  /* Scrollable stage */
  .yi-live-room-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .yi-live-room-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 14px 10px !important;
  }

  .yi-live-room-title {
    font-size: 1.05rem !important;
    line-height: 1.25;
    margin: 8px 0 4px !important;
  }

  .yi-live-room-topic {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }

  /* Speaker grid — fits any phone width */
  .yi-live-room .yi-speaker-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 12px 6px !important;
    justify-items: center;
  }

  .yi-live-room .yi-speaker-av-wrap {
    width: clamp(64px, 22vw, 84px) !important;
    height: clamp(64px, 22vw, 84px) !important;
  }

  .yi-speaker-name {
    font-size: 0.72rem !important;
    max-width: 76px;
  }

  /* Per-card moderation buttons (speakers + listeners) wrap inside the grid
     cell so they never overflow on narrow phones. */
  .yi-speaker-card .yi-speaker-mod {
    flex-wrap: wrap !important;
    gap: 3px !important;
  }

  .yi-listeners-bar {
    font-size: 0.78rem !important;
    margin: 8px 0 4px !important;
  }

  /* Bottom dock — fixed app control bar */
  .yi-live-dock {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--yi-border);
    background: var(--yi-bg);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    min-height: var(--yi-space-dock-h);
  }

  .yi-dock-primary {
    gap: 10px !important;
  }

  .yi-mic-btn,
  .yi-hand-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 1.35rem !important;
  }

  .yi-dock-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Chat mode — full panel above dock */
  .yi-live-room.yi-chat-mode .yi-live-room-body {
    display: none !important;
  }

  .yi-live-room.yi-chat-mode .yi-space-chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .yi-space-chat-msgs {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 4px !important;
  }

  .yi-space-chat-form {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }

  .yi-space-chat-form input {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 10px 14px !important;
  }

  .yi-space-chat-form button {
    min-height: 44px !important;
    min-width: 64px;
    padding: 10px 16px !important;
  }

  .yi-chat-emoji-btn {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Camera PiP */
  .yi-cam-pip {
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    width: 96px !important;
    height: 132px !important;
  }

  /* DJ player — mobile layout */
  .yi-dj-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    margin: 10px 0 6px !important;
  }

  .yi-dj-transport {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .yi-dj-transport::-webkit-scrollbar {
    display: none;
  }

  .yi-dj-shuffle-btn,
  .yi-dj-prev-btn,
  .yi-dj-next-btn,
  .yi-dj-loop-btn,
  .yi-dj-btn,
  .yi-dj-pause-btn,
  .yi-dj-stop-btn,
  .yi-dj-mute-btn {
    flex: 0 0 auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .yi-dj-progress {
    height: 6px !important;
    min-height: 6px;
  }

  .yi-dj-stream-add {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .yi-dj-stream-add input {
    font-size: 16px !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .yi-dj-stream-add button,
  .yi-dj-spotify-btn,
  .yi-dj-spotify-disconnect {
    min-height: 44px !important;
    width: 100%;
  }

  .yi-dj-spotify-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .yi-dj-playlist {
    max-height: min(28vh, 160px) !important;
  }

  .yi-dj-pl-play,
  .yi-dj-pl-remove {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .yi-dj-upload input {
    max-width: 100% !important;
  }

  /* Host panel */
  .yi-host-panel {
    margin-top: 10px !important;
    padding: 10px !important;
  }

  .yi-request-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .yi-request-actions button {
    min-height: 36px !important;
  }

  /* Preview join — full-screen on mobile (hide dock / tab clutter) */
  body.yi-space-preview-open #yi-spaces-root .yi-overlay:not(.yi-overlay-live) {
    z-index: 12850 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #000 !important;
    padding: 0 !important;
    inset: 0 !important;
  }

  body.yi-space-preview-open #yi-spaces-root .yi-preview {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #yi-spaces-root .yi-overlay:not(.yi-overlay-live) {
    z-index: 12850 !important;
    align-items: flex-end !important;
    background: rgba(0, 0, 0, 0.72) !important;
    padding: 0 !important;
    inset: 0 !important;
  }

  #yi-spaces-root .yi-preview {
    width: 100% !important;
    max-height: min(94dvh, 94vh) !important;
    border-radius: 16px 16px 0 0 !important;
    border: none !important;
    border-top: 1px solid var(--yi-border) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .yi-preview-close-btn {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    min-height: var(--yi-touch-min) !important;
    border-radius: 999px !important;
    background: #16181c !important;
  }

  .yi-preview-head button,
  .yi-start-btn,
  .yi-preview-join-btn {
    min-height: var(--yi-touch-min) !important;
  }

  /* Settings & invite — bottom sheets */
  .yi-space-settings-overlay,
  .yi-space-invite-overlay {
    z-index: 12900 !important;
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .yi-space-settings,
  .yi-space-invite {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: min(92dvh, 92vh) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .yi-space-settings-body,
  .yi-space-invite-body {
    max-height: calc(92dvh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .yi-settings-btn,
  .yi-space-invite-btn {
    min-height: 40px !important;
  }

  /* Reaction picker — dock-adjacent on mobile */
  .yi-reaction-pop {
    position: fixed !important;
    z-index: 12750 !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    justify-content: center;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .yi-reaction-pop button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Live list in feed — desktop sidebar only; mobile uses bottom dock */
  #yi-live-panel:not(.yi-live-panel-mobile-dock) {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
  }

  .x-right #yi-live-panel {
    order: 0;
  }

  /* Minimized pill above tab bar */
  body:not(.yi-in-space-mobile) #yi-live-dock-root .yi-live-room.minimized {
    position: fixed !important;
    bottom: calc(var(--yal-mnav-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 1100 !important;
    background: var(--yi-panel) !important;
    border: 1px solid var(--yi-border) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
    min-height: 48px !important;
  }

  /* Very small phones */
  @media (max-width: 360px) {
    .yi-live-room .yi-speaker-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }

    .yi-invite-top-btn {
      padding: 6px 10px !important;
    }

    .yi-mic-btn,
    .yi-hand-btn {
      width: 52px !important;
      height: 52px !important;
    }
  }

  /* Landscape phones */
  @media (max-height: 500px) and (orientation: landscape) {
    body.yi-in-space-mobile #yi-live-dock-root {
      height: 100dvh !important;
    }

    .yi-live-room .yi-speaker-grid {
      grid-template-columns: repeat(6, 1fr) !important;
      gap: 8px 4px !important;
    }

    .yi-live-room .yi-speaker-av-wrap {
      width: 56px !important;
      height: 56px !important;
    }

    .yi-live-dock {
      min-height: 56px !important;
      padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .yi-mic-btn,
    .yi-hand-btn {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      min-height: 48px !important;
    }

    .yi-dj-bar {
      margin: 6px 0 !important;
    }

    .yi-dj-playlist {
      max-height: 80px !important;
    }
  }
}

/* ── Spaces TAB (browsing the list, not inside a room) ──
   1) Hide the compose "+" FAB while on the Spaces tab — posts/shares belong to
      Home, not to Spaces.
   2) When the "Create your Space" form is open, stop pinning its wrapper to the
      top. A position:sticky element taller than the viewport keeps its top
      pinned, which pushes the lower fields and the "Start now" button below the
      fold where they cannot be scrolled into view. Letting it flow normally
      makes the whole form (and every button) scrollable up and down. */
body.yi-spaces-tab-active #yal-fab {
  display: none !important;
  pointer-events: none !important;
}

body.yi-spaces-tab-active .yi-spaces-tab-panel.yi-create-sheet-open .yi-create-space-wrap {
  position: static !important;
  top: auto !important;
}

/* ── React Spaces room: remove the dead "Audio only" media tiles ──
   Video is fully removed platform-wide, so every per-peer media card ("Peer
   XXXXXX / Audio only") and the local "You" card only ever render an empty
   "Audio only" placeholder box. Those large boxes are pure empty space —
   especially on phones — and convey nothing. Hide the whole media grid; the
   <audio autoplay> elements inside keep playing because CSS display never
   pauses media playback. This loads before the React bundle CSS, so the
   override needs !important. */
.x-space-media-grid {
  display: none !important;
}

/* With the boxes gone, tighten the remaining React-room chrome so the
   listeners pill, anonymity toggle and controls sit close to the title
   instead of floating in a tall empty column on mobile. */
.x-space-listeners-pill {
  margin: 0 0 0.55rem !important;
}

.x-space-live-note {
  margin: 0.35rem 0 0.5rem !important;
}

.x-space-toggle-row {
  margin: 0.25rem 0 !important;
}

/* ── React Spaces room (modal) on mobile web: keep the action buttons in view ──
   The live room is a scrollable modal (max-height:95vh). Its controls
   ("Unmute mic", "Turn camera off", "Press to talk") are the LAST children, so
   on a phone they land below the fold / behind the bottom nav bar and can't be
   tapped. Turn the modal into a flex column and pull the whole control cluster
   up to sit right under the title — always visible and pressable — while the
   speaker tiles, listener count and toggles flow below it. The modal height is
   pinned to the real visible viewport (dvh) with safe-area padding so the
   bottom edge is never clipped. */
@media (max-width: 760px), (max-width: 1100px) and (pointer: coarse) {
  .x-space-live-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 18px !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Header and title stay at the very top … */
  .x-space-live-head { order: -5 !important; }
  .x-live-rec { order: -4 !important; }
  .x-space-live-title { order: -3 !important; margin-bottom: 0.5rem !important; }

  /* … then the controls right beneath them, before everything else. */
  .x-space-media-controls {
    order: -2 !important;
    margin: 0 0 0.5rem !important;
  }

  .x-space-talk-btn {
    order: -1 !important;
    margin: 0 0 0.75rem !important;
  }

  .x-space-control-btn,
  .x-space-talk-btn {
    min-height: 46px !important;
  }
}

/* Capacitor / native shell */
html.yal-native-app {
  background: var(--yi-bg);
}

html.yal-native-app body {
  background: var(--yi-bg);
}

html.yal-native-app body.yi-in-space-mobile #yi-live-dock-root {
  bottom: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.yal-native-app body.yi-in-space-mobile .yi-live-dock {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

html.yal-native-app .x-center-head {
  padding-top: env(safe-area-inset-top, 0px);
}