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

/* ── Screen-share PiP — draggable, snap-to-corners ──────────────────────────
 * Corner position is set via class (top/left/right/bottom). During drag the
 * controller uses `transform: translate()` to move the PiP; on release it
 * swaps the corner class and animates transform back to 0, producing a smooth
 * slide into the new corner. The `.pip-dragging` class turns the transform
 * transition off while the pointer is down. */
.wespace-pip {
  transition: transform 200ms ease-out;
}

.wespace-pip.pip-corner-tl { top: 0.75rem;    left: 0.75rem;  bottom: auto; right: auto; }
.wespace-pip.pip-corner-tr { top: 0.75rem;    right: 0.75rem; bottom: auto; left: auto; }
.wespace-pip.pip-corner-bl { bottom: 0.75rem; left: 0.75rem;  top: auto;    right: auto; }
.wespace-pip.pip-corner-br { bottom: 0.75rem; right: 0.75rem; top: auto;    left: auto; }

.wespace-pip.pip-dragging {
  transition: none;
  opacity: 0.85;
}

/* ── Thumbnail sidebar scrollbar ─────────────────────────────────────────────
 * Mobile (horizontal strip): hidden — swipe to scroll, matches native app feel.
 * Desktop (vertical column): thin translucent scrollbar that doesn't fight the
 * dark slate-950 background. */
.wespace-thumbnail-sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wespace-thumbnail-sidebar::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .wespace-thumbnail-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
  }

  .wespace-thumbnail-sidebar::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  .wespace-thumbnail-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .wespace-thumbnail-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
  }

  .wespace-thumbnail-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.5);
  }
}

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

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

/* --- Flip Camera Button ---
 * Two gates control visibility:
 *  1. CSS (this file): hide on devices with a fine primary pointer (mouse/trackpad →
 *     desktops + hybrid laptops). Pointer-coarse is the industry-standard "touch
 *     device" check — way more reliable than viewport breakpoints, since tablets
 *     and landscape phones routinely exceed sm/md widths.
 *  2. JS (media_controller.js): hide whenever camera is off. No multi-camera check —
 *     matches what Instagram / FaceTime do: always show on touch devices when camera
 *     is on; tap is a silent no-op on rare single-camera devices. */
@media (pointer: fine) {
  .wespace-flip-btn {
    display: none !important;
  }
}

/* Subtle zoom-fade entrance every time the button transitions from hidden → visible
 * (i.e., each time the camera turns on with >1 camera available). */
.wespace-flip-btn:not(.hidden) {
  animation: wespace-flip-in 220ms ease-out;
}

@keyframes wespace-flip-in {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Theater Mode ---
 * Desktop-only wide-view: hides discovery aside, widens main column,
 * reshapes tabs nav into a centered pill, wraps tab content in a card.
 * Scoped under body.wespace-theater — toggled by theater_mode_controller.js. */

/* Transitions applied to everything that animates between modes.
 * Concrete length values on both sides — avoids unit-mismatch no-animation. */
.wespace-layout-shell,
.wespace-main-col,
.wespace-discovery-aside,
[data-video-section] > div {
  transition: max-width 400ms ease-out, opacity 300ms ease-out, padding 300ms ease-out;
}

/* Discovery aside fades + collapses */
body.wespace-theater .wespace-discovery-aside {
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Widen the outer layout shell past max-w-6xl */
body.wespace-theater .wespace-layout-shell {
  max-width: min(1600px, calc(100vw - 18rem));
}

/* Lift max-w-3xl (48rem/768px) cap on main column — flex-1 at lg+ now truly fills */
body.wespace-theater .wespace-main-col {
  max-width: 1600px;
}

/* Video container widens from max-w-7xl (1280px) to 1600px */
body.wespace-theater [data-video-section] > div {
  max-width: 1600px;
}

/* Desktop room-title row uses max-w-7xl — lift in theater so it fills the widened main-col */
body.wespace-theater .wespace-room-title-row {
  max-width: 1600px;
}

/* --- Tabs section in theater --- */

/* Reset the tabs wrapper: drop bg + top-border so the card below is the visual
 * anchor (not a sheet of bg-white behind it). Block flow so nav and card stack. */
body.wespace-theater [data-controller="tabs"] {
  background-color: transparent;
  border-top: none;
  padding: 1rem 1rem 2rem;
}

/* Tabs nav → centered segmented pill (block-level, margin-auto centers) */
body.wespace-theater .wespace-tabs-nav {
  display: flex;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.25rem;
  border-bottom: none;
  background-color: rgb(241 245 249); /* slate-100 */
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgb(226 232 240 / 0.8); /* slate-200/80 */
}

html.dark body.wespace-theater .wespace-tabs-nav {
  background-color: rgb(30 41 59 / 0.6); /* slate-800/60 */
  box-shadow: inset 0 0 0 1px rgb(51 65 85 / 0.5); /* slate-700/50 */
}

/* Tab buttons → pill shape, no underline.
 * Explicit transition list — the Tailwind `transition-colors` class on the button
 * sets color/bg transitions, but the shorthand `transition:` here would override
 * it. Keep all three properties listed so the active-tab color + glow all ease. */
body.wespace-theater .wespace-tabs-nav [data-tabs-target="tab"] {
  flex: 0 0 auto;
  padding: 0.375rem 1.125rem;
  border-bottom: none;
  border-radius: 9999px;
  margin-bottom: 0;
  transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 200ms ease-out;
}

body.wespace-theater .wespace-tabs-nav [data-tabs-target="tab"][aria-selected="false"]:hover {
  background-color: rgb(255 255 255 / 0.7);
}

html.dark body.wespace-theater .wespace-tabs-nav [data-tabs-target="tab"][aria-selected="false"]:hover {
  background-color: rgb(51 65 85 / 0.5); /* slate-700/50 */
}

/* Active tab — emerald fill with subtle glow */
body.wespace-theater .wespace-tabs-nav [data-tabs-target="tab"][aria-selected="true"] {
  background-color: rgb(16 185 129); /* emerald-500 */
  color: rgb(255 255 255);
  border-color: transparent;
  box-shadow: 0 1px 3px rgb(16 185 129 / 0.3);
}

/* Vote-dot contrast: on active emerald pill, the emerald dot is invisible —
 * force white so it's still visible when Vote is the active tab. */
body.wespace-theater .wespace-tabs-nav [data-tabs-target="tab"][aria-selected="true"] [data-spaces--polls--vote-badge-target="badge"] span {
  background-color: rgb(255 255 255);
}

/* Tab content → block card, centered via margin-auto */
body.wespace-theater .tab-content {
  display: block;
  width: 100%;
  max-width: 56rem; /* Tailwind max-w-4xl */
  margin: 0 auto;
  background-color: rgb(255 255 255);
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid rgb(226 232 240); /* slate-200 */
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  overflow: hidden;
}

html.dark body.wespace-theater .tab-content {
  background-color: rgb(15 23 42 / 0.6); /* slate-900/60 */
  border-color: rgb(30 41 59); /* slate-800 */
  box-shadow: none;
}

/* Panels fill the card (don't impose their own narrow max-width) */
body.wespace-theater .wespace-tab-panel {
  max-width: none;
  margin: 0;
  width: 100%;
}