/* layouts/_agent_nav_badge.html.erb — the Agent nav link's badge
 * (agent_nav_activity_controller.js): a spinner and the number of agent turns
 * running, or a dot when replies are waiting unseen. Without motion the
 * spinner is a static ring. */

.nav-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: var(--spacing-4);
  vertical-align: middle;
  font-size: var(--font-size-12);
  line-height: 1;
  color: inherit; /* the link's colour, light on the active link's gradient */
}
.nav-agent-badge[hidden] { display: none; }

.nav-agent-badge-spinner {
  display: 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: nav-agent-badge-spin 800ms linear infinite;
}
.nav-agent-badge--running .nav-agent-badge-spinner { display: inline-block; }

/* The unread dot: the brand gradient, with no count. */
.nav-agent-badge--unread::before {
  content: "";
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--corner-radius-full);
  background-image: var(--brand-gradient);
}
/* On the active link the dot would be the brand gradient on the brand
 * gradient (geneops-brand nav-link.css), so it takes the link's light text
 * colour instead. */
.nav-link[aria-current="page"] .nav-agent-badge--unread::before {
  background-image: none;
  background-color: currentColor;
}

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

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