/* THE GOD TERMINAL — window chrome (js/windows.js).
 * Lit glass body with scanline texture, HUD corner brackets, a draggable title bar,
 * an obvious close button, focus/drag/closing states and the dim backdrop for tools.
 * Position comes from the `translate` property; motion animates `transform`. */

.win {
  --win-edge: color-mix(in srgb, var(--line-bright) 58%, transparent);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  color: var(--text);
  border: 1px solid var(--win-edge);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 3px),
    color-mix(in srgb, var(--panel-strong) 84%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 calc(28px * var(--glow-k)) calc(-6px * var(--glow-k)) var(--glow),
    0 24px 50px -16px rgba(0, 0, 0, 0.9),
    inset 0 0 calc(40px * var(--glow-k)) calc(-16px * var(--glow-k)) var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  transition: scale 200ms cubic-bezier(.2, 1.5, .4, 1), box-shadow 200ms ease, border-color 200ms ease;
  /* Every window keeps its own compositor layer, so one scene repainting never re-rasters its
   * neighbours (six busy popups: ≈30–40 → ≈45 fps). Nothing inside a window is position: fixed. */
  will-change: transform;
}
.win.is-focused { --win-edge: var(--line-bright); }
.win.is-dragging {
  scale: 1.025;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 calc(40px * var(--glow-k)) calc(-4px * var(--glow-k)) var(--glow),
    0 40px 80px -18px rgba(0, 0, 0, 0.95),
    inset 0 0 calc(40px * var(--glow-k)) calc(-16px * var(--glow-k)) var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.win.is-dragging .win-bar { cursor: grabbing; }
.win.is-closing { pointer-events: none; }

/* ───────── title bar ───────── */
.win-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding-left: 0.85rem;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 11%, transparent),
    color-mix(in srgb, var(--text) 3%, transparent));
  cursor: grab;
  touch-action: none;
}
/* Lit seam under the bar: bright in the middle, fading to the edges. */
.win-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright) 18%, var(--line-bright) 62%, transparent);
  opacity: 0.7;
  pointer-events: none;
}
.win-icon {
  flex: none;
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--glow));
}
.win-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}

/* Close: a full-height 44px hit area in the corner; the × is drawn with two bars. */
.win-close.btn {
  flex: none;
  align-self: stretch;
  width: 2.9rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 calc(var(--radius) - 1px) 0 0;
  background: transparent;
  color: var(--text-bright);
  transition: transform 140ms cubic-bezier(.2, 1.7, .4, 1), background-color 140ms, color 140ms, box-shadow 160ms;
}
.win-close i {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  pointer-events: none;
  transition: transform 160ms cubic-bezier(.2, 1.6, .4, 1);
}
.win-close i::before,
.win-close i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.3rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 calc(8px * var(--glow-k)) var(--glow);
  translate: -50% -50%;
  rotate: 45deg;
}
.win-close i::after { rotate: -45deg; }
.win-close.btn:hover {
  border-left-color: transparent;
  background: color-mix(in srgb, var(--bad) 72%, transparent);
  color: #fff;
  box-shadow: 0 0 24px -2px var(--bad), inset 0 0 12px rgba(255, 255, 255, 0.22);
}
.win-close.btn:hover i { transform: rotate(90deg); }
.win-close.btn:hover i::before,
.win-close.btn:hover i::after { box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
.win-close.btn.is-pressed,
.win-close.btn:active {
  transform: scale(1.16);
  border-left-color: transparent;
  background: var(--bad);
  color: #fff;
  box-shadow: 0 0 32px 2px var(--bad), inset 0 0 14px rgba(255, 255, 255, 0.35);
}
.win-close.btn:focus-visible { outline-offset: -3px; }

/* ───────── body ───────── */
.win-body {
  position: relative;
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
}

/* Entrance scanline: overlays the body cell; its bright bottom edge sweeps down. */
.win-sweep {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent calc(100% - 3.5rem),
    color-mix(in srgb, var(--glow) 45%, transparent) calc(100% - 3px),
    var(--text-bright) calc(100% - 2px));
}

/* HUD corner brackets just outside the frame. */
.win-hud {
  --hb: 14px;
  --ht: 2px;
  --hc: var(--line-bright);
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--hc), var(--hc)) left top / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) left top / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) right top / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) right top / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--ht) var(--hb);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 calc(5px * var(--glow-k)) var(--glow));
  opacity: 0.55;
  transition: opacity 200ms;
}
.win.is-focused .win-hud { opacity: 1; }

/* Flash overlay: white (or --flash) frame + wash, driven by opacity only. */
.win-flash {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--flash, #fff);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--flash, #fff) 16%, transparent);
  box-shadow: 0 0 22px -2px var(--flash, #fff), inset 0 0 28px -8px var(--flash, #fff);
  opacity: 0;
  pointer-events: none;
}

/* ───────── tool windows ───────── */
.win-dim {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.76));
}

/* ───────── mobile ───────── */
@media (max-width: 599px) {
  .win {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* No blur on phones, so the glass goes opaque: stacked windows mustn't show through. */
    background:
      radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 3px),
      linear-gradient(var(--panel-strong), var(--panel-strong)),
      var(--bg);
  }
  .win-bar { gap: 0.5rem; padding-left: 0.7rem; }
  /* Long titles wrap to two lines rather than vanish behind an ellipsis. */
  .win-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0.35rem 0;
    white-space: normal;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }
  .win-body { padding: 0.8rem 0.8rem 0.9rem; }
}