/* The progress bar of a live turn: a thin track under the step line, filled
 * to --agent-progress-fraction by turn_activity_controller (the arithmetic is
 * agent/turn_progress.js), with the time-left label beside it. */

.agent-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding-inline: var(--spacing-4);
}

.agent-progress-track {
  flex: 1 1 auto;
  height: var(--spacing-2);
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  overflow: hidden;
}

.agent-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--corner-radius-full);
  background-image: var(--brand-gradient);
  transform-origin: left center;
  transform: scaleX(var(--agent-progress-fraction, 0));
  /* Smooths a jump when a step finishes early; frame-by-frame updates are
     small enough that it only adds a slight lag. */
  transition: transform 400ms ease-out;
}

.agent-progress-label {
  flex-shrink: 0;
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .agent-progress-fill { transition: none; }
}