/**
 * RoccOS Window Chrome
 * Chunky borders, hard shadows, bold title bars, retro traffic lights
 */

/* ── Window ── */
.os-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 200px;
  background: var(--os-surface);
  border: 2px solid var(--os-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  pointer-events: auto;
  /* CSS fallback for no-GSAP — GSAP handles open animation when available */
  transition: opacity 0.15s;
}

.os-window.focused {
  border-color: var(--os-titlebar-bg);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--os-titlebar-bg);
}

.os-window.maximized {
  border-radius: 0;
  top: 0 !important; /* !important: required — override inline JS drag/resize styles */
  left: 0 !important; /* !important: required — override inline JS drag/resize styles */
  width: 100% !important; /* !important: required — override inline JS drag/resize styles */
  height: 100% !important; /* !important: required — override inline JS drag/resize styles */
}

.os-window.closing {
  animation: scaleOut 0.2s var(--ease-in-out) forwards;
}

.os-window.minimizing {
  transition: transform 0.3s var(--ease-in-out), opacity 0.3s var(--ease-in-out);
  transform: scale(0.2);
  opacity: 0;
}

/* ── Title Bar — solid, chunky ── */
.window-title-bar {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--sp-3);
  background: var(--os-titlebar-inactive);
  border-bottom: 2px solid var(--os-border);
  cursor: grab;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

.os-window.focused .window-title-bar {
  background: var(--os-titlebar-bg);
  border-bottom-color: var(--os-titlebar-border);
}

.window-title-bar:active {
  cursor: grabbing;
}

/* Traffic light buttons — bigger, bordered */
.window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-app-region: no-drag;
}

.window-btn {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: relative;
  transition: filter var(--duration-fast);
}

.window-btn:hover {
  filter: brightness(1.2);
}

/* Symbols show on hover of the title bar */
.window-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.window-title-bar:hover .window-btn::after {
  opacity: 1;
}

.window-btn-close {
  background: var(--os-btn-close);
}
.window-btn-close::after {
  content: '\00d7';
  color: rgba(0, 0, 0, 0.6);
}

.window-btn-minimize {
  background: var(--os-btn-minimize);
}
.window-btn-minimize::after {
  content: '\2013';
  color: rgba(0, 0, 0, 0.6);
}

.window-btn-maximize {
  background: var(--os-btn-maximize);
}
.window-btn-maximize::after {
  content: '\002B';
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
}

/* Inactive window buttons */
.os-window:not(.focused) .window-btn {
  background: var(--os-btn-inactive);
  border-color: rgba(0, 0, 0, 0.1);
}
.os-window:not(.focused) .window-btn::after,
.os-window:not(.focused) .window-btn:hover::after {
  opacity: 0;
}

/* Title text — uppercase, monospace */
.window-title {
  flex: 1;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--os-titlebar-text-inactive);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-window.focused .window-title {
  color: var(--os-titlebar-text);
}

/* ── Window Content ── */
.window-content {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* ── Resize Handles ── */
.window-resize {
  position: absolute;
  z-index: 1;
}

.window-resize-e {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.window-resize-s {
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

.window-resize-se {
  bottom: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.window-resize-sw {
  bottom: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.window-resize-ne {
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.window-resize-nw {
  top: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.window-resize-n {
  top: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

.window-resize-w {
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

/* ── Snap Preview Overlay ── */
.snap-preview {
  position: fixed;
  z-index: var(--z-overlay);
  background: var(--os-accent-muted);
  border: 2px dashed var(--os-accent);
  border-radius: var(--radius-lg);
  pointer-events: none;
  transition: left 0.15s var(--ease-out),
              top 0.15s var(--ease-out),
              width 0.15s var(--ease-out),
              height 0.15s var(--ease-out);
}

.snap-preview[hidden] {
  display: none;
}