/* Talk to type (public/stt.js): the floating "Listening..." bubble with a streetlight that glows
   with the voice, and fireflies. Shared tokens from public/ui/tokens.css. */

.stt-slot { display: inline-flex; align-items: center; }
.stt-slot:empty { display: none; }
.stt-btn.is-on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }

.stt-bubble {
  --stt-level: 0;
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); /* above the tab bar and the Messages composer */
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: 10px 10px 10px 14px; border-radius: var(--radius-lg, 20px);
  background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-3);
  overflow: hidden; animation: stt-rise 220ms ease-out;
}
.stt-bubble .ui-fireflies { --firefly: #FFE29A; --firefly-glow: rgba(255, 214, 110, 0.6); }
.stt-lampbox { flex: none; width: 40px; height: 64px; position: relative; }
.stt-lampbox svg { display: block; }
.stt-post { fill: #3A4668; }
.stt-lamp { fill: #FFE29A; }
.stt-glow {
  fill: #FFD66E; transform-origin: 20px 14px;
  opacity: calc(0.25 + var(--stt-level) * 0.75);
  transform: scale(calc(0.7 + var(--stt-level) * 0.8));
  transition: opacity 90ms linear, transform 90ms linear;
}
.stt-bubble.is-thinking .stt-glow { animation: stt-pulse 1.1s ease-in-out infinite; transition: none; }
.stt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.stt-words { font-family: var(--font-display); font-size: var(--text-lg, 20px); line-height: 1.2; }
.stt-sub { color: var(--on-brand-muted); font-size: var(--text-xs, 13px); }
.stt-bubble .ui-btn { flex: none; position: relative; }
.stt-cancel { flex: none; color: var(--on-brand); position: relative; }

@keyframes stt-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes stt-rise {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (min-width: 900px) {
  .stt-bubble { bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .stt-bubble, .stt-bubble.is-thinking .stt-glow { animation: none; }
  .stt-glow { transition: none; }
}
:where([data-motion="reduce"]) .stt-bubble, :where([data-motion="reduce"]) .stt-bubble.is-thinking .stt-glow { animation: none; }