// ─────────────────────────────────────────────────────────────────────────────
// Component: Agent visual language
// File:      src/scss/patterns/_agents.scss
//
// Variants:  .agent-badge .agent-ring .agent-commit-marker
//            .fleet-dot .fleet-dot--active .fleet-dot--idle .fleet-dot--error
// Tokens:    --agent-accent, --agent-accent-bg, --domain-agent, --gradient-agent
// Usage:     <span class="agent-badge">GPT-4o</span>
//
// Notes:     Agent commits are visually distinct from human commits everywhere.
//            Fuchsia (#e879f9) is reserved for agent identity — do not reuse.
// ─────────────────────────────────────────────────────────────────────────────

.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--agent-accent-bg);
  color: var(--agent-accent);
  border: 1px solid color-mix(in srgb, var(--agent-accent) 30%, transparent);
}

// Ring used around agent avatars and commit author icons
.agent-ring {
  outline: 1px solid color-mix(in srgb, var(--agent-accent) 40%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--agent-accent) 20%, transparent);
}

// Accent bar on agent-created commit rows
.agent-commit-marker {
  border-left: 2px solid var(--agent-accent);
  padding-left: var(--space-3);
}

// Fleet status dots
.fleet-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
}

.fleet-dot--active {
  background: var(--agent-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--agent-accent) 60%, transparent);
}

.fleet-dot--idle {
  background: var(--text-muted);
}

.fleet-dot--error {
  background: var(--color-danger);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-danger) 60%, transparent);
}