/* ═══════════════════════════════════════════════════════════════════
   window.css — client-side decorations, Yaru window chrome, workspaces
   ═══════════════════════════════════════════════════════════════════ */

.workspace-viewport { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.workspace-track {
  position: absolute; inset: 0; display: flex;
  transition: transform 380ms var(--ease-out);
  will-change: transform;
}
.workspace-track.no-anim { transition: none; }
.workspace {
  position: relative; flex: none; width: 100%; height: 100%;
}
.workspace > * { pointer-events: auto; }

/* ── the window ─────────────────────────────────────────────────── */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--win-bg);
  color: var(--win-fg);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  transform-origin: top left;
  contain: layout paint style;
  --win-radius: var(--radius-window);
}
.win.focused { box-shadow: var(--shadow-win-focus); }
.win:focus, .win:focus-visible, .win-body:focus, .win-body:focus-visible { outline: none; }
.win.backdrop .headerbar { background: var(--headerbar-bg-backdrop); }
.win.backdrop .headerbar .hb-title { color: var(--win-fg-dim); }
.win.backdrop { --shadow-strength: .5; }

.win.animating { will-change: transform, opacity, left, top, width, height; }
.win.geom-anim { transition: left 220ms var(--ease-out), top 220ms var(--ease-out), width 220ms var(--ease-out), height 220ms var(--ease-out), border-radius 220ms var(--ease); }
.win.maximized, .win.fullscreen { border-radius: 0; }
.win.tiled { border-radius: var(--radius-window); }
.win.minimized { display: none; }

@keyframes win-open {
  from { opacity: 0; transform: scale(.92) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes win-close {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(.94) translateY(4px); }
}
.win.opening { animation: win-open 220ms var(--ease-out); }
.win.closing { animation: win-close 170ms var(--ease) forwards; pointer-events: none; }

/* dragging feel */
.win.dragging { transition: none !important; cursor: grabbing; }
.win.dragging .win-body { pointer-events: none; }
.win.resizing { transition: none !important; }

/* ── header bar (client side decoration) ────────────────────────── */
.headerbar {
  flex: none; display: flex; align-items: center; gap: 6px;
  min-height: 46px; padding: 6px 7px;
  background: var(--headerbar-bg);
  border-bottom: 1px solid var(--headerbar-border);
  border-radius: var(--win-radius) var(--win-radius) 0 0;
  transition: background var(--t-med) var(--ease);
  position: relative;
  z-index: 2;
}
.win.maximized .headerbar, .win.fullscreen .headerbar { border-radius: 0; }
.headerbar.flat { background: var(--view-bg); }
.headerbar .hb-start, .headerbar .hb-end { display: flex; align-items: center; gap: 4px; flex: none; }
.headerbar .hb-center {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 6px; overflow: hidden;
}
.headerbar .hb-title {
  font-size: 14px; font-weight: 700; color: var(--title-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: color var(--t-med);
}
.headerbar .hb-subtitle { font-size: 11.5px; color: var(--win-fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.headerbar.tall { min-height: 54px; }

/* window controls — Yaru circular buttons */
.win-controls { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.win-ctl {
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--btn-bg);
  color: var(--win-fg);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.win-ctl:hover { background: var(--btn-bg-hover); }
.win-ctl:active { background: var(--btn-bg-active); transform: scale(.94); }
.win-ctl .sym { opacity: .85; }
.win-ctl.close:hover { background: #E8532B; color: #fff; }
[data-color-scheme="dark"] .win-ctl.close:hover { background: #C0392B; }
.win.backdrop .win-ctl { opacity: .55; }

/* content shell */
.win-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  border-radius: 0 0 var(--win-radius) var(--win-radius);
}
.win-dialog-host { position: absolute; inset: 0; pointer-events: none; z-index: 60; border-radius: inherit; }
.win-dialog-host > * { pointer-events: auto; }

/* resize handles */
.win-resize { position: absolute; z-index: 50; }
.win-resize.n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.win-resize.s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.win-resize.w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.win-resize.e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.win-resize.nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.win-resize.ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.win-resize.sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.win-resize.se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.win.maximized .win-resize, .win.fullscreen .win-resize { display: none; }

/* urgency */
@keyframes win-urgent {
  0%, 100% { box-shadow: var(--shadow-win-focus); }
  50% { box-shadow: var(--shadow-win-focus), 0 0 0 3px var(--accent-bg); }
}
.win.urgent { animation: win-urgent 1.1s var(--ease-in-out) 3; }

/* ── snap preview ───────────────────────────────────────────────── */
.snap-preview {
  position: absolute;
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-window);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3), inset 0 0 40px rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  transition: left 140ms var(--ease-out), top 140ms var(--ease-out), width 140ms var(--ease-out), height 140ms var(--ease-out), opacity 120ms;
  pointer-events: none;
}
.snap-preview.appear { animation: fade-in 120ms var(--ease); }

/* ── alt-tab switcher ───────────────────────────────────────────── */
.switcher {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; border-radius: 18px;
  background: rgba(28, 28, 28, .88);
  backdrop-filter: blur(18px);
  box-shadow: var(--shell-shadow-lg), 0 0 0 1px var(--shell-border);
  animation: pop-in 140ms var(--ease-out);
  max-width: 84%;
}
.switcher-items { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.switcher-item {
  width: 92px; height: 92px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  position: relative; transition: background var(--t-fast);
}
.switcher-item img { width: 60px; height: 60px; }
.switcher-item.on { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.switcher-item .sw-count {
  position: absolute; bottom: 4px; right: 6px; font-size: 11px; color: #fff; opacity: .7;
}
.switcher-label { font-size: 14px; color: #fff; max-width: 460px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── window (in-app) common layout helpers ──────────────────────── */
.app-root { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--win-bg); }
.app-main { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.app-sidebar {
  width: 210px; flex: none; background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--view-bg); overflow: hidden; }
.toolbar {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border); background: var(--win-bg);
}
.statusbar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 12px;
  border-top: 1px solid var(--border); background: var(--win-bg);
  font-size: 12px; color: var(--win-fg-dim); min-height: 26px;
}
.sidebar-section { padding: 6px 8px 2px; font-size: 11.5px; font-weight: 500; color: var(--win-fg-faint); text-transform: uppercase; letter-spacing: .4px; }
.sidebar-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 32px; margin: 1px 6px; padding: 0 8px; border-radius: 7px;
  font-size: 13.5px; color: var(--win-fg); cursor: pointer;
  transition: background var(--t-fast);
}
.sidebar-row:hover { background: var(--hover); }
.sidebar-row.selected { background: var(--active); font-weight: 500; }
.sidebar-row .sym { color: var(--win-fg-dim); flex: none; }
.sidebar-row.selected .sym { color: var(--accent-bg); }
.sidebar-row .sr-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-row .sr-badge { font-size: 11px; color: var(--win-fg-faint); }
.sidebar-row.drop-target { background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-bg); }