/* ============================================
   SENA DESIGN SYSTEM — Thinking indicator
   ============================================
   The one loader for "Sena is working": three pulsing dots and a label on a
   single line. Two states, two root classes on the same anatomy:

   - .sena-thinking   waiting for the model (muted): "Sena is thinking…",
                      search status, a side panel's loader
   - .sena-building   the model is mid-artifact (accent green, set off from
                      the streamed paragraph above it): "Sena is building…"

   Markup comes from ONE factory (src/lib/chat/thinking.js) for imperative
   hosts and <Thinking> (src/lib/components/Thinking.svelte) for Svelte ones
   (Storybook: Components/Thinking). Before this file each screen carried its
   own copy of these rules, and the surfaces that missed one rendered the
   dots and the label as an unstyled two-line stack. */

.sena-thinking,
.sena-building {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
}

/* The building state interrupts a streaming message, so it clears the
   paragraph above it rather than hugging its last line. */
.sena-building {
  padding: var(--spacing-12) 0 var(--spacing-4);
}

.thinking-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}

.thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: senaDotPulse 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

.thinking-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 19px;
}

/* The optional seconds counter next to the label (thinkingEl's `elapsed`, or
   <Thinking elapsed>). Tabular numerals, so 9s -> 10s doesn't wobble. */
.thinking-elapsed {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 19px;
  font-variant-numeric: tabular-nums;
}
.thinking-elapsed:not(:empty)::before { content: '· '; }

/* Building is the state worth noticing: the deliverable is landing. Accent
   FOREGROUND, not --stroke-accent, which is translucent white in dark mode. */
.sena-building .thinking-dots span { background: var(--fg-accent); }
.sena-building .thinking-label { color: var(--fg-accent); }

@keyframes senaDotPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Reduced motion ships with the animation, not after it: the dots hold a
   readable mid-opacity instead of pulsing. */
@media (prefers-reduced-motion: reduce) {
  .thinking-dots span { animation: none; opacity: 0.6; }
}