/* 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;
  border: 0 !important;
  background: black;
  display: flex !important;
  flex-direction: column !important;
}

.wespace-css-fullscreen .wespace-video-container {
  aspect-ratio: auto !important;
  flex: 1 1 0%;
  min-height: 0;
}

.wespace-css-fullscreen .wespace-info-bar {
  padding: 0.625rem 1.5rem;
  background: rgba(0, 0, 0, 0.7) !important;
}

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

.wespace-css-fullscreen .wespace-fullscreen-controls {
  display: flex !important;
}

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

/* Active-state glow for media buttons (mic / cam / screen / hand "on"). */
/* Toggled from fullscreen_controls_controller.js alongside bg-emerald-500/80. */
.wespace-fs-active {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

/* Duplicate status badges inside [data-video-mode] for fullscreen visibility.
 * Hidden in normal view (the outer [data-badge-container] is used instead).
 * Shown in fullscreen since the outer container sits outside the fullscreen element. */
.wespace-fs-badges {
  display: none;
}

:fullscreen .wespace-fs-badges,
:-webkit-full-screen .wespace-fs-badges,
.wespace-css-fullscreen .wespace-fs-badges {
  display: flex;
}

/* Native Fullscreen API (desktop) */
[data-video-mode]:fullscreen,
[data-video-mode]:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  border: 0 !important;
}

:fullscreen .wespace-video-container,
:-webkit-full-screen .wespace-video-container {
  aspect-ratio: auto !important;
  flex: 1 1 0%;
  min-height: 0;
}

/* Info bar — solid dark translucent background in fullscreen.
 * backdrop-filter intentionally NOT used: it creates a containing block for
 * fixed-positioned descendants, which broke the emoji picker's viewport-relative math. */
:fullscreen .wespace-info-bar,
:-webkit-full-screen .wespace-info-bar {
  padding: 0.625rem 1.5rem;
  background: rgba(0, 0, 0, 0.7) !important;
}

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

/* Show fullscreen-only controls for the local user (always available in fullscreen) */
:fullscreen .wespace-fullscreen-controls,
:-webkit-full-screen .wespace-fullscreen-controls {
  display: flex !important;
}

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

/* Mobile fullscreen — comfortable tap targets on touch devices */
/* Pairs with 1.125rem icon (18px) above: 18 + 12*2 = 42px total — close to Apple HIG 44 */
.wespace-css-fullscreen .wespace-fs-btn,
:fullscreen .wespace-fs-btn,
:-webkit-full-screen .wespace-fs-btn {
  padding: 0.75rem;
}

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

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

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

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

/* Touch tablets at 768px+ — restore larger button padding so tap targets meet 44px. */
/* Mouse-precision devices (desktops, laptops with trackpad) keep the tighter 0.5rem above. */
@media (min-width: 768px) and (pointer: coarse) {
  :fullscreen .wespace-fs-btn,
  :-webkit-full-screen .wespace-fs-btn {
    padding: 0.75rem;
  }
}

/* ── 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;
}