/* Voice mode (shared/chat/voice-mode.js). The Voice button in the composer's
   row, after the mic: a quiet round button like the mic (docs/design-system.md
   §6.5) with a sound wave. The view it opens over the chat: a large orb in the
   two accents that follows the microphone while Lumio listens and Lumio's
   voice while it speaks (--level, 0–1, set through the CSSOM), breathing while
   it thinks; what's happening in words under it; Mute and End at the bottom.
   Colors are theme.css's tokens, so both themes follow. With less motion (the
   device's setting, or Settings' html[data-motion="reduce"]) the orb stays
   still and the words say what's happening. Every class is lc-voice…; rules
   sit under their parents so the shells' button resets don't win. */

/* ------------------------------------------------------------ the composer's button */
.lc-voice-slot { display: contents; }
.lc-voice-wrap { position: relative; display: inline-flex; flex: none; }
.lc-voice-wrap[hidden] { display: none !important; }
.lc-voice-wrap .lc-voice-open {
  display: grid; place-items: center; flex: none; padding: 0; margin: 0;
  width: var(--cmp-ctl, 32px); height: var(--cmp-ctl, 32px); border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--dim); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-voice-wrap .lc-voice-open:hover, .lc-voice-wrap .lc-voice-open[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.lc-voice-wrap .lc-voice-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lc-voice-wrap .lc-voice-open svg { display: block; width: 17px; height: 17px; }
/* Compact: a composer under 480 px (Appendix A), like the mic. */
@container (max-width: 479px) {
  .lc-voice-wrap .lc-voice-open { width: var(--cmp-ctl, 28px); height: var(--cmp-ctl, 28px); }
  .lc-voice-wrap .lc-voice-open svg { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------ the view over the chat */
.lc-voice {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-6, 24px) var(--sp-4, 16px) max(var(--sp-6, 24px), env(safe-area-inset-bottom));
  background: var(--bg); color: var(--text);
  animation: lc-voice-in var(--dur-4) var(--ease-out);
}
@keyframes lc-voice-in { from { opacity: 0; } }
.lc-voice-stage {
  flex: 1; min-height: 0; width: 100%; max-width: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3, 12px); text-align: center;
}
.lc-voice .lc-voice-orb {
  --lc-orb: clamp(132px, 36vmin, 232px);
  position: relative; display: grid; place-items: center; flex: none; width: var(--lc-orb); height: var(--lc-orb);
  margin: 0 0 var(--sp-5, 20px); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lc-voice .lc-voice-orb[aria-disabled="true"] { cursor: default; }
.lc-voice .lc-voice-orb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 8px; }
.lc-voice-orb-body {
  width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--accent2)) 52%, var(--accent2) 100%);
  box-shadow: 0 0 calc(18px + var(--level, 0) * 64px) calc(var(--level, 0) * 10px) color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 -10px 28px color-mix(in srgb, var(--accent2) 55%, transparent);
  transform: scale(calc(.9 + var(--level, 0) * .2));
  transition: transform 90ms linear, box-shadow 90ms linear, opacity var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}
.lc-voice-orb[data-state="starting"] .lc-voice-orb-body { opacity: .55; }
.lc-voice-orb:is([data-state="transcribing"], [data-state="thinking"]) .lc-voice-orb-body { animation: lc-voice-breathe 1.6s var(--ease-in-out) infinite alternate; }
@keyframes lc-voice-breathe { from { transform: scale(.88); } to { transform: scale(.97); } }
.lc-voice-orb[data-state="muted"] .lc-voice-orb-body { opacity: .45; filter: saturate(0); }
.lc-voice-orb[data-state="error"] .lc-voice-orb-body { opacity: .5; filter: saturate(.3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 55%, transparent); }
.lc-voice-status { margin: 0; min-height: 1.3em; color: var(--text); font: 600 var(--fs-title, 17px)/1.3 var(--font); }
.lc-voice[data-state="error"] .lc-voice-status { color: var(--danger-text); }
.lc-voice-detail {
  margin: 0; max-width: 460px; min-height: 1.45em; overflow: hidden; overflow-wrap: anywhere;
  color: var(--dim); font: 400 var(--fs-body, 14px)/1.45 var(--font);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.lc-voice-detail.is-note { color: var(--warn-text); }

/* ------------------------------------------------------------ Mute and End */
.lc-voice-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--sp-5, 20px); padding-top: var(--sp-4, 16px); }
.lc-voice .lc-voice-btn {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--text); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.lc-voice .lc-voice-btn:hover:not(:disabled) { background: var(--card-hover); }
.lc-voice .lc-voice-btn:active:not(:disabled) { transform: scale(.94); }
.lc-voice .lc-voice-btn:disabled { opacity: .4; cursor: default; }
.lc-voice .lc-voice-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lc-voice .lc-voice-btn svg { display: block; width: 22px; height: 22px; }
.lc-voice .lc-voice-mute[aria-pressed="true"] { background: var(--active); border-color: color-mix(in srgb, var(--danger-fill) 35%, transparent); color: var(--danger-text); }
.lc-voice .lc-voice-end { border-color: transparent; background: var(--danger-fill); color: var(--on-danger); }
.lc-voice .lc-voice-end:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-fill) 88%, var(--text-strong)); }

/* ------------------------------------------------------------ less motion: the orb stays still */
@media (prefers-reduced-motion: reduce) {
  .lc-voice { animation: none; }
  .lc-voice .lc-voice-orb-body { transform: none !important; animation: none !important; transition: none; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); }
}
html[data-motion="reduce"] .lc-voice { animation: none; }
html[data-motion="reduce"] .lc-voice .lc-voice-orb-body { transform: none !important; animation: none !important; transition: none; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); }