/* ===== KevinOS · 窗口系统 =====
 * 规范 §3.4 / §3.3：窗口与对话框一律实心（只有 Aurora 材质允许半透明），
 * 圆角统一 lg(16)，聚焦/失焦阴影分级，只保留左侧交通灯。
 */
.windows-layer { position: absolute; inset: 0; z-index: var(--z-window); pointer-events: none; }

.window {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 360px; min-height: 240px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: none;                           /* 深色壁纸上 1px 浅色描边会形成白边，改用轮廓阴影（验收 A8） */
  box-shadow: var(--outline-window), var(--shadow-4);      /* 失焦 */
  overflow: hidden;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform, opacity, width, height;
}
.window.focused { box-shadow: var(--outline-window), var(--shadow-window); }   /* 聚焦；不加彩色描边 */

/* 只有 Aurora 材质允许窗口半透明。
 * 自动模式（auto）在深色下等价于 Aurora，所以用 :is() 把两种情形一起写，
 * 否则浅色→深色切换时窗口不会跟着变。 */
/* 极光下窗口是半透明玻璃，必须有 1px 描边才有边界（实心材质不要一起加，验收 F6） */
html:is([data-material="aurora"], [data-theme="dark"][data-material="auto"]) .window {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--shadow-4), var(--glass-glow);
}
html:is([data-material="aurora"], [data-theme="dark"][data-material="auto"]) .window.focused {
  box-shadow: var(--glass-edge), var(--shadow-window), var(--glass-glow);
}

/* 打开 / 关闭 / 最小化动画 —— 280ms，只有"出现"用 spring */
.window.anim-open { animation: winOpen var(--dur-slow) var(--ease-spring) both; }
@keyframes winOpen {
  0% { opacity: 0; transform: scale(.9) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.window.anim-close { animation: winClose var(--dur-base) var(--ease-exit) forwards; pointer-events: none; }
@keyframes winClose {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.94) translateY(10px); }
}
.window.anim-min { animation: winMin var(--dur-base) var(--ease-exit) forwards; pointer-events: none; }
@keyframes winMin {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.4) translateY(120px); }
}
.window.anim-restore { animation: winOpen var(--dur-slow) var(--ease-spring) both; }
.window.anim-max { transition: width var(--dur-slow) var(--ease-standard), height var(--dur-slow) var(--ease-standard), top var(--dur-slow) var(--ease-standard), left var(--dur-slow) var(--ease-standard), border-radius var(--dur-slow) var(--ease-standard); }
.window.dragging { transition: none !important; }
.window.resizing { transition: none !important; }

.window.minimized { display: none; }

/* ---- 标题栏 ---- */
.win-titlebar {
  height: var(--h-titlebar); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--divider);
  cursor: default;
}
.win-titlebar .wt-ico { width: var(--size-titlebar-icon); height: var(--size-titlebar-icon); border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--text-on-accent); }
.win-titlebar .wt-ico svg { width: 70%; height: 70%; fill: currentColor; }
.win-titlebar .app-ico.sm { width: var(--size-titlebar-icon); height: var(--size-titlebar-icon); border-radius: var(--radius-xs); }
.win-titlebar .app-ico.sm svg { width: 70%; height: 70%; }
.win-title { flex: 1; font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-sub { font-size: var(--fs-12); color: var(--text-tertiary); font-weight: var(--fw-regular); margin-left: var(--space-2); }

/* macOS 交通灯按钮（色值走语义令牌，不再自写一套，修 P5） */
.win-traffic { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-1); }
.traffic {
  width: 12px; height: 12px; border-radius: var(--radius-full); padding: 0;
  border: none; cursor: pointer; position: relative;
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.traffic svg { width: 8px; height: 8px; fill: rgba(0, 0, 0, .55); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
/* 交通灯是"非文字图形"：用高饱和、不随主题变的专用令牌（验收 A12）。
 * 不能复用 --danger/--warning/--success —— 那是为浅底文字优化的低明度色，
 * 做 12px 圆点会变成暗酒红/暗棕/暗墨绿。 */
.traffic.close { background: var(--traffic-close); }
.traffic.minimize { background: var(--traffic-min); }
.traffic.maximize { background: var(--traffic-max); }
.win-titlebar:hover .traffic svg { opacity: 1; }
.traffic:active { transform: scale(.85); }

/* 右侧 .win-controls 已按规范删除（修 P4：同一窗口只保留一套关闭控件） */

/* ---- 内容区 ---- */
.win-body { flex: 1; position: relative; overflow: hidden; background: var(--surface); display: flex; }
.win-body > * { flex: 1; min-width: 0; min-height: 0; }

/* ---- 缩放手柄 ---- */
.rs { position: absolute; z-index: 5; }
.rs-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rs-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rs-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rs-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rs-nw { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.rs-ne { right: -3px; top: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.rs-sw { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.rs-se { right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: nwse-resize; }

/* ---- 吸附预览 ---- */
.snap-preview {
  position: absolute; z-index: 90; pointer-events: none;
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(6, 11, 24, .28), 0 0 30px var(--accent-glow);
  transition: all var(--dur-base) var(--ease-standard);
}

/* ---- 通用对话框（圆角与窗口一致，修 P13）---- */
.os-dialog-layer { position: absolute; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; }
.os-dialog-veil {
  position: absolute; inset: 0; background: rgba(6, 11, 24, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fadeIn var(--dur-base) var(--ease-standard) both;
}
.os-dialog {
  position: relative; width: min(400px, calc(100vw - 40px)); border-radius: var(--radius-lg);
  background: var(--surface); border: none; box-shadow: var(--outline-window), var(--shadow-window);
  padding: var(--space-5); animation: dlgIn var(--dur-slow) var(--ease-spring) both; overflow: hidden;
}
.os-dialog.leaving { animation: winClose var(--dur-base) var(--ease-exit) forwards; }
@keyframes dlgIn { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dlg-title { font-size: var(--fs-16); font-weight: var(--fw-bold); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.dlg-msg { font-size: var(--fs-13); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); }
.dlg-input {
  width: 100%; height: var(--h-input); padding: 0 var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-5);
  background: var(--surface-sunken); border: 1px solid var(--border-strong); font-size: var(--fs-14);
}
.dlg-input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---- 按钮 ---- */
.btn {
  height: var(--h-btn-md); padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--hover-overlay); }
.btn:active { background: var(--pressed-overlay); transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { background: var(--accent-active); }
.btn.danger { background: var(--danger-solid); color: var(--danger-on-solid); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }