/* ═══════════════════════════════════════════════
   ŻeloTV — Responsive & Fullscreen
   Mobile · landscape · fullscreen · whitelist gate
   ═══════════════════════════════════════════════ */

/* ── Mobile responsive ───────────────────────── */
@media (max-width: 768px) {
  /* Removed: :root { --sidebar-w: 54px; } - this was preventing it from widening */
  .sidebar { width: var(--sidebar-w-collapsed) !important; min-width: var(--sidebar-w-collapsed) !important; transition: width 0.3s cubic-bezier(.4,0,.2,1), min-width 0.3s cubic-bezier(.4,0,.2,1); }
  .sidebar:not(.collapsed) { width: 50vw !important; min-width: 50vw !important; }
  .sidebar.collapsed .sb-name, .sidebar.collapsed .sb-clan, .sidebar.collapsed .sb-activity, .sidebar.collapsed .sb-text, .sidebar.collapsed .sb-title { display: none; margin: 0; opacity: 0; pointer-events: none; }
  .sidebar:not(.collapsed) .sb-name, .sidebar:not(.collapsed) .sb-clan, .sidebar:not(.collapsed) .sb-activity, .sidebar:not(.collapsed) .sb-text { display: flex; opacity: 1; }
  .sidebar .sb-list { padding: 0 8px 12px; }
  .sidebar:not(.collapsed) .sb-title { display: block; opacity: 1; width: auto; height: auto; }
  .sidebar:not(.collapsed) .sb-act-detail { margin-left: 3px; }

  .nav-username { display: none; }
  .home-content { padding: 16px; }
  .stream-grid { grid-template-columns: 1fr; }
  .panel-content { padding: 16px; }
  .panel-grid { grid-template-columns: 1fr; }

  .chat-panel { width: 100%; min-width: 0; height: 55vh; border-left: none; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
  .chat-panel.collapsed { width: 100%; min-width: 100%; height: 0; min-height: 0; border: none; }
  .chat-toggle-btn { right: 16px; top: -36px; border-radius: 6px 6px 0 0; }
  .chat-toggle-btn.chat-hidden { top: -36px; }

  .stream-layout { flex-direction: column; overflow: hidden; height: calc(100vh - var(--navbar-h)); height: calc(100dvh - var(--navbar-h)); flex: 1; }
  .stream-main { flex: none; height: 45vh; height: 45dvh; overflow: hidden; }
  .player-wrap { height: 100%; }
}

/* ── Landscape fullscreen fixes ──────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .navbar { height: 36px; padding: 0 8px; }
  .sidebar { display: none; }
  .stream-info-bar { height: 36px; min-height: 36px; max-height: 36px; padding: 0 12px; }
  .player-controls { padding: 4px 8px; }
  .pc-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  .pc-btn svg { width: 14px; height: 14px; }
  .streamer-avatar { width: 24px; height: 24px; }
  .main-content { overflow: auto; }
}

/* ── Fullscreen mode ─────────────────────────── */
:fullscreen .stream-info-bar { display: none; }
:fullscreen .chat-panel { display: none; }
:fullscreen .chat-toggle-btn { display: none; }
:fullscreen .navbar { display: none; }
:fullscreen .sidebar { display: none; }
:fullscreen .player-wrap { height: 100vh; }
:fullscreen .player-controls { padding: 10px 16px; }

/* ── Whitelist gate (replaces password gate) ─── */
.password-gate {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 32px;
  background: var(--bg); z-index: 5;
}
.pwd-icon { font-size: 48px; margin-bottom: 8px; }
.password-gate h3 { font-size: 18px; font-weight: 600; }
.pwd-streamer { font-size: 13px; color: var(--text-dim); }