/* ============================================================
   windows.css — Window Chrome, Titlebar, Traffic Lights
   macOS Desktop Website
   ============================================================ */

/* ── Base Window ────────────────────────────────────────────── */
.macos-window {
  position: absolute;
  display: none; /* shown via WindowManager.open() */
  flex-direction: column;
  width: 800px;
  height: 500px;
  min-width: 320px;
  min-height: 200px;

  border-radius: var(--window-radius);
  box-shadow: var(--window-shadow);
  background: var(--window-bg);
  overflow: hidden;

  /* Prevent text selection during drag */
  user-select: none;
  -webkit-user-select: none;
}

/* Disable selection during drag */
.macos-window.dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* Maximized state */
.macos-window.maximized {
  border-radius: 0;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--dock-height) - 20px) !important;
}

/* ── Titlebar ───────────────────────────────────────────────── */
.window-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--titlebar-height);
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border-window);
  cursor: default;
  padding: 0 12px;
}

.window-titlebar:hover {
  cursor: grab;
}

.window-titlebar:active {
  cursor: grabbing;
}

/* ── Traffic Lights ─────────────────────────────────────────── */
/*
 * All rules use body.macos-desktop-page for higher specificity than
 * Astra's global button styles, which stretch buttons into ovals.
 */
body.macos-desktop-page .window-traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 1;
}

body.macos-desktop-page .traffic-btn {
  /* Override Astra's button padding, min-height, border-radius, etc. */
  width: var(--btn-size) !important;
  height: var(--btn-size) !important;
  min-width: var(--btn-size) !important;
  min-height: var(--btn-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1 !important;
  font-size: 0 !important;      /* hide any text Astra injects */
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: filter 0.1s ease;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Expanded click target without affecting visual size */
body.macos-desktop-page .traffic-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

body.macos-desktop-page .btn-close    { background: var(--btn-close) !important; }
body.macos-desktop-page .btn-minimize { background: var(--btn-minimize) !important; }
body.macos-desktop-page .btn-maximize { background: var(--btn-maximize) !important; }

/* Show symbols on hover */
body.macos-desktop-page .window-traffic-lights:hover .btn-close::after,
body.macos-desktop-page .window-traffic-lights:hover .btn-minimize::after,
body.macos-desktop-page .window-traffic-lights:hover .btn-maximize::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}

body.macos-desktop-page .window-traffic-lights:hover .btn-close::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23621016' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.macos-desktop-page .window-traffic-lights:hover .btn-minimize::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5h7' stroke='%23995200' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.macos-desktop-page .window-traffic-lights:hover .btn-maximize::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.5V2.5h3M8 4.5V7.5H5' stroke='%23006500' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Window Title Text ──────────────────────────────────────── */
.window-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--titlebar-text);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 80px; /* don't overlap traffic lights */
}

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

/* ── Focus Ring for Accessibility ───────────────────────────── */
/* Suppress outline on programmatic / mouse focus — only show for
   keyboard navigation (:focus-visible + not from JS .focus()).
   The window-manager calls .focus() to track z-order, which
   triggers :focus-visible in some browsers. We suppress it and
   rely on content-level focus rings for keyboard a11y instead. */
.macos-window:focus,
.macos-window:focus-visible {
  outline: none;
}

/* ── Window Open Animation ──────────────────────────────────── */
@keyframes window-open {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.macos-window.opening {
  animation: window-open 0.18s ease-out forwards;
}

/* ── Genie Minimize / Restore ───────────────────────────────── */
/*
 * Transform-only (no clip-path) so animationend fires reliably
 * in all browsers. transform-origin: bottom center anchors the
 * collapse to the dock edge. scaleX narrows, scaleY collapses,
 * translateY slides toward the dock.
 */
@keyframes genie-out {
  0%   { transform: translateY(0)    scaleX(1)    scaleY(1);    opacity: 1;   }
  20%  { transform: translateY(8%)   scaleX(0.72) scaleY(0.86); opacity: 1;   }
  60%  { transform: translateY(50%)  scaleX(0.22) scaleY(0.52); opacity: 0.85; }
  85%  { transform: translateY(88%)  scaleX(0.06) scaleY(0.18); opacity: 0.4; }
  100% { transform: translateY(115%) scaleX(0)    scaleY(0);    opacity: 0;   }
}

@keyframes genie-in {
  0%   { transform: translateY(115%) scaleX(0)    scaleY(0);    opacity: 0;   }
  15%  { transform: translateY(88%)  scaleX(0.06) scaleY(0.18); opacity: 0.4; }
  40%  { transform: translateY(50%)  scaleX(0.22) scaleY(0.52); opacity: 0.85; }
  80%  { transform: translateY(8%)   scaleX(0.72) scaleY(0.86); opacity: 1;   }
  100% { transform: translateY(0)    scaleX(1)    scaleY(1);    opacity: 1;   }
}

.macos-window.genie-out {
  animation: genie-out 0.38s cubic-bezier(0.4, 0, 0.7, 1) forwards;
  pointer-events: none;
  transform-origin: bottom center;
}

.macos-window.genie-in {
  animation: genie-in 0.38s cubic-bezier(0.3, 0, 0.6, 1) forwards;
  pointer-events: none;
  transform-origin: bottom center;
}

/* ── Resize Handles ─────────────────────────────────────────── */
.resize-handle {
  position: absolute;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}

/* Edge handles — thin strips along each edge */
.resize-n  { top: -3px;    left: 10px;   right: 10px;  height: 7px; cursor: n-resize; }
.resize-s  { bottom: -3px; left: 10px;   right: 10px;  height: 7px; cursor: s-resize; }
.resize-w  { left: -3px;   top: 10px;    bottom: 10px; width: 7px;  cursor: w-resize; }
.resize-e  { right: -3px;  top: 10px;    bottom: 10px; width: 7px;  cursor: e-resize; }

/* Corner handles — sit on top of edges */
.resize-nw { top: -3px;    left: -3px;   width: 14px; height: 14px; cursor: nw-resize; }
.resize-ne { top: -3px;    right: -3px;  width: 14px; height: 14px; cursor: ne-resize; }
.resize-se { bottom: -3px; right: -3px;  width: 14px; height: 14px; cursor: se-resize; }
.resize-sw { bottom: -3px; left: -3px;   width: 14px; height: 14px; cursor: sw-resize; }

/* During resize: lock pointer events so content doesn't interfere */
body.is-resizing .macos-window * {
  pointer-events: none;
}
body.is-resizing .resize-handle {
  pointer-events: auto;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .macos-window.opening,
  .macos-window.genie-out,
  .macos-window.genie-in {
    animation: none;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .macos-window {
    /* Constrain to viewport; JS also clamps but CSS is the safety net */
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - var(--dock-height) - 28px) !important;
    left: 8px !important;
  }

  /* Disable drag cursor hint on mobile — dragging is less relevant */
  .window-titlebar {
    cursor: default !important;
  }
}