/* ═══════════════════════
   MONITOR BEZEL
   ═══════════════════════ */
.monitor-bezel {
  position: relative;
  width: min(94vw, 1000px);
  height: min(88vh, 700px);
  background: var(--bezel);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  padding: 6px 16px 16px;
  /* Slightly slimmer top bezel, a bit more side/bottom breathing room */
  box-shadow:
    0 0 0 3px var(--bezel-ring),
    0 0 0 6px #111,
    0 8px 32px rgba(0, 0, 0, 0.7);
  transition:
    width 0.45s ease-in-out,
    height 0.45s ease-in-out,
    border-radius 0.45s ease-in-out,
    padding 0.45s ease-in-out,
    box-shadow 0.45s ease-in-out,
    background 0.45s ease-in-out,
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

/* Maximized state: stretch CRT window to fill viewport,
   keep only the top "app bar" bezel, no side/bottom bezel. */
.monitor-bezel.is-maximized {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  /* let header + screen touch the viewport edges */
  background: transparent;
  /* remove outer bezel color on sides/bottom */
}

.monitor-bezel.is-minimized {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  pointer-events: none;
}

.monitor-bezel.is-maximized .window-header {
  padding: 8px 16px;
  background: var(--bezel);
  /* keep a dark app bar at the top */
}

.monitor-bezel.is-maximized .screen {
  margin-top: 0;
  border-radius: 0;
  /* CRT fills below the app bar */
}

/* ═══════════════════════
   SCREEN (glass)
   ═══════════════════════ */
.screen {
  position: relative;
  /* Keep CRT effects inside the screen only */
  flex: 1;
  /* Fills the rest of the bezel */
  width: 100%;
  margin-top: 4px;
  /* Little gap below header so the rounded top is visible */
  border-radius: 14px;
  /* Rounded on all corners to echo bezel curve */
  overflow: hidden;
  background: var(--bg-screen);
}

/* ── Scanlines ── */
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 4px
  );
  pointer-events: none;
  z-index: 200;
}

/* ── Screen Vignette ── */
.screen-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 85%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
  z-index: 201;
}

/* ── Flicker ── */
@keyframes crt-flicker {
  0% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  93% {
    opacity: 0.88;
  }

  94% {
    opacity: 0.92;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.flicker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 202;
  animation: crt-flicker 8s infinite;
}

/* ═══════════ WINDOW HEADER ═══════════ */
.window-header {
  height: 22px;
  /* Smaller header so controls/title don't feel oversized */
  background: transparent;
  /* No separate grey bar; part of bezel */
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  user-select: none;
  position: relative;
}

.window-controls {
  display: flex;
  gap: 12px;
}

.control {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, 0.4),
    inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  transition: transform 0.1s;
}

.control:active {
  transform: scale(0.9);
  filter: brightness(0.8);
}

.control.close {
  background-color: #ff5f57;
}

.control.minimize {
  background-color: #ffbd2e;
}

.control.maximize {
  background-color: #28c840;
}

.window-title {
  position: absolute;
  /* still centered over bezel */
  left: 50%;
  transform: translateX(-50%);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #e5e5e5;
  margin-right: 0;
  /* Remove previous margin */
}

/* ═══════════════════════
   TERMINAL
   ═══════════════════════ */
.terminal {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 1.8rem 2rem;
  overflow-y: auto;
  /* Native scroll for Lenis to hook into */
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scrollbar-color: var(--green-dim) transparent;
}

#output {
  flex: 1 1 auto;
  overflow: visible;
}

/* ── Mobile Polish ── */
@media (max-width: 768px) {
  .monitor-bezel {
    padding: 6px 10px 10px;
    border-radius: 12px;
  }

  .window-header {
    height: 32px; /* Taller header for better tap area */
  }

  .control {
    width: 20px; /* Larger hit area */
    height: 20px;
  }

  .window-controls {
    gap: 16px;
  }

  .window-title {
    font-size: 14px;
    font-weight: 600;
  }
}