/*
 * styles-pipeline-status.css — #133 Phase 2.
 *
 * Cold-start reactive listening waveform (ori-web/src/pipeline-status/).
 * Gated by body.pipeline-anim-active, which is set only when the
 * pipeline_status_anim release flag is ON. When the flag is OFF the body
 * class is absent, so none of these rules apply and today's splash 3-dot
 * indicator + empty hints render unchanged (dark-land).
 *
 * The "psa-" namespace is deliberate: the legacy splash already owns the
 * id #pipeline-status + classes .pipeline-status/.pipeline-connector
 * (index.html), so this component must NOT reuse them.
 *
 * Colors follow the live theme tokens (--green / --amber / --text-3), so
 * light/dark + contrast settings carry through automatically.
 */

/* When active, the new component is the hero — hide the legacy splash
   logo + 3-dot indicator and the per-mode "Listening for keywords…"
   empty hints. */
body.pipeline-anim-active #splash,
body.pipeline-anim-active .bubble-field-empty,
body.pipeline-anim-active #card-stream > .empty-hint {
  display: none !important;
}

.psa-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 20px;
  opacity: 1;
  transition: opacity 0.6s var(--ease-out, ease);
}

.psa-root.faded {
  opacity: 0;
  pointer-events: none;
}

/* Bubble mode: fill the bubble field like the splash it replaces. */
.bubble-field .psa-root {
  position: absolute;
  inset: 0;
}

.psa-wave {
  width: 100%;
  max-width: 430px;
  height: 90px;
  display: block;
}

/* Stage chips: Listening -> Transcribing -> Extracting. */
.psa-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.psa-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm, 13px);
  color: var(--text-3, #9aa3c8);
  transition: color 0.25s var(--ease-out, ease);
}

.psa-chip .psa-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 0.25s, border-color 0.25s;
}

.psa-chip.active,
.psa-chip.done {
  color: var(--green, #34d399);
}

.psa-chip.active .psa-dot,
.psa-chip.done .psa-dot {
  background: var(--green, #34d399);
  border-color: var(--green, #34d399);
}

.psa-chip.active .psa-dot {
  animation: psa-chip-pulse 1.3s ease-out infinite;
}

.psa-connector {
  width: 22px;
  height: 1.5px;
  background: color-mix(in srgb, var(--text-3, #9aa3c8) 45%, transparent);
  transition: background 0.25s;
}

.psa-connector.lit {
  background: color-mix(in srgb, var(--green, #34d399) 55%, transparent);
}

.psa-copy {
  font-size: var(--fs-sm, 13px);
  text-align: center;
  min-height: 18px;
  color: var(--text-3, #9aa3c8);
  max-width: 320px;
}

.psa-copy.warn {
  color: var(--amber, #fbbf24);
}

/* Dry-spell re-show: a compact strip (no chips, shorter waveform) so it
   reads as "still listening" without dominating the surface. */
.psa-root.compact {
  gap: 8px;
  padding: 12px 16px;
}

.psa-root.compact .psa-chips {
  display: none;
}

.psa-root.compact .psa-wave {
  height: 40px;
  max-width: 320px;
}

@keyframes psa-chip-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green, #34d399) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green, #34d399) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green, #34d399) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .psa-chip.active .psa-dot { animation: none; }
  .psa-root { transition: none; }
}