@oxvo/ai-live-assist 7.3.0

package/lib/voicePresenceUi.js

@@ -0,0 +1,2178 @@
+import { AudioWaveform, RefreshCw, ShieldCheck, UserRound, X, createElement as createLucideElement, } from "lucide";
+import { VoicePresenceStateMachine } from "./experienceState.js";
+import { defaultMessages } from "./messages.js";
+import { LauncherPlacementController, getDocumentDirection, } from "./placement.js";
+import { createSafeSvgIcon } from "./safeSvg.js";
+const compactUiText = (value, maxLength) => {
+    const normalized = value.replace(/\s+/g, " ").trim();
+    return normalized.length > maxLength
+        ? `${normalized.slice(0, Math.max(1, maxLength - 3)).trimEnd()}...`
+        : normalized;
+};
+const confirmationPresentation = (value, fallbackTitle, fallbackApprove) => {
+    const action = value.action.trim().toLowerCase();
+    const presentation = {
+        click: {
+            title: "Continue with this action?",
+            intro: "This will activate a page control.",
+            approve: "Continue",
+        },
+        type: {
+            title: "Enter this information?",
+            intro: "This will enter information on this page.",
+            approve: "Enter information",
+        },
+        select: {
+            title: "Apply this selection?",
+            intro: "This will change a selection on this page.",
+            approve: "Apply selection",
+        },
+        submit: {
+            title: "Save these changes?",
+            intro: "This will submit a form on this page.",
+            approve: "Save changes",
+        },
+    }[action] ?? {
+        title: fallbackTitle,
+        intro: "This will perform an action on this page.",
+        approve: fallbackApprove,
+    };
+    const target = compactUiText(value.targetLabel, 100);
+    const effect = compactUiText(value.expectedEffect || value.reason, 180);
+    const details = [
+        presentation.intro,
+        target ? `Target: ${target}.` : "",
+        effect ? `Expected result: ${effect}` : "",
+    ].filter(Boolean);
+    return { ...presentation, copy: details.join(" ") };
+};
+const INTRO_WAKE_MS = 620;
+const MAX_LIVE_ANNOUNCEMENTS = 6;
+const MAX_VISIBLE_SUBTITLES = 3;
+const styles = `
+  :host {
+    all: initial;
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    pointer-events: none;
+    color-scheme: light;
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    letter-spacing: 0;
+    --voice-accent: #2563eb;
+    --voice-inline-offset: 20px;
+    --voice-block-offset: 20px;
+    --voice-orb-size: 58px;
+    --voice-level: 0;
+    --voice-text: #18212b;
+    --voice-muted: #66717e;
+    --voice-border: rgba(148, 163, 184, .34);
+    --voice-surface: rgba(255, 255, 255, .96);
+  }
+  *, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
+  button, input, summary { font: inherit; }
+  button { cursor: pointer; }
+  [hidden] { display: none !important; }
+  button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--voice-accent) 48%, white);
+    outline-offset: 3px;
+  }
+  .presence-field {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+    contain: strict;
+    transition: opacity 680ms cubic-bezier(.22, .72, .28, 1);
+  }
+  .presence-field::before,
+  .presence-field::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    transform: translate3d(0, 0, 0);
+  }
+  .presence-field::before {
+    right: -20vw;
+    bottom: -20vh;
+    width: min(1440px, 124vw);
+    height: min(1120px, 116vh);
+    background:
+      radial-gradient(ellipse 62% 56% at 100% 100%, rgba(102, 224, 211, .40) 0%, rgba(101, 170, 243, .29) 24%, rgba(139, 118, 247, .20) 45%, rgba(243, 139, 203, .12) 61%, transparent 79%),
+      radial-gradient(ellipse 124% 17% at 50% 104%, rgba(102, 224, 211, .29) 0%, rgba(109, 150, 246, .19) 39%, rgba(229, 139, 221, .11) 62%, transparent 86%),
+      radial-gradient(ellipse 17% 124% at 104% 50%, rgba(246, 151, 202, .27) 0%, rgba(127, 116, 247, .18) 39%, rgba(95, 210, 221, .10) 63%, transparent 86%);
+    filter: blur(30px) saturate(1.34);
+    opacity: .96;
+  }
+  .presence-field::after {
+    inset: -9%;
+    background:
+      radial-gradient(ellipse 146% 15% at 50% 102%, rgba(152, 241, 225, .25), rgba(126, 153, 247, .14) 47%, rgba(233, 150, 220, .07) 66%, transparent 88%),
+      radial-gradient(ellipse 15% 146% at 102% 50%, rgba(255, 172, 218, .23), rgba(135, 126, 244, .13) 47%, rgba(103, 216, 219, .07) 66%, transparent 88%),
+      radial-gradient(ellipse 48% 43% at 95% 95%, rgba(255, 255, 255, .21), rgba(123, 218, 224, .10) 48%, transparent 80%);
+    filter: blur(17px) saturate(1.24);
+    opacity: .88;
+  }
+  :host([data-state^="active."]) .presence-field { opacity: .80; }
+  :host([data-intensity="subtle"][data-state^="active."]) .presence-field { opacity: .58; }
+  :host([data-intensity="immersive"][data-state^="active."]) .presence-field { opacity: .96; }
+  :host([data-position="bottom_left"]) .presence-field::before { right: auto; left: -20vw; transform: scaleX(-1) translate3d(0, 0, 0); }
+  :host([data-position="bottom_left"]) .presence-field::after { transform: scaleX(-1) translate3d(0, 0, 0); }
+  .orb-wrap {
+    position: fixed;
+    inset-inline-end: max(var(--voice-inline-offset), env(safe-area-inset-right));
+    bottom: max(var(--voice-block-offset), env(safe-area-inset-bottom));
+    width: var(--voice-orb-size);
+    height: var(--voice-orb-size);
+    pointer-events: auto;
+    z-index: 4;
+  }
+  :host([data-position="bottom_left"]) .orb-wrap {
+    inset-inline-start: max(var(--voice-inline-offset), env(safe-area-inset-left));
+    inset-inline-end: auto;
+  }
+  /* Premium orb themes. Light is the backwards-compatible default. */
+  :host,
+  :host([data-orb-theme="light"]) {
+    --orb-shell-bg:
+      radial-gradient(circle at 29% 15%, #fff 0 3%, rgba(255,255,255,.42) 10%, transparent 25%),
+      radial-gradient(circle at 80% 84%, rgba(205,157,204,.14), transparent 35%),
+      linear-gradient(145deg, #fff 0%, #d5dbe2 34%, #6b7280 65%, #1a1c24 100%);
+    --orb-shell-border: rgba(255,255,255,.94);
+    --orb-shadow-rest:
+      0 15px 32px rgba(31,34,43,.21),
+      0 4px 9px rgba(31,34,43,.10),
+      0 0 0 1px rgba(80,86,104,.09),
+      inset 0 1px 0 #fff;
+    --orb-shadow-hover:
+      0 19px 39px rgba(31,34,43,.25),
+      0 6px 12px rgba(31,34,43,.12),
+      0 0 18px rgba(165,145,213,.10),
+      inset 0 1px 0 #fff;
+    --orb-surface-bg:
+      radial-gradient(ellipse 49% 32% at 27% 16%, rgba(255,255,255,.94), transparent 65%),
+      conic-gradient(from 216deg, #b8d9d9, #b9c8dd, #c1b7dc, #d6b7cb, #dfd0b2, #b8d9d9);
+    --orb-surface-border: rgba(255,255,255,.58);
+    --orb-surface-shadow:
+      inset 0 1px 0 rgba(255,255,255,.78),
+      inset 0 -1px 0 rgba(14,16,22,.20);
+    --orb-caustic-bg:
+      conic-gradient(from 28deg,
+        transparent 0 16%,
+        rgba(255,255,255,.44) 21%,
+        rgba(157,211,207,.25) 30%,
+        transparent 41%,
+        rgba(153,139,208,.24) 56%,
+        transparent 69%,
+        rgba(220,174,203,.20) 79%,
+        rgba(224,202,158,.18) 86%,
+        transparent 96%);
+    --orb-specular-bg:
+      radial-gradient(ellipse 46% 23% at 30% 16%, #fff 0%, rgba(255,255,255,.42) 34%, transparent 76%),
+      linear-gradient(145deg, rgba(255,255,255,.20) 0 7%, transparent 34%);
+    --orb-core-bg:
+      radial-gradient(ellipse 59% 39% at 27% 16%, rgba(255,255,255,.46), transparent 60%),
+      radial-gradient(circle at 76% 81%, rgba(122,101,186,.14), transparent 44%),
+      linear-gradient(145deg, #555c68, #282c35 49%, #08090d);
+    --orb-core-border: rgba(255,255,255,.25);
+    --orb-core-shadow:
+      inset 1px 1px 0 rgba(255,255,255,.25),
+      inset -5px -7px 13px rgba(0,0,0,.46),
+      0 5px 12px rgba(5,5,8,.30);
+    --orb-core-refraction-bg:
+      radial-gradient(ellipse 67% 43% at 25% 13%, rgba(255,255,255,.26), transparent 62%),
+      linear-gradient(117deg, transparent 28%, rgba(178,216,221,.11) 45%, rgba(188,160,222,.10) 53%, transparent 70%);
+    --orb-rim-color: rgba(244,247,250,.72);
+    --orb-rim-accent: rgba(183,222,217,.56);
+    --orb-rim-secondary: rgba(179,151,211,.45);
+    --orb-rim-shadow:
+      0 0 0 1px rgba(102,108,127,.11),
+      0 0 13px rgba(155,139,201,.10);
+    --orb-wave-color: rgba(139,166,192,.44);
+    --orb-icon-color: #fff;
+    --orb-icon-shadow: drop-shadow(0 1px 2px rgba(0,0,0,.68));
+    --orb-caustic-opacity: .46;
+    --orb-specular-opacity: .94;
+    --orb-core-glint-opacity: .82;
+    --orb-speaking-a: rgba(122,151,204,.26);
+    --orb-speaking-b: rgba(157,132,198,.14);
+    --orb-acting-ring: rgba(157,132,198,.13);
+  }
+
+  :host([data-orb-theme="dark"]) {
+    --orb-shell-bg:
+      radial-gradient(circle at 30% 16%, rgba(255,255,255,.38) 0 2%, rgba(255,255,255,.10) 10%, transparent 28%),
+      radial-gradient(circle at 75% 81%, rgba(119,96,247,.11), transparent 40%),
+      linear-gradient(145deg, rgba(51,60,74,.92) 0%, rgba(16,21,29,.97) 48%, rgba(2,4,7,.995) 100%);
+    --orb-shell-border: rgba(255,255,255,.24);
+    --orb-shadow-rest:
+      0 18px 40px rgba(0,0,0,.48),
+      0 5px 12px rgba(0,0,0,.30),
+      0 0 0 1px rgba(193,213,255,.07),
+      inset 0 1px 0 rgba(255,255,255,.22),
+      inset 0 -1px 0 rgba(0,0,0,.72);
+    --orb-shadow-hover:
+      0 22px 48px rgba(0,0,0,.56),
+      0 8px 16px rgba(0,0,0,.34),
+      0 0 0 1px rgba(193,213,255,.12),
+      0 0 22px rgba(93,151,255,.09),
+      inset 0 1px 0 rgba(255,255,255,.26),
+      inset 0 -1px 0 rgba(0,0,0,.68);
+    --orb-surface-bg:
+      radial-gradient(ellipse 46% 31% at 28% 17%, rgba(255,255,255,.42) 0 7%, rgba(255,255,255,.10) 24%, transparent 66%),
+      linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.48)),
+      conic-gradient(from 210deg at 50% 50%,
+        rgba(91,224,210,.50) 0deg,
+        rgba(82,137,247,.47) 72deg,
+        rgba(142,103,238,.44) 142deg,
+        rgba(220,106,180,.30) 212deg,
+        rgba(151,123,235,.32) 282deg,
+        rgba(91,224,210,.50) 360deg);
+    --orb-surface-border: rgba(255,255,255,.14);
+    --orb-surface-shadow:
+      inset 0 1px 0 rgba(255,255,255,.18),
+      inset 0 -1px 0 rgba(0,0,0,.62);
+    --orb-caustic-bg:
+      conic-gradient(from 34deg,
+        transparent 0 10%,
+        rgba(255,255,255,.38) 14%,
+        rgba(100,235,220,.54) 21%,
+        transparent 30%,
+        rgba(121,145,255,.48) 42%,
+        rgba(230,128,205,.42) 53%,
+        transparent 63%,
+        rgba(255,218,148,.28) 72%,
+        rgba(107,231,215,.42) 83%,
+        transparent 94%);
+    --orb-specular-bg:
+      radial-gradient(ellipse 46% 24% at 31% 17%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.43) 32%, transparent 76%),
+      linear-gradient(145deg, rgba(255,255,255,.28) 0 7%, rgba(255,255,255,.08) 18%, transparent 38%),
+      radial-gradient(ellipse 24% 34% at 86% 83%, rgba(255,255,255,.13), transparent 72%);
+    --orb-core-bg:
+      radial-gradient(ellipse 60% 40% at 28% 16%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 28%, transparent 64%),
+      radial-gradient(circle at 76% 80%, rgba(108,93,224,.12), transparent 46%),
+      linear-gradient(145deg, rgba(45,53,66,.98) 0%, rgba(13,17,23,.99) 53%, rgba(2,3,5,1) 100%);
+    --orb-core-border: rgba(255,255,255,.13);
+    --orb-core-shadow:
+      inset 1px 1px 0 rgba(255,255,255,.15),
+      inset -6px -8px 15px rgba(0,0,0,.58),
+      0 6px 14px rgba(0,0,0,.40);
+    --orb-core-refraction-bg:
+      radial-gradient(ellipse 67% 43% at 25% 13%, rgba(255,255,255,.26), transparent 62%),
+      linear-gradient(117deg, transparent 27%, rgba(128,219,255,.13) 45%, rgba(190,142,255,.11) 52%, transparent 69%);
+    --orb-rim-color: rgba(220,232,255,.25);
+    --orb-rim-accent: rgba(107,221,210,.48);
+    --orb-rim-secondary: rgba(128,105,229,.40);
+    --orb-rim-shadow:
+      0 0 0 1px rgba(150,178,237,.08),
+      0 0 15px rgba(90,141,230,.08);
+    --orb-wave-color: rgba(119,174,214,.34);
+    --orb-icon-color: rgba(255,255,255,.94);
+    --orb-icon-shadow:
+      drop-shadow(0 1px 2px rgba(0,0,0,.72))
+      drop-shadow(0 0 7px rgba(197,222,255,.12));
+    --orb-caustic-opacity: .34;
+    --orb-specular-opacity: .50;
+    --orb-core-glint-opacity: .43;
+    --orb-speaking-a: rgba(79,139,237,.25);
+    --orb-speaking-b: rgba(83,202,194,.11);
+    --orb-acting-ring: rgba(103,139,235,.12);
+  }
+
+  .orb {
+    position: relative;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    min-width: 52px;
+    min-height: 52px;
+    padding: 0;
+    place-items: center;
+    overflow: visible;
+    color: var(--orb-icon-color);
+    background: var(--orb-shell-bg);
+    border: 1px solid var(--orb-shell-border);
+    border-radius: 50%;
+    box-shadow: var(--orb-shadow-rest);
+    isolation: isolate;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      transform 180ms cubic-bezier(.2,.8,.2,1),
+      box-shadow 260ms cubic-bezier(.2,.8,.2,1),
+      filter 220ms ease,
+      border-color 220ms ease,
+      opacity 180ms ease;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .orb:not([disabled]):hover {
+      transform: translateY(-2px);
+      box-shadow: var(--orb-shadow-hover);
+    }
+    .orb:not([disabled]):hover .orb-surface { filter: brightness(1.035) saturate(1.04); }
+  }
+  .orb:not([disabled]):active { transform: translateY(0) scale(.965); }
+  .orb[disabled] { cursor: default; filter: saturate(.25); opacity: .72; }
+
+  .orb-surface,
+  .orb-rim,
+  .orb-core {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  .orb-surface,
+  .orb-core { overflow: hidden; }
+
+  .orb-surface {
+    inset: 2px;
+    background: var(--orb-surface-bg);
+    border: 1px solid var(--orb-surface-border);
+    box-shadow: var(--orb-surface-shadow);
+    -webkit-backdrop-filter: blur(12px) saturate(1.24);
+    backdrop-filter: blur(12px) saturate(1.24);
+    transition: filter 240ms ease;
+    z-index: 1;
+  }
+  .orb-surface::before {
+    content: '';
+    position: absolute;
+    inset: -30%;
+    border-radius: 50%;
+    background: var(--orb-caustic-bg);
+    filter: blur(4.5px) saturate(1.18);
+    mix-blend-mode: screen;
+    opacity: calc(var(--orb-caustic-opacity) + var(--voice-level) * .10);
+    transform: translate3d(-2%, 1%, 0) rotate(-8deg) scale(1.04);
+    animation: orb-caustic-drift 11s cubic-bezier(.45,.05,.55,.95) infinite alternate;
+    will-change: transform;
+  }
+  .orb-surface::after {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: inherit;
+    background: var(--orb-specular-bg);
+    opacity: var(--orb-specular-opacity);
+    mix-blend-mode: screen;
+  }
+
+  .orb-core {
+    inset: auto;
+    top: 50%;
+    left: 50%;
+    width: calc(100% - 16px);
+    height: calc(100% - 16px);
+    background: var(--orb-core-bg);
+    border: 1px solid var(--orb-core-border);
+    box-shadow: var(--orb-core-shadow);
+    -webkit-backdrop-filter: blur(16px) saturate(1.12);
+    backdrop-filter: blur(16px) saturate(1.12);
+    transform: translate(-50%, -50%);
+    transform-origin: center;
+    transition: transform 110ms linear, filter 180ms ease;
+    z-index: 2;
+  }
+  .orb-core::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: inherit;
+    background: var(--orb-core-refraction-bg);
+    mix-blend-mode: screen;
+    opacity: var(--orb-core-glint-opacity);
+  }
+  .orb-core::after {
+    content: '';
+    position: absolute;
+    left: 19%;
+    top: 14%;
+    width: 40%;
+    height: 17%;
+    border-radius: 50%;
+    background: linear-gradient(90deg, rgba(255,255,255,.68), rgba(255,255,255,.06));
+    filter: blur(.45px);
+    transform: rotate(-24deg);
+    opacity: var(--orb-core-glint-opacity);
+  }
+
+  .orb-rim {
+    inset: -3px;
+    border: 1px solid var(--orb-rim-color);
+    border-top-color: var(--orb-rim-accent);
+    border-right-color: var(--orb-rim-secondary);
+    box-shadow: var(--orb-rim-shadow);
+    opacity: calc(.48 + var(--voice-level) * .40);
+    transform: scale(calc(1 + var(--voice-level) * .10));
+    transition: opacity 90ms linear, transform 90ms linear;
+    z-index: 0;
+  }
+  .orb-rim::before,
+  .orb-rim::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 1px solid var(--orb-wave-color);
+    border-radius: 50%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .orb-icon {
+    position: relative;
+    z-index: 4;
+    display: grid;
+    place-items: center;
+    color: var(--orb-icon-color);
+    filter: var(--orb-icon-shadow);
+  }
+  .orb-icon svg {
+    width: 22px;
+    height: 22px;
+    stroke: currentColor;
+    stroke-width: 1.9;
+  }
+  .orb[data-active="true"] .start-icon { display: none; }
+  .orb:not([data-active="true"]) .end-icon { display: none; }
+  .orb[data-state="active.ready"] .orb-rim { animation: breathe 3.4s ease-in-out infinite; }
+  .orb[data-state="active.listening"] .orb-rim { animation: listen 1.3s ease-in-out infinite; }
+  .orb[data-state="active.thinking"] .orb-surface::before { animation: orb-caustic-orbit 2.4s linear infinite; }
+  .orb[data-state="active.listening"] .orb-rim::before,
+  .orb[data-state="active.speaking"] .orb-rim::before,
+  .orb[data-state="active.speaking"] .orb-rim::after {
+    animation: radar-wave 2.35s cubic-bezier(.18, .62, .32, 1) infinite;
+  }
+  .orb[data-state="active.speaking"] .orb-rim::after { animation-delay: 1.12s; }
+  .orb[data-state="active.speaking"] .orb-rim {
+    box-shadow:
+      var(--orb-rim-shadow),
+      0 0 calc(12px + var(--voice-level) * 17px) var(--orb-speaking-a),
+      0 0 calc(25px + var(--voice-level) * 22px) var(--orb-speaking-b);
+  }
+  .orb[data-state="active.speaking"] .orb-core {
+    transform: translate(-50%, -50%) scale(calc(1 + var(--voice-level) * .04));
+    filter: brightness(calc(1 + var(--voice-level) * .11));
+  }
+  .orb[data-state="active.acting"] {
+    box-shadow:
+      var(--orb-shadow-hover),
+      0 0 0 5px var(--orb-acting-ring);
+  }
+  .orb[data-state="active.awaiting_confirmation"] .orb-rim {
+    animation: none;
+    transform: scale(1.07);
+  }
+  .orb[data-state="active.reconnecting"] { filter: saturate(.28) brightness(.94); }
+  .orb[data-state="active.reconnecting"] .orb-rim { animation: orb-rim-orbit 2.8s linear infinite; }
+  .orb[data-state="ending"] { transform: scale(.84); opacity: .72; pointer-events: none; }
+  .orb.wake::after {
+    content: '';
+    position: fixed;
+    right: -2px;
+    bottom: -2px;
+    width: min(62vw, 760px);
+    height: min(64vh, 680px);
+    pointer-events: none;
+    background:
+      radial-gradient(ellipse 78% 66% at 100% 100%, color-mix(in srgb, var(--voice-accent) 28%, rgba(99,229,211,.26)), rgba(126,116,247,.15) 36%, rgba(244,139,207,.08) 55%, transparent 76%),
+      radial-gradient(ellipse 110% 18% at 62% 105%, rgba(101,222,214,.16), transparent 76%),
+      radial-gradient(ellipse 18% 110% at 105% 62%, rgba(208,137,239,.13), transparent 76%);
+    filter: blur(18px) saturate(1.2);
+    opacity: 0;
+    animation: wake ${INTRO_WAKE_MS}ms ease-out both;
+    z-index: -1;
+  }
+  :host([data-position="bottom_left"]) .orb.wake::after { right: auto; left: -2px; transform: scaleX(-1); }
+  .first-label {
+    position: absolute;
+    inset-inline-end: calc(100% + 9px);
+    top: 50%;
+    width: max-content;
+    max-width: min(180px, calc(100vw - 94px));
+    padding: 7px 10px;
+    color: var(--voice-text);
+    background: var(--voice-surface);
+    border: 1px solid var(--voice-border);
+    border-radius: 8px;
+    box-shadow: 0 7px 20px rgba(15,23,42,.14);
+    font-size: 13px;
+    line-height: 18px;
+    transform: translateY(-50%);
+    white-space: nowrap;
+  }
+  :host([data-position="bottom_left"]) .first-label { inset-inline-start: calc(100% + 9px); inset-inline-end: auto; }
+  .caption-stage {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + 10px);
+    width: min(440px, calc(100vw - 32px));
+    height: min(680px, max(180px, calc(100dvh - var(--voice-block-offset) - var(--voice-orb-size) - 34px)));
+    pointer-events: none;
+  }
+  :host([data-position="bottom_left"]) .caption-stage { inset-inline-start: 0; inset-inline-end: auto; }
+  .subtitle-track {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: 0;
+    display: grid;
+    width: 100%;
+    max-height: 100%;
+    gap: 6px;
+    padding: 9px 11px;
+    overflow: hidden;
+    color: var(--voice-text);
+    background:
+      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
+    border: 1px solid rgba(255, 255, 255, .88);
+    border-radius: 8px;
+    box-shadow:
+      0 14px 38px rgba(15, 23, 42, .16),
+      0 0 0 1px rgba(148, 163, 184, .20),
+      inset 0 1px 0 rgba(255, 255, 255, .92);
+    -webkit-backdrop-filter: blur(18px) saturate(1.08);
+    backdrop-filter: blur(18px) saturate(1.08);
+    transform-origin: bottom right;
+  }
+  .subtitle-track:empty { display: none; }
+  :host([data-position="bottom_left"]) .subtitle-track {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    transform-origin: bottom left;
+  }
+  .caption {
+    --caption-enter-delay: 0ms;
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr);
+    width: 100%;
+    min-width: 0;
+    gap: 8px;
+    align-items: start;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 20px;
+    pointer-events: none;
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 180ms ease, transform 180ms ease;
+  }
+  .caption + .caption {
+    padding-top: 6px;
+    border-top: 1px solid rgba(148, 163, 184, .22);
+  }
+  .caption.previous { opacity: .58; }
+  .caption-speaker {
+    display: grid;
+    width: 24px;
+    height: 24px;
+    place-items: center;
+    color: #354150;
+    background: rgba(248, 250, 252, .96);
+    border: 1px solid rgba(148, 163, 184, .28);
+    border-radius: 50%;
+    box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
+  }
+  .caption.assistant .caption-speaker {
+    color: color-mix(in srgb, var(--voice-accent) 78%, #17212b);
+    background: color-mix(in srgb, var(--voice-accent) 9%, rgba(255, 255, 255, .98));
+    border-color: color-mix(in srgb, var(--voice-accent) 20%, rgba(148, 163, 184, .24));
+  }
+  .caption.user .caption-speaker {
+    color: #4b5968;
+    background: rgba(241, 245, 249, .98);
+  }
+  .caption-speaker svg { width: 13px; height: 13px; stroke-width: 2; }
+  .caption-copy {
+    display: -webkit-box;
+    min-width: 0;
+    max-height: calc(var(--caption-lines, 10) * 20px);
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
+  }
+  .caption.entering {
+    animation: caption-in 180ms ease-out var(--caption-enter-delay) both;
+  }
+  .caption.leaving { opacity: 0; transform: translateY(5px); }
+  .status-bubble {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + 18px + var(--voice-subtitle-height, 0px));
+    max-width: min(280px, calc(100vw - 88px));
+    padding: 7px 10px;
+    color: var(--voice-text);
+    background: var(--voice-surface);
+    border: 1px solid var(--voice-border);
+    border-radius: 9px;
+    box-shadow: 0 7px 20px rgba(15,23,42,.14);
+    font-size: 12px;
+    line-height: 18px;
+    pointer-events: none;
+  }
+  :host([data-position="bottom_left"]) .status-bubble { inset-inline-start: 0; inset-inline-end: auto; }
+  .attribution-bubble {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + 18px);
+    width: max-content;
+    max-width: min(240px, calc(100vw - 88px));
+    padding: 8px 11px;
+    color: var(--voice-muted);
+    background: var(--voice-surface);
+    border: 1px solid var(--voice-border);
+    border-radius: 9px;
+    box-shadow: 0 7px 20px rgba(15,23,42,.14);
+    font-size: 12px;
+    line-height: 18px;
+    pointer-events: auto;
+    animation: attribution-in 180ms ease-out both;
+  }
+  .attribution-bubble a {
+    color: var(--voice-text);
+    font-weight: 650;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  :host([data-position="bottom_left"]) .attribution-bubble { inset-inline-start: 0; inset-inline-end: auto; }
+  .dialog-layer {
+    position: fixed;
+    inset: auto;
+    left: var(--voice-viewport-left, 0px);
+    top: var(--voice-viewport-top, 0px);
+    width: var(--voice-viewport-width, 100vw);
+    height: var(--voice-viewport-height, 100dvh);
+    display: grid;
+    padding: 16px;
+    place-items: center;
+    background: rgba(15, 23, 42, .36);
+    pointer-events: auto;
+    z-index: 10;
+  }
+  .dialog {
+    width: min(420px, calc(var(--voice-viewport-width, 100vw) - 32px));
+    max-height: min(620px, calc(var(--voice-viewport-height, 100dvh) - 32px));
+    padding: 20px;
+    overflow: auto;
+    color: var(--voice-text);
+    background: #fff;
+    border: 1px solid var(--voice-border);
+    border-radius: 12px;
+    box-shadow: 0 24px 64px rgba(15,23,42,.28);
+    pointer-events: auto;
+  }
+  .dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
+  .dialog h2 { margin: 0; font-size: 18px; line-height: 25px; font-weight: 680; }
+  .dialog p { margin: 7px 0 0; color: var(--voice-muted); font-size: 14px; line-height: 21px; }
+  .icon-button {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    padding: 0;
+    place-items: center;
+    color: #4b5563;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 8px;
+  }
+  .icon-button:hover { background: #f3f4f6; }
+  .icon-button svg { width: 18px; height: 18px; }
+  .agreement {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 10px;
+    align-items: start;
+    margin-top: 17px;
+    padding: 12px;
+    color: #26313c;
+    background: #f7f9fa;
+    border: 1px solid #e4e8ec;
+    border-radius: 9px;
+    font-size: 13px;
+    line-height: 19px;
+    cursor: pointer;
+  }
+  .agreement input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--voice-accent); }
+  details { margin-top: 12px; color: var(--voice-muted); font-size: 12px; line-height: 18px; }
+  summary { width: fit-content; color: color-mix(in srgb, var(--voice-accent) 78%, #18212b); cursor: pointer; }
+  .legal-copy { margin-top: 8px; padding: 10px 11px; background: #fafbfc; border: 1px solid #e6e9ed; border-radius: 8px; }
+  .legal-copy p { margin: 0; font-size: 12px; line-height: 18px; }
+  .legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
+  .legal-links a { color: color-mix(in srgb, var(--voice-accent) 82%, #18212b); }
+  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+  .button {
+    min-height: 40px;
+    padding: 0 14px;
+    border: 1px solid #d7dce1;
+    border-radius: 8px;
+    background: #fff;
+    color: #27313b;
+    font-size: 13px;
+    font-weight: 620;
+  }
+  .button:hover { background: #f7f8f9; }
+  .button.primary { color: #fff; background: var(--voice-accent); border-color: color-mix(in srgb, var(--voice-accent) 78%, #111827); }
+  .button.primary:hover { background: color-mix(in srgb, var(--voice-accent) 88%, #111827); }
+  .button:disabled { cursor: not-allowed; opacity: .55; }
+  .safety-card,
+  .recovery-card {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + 11px);
+    width: min(340px, calc(100vw - 32px));
+    padding: 14px;
+    color: var(--voice-text);
+    background: #fff;
+    border: 1px solid var(--voice-border);
+    border-radius: 8px;
+    box-shadow: 0 12px 32px rgba(15,23,42,.2);
+    pointer-events: auto;
+  }
+  :host([data-position="bottom_left"]) .safety-card,
+  :host([data-position="bottom_left"]) .recovery-card { inset-inline-start: 0; inset-inline-end: auto; }
+  .card-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 680; }
+  .card-copy { margin: 5px 0 0; color: var(--voice-muted); font-size: 12px; line-height: 18px; }
+  .card-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
+  .card-actions .button { min-height: 36px; }
+  .recovery-head {
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr) 32px;
+    gap: 9px;
+    align-items: center;
+  }
+  .recovery-badge {
+    display: grid;
+    width: 28px;
+    height: 28px;
+    place-items: center;
+    color: color-mix(in srgb, var(--voice-accent) 72%, #26313c);
+    background: color-mix(in srgb, var(--voice-accent) 7%, #fff);
+    border: 1px solid color-mix(in srgb, var(--voice-accent) 16%, #e2e7eb);
+    border-radius: 7px;
+  }
+  .recovery-badge svg { width: 16px; height: 16px; }
+  .recovery-close {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    justify-self: end;
+  }
+  .recovery-card .card-copy { margin-top: 9px; font-size: 13px; line-height: 19px; }
+  .recovery-card .card-actions { flex-wrap: wrap; align-items: stretch; margin-top: 13px; }
+  .recovery-card .card-actions .button {
+    display: inline-flex;
+    min-width: 0;
+    padding-inline: 11px;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    line-height: 18px;
+    white-space: normal;
+  }
+  .recovery-card .card-actions .button svg { width: 15px; height: 15px; flex: 0 0 auto; }
+  @media (max-width: 380px) {
+    .recovery-card .card-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
+    .recovery-card .card-actions .button { width: 100%; }
+  }
+  .hidden-live {
+    position: fixed;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+  }
+  audio { display: none; }
+  .action-highlight {
+    position: fixed;
+    display: none;
+    border: 2px solid var(--voice-accent);
+    border-radius: 8px;
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--voice-accent) 12%, transparent);
+    pointer-events: none;
+    z-index: 2;
+  }
+  .action-highlight.visible { display: block; }
+  .action-highlight.success { border-color: #138a63; }
+  .action-highlight.failure { border-color: #9f3545; }
+  @keyframes breathe { 0%,100% { opacity: .48; transform: scale(1); } 50% { opacity: .78; transform: scale(1.055); } }
+  @keyframes listen { 0%,100% { transform: scale(1.025); } 50% { transform: scale(.965); } }
+  @keyframes orb-caustic-drift {
+    from { transform: translate3d(-2%, 1%, 0) rotate(-8deg) scale(1.04); }
+    to { transform: translate3d(2%, -1%, 0) rotate(10deg) scale(1.08); }
+  }
+  @keyframes orb-caustic-orbit {
+    from { transform: rotate(0deg) scale(1.08); }
+    to { transform: rotate(360deg) scale(1.08); }
+  }
+  @keyframes orb-rim-orbit {
+    from { transform: rotate(0deg) scale(1.02); }
+    to { transform: rotate(360deg) scale(1.02); }
+  }
+  @keyframes radar-wave {
+    0% { opacity: .38; transform: scale(.9); }
+    68%, 100% { opacity: 0; transform: scale(1.62); }
+  }
+  @keyframes wake { 0% { opacity: 0; transform: scale(.76); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.16); } }
+  @keyframes caption-in { from { opacity: 0; transform: translateY(5px); } }
+  @keyframes attribution-in { from { opacity: 0; transform: translateY(4px); } }
+  @media (prefers-reduced-motion: reduce) {
+    .orb, .orb-rim, .orb-rim::before, .orb-rim::after,
+    .orb-surface, .orb-surface::before, .orb-surface::after,
+    .orb-core, .orb-core::before, .orb-core::after, .caption {
+      animation: none !important;
+      transition: none !important;
+    }
+    .orb.wake::after { animation-duration: 120ms; }
+    .presence-field { transition-duration: 120ms; }
+  }
+  :host([data-visual-test="true"]) *,
+  :host([data-visual-test="true"]) *::before,
+  :host([data-visual-test="true"]) *::after {
+    animation-play-state: paused !important;
+    transition: none !important;
+  }
+  :host([data-visual-test="true"]) .caption.entering { animation: none !important; }
+  @media (forced-colors: active) {
+    .orb { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; forced-color-adjust: auto; }
+    .orb-surface, .orb-core, .orb-rim { display: none; }
+    .subtitle-track, .dialog, .safety-card, .recovery-card { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
+    .caption-speaker { color: CanvasText; background: Canvas; border-color: CanvasText; }
+  }
+  @media (max-width: 520px) {
+    .dialog-layer { align-items: end; padding: 10px; }
+    .dialog {
+      width: 100%;
+      max-height: calc(var(--voice-viewport-height, 100dvh) - 20px);
+    }
+    .dialog-actions { flex-direction: column-reverse; }
+    .dialog-actions .button { width: 100%; }
+  }
+`;
+const icon = (node, className) => {
+    const element = createLucideElement(node);
+    element.classList.add(className);
+    element.setAttribute("aria-hidden", "true");
+    return element;
+};
+const isFocusTarget = (value) => value instanceof HTMLElement &&
+    !value.hasAttribute("disabled") &&
+    value.getAttribute("aria-hidden") !== "true";
+export class VoicePresenceView {
+    constructor(config, overrides, callbacks, tabId, onFallback = () => undefined, visualTestMode = false) {
+        this.callbacks = callbacks;
+        this.onFallback = onFallback;
+        this.captionTimers = new Map();
+        this.captionResizeObserver = null;
+        this.captionLayoutFrame = null;
+        this.highlightTarget = null;
+        this.highlightResizeObserver = null;
+        this.highlightFrame = null;
+        this.highlightScrollTargets = [];
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.restoreFocus = null;
+        this.active = false;
+        this.activeElsewhere = false;
+        this.destroyed = false;
+        this.introPlayed = false;
+        this.wakeTimer = null;
+        this.statusTimer = null;
+        this.attributionTimer = null;
+        this.audioContext = null;
+        this.playbackResumePending = false;
+        this.outputSource = null;
+        this.outputAnalyser = null;
+        this.inputSource = null;
+        this.inputAnalyser = null;
+        this.levelFrame = null;
+        this.levelBuffer = null;
+        this.lastLevelAt = 0;
+        this.serverPresenceState = "ready";
+        this.playbackState = "idle";
+        this.capabilityTier = "standard";
+        this.onModalKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                this.closeActivation();
+                return;
+            }
+            if (event.key !== "Tab")
+                return;
+            const focusable = Array.from(this.modalLayer.querySelectorAll("button,input,summary,a[href]")).filter(isFocusTarget);
+            if (focusable.length === 0)
+                return;
+            const first = focusable[0];
+            const last = focusable.at(-1);
+            if (!first || !last)
+                return;
+            const activeElement = this.shadow.activeElement;
+            if (event.shiftKey && activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        this.scheduleCaptionLayout = () => {
+            if (this.destroyed || this.captionLayoutFrame !== null)
+                return;
+            this.captionLayoutFrame = requestAnimationFrame(() => {
+                this.captionLayoutFrame = null;
+                this.layoutCaptions();
+            });
+        };
+        this.scheduleHighlightLayout = () => {
+            if (this.destroyed || !this.highlightTarget || this.highlightFrame !== null)
+                return;
+            this.highlightFrame = requestAnimationFrame(() => {
+                this.highlightFrame = null;
+                this.renderHighlight();
+            });
+        };
+        this.onVisibilityChange = () => {
+            if (document.hidden)
+                this.stopLevelLoop();
+            else if (this.activeAnalyser())
+                this.startLevelLoop();
+        };
+        const voiceConfig = config.appearance?.voicePresence;
+        if (!voiceConfig?.enabled) {
+            throw new Error("Voice Presence appearance is unavailable.");
+        }
+        this.config = config;
+        this.voiceConfig = voiceConfig;
+        this.messages = { ...defaultMessages, ...overrides };
+        this.host = document.createElement("div");
+        this.host.dataset.oxvoAiLiveAssistRoot = "true";
+        this.host.dataset.position = voiceConfig.launcher.position;
+        this.host.dataset.intensity = voiceConfig.visual.intensity;
+        this.host.dataset.orbTheme = "light";
+        this.setOrbTheme(voiceConfig.launcher.theme ?? "light");
+        if (visualTestMode)
+            this.host.dataset.visualTest = "true";
+        this.host.setAttribute("dir", getDocumentDirection());
+        this.shadow = this.host.attachShadow({ mode: "closed" });
+        const sheet = document.createElement("style");
+        sheet.textContent = styles;
+        this.shadow.append(sheet, this.build());
+        document.documentElement.append(this.host);
+        this.orb = this.require('[data-role="orb"]');
+        this.modalLayer = this.require('[data-role="activation-layer"]');
+        this.agreement = this.require('[data-role="agreement"]');
+        this.captionStage = this.require(".caption-stage");
+        this.subtitleTrack = this.require('[data-role="subtitle-track"]');
+        this.statusBubble = this.require('[data-role="status-bubble"]');
+        this.attributionBubble = this.require('[data-role="attribution"]');
+        this.safetyCard = this.require('[data-role="safety-card"]');
+        this.recoveryCard = this.require('[data-role="recovery-card"]');
+        this.liveRegion = this.require('[data-role="live-region"]');
+        this.audio = this.require("audio");
+        this.highlight = this.require(".action-highlight");
+        if (typeof ResizeObserver !== "undefined") {
+            this.captionResizeObserver = new ResizeObserver(this.scheduleCaptionLayout);
+            this.highlightResizeObserver = new ResizeObserver(this.scheduleHighlightLayout);
+        }
+        this.stateMachine = new VoicePresenceStateMachine(tabId, (state) => {
+            this.orb.dataset.state = state;
+            this.host.dataset.state = state;
+        });
+        this.applyConfig();
+        this.placement = new LauncherPlacementController({
+            host: this.host,
+            preferredSide: this.voiceConfig.launcher.position,
+            inlineOffset: this.voiceConfig.launcher.offsetInlinePx,
+            blockOffset: this.voiceConfig.launcher.offsetBlockPx,
+            size: this.voiceConfig.launcher.size === "compact" ? 52 : 58,
+            isActive: () => this.active,
+        });
+        this.bind();
+        this.bindPlaybackState();
+        this.stateMachine.transition("launcher");
+    }
+    setRemoteStream(stream) {
+        const previous = this.audio.srcObject;
+        if (previous &&
+            typeof MediaStream !== "undefined" &&
+            previous instanceof MediaStream &&
+            previous !== stream) {
+            for (const track of previous.getTracks())
+                track.stop();
+        }
+        this.audio.srcObject = stream;
+        this.connectOutputAnalyser(stream);
+        void this.audio.play().catch(() => {
+            this.emitPlaybackState("blocked");
+            this.showTransientStatus("Tap the voice button to resume audio.", 6000);
+        });
+    }
+    setCapabilityTier(tier) {
+        this.capabilityTier = tier;
+    }
+    setOrbTheme(theme) {
+        this.host.dataset.orbTheme = theme;
+    }
+    launcherRect() {
+        if (!this.orb.isConnected || this.orb.hidden)
+            return null;
+        const rect = this.orb.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0 ? rect : null;
+    }
+    presentationObstacles() {
+        const candidates = [
+            this.subtitleTrack,
+            this.statusBubble,
+            this.safetyCard,
+            this.recoveryCard,
+            this.orb,
+        ];
+        return candidates
+            .filter((element) => element.isConnected && !element.hidden)
+            .map((element) => element.getBoundingClientRect())
+            .filter((rect) => rect.width > 0 && rect.height > 0);
+    }
+    setLocalStream(stream) {
+        this.ensureAudioContext();
+        this.inputSource?.disconnect();
+        this.inputAnalyser?.disconnect();
+        this.inputSource = null;
+        this.inputAnalyser = null;
+        if (!stream || !this.audioContext)
+            return;
+        try {
+            this.inputAnalyser = this.audioContext.createAnalyser();
+            this.inputAnalyser.fftSize = 256;
+            this.inputAnalyser.smoothingTimeConstant = 0.82;
+            this.inputSource = this.audioContext.createMediaStreamSource(stream);
+            this.inputSource.connect(this.inputAnalyser);
+            this.levelBuffer = new Uint8Array(this.inputAnalyser.fftSize);
+            if (this.stateMachine.state === "active.listening")
+                this.startLevelLoop();
+        }
+        catch {
+            this.inputSource = null;
+            this.inputAnalyser = null;
+        }
+    }
+    setStatus(value) {
+        if (!value || value === this.messages.ready) {
+            this.hideStatus();
+            return;
+        }
+        this.showTransientStatus(value, 4000);
+    }
+    message(key) {
+        return this.messages[key];
+    }
+    setAssistantState(state) {
+        if (!this.active)
+            return;
+        if (state === "thinking" || state === "speaking") {
+            this.resumeRemotePlayback();
+        }
+        this.stateMachine.transition(`active.${state}`);
+        if (state === "listening" || state === "speaking")
+            this.startLevelLoop();
+        else
+            this.stopLevelLoop();
+    }
+    applyPresenceState(state, sequence, sessionId, pageId, fencingToken) {
+        this.serverPresenceState = state;
+        if (state === "thinking" || state === "speaking") {
+            this.resumeRemotePlayback();
+        }
+        const next = this.effectivePresenceState();
+        this.stateMachine.transition(next, {
+            sessionId,
+            serverSequence: sequence,
+            ...(pageId ? { pageId } : {}),
+            fencingToken,
+        });
+        if (state === "reconnecting")
+            this.showTransientStatus(this.messages.reconnecting, 5000);
+        else if (state !== "awaiting_confirmation")
+            this.hideStatus();
+        this.syncLevelLoop();
+    }
+    showPreflight() {
+        this.stateMachine.transition("preflight");
+        this.closeActivation(false);
+    }
+    showRequestingMicrophone() {
+        this.recoveryCard.hidden = true;
+        this.orb.hidden = false;
+        this.stateMachine.transition("requesting_microphone");
+        this.showTransientStatus("Requesting microphone access", 0);
+    }
+    showConnecting(resume = false, _mode = "voice") {
+        void _mode;
+        this.active = true;
+        this.hideAttribution();
+        this.orb.dataset.active = "true";
+        this.orb.setAttribute("aria-label", "End voice assist");
+        if (resume) {
+            this.introPlayed = true;
+            this.stateMachine.transition("active.reconnecting");
+        }
+        else {
+            this.stateMachine.transition("connecting");
+        }
+        this.showTransientStatus(resume ? this.messages.reconnecting : this.messages.connecting, 0);
+    }
+    showActive(welcomeMessage) {
+        this.active = true;
+        this.placement.refresh(true);
+        this.hideStatus();
+        this.orb.dataset.active = "true";
+        this.orb.disabled = false;
+        this.orb.setAttribute("aria-label", "End voice assist");
+        this.stateMachine.transition("active.ready");
+        if (!this.introPlayed &&
+            this.voiceConfig.visual.introWake &&
+            this.capabilityTier === "standard") {
+            this.introPlayed = true;
+            this.orb.classList.add("wake");
+            this.wakeTimer = setTimeout(() => {
+                this.wakeTimer = null;
+                this.orb.classList.remove("wake");
+            }, INTRO_WAKE_MS + 40);
+        }
+        if (welcomeMessage && this.voiceConfig.captions.showAssistantFinal) {
+            this.addCaption("assistant", welcomeMessage, true);
+        }
+    }
+    addCaption(role, text, final) {
+        if (!this.voiceConfig.captions.enabled)
+            return;
+        if (!final) {
+            if (role === "user" && this.voiceConfig.captions.showInterimVisitor) {
+                this.showTransientStatus(this.messages.listening, 1200);
+            }
+            return;
+        }
+        if ((role === "assistant" && !this.voiceConfig.captions.showAssistantFinal) ||
+            (role === "user" && !this.voiceConfig.captions.showVisitorFinal)) {
+            return;
+        }
+        const normalized = text.replace(/\s+/g, " ").trim();
+        if (!normalized)
+            return;
+        const maxCharacters = this.voiceConfig.captions.maxCharacters;
+        const maxLines = Math.min(10, Math.max(1, this.voiceConfig.captions.maxLines));
+        const rendered = normalized.length > maxCharacters
+            ? `${normalized.slice(0, Math.max(1, maxCharacters - 3)).trimEnd()}...`
+            : normalized;
+        const hadCaptions = this.subtitleTrack.childElementCount > 0;
+        while (this.subtitleTrack.childElementCount >= MAX_VISIBLE_SUBTITLES) {
+            const oldest = this.subtitleTrack.firstElementChild;
+            if (!oldest)
+                break;
+            this.discardCaption(oldest);
+        }
+        const line = document.createElement("div");
+        line.className = `caption ${role} entering`;
+        line.dataset.captionId = `${role}-${crypto.randomUUID()}`;
+        line.dataset.speaker = role;
+        line.style.setProperty("--caption-lines", String(maxLines));
+        const speaker = document.createElement("span");
+        speaker.className = "caption-speaker";
+        speaker.setAttribute("aria-hidden", "true");
+        speaker.append(icon(role === "assistant" ? AudioWaveform : UserRound, "caption-symbol"));
+        const copy = document.createElement("span");
+        copy.className = "caption-copy";
+        copy.textContent = rendered;
+        copy.style.webkitLineClamp = String(maxLines);
+        copy.style.maxHeight = `${maxLines * 20}px`;
+        line.append(speaker, copy);
+        line.style.setProperty("--caption-enter-delay", hadCaptions ? "40ms" : "0ms");
+        this.subtitleTrack.append(line);
+        this.captionResizeObserver?.observe(line);
+        line.addEventListener("animationend", () => line.classList.remove("entering"), { once: true });
+        this.layoutCaptions();
+        const timer = setTimeout(() => this.removeCaption(line), this.voiceConfig.captions.visibleMs);
+        this.captionTimers.set(line, timer);
+        this.announce(`${role === "assistant" ? "AI" : "You"}: ${normalized}`);
+    }
+    showConfirmation(value) {
+        this.currentConfirmation = value;
+        this.currentVisualRequest = null;
+        this.hideStatus();
+        this.stateMachine.transition("active.awaiting_confirmation");
+        const presentation = confirmationPresentation(value, this.messages.actionRequest, this.messages.approve);
+        this.renderSafetyCard(presentation.title, presentation.copy, presentation.approve, this.messages.decline, () => this.resolveConfirmation(true), () => this.resolveConfirmation(false));
+    }
+    showActionState(status) {
+        this.currentConfirmation = null;
+        this.hideSafetyCard();
+        if (status === "running") {
+            this.stateMachine.transition("active.acting");
+            this.showTransientStatus(this.messages.actionRunning, 4000);
+            return;
+        }
+        this.stateMachine.transition("active.ready");
+        if (status === "verified") {
+            this.hideStatus();
+            return;
+        }
+        this.showTransientStatus(this.messages.actionFailed, 3500);
+    }
+    dismissActionState() {
+        this.currentConfirmation = null;
+        this.hideSafetyCard();
+        this.hideStatus();
+        if (this.active)
+            this.stateMachine.transition("active.ready");
+    }
+    showVisualRequest(value) {
+        this.currentVisualRequest = value;
+        this.currentConfirmation = null;
+        this.hideStatus();
+        this.stateMachine.transition("active.awaiting_confirmation");
+        this.renderSafetyCard(this.messages.visualRequest, value.reason, this.messages.shareVisual, this.messages.declineVisual, () => this.resolveVisualRequest(true), () => this.resolveVisualRequest(false));
+    }
+    showVisualResult(shared) {
+        this.currentVisualRequest = null;
+        this.hideSafetyCard();
+        this.stateMachine.transition("active.ready");
+        this.showTransientStatus(shared ? this.messages.visualShared : this.messages.visualUnavailable, 3500);
+    }
+    setVisualAvailable(_available, _paused = false) {
+        void _available;
+        void _paused;
+    }
+    setVisualPaused(_paused) {
+        void _paused;
+    }
+    setPaused(value) {
+        if (value)
+            this.showTransientStatus(this.messages.paused, 0);
+        else
+            this.hideStatus();
+    }
+    setMuted(_value) {
+        void _value;
+    }
+    configureVoiceControls(_voice, _manual, _canUseAutomatic) {
+        void _voice;
+        void _manual;
+        void _canUseAutomatic;
+    }
+    setManualTurn(_value) {
+        void _value;
+    }
+    setPushActive(_value) {
+        void _value;
+    }
+    interruptPlayback() {
+        this.audio.pause();
+        this.stopLevelLoop();
+        this.host.style.setProperty("--voice-level", "0");
+        if (this.active)
+            this.stateMachine.transition("active.ready");
+    }
+    showError(message, retryable = false, sessionActive = this.active) {
+        const safeMessage = message || this.messages.error;
+        if (sessionActive && this.active) {
+            this.stateMachine.transition(retryable ? "recoverable_error" : "terminal_error");
+            this.hideStatus();
+            this.renderRecoveryCard(safeMessage, retryable);
+            return;
+        }
+        this.active = false;
+        this.stateMachine.transition(retryable ? "recoverable_error" : "terminal_error");
+        this.orb.hidden = true;
+        this.renderRecoveryCard(safeMessage, retryable);
+    }
+    showEnded(message) {
+        this.active = false;
+        this.hideSafetyCard();
+        this.recoveryCard.hidden = true;
+        this.recoveryCard.replaceChildren();
+        this.clearCaptions();
+        this.hideStatus();
+        this.stopAudio();
+        this.stateMachine.transition("ending");
+        this.orb.dataset.active = "false";
+        this.orb.setAttribute("aria-label", this.launcherLabel());
+        this.stateMachine.transition("ended");
+        if (message)
+            this.showTransientStatus(message, 3000);
+        this.stateMachine.transition("launcher");
+        this.showAttribution();
+        this.placement.refresh();
+    }
+    showLimit(message) {
+        this.showError(message || this.messages.limitReached, false, false);
+    }
+    showActiveElsewhere(active) {
+        this.activeElsewhere = active;
+        this.orb.disabled = active;
+        this.orb.hidden = active;
+        this.orb.setAttribute("aria-label", active ? this.messages.activeElsewhere : this.launcherLabel());
+        if (active) {
+            this.closeActivation(false);
+            this.hideSafetyCard();
+            this.recoveryCard.hidden = true;
+            this.hideStatus();
+            return;
+        }
+        this.hideStatus();
+    }
+    showLaunchUnavailable(message) {
+        this.active = false;
+        this.orb.hidden = true;
+        this.renderRecoveryCard(message, false);
+        this.stateMachine.reset();
+    }
+    updateHighlight(element, status) {
+        this.highlightResizeObserver?.disconnect();
+        this.unbindHighlightScrollTargets();
+        this.highlightTarget = element?.isConnected ? element : null;
+        this.highlight.className = `action-highlight ${status}`;
+        if (!this.highlightTarget)
+            return;
+        this.highlightResizeObserver?.observe(this.highlightTarget);
+        this.bindHighlightScrollTargets(this.highlightTarget);
+        this.renderHighlight();
+    }
+    safetySurfaceVisible() {
+        if (document.visibilityState === "hidden")
+            return false;
+        const surface = this.safetyCard.hidden
+            ? this.active && !this.orb.hidden
+                ? this.orb
+                : null
+            : this.safetyCard;
+        if (!surface)
+            return false;
+        const rect = surface.getBoundingClientRect();
+        const computed = getComputedStyle(surface);
+        if (rect.width < 2 ||
+            rect.height < 2 ||
+            rect.bottom <= 0 ||
+            rect.right <= 0 ||
+            rect.top >= window.innerHeight ||
+            rect.left >= window.innerWidth ||
+            computed.display === "none" ||
+            computed.visibility === "hidden" ||
+            Number.parseFloat(computed.opacity || "1") <= 0) {
+            return false;
+        }
+        const x = Math.max(0, Math.min(window.innerWidth - 1, rect.left + rect.width / 2));
+        const y = Math.max(0, Math.min(window.innerHeight - 1, rect.top + 20));
+        const documentTop = document.elementFromPoint(x, y);
+        if (documentTop !== this.host && !surface.contains(documentTop))
+            return false;
+        const shadowTop = this.shadow.elementFromPoint?.(x, y) ?? null;
+        return !shadowTop || surface.contains(shadowTop);
+    }
+    cancelPendingConfirmation() {
+        if (this.resolvePendingConfirmation(false))
+            return true;
+        if (this.currentVisualRequest) {
+            this.resolveVisualRequest(false);
+            return true;
+        }
+        return false;
+    }
+    resolvePendingConfirmation(approved) {
+        if (!this.currentConfirmation)
+            return false;
+        this.resolveConfirmation(approved);
+        return true;
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        document.removeEventListener("visibilitychange", this.onVisibilityChange);
+        document.removeEventListener("scroll", this.scheduleHighlightLayout, true);
+        window.removeEventListener("resize", this.scheduleHighlightLayout);
+        window.visualViewport?.removeEventListener("resize", this.scheduleHighlightLayout);
+        window.visualViewport?.removeEventListener("scroll", this.scheduleHighlightLayout);
+        this.modalLayer.removeEventListener("keydown", this.onModalKeyDown);
+        if (this.wakeTimer)
+            clearTimeout(this.wakeTimer);
+        if (this.statusTimer)
+            clearTimeout(this.statusTimer);
+        if (this.attributionTimer)
+            clearTimeout(this.attributionTimer);
+        if (this.captionLayoutFrame !== null)
+            cancelAnimationFrame(this.captionLayoutFrame);
+        if (this.highlightFrame !== null)
+            cancelAnimationFrame(this.highlightFrame);
+        this.captionResizeObserver?.disconnect();
+        this.highlightResizeObserver?.disconnect();
+        this.unbindHighlightScrollTargets();
+        this.placement.destroy();
+        this.clearCaptions();
+        this.stopAudio();
+        this.host.remove();
+    }
+    build() {
+        const fragment = document.createDocumentFragment();
+        const presenceField = document.createElement("div");
+        presenceField.className = "presence-field";
+        presenceField.dataset.role = "presence-field";
+        presenceField.setAttribute("aria-hidden", "true");
+        const orbWrap = document.createElement("div");
+        orbWrap.className = "orb-wrap";
+        const captions = document.createElement("div");
+        captions.className = "caption-stage";
+        captions.setAttribute("aria-hidden", "true");
+        const subtitleTrack = document.createElement("div");
+        subtitleTrack.className = "subtitle-track";
+        subtitleTrack.dataset.role = "subtitle-track";
+        captions.append(subtitleTrack);
+        const status = document.createElement("div");
+        status.className = "status-bubble";
+        status.dataset.role = "status-bubble";
+        status.hidden = true;
+        status.setAttribute("role", "status");
+        const attribution = document.createElement("div");
+        attribution.className = "attribution-bubble";
+        attribution.dataset.role = "attribution";
+        attribution.hidden = true;
+        attribution.setAttribute("role", "status");
+        attribution.append(document.createTextNode("Powered by "));
+        const attributionLink = document.createElement("a");
+        attributionLink.href = "https://oxvo.com/";
+        attributionLink.target = "_blank";
+        attributionLink.rel = "noopener noreferrer";
+        attributionLink.textContent = "OXVO.com";
+        attribution.append(attributionLink);
+        const safety = document.createElement("div");
+        safety.className = "safety-card";
+        safety.dataset.role = "safety-card";
+        safety.hidden = true;
+        safety.setAttribute("role", "alertdialog");
+        safety.setAttribute("aria-modal", "false");
+        const recovery = document.createElement("div");
+        recovery.className = "recovery-card";
+        recovery.dataset.role = "recovery-card";
+        recovery.hidden = true;
+        recovery.setAttribute("role", "alertdialog");
+        recovery.setAttribute("aria-modal", "false");
+        const orb = document.createElement("button");
+        orb.type = "button";
+        orb.className = "orb";
+        orb.dataset.role = "orb";
+        orb.dataset.active = "false";
+        orb.setAttribute("aria-label", this.launcherLabel());
+        const surface = document.createElement("span");
+        surface.className = "orb-surface";
+        const rim = document.createElement("span");
+        rim.className = "orb-rim";
+        const core = document.createElement("span");
+        core.className = "orb-core";
+        const start = document.createElement("span");
+        start.className = "orb-icon start-icon";
+        const customStartIcon = createSafeSvgIcon(this.voiceConfig.launcher.customIconSvg);
+        if (customStartIcon) {
+            customStartIcon.classList.add("start-symbol", "custom-start-symbol");
+            start.append(customStartIcon);
+        }
+        else {
+            start.append(icon(AudioWaveform, "start-symbol"));
+        }
+        const end = document.createElement("span");
+        end.className = "orb-icon end-icon";
+        end.append(icon(X, "end-symbol"));
+        orb.append(surface, rim, core, start, end);
+        if (this.voiceConfig.launcher.showLabelOnFirstVisit) {
+            const label = document.createElement("span");
+            label.className = "first-label";
+            label.dataset.role = "first-label";
+            label.textContent = this.config.appearance?.launcherLabel || "Talk to us";
+            orbWrap.append(label);
+        }
+        orbWrap.append(captions, status, attribution, safety, recovery, orb);
+        const modalLayer = document.createElement("div");
+        modalLayer.className = "dialog-layer";
+        modalLayer.dataset.role = "activation-layer";
+        modalLayer.hidden = true;
+        const dialog = document.createElement("section");
+        dialog.className = "dialog";
+        dialog.setAttribute("role", "dialog");
+        dialog.setAttribute("aria-modal", "true");
+        dialog.setAttribute("aria-labelledby", "oxvo-voice-title");
+        dialog.setAttribute("aria-describedby", "oxvo-voice-description");
+        const head = document.createElement("div");
+        head.className = "dialog-head";
+        const copy = document.createElement("div");
+        const title = document.createElement("h2");
+        title.id = "oxvo-voice-title";
+        title.textContent = this.voiceConfig.activation.title;
+        const description = document.createElement("p");
+        description.id = "oxvo-voice-description";
+        description.textContent = this.voiceConfig.activation.description;
+        copy.append(title, description);
+        const close = document.createElement("button");
+        close.type = "button";
+        close.className = "icon-button";
+        close.dataset.role = "activation-close";
+        close.setAttribute("aria-label", this.voiceConfig.activation.secondaryLabel);
+        close.append(icon(X, "close-symbol"));
+        head.append(copy, close);
+        const agreement = document.createElement("label");
+        agreement.className = "agreement";
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.checked = true;
+        checkbox.dataset.role = "agreement";
+        const agreementText = document.createElement("span");
+        agreementText.textContent = `I agree to use ${this.config.appearance?.brandName || "AI voice assist"}.`;
+        agreement.append(checkbox, agreementText);
+        if (this.voiceConfig.activation.detailsLabel) {
+            const details = document.createElement("details");
+            const summary = document.createElement("summary");
+            summary.textContent = this.voiceConfig.activation.detailsLabel;
+            const legal = document.createElement("div");
+            legal.className = "legal-copy";
+            const disclosure = document.createElement("p");
+            disclosure.textContent =
+                this.config.consent?.disclosure || this.messages.disclosure;
+            const boundary = document.createElement("p");
+            boundary.textContent = this.messages.safetyBoundary;
+            const links = document.createElement("div");
+            links.className = "legal-links";
+            if (this.config.consent?.policyUrl) {
+                links.append(this.legalLink(this.config.consent.policyUrl, this.messages.privacyPolicy));
+            }
+            if (this.config.consent?.termsUrl) {
+                links.append(this.legalLink(this.config.consent.termsUrl, this.messages.termsOfService));
+            }
+            legal.append(disclosure, boundary, links);
+            details.append(summary, legal);
+            dialog.append(head, agreement, details);
+        }
+        else {
+            dialog.append(head, agreement);
+        }
+        const actions = document.createElement("div");
+        actions.className = "dialog-actions";
+        const secondary = document.createElement("button");
+        secondary.type = "button";
+        secondary.className = "button";
+        secondary.dataset.role = "activation-secondary";
+        secondary.textContent = this.voiceConfig.activation.secondaryLabel;
+        const primary = document.createElement("button");
+        primary.type = "button";
+        primary.className = "button primary";
+        primary.dataset.role = "activation-primary";
+        primary.textContent = this.voiceConfig.activation.primaryLabel;
+        actions.append(secondary, primary);
+        dialog.append(actions);
+        modalLayer.append(dialog);
+        const live = document.createElement("div");
+        live.className = "hidden-live";
+        live.dataset.role = "live-region";
+        live.setAttribute("aria-live", "polite");
+        live.setAttribute("aria-atomic", "false");
+        const audio = document.createElement("audio");
+        audio.autoplay = true;
+        audio.setAttribute("playsinline", "");
+        audio.setAttribute("aria-hidden", "true");
+        const highlight = document.createElement("div");
+        highlight.className = "action-highlight";
+        highlight.setAttribute("aria-hidden", "true");
+        fragment.append(presenceField, orbWrap, modalLayer, live, audio, highlight);
+        return fragment;
+    }
+    bind() {
+        this.orb.addEventListener("click", () => {
+            if (this.active) {
+                this.stateMachine.transition("ending");
+                this.callbacks.onEnd();
+                return;
+            }
+            if (this.activeElsewhere)
+                return;
+            this.openActivation();
+        });
+        this.require('[data-role="activation-close"]').addEventListener("click", () => this.closeActivation());
+        this.require('[data-role="activation-secondary"]').addEventListener("click", () => this.closeActivation());
+        this.require('[data-role="activation-primary"]').addEventListener("click", () => {
+            if (!this.agreement.checked) {
+                this.agreement.focus();
+                return;
+            }
+            this.ensureAudioContext();
+            this.showPreflight();
+            const consent = this.config.consent;
+            const scopes = [
+                ...new Set([
+                    ...(consent?.requiredScopes ?? []),
+                    ...(consent?.optionalScopes ?? []),
+                ]),
+            ];
+            this.callbacks.onStart("voice", scopes);
+        });
+        this.modalLayer.addEventListener("keydown", this.onModalKeyDown);
+        this.modalLayer.addEventListener("pointerdown", (event) => {
+            if (event.target === this.modalLayer)
+                this.closeActivation();
+        });
+        document.addEventListener("visibilitychange", this.onVisibilityChange);
+        document.addEventListener("scroll", this.scheduleHighlightLayout, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", this.scheduleHighlightLayout, {
+            passive: true,
+        });
+        window.visualViewport?.addEventListener("resize", this.scheduleHighlightLayout, {
+            passive: true,
+        });
+        window.visualViewport?.addEventListener("scroll", this.scheduleHighlightLayout, {
+            passive: true,
+        });
+    }
+    bindPlaybackState() {
+        this.audio.addEventListener("playing", () => {
+            this.playbackState = "playing";
+            this.emitPlaybackState("playing");
+            this.syncPresenceFromPlayback();
+        });
+        this.audio.addEventListener("waiting", () => {
+            this.playbackState = "waiting";
+            this.emitPlaybackState("waiting");
+            this.syncPresenceFromPlayback();
+        });
+        this.audio.addEventListener("pause", () => {
+            this.playbackState = "paused";
+            this.emitPlaybackState("paused");
+            this.syncPresenceFromPlayback();
+        });
+        this.audio.addEventListener("ended", () => {
+            this.playbackState = "ended";
+            this.emitPlaybackState("ended");
+            this.syncPresenceFromPlayback();
+        });
+    }
+    resumeRemotePlayback() {
+        if (!this.active ||
+            !this.audio.paused ||
+            !this.audio.srcObject ||
+            this.playbackResumePending) {
+            return;
+        }
+        this.playbackResumePending = true;
+        void this.audio
+            .play()
+            .catch(() => {
+            this.emitPlaybackState("blocked");
+            this.showTransientStatus("Tap the voice button to resume audio.", 6000);
+        })
+            .finally(() => {
+            this.playbackResumePending = false;
+        });
+    }
+    effectivePresenceState() {
+        const state = this.serverPresenceState;
+        if (state === "ending")
+            return "ending";
+        if (state === "acting" ||
+            state === "awaiting_confirmation" ||
+            state === "reconnecting") {
+            return `active.${state}`;
+        }
+        if (this.playbackState === "playing")
+            return "active.speaking";
+        if (state === "speaking") {
+            return this.playbackState === "paused" || this.playbackState === "ended"
+                ? "active.ready"
+                : "active.thinking";
+        }
+        return `active.${state}`;
+    }
+    syncPresenceFromPlayback() {
+        if (!this.active)
+            return;
+        this.stateMachine.transition(this.effectivePresenceState());
+        this.syncLevelLoop();
+    }
+    syncLevelLoop() {
+        if (this.stateMachine.state === "active.listening" ||
+            this.stateMachine.state === "active.speaking") {
+            this.startLevelLoop();
+        }
+        else {
+            this.stopLevelLoop();
+        }
+    }
+    emitPlaybackState(state) {
+        this.callbacks.onPlaybackState({
+            state,
+            audible: state === "playing" && !this.audio.muted && this.audio.volume > 0,
+            utteranceId: null,
+            sampledAt: new Date().toISOString(),
+        });
+    }
+    applyConfig() {
+        const accent = this.config.appearance?.accent;
+        if (accent && /^#[0-9a-fA-F]{6}$/.test(accent)) {
+            this.host.style.setProperty("--voice-accent", accent);
+        }
+        this.host.style.setProperty("--voice-inline-offset", `${this.voiceConfig.launcher.offsetInlinePx}px`);
+        this.host.style.setProperty("--voice-block-offset", `${this.voiceConfig.launcher.offsetBlockPx}px`);
+        this.host.style.setProperty("--voice-orb-size", this.voiceConfig.launcher.size === "compact" ? "52px" : "58px");
+    }
+    openActivation() {
+        this.hideAttribution();
+        const shadowActiveElement = this.shadow.activeElement;
+        const documentActiveElement = document.activeElement;
+        this.restoreFocus =
+            shadowActiveElement instanceof HTMLElement
+                ? shadowActiveElement
+                : documentActiveElement instanceof HTMLElement &&
+                    documentActiveElement !== this.host
+                    ? documentActiveElement
+                    : this.orb;
+        this.require('[data-role="first-label"]', false)?.remove();
+        this.placement.refresh(true);
+        this.modalLayer.hidden = false;
+        this.stateMachine.transition("activation_modal");
+        queueMicrotask(() => this.agreement.focus());
+    }
+    closeActivation(restore = true) {
+        if (this.modalLayer.hidden)
+            return;
+        this.modalLayer.hidden = true;
+        if (this.stateMachine.state === "activation_modal")
+            this.stateMachine.transition("launcher");
+        if (restore)
+            this.restoreFocus?.focus();
+        this.restoreFocus = null;
+        this.placement.refresh();
+    }
+    showAttribution() {
+        this.hideAttribution();
+        if (this.config.appearance?.attribution?.enabled === false)
+            return;
+        this.attributionBubble.hidden = false;
+        this.attributionTimer = setTimeout(() => {
+            this.attributionTimer = null;
+            this.attributionBubble.hidden = true;
+        }, 7000);
+    }
+    hideAttribution() {
+        if (this.attributionTimer)
+            clearTimeout(this.attributionTimer);
+        this.attributionTimer = null;
+        this.attributionBubble.hidden = true;
+    }
+    renderSafetyCard(title, copy, approveLabel, declineLabel, approve, decline) {
+        const heading = document.createElement("h3");
+        heading.className = "card-title";
+        heading.textContent = title.slice(0, 160);
+        const body = document.createElement("p");
+        body.className = "card-copy";
+        body.textContent = copy.slice(0, 600);
+        const actions = document.createElement("div");
+        actions.className = "card-actions";
+        const no = document.createElement("button");
+        no.type = "button";
+        no.className = "button";
+        no.dataset.role = "safety-decline";
+        no.textContent = declineLabel;
+        no.addEventListener("click", decline, { once: true });
+        const yes = document.createElement("button");
+        yes.type = "button";
+        yes.className = "button primary";
+        yes.dataset.role = "safety-approve";
+        yes.textContent = approveLabel;
+        yes.addEventListener("click", approve, { once: true });
+        actions.append(no, yes);
+        this.safetyCard.replaceChildren(heading, body, actions);
+        this.safetyCard.hidden = false;
+        this.syncSubtitleOcclusion();
+        queueMicrotask(() => no.focus());
+    }
+    hideSafetyCard() {
+        this.safetyCard.hidden = true;
+        this.safetyCard.replaceChildren();
+        this.syncSubtitleOcclusion();
+    }
+    resolveConfirmation(approved) {
+        const confirmation = this.currentConfirmation;
+        if (!confirmation)
+            return;
+        this.currentConfirmation = null;
+        this.hideSafetyCard();
+        this.stateMachine.transition("active.ready");
+        this.callbacks.onConfirmation(confirmation.actionId, confirmation.proposalChecksum, approved);
+    }
+    resolveVisualRequest(approved) {
+        const request = this.currentVisualRequest;
+        if (!request)
+            return;
+        this.currentVisualRequest = null;
+        this.hideSafetyCard();
+        this.stateMachine.transition("active.ready");
+        this.callbacks.onVisualContext(request, approved);
+    }
+    renderRecoveryCard(message, retryable) {
+        const badge = document.createElement("div");
+        badge.className = "recovery-badge";
+        badge.setAttribute("aria-hidden", "true");
+        badge.append(icon(ShieldCheck, "recovery-symbol"));
+        const title = document.createElement("h2");
+        title.className = "card-title";
+        title.id = "oxvo-voice-recovery-title";
+        title.textContent = this.messages.introTitle;
+        const copy = document.createElement("p");
+        copy.className = "card-copy";
+        copy.id = "oxvo-voice-recovery-copy";
+        copy.textContent = message.slice(0, 600);
+        const actions = document.createElement("div");
+        actions.className = "card-actions";
+        const close = document.createElement("button");
+        close.type = "button";
+        close.className = "icon-button recovery-close";
+        close.dataset.role = "recovery-close";
+        close.setAttribute("aria-label", this.messages.close);
+        close.append(icon(X, "close-symbol"));
+        close.addEventListener("click", () => {
+            this.recoveryCard.hidden = true;
+            this.recoveryCard.replaceChildren();
+            this.syncSubtitleOcclusion();
+        });
+        const heading = document.createElement("div");
+        heading.className = "recovery-head";
+        heading.append(badge, title, close);
+        if (retryable) {
+            const retry = document.createElement("button");
+            retry.type = "button";
+            retry.className = "button primary";
+            retry.append(icon(RefreshCw, "retry-symbol"), document.createTextNode(this.messages.retry));
+            retry.addEventListener("click", () => {
+                this.recoveryCard.hidden = true;
+                this.syncSubtitleOcclusion();
+                this.callbacks.onRetry();
+            });
+            actions.append(retry);
+        }
+        const fallback = this.configuredFallback();
+        if (fallback) {
+            const fallbackButton = document.createElement("button");
+            fallbackButton.type = "button";
+            fallbackButton.className = "button";
+            fallbackButton.dataset.role = "configured-fallback";
+            fallbackButton.textContent =
+                fallback === "standard_assist"
+                    ? this.messages.continueWithFullAssist
+                    : this.messages.requestHumanFallback;
+            fallbackButton.addEventListener("click", () => {
+                fallbackButton.disabled = true;
+                this.recoveryCard.hidden = true;
+                this.recoveryCard.replaceChildren();
+                this.syncSubtitleOcclusion();
+                this.onFallback(fallback);
+            }, { once: true });
+            actions.append(fallbackButton);
+        }
+        this.recoveryCard.setAttribute("aria-labelledby", title.id);
+        this.recoveryCard.setAttribute("aria-describedby", copy.id);
+        this.recoveryCard.replaceChildren(heading, copy);
+        if (actions.childElementCount > 0)
+            this.recoveryCard.append(actions);
+        this.recoveryCard.hidden = false;
+        this.syncSubtitleOcclusion();
+    }
+    syncSubtitleOcclusion() {
+        const occluded = !this.safetyCard.hidden || !this.recoveryCard.hidden;
+        this.captionStage.hidden = occluded;
+        if (occluded) {
+            this.host.style.setProperty("--voice-subtitle-height", "0px");
+            return;
+        }
+        this.layoutCaptions();
+    }
+    configuredFallback() {
+        if (this.voiceConfig.fallback === "offer_standard_assist" &&
+            (this.config.capabilities?.text || this.config.capabilities?.voice)) {
+            return "standard_assist";
+        }
+        if (this.voiceConfig.fallback === "offer_human_handoff" &&
+            this.config.capabilities?.handoff) {
+            return "human_handoff";
+        }
+        return null;
+    }
+    showTransientStatus(value, visibleMs) {
+        if (this.statusTimer)
+            clearTimeout(this.statusTimer);
+        this.statusTimer = null;
+        this.statusBubble.textContent = value.slice(0, 240);
+        this.statusBubble.hidden = false;
+        if (visibleMs > 0) {
+            this.statusTimer = setTimeout(() => {
+                this.statusTimer = null;
+                this.hideStatus();
+            }, visibleMs);
+        }
+    }
+    hideStatus() {
+        if (this.statusTimer)
+            clearTimeout(this.statusTimer);
+        this.statusTimer = null;
+        this.statusBubble.hidden = true;
+        this.statusBubble.textContent = "";
+    }
+    layoutCaptions() {
+        const availableHeight = Math.max(180, this.captionStage.clientHeight || 680);
+        while (this.subtitleTrack.childElementCount > 1 &&
+            this.subtitleTrack.scrollHeight > availableHeight) {
+            const oldest = this.subtitleTrack.firstElementChild;
+            if (!oldest)
+                break;
+            this.discardCaption(oldest);
+        }
+        const currentLines = Array.from(this.subtitleTrack.querySelectorAll(".caption"));
+        currentLines.forEach((line, index) => {
+            line.classList.toggle("previous", index < currentLines.length - 1);
+        });
+        const trackHeight = this.subtitleTrack.childElementCount > 0
+            ? Math.ceil(this.subtitleTrack.getBoundingClientRect().height ||
+                this.subtitleTrack.offsetHeight)
+            : 0;
+        this.host.style.setProperty("--voice-subtitle-height", `${trackHeight}px`);
+    }
+    discardCaption(line) {
+        const timer = this.captionTimers.get(line);
+        if (timer)
+            clearTimeout(timer);
+        this.captionTimers.delete(line);
+        this.captionResizeObserver?.unobserve(line);
+        line.remove();
+    }
+    removeCaption(line) {
+        const timer = this.captionTimers.get(line);
+        if (timer)
+            clearTimeout(timer);
+        this.captionTimers.delete(line);
+        if (!line.isConnected)
+            return;
+        line.classList.add("leaving");
+        const removalTimer = setTimeout(() => {
+            this.captionTimers.delete(line);
+            this.captionResizeObserver?.unobserve(line);
+            line.remove();
+            this.layoutCaptions();
+        }, 190);
+        this.captionTimers.set(line, removalTimer);
+    }
+    clearCaptions() {
+        for (const timer of this.captionTimers.values())
+            clearTimeout(timer);
+        this.captionTimers.clear();
+        this.captionResizeObserver?.disconnect();
+        this.subtitleTrack.replaceChildren();
+        this.host.style.setProperty("--voice-subtitle-height", "0px");
+        this.liveRegion.replaceChildren();
+    }
+    bindHighlightScrollTargets(target) {
+        let ancestor = target;
+        while (true) {
+            if (ancestor.parentElement) {
+                ancestor = ancestor.parentElement;
+            }
+            else {
+                const root = ancestor.getRootNode();
+                ancestor = root instanceof ShadowRoot ? root.host : null;
+            }
+            if (!ancestor)
+                break;
+            ancestor.addEventListener("scroll", this.scheduleHighlightLayout, {
+                passive: true,
+            });
+            this.highlightScrollTargets.push(ancestor);
+        }
+    }
+    unbindHighlightScrollTargets() {
+        for (const target of this.highlightScrollTargets) {
+            target.removeEventListener("scroll", this.scheduleHighlightLayout);
+        }
+        this.highlightScrollTargets = [];
+    }
+    renderHighlight() {
+        const target = this.highlightTarget;
+        if (!target?.isConnected) {
+            this.highlightTarget = null;
+            this.highlightResizeObserver?.disconnect();
+            this.unbindHighlightScrollTargets();
+            this.highlight.classList.remove("visible");
+            return;
+        }
+        const targetRect = target.getBoundingClientRect();
+        const targetStyle = getComputedStyle(target);
+        if (targetRect.width < 1 ||
+            targetRect.height < 1 ||
+            targetStyle.display === "none" ||
+            targetStyle.visibility === "hidden" ||
+            Number.parseFloat(targetStyle.opacity || "1") <= 0) {
+            this.highlight.classList.remove("visible");
+            return;
+        }
+        const visual = window.visualViewport;
+        const viewportLeft = visual?.offsetLeft ?? 0;
+        const viewportTop = visual?.offsetTop ?? 0;
+        const viewportRight = viewportLeft + (visual?.width ?? window.innerWidth);
+        const viewportBottom = viewportTop + (visual?.height ?? window.innerHeight);
+        const left = Math.max(viewportLeft, targetRect.left - 5);
+        const top = Math.max(viewportTop, targetRect.top - 5);
+        const right = Math.min(viewportRight, targetRect.right + 5);
+        const bottom = Math.min(viewportBottom, targetRect.bottom + 5);
+        if (right - left < 2 || bottom - top < 2) {
+            this.highlight.classList.remove("visible");
+            return;
+        }
+        this.highlight.style.left = `${left}px`;
+        this.highlight.style.top = `${top}px`;
+        this.highlight.style.width = `${right - left}px`;
+        this.highlight.style.height = `${bottom - top}px`;
+        this.highlight.classList.add("visible");
+    }
+    announce(value) {
+        const line = document.createElement("span");
+        line.textContent = value;
+        this.liveRegion.append(line);
+        while (this.liveRegion.children.length > MAX_LIVE_ANNOUNCEMENTS) {
+            this.liveRegion.firstElementChild?.remove();
+        }
+    }
+    ensureAudioContext() {
+        if (this.audioContext) {
+            void this.audioContext.resume().catch(() => undefined);
+            return;
+        }
+        const AudioContextConstructor = window.AudioContext ||
+            window
+                .webkitAudioContext;
+        if (!AudioContextConstructor)
+            return;
+        try {
+            this.audioContext = new AudioContextConstructor({
+                latencyHint: "interactive",
+            });
+            void this.audioContext.resume().catch(() => undefined);
+        }
+        catch {
+            this.audioContext = null;
+        }
+    }
+    connectOutputAnalyser(stream) {
+        this.ensureAudioContext();
+        const context = this.audioContext;
+        if (!context)
+            return;
+        try {
+            this.outputSource?.disconnect();
+            this.outputAnalyser?.disconnect();
+            this.outputAnalyser = context.createAnalyser();
+            this.outputAnalyser.fftSize = 256;
+            this.outputAnalyser.smoothingTimeConstant = 0.78;
+            this.levelBuffer = new Uint8Array(this.outputAnalyser.fftSize);
+            this.outputSource = context.createMediaStreamSource(stream);
+            this.outputSource.connect(this.outputAnalyser);
+        }
+        catch {
+            this.outputSource = null;
+            this.outputAnalyser = null;
+            this.levelBuffer = null;
+        }
+    }
+    startLevelLoop() {
+        if (this.levelFrame !== null ||
+            !this.activeAnalyser() ||
+            !this.levelBuffer ||
+            document.hidden) {
+            return;
+        }
+        const frame = (timestamp) => {
+            this.levelFrame = null;
+            const analyser = this.activeAnalyser();
+            if (!this.active || document.hidden || !analyser || !this.levelBuffer) {
+                this.host.style.setProperty("--voice-level", "0");
+                return;
+            }
+            if (timestamp - this.lastLevelAt >= 50) {
+                this.lastLevelAt = timestamp;
+                analyser.getByteTimeDomainData(this.levelBuffer);
+                let sum = 0;
+                for (const sample of this.levelBuffer) {
+                    const normalized = (sample - 128) / 128;
+                    sum += normalized * normalized;
+                }
+                const rms = Math.sqrt(sum / this.levelBuffer.length);
+                this.host.style.setProperty("--voice-level", Math.min(1, rms * 5.5).toFixed(3));
+            }
+            this.levelFrame = requestAnimationFrame(frame);
+        };
+        this.levelFrame = requestAnimationFrame(frame);
+    }
+    stopLevelLoop() {
+        if (this.levelFrame !== null)
+            cancelAnimationFrame(this.levelFrame);
+        this.levelFrame = null;
+        this.host.style.setProperty("--voice-level", "0");
+    }
+    stopAudio() {
+        this.stopLevelLoop();
+        this.audio.pause();
+        const remoteStream = this.audio.srcObject;
+        this.audio.srcObject = null;
+        if (remoteStream &&
+            typeof MediaStream !== "undefined" &&
+            remoteStream instanceof MediaStream) {
+            for (const track of remoteStream.getTracks())
+                track.stop();
+        }
+        this.outputSource?.disconnect();
+        this.outputSource = null;
+        this.outputAnalyser?.disconnect();
+        this.outputAnalyser = null;
+        this.inputSource?.disconnect();
+        this.inputSource = null;
+        this.inputAnalyser?.disconnect();
+        this.inputAnalyser = null;
+        this.levelBuffer = null;
+        if (this.audioContext)
+            void this.audioContext.close().catch(() => undefined);
+        this.audioContext = null;
+    }
+    activeAnalyser() {
+        if (this.stateMachine.state === "active.listening")
+            return this.inputAnalyser;
+        if (this.stateMachine.state === "active.speaking" && !this.audio.paused) {
+            return this.outputAnalyser;
+        }
+        return null;
+    }
+    legalLink(url, label) {
+        const link = document.createElement("a");
+        link.href = url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.textContent = label;
+        return link;
+    }
+    launcherLabel() {
+        const identity = this.config.appearance?.brandName || "AI assistant";
+        return `Talk to ${identity}`;
+    }
+    require(selector, required = true) {
+        const value = this.shadow.querySelector(selector);
+        if (!value && required)
+            throw new Error(`Missing Voice Presence element: ${selector}`);
+        return value;
+    }
+}