/* ═══════════════════════════════════════════════════════════════════
   os-media-mode.css  —  GPU relief for extended media/voice playback
   2026-07-18

   ROOT CAUSE (confirmed by os_media_crash_sim.py):
     54 backdrop-filter elements + 63 CSS animations run 24/7.
     On mobile, adding video decode on top exhausts the GPU compositor
     memory budget in ~2 min → Android OOM-kill / iOS WebKit process
     termination → white screen.

   FIX 1 (always-on): Remove backdrop-filter from overlays that hide
     via opacity:0/transform instead of display:none. They stay in the
     render tree and each one holds a full GPU backing texture even
     when invisible. The closed app drawer alone accounts for ~25 of
     the 54 layers.

   FIX 2 (media-active): JS adds body.os-media-active while any window
     plays video/audio. These rules then pause all infinite animations
     and reduce blur on persistent elements so the GPU can dedicate its
     budget to video decode instead of decorative effects.
   ═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   FIX 1 — STRIP backdrop-filter FROM HIDDEN OVERLAYS (always-on)
   ══════════════════════════════════════════════════════════════════ */

/* App Drawer — closed via transform:translate(-50%,100%) + opacity:0 */
#os-drawer:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Drawer backdrop scrim — closed via opacity:0, pointer-events:none */
#os-drawer-backdrop:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Notification center — closed via opacity:0 + transform */
#os-notif-center:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Context menu — closed via opacity:0 + transform */
#os-ctx-menu:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Wallpaper picker — closed via opacity:0 + pointer-events:none */
#os-wp-picker:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Spotlight (Cmd+K) — closed when not .open */
#os-spotlight:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* App Organizer modal — closed via opacity:0 */
#os-app-organizer:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dock editor modal */
#os-dock-editor-modal:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Folder view overlay */
.desk-folder-view:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Icon picker */
#os-icon-picker:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Desktop editor */
#os-desk-editor:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tour overlay — hidden via opacity:0 */
#os-tour-overlay:not(.active) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   FIX 2 — body.os-media-active  (active while media plays)
   ══════════════════════════════════════════════════════════════════ */

/* ── Aurora background: pause cgrad animation (biggest GPU repaint) ── */
body.os-media-active #clean-bg {
  animation-play-state: paused !important;
}

/* ── Taskbar: reduce blur from 28px→4px (saves ~70% compositor cost) ── */
body.os-media-active #os-taskbar {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Drawer tab pill: reduce blur ── */
body.os-media-active #os-drawer-tab {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Clean Island: drop blur + pause pulse ── */
body.os-media-active #clean-island {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.os-media-active #clean-island .ci-dot {
  animation-play-state: paused !important;
}

/* ── Clean HUD rings (ch-ring-1/2/3) ── */
body.os-media-active .ch-ring,
body.os-media-active .ch-ring-1,
body.os-media-active .ch-ring-2,
body.os-media-active .ch-ring-3 {
  animation-play-state: paused !important;
}

/* ── Clean HUD hex + status dot ── */
body.os-media-active .ch-hex,
body.os-media-active .ch-dot {
  animation-play-state: paused !important;
}

/* ── Clean HUD stat card entrance (if still in progress) ── */
body.os-media-active .ch-stat {
  animation-play-state: paused !important;
}

/* ── Jarvis rotating rings ── */
body.os-media-active .j-ring,
body.os-media-active .j-ring-1,
body.os-media-active .j-ring-2,
body.os-media-active .j-ring-3 {
  animation-play-state: paused !important;
}

/* ── Jarvis scanline sweeps (horizontal + vertical) ── */
body.os-media-active #j-scanline::before,
body.os-media-active #j-scanline::after {
  animation-play-state: paused !important;
}

/* ── Jarvis data stream scrollers ── */
body.os-media-active .j-datastream {
  animation-play-state: paused !important;
}

/* ── Jarvis face glow + radar rotation ── */
body.os-media-active #jarvis-face img,
body.os-media-active #jarvis-face::before {
  animation-play-state: paused !important;
}

/* ── Jarvis corner bracket pulse ── */
body.os-media-active .j-corner {
  animation-play-state: paused !important;
}

/* ── Jarvis clock glow ── */
body.os-media-active #jarvis-clock-time {
  animation-play-state: paused !important;
}

/* ── Jarvis panel neon border breathe ── */
body.os-media-active .j-panel {
  animation-play-state: paused !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Jarvis sound wave bars ── */
body.os-media-active .j-wave-bar {
  animation-play-state: paused !important;
}

/* ── Jarvis HUD chips ── */
body.os-media-active .j-hud-chip {
  animation-play-state: paused !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Jarvis taskbar neon gradient ── */
body.os-media-active #os-taskbar::after {
  display: none !important;
}

/* ── App card hover shimmer (::after pseudo) ── */
body.os-media-active .os-app-card::after {
  animation-play-state: paused !important;
}

/* ── App icon pulse in Jarvis hover ── */
body.os-media-active .jarvis .os-app-icon::before {
  animation-play-state: paused !important;
}

/* ── hyOS title color cycle ── */
body.os-media-active #os-tb-title {
  animation-play-state: paused !important;
}

/* ── Onboarding tour ring (shouldn't overlap media, but be safe) ── */
body.os-media-active .tour-pulse {
  animation-play-state: paused !important;
}

/* ── Toasts: reduce blur during media ── */
body.os-media-active .os-toast {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Dock (already display:none but belt-and-suspenders) ── */
body.os-media-active #clean-dock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   FIX 3 — body:has(.hyos-win)  (any window open, not just media)
   ══════════════════════════════════════════════════════════════════
   Even when NOT playing media, having a window open means an iframe
   is rendering inside the OS shell. The combined GPU load of OS chrome
   (35 BF layers) + iframe content crashes Android in <2 minutes.
   This block activates as soon as ANY window opens, regardless of
   whether media is playing. Uses the same :has() selector already
   used to hide the drawer tab when windows are present. */

body:has(#hyos-windows .hyos-win) #os-taskbar {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
body:has(#hyos-windows .hyos-win) #clean-bg {
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) #clean-island {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) .ch-ring,
body:has(#hyos-windows .hyos-win) .ch-hex,
body:has(#hyos-windows .hyos-win) .ch-dot {
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) .j-ring,
body:has(#hyos-windows .hyos-win) #j-scanline::before,
body:has(#hyos-windows .hyos-win) #j-scanline::after,
body:has(#hyos-windows .hyos-win) .j-datastream,
body:has(#hyos-windows .hyos-win) #jarvis-face::before,
body:has(#hyos-windows .hyos-win) #jarvis-face img {
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) .j-corner {
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) #os-taskbar::after {
  display: none !important;
}
body:has(#hyos-windows .hyos-win) #os-tb-title {
  animation-play-state: paused !important;
}
body:has(#hyos-windows .hyos-win) .j-hud-chip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:has(#hyos-windows .hyos-win) .j-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-play-state: paused !important;
}

/* ── Jarvis background video: reduce visual load during media playback ──
   CSS cannot pause <video> — JS handles actual pause via _osMediaMode().
   This reduces opacity so the video compositor layer is less expensive.
   The JS media mode watcher at startup handles the actual pause/resume. */
body.os-media-active #jarvis-video {
  opacity: 0 !important;            /* invisible = compositor skips rendering */
  pointer-events: none;
}

/* ── Taskbar portal ring animation: pause when media active ── */
body.os-media-active .clean #os-start-btn {
  animation-play-state: paused !important;
}

/* ── Drawer tab hint animation: pause when media active ── */
body.os-media-active #os-drawer-hint {
  animation-play-state: paused !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 3 — body.os-drawer-active (active while app drawer is open)
   GPU relief: pause the same set of animations as media mode.
   JS adds this class in openDrawer() and removes in closeDrawer().
   ══════════════════════════════════════════════════════════════════ */

body.os-drawer-active #clean-bg {
  animation-play-state: paused !important;
}

body.os-drawer-active #os-taskbar::after {
  animation-play-state: paused !important;
}

body.os-drawer-active .j-datastream {
  animation-play-state: paused !important;
}

body.os-drawer-active #j-scanline::before,
body.os-drawer-active #j-scanline::after {
  animation-play-state: paused !important;
}

body.os-drawer-active .j-ring,
body.os-drawer-active .j-ring-1,
body.os-drawer-active .j-ring-2,
body.os-drawer-active .j-ring-3 {
  animation-play-state: paused !important;
}

body.os-drawer-active .j-panel {
  animation-play-state: paused !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.os-drawer-active .j-wave-bar,
body.os-drawer-active .j-hud-chip,
body.os-drawer-active .j-corner,
body.os-drawer-active #jarvis-clock-time,
body.os-drawer-active #jarvis-face img,
body.os-drawer-active #jarvis-face::before {
  animation-play-state: paused !important;
}