/* agent/_composer.html.erb — while a turn is live the send button is a stop
 * button (chat_controller): a square icon, and once a stop is requested a
 * spinner in place of the icon. */

.agent-composer-send-icon--stop,
.agent-composer-send-spinner { display: none; }

.agent-composer-send--stop .agent-composer-send-icon--send { display: none; }
.agent-composer-send--stop .agent-composer-send-icon--stop { display: block; }

.agent-composer-send--stop.is-stopping .agent-composer-send-icon--stop { display: none; }
.agent-composer-send--stop.is-stopping .agent-composer-send-spinner {
  display: block;
  width: var(--spacing-16);
  height: var(--spacing-16);
  border: var(--stroke-weight-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--corner-radius-full);
  animation: agent-composer-stop-spin 800ms linear infinite;
}

@keyframes agent-composer-stop-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .agent-composer-send--stop.is-stopping .agent-composer-send-spinner { animation: none; }
}