/* Spaces — futuristic, organized treatment for every platform (iPhone, Android,
   macOS, Windows). Scoped under #yi-live-overlay so id-specificity overrides the
   base isweet styles. Only colors / glass / glows / animation — never layout
   dimensions — so the responsive structure stays intact. */

/* ── Room shell: glass + animated nebula ── */
#yi-live-overlay .yi-live-room {
  background:
    radial-gradient(circle at 12% 8%, rgba(120, 86, 255, 0.22), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(29, 155, 240, 0.20), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(240, 36, 155, 0.16), transparent 50%),
    rgba(6, 3, 16, 0.92);
  background-size: 200% 200%, 220% 220%, 210% 210%, auto;
  border: 1px solid rgba(140, 120, 230, 0.28);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(70, 30, 180, 0.35), 0 0 60px rgba(29, 155, 240, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  animation: yspf-nebula 22s ease-in-out infinite;
}

/* ── Header / toolbar ── */
#yi-live-overlay .yi-live-room-head {
  border-bottom: 1px solid rgba(140, 120, 230, 0.22);
  background: linear-gradient(180deg, rgba(20, 12, 40, 0.55), transparent);
}

#yi-live-overlay .yi-live-toolbar button {
  transition: transform 0.16s ease, box-shadow 0.18s ease, color 0.18s ease;
}

#yi-live-overlay .yi-invite-top-btn {
  background: var(--yft-grad, linear-gradient(100deg, #1d9bf0, #8a63ff, #f0249b, #38bdf8, #1d9bf0)) !important;
  background-size: 260% auto !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(120, 86, 255, 0.45);
  animation: yspf-flow 6s linear infinite;
}

/* ── Title: glowing gradient ── */
#yi-live-overlay .yi-live-room-title {
  background: linear-gradient(100deg, #38bdf8, #8a63ff, #f0249b, #38bdf8);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(138, 99, 255, 0.45));
  animation: yspf-flow 6s linear infinite;
}

/* ── Speaker grid: keep it tidy + interactive ── */
#yi-live-overlay .yi-speaker-grid {
  gap: 18px 10px;
}

#yi-live-overlay .yi-speaker-card {
  transition: transform 0.18s ease;
}

#yi-live-overlay .yi-speaker-card:hover {
  transform: translateY(-2px);
}

/* Active speaker: animated gradient halo (futuristic pulse). */
#yi-live-overlay .yi-speaking-ring .yi-speaker-av-inner {
  box-shadow: 0 0 0 2px rgba(138, 99, 255, 0.9), 0 0 16px rgba(138, 99, 255, 0.7) !important;
  animation: yspf-ring 1.6s ease-in-out infinite;
}

/* Mic wave bars get the neon gradient. */
#yi-live-overlay .yi-mic-wave i {
  background: linear-gradient(180deg, #38bdf8, #8a63ff, #f0249b) !important;
}

/* ── Listeners count bar: glassy gradient pill ── */
#yi-live-overlay .yi-listeners-bar {
  background: linear-gradient(100deg, rgba(29, 155, 240, 0.16), rgba(138, 99, 255, 0.18), rgba(240, 36, 155, 0.12));
  border: 1px solid rgba(140, 120, 230, 0.28);
  box-shadow: 0 4px 18px rgba(80, 40, 200, 0.2);
}

/* ── Bottom dock: glass + glowing controls ── */
#yi-live-overlay .yi-live-dock {
  position: relative;
  background: linear-gradient(180deg, rgba(12, 7, 26, 0.4), rgba(6, 3, 16, 0.85)) !important;
  border-top: 0 !important;
}

#yi-live-overlay .yi-live-dock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yft-grad, linear-gradient(100deg, #1d9bf0, #8a63ff, #f0249b, #38bdf8, #1d9bf0));
  background-size: 300% auto;
  animation: yspf-flow 6s linear infinite;
  pointer-events: none;
}

#yi-live-overlay .yi-dock-btn {
  border: 1px solid rgba(140, 120, 230, 0.32) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
}

#yi-live-overlay .yi-dock-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 22px rgba(120, 86, 255, 0.45);
  background: linear-gradient(100deg, rgba(29, 155, 240, 0.2), rgba(138, 99, 255, 0.2)) !important;
}

#yi-live-overlay .yi-dock-btn.active {
  background: var(--yft-grad, linear-gradient(100deg, #1d9bf0, #8a63ff, #f0249b, #38bdf8, #1d9bf0)) !important;
  background-size: 260% auto !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(120, 86, 255, 0.5);
  animation: yspf-flow 6s linear infinite;
}

/* Primary mic button glows with energy. */
#yi-live-overlay .yi-mic-btn {
  box-shadow: 0 0 22px rgba(120, 86, 255, 0.45);
}

/* ── Light futuristic touch for the React Spaces modal, where it appears ── */
.x-space-live-modal {
  background:
    radial-gradient(circle at 15% 10%, rgba(120, 86, 255, 0.16), transparent 45%),
    radial-gradient(circle at 85% 8%, rgba(29, 155, 240, 0.14), transparent 42%),
    rgba(6, 3, 16, 0.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}

/* ── Keyframes ── */
@keyframes yspf-nebula {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  50% { background-position: 100% 100%, 0% 100%, 50% 0%, 0 0; }
}

@keyframes yspf-flow {
  0% { background-position: 0% center; }
  100% { background-position: 260% center; }
}

@keyframes yspf-ring {
  0%, 100% { box-shadow: 0 0 0 2px rgba(138, 99, 255, 0.85), 0 0 12px rgba(138, 99, 255, 0.55); }
  50% { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.95), 0 0 22px rgba(56, 189, 248, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  #yi-live-overlay .yi-live-room,
  #yi-live-overlay .yi-live-room-title,
  #yi-live-overlay .yi-invite-top-btn,
  #yi-live-overlay .yi-speaking-ring .yi-speaker-av-inner,
  #yi-live-overlay .yi-live-dock::before,
  #yi-live-overlay .yi-dock-btn.active {
    animation: none !important;
  }
}