/* windows.css — window chrome, traffic lights, resize zones */

#windows-layer { position: absolute; inset: 0; }

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-window);
  background: var(--window-bg);
  box-shadow: var(--shadow-window-unfocused);
  border: 0.5px solid var(--window-border);
  overflow: hidden;
  min-width: 200px;
  min-height: 120px;
  contain: layout paint;
}
.window.focused { box-shadow: var(--shadow-window); }
.window.opening, .window.closing { will-change: transform, opacity; }
.window.closing { opacity: 0; transform: scale(0.96); transition: transform 0.17s ease, opacity 0.17s ease; }
.window.dragging { will-change: left, top; }

.titlebar {
  position: relative;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--toolbar-bg);
  border-bottom: 0.5px solid var(--sep);
  z-index: 5;
  cursor: default;
  touch-action: none;
}
.window.transparent-title .titlebar { background: transparent; border-bottom-color: transparent; }

/* App chrome variants: sidebar (Finder-style) and toolbar (Safari-style) */
.titlebar-sidebar {
  flex: 0 0 52px;
  display: grid;
  grid-template-columns: var(--sidebar-w, 190px) 1fr;
  background: var(--toolbar-bg);
  border-bottom: 0.5px solid var(--sep);
  padding: 0;
  z-index: 6;
}
.titlebar-side-spacer {
  background: var(--sidebar-bg);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-right: 0.5px solid var(--sep);
  margin: -0.5px 0;
}
#screen.no-translucency .titlebar-side-spacer { background: var(--content-secondary-bg); }
.titlebar-sidebar .traffic-lights { z-index: 7; }
.toolbar-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  min-width: 0;
  overflow: hidden;
}
.titlebar-toolbar {
  flex: 0 0 52px;
  display: flex;
  background: var(--toolbar-bg);
  border-bottom: 0.5px solid var(--sep);
  padding: 0;
}
.titlebar-toolbar .toolbar-slot { padding-left: 78px; }
.window.chrome-sidebar .titlebar-sidebar .traffic-lights { left: 13px; }

.titlebar-title {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  opacity: 0.92;
  pointer-events: none;
  max-width: 60%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.titlebar-title .title-subtitle { font-weight: 400; opacity: 0.55; }
.window:not(.focused) .titlebar-title { opacity: 0.45; }

.window-body {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--window-bg);
}

/* ---------- traffic lights ---------- */
.traffic-lights {
  position: absolute;
  left: 13px; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  z-index: 6;
}
.tl {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}
.window:not(.focused) .tl { background: rgba(128, 128, 128, 0.35) !important; }
.window:not(.focused) .tl .tl-glyph { opacity: 0; }
.tl-close { background: var(--traffic-red); }
.tl-minimize { background: var(--traffic-yellow); }
.tl-zoom { background: var(--traffic-green); }

.tl-glyph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  color: rgba(77, 0, 0, 0.65);
  font-size: 9.5px; font-weight: 800; line-height: 1;
  transition: opacity 0.08s ease;
}
.traffic-lights:hover .tl-glyph { opacity: 1; }
.tl-close .tl-glyph::before { content: '×'; transform: translateY(-0.5px); font-size: 11px; }
.tl-minimize .tl-glyph::before { content: '–'; font-size: 10px; }
.tl-zoom .tl-glyph::before { content: ''; width: 6px; height: 6px; background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 35%, 35% 100%, 0 100%); }

/* dirty-state dot in close button (TextEdit unsaved) */
.window.dirty .tl-close { position: relative; }
.window.dirty .tl-close .tl-glyph { display: none; }
.window.dirty .tl-close::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(60, 0, 0, 0.55);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.window.dirty .traffic-lights:hover .tl-close .tl-glyph { display: flex; }
.window.dirty .traffic-lights:hover .tl-close::after { display: none; }

/* ---------- resize zones (kept inside the window box so overflow:hidden
   never clips them out of hit testing) ---------- */
.rz { position: absolute; z-index: 8; touch-action: none; }
.rz-n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.rz-e { right: 0; top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
.rz-w { left: 0; top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
.rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.window.zoomed .rz { display: none; }
body.resizing-e, body.resizing-w { cursor: ew-resize; }
body.resizing-n, body.resizing-s { cursor: ns-resize; }
body.resizing-ne, body.resizing-sw { cursor: nesw-resize; }
body.resizing-nw, body.resizing-se { cursor: nwse-resize; }
body.window-dragging { cursor: grabbing; }
body.window-dragging .window * { pointer-events: none; }
body.window-dragging .window.dragging * { pointer-events: auto; }

/* ---------- sheets & dialogs ---------- */
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: 40;
  border-radius: inherit;
}
.sheet-backdrop.app-level { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 9500; }

.sheet {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0 18px;
  padding: 18px 20px 14px;
  background: var(--panel-bg);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 0.5px solid var(--window-border);
  border-radius: 0 0 var(--radius-window) var(--radius-window);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  z-index: 41;
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 0.22s var(--ease-macos), opacity 0.22s ease;
}
.sheet.open { transform: translateY(0); opacity: 1; }
.sheet.centered {
  position: fixed;
  top: 50%; left: 50%;
  margin: 0; width: 320px;
  border-radius: var(--radius-popover);
  z-index: 9501;
  transform: translate(-50%, -50%) scale(0.96);
}
.sheet.centered.open { transform: translate(-50%, -50%) scale(1); }

.dlg-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.dlg-icon { width: 44px; height: 44px; flex: 0 0 44px; }
.dlg-icon svg { width: 100%; height: 100%; }
.dlg-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; white-space: pre-line; }
.dlg-message { font-size: 12px; color: var(--text-secondary); white-space: pre-line; line-height: 1.45; }
.dlg-input-row { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 2px; font-size: 12px; color: var(--text-secondary); }
.dlg-input { width: 100%; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg-btn {
  min-width: 72px;
  padding: 4px 14px;
  border-radius: 6px;
  background: var(--window-bg);
  border: 0.5px solid var(--field-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 12.5px;
  color: var(--text);
}
.dlg-btn:active { background: var(--fill); }
.dlg-btn.default {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
.dlg-btn.destructive { background: var(--sys-red); color: #fff; border-color: transparent; }
.save-panel { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.save-where { display: flex; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.save-where-path { color: var(--text); }

/* window-specific: about */
.about-body { align-items: center; padding: 20px 26px; gap: 6px; }
.about-laptop { margin: 4px 0 10px; }
.about-screen {
  width: 210px; height: 132px;
  background: linear-gradient(160deg, #3a3f4a, #14161b);
  border-radius: 8px 8px 3px 3px;
  border: 3px solid #b8bcc4;
  border-bottom-width: 8px;
  display: flex; align-items: center; justify-content: center;
}
.about-base { width: 250px; height: 8px; background: linear-gradient(#cfd3da, #9ba0a9); border-radius: 0 0 10px 10px; }
.about-base::after { content: ''; display: block; width: 60px; height: 3px; margin: 3px auto 0; background: #83878f; border-radius: 2px; }
.about-title { font-size: 21px; font-weight: 700; }
.about-sub { font-size: 12px; color: var(--text-secondary); }
.about-rows { width: 100%; margin-top: 8px; }
.about-row { display: flex; justify-content: space-between; padding: 4px 2px; font-size: 12px; border-bottom: 0.5px solid var(--sep); }
.about-row:last-child { border-bottom: none; }
.about-k { color: var(--text-secondary); }
.about-os { margin-top: 8px; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.about-os-v { color: var(--text-secondary); }
.about-buttons { display: flex; gap: 8px; margin-top: 8px; }
.about-update { margin-top: 10px; font-size: 11px; color: var(--text-secondary); background: var(--content-secondary-bg); border-radius: 6px; padding: 6px 10px; }

/* force quit */
.fq-title { font-size: 13px; font-weight: 600; padding: 12px 14px 4px; }
.fq-sub { font-size: 11px; color: var(--text-secondary); padding: 0 14px 8px; }
.fq-list { flex: 1; margin: 0 14px; border: 0.5px solid var(--sep); border-radius: 6px; background: var(--window-bg); }
.fq-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12.5px; }
.fq-row.sel { background: var(--accent); color: #fff; border-radius: 5px; }
.fq-icon { width: 18px; height: 18px; }
.fq-icon svg { width: 100%; height: 100%; }
.fq-note { font-size: 10.5px; opacity: 0.6; }
.fq-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; }