/* agent/_conversation_row.html.erb, _lists.html.erb and _composer.html.erb —
 * the turn state of each conversation (agent_activity_controller.js): a
 * running turn shows a spinner, "Working…" and a stop button; a reply the
 * user has not seen shows a dot and "New reply". The "Reply ready in …"
 * status above the list, and the composer's note at the limit of active
 * turns. Without motion the spinner is a static ring. */

.agent-item-meta { display: flex; align-items: center; gap: var(--spacing-4); }
.agent-item-meta[hidden] { display: none; }

.agent-item-spinner {
  flex: none;
  width: var(--spacing-12);
  height: var(--spacing-12);
  border: var(--stroke-weight-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--corner-radius-full);
  animation: agent-item-spin 800ms linear infinite;
}

.agent-item-dot {
  flex: none;
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--corner-radius-full);
  background-image: var(--brand-gradient);
}

.agent-item--running .agent-item-meta,
.agent-item--unread .agent-item-meta { color: var(--text-secondary); }
.agent-item--unread .agent-item-title { font-weight: var(--font-weight-700); }

/* A running row's stop button stays in reach without hovering. The actions
 * float over the row without a background of their own, so the title is
 * truncated short of the stop and trash buttons (2 × 1.25rem, the gap and the
 * inset). */
.agent-item--running .agent-item-actions { display: flex; }
.agent-item--running .agent-item-title { padding-right: var(--spacing-48); }
.agent-item-action--stop {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agent-item-action--stop:disabled { opacity: 0.5; cursor: default; }

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

@media (prefers-reduced-motion: reduce) {
  .agent-item-spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

.agent-activity-status {
  margin: var(--spacing-4) 0;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-highlight);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}
.agent-activity-status[hidden] { display: none; }
.agent-activity-status-link { color: var(--text-primary); text-decoration: underline; }

.agent-composer-limit-note {
  margin-top: var(--spacing-8);
  padding-inline: var(--spacing-16);
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}
.agent-composer-limit-note[hidden] { display: none; }