/* ============================================================
   CHILI OS — desktop + window manager (layers over workspace.css)
   ============================================================ */
.os-desktop{position:relative;flex:1;min-height:0;overflow:hidden}
.os-home{position:absolute;inset:0;overflow-y:auto;padding:var(--ws-s8) var(--ws-s8) var(--ws-s12)}
.os-home.dimmed{filter:saturate(.7) brightness(.86);pointer-events:none;transition:filter .2s}

/* window */
.os-win{position:absolute;display:flex;flex-direction:column;background:var(--ws-surface);border:1px solid var(--ws-border-strong);border-radius:var(--ws-r-lg);box-shadow:var(--ws-shadow-md);overflow:hidden;min-width:340px;min-height:220px;transition:box-shadow .18s var(--ws-ease),border-color .18s var(--ws-ease)}
/* Inactive windows recede; the focused one lifts with a stronger shadow + accent edge. */
.os-win.active{border-color:color-mix(in srgb,var(--ws-accent) 55%,var(--ws-border-strong));box-shadow:var(--ws-shadow-lg)}
.os-win.snapping{transition:left .14s var(--ws-ease),top .14s var(--ws-ease),width .14s var(--ws-ease),height .14s var(--ws-ease)}
.os-win.closing{transition:opacity .12s,transform .12s;opacity:0;transform:scale(.97)}
/* Entrance (open / restore-from-taskbar) */
.os-win.os-in{animation:osWinIn .17s var(--ws-ease)}
@keyframes osWinIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
/* Minimize shrink toward the taskbar */
.os-win.os-out{transition:opacity .15s var(--ws-ease),transform .15s var(--ws-ease);opacity:0;transform:scale(.9) translateY(14px);transform-origin:bottom center;pointer-events:none}
.os-bar{height:38px;flex-shrink:0;display:flex;align-items:center;gap:var(--ws-s3);padding:0 var(--ws-s2) 0 var(--ws-s3);background:var(--ws-surface-2);border-bottom:1px solid var(--ws-border);cursor:default;user-select:none}
.os-win.active .os-bar{background:color-mix(in srgb,var(--ws-accent) 7%,var(--ws-surface-2))}
.os-bar .wi{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:14px;flex-shrink:0;background:var(--ws-accent-bg)}
.os-bar .wt{font-size:var(--ws-fs-13);font-weight:var(--ws-fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.os-bar a.pop{color:var(--ws-text-3);display:grid;place-items:center;width:22px;height:22px;border-radius:6px}
.os-bar a.pop:hover{background:var(--ws-surface-3);color:var(--ws-text)}
.os-bar a.pop svg{width:13px;height:13px;stroke-width:2}
.os-ctrls{display:flex;gap:4px}
.os-ctrls button{width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:var(--ws-text-3);cursor:pointer;display:grid;place-items:center;transition:all var(--ws-dur)}
.os-ctrls button:hover{background:var(--ws-surface-3);color:var(--ws-text)}
.os-ctrls button.close:hover{background:var(--ws-down-bg);color:var(--ws-down)}
.os-ctrls button.copied{color:var(--ws-up)}
.os-ctrls button svg{width:13px;height:13px;stroke-width:2}
.os-body{flex:1;overflow:auto;min-height:0;position:relative}
.os-body iframe{width:100%;height:100%;border:0;display:block;background:var(--ws-bg)}
.os-body .os-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ws-text-3);font-size:var(--ws-fs-13);pointer-events:none}
/* resize handles — all four edges + corners */
.os-re{position:absolute;z-index:3}
.os-re.n{top:-3px;left:10px;right:10px;height:8px;cursor:ns-resize}
.os-re.s{bottom:-3px;left:10px;right:10px;height:8px;cursor:ns-resize}
.os-re.e{right:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize}
.os-re.w{left:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize}
.os-re.ne{top:-3px;right:-3px;width:15px;height:15px;cursor:nesw-resize}
.os-re.nw{top:-3px;left:-3px;width:15px;height:15px;cursor:nwse-resize}
.os-re.sw{bottom:-3px;left:-3px;width:15px;height:15px;cursor:nesw-resize}
.os-re.se{bottom:-3px;right:-3px;width:15px;height:15px;cursor:nwse-resize}
.os-re.se::after{content:'';position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-right:2px solid var(--ws-text-3);border-bottom:2px solid var(--ws-text-3);opacity:.5}
/* while resizing, let iframes pass mouse events to the window manager */
.os-desktop.os-resizing iframe{pointer-events:none}

/* snap ghost preview */
.os-ghost{position:absolute;background:var(--ws-accent-bg);border:1.5px solid var(--ws-accent);border-radius:var(--ws-r-md);z-index:9998;display:none;pointer-events:none;transition:all .1s var(--ws-ease)}

/* dock open-indicator */
.ws-rb .os-dot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--ws-accent);opacity:0;transition:opacity .15s}
.ws-rb.os-open .os-dot{opacity:1}

/* taskbar (minimized windows) */
.os-taskbar{position:absolute;left:0;right:0;bottom:0;display:none;gap:var(--ws-s2);padding:var(--ws-s2) var(--ws-s4);background:color-mix(in srgb,var(--ws-surface) 82%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--ws-border);z-index:9997}
.os-taskbar.show{display:flex}
.os-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--ws-r-pill);background:var(--ws-surface-2);border:1px solid var(--ws-border);color:var(--ws-text-2);font:var(--ws-fw-med) var(--ws-fs-12)/1 var(--ws-font-ui);cursor:pointer;transition:all var(--ws-dur)}
.os-chip:hover{color:var(--ws-text);border-color:var(--ws-border-strong);transform:translateY(-1px)}
.os-chip .ci{font-size:13px}

/* Window title-bar context menu (right-click) */
.os-ctxmenu{position:absolute;z-index:10000;min-width:170px;padding:5px;background:var(--ws-surface);border:1px solid var(--ws-border-strong);border-radius:var(--ws-r-md);box-shadow:var(--ws-shadow-lg);display:flex;flex-direction:column;gap:1px}
.os-ctx-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:var(--ws-r-sm,6px);background:transparent;border:0;color:var(--ws-text);font:var(--ws-fw-med) var(--ws-fs-13)/1.1 var(--ws-font-ui);cursor:pointer}
.os-ctx-item:hover{background:var(--ws-accent-bg);color:var(--ws-text)}
.os-ctx-sep{height:1px;margin:4px 6px;background:var(--ws-border)}

/* Mission Control (Exposé) — switch/restore open windows from a card grid */
.os-expose{position:absolute;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ws-s4);padding:var(--ws-s5,20px);background:color-mix(in srgb,var(--ws-surface) 60%,transparent);backdrop-filter:blur(16px);opacity:0;transition:opacity .14s var(--ws-ease)}
.os-expose.show{opacity:1}
.os-expose-hint{font:var(--ws-fw-med) var(--ws-fs-12)/1.2 var(--ws-font-ui);color:var(--ws-text-3);letter-spacing:.01em}
.os-expose-hint b{color:var(--ws-text-2);font-weight:var(--ws-fw-semi)}
.os-expose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--ws-s3);width:min(900px,88%);max-height:74%;overflow:auto;padding:2px}
.os-xcard{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:var(--ws-s4);background:var(--ws-surface-2);border:1px solid var(--ws-border);border-radius:var(--ws-r-lg);color:var(--ws-text);cursor:pointer;text-align:left;transition:transform .12s var(--ws-ease),border-color .12s var(--ws-ease),box-shadow .12s var(--ws-ease)}
.os-xcard:hover{transform:translateY(-2px);border-color:var(--ws-border-strong)}
.os-xcard.sel{border-color:var(--ws-accent);box-shadow:var(--ws-shadow-lg),0 0 0 2px var(--ws-accent-bg);transform:translateY(-2px)}
.os-xcard .xc-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;background:var(--ws-accent-bg)}
.os-xcard .xc-t{font:var(--ws-fw-semi) var(--ws-fs-13)/1.2 var(--ws-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.os-xcard .xc-sub{font-size:11px;color:var(--ws-text-3)}

@media(max-width:760px){.os-win{left:8px!important;top:8px!important;width:calc(100vw - 72px)!important;height:calc(100vh - 80px)!important}.os-re{display:none}}

/* Honor reduced-motion: keep windows snappy but drop the easing/animation. */
@media (prefers-reduced-motion:reduce){
  .os-win,.os-win.active,.os-win.snapping,.os-win.closing,.os-win.os-out,.os-home.dimmed,.os-ghost,.os-chip,.os-expose,.os-xcard{transition:none}
  .os-win.os-in{animation:none}
  .os-xcard:hover,.os-xcard.sel{transform:none}
}
