/* ==========================================================================
   The welcome agent's stage.

   ElevenLabs supplies the conversation widget; this supplies the room it sits
   in. The sloth gets a CRT monitor to live in — bezel, phosphor glow, scanlines
   — so the agent reads as part of the page rather than a vendor control dropped
   on top of it.
   ========================================================================== */

.agent-stage {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .agent-stage { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

/* --- The monitor ---------------------------------------------------------- */

.crt {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  padding: 1.1rem;
  background: linear-gradient(160deg, #1b2430, #0c1119 60%);
  border: 1px solid var(--rule-bright);
  border-radius: 10px 10px 6px 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 18px 50px rgb(0 0 0 / 0.55);
}

/* The screen itself: inset, curved at the corners, lit from within. */
.crt__screen {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgb(255 176 0 / 0.16), transparent 62%),
    var(--bg-inset);
  border-radius: 14px / 10px;
  box-shadow:
    inset 0 0 40px rgb(0 0 0 / 0.85),
    inset 0 0 90px rgb(255 176 0 / 0.06);
}

.crt__screen::after {
  /* scanlines, tighter than the page-wide ones so the screen reads as closer */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.28) 0px,
    rgb(0 0 0 / 0.28) 1px,
    transparent 1px,
    transparent 3px
  );
}

.crt__critter {
  width: 62%;
  max-width: 11rem;
  filter: drop-shadow(0 0 18px rgb(255 176 0 / 0.35));
}

/* Power LED on the bezel. */
.crt__led {
  position: absolute;
  right: 1.1rem;
  bottom: 0.42rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-faint);
}

.agent-stage[data-state="ready"] .crt__led {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: led-pulse 2.6s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.crt__label {
  position: absolute;
  left: 1.1rem;
  bottom: 0.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- Copy beside the monitor --------------------------------------------- */

.agent-copy__note {
  margin-top: 1rem;
  color: var(--fg-faint);
  font-size: var(--step--1);
}

/* Shown only when no agent id is configured, so the section never presents a
   control that cannot do anything. */
.agent-copy__unconfigured { display: none; color: var(--amber); }
.agent-stage[data-state="unconfigured"] .agent-copy__unconfigured { display: block; }
.agent-stage[data-state="unconfigured"] .agent-copy__note { display: none; }

/* --- The ElevenLabs widget ------------------------------------------------
   It renders into its own shadow root, so it cannot be styled from here beyond
   placement. Everything visual it exposes — the sloth, the orb gradient, the
   labels — is passed as attributes in js/agent-embed.js. */

.agent-mount {
  margin-top: 1.25rem;
  min-height: 3.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .agent-stage[data-state="ready"] .crt__led { animation: none; }
}