.composer-actions .speech-mic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; overflow: hidden; width: var(--tap-3); padding: 0 7px; transition: width var(--dur-2) var(--ease-out), background var(--dur-1), color var(--dur-1); }
.composer-actions .speech-mic[hidden] { display: none; }
.speech-mic-icon { display: inline-flex; flex-shrink: 0; }
.speech-inline-wave, .speech-inline-time, .speech-inline-error { display: none; }
.composer-actions .speech-mic.is-active { width: 124px; }
.speech-mic.is-active .speech-mic-icon { display: none; }
.speech-mic.is-active .speech-inline-wave { display: flex; align-items: center; gap: 1px; width: 64px; height: 24px; overflow: hidden; flex: 0 0 64px; }
.speech-inline-wave i { display: block; flex: 1 0 1px; height: 2px; border-radius: 1px; background: currentColor; }
.speech-mic.is-active .speech-inline-time { display: inline; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.speech-mic.is-recording { color: var(--teal-ink); background: var(--surface-2); }
.speech-mic.is-processing .speech-inline-wave { opacity: .5; }
.composer-actions .speech-mic.is-error { width: auto; max-width: 210px; color: var(--danger); }
.speech-mic.is-error .speech-inline-error { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
[data-speech-live] { color: inherit; }
@container composer (max-width: 600px) {
  .composer #thinkingChip b { max-width: 60px; min-width: 0; overflow: hidden; white-space: nowrap; opacity: 1; transition: max-width var(--dur-2) var(--ease-out), opacity var(--dur-2); }
  .composer-left:has(.speech-mic.is-active) #thinkingChip b { max-width: 0; opacity: 0; }
  .composer .composer-left:has(.speech-mic.is-active) .model-trigger { max-width: 138px; }
}
@container composer (max-width: 380px) {
  .composer-actions .speech-mic.is-active { width: 108px; }
  .speech-mic.is-active .speech-inline-wave { width: 48px; flex-basis: 48px; }
  .composer .composer-left:has(.speech-mic.is-active), .composer .composer-left:has(.speech-mic.is-error) { gap: 6px; }
  .composer-left:has(.speech-mic.is-active) #thinkingChip b, .composer-left:has(.speech-mic.is-error) #thinkingChip b { display: none; }
  .composer .composer-left:has(.speech-mic.is-active) .model-trigger, .composer .composer-left:has(.speech-mic.is-error) .model-trigger { max-width: 110px; }
  .composer-actions .speech-mic.is-error { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .composer-actions .speech-mic { transition: none; } }