/* Voice typing and clipboard paste: the Speak button above long boxes, the
   "Speak instead" card on the report form, the Paste button under the
   screenshot zone, toast action buttons, and the highlight on boxes the
   card filled and on screenshots just pasted. Colours are theme roles:
   recording is the danger fill with on-status text, a checked pair in
   every theme. */

.field__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.field__top .field__label { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ Speak button */

.voice { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.voice-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 14px 0 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--brand-ink);
  font: 650 0.875rem/1 var(--font); white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
@media (hover: hover) { .voice-btn:hover:not(:disabled) { background: var(--brand-wash); border-color: var(--brand); } }
.voice-btn:disabled { cursor: progress; opacity: 0.75; }
.voice-btn__icon { display: inline-flex; }
.voice-btn__label { font-variant-numeric: tabular-nums; }
.voice-btn__dot {
  display: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor;
  transform: scale(calc(0.7 + var(--level, 0) * 0.9)); transition: transform 0.08s linear;
}
.voice-btn.is-recording { background: var(--danger); border-color: var(--danger); color: var(--on-status); }
@media (hover: hover) { .voice-btn.is-recording:hover:not(:disabled) { background: var(--danger); filter: brightness(0.9); } }
.voice-btn.is-recording .voice-btn__icon { display: none; }
.voice-btn.is-recording .voice-btn__dot { display: inline-block; }
.voice-btn.is-working .voice-btn__icon { animation: voice-pulse 1s ease-in-out infinite; }
.voice-btn--quiet { padding: 0; border-color: transparent; color: var(--text-2); }

.voice-note { font-size: 0.875rem; font-weight: 600; color: var(--st-fixed-ink); }
.voice-note[data-tone="error"] { color: var(--danger); }
.voice-note[data-tone="warn"] { color: var(--st-needs-ink); }
.voice-note[data-tone=""] { color: var(--text-2); }

/* ------------------------------------------------------------ Speak instead card */

.voice-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--brand-wash);
}
.voice-card__intro { display: flex; gap: 12px; align-items: flex-start; }
.voice-card__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--brand-ink);
}
.voice-card__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.voice-card__title { font-weight: 700; color: var(--text); }
.voice-card__text { color: var(--text-2); font-size: 0.9375rem; }
.voice-card__fine { color: var(--text-3); font-size: 0.8125rem; }
.voice-card__live { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.voice-card__rec { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 700; font-size: 0.875rem; }
.voice-card__rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: voice-pulse 1.2s ease-in-out infinite; }
.voice-meter { display: inline-flex; align-items: center; gap: 3px; height: 24px; }
.voice-meter__bar { width: 4px; height: 24px; border-radius: 2px; background: var(--brand); transform: scaleY(0.18); transition: transform 0.08s linear; }
.voice-card__clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); }
.voice-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-card.is-recording .voice-card__actions .btn--primary { background: var(--danger); color: var(--on-status); }
@media (hover: hover) { .voice-card.is-recording .voice-card__actions .btn--primary:hover:not(:disabled) { background: var(--danger); filter: brightness(0.9); } }
.voice-card__result { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.voice-card__status { font-weight: 600; color: var(--st-fixed-ink); font-size: 0.9375rem; }
.voice-card__status[data-tone="error"] { color: var(--danger); }
.voice-card__status[data-tone="warn"] { color: var(--st-needs-ink); }
.voice-card__status[data-tone=""] { color: var(--text-2); }
.voice-card__heard summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--link); font-weight: 600; }
.voice-card__heard-text {
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); font-size: 0.9375rem;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}

/* ------------------------------------------------------------ paste */

.picker__paste { align-self: flex-start; }
.report-tips__note--tip { color: var(--text-2); font-weight: 500; }

/* With actions the text keeps at least 170px and the buttons drop to a
   second row on narrow phones instead of squeezing the words. */
.toast--actions { flex-wrap: wrap; row-gap: 2px; }
.toast--actions .toast__text { flex: 1 1 170px; }
.toast__action {
  flex-shrink: 0; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF;
  font: 700 0.875rem/1 var(--font);
}
@media (hover: hover) { .toast__action:hover { background: rgba(255, 255, 255, 0.22); } }

/* ------------------------------------------------------------ highlights */

.field.is-filled .input, .picker__item.is-new { animation: voice-filled 2.4s ease-out; }
@keyframes voice-filled {
  0%, 45% { border-color: var(--st-fixed); box-shadow: 0 0 0 3px var(--st-fixed-bg); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }