/* ═══════════════ EthixD — voice (W5): dictation bar, consent sheet, the voice-call prototype ═══════════════
   Loaded after shell.css; extends its .rec-bar and .call rules. Mobile first: 820 / 640 / 380 px. */

/* ─── the mic: a hold gesture must not select text or open the long-press menu ─── */
.composer .c-mic{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.composer .c-mic:focus-visible{outline:2px solid var(--gold,#B6996C);outline-offset:2px}
/* press-and-hold needs a finger-sized target on touch screens (the desktop icon button stays compact) */
@media (pointer:coarse){.composer .c-mic{width:44px;height:44px}}

/* ─── the dictation bar ─── */
/* The bars move only with the real microphone (.live). Without a level (Android, no capture) they stay still:
   the pulsing dot says "recording", nothing pretends to be a level. */
.rec-bar:not(.live) .rec-wave i,.rec-bar.hot:not(.live) .rec-wave i{animation:none;transform:none;opacity:.35}
.rec-txt{min-width:0}
.rec-interim{display:block;font-size:13px;line-height:1.4;color:var(--ink-soft);overflow:hidden;white-space:nowrap;min-height:0}
.rec-interim:empty{display:none}
.rec-bar.hold .rec-pulse{background:#C2473A}
@media (max-width:380px){
  .rec-bar{gap:8px}
  .rec-wave{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rec-pulse{animation:none}
  .rec-bar.live .rec-wave i{transition:none}
}

/* ─── consent sheet ─── */
.voice-consent{display:grid;gap:10px}
.voice-consent .vc-p{margin:0;line-height:1.65;font-size:14.5px}
.voice-consent .vc-note{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold,#B6996C) 12%,transparent)}
.voice-consent .vc-muted{color:var(--muted);font-size:13.5px}

/* ─── the voice call ─── */
/* The call is a full-screen modal: above the cookie banner (pages.css, 850 — seen covering the call's controls in a
   real browser), below the toasts (core.css, 900) that tell the customer what happened. */
.voice-call{z-index:860;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.voice-call .call-center{gap:12px}
.voice-call .call-status:focus,.voice-call .call-caption:focus{outline:none}
.voice-call .call-status:focus-visible,.voice-call .call-caption:focus-visible{outline:2px solid #E9D6B2;outline-offset:4px;border-radius:6px}
.call-review:focus{outline:none}
.call-review:focus-visible{outline:2px solid #E9D6B2;outline-offset:6px;border-radius:12px}
.voice-call .call-caption{max-height:38vh;overflow-y:auto;overscroll-behavior:contain}
.voice-call .call-note{max-width:520px;line-height:1.55;background:rgba(255,255,255,.08);color:rgba(243,237,227,.86)}
.call-wait{margin:0;font-size:13.5px;color:rgba(243,237,227,.72)}
.call-talk,.call-stopwait{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:22px;background:rgba(255,255,255,.1);color:#F3EDE3;border:1px solid rgba(255,255,255,.18)}
.call-talk .i,.call-stopwait .i{width:18px;height:18px}
.call-talk:focus-visible,.call-stopwait:focus-visible,.call-review .b:focus-visible{outline:2px solid #E9D6B2;outline-offset:2px}
.voice-call[data-state="speaking"] .call-talk{background:rgba(240,138,110,.2);border-color:rgba(240,138,110,.45)}
.call-review{position:relative;z-index:1;display:grid;gap:10px;width:100%;max-width:520px;animation:rise-in .4s var(--ios)}
.call-review-label{font-size:13.5px;font-weight:600;color:rgba(243,237,227,.82)}
.call-review .input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;border-radius:16px;min-height:88px;resize:vertical;font-size:16px;line-height:1.6}
.call-review-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.call-review-actions .b{min-height:44px;display:inline-flex;align-items:center;gap:8px}
.call-review-actions .b .i{width:18px;height:18px}
.call-review-actions .b-soft{background:rgba(255,255,255,.1);color:#F3EDE3}
.voice-call[data-state="review"] .call-orb,.voice-call[data-state="thinking"] .call-orb{width:min(170px,40vw)}
@media (max-width:640px){
  .voice-call .call-orb{width:min(200px,52vw)}
  .voice-call[data-state="review"] .call-orb,.voice-call[data-state="review"] .call-note{display:none}
  .voice-call[data-state="review"] .call-caption:empty{min-height:0}
  /* the on-screen keyboard is up: the review's own actions matter, the call controls can wait */
  .voice-call:has(.call-review textarea:focus) .call-controls,.voice-call:has(.call-type input:focus) .call-note{display:none}
  .voice-call .cb-ic{width:54px;height:54px}
}
@media (max-width:380px){
  .voice-call{padding-left:12px;padding-right:12px}
  .voice-call .call-controls{gap:8px}
  .voice-call .cb-ic{width:48px;height:48px}
  .voice-call .call-btn{font-size:10.5px}
  .call-review-actions .b{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .call-review{animation:none}
}

/* ─── the call while it is not offered: a note on both homes, never a button (chat.js callSoonHTML) ─── */
.call-soon{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:520px;margin-top:16px;padding:10px 14px;
  border-radius:14px;border:1px dashed color-mix(in srgb,var(--gold,#B6996C) 55%,var(--line));
  background:color-mix(in srgb,var(--gold,#B6996C) 7%,transparent);text-align:start}
.call-soon .cs-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--gold-text,#8A6D3F);
  background:color-mix(in srgb,var(--gold,#B6996C) 16%,transparent)}
.call-soon .cs-ic .i{width:17px;height:17px}
.call-soon .cs-txt{display:grid;gap:2px;min-width:0;line-height:1.5}
.call-soon .cs-txt b{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.call-soon .cs-txt small{font-size:12.5px;color:var(--muted)}
/* the buddy (buddy.js) stands at the inline end just above the composer on a phone: the note's words stay clear of him */
@media (max-width:640px){.call-soon{padding-inline-end:56px}}
@media (max-width:380px){
  .call-soon{margin-top:12px;padding:9px 56px 9px 11px;gap:8px}
  html[dir="rtl"] .call-soon{padding:9px 11px 9px 56px}
  .call-soon .cs-ic{width:28px;height:28px}
}

/* ─── dictating into a case-file answer box (voice-live.js cardDictation) ─── */
.fq-line.has-mic{display:flex;align-items:flex-start;gap:8px;min-width:0}
.fq-line.has-mic .fq-input{flex:1;min-width:0}
.fq-mic{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fq-mic .i{width:18px;height:18px}
.fq-mic:focus-visible{outline:2px solid var(--gold,#B6996C);outline-offset:2px}
.fq-mic:disabled{opacity:.45;cursor:default}
.fq-mic.listening{color:#fff;border-color:transparent;background:linear-gradient(135deg,#F08A6E,#D0453A)}
@media (hover:hover){.fq-mic:not(:disabled):not(.listening):hover{color:var(--ink);border-color:color-mix(in srgb,var(--gold,#B6996C) 60%,var(--line))}}
.rec-bar.fq-rec{margin:0;padding:6px 10px;gap:8px;border-radius:12px}
html[dir="rtl"] .rec-bar.fq-rec{padding:6px 10px}
.rec-bar.fq-rec .rec-txt b{font-size:12.5px}
.rec-bar.fq-rec .rec-txt small{font-size:11.5px}
.rec-bar.fq-rec[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.rec-bar.fq-rec{animation:none}}