Streaming Dots

<!-- Streaming Dots — "AI is thinking" indicator -->
<div class="nuda-stream-dots" role="status" aria-label="AI is thinking">
  <span class="nuda-stream-dots__avatar">AI</span>
  <span class="nuda-stream-dots__dots"><i></i><i></i><i></i></span>
</div>

/* Streaming Dots
   Compact "AI is thinking" indicator with avatar + 3 bouncing dots.
   Customize: --sd-accent, --sd-bg */

.nuda-stream-dots {
  --sd-accent: #e4ff54;
  --sd-bg: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sd-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.nuda-stream-dots__avatar {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sd-accent);
  color: #09090b;
  font: 800 0.625rem ui-sans-serif, system-ui, sans-serif;
  border-radius: 50%;
  letter-spacing: -0.02em;
}

.nuda-stream-dots__dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.nuda-stream-dots__dots i {
  width: 6px;
  height: 6px;
  background: var(--sd-accent);
  border-radius: 50%;
  opacity: 0.3;
  animation: nuda-sd-bounce 1.4s ease-in-out infinite;
}

.nuda-stream-dots__dots i:nth-child(2) { animation-delay: 0.2s; }
.nuda-stream-dots__dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes nuda-sd-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-stream-dots__dots i { animation: none; opacity: 0.7; }
}