/* Animated code window (cw-term*). */

.cw-term {
  --cw-accent: var(--c-brand-2);
  /* the accent fills chips; the streamed line is TEXT, and a fill-grade hue can be unreadable as type on
     light. Defaults to the accent, so a lane that sets only --cw-accent is byte-identical to before. */
  --cw-accent-text: var(--cw-accent);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-ctl);
  overflow: hidden;
  background: var(--c-surface-2);
}
.cw-term[data-proto="rpc"] { --cw-accent: var(--c-brand-2); }
.cw-term[data-proto="ws"] { --cw-accent: var(--c-ws, var(--c-info)); }
.cw-term[data-proto="stream"] { --cw-accent: var(--c-stream, var(--c-danger)); }

.cw-term-head {
  height: 26px;
  display: flex;
  align-items: center;
  gap: var(--c-s-5);
  padding: 0 var(--c-s-6);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--c-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--c-ghost);
}
.cw-term-dots { display: flex; gap: var(--c-s-3); }
/* square accent chips (not pill dots): line-2 by default, the accent lights the live one */
.cw-term-dot { width: 6px; height: 6px; border-radius: 0; background: var(--c-line-2); transition: background var(--c-dur-2) var(--c-ease); }
.cw-term-dot.is-live { background: var(--cw-accent); }
.cw-term-ep { font-family: var(--c-font-mono); font-size: 10.5px; color: var(--c-faint); }

.cw-term-body {
  margin: 0;
  padding: var(--c-s-6);
  height: 17em;          /* FIXED: the window is pre-expanded and never grows, so streaming/typing
                            can never push the page elements below it (bottom-anchored content) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--c-font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  overflow: hidden;
}
.cw-term-line { white-space: pre-wrap; word-break: break-all; flex: 0 0 auto; animation: c-linein var(--c-dur-3) var(--c-ease-out); }
.cw-term-line.is-req { color: var(--c-text); }
.cw-term-line.is-res { color: color-mix(in srgb, var(--cw-accent-text) 55%, var(--c-muted)); }
.cw-term-line.is-out { opacity: 0; transition: opacity var(--c-dur-2) var(--c-ease); }

.cw-term-caret {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--cw-accent);
  animation: cw-blink 1s steps(1) infinite;
}
@keyframes cw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cw-term-caret { display: none; }
}