/* ============================================================
   CATBACK windows.css — retro OS windows + right-edge chips.
   Owns: #window-layer, .cbwin*, #win-chips / .win-chip*.
   A tiny 90s OS floating in the dark terminal world: --ink-3
   bodies, 2px --forest-2 borders, hard 4px pixel drop shadows,
   subtle scanlines. All colors come from tokens.css.
   ============================================================ */

#window-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-windows);
  pointer-events: none; /* windows re-enable their own targets */
}

/* ---- window shell ------------------------------------------ */
.cbwin {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  min-width: 220px;
  max-width: calc(100vw - 8px);
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, var(--scanline) 2px 4px),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: var(--px) solid var(--forest-2);
  /* hard pixel drop shadow — no blur — plus a soft world glow */
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.65), 0 0 14px var(--glow-soft);
  color: var(--terminal-soft);
  font-family: var(--font-term);
  will-change: transform;
}
.cbwin[data-focused="true"] {
  border-color: var(--moss);
  box-shadow:
    4px 4px 0 0 rgba(0, 0, 0, 0.65),
    0 0 20px var(--glow-soft),
    0 0 6px var(--glow-soft);
}

.cbwin-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* open pop — full motion only (positioning transform lives on
   .cbwin, so the animation transform on .cbwin-frame is safe) */
body[data-motion="full"] .cbwin-frame {
  animation: cbwin-pop 160ms var(--ease-snap);
}
@keyframes cbwin-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ---- titlebar ----------------------------------------------- */
.cbwin-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding-left: 10px;
  background: linear-gradient(180deg, var(--forest-2), var(--forest));
  border-bottom: var(--px) solid var(--forest-2);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* pointer-event dragging on touch */
}
.cbwin[data-dragging="true"] .cbwin-titlebar { cursor: grabbing; }
.cbwin[data-dragging="true"] {
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.65), 0 0 22px var(--glow-soft);
}

.cbwin-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--terminal);
  text-shadow: 0 0 8px var(--glow-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* classic 90s drag stripes filling the bar */
.cbwin-stripes {
  flex: 1;
  align-self: stretch;
  min-width: 12px;
  margin: 9px 4px;
  background: repeating-linear-gradient(
    0deg,
    rgba(59, 240, 125, 0.26) 0 2px,
    transparent 2px 5px
  );
}

.cbwin-close {
  flex: none;
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink-3);
  color: var(--alert);
  border: 0;
  border-left: var(--px) solid var(--forest-2);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
/* invisible padding brings the hit target to 40x40 */
.cbwin-close::after { content: ''; position: absolute; inset: -4px; }
.cbwin-close:hover,
.cbwin-close:focus-visible { background: var(--alert); color: var(--ink); }

/* ---- body / statusline -------------------------------------- */
.cbwin-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  font-size: 18px;
  line-height: 1.3;
}

.cbwin-statusline {
  flex: none;
  border-top: var(--px) solid var(--forest-2);
  padding: 6px 10px;
  background: var(--ink-2);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- mobile (<720px): full-width bottom sheet ---------------- */
.cbwin[data-sheet="true"] {
  left: 0;
  right: 0;
  top: auto;
  bottom: var(--ticker-h, 0px); /* never covers the ticker reserve */
  min-width: 0;
  max-width: none;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.55), 0 0 18px var(--glow-soft);
}
.cbwin[data-sheet="true"] .cbwin-frame { max-height: min(65vh, 480px); }
.cbwin[data-sheet="true"] .cbwin-titlebar { cursor: default; }
/* keep the statusline clear of the fixed audio toggle (bottom-left) */
.cbwin[data-sheet="true"] .cbwin-statusline { text-align: right; }
body[data-motion="full"] .cbwin[data-sheet="true"] .cbwin-frame {
  animation: cbwin-rise 200ms var(--ease-snap);
}
@keyframes cbwin-rise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---- status-window content --------------------------------- */
.cbwin-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  align-items: center;
}
.cbwin-k {
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
  text-transform: uppercase;
}
.cbwin-v {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 22px;
  text-align: right;
  font-size: 18px;
  color: var(--terminal-soft);
}
.cbwin-v.is-bright {
  color: var(--terminal);
  text-shadow: 0 0 8px var(--glow-soft);
}

.cbwin-badge {
  display: inline-block;
  padding: 4px 6px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber);
  border: var(--px) solid currentColor;
}
.cbwin-badge[data-mode="SIMULATION"] { color: var(--amber); }
.cbwin-badge[data-mode="DEVNET"]     { color: var(--e-blue); }
.cbwin-badge[data-mode="MAINNET"]    { color: var(--sol-cyan); }

/* playful pixel signal-strength meter (decorative, aria-hidden;
   the LINK text next to it carries the information) */
.cbwin-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.cbwin-signal i { display: block; width: 6px; height: 6px; background: var(--forest-2); }
.cbwin-signal i:nth-child(2) { height: 10px; }
.cbwin-signal i:nth-child(3) { height: 14px; }
.cbwin-signal i:nth-child(4) { height: 18px; }
.cbwin-signal i:nth-child(5) { height: 22px; }
.cbwin-signal i.on {
  background: var(--terminal);
  box-shadow: 0 0 5px var(--glow-terminal);
}
.cbwin-signal[data-link="LOCAL"] i.on {
  background: var(--amber);
  box-shadow: 0 0 5px rgba(230, 166, 60, 0.45);
}
body[data-motion="full"] .cbwin-signal i.on {
  animation: cbwin-sig-flicker 1.4s steps(2, end) infinite;
}
body[data-motion="full"] .cbwin-signal i.on:nth-child(odd) {
  animation-duration: 1.9s;
}
@keyframes cbwin-sig-flicker {
  0%, 86%, 100% { opacity: 1; }
  93%           { opacity: 0.55; }
}

/* ---- opener chips: right viewport edge, below the nav --------
   HIDDEN in the simplified cream theme — they crowded the hero and
   duplicated things the nav already reaches. The windows themselves
   still work via CB.windows.open(). */
.win-chips { display: none !important; }

/* compact stack — a third-party trophy button mounts below it */
.win-chips {
  position: fixed;
  top: calc(var(--nav-h) + 18px);
  right: 0;
  z-index: var(--z-windows);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.win-chip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  color: var(--terminal);
  border: var(--px) solid var(--forest-2);
  border-right: 0;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: -3px 3px 0 0 rgba(0, 0, 0, 0.5), 0 0 10px var(--glow-soft);
  transition:
    transform var(--dur-fast) var(--ease-snap),
    color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.win-chip:hover {
  color: var(--white-hi);
  transform: translateX(-3px);
  box-shadow: -3px 3px 0 0 rgba(0, 0, 0, 0.5), 0 0 16px var(--glow-terminal);
}
.win-chip-led {
  width: 6px;
  height: 6px;
  background: var(--forest-2);
}
.win-chip[data-open="true"] .win-chip-led {
  background: var(--terminal);
  box-shadow: 0 0 6px var(--glow-terminal);
}

@media (max-width: 899.98px) {
  .win-chips { display: none; }
}