/* ================= Window chrome ================= */

#windows-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.window {
  position: absolute;
  border-radius: 11px;
  background: var(--window-bg);
  box-shadow: var(--shadow-win);
  display: flex; flex-direction: column;
  pointer-events: auto;
  min-width: 180px; min-height: 100px;
  outline: none;
}
.window.blurred { box-shadow: var(--shadow-win-blur); }
.window.opening { animation: win-open 0.22s cubic-bezier(0.24, 0.9, 0.32, 1.1); }
@keyframes win-open { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
.window.closing { animation: win-close 0.16s ease-in forwards; }
@keyframes win-close { to { opacity: 0; transform: scale(0.88); } }
.window.zooming { transition: left 0.32s cubic-bezier(0.3, 0.9, 0.32, 1), top 0.32s cubic-bezier(0.3, 0.9, 0.32, 1), width 0.32s cubic-bezier(0.3, 0.9, 0.32, 1), height 0.32s cubic-bezier(0.3, 0.9, 0.32, 1); }
.window.shaking { animation: win-shake 0.3s; }
@keyframes win-shake { 0%,100% { margin-left: 0; } 25% { margin-left: -7px; } 75% { margin-left: 7px; } }

/* vibrancy variants */
.window.vibrant-side .win-sidebar {
  background: var(--window-side);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
}
.window.vibrant-full {
  background: color-mix(in srgb, var(--window-bg) 82%, transparent);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
}

/* ---------- Title bar ---------- */
.titlebar {
  height: 28px; flex: none;
  display: flex; align-items: center;
  border-radius: 11px 11px 0 0;
  background: var(--titlebar-bg);
  box-shadow: 0 0.5px 0 var(--window-border);
  position: relative;
}
.window.no-titlebar-bg .titlebar { background: transparent; box-shadow: none; }
.window.toolbar-style .titlebar { height: 52px; }
.window.toolbar-style.compact-toolbar .titlebar { height: 38px; }

.titlebar .tb-title {
  position: absolute; left: 80px; right: 80px;
  text-align: center; font-size: 13px; font-weight: 700;
  color: var(--titlebar-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.window.blurred .tb-title { color: var(--titlebar-text-dim); }
.titlebar .tb-proxy-icon { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; display: inline-block; }
.titlebar .tb-proxy-icon svg { width: 100%; height: 100%; }

/* Traffic lights */
.traffic-lights { display: flex; gap: 8px; padding: 0 8px 0 9px; align-items: center; flex: none; z-index: 3; }
.tl {
  width: 12px; height: 12px; border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tl-close { background: var(--tl-red); box-shadow: inset 0 0 0 0.5px var(--tl-red-b); }
.tl-min   { background: var(--tl-yellow); box-shadow: inset 0 0 0 0.5px var(--tl-yellow-b); }
.tl-zoom  { background: var(--tl-green); box-shadow: inset 0 0 0 0.5px var(--tl-green-b); }
.window.blurred .tl:not(:hover) { background: var(--tl-off); box-shadow: inset 0 0 0 0.5px var(--tl-off-b); }
.window.blurred .traffic-lights:hover .tl-close { background: var(--tl-red); box-shadow: inset 0 0 0 0.5px var(--tl-red-b); }
.window.blurred .traffic-lights:hover .tl-min { background: var(--tl-yellow); box-shadow: inset 0 0 0 0.5px var(--tl-yellow-b); }
.window.blurred .traffic-lights:hover .tl-zoom { background: var(--tl-green); box-shadow: inset 0 0 0 0.5px var(--tl-green-b); }
.tl.tl-disabled { background: var(--tl-off) !important; box-shadow: inset 0 0 0 0.5px var(--tl-off-b) !important; }

.tl svg { width: 8px; height: 8px; opacity: 0; }
.traffic-lights:hover .tl:not(.tl-disabled) svg { opacity: 1; }
.tl-close svg { stroke: #750d05; }
.tl-min svg { stroke: #995700; }
.tl-zoom svg { fill: #0d5b13; stroke: none; }
.tl:active { filter: brightness(0.82); }

/* document-edited dot in close button */
.tl-close .edit-dot {
  position: absolute; width: 4.5px; height: 4.5px; border-radius: 50%;
  background: #750d05; opacity: 0; pointer-events: none;
}
.window.doc-edited .tl-close .edit-dot { opacity: 1; }
.window.doc-edited .traffic-lights:hover .edit-dot { opacity: 0; }
.window.doc-edited.blurred .traffic-lights:not(:hover) .edit-dot { background: #8e8e8e; }

/* toolbar content inside titlebar */
.tb-tools { display: flex; align-items: center; gap: 6px; flex: 1; height: 100%; padding-right: 10px; min-width: 0; }
.tool-btn {
  width: 28px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); flex: none;
}
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn:hover { background: var(--hover-fill); }
.tool-btn:active { background: var(--active-fill); }
.tool-btn.disabled { opacity: 0.35; pointer-events: none; }
.window.blurred .tool-btn { opacity: 0.5; }
.tb-flex { flex: 1; }

/* ---------- Body ---------- */
.win-body {
  flex: 1; display: flex; min-height: 0; position: relative;
  border-radius: 0 0 11px 11px;
  overflow: hidden;
  color: var(--text);
}
.win-sidebar { flex: none; overflow-y: auto; }
.win-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* sidebar window layout: sidebar goes full height, titlebar overlays */
.window.sidebar-full { background: transparent; }
.window.sidebar-full .win-frame { display: flex; flex: 1; min-height: 0; border-radius: 11px; overflow: hidden; }
.window.sidebar-full .side-col {
  display: flex; flex-direction: column; flex: none;
  background: var(--window-side);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
}
.window.sidebar-full .main-col { display: flex; flex-direction: column; flex: 1; min-width: 0; background: var(--window-bg); }
.window.sidebar-full .side-col .titlebar, .window.sidebar-full .main-col .titlebar { background: transparent; box-shadow: none; }
.window.sidebar-full .main-col .titlebar { box-shadow: 0 0.5px 0 var(--window-border); }

/* ---------- Resize handles ---------- */
.rz { position: absolute; z-index: 40; }
.rz-n { top: -4px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.rz-s { bottom: -4px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.rz-e { right: -4px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.rz-w { left: -4px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.rz-ne { top: -5px; right: -5px; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-nw { top: -5px; left: -5px; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-se { bottom: -5px; right: -5px; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-sw { bottom: -5px; left: -5px; width: 12px; height: 12px; cursor: nesw-resize; }
.window.no-resize .rz { display: none; }

/* generic in-window list/table styles shared by apps */
.win-statusbar {
  flex: none; height: 23px; font-size: 11px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--window-border);
}