:root{
  /* === CORE DARK THEME === */
  --bg:#0c1426;
  --panel:#0b1220;
  --card:#111827;
  --card-soft:#1f2937;

  --text:#e5e7eb;
  --muted:#9ca3af;

  --accent:#2563eb;

  --border:rgba(255,255,255,0.08);

  --chip:#1f2937;
  --chipActive:#2563eb;
  --chipColor:#cbd5e1;

  --header-h:56px;
  --gap-1px:1px;
}

/* ══════════════════════════════════════════════════════════════
   VizSurge Premium Design System — overrides legacy variables
   ══════════════════════════════════════════════════════════════ */
:root {
  --vs-bg:       #080608;
  --vs-surface:  #0f0d12;
  --vs-card:     rgba(255,255,255,0.035);
  --vs-card-h:   rgba(255,255,255,0.06);
  --vs-border:   rgba(255,255,255,0.07);
  --vs-border-h: rgba(255,255,255,0.14);
  --vs-purple:   var(--theme-accent);
  --vs-purple-l: var(--theme-accent-light);
  --vs-text:     #f1f0f3;
  --vs-muted:    #6b6875;
  --vs-dim:      #3d3847;
  --vs-live:     #ef4444;
  --vs-auto:     #22c55e;
  --vs-pub:      #3b82f6;
  --vs-priv:     #f59e0b;
  --vs-r:        16px;
  /* Map to legacy vars */
  --card-bg:     var(--vs-surface);
  --accent:      var(--vs-purple);
  --muted:       var(--vs-muted);
}

/* Premium base */
body {
  background: var(--vs-bg);
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* VS section headers */
.vs-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vs-muted);
}
.vs-section-hdr::after {
  content: ""; flex: 1; height: 1px;
  background: var(--vs-border);
}

/* Legacy section-title — fallback */
.section-title {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vs-muted);
}
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: var(--vs-border);
}


    
    *{box-sizing:border-box}
    body{
    margin:0;
    background:
    radial-gradient(1000px 500px at 50% -150px,
      rgba(37, 99, 235, 0.25),
      transparent 70%),
    linear-gradient(180deg,
      #0b1220 0%,
      #0c1426 40%,
      #0a1020 100%);
  color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial}
    a{color:inherit;text-decoration:none}

    header{position:relative; z-index:30}

    .wrap{max-width:1200px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

    .hide-now{ display:none !important; }

    /* ---------- GOOGLE ROW (sticky row 2) ---------- */
    .google-row {
      background: var(--panel);
      position:sticky;
      top:0;
      z-index:1025;
      padding:8px 0;
      border-bottom: var(--gap-1px) solid rgba(87, 87, 47, 0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    

    
    .user-pill{background:rgba(255,255,255,0.04);padding:6px 10px;border-radius:999px;font-size:13px;border:1px solid rgba(255,255,255,0.03);display:flex;gap:8px;align-items:center}

    
    

    /* ---------- SEARCH PANEL (sticky row 3) ---------- */
    .search-panel {
      background: var(--panel);
      position:sticky;
      top:0;
      z-index:1020;
      padding:8px 0;
      border-bottom: var(--gap-1px) solid rgba(255,255,255,0.04);
    }
    

    .panel {
      background:transparent;
      border-radius:8px;
      padding:6px;
      margin:0;
    }
    .controls{
      display:grid;gap:8px;grid-template-columns: 1fr auto auto;align-items:center
    }
    input,select,button{font-family:inherit}
    input{
      background:#071426;color:var(--text);border:1px solid rgba(255,255,255,0.04);border-radius:8px;padding:8px 10px
    }
    button{background:#1f2937;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
    .primary{background:var(--accent);border-color:var(--accent);color:#fff}
    .secondary{background:#374151;border-color:var(--border);color:#fff}

    
/* ✅ Prevent horizontal scrolling on mobile */
html, body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* ✅ Ensure all layout containers respect screen width */
.wrap, .google-inner, .gsi-btn-wrap {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ✅ Overlay fix: always centered + larger default size + viewport safe */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 18px;
  z-index: 10050;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.overlay .frame {
  position: relative;
  width: min(96vw, 600px);
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

#gsi-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
}

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
button.secondary:hover {
  background: rgba(255,255,255,0.06);
}

/* ✅ Fix left/right clipping and top overlap in mobile view */
@media (max-width: 600px) {
  .google-row {
    width: 100vw !important;
    margin: 0 !important;
    padding: 10px 10px !important; /* add top/bottom space */
    box-sizing: border-box;
    overflow-x: visible !important;
    background: var(--panel);
    position: relative;
    top: 8px; /* offset from top */
  }

  .user-pill {
    margin-left: 2px !important;
    padding-left: 2px !important;
  }

  body, html {
    overflow-x: hidden;
  }

  /* Optional: give a little space below the google row */
  .search-panel {
    margin-top: 8px !important;
  }
}

/* =====================
   HEADER TOP (Logo + Marquee)
   ===================== */

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}

.app-logo {
  height: 38px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.app-logo:hover {
  transform: scale(1.05);
}

.app-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
}

/* Marquee Styling */


@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* ✅ Responsive (Mobile View) */
@media (max-width: 768px) {
  

  .app-logo {
    height: 32px;
  }

  .app-name {
    font-size: 1.1rem;
  }
 
}


/* Main overlay (full screen, centered) */
/* ── Video overlay ────────────────────────────────────────────── */
#overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important; top: 0 !important;
  transform: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.92);
  z-index: 10050;
  box-sizing: border-box;
  /* Allow scrolling in portrait if note bar pushes content */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  /* Never block touch on mobile — video controls need touch events */
  touch-action: auto;
}

/* Wrapper: video frame + note bar, centered */


/* Frame: just holds iframe + overlaid banners */
#overlay .frame {
  position: relative;
  width: 100%;
  background: #000;
  box-sizing: border-box;
  /* No overflow:hidden — it breaks native fullscreen */
}

/* iframe: 16:9 in portrait. In landscape constrain by height instead */


/* ── Landscape sidebar layout ──────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {

  /* Overlay: row, no overflow clipping */
  #overlay {
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Wrapper fills full viewport as a row */
  

  /* Video frame: fills remaining width, full height */
  #overlay .frame {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    width: auto;
  }

}

/* Resume banner inside frame */





/* Note bar: below frame, outside iframe so typing always works */


/* keyframes for gradient motion */
@keyframes rainbowMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.no-scroll {
  overflow: hidden !important;
  position: fixed !important;
  width: 100%;
}


/* ======================
   Bottom toolbar
====================== */


/* ======================
   Mobile horizontal scroll for Auth buttons
====================== */
@media (max-width: 600px) {
  

  #auth-section button,
  #auth-section #gsi-container {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ======================
   Mobile auth scroll
====================== */
@media (max-width: 600px) { 

  #auth-section button,
  #auth-section #gsi-container {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* =====================================================
   VizSurge Dashboard UI (COMPACT)
===================================================== */

/* ===== Top Auth Bar ===== */

.vs-topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 9, 8, 0.95),
    rgba(12, 9, 8, 0.85)
  );
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(233,201,140,0.10);
}

/* Left section */
.vs-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Home button */




/* User pill */
.vs-topbar .user-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Avatar */
.vs-topbar #user-pic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* Sign out button */
.vs-topbar #btn-signout {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Google Sign-in */
.vs-topbar #gsi-container {
  display: flex;
  align-items: center;
  height: 36px;
}

.vs-topbar iframe {
  max-height: 36px !important;
}


/* ================= INDEX PAGE BACKGROUND ================= */

body.index-page {
  background: #000000
}

/* ======================================================
   WATCH PARTY VIDEO (C-ROOM CHAT) – FIXED LAYOUT
   ====================================================== */

#room-video-wrap {
  display: none; /* toggled by JS */
  background: #000;
  border-bottom: 1px solid var(--border);
}

/* Header row above video */
.room-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 12px;
  background: linear-gradient(180deg, #020617, #1e1b4b);
  color: var(--text);
  font-size: 14px;
}

/* Video container */
.room-video-frame-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;

  max-height: 45vh;

  position: relative;
}

#room-video-frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: none;
  display: block;
}

/* Chat must scroll independently */
#chat-messages {
  flex: 1;
  overflow-y: auto;
}

.room-video-frame-wrap {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .room-video-frame-wrap {
    max-height: none;        /* allow natural height on mobile */
  }
}

.hide-now {
  display: none !important;
}


/* =========================================================
   Desktop / Large Screen Attention Highlight
   ========================================================= */

@keyframes glowPulse {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shineSweep {
  0% {
    left: -60%;
    opacity: 0;
  }
  40% {
    opacity: 0.5;
  }
  60% {
    left: 120%;
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}


@keyframes searchBreath {
  0% {
    transform: scale(1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(37,99,235,0.55);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
}

/* Prevent grid overlap with bottom nav */
body.index-page {
  padding-bottom: calc(66px + max(env(safe-area-inset-bottom), 4px));
}

/* Safe area support */


/* =========================================
   TOP BAR LAYOUT FIX (Prevents Vertical Stack)
========================================= */

.vs-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vs-top-right {
  display: flex;
  align-items: center;
  gap: 12px;   /* space between icons */
}


/* =========================================
   TOP BAR BUTTONS (Refined)
========================================= */

/* =========================================
   TOP BAR BUTTONS (Refined)
========================================= */

/* All header action buttons — unified pill style */
.vs-hdr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}

.vs-hdr-btn:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  transform: translateY(-1px);
}

.vs-hdr-btn:active {
  transform: translateY(0);
  background: rgba(255,255,255,0.08);
}

/* Profile button — slightly accent tinted when signed in */
.vs-hdr-btn--profile.signed-in {
  border-color: rgba(201,161,90,0.4);
  background: rgba(201,161,90,0.15);
  color: #e8c887;
}
.vs-hdr-btn--profile.signed-in:hover {
  background: rgba(201,161,90,0.25);
}

/* Thin vertical divider between search and action buttons */
.vs-hdr-divider {
  width: 1px;
  height: 20px;
  background: rgba(233,201,140,0.14);
  flex-shrink: 0;
}

/* Keep old .top-icon-btn working for any other pages that use it */





/* =========================================
   PROFILE OVERLAY
========================================= */

.profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  display: none;
  align-items: flex-end;

  z-index: 10000;
}

.profile-overlay.active {
  display: flex;
}


/* =========================================
   PROFILE BOTTOM SHEET
========================================= */

.profile-sheet {
  width: 100%;
  background: #151009;

  border-radius: 18px 18px 0 0;
  padding: 22px 18px 28px 18px;

  animation: slideUp 0.25s ease;
}

/* Smooth Slide Up */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}


/* =========================================
   PROFILE HEADER
========================================= */

.profile-header {
  text-align: center;
  margin-bottom: 18px;
}

.profile-pic-large {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
}

.profile-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}


/* =========================================
   PROFILE SECTION ITEMS
========================================= */

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-item {
  background: rgba(233,201,140,0.045);
  border: 1px solid rgba(233,201,140,0.12);

  padding: 12px 14px;
  border-radius: 8px;

  text-align: left;
  color: #f4ecda;
  cursor: pointer;

  font-size: 14px;
  transition: 0.2s ease;
}

.profile-item:hover {
  background: rgba(233,201,140,0.09);
}

.profile-divider {
  height: 1px;
  background: rgba(233,201,140,0.14);
  margin: 18px 0;
}

.profile-item.signout {
  background: rgba(233,201,140,0.045);
  color: #c9a15a;
}


/* =========================================
   SAFE AREA SUPPORT (PWA)
========================================= */

@supports (padding: max(0px)) {
  .profile-sheet {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* Signed-out (Yellow) */
#profileBtn.signed-out {
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.6);
  color: #ffc107;
}

/* Signed-in (Blue) */
#profileBtn.signed-in {
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.6);
  color: #2196f3;
}















/* ===== Language Overlay ===== */











.lang-option-btn.active {
  border: 2px solid #38bdf8;
  background: #1e293b;
}











@keyframes popIn {
  from { transform:translateX(-50%) scale(0.8); opacity:0; }
  to { transform:translateX(-50%) scale(1); opacity:1; }
}

/* ===== League Title (Max 2 Lines, No Extra Gap) ===== */
/* ===== League Card Layout ===== */


/* ===== Title - Force 2 Lines ===== */



/* ===== Button Row ===== */


/* ---------- C-Rooms Header ---------- */

.crooms-chat-page .chat-header {
  background: #0b1220;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ---------- Room Cards ---------- */




/* ---------- Buttons ---------- */
.crooms-chat-page .btn {
  background: none;
  border: 1px solid var(--border);
  color: none;
}

.crooms-chat-page .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* ---------- Chat Bubbles ---------- */
.chat-msg {
  background: #0c1426;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
}

/* ---------- Chat Input Bar ---------- */
.chat-input-bar {
  background: #000000;
  border-top: 1px solid var(--border);
}

/* ---------- Chat Input ---------- */
#chat-input {
  background: #071426;
  border: 1px solid var(--border);
  color: var(--text);
}

/* ---------- Send Button ---------- */
#chat-send-btn {
  background: var(--accent);
  border: none;
  color: #ffffff;
}

/* =====================================================
   C-ROOMS BACKGROUND — MATCH INDEX
   ===================================================== */
body.crooms-page {
  background: linear-gradient(
    180deg,
    #0c0908 0%,
    #151009 50%,
    #1a1410 100%
  );
  min-height: 100vh;
}

body.crooms-page * {
  box-sizing: border-box;
}

/* =====================================================
   C-ROOMS LAYOUT CONTAINERS
   ===================================================== */

.crooms-page .section {
  background: transparent;
  padding: 16px;
}

/* =========================================
   C-ROOM TABS — INDEX STYLE
========================================= */

.crooms-page .tabs-wrap {
  margin: 20px 16px 10px;
}

.crooms-page .tabs {
  display: flex;
  gap: 10px;
}

.crooms-page .tab {
  flex: 0;
  padding: 10px 22px;
  height: 40px;
  background: #1f2937;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crooms-page .tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37,99,235,0.4);
}

/* ---------- Header ---------- */

.crooms-page .header {
  background: rgb(2, 6, 23);
  border-bottom: 1px solid var(--border);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  box-shadow: var(--shadow);
}

.crooms-page .header button {
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

.crooms-page main {
  padding: 0 16px 30px;
}

/* ---------- Tabs ---------- */

.crooms-page .tabs {
  display: flex;
  margin-top: 14px;
  padding: 0 14px;
  gap: 10px;
}

.crooms-page .tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  background: var(--card-soft);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--border);
}

.crooms-page .tab.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

/* ---------- Create Room Button ---------- */

.crooms-page #create-room-btn {
  margin: 12px 16px 18px;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
}

.crooms-page #create-room-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.55);
}

/* ---------- Sections ---------- */

.crooms-page .section {
  padding: 16px;
}

.crooms-page .section-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--primary);
}

/* ---------- Room Cards ---------- */

.crooms-page .croom-item-meta {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.crooms-page .btn {
  background: none;
  border: 1.5px solid var(--border);
  color: #ffffff;
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crooms-page .btn.primary {
  background: #1a1a1a;
  border: 1.5px solid var(--border);
  color: #ffffff;
}

.crooms-page .btn.danger {
  background: none;
  border: 1.5px solid var(--border);
  color: #ffffff;
}

.crooms-page .btn:active {
  transform: scale(0.96);
}

/* ---------- Badges ---------- */

.crooms-page .auto-room-badge {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #38bdf8);
  color: #020617;
  box-shadow: 0 0 10px rgba(52,211,153,0.6);
}

.crooms-page .auto-room-card {
  border-left-color: #34d399 !important;
}

.crooms-page .unread-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
}

.crooms-page .pending-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

/* ---------- Requests Modal ---------- */

.crooms-page #requests-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 50;
}

.crooms-page #requests-sheet {
  position: absolute;
  left: 0;
  bottom: -420px;
  width: 100%;
  background: #111827;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.9);
  padding: 18px;
  transition: bottom 0.25s ease-out;
  border-top: 1px solid var(--border);
}

.crooms-page #requests-sheet.open {
  bottom: 0;
}

/* =====================================================
   C-ROOMS CHAT (SCOPED + FINAL DARK BLUE SYSTEM)
===================================================== */

body.crooms-chat-page {
  height: 100vh;     /* fallback */
  height: 100dvh;    /* modern fix */
  display: flex;
  flex-direction: column;
}

/* ---------- HEADER ---------- */

.crooms-chat-page .chat-header {
  background: #0b1220;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* ---------- MESSAGES ---------- */

.crooms-chat-page #chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.crooms-chat-page #chat-messages {
  scroll-behavior: smooth;
}

/* =============================================
   CHAT BUBBLES — new design
   ============================================= */

/* Outer row: positions bubble left (others) or right (mine) */
.crooms-chat-page .chat-msg {
  display: flex;
  align-items: flex-end;
  margin: 1px 0;
  padding: 0 10px;
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Right-align own messages */
.crooms-chat-page .chat-msg.mine {
  flex-direction: row-reverse;
  background: none;
  margin-left: 0;
}

/* Bubble column — shrinks to content, stays left for others */
.crooms-chat-page .chat-bubble-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 88%;
  align-self: flex-start;
}

/* Own messages: push column to the right edge */
.crooms-chat-page .chat-msg.mine .chat-bubble-col {
  align-items: flex-end;
  align-self: flex-start;
  margin-left: auto;
}

/* Sender name — only on first message of a group */
.crooms-chat-page .chat-sender {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 2px;
  padding: 0 4px;
}

.crooms-chat-page .chat-msg.mine .chat-sender {
  text-align: right;
}

/* Per-user colour cycling for others' sender names */
.crooms-chat-page .chat-msg:not(.mine) .chat-sender { color: #60a5fa; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="1"] .chat-sender { color: #60a5fa; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="2"] .chat-sender { color: #f472b6; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="3"] .chat-sender { color: #34d399; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="4"] .chat-sender { color: #fb923c; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="5"] .chat-sender { color: #a78bfa; }
.crooms-chat-page .chat-msg:not(.mine)[data-color="6"] .chat-sender { color: #fbbf24; }

/* Own sender name */
.crooms-chat-page .chat-msg.mine .chat-sender { color: #6ee7b7; text-align: right; }

/* Reaction pills — align to match bubble side */
.crooms-chat-page .chat-msg.mine .chat-reactions {
  justify-content: flex-end;
}

/* ---------- REPLY BANNER ---------- */
#chat-reply-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(37, 99, 235, 0.12);
  border-top: 0.5px solid rgba(37, 99, 235, 0.25);
  border-bottom: 0.5px solid rgba(37, 99, 235, 0.1);
  gap: 8px;
  flex-shrink: 0;
}

.reply-banner-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.reply-banner-icon {
  font-size: 14px;
  color: #60a5fa;
  flex-shrink: 0;
}

.reply-banner-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reply-banner-to {
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  white-space: nowrap;
}

.reply-banner-preview {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-banner-cancel {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  line-height: 1;
}

.reply-banner-cancel:hover { color: #f1f5f9; }

/* ---------- EMOJI BUTTON ---------- */

/* The bubble itself */
.crooms-chat-page .chat-bubble {
  display: block;
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #f1f5f9;
  word-break: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.12s;
}

.crooms-chat-page .chat-bubble:active {
  opacity: 0.7;
}

/* Others' bubble */
.crooms-chat-page .chat-msg:not(.mine) .chat-bubble {
  background: #1e2a3a;
  border: 0.5px solid rgba(255,255,255,0.07);
  border-bottom-left-radius: 4px;
}

/* Own bubble */
.crooms-chat-page .chat-msg.mine .chat-bubble {
  background: linear-gradient(135deg, #0d4a3e, #0a6652);
  border: 0.5px solid rgba(52,211,153,0.18);
  border-bottom-right-radius: 4px;
}

/* Last bubble in a group gets full rounded corners */
.crooms-chat-page .chat-msg.group-end:not(.mine) .chat-bubble {
  border-bottom-left-radius: 14px;
}
.crooms-chat-page .chat-msg.group-end.mine .chat-bubble {
  border-bottom-right-radius: 14px;
}

/* Reply-preview block inside the bubble */
.crooms-chat-page .chat-bubble .reply-preview {
  font-size: 12px;
  color: #9ca3af;
  border-left: 3px solid #34d399;
  padding: 3px 8px;
  margin-bottom: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,0.05);
}

/* Message text */
.crooms-chat-page .chat-text {
  font-size: 14px;
  line-height: 1.45;
  color: #f1f5f9;
}

/* Reaction pills below bubble */
.crooms-chat-page .chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding: 0 3px;
}

.crooms-chat-page .reaction-pill {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 8px;
  color: #d1d5db;
  cursor: pointer;
}

/* Time — hidden by default, shown inside the action sheet */
.crooms-chat-page .chat-time {
  display: none;
}

/* Extra top margin at start of each new sender group */
.crooms-chat-page .chat-msg.group-start {
  margin-top: 8px;
}

/* ---------- INPUT BAR ---------- */

.crooms-chat-page .chat-input-bar {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #0b1220;
  display: flex;
  gap: 10px;
}

.crooms-chat-page #chat-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
}

.crooms-chat-page #chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}

.crooms-chat-page #chat-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.crooms-chat-page #chat-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

/* Send button */
.crooms-chat-page #chat-send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}

/* Action sheet overlay */
#vs-msg-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#vs-msg-sheet-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

#vs-msg-sheet {
  background: #131f32;
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 20px 20px 0 0;
  padding: 14px 16px 28px;
  width: 100%;
  max-width: 520px;
  transform: translateY(24px);
  transition: transform 0.2s ease;
}

#vs-msg-sheet-overlay.visible #vs-msg-sheet {
  transform: translateY(0);
}

.vs-sheet-preview {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 9px 13px;
  margin-bottom: 14px;
}

.vs-sheet-preview-sender {
  font-size: 11px;
  color: #34d399;
  font-weight: 600;
  margin-bottom: 3px;
}

.vs-sheet-preview-text {
  font-size: 14px;
  color: #e5e7eb;
  line-height: 1.4;
  word-break: break-word;
}

.vs-sheet-preview-time {
  font-size: 11px;
  color: #4b5563;
  margin-top: 5px;
}

.vs-sheet-rxn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  margin-bottom: 8px;
}

.vs-sheet-rxn-btn {
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}

.vs-sheet-rxn-btn:hover,
.vs-sheet-rxn-btn:active {
  background: rgba(255,255,255,0.16);
}

/* "+" more emoji button */
.vs-sheet-rxn-btn.plus-btn {
  font-size: 20px;
  font-weight: 400;
  color: #9ca3af;
  background: rgba(255,255,255,0.05);
}

.vs-sheet-rxn-btn.plus-btn:hover,
.vs-sheet-rxn-btn.plus-btn:active {
  color: #f1f5f9;
  background: rgba(255,255,255,0.12);
}

/* Compact on very small screens (< 360px wide) */
@media (max-width: 359px) {
  .vs-sheet-rxn-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* On landscape mobile (short viewport), keep single row, no wrap */
@media (max-height: 500px) and (orientation: landscape) {
  .vs-sheet-rxn-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 6px 4px;
    gap: 4px;
  }
  .vs-sheet-rxn-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    flex-shrink: 0;
  }
  #vs-msg-sheet {
    padding: 10px 14px 16px;
  }
  .vs-sheet-preview {
    margin-bottom: 8px;
    padding: 6px 10px;
  }
  .vs-sheet-preview-text {
    font-size: 13px;
  }
}

.vs-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vs-sheet-action-btn {
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 14px;
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  transition: background 0.12s;
}

.vs-sheet-action-btn:hover,
.vs-sheet-action-btn:active {
  background: rgba(255,255,255,0.06);
}

.vs-sheet-action-btn.danger {
  color: #f87171;
}

.vs-sheet-cancel {
  width: 100%;
  margin-top: 8px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #9ca3af;
  font-size: 14px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.vs-sheet-cancel:hover { background: rgba(255,255,255,0.1); }

/* === EDIT VIEW === */
.vs-sheet-edit-label {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 8px;
  padding: 0 2px;
}

.vs-sheet-edit-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  min-height: 72px;
  max-height: 180px;
  overflow-y: auto;
  transition: border-color 0.15s;
}

.vs-sheet-edit-input:focus {
  border-color: rgba(37,99,235,0.6);
}

.vs-sheet-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.vs-sheet-edit-actions .vs-sheet-cancel {
  flex: 1;
  margin-top: 0;
}

.vs-sheet-save-btn {
  flex: 1;
  background: #2563eb;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.vs-sheet-save-btn:hover { background: #1d4ed8; }

/* === DELETE CONFIRM VIEW === */
.vs-sheet-delete-icon {
  font-size: 32px;
  text-align: center;
  margin-bottom: 8px;
}

.vs-sheet-delete-title {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
  text-align: center;
  margin-bottom: 4px;
}

.vs-sheet-delete-sub {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  margin-bottom: 16px;
}

.vs-sheet-delete-btn {
  flex: 1;
  background: #dc2626;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.vs-sheet-delete-btn:hover { background: #b91c1c; }

/* =========================================
   CREATE ROOM OVERLAY FIX
========================================= */

#create-room-overlay {
  display: none;                 /* JS controls this */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 11000;

  /* override video overlay flex rules */
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
}

/* Modal box */
#create-room-overlay .modal {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #0b1220, #0c1426);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* Labels */
#create-room-overlay label {
  display: block;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 4px;
  color: var(--muted);
}

/* Inputs */
#create-room-overlay input[type="text"],
#create-room-overlay input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #071426;
  color: var(--text);
}

/* Radio row spacing */
#create-room-overlay input[type="radio"] {
  margin-right: 6px;
}

/* Button row */
#create-room-overlay .modal > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================================
   EDIT ROOM OVERLAY FIX
========================================= */

#room-edit-overlay {
  display: none;                 /* JS controls visibility */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 11000;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Modal container */
#room-edit-overlay .modal {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #0b1220, #0c1426);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 14px 45px rgba(0,0,0,0.6);
}

/* Title */
#room-edit-overlay .modal h3 {
  margin-bottom: 14px;
  font-weight: 600;
}

/* Inputs */
#room-edit-overlay input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #071426;
  color: var(--text);
}

/* Button row */
#room-edit-overlay .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}


#room-edit-overlay input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

#chat-back-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chat-back-btn:hover {
  color: var(--accent);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
}

.icon-btn svg {
  pointer-events: none;
}

.icon-btn:hover {
  transform: scale(1.08);
}

.tabs {
  display: flex;
  flex-wrap: wrap;            /* ✅ allow next row */
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
}

/* Each tab */
.tab {
  flex: 0 1 auto;             /* ✅ auto width */
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;        /* keep text in single tab line */
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .tab {
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* C-Rooms Info Layout */


/* C-Rooms Info Modal */
#crooms-info-overlay .modal{
  width: 90%;
  max-width: 560px;

  max-height: 80vh;      /* prevents modal from exceeding screen */
  overflow-y: auto;      /* enables vertical scrolling */

  padding: 18px;
  border-radius: 14px;
}

#crooms-info-overlay .modal{
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* ---------- WATCH PARTY VIDEO ---------- */

.room-video-frame-wrap{
  position:relative;
  width:100%;
  background:#000;
  border-radius:12px;
  aspect-ratio:16/9;
  overflow:visible;
}

/* YouTube player container */
#room-video-player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

/* iframe fill */
#room-video-player iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
}


/* ---------- FULLSCREEN MODE ---------- */

#room-video-wrap:fullscreen .room-video-frame-wrap{
  width:100vw;
  height:100vh;
  aspect-ratio:auto;   /* remove 16:9 constraint */
  border-radius:0;
}

#room-video-wrap:fullscreen #room-video-player{
  width:100%;
  height:100%;
  transition:right 0.35s cubic-bezier(0.32,0.72,0,1);
}

#room-video-wrap:fullscreen #room-video-player iframe{
  width:100vw;
  height:100vh;
}
/* When the fullscreen chat side panel is open, shrink the video to fill
   the remaining space instead of letting the panel cover part of it --
   uses :has() on body (rather than a specific ancestor) so this works
   regardless of exactly how the panel is nested in the DOM. */
body:has(#fs-chat-side-panel.open) #room-video-wrap:fullscreen #room-video-player{
  width:calc(100% - 520px);
  right:520px;
}
body:has(#fs-chat-side-panel.open) #room-video-wrap:fullscreen #room-video-player iframe{
  width:calc(100vw - 520px);
}
/* Same rules for "pseudo-fullscreen" (used on iOS, or as a fallback when
   the native Fullscreen API fails/is unavailable) -- the :fullscreen CSS
   pseudo-class never matches in that mode, since it's implemented via
   manual style changes rather than the real Fullscreen API, so a
   JS-toggled class (vs-fs-active on body) covers both mechanisms. */
body.vs-fs-active #room-video-player{
  transition:right 0.35s cubic-bezier(0.32,0.72,0,1);
}
body.vs-fs-active:has(#fs-chat-side-panel.open) #room-video-player{
  width:calc(100% - 520px);
  right:520px;
}


/* ---------- REACTION OVERLAY ---------- */

#video-reaction-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

.video-reaction{
  position:absolute;
  right:20px;
  bottom:10px;
  font-size:34px;
  animation:floatReactionUp 3s ease-out forwards;
}

@keyframes floatReactionUp{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-120px) scale(1.2);
  }
  100%{
    opacity:0;
    transform:translateY(-260px) scale(0.9);
  }
}

/* ---------- REACTION BAR ---------- */

#video-reaction-bar{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:10000;
}

#video-reaction-bar button{
  font-size:22px;
  border:none;
  background:rgba(0,0,0,0.55);
  border-radius:50%;
  width:44px;
  height:44px;
  cursor:pointer;
}


/* move reaction bar slightly inward in fullscreen */

#room-video-wrap:fullscreen #video-reaction-bar{
  left:20px;
}


/* ---------- FLOATING REACTIONS ---------- */



@keyframes reactionFloat{
  0%{
    transform:translateX(0);
    opacity:1;
  }
  100%{
    transform:translateX(-400px);
    opacity:0;
  }
}

/* Up Next overlay on video */

#up-next-card{
  position:absolute;
  bottom:70px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.75);
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:20;
}

#up-next-close{
  border:none;
  background:none;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  opacity:0.7;
}

#up-next-close:hover{
  opacity:1;
}

#next-video-banner{
  position:absolute;
  bottom:110px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.8);
  color:#fff;
  padding:6px 12px;
  border-radius:10px;
  font-size:13px;
  z-index:20;
}

/* ================================
   CROOMS PAGE TAB UI (BLUE ACTIVE)
================================ */

.crooms-page .tabs {
  display: flex;
  gap: 6px;
  border-bottom: none;
  margin-top: 10px;
}

/* Base tab */
.crooms-page .tab {
  appearance: none;
  background: transparent;
  border: none;

  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;

  color: #9ca3af;
  cursor: pointer;

  border-radius: 10px;

  transition: all 0.2s ease;
}

/* Hover */
.crooms-page .tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ✅ Active tab (FULL BLUE) */
.crooms-page .tab.active {
  color: #fff;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}

/* spacing between main and sub tabs */
.crooms-page .tabs + .tabs {
  margin-top: 6px;
}

#room-video-frame-wrap:fullscreen{
  width:100vw;
  height:100vh;
  background:#000;
}

#room-video-frame-wrap:fullscreen #room-video-player{
  width:100%;
  height:100%;
}

#room-video-frame-wrap iframe{
  width:100%;
  height:100%;
}

/* Make both cards equal width */
.vs-card-row .vs-card {
  flex: 1;
  min-width: 0;
}

/* Mobile fallback (optional but recommended) */
@media (max-width: 480px) {
  .vs-card-row {
    flex-direction: column;
  }
}

.vs-card-row .vs-card:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}


/* =========================
   🔥 HEADER (MATCH CHAT ROOMS)
   ========================= */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-weight: 600;
}

.back-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
}


/* =========================
   🔥 CHIP BUTTON
   ========================= */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  min-width: 70px;
  padding: 0 14px;

  font-size: 13px;
  font-weight: 500;

  border-radius: 999px;
  border: 1px solid var(--border);

  background: var(--chip);
  color: var(--chipColor);

  cursor: pointer;
  white-space: nowrap;

  transition: all 0.2s ease;
}

.chip.active {
  background: var(--chipActive);
  color: #fff;
  border-color: var(--chipActive);
}

.chip:hover {
  opacity: 0.9;
}

/* =========================
   🔄 STICKY FILTER BAR
   ========================= */

/* Slide animations */
@keyframes vzapSlideRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes vzapSlideLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.vzap-slide-right { animation: vzapSlideRight .22s ease-out forwards; }
.vzap-slide-left  { animation: vzapSlideLeft  .22s ease-out forwards; }

/* Thumbnail */

/* Glitch/static overlay */

.vzap-glitch-on {
  opacity: 1 !important;
  animation: vzapGlitch .32s steps(4) forwards;
}
@keyframes vzapGlitch {
  0%  { opacity: .9; transform: skewX(-2deg) scaleY(.98); filter: brightness(1.3) hue-rotate(15deg); }
  25% { opacity: .5; transform: skewX(2deg)  scaleY(1.02); filter: brightness(.8) hue-rotate(-10deg); }
  50% { opacity: .8; transform: skewX(-1deg) scaleY(.99); filter: brightness(1.1); }
  75% { opacity: .3; transform: skewX(1deg)  scaleY(1);   filter: brightness(1.2); }
  100%{ opacity: 0;  transform: skewX(0)     scaleY(1);   filter: none; }
}

/* Badge + viewers overlay on thumbnail */

.vzap-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}
.vzap-badge--live {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.5);
  color: #fca5a5;
}

/* Dots */

.vzap-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.vzap-dot--active {
  background: #7c3aed;
  width: 18px;
  border-radius: 999px;
}

/* chat-msg.mine and chat-sender small handled in crooms-chat-page block above */

.guest-identity-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
}

.guest-identity-bar button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
}

/* === VIDEO REACTION BAR (MINIMAL MODE) === */
#video-reaction-bar {
  position: absolute;
  bottom: 12px;
  left: 12px;              /* ✅ anchored LEFT */
  right: auto;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 4px;           /* mobile tap safety */
  z-index: 10000;         /* ✅ always above video */
  pointer-events: auto;
}

/* Toggle button (😊) */
#video-react-toggle {
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 50%;
  touch-action: manipulation;  /* ✅ mobile fix */
}

/* Hide the on-video reaction/sync/mic/speaker column outside real
   fullscreen — these now live in the bottom action bar instead. */
#video-reaction-bar {
  display: none;
}
#room-video-wrap:fullscreen #video-reaction-bar {
  display: flex;
}

/* === Hidden reactions popup === */
#video-reaction-options {
  position: absolute;
  bottom: 42px;
  left: 0;
  right: auto;

  display: none;
  flex-direction: row;
  gap: 6px;

  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  padding: 8px 10px;

  z-index: 10001;

  /* ✅ IMPORTANT FIX */
  pointer-events: auto;
}

/* Reaction buttons */
#video-reaction-options button {
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 6px;
  touch-action: manipulation;
}

/* === Video container layering === */
.room-video-frame-wrap {
  position: relative;
  z-index: 1;
}

/* YouTube iframe base layer */
#room-video-player iframe {
  position: relative;
  z-index: 1;
}

/* 🚫 Disable iframe interaction while reacting */

/* ================================================
   FULLSCREEN WATCH PARTY CHAT OVERLAY
================================================ */

/* Root overlay — invisible container, covers fullscreen element */
#fs-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* max z-index, sits above fullscreen layer */
  pointer-events: none; /* pass-through by default */
}

/* ---- PORTRAIT: Bottom Drawer ---- */
#fs-chat-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--fs-drawer-h, 260px);
  min-height: 100px;
  max-height: 70vh;
  background: rgba(11, 18, 32, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  pointer-events: all;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

#fs-chat-drawer.open {
  transform: translateY(0);
}

/* Drag handle */
#fs-drawer-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  margin: 10px auto 0;
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
}

#fs-drawer-handle:active {
  cursor: grabbing;
}

/* Chat header row (portrait + landscape shared) */
.fs-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fs-chat-label {
  font-size: 11px;
  font-weight: 700;
  color: #a7f3d0;
  letter-spacing: 0.08em;
}

#fs-chat-close-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
}

#fs-chat-close-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Messages container (shared) */
#fs-chat-messages-clone,
#fs-side-messages-clone {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Thin scrollbar in messages */
#fs-chat-messages-clone::-webkit-scrollbar,
#fs-side-messages-clone::-webkit-scrollbar {
  width: 3px;
}

#fs-chat-messages-clone::-webkit-scrollbar-thumb,
#fs-side-messages-clone::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* Input bar (shared portrait + landscape) */
.fs-chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.fs-chat-input-bar textarea {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 14px;
  color: #e5e7eb;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.4;
}

.fs-chat-input-bar textarea:focus {
  border-color: rgba(37, 99, 235, 0.6);
  background: rgba(255, 255, 255, 0.11);
}

.fs-chat-input-bar textarea::placeholder {
  color: #6b7280;
}

.fs-chat-input-bar button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #2563eb;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
  padding: 0;
}

.fs-chat-input-bar button:hover {
  background: #1d4ed8;
}

.fs-chat-input-bar button:active {
  transform: scale(0.93);
}

/* ---- LANDSCAPE: Side Panel ---- */
#fs-chat-side-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  background: rgba(11, 18, 32, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  pointer-events: all;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

#fs-chat-side-panel.open {
  transform: translateX(0);
}

.fs-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Smaller input for landscape */
@media (orientation: landscape) and (max-height: 500px) {
  #fs-chat-side-panel .fs-chat-input-bar textarea {
    font-size: 13px;
    padding: 5px 10px;
  }

  #fs-chat-side-panel .fs-chat-input-bar button {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

#fs-side-collapse-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

#fs-side-collapse-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Unread badge on tab */
#fs-chat-unread-badge {
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 16px;
  padding: 0 3px;
}


/* Floating chat tab — portrait (bottom-right) + landscape (right edge) */
#fs-chat-tab {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s, transform 0.2s;
  background: rgba(11, 18, 32, 0.88);
  border: 1px solid rgba(255,255,255,0.12);
}

#fs-chat-tab:hover {
  background: rgba(37, 99, 235, 0.35);
}

#fs-chat-tab:active {
  transform: scale(0.93);
}

/* Portrait: circular FAB at bottom-right */
@media (orientation: portrait) {
  #fs-chat-tab {
    bottom: 90px;       /* above the video reaction bar area */
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-direction: row;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
}

/* Landscape: slim pill anchored to right edge */
@media (orientation: landscape) {
  #fs-chat-tab {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 10px 8px;
    flex-direction: column;
    width: auto;
    height: auto;
  }
  #fs-chat-tab:active {
    transform: translateY(-50%) scale(0.93);
  }
}

/* Portrait: hide side panel only — tab is now shown in portrait too */
@media (orientation: portrait) {
  #fs-chat-side-panel {
    display: none !important;
  }
}

/* Landscape: hide drawer */
@media (orientation: landscape) {
  #fs-chat-drawer {
    display: none !important;
  }
}

/* ===== ACTION SHEET OVERLAY ===== */


/* backdrop */


/* bottom sheet */


/* show animation */
.vs-action-overlay.active .vs-action-sheet {
  bottom: 0;
}

/* header */

.vs-vsheet-icon-fav.active       { background: rgba(251, 191, 36, 0.22); }

/* ================================================
   DISCOVER HUB — chip row + collapsible panels
================================================ */


.vs-disc-chip.active {
  background: #1e1f3d;
  border-color: rgba(99,102,241,0.55);
}

.vs-disc-chip.active .vs-disc-label {
  color: #a5b4fc;
}

/* Active indicator dot */


.vs-disc-chip.active .vs-disc-dot {
  opacity: 1;
}

/* Collapsible panel */


.vs-disc-panel.open {
  max-height: 600px; /* generous max — content will be less */
  border-top-color: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.06);
}


/* ── Badges ── */
.badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
}
.badge-pub  { background: rgba(29,158,117,0.15); color: #1D9E75; }
.badge-priv { background: rgba(212,83,126,0.15); color: #D4537E; }
.badge-auto { background: rgba(127,119,221,0.15); color: #7F77DD; }

/* ── Card footer (count + actions) ── */

/* ── More (···) button ── */
.croom-more-wrap { position: relative; }


/* ── Overflow menu ── */
.croom-overflow-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #1e1b2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 4px;
  min-width: 160px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text, #eee);
}
.overflow-item:hover { background: rgba(255,255,255,0.07); }
.overflow-item.danger { color: #E24B4A; }


/* ============================================================
   EDUCATION LAYER — VizSurge Learning Module
   Extracted from index.html inline <style> block.
   Append this section to static/style.css
   to avoid conflicts with existing styles.
   ============================================================ */

/* ── Mode tab bar ────────────────────────────────────────── */
/* ── Bottom Navigation Bar ──────────────────────────────────── */
.vs-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  background: rgba(12, 9, 8, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(233,201,140,0.10);
  padding-bottom: max(env(safe-area-inset-bottom), 4px);
}

.vs-bnav-tab {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(244,236,218,0.32);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.03em;
}

/* Top indicator line — hidden by default */
.vs-bnav-tab::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: transparent;
  transition: background 0.2s;
}

.vs-bnav-icon {
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, color 0.2s, opacity 0.2s;
  color: rgba(244,236,218,0.32);
  opacity: 1;
}
.vs-bnav-icon svg {
  stroke: currentColor;
}
.vs-bnav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ── HOME active — gold ─────────────────────────── */
#vsTabHome.active {
  color: #c9a15a;
}
#vsTabHome.active::before {
  background: #c9a15a;
  box-shadow: 0 0 8px #c9a15a, 0 0 16px rgba(201,161,90,0.4);
}
#vsTabHome.active .vs-bnav-icon {
  transform: translateY(-2px) scale(1.1);
  filter: none;
  color: #c9a15a;
}

/* ── ROOMS active — emerald green ──────────────── */
#vsTabRooms.active {
  color: #34d399;
}
#vsTabRooms.active::before {
  background: #34d399;
  box-shadow: 0 0 8px #34d399, 0 0 16px rgba(52,211,153,0.4);
}
#vsTabRooms.active .vs-bnav-icon {
  transform: translateY(-2px) scale(1.1);
  filter: none;
  color: #34d399;
}

/* ── SIGNATURE (Parties) active — wine ─────────── */
#vsTabParties.active {
  color: #b8525f;
}
#vsTabParties.active::before {
  background: #b8525f;
  box-shadow: 0 0 8px #b8525f, 0 0 16px rgba(184,82,95,0.4);
}
#vsTabParties.active .vs-bnav-icon {
  transform: translateY(-2px) scale(1.1);
  filter: none;
  color: #b8525f;
}
/* -- INSTANT active -- warm amber --------------- */
#vsTabInstant.active {
  color: #e8a33d;
}
#vsTabInstant.active::before {
  background: #e8a33d;
  box-shadow: 0 0 8px #e8a33d, 0 0 16px rgba(232,163,61,0.4);
}
#vsTabInstant.active .vs-bnav-icon {
  transform: translateY(-2px) scale(1.1);
  filter: none;
  color: #e8a33d;
}

/* ── NEWS active — warm orange ─────────────────── */
#vsTabNews.active {
  color: #fb923c;
}
#vsTabNews.active::before {
  background: #fb923c;
  box-shadow: 0 0 8px #fb923c, 0 0 16px rgba(251,146,60,0.4);
}
#vsTabNews.active .vs-bnav-icon {
  transform: translateY(-2px) scale(1.1);
  filter: none;
  color: #fb923c;
}

/* Hover on inactive */
.vs-bnav-tab:not(.active):hover {
  color: rgba(244,236,218,0.6);
}
.vs-bnav-tab:not(.active):hover .vs-bnav-icon {
  filter: none;
  opacity: 0.8;
}

/* Body needs bottom padding so content isn't hidden under the nav */
body.index-page,
body.crooms-page,
body.chat-page {
  padding-bottom: calc(66px + max(env(safe-area-inset-bottom), 4px));
}


    /* ── Global Utility Bar — Saved & Lists (shared across Explore & Study) ── */  
    
    
    
    .vs-util-btn:hover,
    .vs-util-btn.active {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    
    
      /* ✅ Force equal height + alignment for top action buttons */
    .google-row .btn {
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 14px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 13px !important;
      line-height: 1 !important;
      box-sizing: border-box !important;
    }
    
      /* ✅ Semi-transparent glass background for top area */
    .header-top,
    .top-chips,
    .google-row {
      background: rgba(0, 0, 0, 0.45) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: none !important;
    }

    /* ✅ Keep all text clearly readable */
    .header-top *,
    .top-chips *,
    .google-row * {
      color: #ffffff !important;
    }

    /* ✅ Buttons get a clean glass look */
    .google-row .btn {
      background: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    /* ✅ Logo container stays clean */
    .logo-link {
      background: transparent !important;
    }

    /* ── My Learning full drawer ─────────────────────────────────────
       Shown inline within the Learn panel when "See all" is tapped.
       Slides open smoothly; close button restores the 4-card preview. */
    @keyframes vsEduDrawerIn {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
/* =========================================================
   VIZSURGE REDESIGN v2 — Neon Glass / Watch Party UI
   Appended intentionally so the existing functional CSS remains intact.
   ========================================================= */

:root {
  --vs-bg-0: #05040d;
  --vs-bg-1: #0a0920;
  --vs-glass: rgba(13, 16, 38, 0.78);
  --vs-glass-strong: rgba(9, 11, 28, 0.94);
  --vs-line: rgba(150, 120, 255, 0.24);
  --vs-purple: var(--theme-accent);
  --vs-indigo: var(--theme-indigo);
  --vs-cyan: var(--theme-cyan);
  --vs-pink: var(--theme-pink);
  --vs-chat-h: 54vh;
}

/* --- Page atmosphere -- matches instant.html's background exactly, so
   Instant, Public, Signature and Bots & Extensions all share one look --- */
body.crooms-page {
  background:
    radial-gradient(700px 430px at 8% -4%, rgba(112,74,255,.28), transparent 68%),
    radial-gradient(600px 420px at 94% 8%, rgba(41,194,255,.17), transparent 67%),
    radial-gradient(620px 500px at 52% 72%, rgba(213,55,177,.08), transparent 72%),
    linear-gradient(180deg, #080817 0%, #070713 46%, #05050e 100%);
}
body.crooms-page::before {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 52%);
  opacity:.18;
}
body.crooms-page .vs-page-wrap,
body.crooms-page #vsSignInGate {
  position:relative;
  z-index:1;
}

/* --- Header / party identity --- */
.crooms-page .room-video-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,12,38,.96), rgba(10,21,50,.94) 55%, rgba(20,8,42,.96));
  border-bottom: 1px solid rgba(139,92,246,.24);
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
}

.crooms-page .room-video-header::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 70px;
  right: -50px;
  top: -30px;
  background: radial-gradient(circle, rgba(34,211,238,.22), transparent 68%);
  pointer-events: none;
}

/* --- Session action bar: premium glass dock --- */
.crooms-page #chat-session-bar {
  position: relative;
  z-index: 30;
  gap: 7px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(18,16,42,.88), rgba(7,8,22,.94));
  border-top: 1px solid rgba(139,92,246,.18);
  border-bottom: 1px solid rgba(34,211,238,.10);
  box-shadow: 0 -8px 28px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.crooms-page #chat-session-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.06), rgba(34,211,238,.05), transparent);
}

.crooms-page #chat-session-bar .vs-session-btn {
  position: relative;
  min-height: 36px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(30,34,65,.82), rgba(13,16,37,.92));
  color: #e8e9ff;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.crooms-page #chat-session-bar .vs-session-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(139,92,246,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 20px rgba(99,102,241,.20);
}

.crooms-page #vs-actionbar-react-btn {
  border-color: rgba(251,191,36,.18);
}

.crooms-page #vs-actionbar-chat-btn {
  border-color: rgba(139,92,246,.46);
  background: linear-gradient(135deg, rgba(99,102,241,.30), rgba(139,92,246,.20));
  box-shadow: 0 0 18px rgba(139,92,246,.13), inset 0 1px rgba(255,255,255,.09);
}

.crooms-page #vs-actionbar-chat-btn.active,
body.vs-chat-open.crooms-page #vs-actionbar-chat-btn {
  border-color: rgba(192,132,252,.82);
  background: linear-gradient(135deg, rgba(99,102,241,.42), rgba(168,85,247,.32));
  box-shadow: 0 0 22px rgba(139,92,246,.30), inset 0 1px rgba(255,255,255,.12);
}

.crooms-page #vs-fs-btn {
  border-color: rgba(34,211,238,.24);
}

/* --- Video surface --- */
.crooms-page .room-video-frame-wrap {
  background:
    radial-gradient(circle at 50% 50%, rgba(29,24,70,.35), transparent 60%),
    #000;
  box-shadow: 0 0 0 1px rgba(139,92,246,.13), 0 14px 40px rgba(0,0,0,.30);
}

.crooms-page .room-video-frame-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px rgba(255,255,255,.045), inset 0 -30px 70px rgba(3,2,15,.12);
}

/* --- Fullscreen video: animate the player upward when chat opens --- */
#room-video-wrap:fullscreen #room-video-player,
body.vs-fs-active #room-video-player {
  transition: width .38s cubic-bezier(.32,.72,0,1),
              height .38s cubic-bezier(.32,.72,0,1),
              top .38s cubic-bezier(.32,.72,0,1),
              right .38s cubic-bezier(.32,.72,0,1);
}

#room-video-wrap:fullscreen #room-video-player iframe,
body.vs-fs-active #room-video-player iframe {
  transition: width .38s cubic-bezier(.32,.72,0,1),
              height .38s cubic-bezier(.32,.72,0,1);
}

/* Portrait fullscreen + chat: video occupies the upper portion, chat owns the lower portion. */
@media (orientation: portrait) {
  #room-video-wrap:fullscreen #room-video-player,
  body.vs-fs-active #room-video-player {
    width: 100% !important;
    right: auto !important;
    top: 0 !important;
    height: calc(100% - var(--vs-chat-h)) !important;
  }

  #room-video-wrap:fullscreen #room-video-player iframe,
  body.vs-fs-active #room-video-player iframe {
    width: 100% !important;
    height: 100% !important;
  }

  body.vs-fs-active.vs-chat-open #room-video-player,
  #room-video-wrap:fullscreen:has(#fs-chat-drawer.open) #room-video-player {
    height: calc(100% - var(--vs-chat-h)) !important;
  }

  body.vs-fs-active:not(.vs-chat-open) #room-video-player,
  #room-video-wrap:fullscreen:not(:has(#fs-chat-drawer.open)) #room-video-player {
    height: 100% !important;
  }
}

/* --- Chat drawer: glossy, larger and visually connected to video --- */
#fs-chat-drawer {
  --drawer-radius: 22px;
  height: var(--vs-chat-h);
  min-height: 180px;
  max-height: 78vh;
  background:
    radial-gradient(90% 35% at 50% 0%, rgba(99,102,241,.18), transparent 70%),
    linear-gradient(180deg, rgba(12,15,40,.96), rgba(5,7,21,.97));
  border-top: 1px solid rgba(167,139,250,.34);
  border-left: 1px solid rgba(139,92,246,.12);
  border-right: 1px solid rgba(34,211,238,.08);
  border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
  box-shadow: 0 -18px 55px rgba(0,0,0,.42), 0 -2px 30px rgba(99,102,241,.12), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

#fs-chat-drawer::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.75), rgba(168,85,247,.9), transparent);
  opacity: .75;
  pointer-events: none;
}

#fs-drawer-handle {
  width: 46px;
  height: 5px;
  margin-top: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(34,211,238,.5), rgba(168,85,247,.9), rgba(236,72,153,.5));
  box-shadow: 0 0 12px rgba(139,92,246,.35);
}

.fs-chat-header {
  padding: 9px 15px 9px;
  border-bottom: 1px solid rgba(139,92,246,.12);
}

.fs-chat-label {
  color: #d9d6ff;
  letter-spacing: .09em;
  font-size: 11px;
}

.fs-chat-label::before {
  content: "●";
  display: inline-block;
  margin-right: 6px;
  color: #34d399;
  font-size: 9px;
  text-shadow: 0 0 9px rgba(52,211,153,.8);
}

#fs-chat-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}

#fs-chat-messages-clone {
  padding: 10px 12px 12px;
  scrollbar-width: thin;
}

/* Existing message bubbles inherit their functionality; this gives them a richer surface. */
#fs-chat-messages-clone .chat-msg,
#fs-chat-messages-clone .message,
#fs-side-messages-clone .chat-msg,
#fs-side-messages-clone .message {
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.14));
}

.fs-chat-input-bar {
  gap: 7px;
  padding: 9px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(9,11,29,.62), rgba(5,7,20,.94));
  border-top: 1px solid rgba(139,92,246,.16);
  box-shadow: 0 -8px 22px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025);
}

.fs-chat-input-bar textarea {
  min-height: 36px;
  background: linear-gradient(135deg, rgba(30,35,73,.82), rgba(15,19,47,.88));
  border: 1px solid rgba(129,140,248,.22);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 3px 12px rgba(0,0,0,.16);
}

.fs-chat-input-bar textarea:focus {
  border-color: rgba(139,92,246,.72);
  box-shadow: 0 0 0 3px rgba(139,92,246,.10), inset 0 1px rgba(255,255,255,.07);
}

.fs-chat-input-bar button#fs-chat-send-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #c026d3) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(139,92,246,.35), inset 0 1px rgba(255,255,255,.25);
}

.fs-chat-input-bar button#fs-chat-send-btn:hover {
  background: linear-gradient(135deg, #818cf8, #a78bfa 55%, #d946ef) !important;
  transform: translateY(-1px);
}

/* --- Fullscreen reaction/action dock --- */
#room-video-wrap:fullscreen #video-reaction-bar,
body.vs-fs-active #video-reaction-bar {
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 7px 9px;
  gap: 7px;
  background: linear-gradient(135deg, rgba(9,10,28,.84), rgba(22,13,49,.84));
  border: 1px solid rgba(139,92,246,.34);
  box-shadow: 0 10px 35px rgba(0,0,0,.38), 0 0 22px rgba(99,102,241,.12), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

#room-video-wrap:fullscreen #video-reaction-bar button,
body.vs-fs-active #video-reaction-bar button {
  border-color: rgba(139,92,246,.28) !important;
  background: rgba(18,19,43,.82) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 3px 12px rgba(0,0,0,.18);
}

/* --- Floating fullscreen exit control --- */
#vs-pseudo-fs-exit {
  width: 42px !important;
  height: 42px !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: 12px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: linear-gradient(135deg, rgba(15,16,39,.80), rgba(42,20,73,.78)) !important;
  box-shadow: 0 0 20px rgba(99,102,241,.20), inset 0 1px rgba(255,255,255,.10) !important;
}

/* --- Landscape fullscreen chat panel --- */
#fs-chat-side-panel {
  width: min(430px, 42vw);
  background:
    radial-gradient(100% 30% at 50% 0%, rgba(99,102,241,.18), transparent 70%),
    linear-gradient(180deg, rgba(10,12,31,.96), rgba(5,7,20,.97));
  border-left: 1px solid rgba(139,92,246,.30);
  box-shadow: -20px 0 55px rgba(0,0,0,.42), -4px 0 28px rgba(99,102,241,.12), inset 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

#fs-chat-side-panel #fs-chat-reopen-btn {
  width: 38px !important;
  height: 76px !important;
  border-radius: 13px 0 0 13px !important;
  background: linear-gradient(180deg, #6366f1, #8b5cf6 60%, #c026d3) !important;
  color: #fff !important;
  box-shadow: -5px 0 22px rgba(139,92,246,.30), inset 0 1px rgba(255,255,255,.20) !important;
}

/* --- Regular portrait mode: use more of the available screen for chat --- */
@media (max-width: 768px) and (orientation: portrait) {
  #fs-chat-drawer {
    height: min(58vh, 500px);
    max-height: 78vh;
  }

  /* When regular-mode chat is open, give the drawer a stronger visual handoff. */
  body.crooms-page.vs-chat-open #fs-chat-drawer {
    box-shadow: 0 -22px 60px rgba(0,0,0,.50), 0 -4px 32px rgba(99,102,241,.15), inset 0 1px rgba(255,255,255,.07);
  }
}

/* --- Reduce motion for accessibility --- */
@media (prefers-reduced-motion: reduce) {
  #fs-chat-drawer,
  #fs-chat-side-panel,
  #room-video-player,
  #room-video-player iframe,
  .vs-session-btn {
    transition: none !important;
  }
}

/* =========================================================
   VIZSURGE REDESIGN v3 — Expanded Chat + Blue Glass Messages
   + Premium Session Action Dock
   ========================================================= */

:root {
  --vs-chat-h: 62vh;
  --vs-chat-blue-1: #172554;
  --vs-chat-blue-2: #1e3a8a;
  --vs-chat-indigo: #6366f1;
  --vs-chat-cyan: #22d3ee;
  --vs-chat-violet: #8b5cf6;
}

/* Give the portrait chat a little more room so the unused black area
   between the video and the drawer is reduced. */
@media (max-width: 768px) and (orientation: portrait) {
  #fs-chat-drawer {
    height: 62vh;
    max-height: 82vh;
    min-height: 220px;
  }
}

/* Fullscreen portrait: let chat take the lower portion and move the video
   up smoothly with it. */
@media (orientation: portrait) {
  body.vs-fs-active #fs-chat-drawer,
  #room-video-wrap:fullscreen #fs-chat-drawer {
    height: 64vh;
    max-height: 84vh;
  }

  body.vs-fs-active #room-video-player,
  #room-video-wrap:fullscreen #room-video-player {
    height: calc(100% - 64vh) !important;
  }

  body.vs-fs-active:not(.vs-chat-open) #room-video-player,
  #room-video-wrap:fullscreen:not(:has(#fs-chat-drawer.open)) #room-video-player {
    height: 100% !important;
  }
}

/* ---------------------------------------------------------
   Chat message surfaces — replace the old green/teal bubble
   with a cool blue-indigo glass gradient.
   --------------------------------------------------------- */
.crooms-chat-page .chat-msg.mine .chat-bubble,
#fs-chat-messages-clone .chat-msg.mine .chat-bubble,
#fs-side-messages-clone .chat-msg.mine .chat-bubble {
  background:
    linear-gradient(135deg, rgba(37,99,235,.72), rgba(79,70,229,.72) 52%, rgba(124,58,237,.70)) !important;
  border: 1px solid rgba(129,140,248,.34) !important;
  color: #f7f8ff !important;
  box-shadow:
    0 6px 18px rgba(30,64,175,.16),
    inset 0 1px rgba(255,255,255,.10) !important;
}

.crooms-chat-page .chat-msg:not(.mine) .chat-bubble,
#fs-chat-messages-clone .chat-msg:not(.mine) .chat-bubble,
#fs-side-messages-clone .chat-msg:not(.mine) .chat-bubble {
  background:
    linear-gradient(135deg, rgba(23,37,84,.94), rgba(30,58,138,.78)) !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  color: #f1f5ff !important;
  box-shadow:
    0 5px 16px rgba(15,23,42,.26),
    inset 0 1px rgba(255,255,255,.055) !important;
}

/* Media/GIF/sticker bubbles get the same blue-glass frame without
   introducing a colored strip around the actual media. */
.crooms-chat-page .chat-bubble.chat-media-bubble,
#fs-chat-messages-clone .chat-bubble.chat-media-bubble,
#fs-side-messages-clone .chat-bubble.chat-media-bubble {
  background:
    linear-gradient(145deg, rgba(15,35,82,.96), rgba(49,46,129,.86)) !important;
  border: 1px solid rgba(96,165,250,.28) !important;
  box-shadow:
    0 7px 20px rgba(15,23,42,.30),
    0 0 16px rgba(59,130,246,.08),
    inset 0 1px rgba(255,255,255,.08) !important;
}

.crooms-chat-page .chat-msg.mine .chat-bubble .reply-preview,
#fs-chat-messages-clone .chat-msg.mine .reply-preview,
#fs-side-messages-clone .chat-msg.mine .reply-preview {
  border-left-color: #60a5fa !important;
  background: rgba(15,23,60,.28) !important;
  color: #c7d2fe !important;
}

.crooms-chat-page .chat-msg.mine .chat-sender {
  color: #93c5fd !important;
}

/* Sender labels / online accents use the same cool palette. */
#fs-chat-drawer .fs-chat-label,
#fs-chat-side-panel .fs-chat-label {
  color: #dbeafe;
}

/* ---------------------------------------------------------
   Premium bottom session/action bar.
   Layout and onclick handlers are untouched — this is visual only.
   --------------------------------------------------------- */
.crooms-page #chat-session-bar,
.crooms-chat-page #chat-session-bar {
  min-height: 58px;
  padding: 7px 9px max(7px, env(safe-area-inset-bottom)) !important;
  gap: 6px !important;
  background:
    linear-gradient(180deg, rgba(10,13,34,.78), rgba(4,6,18,.96)) !important;
  border-top: 1px solid rgba(99,102,241,.32) !important;
  box-shadow:
    0 -14px 38px rgba(0,0,0,.38),
    0 -1px 0 rgba(34,211,238,.10),
    inset 0 1px rgba(255,255,255,.055) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.crooms-page #chat-session-bar::after,
.crooms-chat-page #chat-session-bar::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.48), rgba(139,92,246,.75), rgba(236,72,153,.45), transparent);
  pointer-events: none;
}

.crooms-page #chat-session-bar .vs-session-btn,
.crooms-chat-page #chat-session-bar .vs-session-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 14px;
  border: 1px solid rgba(129,140,248,.24);
  background:
    linear-gradient(145deg, rgba(30,41,82,.84), rgba(15,23,52,.92)) !important;
  color: #eaf0ff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    0 5px 15px rgba(0,0,0,.25),
    0 0 0 rgba(99,102,241,0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.crooms-page #chat-session-bar .vs-session-btn:hover,
.crooms-chat-page #chat-session-bar .vs-session-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(129,140,248,.56);
  box-shadow:
    inset 0 1px rgba(255,255,255,.10),
    0 8px 20px rgba(0,0,0,.30),
    0 0 18px rgba(99,102,241,.15);
}

.crooms-page #chat-session-bar .vs-session-btn:active,
.crooms-chat-page #chat-session-bar .vs-session-btn:active {
  transform: translateY(0) scale(.97);
}

/* End Party remains clearly destructive, but now matches the glass dock. */
.crooms-page #btn-end-party,
.crooms-chat-page #btn-end-party {
  color: #fecdd3 !important;
  border-color: rgba(244,63,94,.38) !important;
  background: linear-gradient(145deg, rgba(127,29,57,.72), rgba(55,16,37,.90)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 15px rgba(0,0,0,.24), 0 0 12px rgba(244,63,94,.07);
}

/* Sync = cyan/blue, React = warm accent, Chat = hero action, Fullscreen = cyan. */
.crooms-page #chat-session-bar #vs-actionbar-react-btn,
.crooms-chat-page #chat-session-bar #vs-actionbar-react-btn {
  border-color: rgba(250,204,21,.30) !important;
  background: linear-gradient(145deg, rgba(80,59,14,.76), rgba(35,28,12,.94)) !important;
}

.crooms-page #chat-session-bar #vs-actionbar-chat-btn,
.crooms-chat-page #chat-session-bar #vs-actionbar-chat-btn {
  border-color: rgba(129,140,248,.70) !important;
  background: linear-gradient(135deg, rgba(37,99,235,.48), rgba(99,102,241,.46) 55%, rgba(124,58,237,.48)) !important;
  box-shadow:
    0 0 20px rgba(79,70,229,.24),
    inset 0 1px rgba(255,255,255,.14),
    0 6px 18px rgba(0,0,0,.26);
}

.crooms-page #chat-session-bar #vs-actionbar-chat-btn.active,
.crooms-chat-page #chat-session-bar #vs-actionbar-chat-btn.active,
body.vs-chat-open #chat-session-bar #vs-actionbar-chat-btn {
  border-color: rgba(165,180,252,.95) !important;
  box-shadow:
    0 0 24px rgba(99,102,241,.40),
    0 0 7px rgba(34,211,238,.14),
    inset 0 1px rgba(255,255,255,.18);
}

.crooms-page #chat-session-bar #vs-fs-btn,
.crooms-chat-page #chat-session-bar #vs-fs-btn {
  border-color: rgba(34,211,238,.34) !important;
  background: linear-gradient(145deg, rgba(10,63,86,.72), rgba(10,25,51,.94)) !important;
}

/* Keep the auto-sync note subtle so the actual actions remain visually dominant. */
.crooms-page #chat-session-bar .vs-session-note,
.crooms-chat-page #chat-session-bar .vs-session-note {
  color: rgba(191,219,254,.48);
}

/* On narrow portrait phones, make the dock feel like one unified capsule
   and avoid forcing the user to scroll just to reach Chat. */
@media (max-width: 480px) and (orientation: portrait) {
  .crooms-page #chat-session-bar,
  .crooms-chat-page #chat-session-bar {
    min-height: 60px;
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .crooms-page #chat-session-bar .vs-session-btn,
  .crooms-chat-page #chat-session-bar .vs-session-btn {
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 10.5px;
  }

  .crooms-page #chat-session-bar .vs-session-spacer,
  .crooms-chat-page #chat-session-bar .vs-session-spacer {
    min-width: 2px !important;
    flex: 1 1 2px !important;
  }
}

/* If the bar becomes horizontally scrollable, keep a soft fade at its edges. */
#chat-session-bar {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#chat-session-bar::-webkit-scrollbar { display: none; }



/* ================================================================
   VIZSURGE WATCH DISCOVER — MOBILE-FIRST SOCIAL OVERHAUL
   Structural IDs/classes used by croom.js are intentionally preserved.
   ================================================================ */
.watch-discover-page{max-width:1180px!important;padding:22px 22px 110px!important;}
.watch-hero{position:relative;overflow:hidden;min-height:235px;padding:32px 34px 28px;border-radius:28px;border:1px solid rgba(139,92,246,.24);background:radial-gradient(circle at 82% 18%,rgba(34,211,238,.18),transparent 30%),radial-gradient(circle at 18% 110%,rgba(124,58,237,.24),transparent 38%),linear-gradient(135deg,rgba(18,24,58,.96),rgba(9,12,31,.98) 58%,rgba(15,22,49,.96));box-shadow:0 22px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;}
.watch-hero:after{content:"";position:absolute;inset:1px;border-radius:27px;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 24%,transparent 72%,rgba(34,211,238,.05));}
.watch-hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;}
.watch-hero-glow-a{width:190px;height:190px;right:-55px;top:-75px;background:rgba(124,58,237,.2);box-shadow:0 0 90px 30px rgba(124,58,237,.12);}
.watch-hero-glow-b{width:120px;height:120px;left:40%;bottom:-100px;background:rgba(34,211,238,.13);box-shadow:0 0 80px 25px rgba(34,211,238,.1);}
.watch-hero-copy,.watch-hero-actions{position:relative;z-index:2;}
.watch-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(99,102,241,.28);border-radius:999px;background:rgba(99,102,241,.1);font-size:10px;font-weight:800;letter-spacing:.13em;color:#a5b4fc;}
.watch-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee;animation:watchDot 1.8s ease-in-out infinite;}
@keyframes watchDot{50%{opacity:.45;transform:scale(.72)}}
.watch-title{margin-top:15px!important;font-size:clamp(34px,5vw,58px)!important;line-height:.98!important;letter-spacing:-.055em!important;font-weight:800!important;font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;color:#f8fafc!important;}
.watch-title span{background:linear-gradient(90deg,#a78bfa 5%,#38bdf8 55%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.watch-subtitle{max-width:620px;margin-top:12px!important;font-size:15px!important;line-height:1.55!important;font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;color:rgba(226,232,240,.68)!important;}
.watch-hero-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px;}
.watch-hero-pills span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-size:10.5px;color:rgba(226,232,240,.68);backdrop-filter:blur(8px);}
.watch-hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;}
.watch-request-btn,.watch-info-btn,.watch-create-btn{height:44px!important;border-radius:14px!important;}
.watch-request-btn{display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid rgba(167,139,250,.28);background:rgba(99,102,241,.12);color:#c4b5fd;font:700 12px inherit;cursor:pointer;}
#chat-requests-badge{background:#8b5cf6;color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;min-width:17px;text-align:center;}
.watch-info-btn{display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);color:rgba(255,255,255,.72);font:600 12px inherit;cursor:pointer;backdrop-filter:blur(10px);}
.watch-info-btn span{display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:11px;}
.watch-create-btn{padding:0 18px!important;color:#fff!important;background:linear-gradient(135deg,#7c3aed,#4f46e5 55%,#0891b2)!important;box-shadow:0 10px 28px rgba(79,70,229,.28),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(167,139,250,.3)!important;}
.watch-create-plus{font-size:20px;line-height:0;font-weight:400;}
.watch-discover-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:24px 2px 2px;padding:0 3px 12px;border-bottom:1px solid rgba(148,163,184,.12);}
.watch-tabs-label{font-size:9px;font-weight:800;letter-spacing:.16em;color:rgba(148,163,184,.42);margin-bottom:5px;}
.watch-tabs .vs-tab{padding:8px 13px 10px!important;border-radius:9px 9px 0 0!important;font-size:12px!important;}
.watch-tabs .vs-tab.active{color:#e9e7ff!important;border-bottom-color:#8b5cf6!important;background:linear-gradient(180deg,rgba(124,58,237,.11),transparent);}
.watch-search-wrap{position:relative;display:flex;align-items:center;width:min(340px,42vw);}
.watch-search-wrap svg{position:absolute;left:13px;width:15px;height:15px;stroke:rgba(148,163,184,.7);fill:none;stroke-width:2;}
.watch-search{width:100%!important;height:40px!important;padding:0 52px 0 38px!important;border-radius:13px!important;background:rgba(15,23,42,.65)!important;border:1px solid rgba(148,163,184,.14)!important;color:#e2e8f0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.watch-search:focus{border-color:rgba(129,140,248,.5)!important;box-shadow:0 0 0 3px rgba(99,102,241,.1)!important;}
.watch-search-wrap kbd{position:absolute;right:9px;padding:3px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:rgba(148,163,184,.6);font:9px/1 inherit;}
#rooms-all-list,#rooms-mine-list{gap:13px!important;}
/* Room card gradient -- matches instant.html's .party-card exactly, so
   Instant/Public/Signature party cards share one color treatment. */
.vs-grid-compact .vs-room-card,.vs-grid-wide .vs-room-card{border-radius:18px!important;background:linear-gradient(145deg,rgba(19,18,43,.78),rgba(10,10,25,.72))!important;border-color:rgba(151,126,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.18);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease!important;}
.vs-grid-compact .vs-room-card:hover,.vs-grid-wide .vs-room-card:hover{transform:translateY(-3px)!important;border-color:rgba(92,206,255,.28)!important;background:linear-gradient(145deg,rgba(25,23,56,.84),rgba(11,11,28,.78))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 42px rgba(0,0,0,.28)!important;}
.vs-room-card.is-auto{border-left-color:#22c55e!important}/* is-public / is-private stripes removed -- matches instant.html's plain card border; is-auto (system-generated party) is kept, since it's a functional signal, not decoration. */
@media (min-width:900px){#rooms-all-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}.watch-discover-page{padding-left:30px!important;padding-right:30px!important;}.vs-grid-compact .vs-room-card{min-height:104px;}}
@media (max-width:700px){.watch-discover-page{padding:12px 12px 96px!important;}.watch-hero{min-height:0;padding:24px 20px 20px;border-radius:24px;display:block;}.watch-title{font-size:38px!important;}.watch-subtitle{font-size:13px!important;}.watch-hero-pills span{font-size:9.5px;padding:6px 8px;}.watch-hero-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;}.watch-request-btn,.watch-info-btn,.watch-create-btn{width:100%;justify-content:center;}.watch-create-btn{grid-column:1/-1;order:-1;height:48px!important;}.watch-discover-toolbar{align-items:stretch;flex-direction:column;gap:12px;margin-top:19px;}.watch-tabs-wrap{overflow-x:auto;}.watch-search-wrap{width:100%;}.watch-search{height:44px!important;}#rooms-all-list,#rooms-mine-list{display:flex!important;flex-direction:column!important;}.vs-grid-compact .vs-room-card,.vs-grid-wide .vs-room-card{padding:14px!important;}.vs-section-hdr{padding:17px 5px 7px!important;}}
@media (prefers-reduced-motion:reduce){.watch-eyebrow-dot,.vs-room-card{animation:none!important;transition:none!important;}}

/* ================================================================
   VIZSURGE WATCH v2 — TIGHTER DISCOVERY + MODERN CREATE/ABOUT SHEETS
   All existing JS IDs and actions are preserved.
   ================================================================ */
#vsPageContent2{margin-top:0!important;padding-top:0!important;}
.watch-discover-toolbar{margin-bottom:0!important;padding-bottom:9px!important;}
#rooms-all-list,#rooms-mine-list{padding-top:0!important;margin-top:0!important;}
#rooms-all-list .vs-section-hdr,#rooms-mine-list .vs-section-hdr{margin-top:0!important;padding-top:6px!important;padding-bottom:5px!important;}

.vs-overlay{background:radial-gradient(circle at 50% 18%,rgba(79,70,229,.14),transparent 40%),rgba(2,4,16,.80)!important;backdrop-filter:blur(16px)!important;padding:14px!important;}
.vs-create-overlay,.vs-info-overlay{align-items:center!important;justify-content:center!important;}
.vs-create-sheet,.vs-about-modal{position:relative;width:min(680px,100%);max-height:min(90vh,840px);overflow:auto;border-radius:28px!important;border:1px solid rgba(129,140,248,.28)!important;background:linear-gradient(145deg,rgba(16,21,52,.98),rgba(7,10,28,.99) 62%,rgba(21,12,48,.98))!important;box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 70px rgba(79,70,229,.12),inset 0 1px rgba(255,255,255,.10)!important;padding:24px!important;scrollbar-width:thin;}
.vs-create-sheet:before,.vs-about-modal:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 25%,transparent 72%,rgba(34,211,238,.035));}
.vs-sheet-handle{width:42px!important;height:4px!important;background:linear-gradient(90deg,#8b5cf6,#22d3ee)!important;box-shadow:0 0 14px rgba(99,102,241,.5);margin:0 auto 18px!important;}
.vs-modal-hero,.vs-about-hero{position:relative;z-index:1;display:flex;align-items:flex-start;gap:13px;margin-bottom:17px;}.vs-modal-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;font-size:22px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.2);}.vs-modal-icon-create{background:linear-gradient(135deg,rgba(124,58,237,.65),rgba(37,99,235,.5),rgba(34,211,238,.35));}.vs-modal-icon-info{background:linear-gradient(135deg,rgba(168,85,247,.62),rgba(59,130,246,.42));}.vs-modal-title-wrap{min-width:0;flex:1}.vs-modal-kicker{font-size:9px;font-weight:800;letter-spacing:.16em;color:#a5b4fc;margin:2px 0 5px}.vs-modal-title-wrap h3{font-size:22px!important;line-height:1.1;margin:0 0 5px!important;color:#fff!important;letter-spacing:-.025em!important}.vs-modal-title-wrap p{font-size:12px;color:rgba(226,232,240,.56);line-height:1.5;margin:0}.vs-modal-close{width:34px;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:rgba(255,255,255,.62);cursor:pointer;font-size:14px;transition:.2s}.vs-modal-close:hover{background:rgba(255,255,255,.09);color:#fff;transform:rotate(3deg)}
.vs-create-progress{display:flex;gap:6px;margin:0 0 17px 61px;position:relative;z-index:1}.vs-create-progress span{height:3px;border-radius:99px;background:rgba(148,163,184,.18);flex:1;max-width:90px}.vs-create-progress span.active{background:linear-gradient(90deg,#8b5cf6,#22d3ee);box-shadow:0 0 12px rgba(99,102,241,.45)}
.vs-form-section{position:relative;z-index:1;padding:14px 0;border-top:1px solid rgba(148,163,184,.10)}.vs-form-section:first-of-type{border-top:0;padding-top:0}.vs-form-section-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}.vs-step{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(99,102,241,.10);border:1px solid rgba(129,140,248,.2);color:#a5b4fc;font:800 9px/1 'JetBrains Mono',monospace}.vs-form-section-head strong{display:block;font-size:12px;color:#f8fafc}.vs-form-section-head small{display:block;font-size:10px;color:rgba(148,163,184,.55);margin-top:2px}.vs-field{margin-bottom:11px!important}.vs-field label{color:#aab7d2!important;font-size:10px!important;letter-spacing:.08em!important;margin-bottom:6px!important}.vs-field label em{color:#67e8f9;font-style:normal}.vs-input-wrap{position:relative;display:flex;align-items:center}.vs-input-icon{position:absolute;left:12px;z-index:2;color:#67e8f9;font-size:13px;opacity:.8}.vs-field input,.vs-field select{height:45px!important;padding-left:35px!important;border-radius:12px!important;background:rgba(7,13,32,.75)!important;border:1px solid rgba(129,140,248,.16)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}.vs-field input:focus{border-color:rgba(103,232,249,.48)!important;box-shadow:0 0 0 3px rgba(34,211,238,.07),0 0 24px rgba(79,70,229,.08)!important}.vs-helper{font-size:9.5px;color:rgba(148,163,184,.48);margin-top:5px;padding-left:2px}.vs-helper span{margin-right:4px}.vs-visibility-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vs-visibility-card{position:relative;display:flex;align-items:center;gap:10px;min-height:72px;padding:11px 12px;border-radius:15px;border:1px solid rgba(148,163,184,.12);background:linear-gradient(145deg,rgba(30,41,75,.38),rgba(15,23,42,.58));cursor:pointer;transition:.2s;overflow:hidden}.vs-visibility-card input{display:none}.vs-visibility-card:has(input:checked){border-color:rgba(99,102,241,.62);background:linear-gradient(145deg,rgba(79,70,229,.20),rgba(14,34,66,.68));box-shadow:0 0 22px rgba(79,70,229,.12),inset 0 1px rgba(255,255,255,.08)}.vs-visibility-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.06);font-size:16px}.vs-visibility-icon.public{background:rgba(34,211,238,.10)}.vs-visibility-icon.private{background:rgba(167,139,250,.10)}.vs-visibility-copy{flex:1;min-width:0}.vs-visibility-copy b{display:block;font-size:11px;color:#fff}.vs-visibility-copy small{display:block;font-size:9px;color:rgba(148,163,184,.58);margin-top:3px;line-height:1.35}.vs-check{position:absolute;right:9px;top:9px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#22d3ee);color:#fff;font-size:9px;opacity:0;transform:scale(.7);transition:.2s}.vs-visibility-card:has(input:checked) .vs-check{opacity:1;transform:scale(1)}
.vs-premiere-section{padding-bottom:7px}.vs-modern-toggle-row{padding:11px 12px!important;border-radius:13px!important;background:rgba(255,255,255,.025)!important;border-color:rgba(148,163,184,.10)!important}.vs-toggle-label{font-size:11px!important}.vs-toggle-desc{font-size:9.5px!important}.vs-toggle{width:42px!important;height:24px!important}.vs-toggle input:checked + .vs-toggle-track{background:linear-gradient(90deg,#6d28d9,#2563eb)!important;border-color:rgba(129,140,248,.65)!important}.vs-toggle input:checked + .vs-toggle-track::after{background:#c4b5fd!important}
.vs-safety-strip{position:relative;z-index:1;display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding:11px 12px;border-radius:14px;background:linear-gradient(100deg,rgba(34,211,238,.055),rgba(99,102,241,.08));border:1px solid rgba(103,232,249,.12)}.vs-safety-strip>span{font-size:16px}.vs-safety-strip strong{font-size:10px;color:#c4b5fd}.vs-safety-strip p{font-size:9.5px;color:rgba(148,163,184,.55);margin-top:2px}.vs-copyright-note{position:relative;z-index:1;font-size:9px;color:rgba(148,163,184,.46);margin:9px 2px}.vs-copyright-note a{color:#a5b4fc}.vs-create-actions{position:sticky;bottom:-24px;margin:10px -24px -24px!important;padding:14px 24px 24px;background:linear-gradient(180deg,rgba(8,11,30,.1),rgba(8,11,30,.98) 35%);z-index:3}.vs-create-actions .vs-btn-cancel{height:46px;border-radius:13px;background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.13);font-size:11px}.vs-create-submit{height:46px!important;border-radius:13px!important;background:linear-gradient(135deg,#7c3aed,#4f46e5 52%,#0891b2)!important;box-shadow:0 10px 28px rgba(79,70,229,.25),inset 0 1px rgba(255,255,255,.16);font-size:12px!important}.vs-create-submit span{margin-right:5px}
.vs-about-modal{max-width:780px!important;padding:26px!important}.vs-about-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.vs-about-card{padding:15px;border-radius:17px;border:1px solid rgba(148,163,184,.12);background:linear-gradient(145deg,rgba(30,41,75,.42),rgba(15,23,42,.64));min-height:205px}.vs-about-card.auto{border-color:rgba(74,222,128,.16)}.vs-about-card.public{border-color:rgba(34,211,238,.18)}.vs-about-card.private{border-color:rgba(167,139,250,.18)}.vs-about-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.vs-about-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.06);font-size:19px}.vs-about-tag{font-size:8px;font-weight:800;letter-spacing:.1em;color:rgba(148,163,184,.48)}.vs-about-card h4{font-size:14px;color:#fff;margin-bottom:6px}.vs-about-card p{font-size:10px;line-height:1.5;color:rgba(148,163,184,.62);min-height:31px}.vs-about-card ul{list-style:none;padding:0;margin:11px 0 0}.vs-about-card li{font-size:9.5px;color:rgba(226,232,240,.62);padding:4px 0;display:flex;gap:7px}.vs-about-card li:before{content:'✓';color:#67e8f9;font-weight:800}.vs-about-callout{position:relative;z-index:1;display:flex;gap:11px;align-items:center;margin-top:12px;padding:13px;border-radius:16px;border:1px solid rgba(129,140,248,.20);background:linear-gradient(100deg,rgba(124,58,237,.14),rgba(8,145,178,.09))}.vs-callout-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.15);font-size:17px}.vs-about-callout strong{font-size:11px;color:#e9d5ff}.vs-about-callout p{font-size:9.5px;color:rgba(148,163,184,.58);margin-top:3px;line-height:1.45}.vs-about-features{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.vs-about-features span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:9px;color:rgba(226,232,240,.58)}.vs-about-features b{font-size:13px}
@media(max-width:700px){.vs-overlay{padding:8px!important}.vs-create-sheet,.vs-about-modal{max-height:95dvh!important;border-radius:24px!important;padding:20px!important}.vs-modal-title-wrap h3{font-size:19px!important}.vs-create-progress{margin-left:0}.vs-visibility-cards{grid-template-columns:1fr}.vs-about-grid{grid-template-columns:1fr}.vs-about-card{min-height:0}.vs-about-card p{min-height:0}.vs-create-actions{margin:8px -20px -20px!important;padding:12px 20px 20px}.vs-about-features{justify-content:flex-start}.watch-discover-page{padding-bottom:96px!important}}


/* ================================================================
   VIZSURGE INDEX / ECOSYSTEM HOME — MOBILE-FIRST OVERHAUL
   Scoped to body.index-page so existing pages are not affected.
   ================================================================ */
body.index-page {
  --eco-bg:#050612;
  --eco-panel:rgba(16,18,42,.72);
  --eco-line:rgba(145,150,255,.16);
  --eco-text:#f6f5ff;
  --eco-muted:#a7a8c4;
  --eco-purple:#8b5cf6;
  --eco-blue:#38bdf8;
  --eco-pink:#ec4899;
  --eco-cyan:#22d3ee;
  background:
    radial-gradient(700px 430px at 8% -4%, rgba(112,74,255,.28), transparent 68%),
    radial-gradient(600px 420px at 94% 8%, rgba(41,194,255,.17), transparent 67%),
    radial-gradient(620px 500px at 52% 72%, rgba(213,55,177,.08), transparent 72%),
    linear-gradient(180deg, #080817 0%, #070713 46%, #05050e 100%);
  color:var(--eco-text);
}
body.index-page::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 52%);opacity:.18}
body.index-page #vsAppRoot{position:relative;z-index:1;max-width:none;padding-bottom:80px}
body.index-page .vs-home-panel{display:none}

.vs-ecosystem-home{max-width:1180px;margin:0 auto;padding:30px 22px 90px}
.vs-eco-hero{min-height:560px;position:relative;overflow:hidden;border:1px solid rgba(143,125,255,.24);border-radius:34px;background:linear-gradient(135deg,rgba(40,31,93,.92),rgba(9,17,45,.86) 58%,rgba(7,34,55,.9));box-shadow:0 30px 100px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.09);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:70px 70px 64px}
.vs-eco-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,black,transparent 78%);pointer-events:none}
.vs-eco-hero-orb{position:absolute;border-radius:50%;filter:blur(4px);pointer-events:none;animation:vsEcoFloat 8s ease-in-out infinite}
.vs-eco-orb-a{width:260px;height:260px;right:-90px;top:-110px;background:radial-gradient(circle,rgba(73,214,255,.38),rgba(73,91,255,.05) 68%,transparent 70%)}
.vs-eco-orb-b{width:300px;height:300px;left:35%;bottom:-230px;background:radial-gradient(circle,rgba(190,75,255,.28),transparent 68%);animation-delay:-3s}
.vs-eco-hero-copy,.vs-eco-hero-visual{position:relative;z-index:2}
.vs-live-pill,.vs-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a9b5ff}
.vs-live-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(129,140,248,.35);background:rgba(92,73,220,.16);border-radius:999px;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.vs-live-pill span{width:7px;height:7px;border-radius:50%;background:#67e8f9;box-shadow:0 0 14px #67e8f9;animation:vsEcoPulse 1.8s infinite}
.vs-eco-hero h1{font-size:clamp(45px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:22px 0 18px;font-weight:850;color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.25)}
.vs-eco-hero h1 em,.vs-eco-section h2 em,.vs-extension-copy h2 em{font-style:normal;background:linear-gradient(90deg,#a78bfa,#38bdf8,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-eco-lead{max-width:590px;font-size:18px;line-height:1.65;color:#b8bad4;margin:0 0 28px}
.vs-eco-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vs-eco-primary,.vs-eco-secondary{min-height:52px;padding:0 20px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:800;transition:transform .2s,box-shadow .2s,border-color .2s}
.vs-eco-primary{color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5 55%,#06b6d4);box-shadow:0 14px 36px rgba(99,72,220,.35),inset 0 1px rgba(255,255,255,.28)}
.vs-eco-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(99,72,220,.45),inset 0 1px rgba(255,255,255,.3)}
.vs-eco-secondary{color:#e9e9ff;border:1px solid rgba(160,160,255,.2);background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}
.vs-eco-secondary:hover{transform:translateY(-2px);border-color:rgba(120,190,255,.42)}
.vs-eco-btn-icon{font-size:17px}.vs-eco-arrow{font-size:19px}.vs-eco-proof-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;color:#8f91af;font-size:12px}.vs-eco-proof-row span:first-child{color:#a9f3e6}
.vs-eco-hero-visual{min-height:420px;display:grid;place-items:center}
.vs-phone-stack{position:relative;width:260px;height:430px;transform:rotate(5deg);filter:drop-shadow(0 28px 38px rgba(0,0,0,.5))}
.vs-phone-main{position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);border-radius:32px;background:linear-gradient(180deg,#0e1028,#060712);padding:15px;box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 0 7px rgba(91,72,190,.07);overflow:hidden}
.vs-phone-back{position:absolute;inset:12px;border-radius:32px;border:1px solid rgba(255,255,255,.08)}.vs-phone-one{transform:translate(25px,18px) rotate(8deg);background:linear-gradient(150deg,#142c5d,#1d0e48);opacity:.7}.vs-phone-two{transform:translate(-22px,10px) rotate(-7deg);background:linear-gradient(150deg,#1c174a,#083f57);opacity:.7}
.vs-phone-top{height:30px;display:flex;align-items:center;justify-content:space-between;color:#8f91b2;font-size:10px}.vs-phone-dot{width:7px;height:7px;background:#67e8f9;border-radius:50%;box-shadow:0 0 10px #67e8f9}
.vs-mini-video{height:190px;border-radius:22px;background:linear-gradient(145deg,#1e4f70,#4b2078 45%,#0b1e3d);position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.15)}.vs-mini-video:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(103,232,249,.35),transparent 32%),radial-gradient(circle at 80% 70%,rgba(236,72,153,.35),transparent 34%)}.vs-mini-play{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;padding-left:3px;color:white;background:rgba(255,255,255,.16);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 30px rgba(0,0,0,.25)}.vs-mini-shine{position:absolute;width:160%;height:50%;top:-10%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:rotate(-22deg);animation:vsEcoShine 5s infinite}
.vs-mini-party-title{font-weight:800;font-size:14px;margin:15px 2px 9px}.vs-mini-people{display:flex;gap:5px}.vs-mini-people span{font-size:10px;border-radius:999px;padding:6px 8px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.25);color:#c4b5fd}.vs-mini-chat{margin-top:13px;padding:11px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:5px;font-size:9px;color:#9698b4}.vs-mini-chat b{color:#67e8f9;text-transform:uppercase;letter-spacing:.1em;font-size:8px}.vs-floating-chip{position:absolute;z-index:4;padding:10px 13px;border-radius:999px;background:rgba(11,13,32,.78);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);box-shadow:0 12px 35px rgba(0,0,0,.35);font-size:11px;font-weight:800;white-space:nowrap}.vs-chip-live{right:6px;top:82px;color:#b7f7ee;animation:vsEcoFloat 6s ease-in-out infinite}.vs-chip-react{left:6px;bottom:78px;color:#f0d8ff;animation:vsEcoFloat 6s ease-in-out infinite reverse}
.vs-eco-section{padding:82px 4px 0}.vs-eco-section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.vs-eco-section h2{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.04em;margin:9px 0 0;color:#fff}.vs-eco-section-head p{max-width:380px;color:#8e90aa;line-height:1.65;margin:0}
.vs-integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vs-integration-card{position:relative;overflow:hidden;padding:28px;border-radius:25px;border:1px solid var(--eco-line);background:linear-gradient(145deg,rgba(18,20,48,.9),rgba(9,10,25,.8));box-shadow:0 18px 50px rgba(0,0,0,.18);transition:transform .25s,border-color .25s,box-shadow .25s}.vs-integration-card:hover{transform:translateY(-5px);border-color:rgba(125,211,252,.3);box-shadow:0 25px 60px rgba(0,0,0,.3)}.vs-integration-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-90px;top:-90px;filter:blur(10px);opacity:.4}.vs-card-telegram:after{background:#22d3ee}.vs-card-discord:after{background:#8b5cf6}.vs-card-topline{display:flex;align-items:center;justify-content:space-between}.vs-platform-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:24px;color:white;background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(59,130,246,.18));border:1px solid rgba(103,232,249,.25);box-shadow:inset 0 1px rgba(255,255,255,.12)}.vs-card-discord .vs-platform-icon{background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(99,102,241,.15));border-color:rgba(167,139,250,.28)}.vs-card-status{font-size:9px;letter-spacing:.12em;color:#7dd3fc;padding:6px 9px;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.14)}.vs-integration-card h3{font-size:25px;margin:20px 0 8px}.vs-integration-card p{color:#989ab5;line-height:1.6;max-width:470px;margin:0}.vs-command-pill{display:flex;gap:10px;align-items:center;margin:20px 0;padding:10px 12px;border-radius:12px;background:rgba(3,6,20,.55);border:1px solid rgba(255,255,255,.08);font-size:11px;color:#8588a6}.vs-command-pill span:first-child{color:#d7c7ff;font-weight:900;font-family:ui-monospace,monospace}.vs-platform-btn{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-weight:800;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);transition:.2s}.vs-platform-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(125,211,252,.28)}
.vs-extension-shell{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:34px;border-radius:28px;border:1px solid rgba(236,72,153,.14);background:radial-gradient(600px 280px at 0% 50%,rgba(236,72,153,.1),transparent 65%),linear-gradient(145deg,rgba(20,15,42,.9),rgba(10,11,26,.8))}.vs-extension-copy p{color:#9799b4;line-height:1.7;max-width:550px}.vs-supported-sites{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.vs-supported-sites span{font-size:10px;color:#bfc1d7;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.vs-extension-cards{display:grid;gap:12px}.vs-extension-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.vs-extension-logo{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.07)}.chrome-logo{color:#67e8f9}.firefox-logo{background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(236,72,153,.14))}.vs-extension-info h3{margin:0 0 3px;font-size:14px}.vs-extension-info p{margin:0;color:#83869f;font-size:11px;line-height:1.4}.vs-extension-card>a{color:#c4b5fd;text-decoration:none;font-size:11px;font-weight:800;padding:8px 10px;border-radius:10px;background:rgba(139,92,246,.1)}
.vs-how-section{text-align:center}.vs-how-section h2{margin-left:auto;margin-right:auto}.vs-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px;text-align:left}.vs-step-card{position:relative;padding:24px;border:1px solid rgba(255,255,255,.08);background:rgba(14,15,34,.7);border-radius:22px;overflow:hidden}.vs-step-card>span{position:absolute;right:18px;top:17px;color:#555878;font-size:11px;font-weight:900}.vs-step-icon{font-size:26px;margin-bottom:18px}.vs-step-card h3{margin:0 0 7px;font-size:17px}.vs-step-card p{margin:0;color:#8588a4;font-size:12px;line-height:1.6}.vs-eco-final-cta{position:relative;text-align:center;overflow:hidden;margin:80px 0 0;padding:70px 25px;border-radius:30px;border:1px solid rgba(139,92,246,.22);background:linear-gradient(135deg,rgba(51,29,103,.55),rgba(7,31,52,.58));box-shadow:inset 0 1px rgba(255,255,255,.08)}.vs-final-glow{position:absolute;width:500px;height:220px;left:50%;top:-100px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(103,232,249,.16),rgba(139,92,246,.1),transparent 68%);filter:blur(10px)}.vs-eco-final-cta h2{position:relative;font-size:clamp(32px,5vw,55px);letter-spacing:-.05em;margin:12px 0}.vs-eco-final-cta p{position:relative;color:#999bb4;margin:0 0 25px}.vs-final-button{position:relative}
@keyframes vsEcoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
@keyframes vsEcoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes vsEcoShine{0%{transform:translateX(-70%) rotate(-22deg)}45%,100%{transform:translateX(70%) rotate(-22deg)}}
@media(max-width:850px){.vs-ecosystem-home{padding:16px 13px 80px}.vs-eco-hero{min-height:auto;grid-template-columns:1fr;padding:42px 24px 35px;border-radius:27px}.vs-eco-hero h1{font-size:clamp(42px,12vw,64px)}.vs-eco-lead{font-size:16px}.vs-eco-hero-visual{min-height:380px;margin-top:12px}.vs-phone-stack{transform:scale(.88) rotate(4deg)}.vs-eco-section{padding-top:58px}.vs-eco-section-head{display:block}.vs-eco-section-head p{margin-top:14px}.vs-integration-grid,.vs-extension-shell{grid-template-columns:1fr}.vs-step-grid{grid-template-columns:1fr}.vs-extension-shell{padding:24px}.vs-eco-final-cta{margin-top:58px;padding:55px 18px}}
@media(max-width:520px){body.index-page #vsAppRoot{padding-bottom:74px}.vs-eco-hero{padding:32px 18px 24px}.vs-live-pill{font-size:9px}.vs-eco-hero h1{font-size:42px;margin-top:17px}.vs-eco-lead{font-size:14px;line-height:1.55}.vs-eco-primary,.vs-eco-secondary{width:100%;min-height:50px}.vs-eco-proof-row{gap:9px 14px;font-size:10px}.vs-eco-hero-visual{min-height:315px}.vs-phone-stack{transform:scale(.72) rotate(3deg);margin-top:-30px}.vs-floating-chip{font-size:9px;padding:8px 10px}.vs-chip-live{right:-2px;top:44px}.vs-chip-react{left:-2px;bottom:48px}.vs-eco-section{padding-top:48px}.vs-eco-section h2{font-size:30px}.vs-integration-card{padding:21px;border-radius:21px}.vs-integration-card h3{font-size:22px}.vs-command-pill{font-size:9px}.vs-command-pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-extension-card{grid-template-columns:auto 1fr}.vs-extension-card>a{grid-column:2;justify-self:start}.vs-extension-shell{gap:25px}.vs-eco-final-cta h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){body.index-page *{animation:none!important;transition:none!important}}


/* ================================================================
   VIZSURGE WATCH v3 — ELIMINATE DISCOVERY LIST GAP
   The list container is a separate JS-gated wrapper. Pull it directly
   beneath the Explore toolbar without changing any JS or room markup.
   ================================================================ */
#vsPageContent2 {
  margin-top: -72px !important;
  padding-top: 0 !important;
  position: relative;
  z-index: 2;
}
#vsPageContent2 > #rooms-all-section,
#vsPageContent2 > #rooms-mine-section { margin-top: 0 !important; }
#rooms-all-list, #rooms-mine-list { padding-top: 0 !important; margin-top: 0 !important; }
#rooms-all-list .vs-section-hdr, #rooms-mine-list .vs-section-hdr {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
@media (max-width:700px){
  #vsPageContent2 { margin-top: -52px !important; }
}

/* ============================================================
   VIZSURGE BOTTOM NAV -- full-width opaque bar (v2)
   Shared by index.html, watch.html, public.html, instant.html and
   crooms-chat.html (plain .vs-bottom-nav selector, not page-scoped).
   Was a floating rounded pill inset from the screen edges: card
   content scrolling underneath it was visible both through its
   background (94% opacity) and in the gaps around its rounded shape
   (it never reached the edges or the true bottom of the screen).
   Flush + fully opaque removes both: there is no longer any gap for
   scrolled content to show through, at any scroll position.
   Visual-only change: preserves existing nav IDs, labels,
   destinations and button handlers.
   ============================================================ */
.vs-bottom-nav {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-height: 64px;
  transform: none !important;
  padding: 6px 10px !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: none !important;
  border-top: 1px solid rgba(151, 142, 255, .16) !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #100d23, #070d1d) !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}

.vs-bottom-nav::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,.55), rgba(139,92,246,.8), rgba(236,72,153,.5), transparent);
  filter: blur(.2px);
  pointer-events: none;
}

/* Was a glow floating above the rounded pill -- doesn't suit a flush
   edge-to-edge bar, and the element is aria-hidden/purely decorative,
   so hiding it here is enough (no HTML changes needed). */
.vs-bnav-glow { display: none; }

.vs-bnav-tab {
  z-index: 1;
  min-width: 0;
  flex: 1 1 0;
  border-radius: 17px;
  padding: 7px 8px 6px !important;
  gap: 4px !important;
  color: rgba(226,229,255,.48) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}

.vs-bnav-tab::before { display:none !important; }

.vs-bnav-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid !important;
  place-items: center;
  color: currentColor !important;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  transform: none !important;
  transition: all .22s ease;
}

.vs-bnav-icon svg { width: 19px; height: 19px; }

.vs-bnav-label {
  max-width: 100% !important;
  font-size: 9px !important;
  line-height: 1.1;
  letter-spacing: .045em !important;
  font-weight: 750 !important;
  opacity: .86;
}

.vs-bnav-tab.active {
  color: #f7f5ff !important;
  background: linear-gradient(135deg, rgba(103,232,249,.09), rgba(139,92,246,.17), rgba(236,72,153,.08)) !important;
  border-color: rgba(139,92,246,.22) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 20px rgba(77,60,180,.13);
}

.vs-bnav-tab.active .vs-bnav-icon {
  color: #fff !important;
  border-color: rgba(139,92,246,.34);
  background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(99,102,241,.38), rgba(168,85,247,.30));
  box-shadow: 0 0 18px rgba(99,102,241,.23), inset 0 1px rgba(255,255,255,.15);
  transform: translateY(-1px) scale(1.04) !important;
}

.vs-bnav-tab.active .vs-bnav-label {
  color: #ddd8ff;
  opacity: 1;
}

.vs-bnav-tab:not(.active):hover {
  color: rgba(244,245,255,.88) !important;
  background: rgba(255,255,255,.035) !important;
  transform: translateY(-1px);
}
.vs-bnav-tab:not(.active):hover .vs-bnav-icon {
  color: #b8c7ff !important;
  border-color: rgba(125,211,252,.15);
  background: rgba(125,211,252,.07);
}
.vs-bnav-tab:active { transform: scale(.97); }

/* Unified active treatment overrides the older page-specific accent colors. */
#vsTabHome.active,
#vsTabRooms.active,
#vsTabParties.active,
#vsTabInstant.active,
#vsTabNews.active { color: #f7f5ff !important; }

body.index-page,
body.crooms-page,
body.chat-page {
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 520px) {
  /* This block used to also set bottom/width/border-radius/padding here,
     reintroducing the exact floating-inset-pill nav the "full-width
     opaque bar" fix above was written to eliminate -- reported directly
     from a real device screenshot, and since this media query is what
     actually fires on every phone (the media query the fix above didn't
     touch), it meant that fix never took visible effect on mobile at
     all, despite being correctly applied everywhere else. min-height is
     kept (a legitimate size adjustment for narrow screens); the four
     properties that recreated the pill are removed so the flush,
     edge-to-edge, opaque bar (and its safe-area-aware padding-bottom)
     from the rule above is what actually renders. */
  .vs-bottom-nav {
    min-height: 66px;
  }
  .vs-bnav-tab { padding: 6px 3px 5px !important; border-radius: 16px; }
  .vs-bnav-icon { width: 32px; height: 32px; border-radius: 11px; }
  .vs-bnav-icon svg { width: 18px; height: 18px; }
  .vs-bnav-label { font-size: 8.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-bottom-nav *, .vs-bottom-nav { transition: none !important; animation: none !important; }
}


/* Instant page compatibility */
body.instant-page .vs-bottom-nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* =========================================================
   VIZSURGE BOTS & EXTENSIONS — PLATFORM-FIRST HERO
   ========================================================= */
.vs-bots-intro{position:relative;overflow:hidden;min-height:500px;padding:64px 56px;border:1px solid rgba(129,140,248,.20);border-radius:32px;background:radial-gradient(600px 360px at 92% 45%,rgba(34,211,238,.13),transparent 62%),radial-gradient(520px 380px at 10% 90%,rgba(139,92,246,.16),transparent 65%),linear-gradient(135deg,#10152f 0%,#0a0c1d 52%,#081b2b 100%);box-shadow:0 28px 90px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.08);display:grid;grid-template-columns:1.02fr .98fr;gap:35px;align-items:center}
.vs-bots-intro:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.035) 45%,transparent 60%);transform:translateX(-100%);animation:vsBotsSheen 8s ease-in-out infinite;pointer-events:none}
@keyframes vsBotsSheen{0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
.vs-bots-intro-copy{position:relative;z-index:2;max-width:690px}
.vs-bots-intro h1{font-size:clamp(42px,5vw,70px);line-height:.98;letter-spacing:-.055em;margin:18px 0 20px;color:#fff}
.vs-bots-intro h1 em{font-style:normal;background:linear-gradient(90deg,#c4b5fd,#67e8f9,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-bots-intro-copy>p{max-width:610px;margin:0;color:#9fa4c1;font-size:16px;line-height:1.7}
.vs-bots-intro-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.vs-platform-orbit{position:relative;min-height:390px;display:grid;place-items:center}
.vs-platform-orbit-glow{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.19),rgba(34,211,238,.09) 42%,transparent 70%);filter:blur(4px);animation:vsOrbitPulse 5s ease-in-out infinite}
@keyframes vsOrbitPulse{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.07);opacity:1}}
.vs-orbit-center{position:relative;z-index:4;width:126px;height:126px;border-radius:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,rgba(40,44,91,.95),rgba(10,21,42,.94));border:1px solid rgba(167,139,250,.35);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 45px rgba(99,102,241,.18),inset 0 1px rgba(255,255,255,.14);transform:rotate(-3deg)}
.vs-orbit-center span{font-size:29px;font-weight:950;letter-spacing:-.08em;background:linear-gradient(90deg,#a78bfa,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}.vs-orbit-center small{font-size:8px;line-height:1.2;letter-spacing:.18em;text-align:center;color:#8990b2}
.vs-platform-node{position:absolute;z-index:3;min-width:130px;padding:12px 14px;border-radius:17px;display:flex;align-items:center;gap:10px;background:rgba(8,11,28,.76);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px);box-shadow:0 14px 35px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.07);transition:transform .25s,border-color .25s,box-shadow .25s}.vs-platform-node:hover{transform:translateY(-5px) scale(1.03);border-color:rgba(125,211,252,.35);box-shadow:0 20px 45px rgba(0,0,0,.35),0 0 25px rgba(99,102,241,.12)}
.vs-platform-node span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;font-weight:950;color:white;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10)}.vs-platform-node b{font-size:11px;color:#e8e9f5;white-space:nowrap}
.vs-platform-youtube{left:3%;top:17%}.vs-platform-youtube span{background:linear-gradient(135deg,#ff4d6d,#ef4444)}
.vs-platform-netflix{right:0;top:8%}.vs-platform-netflix span{background:linear-gradient(135deg,#ef4444,#991b1b)}
.vs-platform-prime{right:1%;bottom:12%}.vs-platform-prime span{background:linear-gradient(135deg,#38bdf8,#2563eb)}
.vs-platform-hotstar{left:2%;bottom:8%}.vs-platform-hotstar span{background:linear-gradient(135deg,#7c3aed,#2563eb)}
.vs-integration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vs-connect-section .vs-eco-section-head{margin-bottom:24px}
.vs-connect-section .vs-eco-section-head h2{font-size:clamp(34px,4vw,50px)}
.vs-supported-sites{gap:9px}.vs-supported-sites span{font-weight:750;color:#d6d8e8;background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(34,211,238,.06));border-color:rgba(125,211,252,.13)}
@media(max-width:850px){.vs-bots-intro{grid-template-columns:1fr;padding:38px 24px 24px;min-height:auto;border-radius:27px}.vs-bots-intro h1{font-size:clamp(40px,11vw,58px)}.vs-bots-intro-copy>p{font-size:14px}.vs-platform-orbit{min-height:350px;margin-top:5px}.vs-platform-node{min-width:118px}.vs-platform-youtube{left:0}.vs-platform-netflix{right:0}.vs-platform-prime{right:0}.vs-platform-hotstar{left:0}}
@media(max-width:520px){.vs-bots-intro{padding:30px 18px 16px}.vs-bots-intro h1{font-size:40px;margin-top:15px}.vs-bots-intro-actions{display:grid;grid-template-columns:1fr}.vs-bots-intro-actions>*{width:100%;justify-content:center}.vs-platform-orbit{min-height:310px;transform:scale(.88);margin:-15px -20px -20px}.vs-orbit-center{width:108px;height:108px;border-radius:32px}.vs-platform-node{min-width:105px;padding:9px 10px;gap:7px}.vs-platform-node span{width:29px;height:29px;border-radius:9px;font-size:13px}.vs-platform-node b{font-size:9px}.vs-platform-youtube{top:13%}.vs-platform-netflix{top:5%}.vs-platform-prime{bottom:8%}.vs-platform-hotstar{bottom:4%}.vs-integration-grid{grid-template-columns:1fr}}


/* ============================================================
   Room Playlist overlay (shared) -- injected by croom.js's
   openRoomPlaylist() on any page that lists rooms (Watch/Signature,
   Public, crooms-chat.html). Same class names/markup as instant.html's
   own playlist overlay, which stays a separate, page-scoped copy since
   instant.html doesn't load this stylesheet's page or this file.
   ============================================================ */
.instant-playlist-overlay{display:none;position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);align-items:flex-end;justify-content:center}
.instant-playlist-overlay.open{display:flex}
.instant-playlist-backdrop{position:absolute;inset:0}
.instant-playlist-sheet{position:relative;width:min(620px,100%);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#0e0b14;border:1px solid rgba(255,255,255,.10);border-radius:20px 20px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5);padding:16px}
.instant-playlist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.instant-playlist-title{font-size:18px;font-weight:800;color:#fff}
.instant-playlist-subtitle{font-size:11px;color:#8e8799;margin-top:3px}
.instant-playlist-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#fff;font-size:22px;cursor:pointer}
.instant-playlist-status{font-size:12px;color:#e7b76c;min-height:18px;padding:8px 2px 0}
.instant-playlist-items{overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:7px;min-height:80px}
.instant-playlist-item{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035)}
.instant-playlist-item.current{border-color:rgba(124,58,237,.55);background:rgba(124,58,237,.10)}
.instant-playlist-num{font-size:12px;font-weight:800;color:#9b91ab;text-align:center}
.instant-playlist-item.current .instant-playlist-num{color:#c4b5fd}
.instant-playlist-info{min-width:0}
.instant-playlist-item-title{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.instant-playlist-item-url{font-size:10px;color:#777080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.instant-playlist-badge{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#c4b5fd;margin-left:5px}
.instant-playlist-actions{display:flex;gap:4px}
.instant-playlist-actions button{width:28px;height:28px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.045);color:#cfc8da;cursor:pointer}
.instant-playlist-actions button:hover{background:rgba(255,255,255,.09)}
.instant-playlist-actions .remove{color:#ef7777}
.instant-playlist-add{display:flex;gap:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}
.instant-playlist-add input{flex:1;min-width:0;height:40px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.045);color:#fff;padding:0 12px;outline:none}
.instant-playlist-add button,.instant-playlist-footer button{height:40px;border:0;border-radius:10px;padding:0 15px;background:#7c3aed;color:#fff;font-weight:700;cursor:pointer}
.instant-playlist-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10.5px;color:#777080;padding-top:4px}
.instant-playlist-footer button{height:34px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.instant-playlist-loading{padding:25px;text-align:center;color:#777080;font-size:12px}
@media(max-width:600px){.instant-playlist-sheet{max-height:92vh;border-radius:18px 18px 0 0}.instant-playlist-add{flex-direction:column}.instant-playlist-add button{width:100%}}

/* ============================================================
   Party card v2 -- thumbnail + source pills + action row. Shared by
   Watch/Signature, Public and crooms-chat.html's own room lists
   (renderRoomItem() in croom.js). instant.html duplicates this same
   look with its own markup/CSS (it doesn't load this file) -- keep
   the two in sync by hand if either changes.
   Reuses existing .vs-badge / .vs-badge-pub / .vs-badge-priv,
   .vs-card-owner / .vs-card-sep / .vs-card-participants,
   .vs-unread-dot, .croom-overflow-menu / .overflow-item /
   .croom-more-wrap, and .vs-card-row1 as they already are.
   ============================================================ */
.vs-card-top { display: flex; gap: 12px; }
.vs-card-thumb {
  flex: 0 0 88px; width: 88px; height: 62px; border-radius: 11px;
  position: relative; overflow: hidden; background: #0c0b1c;
  border: 1px solid rgba(255,255,255,.06);
}
.vs-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-card-thumb.is-generic {
  background: linear-gradient(160deg, rgba(139,92,246,.30), rgba(41,194,255,.14) 55%, rgba(10,10,25,.9) 100%);
}
.vs-card-thumb-icon, .vs-card-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.vs-card-thumb-icon svg { width: 22px; height: 22px; opacity: .92; }
.vs-card-thumb-play svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.vs-card-thumb-tag {
  position: absolute; top: 5px; right: 5px; font-size: 8.5px; font-weight: 800;
  background: rgba(0,0,0,.6); color: #fff; padding: 2px 6px; border-radius: 999px; letter-spacing: .03em;
}

.vs-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vs-card-owner-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 1px; }

.vs-card-pills { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.vs-card-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .03em; padding: 3px 8px 3px 6px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #cfc9e6;
}
.vs-card-pill svg { width: 11px; height: 11px; opacity: .85; flex: 0 0 auto; }
.vs-card-pill-auto { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); color: #86efac; }
.vs-card-pill-playlist { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.24); color: #fcd34d; }
.vs-card-pill-code {
  background: rgba(233,201,140,.14); color: #e8c887; border: 1px solid rgba(233,201,140,.3);
  cursor: pointer; letter-spacing: 1px; font-family: inherit;
}

.vs-card-actions { display: flex; gap: 8px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06); align-items: center; justify-content: space-between; }
/* Primary button is sized to its own content now, not flex:1 -- it no
   longer has to dominate the row width for Share/Share-IG/Copy/"..." to
   get a comfortable touch target; all five sit at the same 40px height. */
.vs-card-primary-btn {
  flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 40px; padding: 0 14px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg,#7c3aed,#4f46e5 55%,#0891b2); white-space: nowrap;
  border: none; cursor: pointer; font-family: inherit;
}
.vs-card-primary-btn svg { width: 12px; height: 12px; flex: 0 0 auto; }
.vs-card-primary-btn:hover { filter: brightness(1.08); }
.vs-card-icon-group { display: flex; gap: 8px; flex: 0 0 auto; }
.vs-card-icon-btn {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center;
  color: #cfc9e6; cursor: pointer; font-size: 16px; padding: 0;
}
.vs-card-icon-btn svg { width: 16px; height: 16px; }
.vs-card-icon-btn:hover { background: rgba(255,255,255,.09); color: #fff; }

@media (max-width: 420px) {
  .vs-card-thumb { flex-basis: 76px; width: 76px; height: 54px; }
  .vs-card-primary-btn { padding: 0 11px; }
}
@media (max-width: 380px) {
  .vs-card-icon-group { gap: 6px; }
  .vs-card-icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
}