.interim {
      color: var(--text-disabled);
      font-style: italic;
      padding: 8px 12px;
      background: var(--surface-muted);
      border-radius: 6px;
      margin-bottom: 10px;
    }

#mic {
      flex: 0 0 auto;
      padding: 14px 20px;
      border: none;
      background: var(--brand);
      color: var(--on-brand);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 16px;
      font-weight: 650;
      white-space: nowrap;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }

#mic.recording {
      background: var(--recording);
      animation: pulse 1.5s infinite;
    }

#mic.listening {
      background: var(--success);
    }

#mic.listening.detecting {
      background: var(--recording);
      animation: pulse 1.5s infinite;
    }

#mic:disabled {
      background: var(--control-disabled);
      cursor: not-allowed;
    }

.stop-audio-btn {
      flex: 0 0 auto;
      min-height: 44px;
      padding: 8px 14px;
      border: 1px solid transparent;
      background: var(--surface-purple-hover);
      color: var(--text-soft);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 650;
      line-height: 1;
      white-space: nowrap;
    }

.stop-audio-btn[hidden] {
      display: none;
    }

.stop-audio-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

.stop-audio-btn.audio-master-off {
      border-color: var(--border-purple-strong);
      background: var(--surface-tint);
      color: var(--brand-deep);
      font-weight: 650;
    }

.stop-audio-btn.audio-master-off:hover,
.stop-audio-btn.audio-master-off:focus-visible {
      background: var(--surface-purple-hover);
    }

.stop-audio-btn.audio-off-nudge {
      animation: audioOffNudge 0.75s ease-in-out 6;
    }

.quick-audio-row #mic {
      min-height: 44px;
      padding: 8px 14px;
      font-size: 14px;
      line-height: 1;
    }

/* "Paused" state — set when the server closes the STT stream due to
       inactivity. Visually distinct from :disabled (which means "can't click
       right now") so the user understands the session specifically went quiet
       and a tap is what resumes it. Cleared the next time the user taps the
       mic or toggles hands-free back on. */
    #mic.paused {
      background: var(--paused);
      animation: none;
    }

@keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.72; }
    }

@media (max-width: 600px) {
      body { padding: 12px; gap: 10px; }
      h1 { font-size: 20px; }
      #log { font-size: 17px; padding: 14px; min-height: 200px; max-height: 55vh; }
      #mic { padding: 16px 20px; font-size: 17px; flex: 1 1 100%; }
      .quick-audio-row #mic { flex: 1 1 auto; padding: 9px 12px; font-size: 14px; }
      .stop-audio-btn { padding: 9px 12px; font-size: 14px; }
      form { flex: 1 1 100%; }
      input[type="text"] { font-size: 17px; padding: 14px; }
      #send { padding: 14px 18px; font-size: 17px; }
      .hint { display: none; }
    }