/* NasrinAI voice screen (docs/voice-screen.md). Monochrome and minimal:
   - the conversation at the top, fading out toward the top edge;
   - a glowing liquid orb in the lower centre that ripples out sound waves
     (drawn by voice-wave.js); tapping it while Nasrin talks stops her;
   - one row of controls: Plus and the tier on the left, mute and exit on
     the right.
   Everything is scoped to .voice-screen: Settings' voice list uses .voice
   for its rows. Colours come from the theme tokens in app.css. */

.voice-screen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  height: 100dvh; overflow: hidden; isolation: isolate;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: radial-gradient(80% 50% at 50% 74%, var(--bg-glow), transparent 72%) var(--paper);
  color: var(--ink);
  animation: voice-screen-in var(--dur-slow, 320ms) var(--ease, ease) both;
}
.voice-screen[hidden] { display: none; }
body.voice-open { overflow: hidden; }
@keyframes voice-screen-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the conversation, top of the screen, fading upward ---------- */
.voice-log {
  position: absolute; z-index: 1; top: 0; left: 0; right: 0;
  height: 44dvh;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: calc(max(0.75rem, env(safe-area-inset-top)) + 2.5rem) max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 55%, #000 100%);
}
.voice-log::-webkit-scrollbar { display: none; }
/* The newest lines sit at the bottom of the band, nearest the orb. */
.voice-log::before { content: ""; flex: 1 0 auto; }
.voice-log .vmsg {
  width: min(100%, 38rem); margin: 0 auto;
  font: 400 1.02rem/1.45 var(--sans); overflow-wrap: anywhere; white-space: pre-wrap;
  animation: voice-line-in var(--dur, 220ms) var(--ease, ease) both;
}
.voice-log .vmsg.user { text-align: right; color: var(--ink-2); }
.voice-log .vmsg.assistant { color: var(--ink); }
.voice-log .vmsg.hint { color: var(--ink-3); font-size: 0.8rem; text-align: center; }
.voice-log .vmsg.is-live { opacity: 0.6; }
.vfile {
  display: inline-block; margin-top: 0.4rem; padding: 0.35rem 0.75rem;
  border: 0.5px solid var(--glass-line); border-radius: 999px; background: var(--glass);
  color: var(--ink); font: 500 0.82rem/1.2 var(--sans); cursor: pointer;
}
@keyframes voice-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- the orb, lower centre ---------- */
.voice-stage {
  position: relative; z-index: 0; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 0.25rem; padding-bottom: clamp(0.75rem, 3vh, 2rem);
}
.voice-orb {
  position: relative; display: block; flex: none;
  width: min(92vw, 44dvh, 26rem); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: default;
}
.voice-orb:not(:disabled) { cursor: pointer; }
.voice-orb:focus-visible { outline: 2px solid var(--ink); outline-offset: -18%; }
.voice-wave { position: absolute; inset: 0; display: block; pointer-events: none; }
.voice-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.voice-wave .vo-a { stop-color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
.voice-wave .vo-b { stop-color: var(--ink); }
.voice-wave .vo-glow { fill: var(--ink); opacity: 0.22; }
.voice-wave .vo-sheen { fill: var(--paper); opacity: 0.2; }
.voice-wave .vo-ring { fill: none; stroke: var(--ink); }
/* Dark: a white drop, lit from the top left, with a brighter glow. */
:root[data-theme="dark"] .voice-wave .vo-a { stop-color: #FFFFFF; }
:root[data-theme="dark"] .voice-wave .vo-b { stop-color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
:root[data-theme="dark"] .voice-wave .vo-sheen { fill: #FFFFFF; opacity: 0.55; }
:root[data-theme="dark"] .voice-wave .vo-glow { opacity: 0.5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .voice-wave .vo-a { stop-color: #FFFFFF; }
  :root:not([data-theme="light"]) .voice-wave .vo-b { stop-color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
  :root:not([data-theme="light"]) .voice-wave .vo-sheen { fill: #FFFFFF; opacity: 0.55; }
  :root:not([data-theme="light"]) .voice-wave .vo-glow { opacity: 0.5; }
}
.voice-screen[data-state="paused"] .voice-wave { opacity: 0.45; }
.voice-wave { transition: opacity var(--dur-slow, 320ms) var(--ease, ease); }
.voice-status { margin: 0; min-height: 1.4em; color: var(--ink-3); font: 500 0.92rem/1.4 var(--round); text-align: center; }

/* ---------- one row of controls ---------- */
.voice-controls {
  position: relative; z-index: 2; flex: none; width: min(100%, 34rem);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.voice-control-group { display: flex; align-items: center; gap: 0.6rem; }
.voice-control-popover-wrap { position: relative; flex: none; }
.voice-control {
  display: inline-grid; place-items: center; flex: none;
  width: 3.25rem; height: 3.25rem; padding: 0;
  border: 0.5px solid var(--glass-line); border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink); box-shadow: var(--elev-1); cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur, 220ms) var(--ease-spring, ease), background-color var(--dur-fast, 140ms) var(--ease, ease), color var(--dur-fast, 140ms) var(--ease, ease);
}
.voice-control svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.voice-control:active { transform: scale(0.92); background: var(--press); }
.voice-control:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The tier: an icon, the same signal bars as the chat's model button. */
.voice-tier .bars { width: 1.45rem; height: 1.45rem; stroke: none; }
/* The mic looks like every other control; muted, it shows the crossed-out
   mic on a filled circle so the state is clear. */
.voice-control-mic .voice-icon-mic-off { display: none; }
.voice-control-mic[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.voice-control-mic[aria-pressed="true"] .voice-icon-mic { display: none; }
.voice-control-mic[aria-pressed="true"] .voice-icon-mic-off { display: block; }

.voice-popover {
  position: absolute; left: 0; bottom: calc(100% + 0.6rem); z-index: 5; min-width: 12rem; padding: 0.35rem;
  border: 0.5px solid var(--glass-line); border-radius: 1.1rem;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2);
  animation: voice-pop-in var(--dur, 220ms) var(--ease-spring, ease) both; transform-origin: 1.5rem 100%;
}
.voice-popover[hidden] { display: none; }
.voice-popover button {
  display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem;
  border: 0; border-radius: 0.8rem; background: none; color: var(--ink); text-align: left; font: 500 0.92rem/1.2 var(--sans); cursor: pointer;
}
.voice-popover button:hover, .voice-popover button:focus-visible { background: var(--press); outline: none; }
.voice-popover button:disabled { opacity: 0.45; cursor: not-allowed; }
.voice-tier-option .tier-copy { display: flex; flex-direction: column; }
.voice-tier-option .tier-desc { display: block; margin-top: 0.12rem; color: var(--ink-3); font-size: 0.7rem; font-weight: 450; }
.voice-tier-option[aria-current="true"] strong::after { content: " ✓"; }
@keyframes voice-pop-in { from { opacity: 0; transform: translateY(5px) scale(0.95); } to { opacity: 1; transform: none; } }

/* ---------- small and wide screens ---------- */
@media (max-width: 360px) {
  .voice-control { width: 2.9rem; height: 2.9rem; }
  .voice-control-group { gap: 0.45rem; }
}
@media (max-height: 560px) {
  .voice-log { height: 38dvh; padding-top: max(0.5rem, env(safe-area-inset-top)); }
  .voice-orb { width: min(60vw, 46dvh); }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .voice-screen, .voice-log .vmsg, .voice-popover { animation: none; }
  .voice-control, .voice-wave { transition: none; }
  .voice-control:active { transform: none; }
}
:root[data-motion="reduce"] .voice-screen,
:root[data-motion="reduce"] .voice-log .vmsg,
:root[data-motion="reduce"] .voice-popover { animation: none; }
:root[data-motion="reduce"] .voice-control:active { transform: none; }