/*
 * Voice input — a mic button beside a message textarea (the speech_input
 * controller records and posts to TranscriptionsController). The button pulses
 * red while recording and dims while the clip is transcribing.
 */

@layer components {
  .speech-input {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
  }

  .speech-input .form-field__textarea {
    flex: 1;
  }

  .speech-input__mic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-slate-500);
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
  }

  .speech-input__mic svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .speech-input__mic:hover {
    color: var(--color-slate-700);
    border-color: var(--color-slate-300);
  }

  /* Recording — pulsing red. */
  .speech-input--recording .speech-input__mic {
    background: var(--color-red-500);
    border-color: var(--color-red-500);
    color: var(--color-white);
    animation: speech-input-pulse 1.3s ease-in-out infinite;
  }

  /* Transcribing — dimmed while we wait on the transcript. */
  .speech-input--transcribing .speech-input__mic {
    opacity: 0.55;
    cursor: default;
  }

  @keyframes speech-input-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(from var(--color-red-500) l c h / 0.5); }
    50%      { box-shadow: 0 0 0 0.4rem oklch(from var(--color-red-500) l c h / 0); }
  }
}