/* ============================================================
   Window Manager — chrome, dragging, tiling, snapping
   ============================================================ */
.windows-layer{
  position:absolute;top:var(--topbar-h);left:0;right:0;bottom:0;
  z-index:10;pointer-events:none;
}
.window{
  position:absolute;
  pointer-events:auto;
  display:flex;flex-direction:column;
  background:var(--bg-window);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-window);
  overflow:hidden;
  min-width:300px;min-height:180px;
  transition:box-shadow .15s var(--cubic);
  opacity:1;
}
.window.maximized{
  border-radius:0;border:0;
  width:100% !important;height:100% !important;
  top:0 !important;left:0 !important;
  transition:width .25s var(--ease-out),height .25s var(--ease-out),top .25s,left .25s;
}
.window.tiled-left{width:50% !important;height:100% !important;top:0 !important;left:0 !important;border-radius:0}
.window.tiled-right{width:50% !important;height:100% !important;top:0 !important;left:50% !important;border-radius:0}
.window.minimized{transform:scale(.4) translateY(200px);opacity:0;pointer-events:none}
.window.focused{box-shadow:0 16px 44px -6px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.45),0 0 0 1px var(--accent)}
.window:not(.focused) .titlebar{background:var(--bg-window-alt)}
/* window open/close animations */
.window[data-anim="open"]{animation:scaleIn .28s var(--ease-out)}
.window[data-anim="close"]{animation:scaleOut .22s var(--ease-out) forwards}

/* Titlebar */
.titlebar{
  height:36px;
  display:flex;align-items:center;
  padding:0 8px;
  background:var(--bg-window);
  flex-shrink:0;
  cursor:grab;
}
.titlebar:active{cursor:grabbing}
.titlebar .traffic-lights{
  display:flex;gap:6px;margin-right:10px;flex-shrink:0;
}
.titlebar .tl-btn{
  width:13px;height:13px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:filter .12s;
}
.titlebar .tl-btn svg{opacity:0;width:7px;height:7px;transition:opacity .12s}
.titlebar:hover .tl-btn svg{opacity:1}
.tl-btn.close{background:#ed333b}
.tl-btn.close svg{color:#5a0005}
.tl-btn.minimize{background:#f5c211}
.tl-btn.minimize svg{color:#5c3a00}
.tl-btn.maximize{background:#2ec27e}
.tl-btn.maximize svg{color:#0a4a26}
.titlebar .title-text{
  flex:1;min-width:0;font-weight:600;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;margin-right:0;
  color:var(--text);
}
.titlebar .menu-bar{
  display:flex;gap:12px;font-size:11px;color:var(--text-secondary);
}
.titlebar .menu-bar span:hover{color:var(--text)}

/* Motion settling: maximize/restore should animate size. Handled by transition */

/* Window body — hosts app content */
.window-body{
  flex:1;overflow:hidden;
  position:relative;
  background:var(--bg-window);
}

/* Snap preview overlay */
.snap-preview{
  position:absolute;
  background:rgba(233,84,32,.14);
  border:2px solid rgba(233,84,32,.4);
  border-radius:8px;
  pointer-events:none;
  z-index:99;
  animation:fadeIn .12s var(--cubic);
}

/* Resize handles — single pixel trick so they sit over window edges */
.rsz{position:absolute;z-index:2}
.rsz.n{top:-3px;left:8px;right:8px;height:6px;cursor:n-resize}
.rsz.s{bottom:-3px;left:8px;right:8px;height:6px;cursor:s-resize}
.rsz.e{top:8px;bottom:8px;right:-3px;width:6px;cursor:e-resize}
.rsz.w{top:8px;bottom:8px;left:-3px;width:6px;cursor:w-resize}
.rsz.nw{top:-4px;left:-4px;width:12px;height:12px;cursor:nw-resize}
.rsz.ne{top:-4px;right:-4px;width:12px;height:12px;cursor:ne-resize}
.rsz.sw{bottom:-4px;left:-4px;width:12px;height:12px;cursor:sw-resize}
.rsz.se{bottom:-4px;right:-4px;width:12px;height:12px;cursor:se-resize}