Response Variant Switcher

<!-- Response Variant Switcher — retry/regenerate with "2 / 3" cycling -->
<div class="nuda-ac2-variant">
  <button class="nuda-ac2-variant__nav" aria-label="Previous response" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 6 L9 12 L15 18" />
    </svg>
  </button>
  <span class="nuda-ac2-variant__count" aria-live="polite">2 / 3</span>
  <button class="nuda-ac2-variant__nav" aria-label="Next response" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 6 L15 12 L9 18" />
    </svg>
  </button>
  <span class="nuda-ac2-variant__divider" aria-hidden="true"></span>
  <button class="nuda-ac2-variant__retry" aria-label="Regenerate response" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
      <path d="M21 12 A 9 9 0 1 1 16 4.5" />
      <path d="M21 4 L21 10 L15 10" />
    </svg>
  </button>
</div>

.nuda-ac2-variant {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font: 12px ui-sans-serif,system-ui,sans-serif;
}

.nuda-ac2-variant__nav,.nuda-ac2-variant__retry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: #a1a1aa;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s,color .2s;
}

.nuda-ac2-variant__nav svg,.nuda-ac2-variant__retry svg {
  width: 13px;
  height: 13px;
}

.nuda-ac2-variant__nav:hover,.nuda-ac2-variant__retry:hover {
  background: rgba(228,255,84,.1);
  color: #e4ff54;
}

.nuda-ac2-variant__count {
  padding: 0 4px;
  color: #cfcfcf;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-width: 32px;
  text-align: center;
}

.nuda-ac2-variant__divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.1);
  margin: 0 2px;
}

.nuda-ac2-variant__retry:hover svg {
  animation: _nuda-ac2variant .6s linear;
}

@keyframes _nuda-ac2variant {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ac2-variant__retry:hover svg {
    animation: none !important;
  }
}