.os-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--window-bg);
  border: 1px solid var(--window-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--window-shadow);
  overflow: hidden;
  min-width: 320px;
  min-height: 200px;
  opacity: 1;
  transform: scale(1);
  transition: box-shadow 0.2s ease;
}

.os-window.focused {
  box-shadow: var(--window-shadow-focused);
}

.os-window.window-opening {
  animation: windowOpen 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.os-window.window-closing {
  animation: windowClose 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

.os-window.window-minimizing {
  animation: windowMinimize 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

.os-window.maximized {
  border-radius: 0 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.os-window.snapped {
  border-radius: 0 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes windowOpen {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes windowClose {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.85); }
}

@keyframes windowMinimize {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.4) translateY(100px); }
}

/* Title bar */
.window-titlebar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 8px;
  background: var(--titlebar-bg);
  cursor: default;
  flex-shrink: 0;
}

.os-window.focused .window-titlebar {
  background: var(--titlebar-active-bg);
}

.window-title {
  flex: 1;
  text-align: left;
  padding-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--titlebar-inactive-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

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

.window-controls {
  display: flex;
  gap: 0;
}

.window-controls button {
  width: 36px;
  height: 32px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--titlebar-inactive-text);
  transition: background 0.12s, color 0.12s;
}

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

.window-controls button svg {
  width: 10px;
  height: 10px;
}

.window-btn-close:hover {
  background: var(--danger);
  color: #ffffff;
}

.window-btn-minimize:hover,
.window-btn-maximize:hover {
  background: var(--bg-hover);
}

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

/* Resize handles - corners only */
.resize-handle {
  position: absolute;
  z-index: 10;
}

.resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: nwse-resize; }

/* Snap preview */
#snap-preview {
  position: fixed;
  background: var(--accent);
  opacity: 0;
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
  z-index: 9999;
}

#snap-preview.visible {
  opacity: 0.2;
}