/* --------------------------------------------------------------------------
   The microphone, and while it records, a live waveform
   over the box (views/voice.js)
   -------------------------------------------------------------------------- */

.btn-mic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.btn-mic:hover:not([aria-disabled="true"]) { color: var(--accent); border-color: var(--accent); }
.btn-mic:active:not([aria-disabled="true"]) { transform: scale(.92); }

.btn-mic.is-recording {
  border-color: var(--danger-fill);
  background: var(--danger-fill);
  color: #fff;
  animation: mic-pulse 1.3s ease-out infinite;
}

.btn-mic.is-transcribing { cursor: progress; opacity: .6; }

/* Over the words while it listens, and while it writes the words down; the
   microphone and Send stay beside it. */
.voice-strip {
  position: absolute;
  inset: 6px 92px 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: var(--r-lg);
  background: var(--danger-soft);
  color: var(--neg);
}

.voice-strip[hidden] { display: none; }
.composer-box.is-recording .composer-input { visibility: hidden; }

.voice-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neg);
  animation: blink 1.1s infinite ease-in-out;
}

.voice-wave { flex: 1; min-width: 0; height: 36px; color: var(--neg); }

.voice-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.voice-status { font-size: 13px; color: var(--text-muted); }

.voice-cancel {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}

.voice-cancel:hover { background: var(--surface-sunken); color: var(--text-strong); }

/* Writing it down: the waveform gives way to a shimmer and the words. */
.voice-strip.is-transcribing { background: var(--accent-soft); color: var(--accent); }
.voice-strip.is-transcribing .voice-wave,
.voice-strip.is-transcribing .voice-clock,
.voice-strip.is-transcribing .voice-cancel { display: none; }
.voice-strip.is-transcribing .voice-dot { background: var(--accent); }

.composer-hint.is-spoken { color: var(--accent); }
.composer-hint.is-error  { color: var(--neg); }

@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-mic.is-recording, .voice-dot { animation: none; }
}

/* The stop square, solid white on the red button. */
.btn-mic.is-recording svg rect { fill: currentColor; }

/* --------------------------------------------------------------------------
   Listen and Visualize — under an answer (views/speech.js, views/visual.js)

   Quiet buttons with a word each: they are there when wanted, and do not
   compete with the answer above them.
   -------------------------------------------------------------------------- */

/* Square icon buttons (2026-10-15): the icon alone, a soft square behind it
   on hover, the words in its tooltip and label. 32px — past the 24px minimum
   target (WCAG 2.5.8). */
.msg-listen {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

/* A tint of the ink, not a surface: it shows on the page in either theme. */
.msg-listen:hover, .msg-listen:focus-visible {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-strong) 10%, transparent);
}
.msg-listen.is-loading { cursor: progress; color: var(--accent); }
.msg-listen.is-done { color: var(--pos); }

/* A visual on screen keeps its button lit. */
.msg-visualize.is-on { color: var(--accent); background: var(--accent-soft); }

.msg-listen.is-playing {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--neg);
}

.msg-listen.is-playing svg rect { fill: currentColor; }

/* A visual of the answer, in its locked frame (views/visual.js). */
.msg-visual { margin: 12px 0 4px; animation: arrive-fade .3s ease-out both; }
.msg-visual[hidden] { display: none; }

.msg-visual-frame {
  display: block;
  width: 100%;
  min-height: 120px;
  /* The visual draws its own card (2026-10-07); a frame border would double it. */
  border: 0;
  background: transparent;
}

/* The visual is designed on white, and the frame cannot be told the theme:
   in the dark it sits on a white sheet of its own. */
:root[data-theme="dark"] .msg-visual { padding: 10px; border-radius: var(--r-lg); background: #fff; }

.msg-listen-spin {
  width: 11px;
  height: 11px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: flow-turn .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .msg-visual { animation: none; }
  .msg-listen-spin { animation: none; }
}