:root {
  /* 1984 CRT terminal palette */
  --desk: #241f1a;
  --desk-2: #161310;
  --plastic: #cdbf9b;
  --plastic-hi: #ddd0ad;
  --plastic-lo: #a89972;
  --screen: #0c0d0a;
  --phosphor: #e7b24a;
  --phosphor-soft: #caa36a;
  --maroon: #a8412c;
  --red: #e23b2a;
  --ink: #1d1813;

  /* Type */
  --font-term: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-ui: "IBM Plex Mono", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--desk-2);
  color: var(--phosphor);
  overflow: hidden;
}

/* Faint phosphor grain laid over the whole page */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================ PASSWORD GATE ============================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(130% 100% at 50% 0%, #322b24 0%, var(--desk) 70%, var(--desk-2) 100%);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.gate.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gate__card {
  position: relative;
  z-index: 2;
  width: min(92vw, 460px);
  padding: 38px 36px 32px;
  text-align: left;
  background: var(--screen);
  border: 2px solid var(--maroon);
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 0 8px #b6a87f;
  overflow: hidden;
  animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* scanlines over the gate card */
.gate__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 1px,
    transparent 2px,
    transparent 3px
  );
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.gate__kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 14px;
}

.gate__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--phosphor);
  margin: 0 0 10px;
  text-shadow: 0 0 18px rgba(231, 178, 74, 0.35);
}

.gate__byline {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--maroon);
  margin: 0 0 22px;
}

.gate__subtitle {
  font-family: var(--font-term);
  font-size: 22px;
  line-height: 1.2;
  color: var(--phosphor-soft);
  margin: 0 0 22px;
}

.gate__field {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.gate__prompt {
  display: grid;
  place-items: center;
  font-family: var(--font-term);
  font-size: 24px;
  color: var(--phosphor);
}

.gate__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 18px;
  font-family: var(--font-term);
  letter-spacing: 0.04em;
  color: var(--phosphor);
  background: rgba(231, 178, 74, 0.06);
  border: 1px solid var(--maroon);
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.2s;
}

.gate__input::placeholder {
  color: rgba(202, 163, 106, 0.5);
}

.gate__input:focus {
  box-shadow: 0 0 0 2px rgba(231, 178, 74, 0.35);
}

.gate__btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--ink);
  background: var(--phosphor);
  border: none;
  border-radius: 4px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.gate__btn:hover {
  background: #f3c468;
  transform: translateY(-1px);
}

.gate__btn:active {
  transform: translateY(0);
}

.gate__error {
  min-height: 18px;
  margin: 16px 0 0;
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--red);
  opacity: 0;
  transition: opacity 0.2s;
}

.gate__error.is-visible {
  opacity: 1;
}

.gate.is-shake .gate__card {
  animation: shake 0.4s;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ============================ LAYOUT ============================ */
.app {
  display: grid;
  grid-template-columns: 1fr clamp(330px, 26vw, 390px);
  height: 100vh;
  width: 100vw;
  background: radial-gradient(130% 100% at 50% 0%, #322b24 0%, var(--desk) 70%, var(--desk-2) 100%);
}

.app[hidden] {
  display: none;
}

/* ============================ STAGE / MONITOR ============================ */
.stage-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: clamp(18px, 3vh, 36px) 30px;
  overflow: hidden;
}

.monitor {
  position: relative;
  z-index: 2;
  width: min(96%, 1040px);
  max-height: 78vh;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 70%, #b6a87f);
  border-radius: 20px;
  padding: 24px 24px 18px;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* The screen housing — clipped, recessed, glowing */
.stage-frame {
  position: relative;
  display: block;
  width: 100%;
  background: var(--screen);
  border-radius: 14px;
  padding: 10px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  outline: none;
}

.stage-frame:focus-visible {
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 0 0 3px var(--phosphor);
}

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--screen);
  display: grid;
  place-items: center;
}

.slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.97);
  animation: slideIn 0.45s ease both;
}

.slide-image[hidden] {
  display: none;
}

@keyframes slideIn {
  from { opacity: 0; transform: scale(1.015); }
}

/* Video framed inside the monitor's black bezel on slide 16 — fills the whole
   screen (the slide image is hidden for video slides). Layered above the slide
   image slot but below the CRT glow/scanline overlays so the screen FX apply. */
.polaroid-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.polaroid-video[hidden] {
  display: none;
}

.polaroid-video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 1980s color grade: warm, saturated, a touch soft. */
  filter: saturate(1.45) contrast(1.08) brightness(1.03) sepia(0.28)
    hue-rotate(-8deg);
}

/* VHS overlay confined to the window: tracking scanlines + chroma bleed +
   faint vignette. */
.polaroid-video__vhs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 60, 0.06),
      transparent 8%,
      transparent 92%,
      rgba(0, 180, 255, 0.06)
    );
  animation: vhsTrack 7s linear infinite;
}

/* A second darkening vignette layer over the footage. */
.polaroid-video__vhs::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(
    120% 100% at 50% 50%,
    transparent 55%,
    rgba(40, 20, 0, 0.5)
  );
}

@keyframes vhsTrack {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 -16px, 0 0; }
}

/* Camcorder-style timecode caption in the lower-right of the video. */
.polaroid-video__tc {
  position: absolute;
  right: 3.5%;
  bottom: 4.5%;
  max-width: 60%;
  text-align: right;
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: 700;
  font-size: clamp(9px, 1.5vw, 18px);
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #fdf6dc;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 235, 150, 0.45);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.92;
  animation: tcFlicker 3.2s steps(1, end) infinite;
}

@keyframes tcFlicker {
  0%, 96%, 100% { opacity: 0.92; }
  97% { opacity: 0.6; }
  98.5% { opacity: 0.98; }
}

/* Scanlines over the screen — hidden at rest, only shown during the load
   flicker (see .is-booting below). */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 2px,
    transparent 3px
  );
  opacity: 0;
}

/* On each slide load the scanlines flare, flicker, then fade away completely so
   the slide reads clean. Driven by the .is-booting class in app.js. */
.screen.is-booting .scanlines {
  animation: scanBoot 0.9s steps(1, end) forwards;
}

@keyframes scanBoot {
  0%   { opacity: 1; }
  8%   { opacity: 0.2; }
  16%  { opacity: 1; }
  26%  { opacity: 0.35; }
  38%  { opacity: 0.95; }
  52%  { opacity: 0.5; }
  68%  { opacity: 0.85; }
  85%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* A bright sweep + brightness pop on load to sell the "powering on" feel */
.screen.is-booting .slide-image {
  animation: slideIn 0.45s ease both, crtFlicker 0.9s ease-out both;
}

@keyframes crtFlicker {
  0%   { filter: saturate(0.92) brightness(1.9) contrast(1.4); }
  10%  { filter: saturate(0.92) brightness(0.5); }
  20%  { filter: saturate(0.92) brightness(1.6); }
  35%  { filter: saturate(0.92) brightness(0.8); }
  55%  { filter: saturate(0.92) brightness(1.25); }
  100% { filter: saturate(0.92) brightness(0.97); }
}

.crt-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 90% at 50% 40%, rgba(231, 178, 74, 0.1), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55));
}

.stage-empty {
  position: relative;
  z-index: 1;
  padding: 24px;
  text-align: center;
}

.stage-empty__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stage-empty__title {
  font-family: var(--font-term);
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.04em;
  color: var(--phosphor);
}

.stage-empty__hint {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--phosphor-soft);
  line-height: 1.6;
}

.stage-empty code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--maroon);
  background: rgba(168, 65, 44, 0.18);
  padding: 1px 6px;
}

/* Bezel label row under the screen */
.monitor__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 6px;
}

.monitor__id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #6f6448;
}

.monitor__power {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #6f6448;
}

.monitor__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

/* Controls */
.controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Plastic transport buttons */
.ctl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic));
  border-top: 1px solid var(--plastic-hi);
  border-left: 1px solid var(--plastic-hi);
  border-right: 2px solid var(--plastic-lo);
  border-bottom: 3px solid var(--plastic-lo);
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.ctl-btn__icon {
  font-size: 12px;
  line-height: 1;
}

.ctl-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.ctl-btn:active:not(:disabled) {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ctl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.counter {
  font-family: var(--font-term);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--phosphor);
  min-width: 130px;
  text-align: center;
  text-shadow: 0 0 12px rgba(231, 178, 74, 0.4);
}

/* Audio bar — styled as the monitor's plastic transport tray */
.audiobar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  width: min(92%, 640px);
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic));
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.audiobar.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Host portrait popping up from the bottom-right of the player panel.
   The stage area's overflow:hidden clips the slight overhang at the bottom,
   so only the very bottom of the sticker is cut off.
   The right offset aligns the sticker's right edge with the centered monitor
   panel (width min(96%, 1040px)); the +30px / -60px terms account for the
   stage-area's 30px horizontal padding. */
.peek-portrait {
  position: absolute;
  right: calc(30px + ((100% - 60px) - min((100% - 60px) * 0.96, 1040px)) / 2);
  bottom: -14px;
  height: clamp(104px, 11vw, 132px);
  width: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.audiobar__transport {
  display: flex;
  gap: 8px;
}

.audio-btn {
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink);
  background: #bdae84;
  border: none;
  border-bottom: 2px solid var(--plastic-lo);
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.audio-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.scrubber {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--maroon) var(--progress, 0%),
    #8c7f5b var(--progress, 0%)
  );
  cursor: pointer;
}

.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--plastic-hi);
}

.scrubber::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--plastic-hi);
}

.audio-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink);
  min-width: 96px;
  text-align: right;
}

/* ============================ CHAT (TERMINAL) ============================ */
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--screen);
  border-left: 6px solid #b6a87f;
  overflow: hidden;
}

/* scanlines over the whole terminal */
.chat__scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 1px,
    transparent 2px,
    transparent 3px
  );
}

.chat__header {
  position: relative;
  z-index: 2;
  padding: 20px 18px 12px;
  border-bottom: 1px solid var(--maroon);
}

.chat__title {
  font-family: var(--font-term);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--phosphor);
  text-shadow: 0 0 12px rgba(231, 178, 74, 0.4);
}

.chat__subtitle {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--maroon);
}

.chat__log {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 178, 74, 0.35) transparent;
}

.chat__log::-webkit-scrollbar {
  width: 8px;
}

.chat__log::-webkit-scrollbar-thumb {
  background: rgba(231, 178, 74, 0.3);
}

.msg {
  display: flex;
  animation: msgIn 0.3s ease both;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
}

.msg--user {
  justify-content: flex-start;
}

/* Bubbles render as terminal lines, not chat bubbles */
.msg__bubble {
  max-width: 100%;
  padding: 0;
  font-family: var(--font-term);
  font-size: 21px;
  line-height: 1.25;
  background: none;
  border: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.msg--assistant .msg__bubble {
  color: var(--phosphor-soft);
}

/* prefix each assistant line with GUIDE> */
.msg--assistant .msg__bubble::before {
  content: "GUIDE> ";
  color: var(--phosphor);
}

.msg--user .msg__bubble {
  color: var(--maroon);
}

.msg--user .msg__bubble::before {
  content: "USER> ";
  color: var(--maroon);
}

.msg--error .msg__bubble {
  color: var(--red);
}

.msg--error .msg__bubble::before {
  content: "ERR> ";
  color: var(--red);
}

/* Markdown-rendered assistant bubbles */
.msg__bubble--md {
  white-space: normal;
}

.msg__bubble--md > :first-child {
  margin-top: 0;
}

.msg__bubble--md > :last-child {
  margin-bottom: 0;
}

.msg__bubble--md p {
  margin: 0 0 0.5em;
}

.msg__bubble--md h1,
.msg__bubble--md h2,
.msg__bubble--md h3,
.msg__bubble--md h4 {
  margin: 0.6em 0 0.3em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--phosphor);
}

.msg__bubble--md h1 { font-size: 1.2em; }
.msg__bubble--md h2 { font-size: 1.12em; }
.msg__bubble--md h3 { font-size: 1.05em; }
.msg__bubble--md h4 { font-size: 1em; }

.msg__bubble--md ul,
.msg__bubble--md ol {
  margin: 0 0 0.5em;
  padding-left: 1.3em;
}

.msg__bubble--md li {
  margin: 0.1em 0;
}

.msg__bubble--md a {
  color: var(--phosphor);
  text-decoration: underline;
}

.msg__bubble--md code {
  font-family: var(--font-mono);
  font-size: 0.78em;
  background: rgba(231, 178, 74, 0.12);
  color: var(--phosphor);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.msg__bubble--md pre {
  margin: 0 0 0.5em;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--phosphor-soft);
  overflow-x: auto;
  border: 1px solid var(--maroon);
  border-radius: 4px;
}

.msg__bubble--md pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 0.85em;
}

.msg__bubble--md blockquote {
  margin: 0 0 0.5em;
  padding-left: 0.8em;
  border-left: 2px solid var(--maroon);
  opacity: 0.85;
}

.msg__bubble--md strong { font-weight: 700; color: var(--phosphor); }
.msg__bubble--md em { font-style: italic; }

/* Typing indicator — blinking terminal cursor */
.typing {
  display: inline-flex;
  align-items: center;
}

.typing span {
  display: none;
}

.typing::after {
  content: "\2588";
  color: var(--phosphor);
  font-family: var(--font-term);
  font-size: 21px;
  animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.chat__compose {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--maroon);
}

.chat__caret {
  font-family: var(--font-term);
  font-size: 22px;
  color: var(--phosphor);
  padding-bottom: 4px;
}

.chat__input {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 8px 10px;
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1.3;
  color: var(--phosphor);
  background: rgba(231, 178, 74, 0.05);
  border: 1px solid rgba(168, 65, 44, 0.6);
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.2s;
}

.chat__input::placeholder {
  color: rgba(202, 163, 106, 0.5);
}

.chat__input:focus {
  box-shadow: 0 0 0 2px rgba(231, 178, 74, 0.3);
}

.chat__send {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--ink);
  background: var(--phosphor);
  border: none;
  border-radius: 4px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.chat__send:hover:not(:disabled) {
  background: #f3c468;
  transform: translateY(-1px);
}

.chat__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================ LARGE MONITORS ============================ */
@media (min-width: 1700px) {
  .monitor {
    width: min(82%, 1040px);
  }

  /* Keep the sticker's right edge aligned with the monitor, which uses
     min(82%, 1040px) at this breakpoint. */
  .peek-portrait {
    right: calc(30px + ((100% - 60px) - min((100% - 60px) * 0.82, 1040px)) / 2);
  }
}

/* ============================ NARROW / FALLBACK ============================ */
@media (max-width: 880px) {
  body {
    overflow: auto;
  }

  .app {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .stage-area {
    min-height: 70vh;
    padding: 24px 16px 150px;
  }

  .monitor {
    width: 100%;
    max-height: none;
  }

  .controls {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 0 8px;
  }

  .counter {
    font-size: 18px;
    min-width: 0;
    white-space: nowrap;
  }

  .peek-portrait {
    right: 16px;
  }

  .chat {
    height: auto;
    min-height: 60vh;
    border-left: none;
    border-top: 6px solid #b6a87f;
  }

  .audiobar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
  }

  .scrubber {
    flex: 1 1 120px;
    min-width: 0;
  }

  .audio-time {
    min-width: 0;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* No flashing and no lingering scanlines: disable the boot animation
     entirely so the static opacity:0 always wins. */
  .scanlines,
  .screen.is-booting .scanlines {
    animation: none !important;
    opacity: 0 !important;
  }
}