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

/* File browser panel — closed via opacity:0 + visibility:hidden */
#os-file-browser: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;
}

/* ── Notification center OPEN during media/window: reduce blur (30px→08px) to
   relieve GPU compositor pressure. The closed state is already handled above
   (#os-notif-center:not(.open) { backdrop-filter:none }).
   This targets the open state so users can still read notifications
   during playback without a white-screen crash risk. ── */
body.os-media-active #os-notif-center.open {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body:has(#hyos-windows .hyos-win) #os-notif-center.open {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !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;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 4 — body:has(#hyos-windows .hyos-win)  (any app window open)
   Less aggressive than os-media-active — user is working, not consuming.
   Reduces GPU background pressure without killing the OS chrome.
   Uses CSS has() — zero JS overhead, native browser feature.
   Supported: Chrome 105+, Safari 15.4+, Firefox 121+
   ══════════════════════════════════════════════════════════════════ */

/* ── Aurora: slow animation 20s → 60s (3× less paint cycles) ── */
body:has(#hyos-windows .hyos-win) #clean-bg {
  animation-duration: 60s !important;
}

/* ── Taskbar: reduce blur from 52px → 20px ── */
body:has(#hyos-windows .hyos-win) #os-taskbar {
  backdrop-filter: saturate(180%) blur(20px) brightness(1.1) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(1.1) !important;
}

/* ── Start button portal ring: pause (user is in an app, not clicking it) ── */
body:has(#hyos-windows .hyos-win) .clean #os-start-btn {
  animation-play-state: paused !important;
}

/* ── Drawer handle gradient sweep: pause ── */
body:has(#hyos-windows .hyos-win) .clean #os-drawer-handle {
  animation-play-state: paused !important;
}

/* ── Drawer tab sweep: pause ── */
body:has(#hyos-windows .hyos-win) #os-drawer-tab::before {
  animation-play-state: paused !important;
}

/* ── HYPATIA OS title color cycle: slow 5s → 15s ── */
body:has(#hyos-windows .hyos-win) .clean #os-tb-title {
  animation-duration: 15s !important;
}

/* ── Jarvis rotating rings: slow to 1/3 speed ── */
body:has(#hyos-windows .hyos-win) .j-ring-1 {
  animation-duration: 30s !important;
}
body:has(#hyos-windows .hyos-win) .j-ring-2 {
  animation-duration: 48s !important;
}
body:has(#hyos-windows .hyos-win) .j-ring-3 {
  animation-duration: 66s !important;
}

/* ── Jarvis panel border breathe: slow ── */
body:has(#hyos-windows .hyos-win) .j-panel {
  animation-duration: 6s !important;
}

/* ── App card shimmer on active cat pill: pause ── */
body:has(#hyos-windows .hyos-win) .clean .os-cat-pill.active {
  animation-play-state: paused !important;
}

/* ── Cyberpunk portal shadow on taskbar/drawer: slow ── */
body:has(#hyos-windows .hyos-win) .clean #os-taskbar,
body:has(#hyos-windows .hyos-win) .clean #os-drawer {
  animation-duration: 30s !important;
}

/* ── Handle glow pulse: pause ── */
body:has(#hyos-windows .hyos-win) #os-drawer-handle {
  animation-play-state: paused !important;
}

/* ── Tray icon hover glow: reduce ── */
body:has(#hyos-windows .hyos-win) .clean .os-tray-icon:hover {
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent, #00ffa3) 20%, transparent) !important;
}

/* Restore full effects when media is ALSO active (media-active is more aggressive) */
body.os-media-active #clean-bg {
  animation-play-state: paused !important; /* already set above, ensure priority */
}


/* ══════════════════════════════════════════════════════════════════
   FIX 5 — #os-window-shade  (desktop dim overlay)
   A translucent overlay that sits BELOW open hyOS windows (z:100)
   but ABOVE the background (z:1-10). When a window is open or the
   drawer is up, the desktop dims so the foreground is clearly the
   most prominent element. Pure CSS :has() — zero JS overhead.
   Supported: Chrome 105+, Safari 15.4+, Firefox 121+
   ══════════════════════════════════════════════════════════════════ */

#os-window-shade {
  position: fixed;
  inset: 0;
  z-index: 100;               /* below #hyos-windows (101) above background */
  background: rgba(0, 0, 0, 0);
  pointer-events: none;       /* never blocks clicks through to the OS */
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background;    /* GPU-composited colour change, no repaint */
}

/* Window open: dim the desktop ~35% */
body:has(#hyos-windows .hyos-win) #os-window-shade {
  background: rgba(0, 0, 0, 0.32);
}

/* Drawer open: lighter dim — drawer backdrop already dims for us */
body.os-drawer-active #os-window-shade {
  background: rgba(0, 0, 0, 0.15);
}

/* Both window + drawer simultaneously: use window strength */
body.os-drawer-active:has(#hyos-windows .hyos-win) #os-window-shade {
  background: rgba(0, 0, 0, 0.32);
}

/* Media playing + window: maximum dim — give GPU everything to the player */
body.os-media-active:has(#hyos-windows .hyos-win) #os-window-shade {
  background: rgba(0, 0, 0, 0.45);
}

/* Clean mode: slightly lighter (white-ish content behind, don't over-darken) */
body.clean:has(#hyos-windows .hyos-win) #os-window-shade {
  background: rgba(0, 0, 0, 0.22);
}
body.clean.os-media-active:has(#hyos-windows .hyos-win) #os-window-shade {
  background: rgba(0, 0, 0, 0.35);
}