Thinking Shimmer

<!-- Thinking Shimmer — sparkle + shimmering "Analyzing…" text -->
<div class="nuda-thinking">
  <span class="nuda-thinking__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 2 L13.5 8.5 L20 10 L13.5 11.5 L12 18 L10.5 11.5 L4 10 L10.5 8.5 Z" />
    </svg>
  </span>
  <span class="nuda-thinking__text">Analyzing your request</span>
</div>

/* Thinking Shimmer
   Spinning sparkle + a shimmer sweep across the pill, while the text itself
   shimmers. Use while waiting for an AI response.
   Customize: --think-accent, --think-bg */

.nuda-thinking {
  --think-accent: #e4ff54;
  --think-bg: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--think-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.nuda-thinking::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(228, 255, 84, 0.12) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: nuda-think-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

.nuda-thinking__icon {
  width: 16px;
  height: 16px;
  color: var(--think-accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.5));
  animation: nuda-think-spin 3s linear infinite;
}

.nuda-thinking__icon svg { width: 100%; height: 100%; }

.nuda-thinking__text {
  font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
  background: linear-gradient(90deg, #a1a1aa 0%, #fafafa 50%, #a1a1aa 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nuda-think-text 2.4s linear infinite;
  position: relative;
  z-index: 1;
}

@keyframes nuda-think-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes nuda-think-spin { to { transform: rotate(360deg); } }

@keyframes nuda-think-text {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-thinking::after,
  .nuda-thinking__icon,
  .nuda-thinking__text { animation: none; }
}