/* "Your voice" (voiceprint.js): a side sheet like Agent sharing's (a2a.css). Tokens only. */
.vp-sheet {
  width: min(30rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  border-left: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface);
  color: var(--sv-ink);
}
.vp-sheet::backdrop { background: color-mix(in srgb, var(--sv-ink) 18%, transparent); }
.vp-sheet[open] { display: flex; flex-direction: column; }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); padding-top: max(var(--sv-space-3), env(safe-area-inset-top)); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.vp-head h2 { margin: 0; font-size: var(--sv-text-h4); }
.vp-head button { min-width: 44px; min-height: 44px; }
.vp-body { flex: 1; overflow: auto; display: grid; align-content: start; gap: var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4) max(var(--sv-space-4), env(safe-area-inset-bottom)); }
.vp-muted { margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: var(--sv-leading-body); }
.vp-error { margin: 0; color: var(--sv-attention); font-size: var(--ui-meta); }
.vp-state { margin: 0; font-weight: 600; }
.vp-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.vp-body button.vp-action { min-height: 44px; height: auto; padding-inline: var(--sv-space-3); display: inline-flex; align-items: center; gap: var(--sv-space-2); }
.vp-consent { display: flex; align-items: flex-start; gap: var(--sv-space-3); cursor: pointer; line-height: var(--sv-leading-body); }
.vp-consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sv-ink); }
.vp-passage { margin: 0; padding: var(--sv-space-3) var(--sv-space-4); border-left: 3px solid var(--sv-ink); background: var(--sv-fill-1); font-size: 1.125rem; line-height: 1.5; }
.vp-bar { height: 4px; background: var(--sv-fill-2); }
.vp-fill { width: 0; height: 100%; background: var(--sv-ink); transition: width 250ms linear; }
@media (prefers-reduced-motion: reduce) { .vp-fill { transition: none; } }
@media (max-width: 760px) { .vp-sheet { width: 100vw; border-left: none; } }