/* ============================================================
   hyos-windows.css — HyOS 2.0 Window System
   Glass windows with iOS traffic lights, spring physics,
   drag/snap, minimize/maximize, sparkle burst on open.
   ZERO hardcoded colors — everything via var(--v11-*) / var(--accent).
   ============================================================ */

/* ── Window Container Layer ─────────────────────────────────── */
#hyos-windows {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* pass-through to desktop by default */
  z-index: var(--v11-z-windows, 200);
  isolation: isolate;
  overflow: hidden;
}

/* All windows restore pointer events */
#hyos-windows .hyos-win {
  pointer-events: all;
}

/* ============================================================
   WINDOW FRAME (.hyos-win)
   ============================================================ */
.hyos-win {
  /* Geometry */
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 20px;           /* ALWAYS — even when maximized */
  overflow: hidden;

  /* Default placement — overridden by JS per window */
  min-width: 320px;
  min-height: 240px;
  width: 860px;
  max-width: calc(100vw - 32px);
  height: 580px;
  max-height: calc(100vh - 80px);

  /* Liquid Glass surface */
  background: var(--v11-glass-bg, rgba(10, 10, 18, 0.62));
  -webkit-backdrop-filter: saturate(240%) blur(56px) brightness(1.12);
  backdrop-filter: saturate(240%) blur(56px) brightness(1.12);
  border: 0.5px solid var(--v11-border-accent, rgba(0, 255, 163, 0.28));

  /* 7-layer shadow stack (macOS 26 reference) */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),  /* specular top edge */
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),          /* bottom inner shadow */
    0 0 0 0.5px rgba(0, 0, 0, 0.18),             /* hairline outline */
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 32px 80px rgba(0, 0, 0, 0.36),
    var(--v11-glow-sm, 0 0 20px rgba(0, 255, 163, 0.10));

  /* GPU compositing */
  will-change: transform, opacity;
  transform-origin: center center;

  /* Spring open animation — iOS-style: scale up from slightly below with blur */
  animation: hyos-win-open 0.52s cubic-bezier(0.34, 1.52, 0.64, 1) both;
}

/* Stacking order — focused window gets higher z-index via JS */
.hyos-win { z-index: 10; }
.hyos-win.hyos-focused { z-index: 50; }

/* ── Soft-light accent tint on focused window ───────────────── */
.hyos-win::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent, #00ffa3) 16%, transparent);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

.hyos-win.hyos-focused::before {
  opacity: 1;
}

/* ── Window open keyframe ───────────────────────────────────── */
/* Premium iOS-style spring open:
   Starts below viewport center, scales up, brief overshoot, settles.
   Blur dissolves quickly so content is readable fast. */
@keyframes hyos-win-open {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(28px);
    filter: blur(8px);
  }
  35% {
    opacity: 1;
    filter: blur(0);
  }
  70% {
    transform: scale(1.018) translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Window close keyframe ──────────────────────────────────── */
/* Fast snap close — like iOS app returning to home screen */
@keyframes hyos-win-close {
  from {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  40% {
    opacity: 0.5;
    filter: blur(3px);
  }
  to {
    opacity: 0;
    transform: scale(0.82) translateY(18px);
    filter: blur(10px);
  }
}

.hyos-win.hyos-closing {
  /* Quicker than open — exit should feel snappy */
  animation: hyos-win-close 0.22s cubic-bezier(0.5, 0, 0.8, 0.5) forwards;
  pointer-events: none;
}

/* ── Minimize keyframe ──────────────────────────────────────── */
@keyframes hyos-win-minimize {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.35) translateY(80px);
    filter: blur(12px);
  }
}

.hyos-win.hyos-minimizing {
  animation: hyos-win-minimize 0.28s cubic-bezier(0.5, 0, 0.8, 0.5) forwards;
  pointer-events: none;
}

/* ── Maximize/restore ───────────────────────────────────────── */
.hyos-win.hyos-maximized {
  /* Fill viewport below taskbar (56px = 48px bar + 8px gap) and keep rounded corners.
     top: 8px put 40px of window content behind the fixed taskbar — fixed. */
  top: 56px !important;
  left: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 64px) !important;  /* 56px top + 8px bottom gap */
  border-radius: 20px !important;
  transition:
    top    0.42s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    left   0.42s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    width  0.42s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    height 0.42s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

/* ── Snap zones (half-screen) ───────────────────────────────── */
.hyos-win.hyos-snap-left {
  top: 56px !important;                   /* clear the 48px taskbar */
  left: 8px !important;
  width: calc(50vw - 12px) !important;
  height: calc(100vh - 64px) !important;  /* 56px top + 8px bottom */
  transition:
    top    0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    left   0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    width  0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    height 0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

.hyos-win.hyos-snap-right {
  top: 56px !important;                   /* clear the 48px taskbar */
  left: calc(50vw + 4px) !important;
  width: calc(50vw - 12px) !important;
  height: calc(100vh - 64px) !important;  /* 56px top + 8px bottom */
  transition:
    top    0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    left   0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    width  0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    height 0.38s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

/* Snap preview ghost shown during drag near edges */
.hyos-snap-preview {
  position: fixed;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent, #00ffa3) 10%, rgba(0, 0, 0, 0.12));
  border: 1.5px dashed var(--v11-border-accent, rgba(0, 255, 163, 0.35));
  pointer-events: none;
  z-index: calc(var(--v11-z-windows, 200) - 1);
  transition:
    top    0.18s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    left   0.18s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    width  0.18s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    height 0.18s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    opacity 0.15s;
  animation: hyos-snap-preview-in 0.22s var(--v11-spring-card) both;
}

@keyframes hyos-snap-preview-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   WINDOW CHROME (.hyos-win-chrome)
   48px title bar with traffic lights LEFT, title CENTER, actions RIGHT
   ============================================================ */
.hyos-win-chrome {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  gap: 0;
  flex-shrink: 0;

  /* Slightly darker than window body for contrast */
  background: color-mix(in srgb, var(--v11-glass-bg, rgba(10,10,18,0.62)) 80%, rgba(0,0,0,0.35));
  border-bottom: 0.5px solid var(--v11-border-accent, rgba(0,255,163,0.18));

  /* Specular highlight on chrome top */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Drag handle cursor */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Mobile: prevent browser from consuming touch events for page scroll
     so the window-drag touch handlers in hyos-wm.js can fire cleanly */
  touch-action: none;

  /* Ensure chrome children are above the ::before tint layer */
  z-index: 1;
}

.hyos-win-chrome:active {
  cursor: grabbing;
}

/* Chrome specular top edge */
.hyos-win-chrome::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 30%,
    var(--v11-specular, rgba(255, 255, 255, 0.55)) 50%,
    rgba(255, 255, 255, 0.28) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Traffic Lights — ALWAYS LEFT (iOS/macOS standard) ───────────────── */
.hyos-traffic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  flex-shrink: 0;
  /* Push title + actions to the right — traffic stays LEFT */
  margin-right: auto;
  /* Don't inherit cursor: grab from parent */
  cursor: default;
  /* Explicit left order */
  order: 1;
}

/* Base button style */
.hyos-ctrl {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    box-shadow 0.15s var(--v11-spring-magnetic, cubic-bezier(0.40, 0, 0.20, 1)),
    filter     0.15s var(--v11-spring-magnetic, cubic-bezier(0.40, 0, 0.20, 1)),
    transform  0.15s var(--v11-spring-magnetic, cubic-bezier(0.40, 0, 0.20, 1));
  /* Don't grab parent cursor */
  cursor: pointer;
}

/* 44px tap target via ::after (invisible hit area) */
.hyos-ctrl::after {
  content: '';
  position: absolute;
  inset: -15px;   /* 14 + 15×2 = 44px — iOS HIG minimum */
}

/* Icon inside button — always visible at 55%, full on hover */
.hyos-ctrl::before {
  content: '';
  position: absolute;
  inset: 2px;            /* larger icon: 14-4 = 10px instead of 8px */
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.55;         /* always visible, not just on hover */
  transition: opacity 0.12s;
}

/* Brighten icons on chrome hover */
.hyos-win-chrome:hover .hyos-ctrl::before {
  opacity: 1;
}

/* Close — red */
.hyos-ctrl.hyos-ctrl-close {
  background: #FF5F57;
  box-shadow: 0 0 8px rgba(255, 95, 87, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.hyos-ctrl.hyos-ctrl-close::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='rgba(100,0,0,0.7)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Minimize — amber */
.hyos-ctrl.hyos-ctrl-min {
  background: #FFBD2E;
  box-shadow: 0 0 8px rgba(255, 189, 46, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.hyos-ctrl.hyos-ctrl-min::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='rgba(80,50,0,0.7)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Maximize — green */
.hyos-ctrl.hyos-ctrl-max {
  background: #28C840;
  box-shadow: 0 0 8px rgba(40, 200, 64, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
/* Expand icon: two L-shaped corner brackets pointing outward (top-left + bottom-right).
   This is the correct macOS fullscreen/maximize symbol — NOT an X. */
.hyos-ctrl.hyos-ctrl-max::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 4V1.5H4M6 1.5H8.5V4M8.5 6V8.5H6M4 8.5H1.5V6' stroke='rgba(0,60,0,0.7)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Hover state — brighten & lift */
.hyos-ctrl:hover {
  filter: brightness(1.15);
  transform: scale(1.08);
}
.hyos-ctrl:active {
  transform: scale(0.92);
  filter: brightness(0.88);
}

/* ── Window Title — centered between traffic and actions ──────────── */
.hyos-win-title {
  /* Use absolute centering relative to chrome so it's truly centered
     regardless of traffic/actions width difference */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 160px); /* leave room for traffic + actions */
  text-align: center;
  pointer-events: none;
  order: 2;
  font-family: var(--v11-font-display, -apple-system, 'SF Pro Display', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;

  /* Holograph gradient effect */
  background: linear-gradient(
    110deg,
    var(--text, rgba(219,229,245,1)) 0%,
    color-mix(in srgb, var(--accent, #00ffa3) 80%, white) 40%,
    var(--text, rgba(219,229,245,1)) 60%,
    color-mix(in srgb, var(--accent, #00ffa3) 60%, white) 80%,
    var(--text, rgba(219,229,245,1)) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hyos-title-shimmer 5s linear infinite;

  /* Don't grab cursor */
  cursor: default;
  pointer-events: none;
}

@keyframes hyos-title-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 240% center; }
}

/* ── Right-side window action icons ────────────────────────────────────────────── */
.hyos-win-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: default;
  /* Stick to the right side */
  margin-left: auto;
  order: 3;
}

.hyos-win-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text, rgba(219,229,245,0.75));
  cursor: pointer;
  transition:
    background 0.15s var(--v11-spring-magnetic, cubic-bezier(0.40, 0, 0.20, 1)),
    transform  0.15s var(--v11-spring-magnetic, cubic-bezier(0.40, 0, 0.20, 1));
  flex-shrink: 0;
  font-size: 16px;
}

/* 44px tap target */
.hyos-win-action-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.hyos-win-action-btn:hover {
  background: color-mix(in srgb, var(--accent, #00ffa3) 12%, rgba(255,255,255,0.06));
  transform: scale(1.06);
}

.hyos-win-action-btn:active {
  transform: scale(0.94);
}

/* ============================================================
   WINDOW BODY (.hyos-win-body)
   Full-trust iframe container
   ============================================================ */
.hyos-win-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1;
  /* iOS: signal this container supports momentum scrolling so WebKit
     properly delegates touch-scroll events into the iframe child */
  -webkit-overflow-scrolling: touch;
}

/* Loading shimmer */
.hyos-win-body.hyos-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #00ffa3) 6%, transparent) 40%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: hyos-win-loading 1.6s linear infinite;
  pointer-events: none;
}

@keyframes hyos-win-loading {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* The actual iframe */
.hyos-win-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
  /* NO border-radius here — parent overflow:hidden clips it */

  /* iOS scroll fixes:
     - touch-action:auto lets the iframe's own document handle pan/scroll
       (prevents the OS window's touchstart capture from consuming scrolls)
     - -webkit-overflow-scrolling:touch enables momentum scroll in iOS WebKit
       for the iframe content. Without this, iOS may not pass scroll gestures
       through to the iframe's own document. */
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Error state ────────────────────────────────────────────── */
.hyos-win-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--muted, rgba(200,255,240,0.70));
  font-family: var(--v11-font-body, system-ui, sans-serif);
  font-size: 13px;
}

.hyos-win-error iconify-icon {
  font-size: 40px;
  color: var(--danger, #ff4d6d);
  opacity: 0.75;
}

/* ============================================================
   RESIZE HANDLES
   Invisible 8px edges for resize drag (8 directional)
   ============================================================ */
.hyos-resize-handle {
  position: absolute;
  z-index: 100;
}

/* Edge handles */
.hyos-resize-handle[data-dir="n"]  { top: 0; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
.hyos-resize-handle[data-dir="s"]  { bottom: 0; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
.hyos-resize-handle[data-dir="e"]  { top: 12px; right: 0; bottom: 12px; width: 8px; cursor: e-resize; }
.hyos-resize-handle[data-dir="w"]  { top: 12px; left: 0; bottom: 12px; width: 8px; cursor: w-resize; }

/* Corner handles */
.hyos-resize-handle[data-dir="ne"] { top: 0; right: 0; width: 18px; height: 18px; cursor: ne-resize; border-radius: 0 20px 0 0; }
.hyos-resize-handle[data-dir="nw"] { top: 0; left: 0; width: 18px; height: 18px; cursor: nw-resize; border-radius: 20px 0 0 0; }
.hyos-resize-handle[data-dir="se"] { bottom: 0; right: 0; width: 18px; height: 18px; cursor: se-resize; border-radius: 0 0 20px 0; }
.hyos-resize-handle[data-dir="sw"] { bottom: 0; left: 0; width: 18px; height: 18px; cursor: sw-resize; border-radius: 0 0 0 20px; }

/* ============================================================
   SPARKLE SYSTEM
   Particle burst on window open
   ============================================================ */
.hyos-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: calc(var(--v11-z-windows, 200) + 100);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #00ffa3);
  transform-origin: center;
  /* Each sparkle uses --angle and --dist custom props set by JS */
  animation: hyos-sparkle-fly 0.65s var(--v11-spring-smooth, cubic-bezier(0.16,1,0.30,1)) forwards;
}

@keyframes hyos-sparkle-fly {
  0% {
    transform: scale(0) rotate(0deg) translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: scale(1.5) rotate(var(--angle, 0deg))
               translate(
                 calc(cos(var(--angle, 0deg)) * var(--dist, 40px)),
                 calc(sin(var(--angle, 0deg)) * var(--dist, 40px))
               );
    opacity: 0.9;
  }
  100% {
    transform: scale(0) rotate(calc(var(--angle, 0deg) * 2))
               translate(
                 calc(cos(var(--angle, 0deg)) * var(--dist, 40px) * 1.4),
                 calc(sin(var(--angle, 0deg)) * var(--dist, 40px) * 1.4)
               );
    opacity: 0;
  }
}

/* Larger star sparkle variant */
.hyos-sparkle.hyos-sparkle-star {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform-origin: center;
}

/* ============================================================
   THEME OVERRIDES
   Light mode and specific themes — all via variables
   ============================================================ */

/* Light mode — warm glass */
[data-mode="light"] .hyos-win,
[data-theme="beach"] .hyos-win,
[data-theme="summer-beach"] .hyos-win {
  background: var(--v11-glass-bg, rgba(255, 245, 230, 0.65));
  border-color: var(--v11-border-accent, rgba(0, 0, 0, 0.12));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.10),
    0 6px 20px rgba(0, 0, 0, 0.14),
    0 24px 60px rgba(0, 0, 0, 0.20);
}

[data-mode="light"] .hyos-win-chrome,
[data-theme="beach"] .hyos-win-chrome,
[data-theme="summer-beach"] .hyos-win-chrome {
  background: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-mode="light"] .hyos-win-title,
[data-theme="beach"] .hyos-win-title,
[data-theme="summer-beach"] .hyos-win-title {
  -webkit-text-fill-color: unset;
  background: none;
  color: rgba(30, 30, 40, 0.85);
}

/* Gold Luxury — champagne specular */
[data-theme="gold"] .hyos-win-chrome::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.40) 35%,
    rgba(255, 230, 140, 0.60) 50%,
    rgba(212, 168, 67, 0.40) 65%,
    transparent 100%
  );
}

/* Tron — sharper blue edges */
[data-theme="tron"] .hyos-win {
  border-width: 1px;
}

/* ============================================================
   MOBILE BREAKPOINTS — split by device class

   ≤768px (tablets, Fold unfolded, iPads):
     - Hide resize handles and right-side action buttons
     - Windows remain draggable / floating (not forced full-screen)

   ≤480px (phones — iPhone SE through Pro Max, Fold outer):
     - Full-screen sheet mode (below taskbar, above dock)
     - Round top corners only (sheet pattern)
   ============================================================ */

/* ── Tablets + small phablets: hide chrome extras ── */
@media (max-width: 768px) {
  /* Hide right-side actions (external link, pop-out, etc.) */
  .hyos-win-actions {
    display: none;
  }
  /* Resize handles unusable on touch — hide them */
  .hyos-resize-handle {
    display: none;
  }
}

/* ── Phones only: full-screen sheet (≤480px) ── */
/* This correctly excludes:
   - Pixel 9 Pro Fold unfolded (~1080px)
   - iPad Mini (768px)
   - Most tablet viewports
   While targeting:
   - iPhone SE (375px) through Pro Max (440px)
   - Pixel 9 Pro Fold outer display (~380px) */
@media (max-width: 480px) {
  .hyos-win {
    /* Sit below the OS taskbar (48px) and above the dock (~90px) */
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;  /* override base max-width: calc(100vw - 32px) */
    /* dvh = dynamic viewport height = excludes browser chrome on mobile */
    height: calc(100dvh - 48px - max(90px, calc(72px + env(safe-area-inset-bottom, 0px)))) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* Fully rounded corners — glass card floating above dock */
    border-radius: 20px !important;
    /* Spring slide up from below */
    animation: hyos-win-open-mobile 0.42s var(--v11-spring-smooth, cubic-bezier(0.16,1,0.30,1)) both;
  }

  /* Smaller chrome bar on phones */
  .hyos-win .hyos-win-chrome {
    height: 36px;
    min-height: 36px;
  }

  /* Tighter gap between traffic-light buttons on mobile */
  .hyos-win .hyos-traffic {
    gap: 6px;
  }

  /* Smaller traffic-light buttons (10px) on phones */
  .hyos-win .hyos-ctrl {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
  }

  /* Recalculate 44px tap target for 10px button: 10 + 17×2 = 44px */
  .hyos-win .hyos-ctrl::after {
    inset: -17px;
  }

  @keyframes hyos-win-open-mobile {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ============================================================
   REDUCED MOTION
   Instant transitions, no sparkles
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hyos-win,
  .hyos-win.hyos-maximized,
  .hyos-win.hyos-snap-left,
  .hyos-win.hyos-snap-right {
    animation: none !important;
    transition: none !important;
  }

  .hyos-sparkle {
    display: none !important;
  }

  .hyos-win-title {
    animation: none !important;
    background-position: 0% center !important;
  }
}

/* ============================================================
   FOCUSED / BLUR STATES
   Unfocused windows dim slightly
   ============================================================ */
.hyos-win:not(.hyos-focused) {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 20px 50px rgba(0, 0, 0, 0.24);
  filter: saturate(0.82);
  transition:
    box-shadow 0.25s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    filter     0.25s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

.hyos-win.hyos-focused {
  filter: saturate(1);
  transition:
    box-shadow 0.25s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1)),
    filter     0.25s var(--v11-spring-card, cubic-bezier(0.34, 1.06, 0.64, 1));
}

/* Focused glow on window chrome */
.hyos-win.hyos-focused .hyos-win-chrome {
  border-bottom-color: var(--v11-border-accent, rgba(0,255,163,0.28));
}

/* ============================================================
   TASKBAR PILL for minimized windows
   (Referenced by WM JS when minimizing)
   ============================================================ */
.hyos-taskbar-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 99px;
  background: var(--v11-glass-bg, rgba(10,10,18,0.62));
  -webkit-backdrop-filter: saturate(220%) blur(28px) brightness(1.08);
  backdrop-filter: saturate(220%) blur(28px) brightness(1.08);
  border: 0.5px solid var(--v11-border-accent, rgba(0,255,163,0.22));
  box-shadow: var(--v11-shadow-sm);
  cursor: pointer;
  font-family: var(--v11-font-body, system-ui, sans-serif);
  font-size: 12px;
  color: var(--text, rgba(219,229,245,0.90));
  animation: hyos-pill-in 0.28s var(--v11-spring-bounce, cubic-bezier(0.18,1.25,0.40,1)) both;
  transition:
    transform  0.15s var(--v11-spring-magnetic, cubic-bezier(0.40,0,0.20,1)),
    box-shadow 0.15s var(--v11-spring-magnetic, cubic-bezier(0.40,0,0.20,1));
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hyos-taskbar-pill::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.hyos-taskbar-pill:hover {
  transform: scale(1.04);
  box-shadow: var(--v11-shadow-sm), var(--v11-glow-sm);
}

.hyos-taskbar-pill:active {
  transform: scale(0.97);
}

.hyos-taskbar-pill .hyos-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v11-tint-strong, rgba(0,255,163,0.35));
  flex-shrink: 0;
  animation: v11-glow-pulse 2.5s ease-in-out infinite;
}

@keyframes hyos-pill-in {
  from { opacity: 0; transform: scale(0.7) translateY(8px); }
  60%  { transform: scale(1.06) translateY(-1px); }
  to   { opacity: 1; transform: none; }
}