/* ═══════════════════════════════════════════════════════════════════════
   WatchKRD 2.0 — room2.css
   Loaded AFTER room.css: re-themes the room to the new design language
   without touching layout/IDs that room.js depends on.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --accent:  #5eb0ee;
  --accent2: #8ecaf5;
  --glow:    rgba(94,176,238,.4);
  --panel:   rgba(10,10,18,.94);
  --stroke:  rgba(255,255,255,.1);
  --blur:    blur(30px) saturate(1.8);
  --r:       18px;
}

html, body {
  font-family: 'Vazirmatn', 'Noto Kufi Arabic', 'Noto Naskh Arabic', system-ui, sans-serif;
}

/* ── Lobby ── */
.room-lobby {
  background:
    radial-gradient(58% 50% at 50% 16%, rgba(94,176,238,.13) 0%, transparent 62%),
    radial-gradient(45% 40% at 50% 104%, rgba(120,60,255,.09) 0%, transparent 60%),
    #07070c;
}
.lobby-card {
  background: rgba(12,12,20,.93);
  border-radius: 26px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 44px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.lobby-logo b {
  background: linear-gradient(135deg, #5eb0ee, #8ecaf5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.room-eye { filter: drop-shadow(0 0 26px rgba(94,176,238,.4)); }

.room-input { border-radius: 13px; padding: 11px 14px; }
.room-input:focus {
  border-color: rgba(94,176,238,.65);
  box-shadow: 0 0 0 3px rgba(94,176,238,.15);
}

.room-tab.active,
.btn-room-primary,
.chat-send-btn,
.copy-code-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 20px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-room-primary { border-radius: 14px; font-weight: 800; }
.btn-room-primary:hover { transform: translateY(-1.5px); }

/* ── In-room top bar ── */
.room-topbar {
  background: rgba(8,8,14,.85);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--stroke);
}
.leader-badge {
  background: rgba(255,214,10,.14);
  border: 1px solid rgba(255,214,10,.4);
  color: #ffd60a;
}

/* ── Chat panel ── */
.room-chat-panel {
  background: rgba(10,10,17,.97);
  border-inline-start: 1px solid var(--stroke);
}
.chat-header {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--stroke);
}
.chat-textarea {
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  transition: border-color .2s, box-shadow .2s;
}
.chat-textarea:focus {
  border-color: rgba(94,176,238,.55);
  box-shadow: 0 0 0 3px rgba(94,176,238,.12);
}
.msg-bubble {
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.07);
}
.msg-mine .msg-bubble,
.msg-bubble.mine {
  background: linear-gradient(135deg, rgba(94,176,238,.24), rgba(142,202,245,.18));
  border-color: rgba(94,176,238,.3);
}

/* Typing indicator dots in accent */
.typing-dot { background: var(--accent); }

/* ── Vote cards / overlays ── */
.wk-vote-card, .room-modal, .sugg-panel, .ep-modal, .mp-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.75);
}
.wk-vote-yes { background: linear-gradient(135deg, #30d158, #24a148); }
.wk-vote-no  { background: linear-gradient(135deg, #ff453a, #d3382f); }
.wk-vote-meter-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* ── Room content browser (bottom sheet) ── */
.room-browser-panel {
  background: rgba(12,12,20,.97);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.rbt.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 5px 16px var(--glow);
}
.room-browser-search-input:focus { border-color: rgba(94,176,238,.6); }

/* ── Scrollbars ── */
.chat-messages::-webkit-scrollbar,
.room-browser-grid::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb,
.room-browser-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 6px;
}

/* ── Small buttons ── */
.btn-sm {
  border-radius: 999px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .18s, transform .12s;
}
.btn-sm:active { transform: scale(.95); }
.btn-sm.danger:hover { background: rgba(255,69,58,.25); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}