/* Windows scenes (js/scenes/windows.js). Every class here starts with wn-. Motion sits in a no-preference block. */

/* Mini windows: placed with translate from 0,0 so every move animates */
.win.wn-w { left: 0; top: 0; transform-origin: 50% 50%; }
.wn-w .bar { height: 34px; }
.wn-w .bar i { position: relative; width: 13px; height: 13px; cursor: pointer; }
.wn-w .bar i::after { content: ""; position: absolute; inset: -5px; }
.wn-w .bar i.r { background: #ff5f57; } .wn-w .bar i.y { background: #febc2e; } .wn-w .bar i.g { background: #28c840; }
.wn-w.d .bar i.r, .wn-w.d .bar i.y, .wn-w.d .bar i.g { background: #3a3b41; }
.wn-w .bar i.g::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 -apple-system, system-ui; color: rgba(0, 0, 0, .6); opacity: 0; }
.wn-w .bar i.g:hover::before, .wn-w .bar i.g.press::before { opacity: 1; }
.wn-w .bar b { margin-left: 8px; font: 600 11px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--notch-text-2); }
.wn-w .ln.a { background: var(--ac); opacity: .75; }
.wn-w.f { border-color: rgba(10, 132, 255, .9); box-shadow: 0 0 0 2px rgba(10, 132, 255, .3); }
.wn-w.d { filter: brightness(.72); }
.wn-w.n { opacity: 0; scale: .92; pointer-events: none; }
.wn-tx { display: flex; align-items: center; margin: 14px 18px 0; font-size: 12px; color: var(--notch-text-2); }
.wn-tx i { display: none; width: 2px; height: 14px; margin-left: 2px; background: var(--notch-blue); }
.wn-w:not(.d) .wn-tx i { display: inline-block; }
.nb.wn-abs { position: absolute; }

/* Status chip */
.wn-chip { position: absolute; translate: -50% 0; z-index: 6; padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--notch-text);
  background: rgba(8, 10, 16, .72); border: 1px solid rgba(255, 255, 255, .14); }

/* Mini Dock strip. Icon i sits at (left + 31 + 52 i, top + 31) in screen units. */
.wn-dock { position: absolute; z-index: 2; display: flex; gap: 8px; padding: 8px; border-radius: 18px;
  background: rgba(40, 44, 58, .62); border: 1px solid rgba(255, 255, 255, .14); }
.wn-dock i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 11px; cursor: pointer; }
.wn-dock i::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; translate: -50% 0; background: #fff; opacity: 0; }
.wn-dock i.run::after { opacity: .9; }
.wn-dock i.press { translate: 0 -6px; }
.wn-dock i.wn-quit { scale: .8; opacity: .35; }

/* Dock Preview and Switcher thumbnails */
.wn-thv { display: block; position: relative; overflow: hidden; border-radius: 7px; background: #1c1d22; border: 1px solid #2a2b31; }
.wn-thv i { display: block; height: 10px; background: #26272c; }
.wn-thv em { display: block; height: 5px; margin: 7px 8px 0; border-radius: 3px; background: #2a2b31; width: 78%; }
.wn-thv em:first-of-type { width: 50%; background: var(--ac); opacity: .8; }
.wn-pv { position: absolute; z-index: 3; display: flex; gap: 8px; padding: 10px; border-radius: 16px; transform-origin: 50% 100%;
  background: rgba(30, 32, 40, .82); border: 1px solid rgba(255, 255, 255, .14); opacity: 0; scale: .92; translate: 0 6px; pointer-events: none; }
.wn-pv.show { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
.wn-pv::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; translate: -50% 0; rotate: 45deg; border-radius: 2px;
  background: rgba(30, 32, 40, .82); border: solid rgba(255, 255, 255, .14); border-width: 0 1px 1px 0; }
.wn-th { display: flex; flex-direction: column; gap: 5px; width: 96px; padding: 0; background: none; border: 0; color: var(--notch-text-2); cursor: pointer; font: 600 11px/1 -apple-system, system-ui; text-align: left; }
.wn-th .wn-thv { width: 96px; height: 62px; }
.wn-th:hover .wn-thv, .wn-th.on .wn-thv { border-color: var(--notch-blue); box-shadow: 0 0 0 2px rgba(10, 132, 255, .35); }
.wn-th:hover, .wn-th.on { color: var(--notch-text); }

/* Spaces */
.wn-sp { position: absolute; left: 0; top: 0; width: 200px; display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--notch-text-2); font: 600 12px/1 -apple-system, system-ui; }
.wn-spv { position: relative; display: block; width: 200px; height: 88px; border-radius: 12px; background: rgba(18, 20, 34, .88); border: 2px solid rgba(255, 255, 255, .16); }
.wn-spv i { position: absolute; border-radius: 5px; background: #2a2b31; border-top: 6px solid var(--ac); }
.wn-spv i:first-child { left: 14px; top: 14px; width: 92px; height: 52px; }
.wn-spv i:last-child { left: 84px; top: 28px; width: 100px; height: 44px; background: #34353c; }
.wn-sp.on .wn-spv { border-color: var(--notch-blue); }
.wn-sp.on { color: var(--notch-text); }
.wn-sw { position: absolute; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; cursor: pointer; color: var(--notch-text);
  font: 600 12px/1 -apple-system, system-ui; background: rgba(8, 10, 16, .6); border: 1px solid rgba(255, 255, 255, .12); }
.wn-sw i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .2); }
.wn-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.wn-sw[aria-checked="true"] i { background: var(--notch-green); }
.wn-sw[aria-checked="true"] i::after { translate: 14px 0; }

/* Key caps */
.wn-keys { position: absolute; translate: -50% 0; z-index: 4; display: flex; gap: 12px; }
.wn-key { display: inline-grid; place-items: center; min-width: 48px; height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--notch-text); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
span.wn-key { cursor: default; }
.wn-key:active, .wn-key.press { transform: translateY(1px) scale(.95); }
.wn-key.on { background: rgba(10, 132, 255, .78); }
.wn-shake { animation: wn-shake 420ms var(--ease-out); }
@keyframes wn-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Radial menu */
.wn-surf, .wn-area { position: absolute; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .22); }
.wn-surf { cursor: pointer; }
.wn-wheel { position: absolute; z-index: 4; width: 220px; height: 220px; pointer-events: none; }
.wn-wheel svg { display: block; width: 220px; height: 220px; }
.wn-seg { fill: rgba(30, 32, 40, .82); stroke: rgba(255, 255, 255, .16); stroke-width: 1; cursor: pointer; pointer-events: auto; }
.wn-seg:hover, .wn-seg.on { fill: rgba(10, 132, 255, .85); }
.wn-ic { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; translate: -50% -50%; font-size: 20px; pointer-events: none; }
.wn-hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; padding: 6px; translate: -50% -50%; border-radius: 50%; text-align: center;
  font: 600 11px/1.15 -apple-system, system-ui; background: rgba(8, 10, 16, .88); border: 1px solid rgba(255, 255, 255, .14); pointer-events: none; }

/* Window layout */
.wn-snap { position: absolute; border-radius: 12px; opacity: 0; background: rgba(10, 132, 255, .22); border: 1.5px solid rgba(10, 132, 255, .8); pointer-events: none; }
.wn-snap.on { opacity: 1; }
.wn-div { position: absolute; z-index: 4; width: 8px; height: 56px; border-radius: 4px; background: rgba(255, 255, 255, .6); }

/* Switcher */
.wn-pan { position: absolute; z-index: 3; display: flex; gap: 14px; padding: 20px; border-radius: 22px; opacity: 0; scale: .94; pointer-events: none;
  background: rgba(30, 32, 40, .74); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.wn-pan.show { opacity: 1; scale: 1; }
.wn-cd { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 126px; padding: 8px; border-radius: 12px; border: 2px solid transparent; color: var(--notch-text-2); font: 600 11px/1 -apple-system, system-ui; }
.wn-cd .wn-thv { width: 100%; height: 70px; }
.wn-cd.on { border-color: var(--notch-blue); background: rgba(255, 255, 255, .08); color: var(--notch-text); }

@media (prefers-reduced-motion: no-preference) {
  .win.wn-w { transition: translate 640ms var(--ease-quint), width 640ms var(--ease-quint), height 640ms var(--ease-quint), opacity 300ms var(--ease-out),
    scale 520ms var(--ease-quint), filter 260ms, border-color 260ms, box-shadow 260ms; }
  .wn-tx i { animation: caret 1s steps(1) infinite; }
  .wn-chip { animation: wn-in 260ms var(--ease-out) both; }
  @keyframes wn-in { from { opacity: 0; translate: -50% 4px; } }
  .wn-dock i { transition: translate 160ms var(--ease-quint), scale 420ms var(--ease-quint), opacity 420ms; }
  .wn-dock i::after { transition: opacity 300ms; }
  .wn-pv { transition: opacity 180ms, scale 220ms var(--ease-quint), translate 220ms var(--ease-quint); }
  .wn-sp { transition: translate 560ms var(--ease-quint); }
  .wn-sp .wn-spv, .wn-sw i, .wn-sw i::after { transition: border-color 200ms, background 200ms, translate 200ms var(--ease-quint); }
  .wn-snap { transition: opacity 180ms; }
  .wn-div { transition: translate 640ms var(--ease-quint); }
  .wn-pan { transition: opacity 200ms, scale 260ms var(--ease-quint); }
  .wn-wheel { animation: wn-wheel-in 320ms var(--ease-expo) both; }
  .wn-wheel.out { animation: wn-wheel-out 220ms var(--ease-inout) both; }
  @keyframes wn-wheel-in { from { opacity: 0; scale: .4; } }
  @keyframes wn-wheel-out { to { opacity: 0; scale: .6; } }
  .wn-pop { animation: wn-pop 420ms var(--ease-expo); }
  @keyframes wn-pop { from { scale: .94; } }
}
@media (prefers-reduced-motion: reduce) {
  .wn-shake { animation: none; }
}