/* voice-v2 recording panel. Neutral hooks: the host app's tokens win (BasketWise 0.1.8: --act tomato, cream bg, white cards, --f-num Inter;
   Garage Bins: --ink / steel, set --vr-font-num to Barlow Condensed). Red (#E0362B mic, #C62828 REC pill) appears ONLY while recording live. */
.vr { --vr-red: #E0362B; --vr-rec-pill: #C62828; --vr-ink: var(--ink, #1f1d1a); --vr-sub: var(--muted, var(--sub, var(--mute, #5F6672)));
  --vr-accent: var(--accent, var(--act, #E8533B)); --vr-card: var(--card, #fff); --vr-line: var(--line, rgba(0,0,0,.10)); --vr-level: 0;
  --vr-on-ink: #fff; --vr-accent-fg: #fff;   /* text on an ink fill / on the accent fill; a dark theme overrides both (App QA: AA in dark mode) */
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 12px; width: 100%; box-sizing: border-box; color: var(--vr-ink); text-align: center; }
.vr [hidden] { display: none !important; }
.vr-stage { position: relative; }
.vr-mic { width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; position: relative;
  background: var(--vr-card); color: var(--vr-ink); box-shadow: 0 2px 10px rgba(0,0,0,.12), inset 0 0 0 2px var(--vr-line); transition: transform .15s, background .2s; -webkit-tap-highlight-color: transparent; }
.vr-mic .vr-ico { width: 46px; height: 46px; grid-area: 1 / 1; }
.vr-mic .vr-ico-off, .vr-mic .vr-spin, .vr-mic .vr-badge { display: none; }
.vr-mic:active { transform: scale(.96); }
.vr-mic:disabled { cursor: default; }
.vr-mic::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--vr-red); opacity: 0; pointer-events: none; }
/* live: the only red */
.vr[data-state="recording"] .vr-mic { background: var(--vr-red); color: #fff; box-shadow: 0 0 0 calc(4px + var(--vr-level) * 18px) rgba(224,54,43,.22), 0 4px 16px rgba(224,54,43,.35); }
.vr[data-state="recording"] .vr-mic::after { animation: vr-pulse 1.4s ease-out infinite; }
/* paused: ink ring + glyph + ⏸ badge, never red */
.vr[data-state="paused"] .vr-mic { background: var(--vr-card); color: var(--vr-ink); box-shadow: inset 0 0 0 3px var(--vr-ink), 0 2px 10px rgba(0,0,0,.10); }
.vr[data-state="paused"] .vr-badge { display: grid; place-items: center; position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--vr-ink); color: var(--vr-on-ink); box-shadow: 0 0 0 3px var(--vr-card); grid-auto-flow: column; gap: 4px; place-content: center; }
.vr-badge i { display: block; width: 4px; height: 14px; border-radius: 1px; background: var(--vr-on-ink); }   /* ⏸ in ink, drawn (the emoji renders orange) */
/* transcribing: spinner in the mic + next to the text */
.vr[data-state="transcribing"] .vr-mic .vr-ico-mic { opacity: .25; }
.vr[data-state="transcribing"] .vr-mic .vr-spin { display: block; grid-area: 1 / 1; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--vr-line); border-top-color: var(--vr-ink); animation: vr-rot .8s linear infinite; }
.vr-spin-sm { display: none; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--vr-line); border-top-color: var(--vr-ink); vertical-align: -2px; animation: vr-rot .8s linear infinite; }
.vr[data-state="transcribing"] .vr-spin-sm { display: inline-block; }
/* denied: crossed-out, disabled mic */
.vr[data-state="denied"] .vr-mic { opacity: .55; box-shadow: inset 0 0 0 2px var(--vr-line); }
.vr[data-state="denied"] .vr-mic .vr-ico-mic { display: none; }
.vr[data-state="denied"] .vr-mic .vr-ico-off { display: block; }
@keyframes vr-pulse { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes vr-rot { to { transform: rotate(360deg); } }
/* timer row: pills + clock */
.vr-timeline { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; }
.vr-pill { display: none; padding: 4px 10px; border-radius: 999px; font: 700 13px/1.2 var(--f-ui, system-ui, sans-serif); letter-spacing: .04em; white-space: nowrap; }
.vr-rec { background: var(--vr-rec-pill); color: #fff; }                         /* white on #C62828 = 5.62:1 */
.vr-paused { background: var(--vr-ink); color: var(--vr-on-ink); }
.vr-blocked { background: var(--vr-card); color: var(--vr-ink); box-shadow: inset 0 0 0 2px var(--vr-ink); }
.vr[data-state="recording"] .vr-rec, .vr[data-state="paused"] .vr-paused, .vr[data-state="denied"] .vr-blocked { display: inline-block; }
.vr[data-state="denied"] .vr-clock { display: none; }
.vr-clock { font-family: var(--vr-font-num, var(--font-num, var(--f-num, Inter, system-ui, sans-serif))); font-weight: 700; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .01em; color: var(--vr-ink); }
.vr-meter { display: flex; align-items: center; gap: 3px; height: 36px; width: min(280px, 86%); }
.vr-meter i { flex: 1; height: 100%; border-radius: 2px; background: var(--vr-sub); opacity: .35; transform: scaleY(.1); transform-origin: center; transition: transform 60ms linear; }
.vr[data-state="recording"] .vr-meter i { background: var(--vr-ink); opacity: .8; }      /* ink, never the brand red */
.vr-status { margin: 0; min-height: 2.6em; font-size: 15px; line-height: 1.3; color: var(--vr-sub); max-width: 34ch; }
.vr-status.vr-warn { color: var(--vr-ink); font-weight: 600; }
.vr-howto { max-width: 36ch; text-align: left; }
.vr-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 0 -12px; background: none; border: 0; padding: 0 12px; font: inherit; font-weight: 700; color: var(--vr-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vr-howto-body { font-size: 14px; color: var(--vr-ink); } .vr-howto-body p { margin: 6px 0; }
.vr-actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: center; width: min(100%, 360px); }
.vr-btn { flex: 1 1 0; min-width: auto; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--vr-line); background: var(--vr-card); color: var(--vr-ink);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }   /* no ellipsis: labels always show in full */
.vr-done { flex: 1.15 1 0; background: var(--vr-accent); color: var(--vr-accent-fg); border-color: transparent; }
.vr-retry { margin-top: 6px; width: auto; flex: none; padding: 0 18px; }
.vr-preview { margin: 0; font-size: 14px; color: var(--vr-sub); font-style: italic; max-width: 40ch; }
.vr-preview::before { content: "Live preview (not final): "; font-style: normal; font-weight: 600; }
.vr-debug { margin: 0; font: 12px/1.3 ui-monospace, Menlo, monospace; color: var(--vr-sub); }
@media (prefers-reduced-motion: reduce) { .vr-mic::after, .vr-spin, .vr-spin-sm { animation: none !important; } }
[data-vr-hide][hidden] { display: none !important; }   /* host elements the panel hides while live (BasketWise Keyboard button) */
@media (max-width: 380px) { .vr-actions { gap: 6px; } .vr-btn { padding: 0 6px; font-size: 15px; letter-spacing: 0; } }   /* 360: Resume / Cancel / Done in full on one row, still 44 px tall */
/* 0.1.10 (App QA 0.1.9 fail 2): the HIT box is the full rectangular <button> (Chrome clips hit-testing to border-radius), min 48 px tall;
   the visible pill is the inner .vr-face (its own background, so text contrast is measured against the real pill), corners/edges still hit the button. */
.vr-actions .vr-btn { display: flex; align-items: stretch; padding: 0; border-radius: 0; border: 0; background: transparent; min-height: 48px; min-width: 48px; flex: 1 0 auto; }
.vr-actions .vr-done { flex: 1.15 0 auto; }
.vr-actions .vr-face { flex: 1; display: flex; align-items: center; justify-content: center; margin: 2px 0; padding: 0 10px; border-radius: 999px; border: 1px solid var(--vr-line); background: var(--vr-card); color: var(--vr-ink); pointer-events: none; }
.vr-actions .vr-done .vr-face { background: var(--vr-accent); color: var(--vr-accent-fg); border-color: transparent; }
.vr-actions .vr-btn:focus-visible { outline: none; } .vr-actions .vr-btn:focus-visible .vr-face { outline: 3px solid var(--vr-ink); outline-offset: 2px; }
@media (max-width: 380px) { .vr-actions .vr-face { padding: 0 6px; } }