/* ============================================
   Window Management Styles
   ============================================ */

/* Window container */
.os-window {
  position: absolute;
  min-width: 320px;
  min-height: 200px;
  background: var(--win-bg);
  border: 2px outset var(--win-bg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
  /* Open animation */
  animation: win-open 0.18s ease-out;
}
.os-window.focused {
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5), 2px 2px 0 rgba(0,0,0,0.25);
}
@keyframes win-open {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.os-window.win-closing {
  animation: win-close 0.15s ease-in forwards;
  pointer-events: none;
}
@keyframes win-close {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(0.85) translateY(30px); opacity: 0; }
}
@keyframes win-minimize {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3) translateY(100vh); opacity: 0; }
}
.os-window.minimizing {
  animation: win-minimize 0.25s ease-in forwards;
  pointer-events: none;
}
.os-window.minimized {
  display: none;
}
.os-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 36px) !important;
  transition: top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease;
}

/* Restore-from-minimize animation */
@keyframes win-restore {
  0%   { transform: scale(0.3) translateY(60vh); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.os-window.restoring {
  animation: win-restore 0.2s ease-out;
}

/* Title bar */
.win-titlebar {
  height: 24px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: grab;
  flex-shrink: 0;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: bold;
  color: var(--titlebar-text);
  background: linear-gradient(90deg, var(--titlebar-active) 0%, #1084d0 60%, #20a0e8 100%);
}
.win-titlebar.inactive {
  background: linear-gradient(90deg, var(--titlebar-inactive) 0%, #a8a8a8 60%, #b4b4b4 100%);
}
.win-titlebar:active {
  cursor: grabbing;
}

.win-titlebar-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.win-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.win-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.win-btn {
  width: 18px;
  height: 16px;
  background: var(--win-bg);
  border: 2px outset var(--win-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  font-family: var(--font-system);
  padding: 0;
  line-height: 1;
  color: #000;
}
.win-btn:active {
  border-style: inset;
}
.win-btn-min::after { content: '_'; margin-top: -4px; }
.win-btn-max::after { content: '□'; font-size: 13px; margin-top: -1px; }
.win-btn-close::after { content: '×'; font-size: 15px; }

/* Window System Menu (title icon click) */
.win-sys-menu {
  position: absolute;
  top: 20px;
  left: 2px;
  background: var(--win-bg);
  border: 2px outset var(--win-light);
  z-index: 9999;
  min-width: 140px;
  font-size: 13px;
  padding: 2px 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.win-sys-item {
  padding: 3px 24px 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.win-sys-item:hover {
  background: var(--highlight);
  color: var(--highlight-text);
}

/* Menu bar inside window */
.win-menubar {
  height: 22px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--win-dark);
  font-size: 14px;
  flex-shrink: 0;
}
.win-menubar-item {
  padding: 2px 8px;
  cursor: pointer;
}
.win-menubar-item:hover {
  background: var(--highlight);
  color: var(--highlight-text);
}

/* Toolbar */
.win-toolbar {
  padding: 2px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--win-dark);
  font-size: 13px;
  flex-shrink: 0;
}
.win-toolbar-btn {
  padding: 2px 6px;
  background: var(--win-bg);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-system);
  font-size: 13px;
}
.win-toolbar-btn:hover {
  border: 1px outset var(--win-bg);
}
.win-address-bar {
  flex: 1;
  height: 20px;
  border: 2px inset var(--win-bg);
  padding: 0 4px;
  font-family: var(--font-system);
  font-size: 13px;
  background: #fff;
}

/* Window body / content */
.win-body {
  flex: 1;
  overflow: auto;
  border: 2px inset var(--win-bg);
  margin: 2px;
  background: #fff;
}
.win-body.no-border {
  border: none;
  margin: 0;
}

/* Status bar */
.win-statusbar {
  height: 20px;
  padding: 0 8px;
  border-top: 2px inset var(--win-bg);
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #404040;
  flex-shrink: 0;
}

/* Resize handle */
/* Loading/busy cursor */
body.busy, body.busy * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 2 L18 2 L18 4 L16 4 L16 6 L14 6 L14 8 L10 8 L10 6 L8 6 L8 4 L6 4 Z' fill='%23000'/%3E%3Cpath d='M6 22 L18 22 L18 20 L16 20 L16 18 L14 18 L14 16 L10 16 L10 18 L8 18 L8 20 L6 20 Z' fill='%23000'/%3E%3Crect x='6' y='4' width='2' height='2' fill='%23000'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%23000'/%3E%3Crect x='6' y='18' width='2' height='2' fill='%23000'/%3E%3Crect x='16' y='18' width='2' height='2' fill='%23000'/%3E%3C/svg%3E") 12 12, wait !important;
}

.win-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='14' y1='4' x2='4' y2='14' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='14' y1='4' x2='4' y2='14' stroke='%23808080' stroke-width='1' transform='translate(1,1)'/%3E%3Cline x1='14' y1='8' x2='8' y2='14' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='14' y1='8' x2='8' y2='14' stroke='%23808080' stroke-width='1' transform='translate(1,1)'/%3E%3Cline x1='14' y1='12' x2='12' y2='14' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='14' y1='12' x2='12' y2='14' stroke='%23808080' stroke-width='1' transform='translate(1,1)'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Snap preview ghost */
.snap-preview {
  position: absolute;
  background: rgba(0, 0, 128, 0.18);
  border: 2px solid rgba(0, 0, 128, 0.5);
  z-index: 1;
  pointer-events: none;
  display: none;
  animation: snap-fade-in 0.15s ease-out;
}
@keyframes snap-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}