/* Voice (increment VUI step 2): the hold-to-talk mic on the capture bar, its
 * panel, and the voice notes' draft cards in the tray.
 *
 * Colours from tokens.css only — the wireframe's language (docs/ui/MOCKUP.html):
 * green for structure, orange for what needs attention or is happening now,
 * the sunken wash for a quiet panel, chips for what was read out of words.
 * capture.css and day.css take no new rules (NEXT-PLAN §6.6); everything for
 * voice is here. Nothing grows a transform, filter or contain on an ancestor of
 * the sheets (views.css's note): the dot's pulse is on the dot alone.
 */

/* ------------------------------------------------------------- the button */

/* A fourth cell of the foot: ₹ | Photo | Speak | Note at 1.3 : 1 : 1 : 1
 * (capture.css's grid gives every cell after ₹ an equal share). Two lines —
 * the word and the language chip's choice — in the 44 px target. */
.capture__speak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-1);
  line-height: 1.15;
  /* A hold is a hold: no scroll, no zoom, no text selection, no callout —
   * and no grey tap flash left on the cell after the finger comes up (the
   * orange of listening is the feedback). */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.capture__speak[hidden] {
  display: none;
}

.speak__word {
  font-weight: 700;
}

.speak__lang {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Listening: the cell the thumb is on turns orange — what is happening now. */
.capture__speak[data-state="listening"] {
  background: var(--emphasis);
  border-color: var(--emphasis-edge);
  color: var(--ps-charcoal);
}

.capture__speak[data-state="listening"] .speak__lang {
  color: var(--ps-charcoal);
}

.capture__speak[data-mic="blocked"] .speak__lang {
  color: var(--danger);
}

/* -------------------------------------------------------------- the panel */

.voice {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}

.voice[hidden] {
  display: none;
}

.voice--listening {
  border-inline-start-color: var(--emphasis-edge);
}

.voice--refused {
  border-inline-start-color: var(--danger);
}

.voice__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  margin: 0;
}

.voice__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.voice--refused .voice__title {
  color: var(--danger);
}

/* The listening dot: orange, pulsing — the global reduced-motion rule in
 * tokens.css stills it. */
.voice__dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--emphasis);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.voice__time {
  flex: none;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

/* The live words: what is final in ink, what is still being heard muted. They
 * scroll inside themselves past five lines, so the dock never outgrows the
 * screen while he talks. */
.voice__words {
  max-height: 7.5rem;
  margin: 0;
  overflow-y: auto;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.voice__interim,
.voice__hint {
  color: var(--ink-muted);
}

.voice__interim {
  font-style: italic;
}

.voice__detail,
.voice__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.voice__note--server {
  color: var(--warn-ink);
  font-weight: 600;
}

.voice__close {
  flex: none;
  width: var(--touch);
  height: var(--touch);
  margin-inline-end: calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.voice__close:focus-visible,
.voice__lang:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The language chip: four toggles, the chosen one in the structural green. */
.voice__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.voice__lang {
  min-height: var(--touch);
  cursor: pointer;
}

.voice__lang[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.voice__done {
  width: 100%;
}

/* ------------------------------------------------ the tray's voice cards */

/* A voice note in the tray (voice-drafts.js): what was heard, the read-back,
 * then one draft per record — its kind, its own words, a confidence badge and
 * chips for the names — and Confirm all. The cards' frame is tray.css's. */
.vd__heard {
  margin: 0 0 var(--space-2);
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--text-md);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vd__echo {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: var(--text-base);
  font-style: italic;
  overflow-wrap: anywhere;
}

.vd__status {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.vd__audio {
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--touch);
  margin: 0 0 var(--space-2);
}

.vd__records {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vd__record {
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.vd__record--expense {
  background: var(--tint-money);
  border-color: transparent;
}

.vd__record--move {
  background: var(--tint-move);
  border-color: transparent;
}

/* A draft dismissed on this card: one muted line and its Restore. */
.vd__record--dismissed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border-style: dashed;
  color: var(--ink-muted);
}

.vd__record--done {
  border-style: dashed;
  color: var(--ink-muted);
}

.vd__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.vd__kind {
  color: var(--warn-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vd__record--expense .vd__kind {
  color: var(--ok);
}

.vd__headline {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The confidence badge, in words and a figure: sure in green, check and
 * unsure in orange (§3.9 "a confidence badge"). */
.vd__badge {
  flex: none;
  margin-inline-start: auto;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ok);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.vd__badge--mid,
.vd__badge--low {
  border-color: var(--emphasis-edge);
  color: var(--warn-ink);
}

.vd__badge--low {
  border-style: dashed;
}

/* The words the draft came from, as said. */
.vd__words {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-style: italic;
  overflow-wrap: anywhere;
}

.vd__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.vd__detail {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.vd__record--expense .vd__detail,
.vd__record--move .vd__detail {
  background: var(--surface);
}

/* A name chip: a button, because a tap corrects it (the alias route). */
.vd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.vd__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  max-width: 100%;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--tint-link);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.vd__chip--ask {
  border-color: var(--emphasis-edge);
  border-style: dashed;
  background: var(--surface);
  color: var(--warn-ink);
}

.vd__chip:focus-visible,
.vd__pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vd__chip-role {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* The picker a chip opens, in place under its record. */
.vd__picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.vd__picker-head {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 700;
}

.vd__search {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.vd__search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.vd__picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vd__pick {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.vd__pick--none {
  background: var(--surface);
  color: var(--ink-muted);
}

.vd__needs {
  margin: var(--space-2) 0 0;
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vd__record-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.vd__record-actions .btn,
.vd__record--dismissed .btn {
  width: auto;
  padding-inline: var(--space-3);
}

.vd__record--dismissed .btn {
  margin-inline-start: auto;
}

.vd__foot {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* A question asked aloud: answers are v0.5's (Prompt 14 item 6). Muted, as
 * the wireframe's system line. */
.vd--query .vd__echo,
.vd--query .vd__heard {
  color: var(--ink-muted);
}