/* WeSpaces Placeholder Animations */
/* Used by video section placeholders: live, scheduled, ended */

/* ── Keyframes ── */

/* Ripple animation — expands outward and fades (live rooms) */
@keyframes wespace-ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Soft breathing glow animation */
@keyframes wespace-glow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* Logo container subtle float */
@keyframes wespace-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Scheduled room — gentle ring breathing (calmer than live ripple) */
@keyframes wespace-scheduled-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

/* ── Live room classes ── */

.wespace-ripple {
  animation: wespace-ripple 4s ease-out infinite;
}

.wespace-ripple-delayed {
  animation-delay: 2s;
}

.wespace-glow {
  animation: wespace-glow 3s ease-in-out infinite;
}

.wespace-logo-container {
  animation: wespace-float 6s ease-in-out infinite;
}

/* ── Scheduled room classes ── */

.wespace-scheduled-ring {
  animation: wespace-scheduled-pulse 4s ease-in-out infinite;
}

.wespace-scheduled-ring-outer {
  animation-delay: 1.5s;
}

.wespace-scheduled-glow {
  animation: wespace-glow 5s ease-in-out infinite;
}

/* ── Video display transitions ── */

/* Main view — smooth crossfade when switching speakers */
@keyframes wespace-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wespace-main-fade-in {
  animation: wespace-fade-in 0.3s ease-out;
}

/* Thumbnail tile — slide + fade in when entering the sidebar */
@keyframes wespace-slide-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wespace-tile-enter {
  animation: wespace-slide-in 0.25s ease-out;
}

/* Speaking indicator — smooth glow pulse (replaces Tailwind animate-pulse) */
@keyframes wespace-speaking-glow {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.4), inset 0 0 8px rgba(52, 211, 153, 0.1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.7), inset 0 0 14px rgba(52, 211, 153, 0.2);
  }
}

.wespace-speaking {
  animation: wespace-speaking-glow 1.5s ease-in-out infinite;
}

/* ── Fullscreen — fill viewport, bigger info bar, show controls ── */

/* CSS-based fullscreen (mobile fallback — works on all browsers including iOS Safari) */
.wespace-css-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: black;
}

.wespace-css-fullscreen .wespace-video-container {
  aspect-ratio: auto !important;
  height: 100vh;
  height: 100dvh;
}

.wespace-css-fullscreen .wespace-info-bar {
  padding: 0.75rem 1.5rem;
}

.wespace-css-fullscreen .wespace-info-text {
  font-size: 0.875rem;
}

.wespace-css-fullscreen .wespace-info-avatar {
  width: 2rem;
  height: 2rem;
}

.wespace-css-fullscreen .wespace-info-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.wespace-css-fullscreen [data-main-is-local="true"] .wespace-fullscreen-controls {
  display: flex !important;
}

.wespace-css-fullscreen .wespace-fs-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Native Fullscreen API (desktop) */
:fullscreen .wespace-video-container,
:-webkit-full-screen .wespace-video-container {
  aspect-ratio: auto !important;
  height: 100vh;
  height: 100dvh;
}

/* Info bar — scales up in fullscreen for visibility */
:fullscreen .wespace-info-bar,
:-webkit-full-screen .wespace-info-bar {
  padding: 0.75rem 1.5rem;
}

:fullscreen .wespace-info-text,
:-webkit-full-screen .wespace-info-text {
  font-size: 0.875rem;
}

:fullscreen .wespace-info-avatar,
:-webkit-full-screen .wespace-info-avatar {
  width: 2rem;
  height: 2rem;
}

:fullscreen .wespace-info-icon,
:-webkit-full-screen .wespace-info-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Show fullscreen-only controls — only when local user is in main view */
:fullscreen [data-main-is-local="true"] .wespace-fullscreen-controls,
:-webkit-full-screen [data-main-is-local="true"] .wespace-fullscreen-controls {
  display: flex !important;
}

/* Scale up fullscreen control buttons */
:fullscreen .wespace-fs-icon,
:-webkit-full-screen .wespace-fs-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Tablet / large screen fullscreen — even bigger */
@media (min-width: 768px) {
  :fullscreen .wespace-info-bar,
  :-webkit-full-screen .wespace-info-bar {
    padding: 1rem 2rem;
  }

  :fullscreen .wespace-info-text,
  :-webkit-full-screen .wespace-info-text {
    font-size: 1rem;
  }

  :fullscreen .wespace-info-avatar,
  :-webkit-full-screen .wespace-info-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }

  :fullscreen .wespace-info-icon,
  :-webkit-full-screen .wespace-info-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  :fullscreen .wespace-fs-btn,
  :-webkit-full-screen .wespace-fs-btn {
    padding: 0.625rem;
  }

  :fullscreen .wespace-fs-icon,
  :-webkit-full-screen .wespace-fs-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ── Mobile video container — taller ratio to compensate for thumbnail strip ── */
@media (max-width: 639px) {
  .wespace-video-container {
    aspect-ratio: 4/3 !important;
  }
}

/* ── Live controls — scrollable on mobile ── */

.wespace-live-controls {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wespace-live-controls::-webkit-scrollbar {
  display: none;
}

/* Prevent children from shrinking when controls overflow */
.wespace-live-controls > * {
  flex-shrink: 0;
}