/* ───────────────────────────────────────────────
   XR Transition Animations
   Driven by body classes toggled from xrStateMachine events in viewSwitcher.js

   Phase 1 — PREPARE:     body.xr-undocking         (0–100 ms)
   Phase 2 — DISSOLVE:    body.xr-ambient-mode       (100–350 ms)
   Phase 3 — MATERIALIZE: body.xr-ambient-mode stays  (350–600 ms)

   Spec section 14: workspace appear 500–700ms, total cycle ~600ms.
   Docking reverses: remove xr-ambient-mode, then xr-undocking
─────────────────────────────────────────────── */

/* Phase 1: PREPARE — will-change hints for GPU compositing (desktop only) */
body.xr-undocking .workspace-panel {
  will-change: opacity;
}

/* Phase 2: DISSOLVE — desktop workspace fades behind ambient overlay.
   The full layout stays intact — no panels are hidden or removed.
   The ambient gradient ::after overlay covers everything. */

/* Phase 3: Ambient overlay — dark frosted glass that blocks the Tool UI (desktop).
   Barely transparent so the UI is hidden, with a heavy blur for depth. */
body.xr-ambient-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: rgba(10, 10, 14, 0.88);
  backdrop-filter: blur(32px) saturate(0.6);
  -webkit-backdrop-filter: blur(32px) saturate(0.6);
  opacity: 1;
  transition: opacity 300ms ease-out;
}

/* XR pairing modal hides when spatial mode activates */
body.xr-ambient-mode #xr-pair-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s 300ms;
  pointer-events: none;
}

/* ── Reverse animation for docking ────────────────────────────── */
body.xr-undocking:not(.xr-ambient-mode) #xr-pair-modal {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease-in, visibility 0s;
  pointer-events: auto;
}

body.xr-undocking:not(.xr-ambient-mode)::after {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

/* ── Prefers reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.xr-ambient-mode #xr-pair-modal,
  body.xr-ambient-mode::after,
  body.xr-undocking:not(.xr-ambient-mode) #xr-pair-modal,
  body.xr-undocking:not(.xr-ambient-mode)::after {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop Ambient Overlay (shown during SPATIAL state)
   Floating orb + "Spatial workspace active" + Dock button
═══════════════════════════════════════════════════════════════ */
.xr-ambient-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out 100ms;
}
.xr-ambient-overlay.hidden { display: none; }
.xr-ambient-overlay.active { opacity: 1; visibility: visible; }

.xr-ambient-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(90,139,255,0.4), rgba(90,139,255,0.08) 70%);
  box-shadow: 0 0 60px rgba(90,139,255,0.3), 0 0 120px rgba(90,139,255,0.1);
  animation: xr-orb-breathe 4s ease-in-out infinite;
}

/* Image variant of the orb (replaces CSS gradient with mixx-ai.png) */
.xr-ambient-orb--img {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: none;
}

@keyframes xr-orb-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.xr-ambient-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
}

.xr-ambient-hint {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
}

.xr-ambient-dock-btn {
  pointer-events: auto;
  padding: 12px 32px;
  border-radius: 12px;
  border: 1.5px solid rgba(118,137,255,0.3);
  background: rgba(24,24,31,0.7);
  color: #e7e7ea;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s, background 0.2s;
}
.xr-ambient-dock-btn:hover {
  border-color: rgba(118,137,255,0.6);
  background: rgba(34,34,45,0.8);
}

/* ── XR connected indicator dot on the XR button ─────────────── */
.xr-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  position: absolute;
  top: 4px;
  right: 4px;
  box-shadow: 0 0 6px rgba(52,211,153,0.6);
}
.xr-indicator-dot.hidden { display: none; }

/* ── Feature-flag-gated XR button hidden state ────────────────── */
.view-switcher-row button.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   AVP Spatial Visual Treatment
   Applied via body.xr-webspatial when running inside the
   WebSpatial app shell. Makes the Tool feel like a spatial
   console rather than a flat webpage — transparent root,
   glass panel surfaces, preserved layout.
═══════════════════════════════════════════════════════════════ */
body.xr-webspatial {
  background: transparent !important;
}

body.xr-webspatial .main-layout {
  background: rgba(0, 0, 0, 0.05);
}

body.xr-webspatial .navbar {
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.xr-webspatial .sidebar {
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.xr-webspatial .workspace-panel {
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.xr-webspatial #mixx-ai-panel {
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Expand/Collapse Buttons
   Injected into .view-switcher-row during SPATIAL state.
═══════════════════════════════════════════════════════════════ */

.xr-spatial-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(118, 137, 255, 0.25);
  background: rgba(90, 139, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.xr-spatial-btn:hover:not(:disabled) {
  border-color: rgba(118, 137, 255, 0.5);
  background: rgba(90, 139, 255, 0.2);
}
.xr-spatial-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.xr-spatial-btn[data-expanded="true"] {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}
.xr-spatial-btn[data-expanded="true"]:hover {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Panel Placeholder
   Overlaid on in-Tool panel when content is expanded to space.
   Panel content is visibility:hidden + opacity:0 underneath.
═══════════════════════════════════════════════════════════════ */

.xr-spatial-placeholder {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 20, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: inherit;
  animation: xr-placeholder-fadein 400ms ease-out both;
}

@keyframes xr-placeholder-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.xr-spatial-placeholder__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.xr-spatial-placeholder__icon {
  color: rgba(90, 139, 255, 0.6);
}

.xr-spatial-placeholder__text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.xr-spatial-placeholder__collapse-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid rgba(118, 137, 255, 0.25);
  background: rgba(24, 24, 31, 0.6);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.xr-spatial-placeholder__collapse-btn:hover {
  border-color: rgba(118, 137, 255, 0.5);
  background: rgba(34, 34, 45, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   AVP Headset Waiting Overlay
   Shown after pairing, before spatial activation. Hides the full
   tool UI and presents a minimal "Connected / Bring to Space" screen.
═══════════════════════════════════════════════════════════════ */

/* Hide the main app UI while the headset is waiting */
body.xr-headset-waiting .navbar,
body.xr-headset-waiting .sidebar,
body.xr-headset-waiting .workspace,
body.xr-headset-waiting .view-switcher-row,
body.xr-headset-waiting .mode-selector,
body.xr-headset-waiting .panel-slot,
body.xr-headset-waiting #controlPanel,
body.xr-headset-waiting #mixx-ai-panel,
body.xr-headset-waiting .timeline-slider-container {
  display: none !important;
}

.xr-headset-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(20, 20, 30, 0.95) 0%,
    rgba(10, 10, 15, 0.98) 100%
  );
  animation: xr-headset-fadein 600ms ease-out both;
}

@keyframes xr-headset-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.xr-headset-overlay--dismissing {
  animation: xr-headset-fadeout 400ms ease-in both;
}

@keyframes xr-headset-fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}

.xr-headset-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 48px 56px;
  border-radius: 24px;
  border: 1px solid rgba(118, 137, 255, 0.15);
  background: rgba(28, 28, 38, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
  max-width: 400px;
}

.xr-headset-overlay__icon {
  color: rgba(118, 137, 255, 0.7);
  animation: xr-icon-pulse 3s ease-in-out infinite;
}

.xr-headset-overlay__logo {
  border-radius: 14px;
  animation: xr-icon-pulse 3s ease-in-out infinite;
}

.xr-headset-overlay__subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  margin: -12px 0 0;
  display: none;
}

@keyframes xr-icon-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.xr-headset-overlay__status {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  transition: color 0.3s;
}

.xr-headset-overlay__status[data-state="connected"] {
  color: #34d399;
}

.xr-headset-overlay__undock-btn {
  padding: 14px 40px;
  border-radius: 14px;
  border: 1.5px solid rgba(118, 137, 255, 0.3);
  background: rgba(90, 139, 255, 0.15);
  color: #e7e7ea;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s, background 0.2s, opacity 0.2s, transform 0.15s;
}

.xr-headset-overlay__undock-btn:hover:not(:disabled) {
  border-color: rgba(118, 137, 255, 0.6);
  background: rgba(90, 139, 255, 0.25);
  transform: scale(1.02);
}

.xr-headset-overlay__undock-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.xr-headset-overlay__undock-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.xr-headset-overlay__hint {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Control Buttons
   "Expand Map to Space"
   Shown during SPATIAL state on AVP devices.
═══════════════════════════════════════════════════════════════ */
.xr-spatial-controls {
  display: none;
}

body.xr-undocked .xr-spatial-controls {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

.xr-spatial-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(118, 137, 255, 0.2);
  background: rgba(90, 139, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.xr-spatial-btn:hover {
  background: rgba(90, 139, 255, 0.2);
  border-color: rgba(118, 137, 255, 0.4);
}

.xr-spatial-btn:active {
  transform: scale(0.97);
}

.xr-spatial-btn[aria-pressed="true"] {
  background: rgba(90, 139, 255, 0.25);
  border-color: rgba(118, 137, 255, 0.5);
  color: rgba(255, 255, 255, 0.95);
}

.xr-spatial-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Workspace Appear Animation (spec: 500–700ms)
   Applied to body.xr-webspatial when first entering spatial mode.
═══════════════════════════════════════════════════════════════ */
body.xr-webspatial.xr-workspace-appearing .main-layout,
body.xr-webspatial.xr-workspace-appearing .navbar,
body.xr-webspatial.xr-workspace-appearing .sidebar {
  animation: xr-workspace-appear 600ms ease-out both;
}

@keyframes xr-workspace-appear {
  from {
    opacity: 0;
    transform: scale(0.96) translateZ(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Map Expansion Animation (spec: 700–900ms)
   Applied to map panel during spatial expand.
═══════════════════════════════════════════════════════════════ */
body.xr-webspatial .workspace-panel[data-spatial-expanding="true"] {
  animation: xr-map-expand 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes xr-map-expand {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0.8;
    transform: scale(0.95);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.9) translateZ(-40px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Viewer Fallback Toast
   Shown when the spatial viewer fails to load.
═══════════════════════════════════════════════════════════════ */
.xr-spatial-fallback-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 10px;
  background: rgba(28, 28, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  z-index: 10000;
  animation: xr-toast-in 400ms ease-out both;
}

.xr-spatial-fallback-toast--dismissing {
  animation: xr-toast-out 300ms ease-in both;
}

@keyframes xr-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes xr-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced Motion — Spatial Animations
   Disables all spatial animations when user prefers reduced motion.
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.xr-webspatial.xr-workspace-appearing .main-layout,
  body.xr-webspatial.xr-workspace-appearing .navbar,
  body.xr-webspatial.xr-workspace-appearing .sidebar {
    animation: none;
  }

  body.xr-webspatial .workspace-panel[data-spatial-expanding="true"] {
    animation: none;
  }

  .xr-spatial-fallback-toast {
    animation: none;
  }

  .xr-spatial-fallback-toast--dismissing {
    animation: none;
    display: none;
  }

  .xr-headset-overlay {
    animation: none;
  }

  .xr-headset-overlay--dismissing {
    animation: none;
    display: none;
  }

  .xr-headset-overlay__logo,
  .xr-headset-overlay__icon {
    animation: none;
  }

  .xr-ambient-orb {
    animation: none;
    opacity: 1;
  }

  .xr-ambient-overlay {
    transition: none;
  }
}