/* Tailwind (CDN) handles layout/typography. This file covers only what Tailwind
   can't reach: the terminal output block and status chips whose color must follow
   live SSE text updates via the data-state attribute. */

.output {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #09090b;
  color: #86efac;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  padding: 1rem;
  height: 26rem;
  overflow: auto;
  white-space: pre-wrap;
}

/* Status chip — colored by state. Base style set here; SSE updates the text and
   the data-state attribute, so the chip re-colors itself on live state changes. */
.chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  color: #a1a1aa; /* zinc-400 default (unknown states) */
}
.chip[data-state="running"] { color: #4ade80; }                 /* green */
.chip[data-state="queued"],
.chip[data-state="creating"],
.chip[data-state="booting"],
.chip[data-state="installing-docker"],
.chip[data-state="pulling-image"],
.chip[data-state="container-registered"] { color: #fbbf24; }    /* amber — in progress */
.chip[data-state="draining"],
.chip[data-state="destroying"] { color: #fb923c; }              /* orange — winding down */
.chip[data-state="destroyed"],
.chip[data-state="failed"] { color: #f87171; }                  /* red */