@oxvo/ai-live-assist 7.3.0

package/lib/ui.js

@@ -0,0 +1,2349 @@
+import { AudioLines, Captions, CaptionsOff, CircleStop, Ellipsis, Eye, EyeOff, Hand, Maximize2, MessageSquareText, Mic, MicOff, Minimize2, Pause, Play, RotateCcw, Send, Square, UserRound, X, createElement as createLucideElement, } from "lucide";
+import { defaultMessages } from "./messages.js";
+const PANEL_POSITION_KEY = "__oxvo_ai_live_assist_panel_position_v1";
+const PANEL_VIEW_KEY = "__oxvo_ai_live_assist_panel_view_v1";
+const PANEL_VISIBILITY_KEY = "__oxvo_ai_live_assist_panel_visibility_v1";
+const SESSION_START_KEY = "__oxvo_ai_live_assist_session_start_v1";
+const COMPACT_CAPTION_LIFETIME_MS = 8000;
+const COMPACT_CAPTION_EXIT_MS = 220;
+const AMBIENT_IDLE_GRACE_MS = 700;
+const style = `
+  :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;
+    --assist-text: #111827;
+    --assist-muted: #6b7280;
+    --assist-border: #e5e7eb;
+    --assist-surface: #ffffff;
+    --assist-surface-muted: #f9fafb;
+  }
+  *, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
+  button, input, summary { font: inherit; }
+  button { min-height: 40px; border-radius: 10px; 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(--accent) 45%, white);
+    outline-offset: 2px;
+  }
+  .launcher {
+    position: fixed;
+    bottom: max(20px, env(safe-area-inset-bottom));
+    inset-inline-end: 20px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 48px;
+    max-width: min(260px, calc(100vw - 40px));
+    padding: 0 16px;
+    color: white;
+    background: var(--accent);
+    border: 1px solid color-mix(in srgb, var(--accent) 70%, black);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
+    pointer-events: auto;
+    font-size: 14px;
+    font-weight: 650;
+    z-index: 2;
+  }
+  .launcher::before {
+    content: '';
+    width: 9px;
+    height: 9px;
+    flex: 0 0 9px;
+    border: 2px solid white;
+    border-radius: 50%;
+  }
+  .launcher[data-active="true"]::after {
+    content: '';
+    position: absolute;
+    top: -4px;
+    inset-inline-end: -4px;
+    width: 13px;
+    height: 13px;
+    background: #dc2626;
+    border: 2px solid white;
+    border-radius: 50%;
+    animation: live-badge-pulse 1.35s ease-out infinite;
+  }
+  .panel {
+    position: fixed;
+    bottom: max(20px, env(safe-area-inset-bottom));
+    inset-inline-end: 20px;
+    display: none;
+    width: min(var(--panel-width), calc(100vw - 24px));
+    max-height: min(680px, calc(100vh - 40px));
+    color: var(--assist-text);
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+    border-radius: 16px;
+    box-shadow: 0 3px 6px rgba(15, 23, 42, .08);
+    overflow: hidden;
+    pointer-events: auto;
+    z-index: 2;
+  }
+  .panel[data-anchor="left"] { inset-inline-start: 20px; inset-inline-end: auto; }
+  .panel.open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+  .panel.compact.open {
+    grid-template-rows: auto;
+    overflow: visible;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+  .panel.compact .body, .panel.compact .controls { display: none !important; }
+  .panel.compact .header {
+    position: relative;
+    z-index: 2;
+    background: var(--assist-surface-muted);
+    border: 1px solid var(--assist-border);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
+  }
+  .compact-captions {
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(100% + 8px);
+    display: none;
+    max-height: min(520px, calc(100dvh - 120px));
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 6px;
+    pointer-events: none;
+  }
+  .panel.compact.open .compact-captions { display: flex; }
+  .compact-caption {
+    --compact-caption-slot: 0;
+    position: relative;
+    display: -webkit-box;
+    box-sizing: border-box;
+    width: fit-content;
+    min-width: 0;
+    min-height: 30px;
+    max-height: 162px;
+    max-width: 92%;
+    padding: 6px 9px;
+    color: #1f2933;
+    background: rgba(255, 255, 255, .98);
+    border: 1px solid var(--assist-border);
+    border-radius: 10px;
+    box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
+    font-size: 12px;
+    line-height: 15px;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
+    pointer-events: none;
+    cursor: default;
+    transition: opacity .18s ease;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
+  }
+  .compact-caption.long { width: 92%; }
+  .compact-caption:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+    outline-offset: 2px;
+  }
+  .compact-caption.assistant { align-self: flex-start; border-start-start-radius: 3px; }
+  .compact-caption.user { align-self: flex-end; color: white; background: #315064; border-color: #315064; }
+  .compact-caption.entering { animation: compact-caption-in .22s ease-out both; }
+  .compact-caption.pending {
+    display: flex;
+    width: 32px;
+    height: 26px;
+    min-height: 26px;
+    max-height: 26px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 7px;
+    color: #64707d;
+    background: rgba(255, 255, 255, .96);
+    border-color: rgba(148, 163, 184, .28);
+    border-radius: 8px;
+    box-shadow: 0 3px 10px rgba(15, 23, 42, .09);
+    pointer-events: none;
+    cursor: default;
+  }
+  .compact-caption.user.pending {
+    color: rgba(255, 255, 255, .9);
+    background: #405a6a;
+    border-color: #405a6a;
+  }
+  .compact-caption.pending .typing-dots {
+    width: 14px;
+    height: 4px;
+  }
+  .compact-caption.pending .typing-dots span {
+    width: 3px;
+    height: 3px;
+  }
+  .compact-caption.leaving { opacity: 0; }
+  .header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 10px;
+    min-height: 60px;
+    padding: 10px 12px;
+    background: var(--assist-surface-muted);
+    border-bottom: 1px solid #f1f5f9;
+  }
+  .identity {
+    min-width: 0;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .identity.dragging { cursor: grabbing; }
+  .identity strong, .identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .identity strong { color: var(--assist-text); font-size: 14px; font-weight: 600; line-height: 19px; }
+  .identity span { margin-top: 2px; color: var(--assist-muted); font-size: 11px; line-height: 15px; }
+  .header-actions { display: flex; align-items: center; gap: 6px; }
+  .duration {
+    min-width: 52px;
+    padding: 4px 8px;
+    color: var(--assist-text);
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    white-space: nowrap;
+  }
+  .end, .restart, .view-toggle, .close {
+    display: inline-grid;
+    width: 34px;
+    min-width: 34px;
+    min-height: 34px;
+    place-items: center;
+    padding: 0;
+    position: relative;
+  }
+  .end {
+    color: #c73838;
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+    border-radius: 9px;
+  }
+  .end:hover { background: #fef2f2; border-color: #fecaca; }
+  .restart, .view-toggle, .close {
+    color: #4b5563;
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+  }
+  .restart:hover, .view-toggle:hover, .close:hover { background: #f3f4f6; }
+  .button-icon, .menu-icon, .turn-icon {
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+    line-height: 0;
+  }
+  .button-icon svg, .menu-icon svg, .turn-icon svg { display: block; }
+  .body { min-height: 0; padding: 12px; overflow: auto; }
+  .intro { display: grid; gap: 12px; }
+  .intro h2 { margin: 0; font-size: 17px; line-height: 23px; }
+  .boundary {
+    padding: 9px 10px;
+    color: #374151;
+    background: var(--assist-surface-muted);
+    border-inline-start: 3px solid #64748b;
+    border-radius: 0 8px 8px 0;
+    font-size: 11px;
+    line-height: 17px;
+  }
+  .consents { display: grid; gap: 8px; }
+  .consent {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 9px;
+    align-items: start;
+    color: #29333d;
+    font-size: 12px;
+    line-height: 17px;
+  }
+  .consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
+  .legal-trigger {
+    justify-self: start;
+    min-height: 30px;
+    padding: 0;
+    color: #185ea8;
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .legal-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    display: grid;
+    place-items: center;
+    padding: 14px;
+    background: rgba(15, 23, 42, .36);
+  }
+  .legal-dialog {
+    width: min(100%, 420px);
+    max-height: calc(100% - 12px);
+    overflow: auto;
+    padding: 14px;
+    color: var(--assist-text);
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, .2);
+  }
+  .legal-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
+  .legal-header h3 { margin: 0; font-size: 14px; line-height: 20px; }
+  .legal-close { display: inline-grid; width: 32px; min-width: 32px; min-height: 32px; place-items: center; padding: 0; color: #4b5563; background: white; border: 1px solid var(--assist-border); }
+  .legal-dialog p { margin: 10px 0; color: #4b5563; font-size: 11px; line-height: 17px; }
+  .legal-dialog ul { display: grid; gap: 6px; margin: 10px 0; padding-inline-start: 18px; color: #374151; font-size: 11px; line-height: 16px; }
+  .legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
+  .legal-links a { color: #185ea8; font-size: 11px; font-weight: 600; }
+  .mode-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .primary, .secondary {
+    padding: 0 12px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .primary { color: white; background: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 70%, black); }
+  .secondary { color: #27313b; background: white; border: 1px solid var(--assist-border); }
+  .primary:disabled, .secondary:disabled { cursor: not-allowed; opacity: .5; }
+  .conversation { display: none; min-height: 260px; }
+  .conversation.visible { display: block; }
+  .captions { display: flex; flex-direction: column; gap: 8px; min-height: 140px; max-height: 390px; overflow: auto; }
+  .line { max-width: 88%; padding: 8px 10px; border-radius: 12px; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
+  .line.assistant { align-self: flex-start; color: #1f2933; background: #f1f5f9; border-start-start-radius: 3px; }
+  .line.user { align-self: flex-end; color: white; background: #315064; }
+  .line.pending {
+    display: inline-flex;
+    width: 38px;
+    min-height: 30px;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 8px;
+  }
+  .line.settled { animation: message-settle .16s ease-out; }
+  .typing-dots {
+    display: inline-flex;
+    width: 18px;
+    height: 6px;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .typing-dots span {
+    width: 4px;
+    height: 4px;
+    background: currentColor;
+    border-radius: 50%;
+    opacity: .32;
+    animation: typing-dot 1.05s ease-in-out infinite;
+  }
+  .typing-dots span:nth-child(2) { animation-delay: .14s; }
+  .typing-dots span:nth-child(3) { animation-delay: .28s; }
+  .empty { display: grid; min-height: 140px; place-items: center; color: #6a7480; font-size: 12px; text-align: center; }
+  .controls {
+    position: relative;
+    z-index: 4;
+    display: none;
+    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
+    background: var(--assist-surface);
+    border-top: 1px solid #f1f5f9;
+  }
+  .controls.visible { display: block; }
+  .composer-shell { display: grid; gap: 8px; }
+  .composer { display: flex; align-items: center; gap: 7px; min-width: 0; }
+  .composer input {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 42px;
+    padding: 0 10px;
+    border: 1px solid #cbd5e1;
+    border-radius: 9px;
+    color: #17212b;
+    background: white;
+  }
+  .composer input:disabled { color: #94a3b8; background: #f8fafc; }
+  .send {
+    display: inline-grid;
+    flex: 0 0 42px;
+    width: 42px;
+    min-width: 42px;
+    min-height: 42px;
+    place-items: center;
+    padding: 0;
+    border-radius: 9px;
+  }
+  .more-controls { position: relative; flex: 0 0 42px; }
+  .more-controls summary {
+    display: grid;
+    width: 42px;
+    min-height: 42px;
+    place-items: center;
+    color: var(--assist-text);
+    background: var(--assist-surface-muted);
+    border: 1px solid var(--assist-border);
+    border-radius: 9px;
+    cursor: pointer;
+    list-style: none;
+  }
+  .more-controls summary::-webkit-details-marker { display: none; }
+  .more-controls summary:hover,
+  .more-controls[open] summary {
+    color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 7%, white);
+    border-color: color-mix(in srgb, var(--accent) 32%, white);
+  }
+  .more-menu {
+    position: absolute;
+    inset-inline-start: 0;
+    bottom: calc(100% + 8px);
+    z-index: 5;
+    display: grid;
+    width: min(276px, calc(100vw - 40px));
+    max-height: min(336px, calc(100vh - 150px));
+    gap: 2px;
+    padding: 6px;
+    overflow-y: auto;
+    background: var(--assist-surface);
+    border: 1px solid var(--assist-border);
+    border-radius: 8px;
+    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
+  }
+  .menu-control {
+    display: flex;
+    width: 100%;
+    min-height: 40px;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 9px;
+    color: #27313b;
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 550;
+    line-height: 16px;
+    text-align: start;
+  }
+  .menu-control:hover { background: #f3f5f6; }
+  .menu-control[aria-pressed="true"] {
+    color: color-mix(in srgb, var(--accent) 82%, #111827);
+    background: color-mix(in srgb, var(--accent) 7%, white);
+  }
+  .menu-icon {
+    width: 26px;
+    height: 26px;
+    color: #64707d;
+    background: #f3f5f6;
+    border-radius: 6px;
+  }
+  .menu-control[aria-pressed="true"] .menu-icon {
+    color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 10%, white);
+  }
+  .control-label { min-width: 0; overflow-wrap: anywhere; }
+  .manual-turn-controls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 7px;
+  }
+  .turn-action {
+    display: inline-flex;
+    min-width: 0;
+    min-height: 44px;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    padding: 7px 9px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 650;
+    line-height: 15px;
+    text-align: center;
+  }
+  .turn-action .control-label { overflow-wrap: normal; }
+  .turn-action[aria-pressed="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
+  .turn-action:disabled { cursor: not-allowed; opacity: .48; }
+  .tooltip {
+    position: fixed;
+    z-index: 6;
+    visibility: hidden;
+    max-width: min(220px, calc(100vw - 16px));
+    padding: 6px 8px;
+    color: #f8fafc;
+    background: #202832;
+    border: 1px solid rgba(255, 255, 255, .1);
+    border-radius: 6px;
+    box-shadow: 0 6px 18px rgba(15, 23, 42, .2);
+    opacity: 0;
+    pointer-events: none;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 15px;
+    text-align: center;
+    transform: translateY(2px);
+    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
+  }
+  .tooltip.visible {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+    transition-delay: 0s;
+  }
+  .controls.error { display: none !important; }
+  audio { display: none; }
+  @keyframes compact-caption-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes message-settle { from { opacity: .55; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes attribution-in { from { opacity: 0; transform: translateY(3px); } }
+  @keyframes typing-dot {
+    0%, 65%, 100% { opacity: .28; transform: translateY(0); }
+    32% { opacity: .78; transform: translateY(-1px); }
+  }
+  @keyframes live-badge-pulse {
+    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
+    70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
+  }
+  .status-card { display: none; padding: 12px; color: #26313b; background: var(--assist-surface-muted); border: 1px solid var(--assist-border); border-radius: 12px; font-size: 12px; line-height: 18px; }
+  .status-card.visible { display: block; }
+  .confirmation { display: none; padding: 12px; border: 2px solid var(--accent); border-radius: 12px; background: white; }
+  .confirmation.visible { display: block; }
+  .confirmation h3 { margin: 0 0 6px; font-size: 14px; line-height: 20px; }
+  .confirmation p { margin: 4px 0; color: #4b5563; font-size: 12px; line-height: 17px; }
+  .confirmation strong { color: #17212b; }
+  .confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
+  .confirmation [data-role="approve"], .visual-request [data-role="visual-share"] { background: #16a34a; border-color: #16a34a; }
+  .confirmation [data-role="decline"], .visual-request [data-role="visual-decline"] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
+  .visual-request { display: none; padding: 12px; border: 2px solid #55758c; border-radius: 12px; background: white; }
+  .visual-request.visible { display: block; }
+  .visual-request h3 { margin: 0 0 6px; font-size: 14px; line-height: 20px; }
+  .visual-request p { margin: 4px 0; color: #4b5563; font-size: 12px; line-height: 17px; }
+  .feedback { display: none; }
+  .feedback.visible { display: grid; gap: 12px; margin-top: 10px; padding: 8px 0 4px; }
+  .attribution-bubble {
+    width: max-content;
+    max-width: 100%;
+    padding: 8px 10px;
+    color: var(--assist-muted);
+    background: var(--assist-surface-muted);
+    border: 1px solid var(--assist-border);
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
+    font-size: 12px;
+    line-height: 18px;
+    animation: attribution-in .18s ease-out both;
+  }
+  .attribution-bubble a {
+    color: var(--assist-text);
+    font-weight: 650;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .feedback-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
+  .ambient {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: none;
+    overflow: hidden;
+    pointer-events: none;
+    background:
+      linear-gradient(to left, rgba(34, 211, 238, .048), rgba(139, 92, 246, .02) 6%, transparent 16%),
+      linear-gradient(to top, rgba(236, 72, 153, .046), rgba(34, 211, 238, .017) 7%, transparent 18%);
+  }
+  .ambient.active { display: block; }
+  .ambient::before,
+  .ambient::after {
+    content: '';
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .ambient::before {
+    width: min(30vw, 420px);
+    height: 100%;
+    background: linear-gradient(to bottom, transparent 0%, transparent 46%, rgba(34, 211, 238, .018) 66%, rgba(139, 92, 246, .064) 84%, rgba(236, 72, 153, .13) 100%);
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .16) 46%, black 100%);
+    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .16) 46%, black 100%);
+    opacity: .42;
+  }
+  .ambient::after {
+    width: 100%;
+    height: min(18vh, 160px);
+    background: linear-gradient(to right, transparent 0%, transparent 34%, rgba(34, 211, 238, .026) 62%, rgba(139, 92, 246, .065) 82%, rgba(236, 72, 153, .12) 100%);
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .18) 38%, black 100%);
+    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .18) 38%, black 100%);
+    opacity: .46;
+  }
+  .ambient.active::before { animation: ambient-edge-breathe 6.4s ease-in-out infinite; }
+  .ambient.active::after { animation: ambient-edge-shift 8.6s ease-in-out infinite alternate; }
+  .highlight {
+    position: fixed;
+    display: none;
+    pointer-events: none;
+    border: 3px solid var(--accent);
+    border-radius: 5px;
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
+    transition: inset .12s ease, width .12s ease, height .12s ease;
+    z-index: 3;
+  }
+  .highlight.visible { display: block; }
+  .highlight.success { border-color: #0f8a80; }
+  .highlight.failure { border-color: #c73838; }
+  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  @keyframes ambient-edge-breathe {
+    0%, 100% { opacity: .34; }
+    50% { opacity: .48; }
+  }
+  @keyframes ambient-edge-shift {
+    from { opacity: .38; }
+    to { opacity: .5; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .panel { background: #fff; }
+    .ambient {
+      background:
+        linear-gradient(to left, color-mix(in srgb, var(--accent) 3%, transparent), transparent 16%),
+        linear-gradient(to top, color-mix(in srgb, var(--accent) 3%, transparent), transparent 16%);
+    }
+    .ambient::before, .ambient::after { display: none; }
+  }
+  @media (forced-colors: active) {
+    .ambient { display: none !important; }
+    .launcher, .primary { border: 2px solid ButtonText; }
+    .highlight { border: 3px solid Highlight; box-shadow: none; }
+  }
+  @media (max-width: 520px) {
+    .launcher { inset-inline: 12px; width: calc(100vw - 24px); justify-content: center; }
+    .panel {
+      inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
+      width: auto;
+      max-height: calc(100vh - 16px - env(safe-area-inset-bottom));
+    }
+    .identity { cursor: default; }
+    .header-actions { gap: 4px; }
+    .duration { min-width: 48px; padding-inline: 6px; }
+    .feedback-options { grid-template-columns: 1fr; }
+    .mode-actions { grid-template-columns: 1fr; }
+  }
+`;
+export class WidgetView {
+    constructor(config, overrides, callbacks) {
+        this.callbacks = callbacks;
+        this.ambient = null;
+        this.muted = false;
+        this.manualTurn = false;
+        this.pushActive = false;
+        this.voiceActive = false;
+        this.automaticTurnsAvailable = false;
+        this.paused = false;
+        this.captionsEnabled = true;
+        this.visualPaused = false;
+        this.active = false;
+        this.compact = false;
+        this.panelViewInitialized = false;
+        this.launchUnavailable = false;
+        this.activeElsewhere = false;
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.highlightedElement = null;
+        this.dragState = null;
+        this.tooltipTarget = null;
+        this.tooltipTimer = null;
+        this.ambientHideTimer = null;
+        this.attributionTimer = null;
+        this.sessionStartedAt = null;
+        this.durationInterval = null;
+        this.compactCaptionTimers = new Map();
+        this.assistantState = "ready";
+        this.onTooltipMouseOver = (rawEvent) => {
+            const event = rawEvent;
+            const target = this.tooltipTrigger(event);
+            if (!target)
+                return;
+            if (event.relatedTarget instanceof Node &&
+                target.contains(event.relatedTarget))
+                return;
+            this.showTooltip(target);
+        };
+        this.onTooltipMouseOut = (rawEvent) => {
+            const event = rawEvent;
+            const target = this.tooltipTrigger(event);
+            if (!target)
+                return;
+            if (event.relatedTarget instanceof Node &&
+                target.contains(event.relatedTarget))
+                return;
+            if (this.tooltipTarget === target || this.tooltipTimer !== null)
+                this.hideTooltip();
+        };
+        this.onTooltipFocusIn = (rawEvent) => {
+            const event = rawEvent;
+            const target = this.tooltipTrigger(event);
+            if (target)
+                this.showTooltip(target, true);
+        };
+        this.onTooltipFocusOut = (rawEvent) => {
+            const event = rawEvent;
+            const target = this.tooltipTrigger(event);
+            if (!target)
+                return;
+            if (event.relatedTarget instanceof Node &&
+                target.contains(event.relatedTarget))
+                return;
+            this.hideTooltip();
+        };
+        this.onDocumentPointerDown = (event) => {
+            const details = this.require(".more-controls");
+            if (!details.open || event.composedPath().includes(details))
+                return;
+            this.closeControlsMenu();
+        };
+        this.refreshHighlight = () => {
+            this.hideTooltip();
+            if (this.highlightedElement) {
+                const status = this.highlight.classList.contains("success")
+                    ? "success"
+                    : this.highlight.classList.contains("failure")
+                        ? "failure"
+                        : "focus";
+                this.updateHighlight(this.highlightedElement, status);
+            }
+        };
+        this.onResize = () => {
+            this.hideTooltip();
+            this.clampPanelPosition();
+            this.refreshHighlight();
+        };
+        this.onDragStart = (event) => {
+            if (window.innerWidth <= 520 || event.button !== 0)
+                return;
+            const handle = event.currentTarget;
+            const rect = this.panel.getBoundingClientRect();
+            this.dragState = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                left: rect.left,
+                top: rect.top,
+            };
+            handle.classList.add("dragging");
+            handle.setPointerCapture(event.pointerId);
+            event.preventDefault();
+        };
+        this.onDragMove = (event) => {
+            const drag = this.dragState;
+            if (!drag || drag.pointerId !== event.pointerId)
+                return;
+            const rect = this.panel.getBoundingClientRect();
+            const maxLeft = Math.max(8, window.innerWidth - rect.width - 8);
+            const maxTop = Math.max(8, window.innerHeight - rect.height - 8);
+            const left = Math.min(maxLeft, Math.max(8, drag.left + event.clientX - drag.startX));
+            const top = Math.min(maxTop, Math.max(8, drag.top + event.clientY - drag.startY));
+            this.setPanelPosition(left, top);
+        };
+        this.onDragEnd = (event) => {
+            const drag = this.dragState;
+            if (!drag || drag.pointerId !== event.pointerId)
+                return;
+            const handle = event.currentTarget;
+            if (handle.hasPointerCapture(event.pointerId)) {
+                handle.releasePointerCapture(event.pointerId);
+            }
+            handle.classList.remove("dragging");
+            this.dragState = null;
+            const rect = this.panel.getBoundingClientRect();
+            this.savePanelPosition(rect.left, rect.top);
+        };
+        this.config = config;
+        this.messages = { ...defaultMessages, ...overrides };
+        this.host = document.createElement("div");
+        this.host.dataset.oxvoAiLiveAssistRoot = "true";
+        this.host.setAttribute("aria-live", "off");
+        this.shadow = this.host.attachShadow({ mode: "closed" });
+        const sheet = document.createElement("style");
+        sheet.textContent = style;
+        this.shadow.append(sheet);
+        this.shadow.append(this.build());
+        document.documentElement.append(this.host);
+        this.launcher = this.require(".launcher");
+        this.panel = this.require(".panel");
+        this.body = this.require(".body");
+        this.status = this.require('[data-role="status"]');
+        this.duration = this.require('[data-role="duration"]');
+        this.intro = this.require(".intro");
+        this.conversation = this.require(".conversation");
+        this.captions = this.require(".captions");
+        this.compactCaptions = this.require(".compact-captions");
+        this.controls = this.require(".controls");
+        this.confirmation = this.require(".confirmation");
+        this.visualRequest = this.require(".visual-request");
+        this.feedback = this.require(".feedback");
+        this.attribution = this.require('[data-role="attribution"]');
+        this.highlight = this.require(".highlight");
+        this.tooltip = this.require(".tooltip");
+        this.audio = this.require("audio");
+        this.bindPlaybackState();
+        this.bind();
+        this.applyConfig();
+    }
+    setRemoteStream(stream) {
+        this.audio.srcObject = stream;
+        void this.audio.play().catch(() => {
+            this.setStatus(this.messages.audioPaused);
+            this.emitPlaybackState("blocked");
+        });
+    }
+    bindPlaybackState() {
+        this.audio.addEventListener("playing", () => this.emitPlaybackState("playing"));
+        this.audio.addEventListener("waiting", () => this.emitPlaybackState("waiting"));
+        this.audio.addEventListener("pause", () => this.emitPlaybackState("paused"));
+        this.audio.addEventListener("ended", () => this.emitPlaybackState("ended"));
+    }
+    emitPlaybackState(state) {
+        this.callbacks.onPlaybackState({
+            state,
+            audible: state === "playing" && !this.audio.muted && this.audio.volume > 0,
+            utteranceId: null,
+            sampledAt: new Date().toISOString(),
+        });
+    }
+    setStatus(value) {
+        this.status.textContent = value;
+        this.status.setAttribute("aria-label", value);
+        if (this.active)
+            this.syncLauncherState();
+    }
+    message(key) {
+        return this.messages[key];
+    }
+    setAssistantState(state) {
+        this.assistantState = state;
+        this.setStatus(this.messages[state]);
+        if (state === "listening") {
+            this.clearPendingCaptions("assistant");
+            this.ensurePendingCaption("user", this.messages.listening);
+        }
+        else if (state === "thinking" || state === "speaking") {
+            this.suspendPendingCaption("user");
+            this.ensurePendingCaption("assistant", this.messages[state]);
+        }
+        else {
+            this.clearPendingCaptions();
+        }
+        if (state === "speaking" && this.audio.paused) {
+            void this.audio
+                .play()
+                .catch(() => this.setStatus(this.messages.audioPaused));
+        }
+        this.setAmbientActive(state !== "ready");
+        this.syncLauncherState();
+    }
+    showConnecting(resume = false, mode = "text") {
+        this.active = true;
+        this.hideAttribution();
+        this.assistantState = "connecting";
+        this.voiceActive = mode === "voice";
+        this.panel.classList.toggle("voice-session", this.voiceActive);
+        this.clearPendingCaptions();
+        if (!resume) {
+            this.clearPanelSessionState();
+            this.resetPanelPosition();
+        }
+        this.initializePanelView();
+        if (resume && this.readPanelVisibility() === "hidden") {
+            this.panel.classList.remove("open");
+            this.launcher.hidden = false;
+        }
+        else {
+            this.openPanel();
+        }
+        this.controls.classList.remove("error");
+        this.require('[data-role="notice"]').classList.remove("visible");
+        this.require('[data-role="retry"]').hidden = true;
+        this.intro.hidden = true;
+        this.conversation.classList.add("visible");
+        this.controls.classList.add("visible");
+        this.setComposerEnabled(false);
+        this.setStatus(resume ? this.messages.reconnecting : this.messages.connecting);
+        this.syncHeaderActions();
+        this.startDuration(resume);
+        this.setAmbientActive(true);
+    }
+    showActive(welcomeMessage) {
+        this.active = true;
+        this.hideAttribution();
+        this.assistantState = "ready";
+        this.initializePanelView();
+        this.controls.classList.remove("error");
+        this.require('[data-role="notice"]').classList.remove("visible");
+        this.require('[data-role="retry"]').hidden = true;
+        this.syncHeaderActions();
+        this.feedback.classList.remove("visible");
+        this.intro.hidden = true;
+        this.conversation.classList.add("visible");
+        this.controls.classList.add("visible");
+        this.setComposerEnabled(true);
+        this.setStatus(this.messages.ready);
+        this.clearPendingCaptions();
+        this.setAmbientActive(false);
+        if (this.sessionStartedAt === null)
+            this.startDuration(false);
+        if (welcomeMessage)
+            this.addCaption("assistant", welcomeMessage, true);
+        if (!this.panel.classList.contains("open"))
+            return;
+        if (this.compact) {
+            this.require('[data-role="view-toggle"]').focus();
+        }
+        else if (this.voiceActive) {
+            this.require('[data-role="mute"]').focus();
+        }
+        else {
+            this.require('[data-role="text-input"]').focus();
+        }
+    }
+    addCaption(role, text, final) {
+        if (!this.captionsEnabled)
+            return;
+        if (!final && role === "user" && this.assistantState !== "listening") {
+            return;
+        }
+        this.captions.querySelector('[data-role="empty"]')?.remove();
+        const safe = text.slice(0, 16000);
+        if (!final) {
+            this.ensurePendingCaption(role, role === "user" ? this.messages.listening : this.messages.thinking);
+            return;
+        }
+        if (!safe)
+            return;
+        let line = this.captions.querySelector(`[data-caption="${role}-partial"]`);
+        if (!line) {
+            line = document.createElement("div");
+            this.captions.append(line);
+        }
+        line.className = `line ${role} settled`;
+        line.hidden = false;
+        line.removeAttribute("aria-label");
+        line.textContent = safe;
+        line.dataset.caption = `${role}-${crypto.randomUUID()}`;
+        while (this.captions.children.length > 20)
+            this.captions.firstElementChild?.remove();
+        this.captions.scrollTop = this.captions.scrollHeight;
+        this.addCompactCaption(role, safe, true);
+    }
+    ensurePendingCaption(role, label) {
+        if (!this.captionsEnabled)
+            return;
+        this.captions.querySelector('[data-role="empty"]')?.remove();
+        let line = this.captions.querySelector(`[data-caption="${role}-partial"]`);
+        if (!line) {
+            line = document.createElement("div");
+            line.dataset.caption = `${role}-partial`;
+            this.captions.append(line);
+        }
+        line.className = `line ${role} pending`;
+        line.hidden = false;
+        this.renderPendingDots(line, label);
+        this.captions.scrollTop = this.captions.scrollHeight;
+        this.addCompactCaption(role, "", false, label);
+    }
+    renderPendingDots(line, label) {
+        line.setAttribute("aria-label", label);
+        if (line.querySelector(".typing-dots"))
+            return;
+        const dots = document.createElement("span");
+        dots.className = "typing-dots";
+        dots.setAttribute("aria-hidden", "true");
+        dots.append(document.createElement("span"), document.createElement("span"), document.createElement("span"));
+        line.replaceChildren(dots);
+    }
+    clearPendingCaptions(role) {
+        const suffix = role ? `${role}-partial` : "-partial";
+        this.captions
+            .querySelectorAll(role ? `[data-caption="${suffix}"]` : '[data-caption$="-partial"]')
+            .forEach((line) => line.remove());
+        this.compactCaptions
+            .querySelectorAll(role
+            ? `[data-compact-caption="${suffix}"]`
+            : '[data-compact-caption$="-partial"]')
+            .forEach((line) => this.removeCompactCaption(line));
+    }
+    suspendPendingCaption(role) {
+        const line = this.captions.querySelector(`[data-caption="${role}-partial"]`);
+        if (line)
+            line.hidden = true;
+        this.compactCaptions
+            .querySelectorAll(`[data-compact-caption="${role}-partial"]`)
+            .forEach((pending) => this.removeCompactCaption(pending));
+    }
+    addCompactCaption(role, text, final, pendingLabel = role === "user"
+        ? this.messages.listening
+        : this.messages.thinking) {
+        this.discardExitingCompactCaptions();
+        const partialKey = `${role}-partial`;
+        let line = this.compactCaptions.querySelector(`[data-compact-caption="${partialKey}"]`);
+        const isNew = !line;
+        if (!line) {
+            line = document.createElement("div");
+            line.dataset.compactCaption = partialKey;
+            const activeAssistant = final && role === "user"
+                ? this.compactCaptions.querySelector('[data-compact-caption="assistant-partial"]')
+                : null;
+            if (activeAssistant) {
+                this.compactCaptions.insertBefore(line, activeAssistant);
+            }
+            else {
+                this.compactCaptions.append(line);
+            }
+        }
+        if (final) {
+            line.className = `compact-caption ${role}`;
+            line.classList.toggle("long", text.length > 48);
+            line.removeAttribute("aria-label");
+            line.removeAttribute("data-tooltip");
+            line.removeAttribute("tabindex");
+            line.textContent = text;
+            line.dataset.compactCaption = `${role}-${crypto.randomUUID()}`;
+        }
+        else {
+            line.className = `compact-caption ${role} pending`;
+            line.removeAttribute("data-tooltip");
+            line.removeAttribute("tabindex");
+            this.renderPendingDots(line, pendingLabel);
+        }
+        if (isNew) {
+            line.classList.add("entering");
+            line.addEventListener("animationend", () => line.classList.remove("entering"), {
+                once: true,
+            });
+        }
+        this.scheduleCompactCaptionRemoval(line);
+        while (this.compactCaptions.children.length > 3) {
+            const oldest = this.compactCaptions
+                .firstElementChild;
+            if (!oldest)
+                break;
+            this.removeCompactCaption(oldest);
+        }
+        this.layoutCompactCaptions();
+    }
+    scheduleCompactCaptionRemoval(line) {
+        const existing = this.compactCaptionTimers.get(line);
+        if (existing)
+            clearTimeout(existing);
+        const lifetimeTimer = setTimeout(() => {
+            line.classList.add("leaving");
+            const exitTimer = setTimeout(() => {
+                this.compactCaptionTimers.delete(line);
+                line.remove();
+                this.layoutCompactCaptions();
+            }, COMPACT_CAPTION_EXIT_MS);
+            this.compactCaptionTimers.set(line, exitTimer);
+        }, COMPACT_CAPTION_LIFETIME_MS);
+        this.compactCaptionTimers.set(line, lifetimeTimer);
+    }
+    discardExitingCompactCaptions() {
+        this.compactCaptions
+            .querySelectorAll(".compact-caption.leaving")
+            .forEach((line) => {
+            const timer = this.compactCaptionTimers.get(line);
+            if (timer)
+                clearTimeout(timer);
+            this.compactCaptionTimers.delete(line);
+            line.remove();
+        });
+    }
+    removeCompactCaption(line) {
+        const timer = this.compactCaptionTimers.get(line);
+        if (timer)
+            clearTimeout(timer);
+        this.compactCaptionTimers.delete(line);
+        line.remove();
+        this.layoutCompactCaptions();
+    }
+    layoutCompactCaptions() {
+        const lines = [...this.compactCaptions.children]
+            .filter((element) => element instanceof HTMLElement)
+            .filter((line) => !line.classList.contains("leaving"));
+        lines.reverse().forEach((line, slot) => {
+            line.style.setProperty("--compact-caption-slot", String(slot));
+        });
+    }
+    clearCompactCaptions() {
+        for (const timer of this.compactCaptionTimers.values())
+            clearTimeout(timer);
+        this.compactCaptionTimers.clear();
+        this.compactCaptions.replaceChildren();
+    }
+    showConfirmation(value) {
+        this.currentConfirmation = value;
+        this.setCompact(false, false);
+        this.openPanel();
+        this.confirmation.classList.add("visible");
+        this.confirmation.querySelector('[data-role="action"]').textContent =
+            value.action;
+        this.confirmation.querySelector('[data-role="target"]').textContent =
+            value.targetLabel;
+        this.confirmation.querySelector('[data-role="reason"]').textContent =
+            value.reason;
+        this.confirmation.querySelector('[data-role="effect"]').textContent =
+            value.expectedEffect;
+        this.setStatus(this.messages.actionRequest);
+        this.setAmbientActive(true);
+        this.syncHeaderActions();
+        this.confirmation.scrollIntoView({ block: "nearest" });
+        this.require('[data-role="approve"]').focus();
+    }
+    showActionState(status) {
+        this.confirmation.classList.remove("visible");
+        this.currentConfirmation = null;
+        const key = status === "running"
+            ? "actionRunning"
+            : status === "verified"
+                ? "actionVerified"
+                : "actionFailed";
+        this.setStatus(this.messages[key]);
+        if (status === "running") {
+            this.setAmbientActive(true);
+        }
+        else {
+            this.setAmbientActive(false);
+        }
+        this.syncHeaderActions();
+    }
+    dismissActionState() {
+        this.confirmation.classList.remove("visible");
+        this.currentConfirmation = null;
+        this.setStatus(this.messages.ready);
+        this.setAmbientActive(false);
+        this.syncHeaderActions();
+    }
+    showVisualRequest(value) {
+        this.currentVisualRequest = value;
+        this.setCompact(false, false);
+        this.openPanel();
+        this.visualRequest.classList.add("visible");
+        this.require('[data-role="visual-reason"]').textContent = value.reason;
+        this.setStatus(this.messages.visualRequest);
+        this.syncHeaderActions();
+        this.require('[data-role="visual-share"]').focus();
+    }
+    showVisualResult(shared) {
+        this.visualRequest.classList.remove("visible");
+        this.currentVisualRequest = null;
+        this.setStatus(shared ? this.messages.visualShared : this.messages.visualUnavailable);
+        this.syncHeaderActions();
+    }
+    setVisualAvailable(available, paused = false) {
+        const button = this.require('[data-role="visual-pause"]');
+        button.hidden = !available;
+        this.setVisualPaused(paused);
+    }
+    setVisualPaused(paused) {
+        this.visualPaused = paused;
+        const button = this.require('[data-role="visual-pause"]');
+        this.setControlLabel("visual-pause", paused ? this.messages.resumeVisual : this.messages.pauseVisual);
+        this.setControlIcon("visual-pause", paused ? Eye : EyeOff);
+        button.setAttribute("aria-pressed", String(paused));
+        if (paused && this.currentVisualRequest) {
+            const request = this.currentVisualRequest;
+            this.visualRequest.classList.remove("visible");
+            this.currentVisualRequest = null;
+            this.callbacks.onVisualContext(request, false);
+            this.syncHeaderActions();
+        }
+    }
+    setPaused(value) {
+        this.paused = value;
+        this.assistantState = value ? "paused" : "ready";
+        this.setControlLabel("pause", value ? this.messages.resumeActions : this.messages.pauseActions);
+        this.setControlIcon("pause", value ? Play : Pause);
+        this.require('[data-role="pause"]').setAttribute("aria-pressed", String(value));
+        this.setStatus(value ? this.messages.paused : this.messages.ready);
+        if (value)
+            this.setAmbientActive(false, true);
+    }
+    setMuted(value) {
+        this.muted = value;
+        this.setControlLabel("mute", value ? this.messages.unmute : this.messages.mute);
+        this.setControlIcon("mute", value ? MicOff : Mic);
+        this.require('[data-role="mute"]').setAttribute("aria-pressed", String(value));
+        this.require('[data-role="push"]').disabled = value;
+    }
+    configureVoiceControls(voiceActive, manualTurn, automaticTurnsAvailable) {
+        const wasVoiceActive = this.voiceActive;
+        this.voiceActive = voiceActive;
+        this.panel.classList.toggle("voice-session", voiceActive);
+        this.automaticTurnsAvailable = automaticTurnsAvailable;
+        for (const role of ["mute", "interrupt", "turn-mode", "push"]) {
+            this.require(`[data-role="${role}"]`).hidden =
+                !voiceActive;
+        }
+        this.require('[data-role="text-only"]').hidden =
+            !voiceActive;
+        this.setManualTurn(manualTurn);
+        if (!this.active)
+            return;
+        if (wasVoiceActive && !voiceActive) {
+            this.setCompact(false);
+            return;
+        }
+        this.initializePanelView();
+    }
+    setManualTurn(value) {
+        this.manualTurn = value;
+        const mode = this.require('[data-role="turn-mode"]');
+        mode.hidden = !this.voiceActive || value;
+        this.setControlLabel("turn-mode", value ? this.messages.useAutomaticTurns : this.messages.usePushToTalk);
+        this.setControlIcon("turn-mode", value ? AudioLines : Hand);
+        mode.setAttribute("aria-pressed", String(value));
+        const push = this.require('[data-role="push"]');
+        push.hidden = !this.voiceActive || !value;
+        const manualControls = this.require('[data-role="manual-turn-controls"]');
+        manualControls.hidden = !this.voiceActive || !value;
+        const automatic = this.require('[data-role="automatic-turns"]');
+        automatic.disabled = !this.automaticTurnsAvailable;
+        this.setControlLabel("automatic-turns", this.automaticTurnsAvailable
+            ? this.messages.useAutomaticTurns
+            : this.messages.automaticTurnsUnavailable);
+        this.setControlIcon("automatic-turns", AudioLines);
+        if (!value)
+            this.setPushActive(false);
+    }
+    setPushActive(value) {
+        this.pushActive = value;
+        const button = this.require('[data-role="push"]');
+        this.setControlLabel("push", value ? this.messages.sendVoiceTurn : this.messages.startSpeaking);
+        this.setControlIcon("push", value ? Send : Mic);
+        button.setAttribute("aria-pressed", String(value));
+        if (value) {
+            this.assistantState = "listening";
+            this.setStatus(this.messages.listening);
+        }
+    }
+    interruptPlayback() {
+        this.audio.pause();
+        this.setPushActive(false);
+        this.assistantState = "ready";
+        this.clearPendingCaptions("assistant");
+        this.setStatus(this.messages.ready);
+        this.setAmbientActive(false);
+    }
+    showError(message, retryable = false, sessionActive = this.active) {
+        this.active = sessionActive;
+        this.clearPendingCaptions();
+        this.setCompact(false, false);
+        this.openPanel();
+        this.intro.hidden = true;
+        this.conversation.classList.remove("visible");
+        this.controls.classList.remove("visible");
+        this.controls.classList.toggle("error", this.active);
+        this.setComposerEnabled(false);
+        const card = this.require('[data-role="notice"]');
+        card.classList.add("visible");
+        card.textContent = message || this.messages.error;
+        const retry = this.require('[data-role="retry"]');
+        retry.hidden = !retryable;
+        this.setStatus(this.messages.error);
+        this.assistantState = "error";
+        this.stopDuration(!sessionActive);
+        if (!sessionActive) {
+            this.duration.hidden = true;
+            this.duration.textContent = "00:00";
+        }
+        this.syncHeaderActions();
+        this.setAmbientActive(false, true);
+    }
+    showEnded(message) {
+        this.active = false;
+        this.assistantState = "ended";
+        this.paused = false;
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.clearPendingCaptions();
+        this.setCompact(false, false);
+        this.clearCompactCaptions();
+        this.clearPanelSessionState();
+        this.conversation.classList.remove("visible");
+        this.controls.classList.remove("visible");
+        this.controls.classList.remove("error");
+        this.confirmation.classList.remove("visible");
+        this.visualRequest.classList.remove("visible");
+        this.setComposerEnabled(false);
+        this.require('[data-role="notice"]').classList.remove("visible");
+        this.feedback.classList.add("visible");
+        this.showAttribution();
+        this.setStatus(message || this.messages.ended);
+        this.stopDuration(true);
+        this.syncHeaderActions();
+        this.clearAmbientHideTimer();
+        this.ambient?.remove();
+        this.ambient = null;
+        this.updateHighlight(null, "focus");
+    }
+    showLimit(message) {
+        this.setComposerEnabled(false);
+        this.setPaused(true);
+        this.assistantState = "paused";
+        this.setStatus(message || this.messages.limitReached);
+    }
+    showActiveElsewhere(active) {
+        this.activeElsewhere = active;
+        const card = this.require('[data-role="elsewhere"]');
+        card.classList.toggle("visible", active);
+        card.textContent = this.messages.activeElsewhere;
+        this.syncStartAvailability();
+    }
+    showLaunchUnavailable(message) {
+        this.launchUnavailable = true;
+        this.active = false;
+        this.assistantState = "unavailable";
+        this.setCompact(false, false);
+        this.clearCompactCaptions();
+        this.clearPanelSessionState();
+        this.resetPanelPosition();
+        this.intro.hidden = false;
+        this.conversation.classList.remove("visible");
+        this.controls.classList.remove("visible");
+        this.controls.classList.remove("error");
+        this.setComposerEnabled(false);
+        this.stopDuration(true);
+        this.duration.hidden = true;
+        this.duration.textContent = "00:00";
+        const card = this.require('[data-role="availability"]');
+        card.classList.add("visible");
+        card.textContent = message;
+        this.setStatus(message);
+        this.syncStartAvailability();
+        this.syncHeaderActions();
+    }
+    updateHighlight(element, status) {
+        this.highlightedElement = element;
+        this.highlight.className = `highlight ${status}`;
+        if (!element || !element.isConnected)
+            return;
+        const rect = element.getBoundingClientRect();
+        this.highlight.style.left = `${Math.max(0, rect.left - 4)}px`;
+        this.highlight.style.top = `${Math.max(0, rect.top - 4)}px`;
+        this.highlight.style.width = `${Math.max(8, rect.width + 8)}px`;
+        this.highlight.style.height = `${Math.max(8, rect.height + 8)}px`;
+        this.highlight.classList.add("visible");
+    }
+    safetySurfaceVisible() {
+        if (!this.panel.classList.contains("open") ||
+            document.visibilityState === "hidden") {
+            return false;
+        }
+        const surface = this.confirmation.classList.contains("visible")
+            ? this.confirmation
+            : this.visualRequest.classList.contains("visible")
+                ? this.visualRequest
+                : this.panel;
+        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 points = [
+            [rect.left + rect.width / 2, rect.top + Math.min(rect.height / 2, 24)],
+            [
+                rect.left + Math.min(rect.width - 2, 16),
+                rect.top + Math.min(rect.height - 2, 16),
+            ],
+        ];
+        const shadowFromPoint = this.shadow.elementFromPoint?.bind(this.shadow);
+        return points.some(([rawX, rawY]) => {
+            const x = Math.max(0, Math.min(window.innerWidth - 1, rawX));
+            const y = Math.max(0, Math.min(window.innerHeight - 1, rawY));
+            const documentTop = document.elementFromPoint(x, y);
+            if (documentTop !== this.host && !this.panel.contains(documentTop)) {
+                return false;
+            }
+            const shadowTop = shadowFromPoint?.(x, y) ?? null;
+            return !shadowTop || this.panel.contains(shadowTop);
+        });
+    }
+    destroy() {
+        window.removeEventListener("resize", this.onResize);
+        window.removeEventListener("scroll", this.refreshHighlight);
+        document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+        this.hideTooltip();
+        this.audio.pause();
+        this.audio.srcObject = null;
+        this.stopDuration(false);
+        this.clearCompactCaptions();
+        this.clearAmbientHideTimer();
+        this.hideAttribution();
+        this.host.remove();
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.highlightedElement = null;
+    }
+    build() {
+        const fragment = document.createDocumentFragment();
+        const launcher = document.createElement("button");
+        launcher.type = "button";
+        launcher.className = "launcher";
+        launcher.dataset.role = "launcher";
+        const highlight = document.createElement("div");
+        highlight.className = "highlight";
+        highlight.setAttribute("aria-hidden", "true");
+        const tooltip = document.createElement("div");
+        tooltip.className = "tooltip";
+        tooltip.setAttribute("role", "tooltip");
+        tooltip.setAttribute("aria-hidden", "true");
+        const panel = document.createElement("section");
+        panel.className = "panel";
+        panel.setAttribute("role", "dialog");
+        panel.setAttribute("aria-modal", "false");
+        panel.setAttribute("aria-label", this.messages.introTitle);
+        panel.innerHTML = `
+      <div class="compact-captions" data-role="compact-captions" aria-live="polite" aria-atomic="false"></div>
+      <header class="header">
+        <div class="identity" data-role="drag-handle"><strong data-role="brand"></strong><span data-role="status" aria-live="polite"></span></div>
+        <div class="header-actions">
+          <span class="duration" data-role="duration" aria-label="Session duration" hidden>00:00</span>
+          <button type="button" class="end icon-button" data-role="end" data-tooltip hidden><span class="button-icon" data-icon aria-hidden="true"></span></button>
+          <button type="button" class="view-toggle icon-button" data-role="view-toggle" data-tooltip aria-controls="oxvo-ai-live-assist-content" hidden><span class="button-icon" data-icon aria-hidden="true"></span></button>
+          <button type="button" class="restart icon-button" data-role="restart" data-tooltip hidden><span class="button-icon" data-icon aria-hidden="true"></span></button>
+          <button type="button" class="close icon-button" data-role="close" data-tooltip><span class="button-icon" data-icon aria-hidden="true"></span></button>
+        </div>
+      </header>
+      <div class="legal-overlay" data-role="legal-overlay" hidden>
+        <section class="legal-dialog" role="dialog" aria-modal="true" aria-labelledby="oxvo-ai-legal-title">
+          <div class="legal-header"><h3 id="oxvo-ai-legal-title" data-role="legal-title"></h3><button type="button" class="legal-close icon-button" data-role="legal-close" data-tooltip><span class="button-icon" data-icon aria-hidden="true"></span></button></div>
+          <p data-role="legal-disclosure"></p>
+          <div class="boundary" data-role="boundary"></div>
+          <ul data-role="legal-scopes"></ul>
+          <div class="legal-links"><a data-role="privacy" target="_blank" rel="noopener noreferrer"></a><a data-role="terms" target="_blank" rel="noopener noreferrer"></a></div>
+        </section>
+      </div>
+      <div class="body" id="oxvo-ai-live-assist-content">
+        <div class="intro">
+          <h2></h2>
+          <div class="consents" data-role="consent-controls">
+            <label class="consent"><input type="checkbox" data-role="consent-agreement" data-scope="ai_disclosure" checked><span data-role="consent-label"></span></label>
+            <button type="button" class="legal-trigger" data-role="legal-open"></button>
+          </div>
+          <div class="status-card" data-role="availability"></div>
+          <div class="status-card" data-role="elsewhere"></div>
+          <div class="mode-actions">
+            <button type="button" class="secondary" data-role="start-text"></button>
+            <button type="button" class="primary" data-role="start-voice"></button>
+          </div>
+        </div>
+        <div class="conversation">
+          <div class="captions" aria-live="polite"><div class="empty" data-role="empty"></div></div>
+        </div>
+        <div class="confirmation" role="alertdialog" aria-modal="true">
+          <h3></h3>
+          <p><strong data-role="action"></strong> · <span data-role="target"></span></p>
+          <p data-role="reason"></p><p data-role="effect"></p>
+          <div class="confirmation-actions"><button type="button" class="secondary" data-role="decline"></button><button type="button" class="primary" data-role="approve"></button></div>
+        </div>
+        <div class="visual-request" role="alertdialog" aria-modal="true">
+          <h3></h3>
+          <p data-role="visual-reason"></p>
+          <div class="confirmation-actions"><button type="button" class="secondary" data-role="visual-decline"></button><button type="button" class="primary" data-role="visual-share"></button></div>
+        </div>
+        <div class="status-card" data-role="notice"></div>
+        <button type="button" class="secondary" data-role="retry" hidden></button>
+        <div class="feedback">
+          <div class="attribution-bubble" data-role="attribution" role="status" hidden>Powered by <a href="https://oxvo.com/" target="_blank" rel="noopener noreferrer">OXVO.com</a></div>
+          <strong></strong>
+          <div class="feedback-options">
+            <button type="button" class="secondary" data-outcome="resolved"></button>
+            <button type="button" class="secondary" data-outcome="partially_resolved"></button>
+            <button type="button" class="secondary" data-outcome="not_resolved"></button>
+          </div>
+        </div>
+      </div>
+      <footer class="controls">
+        <div class="composer-shell">
+          <form class="composer" data-role="composer" aria-busy="true">
+            <details class="more-controls"><summary data-role="more" data-tooltip aria-haspopup="true" aria-expanded="false"><span class="button-icon" data-icon aria-hidden="true"></span></summary><div class="more-menu" aria-label="Session controls">
+              <button type="button" class="menu-control" data-role="mute"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="interrupt"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="turn-mode"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="pause"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="captions"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="text-only"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="visual-pause" hidden><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+              <button type="button" class="menu-control" data-role="human"><span class="menu-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+            </div></details>
+            <input data-role="text-input" maxlength="4000" autocomplete="off" disabled>
+            <button type="submit" class="send icon-button primary" data-role="send" data-tooltip disabled><span class="button-icon" data-icon aria-hidden="true"></span></button>
+          </form>
+          <div class="manual-turn-controls" data-role="manual-turn-controls" hidden>
+            <button type="button" class="turn-action primary" data-role="push" hidden><span class="turn-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+            <button type="button" class="turn-action secondary" data-role="automatic-turns"><span class="turn-icon" data-icon aria-hidden="true"></span><span class="control-label"></span></button>
+          </div>
+        </div>
+      </footer>
+      <audio autoplay></audio>
+    `;
+        fragment.append(launcher, highlight, panel, tooltip);
+        return fragment;
+    }
+    bind() {
+        this.launcher.addEventListener("click", () => this.openPanel());
+        this.require('[data-role="end"]').addEventListener("click", () => {
+            if (this.active)
+                this.callbacks.onEnd();
+        });
+        this.require('[data-role="restart"]').addEventListener("click", () => {
+            if (this.active || this.assistantState !== "ended")
+                return;
+            this.resetForNextSession();
+            const preferred = this.config.capabilities?.voice
+                ? '[data-role="start-voice"]'
+                : '[data-role="start-text"]';
+            this.require(preferred).focus();
+        });
+        this.require('[data-role="close"]').addEventListener("click", () => this.closePanel());
+        this.require('[data-role="view-toggle"]').addEventListener("click", () => {
+            if (!this.active || this.currentConfirmation || this.currentVisualRequest)
+                return;
+            this.setCompact(!this.compact);
+        });
+        this.require('[data-role="legal-open"]').addEventListener("click", () => this.openLegalDetails());
+        this.require('[data-role="legal-close"]').addEventListener("click", () => this.closeLegalDetails());
+        this.require('[data-role="legal-overlay"]').addEventListener("click", (event) => {
+            if (event.target === event.currentTarget)
+                this.closeLegalDetails();
+        });
+        this.require('[data-role="consent-agreement"]').addEventListener("change", () => this.syncStartAvailability());
+        const dragHandle = this.require('[data-role="drag-handle"]');
+        dragHandle.addEventListener("pointerdown", this.onDragStart);
+        dragHandle.addEventListener("pointermove", this.onDragMove);
+        dragHandle.addEventListener("pointerup", this.onDragEnd);
+        dragHandle.addEventListener("pointercancel", this.onDragEnd);
+        this.require('[data-role="start-text"]').addEventListener("click", () => this.start("text"));
+        this.require('[data-role="start-voice"]').addEventListener("click", () => this.start("voice"));
+        this.require('[data-role="mute"]').addEventListener("click", () => {
+            this.setMuted(!this.muted);
+            this.callbacks.onMute(this.muted);
+        });
+        this.require('[data-role="interrupt"]').addEventListener("click", () => {
+            this.interruptPlayback();
+            this.callbacks.onInterrupt();
+        });
+        this.require('[data-role="turn-mode"]').addEventListener("click", () => {
+            const manual = !this.manualTurn;
+            if (!manual && !this.automaticTurnsAvailable)
+                return;
+            this.callbacks.onVoiceTurnMode(manual);
+        });
+        this.require('[data-role="automatic-turns"]').addEventListener("click", () => {
+            if (!this.manualTurn || !this.automaticTurnsAvailable)
+                return;
+            this.callbacks.onVoiceTurnMode(false);
+        });
+        this.require('[data-role="push"]').addEventListener("click", () => {
+            if (!this.manualTurn)
+                return;
+            this.callbacks.onPushToTalk(!this.pushActive);
+        });
+        this.require('[data-role="pause"]').addEventListener("click", () => {
+            this.setPaused(!this.paused);
+            this.callbacks.onPause(this.paused);
+        });
+        this.require('[data-role="captions"]').addEventListener("click", () => {
+            this.captionsEnabled = !this.captionsEnabled;
+            this.setControlLabel("captions", this.captionsEnabled
+                ? this.messages.captionsOn
+                : this.messages.captionsOff);
+            this.setControlIcon("captions", this.captionsEnabled ? CaptionsOff : Captions);
+            this.require('[data-role="captions"]').setAttribute("aria-pressed", String(!this.captionsEnabled));
+            this.captions.hidden = !this.captionsEnabled;
+            this.compactCaptions.hidden = !this.captionsEnabled;
+            if (!this.captionsEnabled) {
+                this.clearPendingCaptions();
+                this.clearCompactCaptions();
+            }
+            this.callbacks.onCaptions(this.captionsEnabled);
+        });
+        this.require('[data-role="text-only"]').addEventListener("click", () => this.callbacks.onTextOnly());
+        this.require('[data-role="visual-pause"]').addEventListener("click", () => {
+            this.setVisualPaused(!this.visualPaused);
+            this.callbacks.onVisualPause(this.visualPaused);
+        });
+        this.require('[data-role="human"]').addEventListener("click", () => this.callbacks.onHuman());
+        const controlsMenu = this.require(".more-menu");
+        controlsMenu.addEventListener("click", (event) => {
+            if (!event.target.closest("button"))
+                return;
+            queueMicrotask(() => this.closeControlsMenu());
+        });
+        const moreControls = this.require(".more-controls");
+        const moreTrigger = this.require('[data-role="more"]');
+        moreTrigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            moreControls.open = !moreControls.open;
+            moreTrigger.setAttribute("aria-expanded", String(moreControls.open));
+            this.hideTooltip();
+        });
+        moreControls.addEventListener("toggle", () => {
+            this.require('[data-role="more"]').setAttribute("aria-expanded", String(moreControls.open));
+            this.hideTooltip();
+        });
+        this.require('[data-role="composer"]').addEventListener("submit", (event) => {
+            event.preventDefault();
+            const input = this.require('[data-role="text-input"]');
+            if (input.disabled)
+                return;
+            const value = input.value.trim();
+            if (!value)
+                return;
+            input.value = "";
+            this.addCaption("user", value, true);
+            this.callbacks.onText(value);
+        });
+        this.require('[data-role="approve"]').addEventListener("click", () => this.resolveConfirmation(true));
+        this.require('[data-role="decline"]').addEventListener("click", () => this.resolveConfirmation(false));
+        this.require('[data-role="visual-share"]').addEventListener("click", () => this.resolveVisualContext(true));
+        this.require('[data-role="visual-decline"]').addEventListener("click", () => this.resolveVisualContext(false));
+        this.require('[data-role="retry"]').addEventListener("click", () => this.callbacks.onRetry());
+        this.shadow
+            .querySelectorAll("[data-outcome]")
+            .forEach((button) => {
+            button.addEventListener("click", () => {
+                const outcome = button.dataset.outcome;
+                this.callbacks.onFeedback(outcome);
+                this.resetForNextSession();
+                this.closePanel();
+            });
+        });
+        this.host.addEventListener("keydown", (event) => {
+            if (event.key !== "Escape")
+                return;
+            if (this.closeControlsMenu(true)) {
+                event.preventDefault();
+                return;
+            }
+            if (!this.require('[data-role="legal-overlay"]').hidden) {
+                this.closeLegalDetails();
+                return;
+            }
+            if (this.active)
+                this.require('[data-role="end"]').focus();
+            else
+                this.closePanel();
+        });
+        this.shadow.addEventListener("mouseover", this.onTooltipMouseOver);
+        this.shadow.addEventListener("mouseout", this.onTooltipMouseOut);
+        this.shadow.addEventListener("focusin", this.onTooltipFocusIn);
+        this.shadow.addEventListener("focusout", this.onTooltipFocusOut);
+        document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+        window.addEventListener("resize", this.onResize, { passive: true });
+        window.addEventListener("scroll", this.refreshHighlight, { passive: true });
+    }
+    applyConfig() {
+        const appearance = this.config.appearance;
+        const accent = appearance?.accent && /^#[0-9a-f]{6}$/i.test(appearance.accent)
+            ? appearance.accent
+            : "#2563eb";
+        this.host.style.setProperty("--accent", accent);
+        this.host.style.setProperty("--panel-width", `${Math.min(560, Math.max(320, appearance?.panelWidth ?? 380))}px`);
+        this.host.dir = /^(ar|fa|he|ur)(-|$)/i.test(this.config.locale?.default ?? "")
+            ? "rtl"
+            : "ltr";
+        this.panel.dataset.anchor =
+            appearance?.position === "left" ? "left" : "right";
+        if (appearance?.position === "left") {
+            this.launcher.style.insetInlineStart = "20px";
+            this.launcher.style.insetInlineEnd = "auto";
+        }
+        this.launcher.textContent =
+            appearance?.launcherLabel || this.messages.launcher;
+        this.launcher.dataset.label = this.launcher.textContent;
+        this.require('[data-role="brand"]').textContent =
+            appearance?.brandName || this.messages.introTitle;
+        this.status.textContent = this.messages.ready;
+        this.require(".intro h2").textContent = this.messages.introTitle;
+        this.require('[data-role="consent-label"]').textContent =
+            this.messages.consentAgreement;
+        this.require('[data-role="legal-open"]').textContent =
+            this.messages.legalDetails;
+        this.require('[data-role="legal-title"]').textContent =
+            this.messages.legalTitle;
+        this.require('[data-role="legal-disclosure"]').textContent =
+            this.config.consent?.disclosure || this.messages.disclosure;
+        this.require('[data-role="boundary"]').textContent =
+            this.messages.safetyBoundary;
+        this.require('[data-role="privacy"]').textContent =
+            this.messages.privacyPolicy;
+        this.require('[data-role="terms"]').textContent =
+            this.messages.termsOfService;
+        this.require('[data-role="empty"]').textContent =
+            this.messages.emptyConversation;
+        const end = this.require('[data-role="end"]');
+        end.setAttribute("aria-label", this.messages.end);
+        this.setTooltip(end, this.messages.end);
+        this.setControlIcon("end", Square);
+        const restart = this.require('[data-role="restart"]');
+        restart.setAttribute("aria-label", this.messages.restart);
+        this.setTooltip(restart, this.messages.restart);
+        this.setControlIcon("restart", RotateCcw);
+        const legalClose = this.require('[data-role="legal-close"]');
+        legalClose.setAttribute("aria-label", this.messages.legalClose);
+        this.setTooltip(legalClose, this.messages.legalClose);
+        this.setControlIcon("legal-close", X);
+        const close = this.require('[data-role="close"]');
+        close.setAttribute("aria-label", this.messages.close);
+        this.setTooltip(close, this.messages.close);
+        this.setControlIcon("close", X);
+        const viewToggle = this.require('[data-role="view-toggle"]');
+        viewToggle.setAttribute("aria-label", this.messages.minimize);
+        this.setTooltip(viewToggle, this.messages.minimize);
+        this.setControlIcon("view-toggle", Minimize2);
+        this.require('[data-role="start-text"]').textContent =
+            this.messages.startText;
+        this.require('[data-role="start-voice"]').textContent =
+            this.messages.startVoice;
+        this.require('[data-role="start-text"]').hidden =
+            !this.config.capabilities?.text;
+        this.require('[data-role="start-voice"]').hidden =
+            !this.config.capabilities?.voice;
+        const send = this.require('[data-role="send"]');
+        send.setAttribute("aria-label", this.messages.send);
+        this.setTooltip(send, this.messages.send);
+        this.setControlIcon("send", Send);
+        this.require('[data-role="text-input"]').placeholder =
+            this.messages.messagePlaceholder;
+        this.setControlLabel("mute", this.messages.mute);
+        this.setControlIcon("mute", Mic);
+        this.setControlLabel("interrupt", this.messages.interrupt);
+        this.setControlIcon("interrupt", CircleStop);
+        this.setControlLabel("turn-mode", this.messages.usePushToTalk);
+        this.setControlIcon("turn-mode", Hand);
+        this.setControlLabel("push", this.messages.startSpeaking);
+        this.setControlIcon("push", Mic);
+        this.configureVoiceControls(false, false, false);
+        this.setControlLabel("pause", this.messages.pauseActions);
+        this.setControlIcon("pause", Pause);
+        this.setControlLabel("captions", this.messages.captionsOn);
+        this.setControlIcon("captions", CaptionsOff);
+        this.setControlLabel("text-only", this.messages.textOnly);
+        this.setControlIcon("text-only", MessageSquareText);
+        this.setControlLabel("visual-pause", this.messages.pauseVisual);
+        this.setControlIcon("visual-pause", EyeOff);
+        this.setControlLabel("human", this.messages.requestHuman);
+        this.setControlIcon("human", UserRound);
+        const more = this.require('[data-role="more"]');
+        more.setAttribute("aria-label", this.messages.moreControls);
+        this.setTooltip(more, this.messages.moreControls);
+        this.setControlIcon("more", Ellipsis);
+        this.require('[data-role="pause"]').hidden =
+            !this.config.capabilities?.browserControl;
+        this.require('[data-role="captions"]').hidden =
+            !this.config.capabilities?.captions;
+        this.require('[data-role="human"]').hidden =
+            !this.config.capabilities?.handoff;
+        this.require('[data-role="approve"]').textContent = this.messages.approve;
+        this.require('[data-role="decline"]').textContent = this.messages.decline;
+        this.require(".confirmation h3").textContent = this.messages.actionRequest;
+        this.require(".visual-request h3").textContent =
+            this.messages.visualRequest;
+        this.require('[data-role="visual-share"]').textContent =
+            this.messages.shareVisual;
+        this.require('[data-role="visual-decline"]').textContent =
+            this.messages.declineVisual;
+        this.require('[data-role="retry"]').textContent = this.messages.retry;
+        this.require(".feedback > strong").textContent =
+            this.messages.feedbackQuestion;
+        this.require('[data-outcome="resolved"]').textContent =
+            this.messages.resolved;
+        this.require('[data-outcome="partially_resolved"]').textContent =
+            this.messages.partiallyResolved;
+        this.require('[data-outcome="not_resolved"]').textContent =
+            this.messages.notResolved;
+        this.renderLegalScopes();
+        const privacy = this.require('[data-role="privacy"]');
+        if (this.config.consent?.policyUrl)
+            privacy.href = this.config.consent.policyUrl;
+        else
+            privacy.hidden = true;
+        const terms = this.require('[data-role="terms"]');
+        if (this.config.consent?.termsUrl)
+            terms.href = this.config.consent.termsUrl;
+        else
+            terms.hidden = true;
+        this.require('[data-role="legal-open"]').hidden =
+            privacy.hidden && terms.hidden && !this.config.consent?.disclosure;
+        if (this.hasActiveSessionMarker())
+            this.restorePanelPosition();
+        else
+            this.resetPanelPosition();
+        this.syncStartAvailability();
+        this.syncHeaderActions();
+    }
+    renderLegalScopes() {
+        const container = this.require('[data-role="legal-scopes"]');
+        container.replaceChildren();
+        const offered = new Set(this.config.consent?.optionalScopes ?? []);
+        const labels = {
+            microphone: "microphoneConsent",
+            page_context: "pageConsent",
+            browser_control: "controlConsent",
+            visual_context: "visualConsent",
+            handoff_context: "handoffConsent",
+            retained_transcript: "retentionConsent",
+        };
+        const order = [
+            "microphone",
+            "page_context",
+            "browser_control",
+            "visual_context",
+            "handoff_context",
+            "retained_transcript",
+        ];
+        for (const scope of order) {
+            const messageKey = labels[scope];
+            if (!offered.has(scope) || !messageKey)
+                continue;
+            const item = document.createElement("li");
+            item.textContent = this.messages[messageKey];
+            container.append(item);
+        }
+    }
+    start(mode) {
+        if (this.launchUnavailable || this.activeElsewhere)
+            return;
+        const agreement = this.require('[data-role="consent-agreement"]');
+        if (!agreement.checked) {
+            agreement.focus();
+            return;
+        }
+        const offered = new Set([
+            ...(this.config.consent?.requiredScopes ?? []),
+            ...(this.config.consent?.optionalScopes ?? []),
+        ]);
+        const scopes = ["ai_disclosure", "text"];
+        for (const scope of offered) {
+            if (scope !== "ai_disclosure" &&
+                scope !== "text" &&
+                (scope !== "microphone" || mode === "voice") &&
+                !scopes.includes(scope)) {
+                scopes.push(scope);
+            }
+        }
+        if (mode === "voice" && !scopes.includes("microphone"))
+            return;
+        if (scopes.includes("browser_control") &&
+            !scopes.includes("page_context")) {
+            scopes.splice(scopes.indexOf("browser_control"), 1);
+        }
+        this.callbacks.onStart(mode, scopes);
+    }
+    resolveConfirmation(approved) {
+        const value = this.currentConfirmation;
+        if (!value || Date.parse(value.expiresAt) <= Date.now()) {
+            this.showActionState("failed");
+            return;
+        }
+        this.confirmation.classList.remove("visible");
+        this.currentConfirmation = null;
+        this.syncHeaderActions();
+        this.callbacks.onConfirmation(value.actionId, value.proposalChecksum, approved);
+    }
+    setComposerEnabled(enabled) {
+        const composer = this.require('[data-role="composer"]');
+        const input = this.require('[data-role="text-input"]');
+        const send = this.require('[data-role="send"]');
+        input.disabled = !enabled;
+        send.disabled = !enabled;
+        composer.setAttribute("aria-busy", String(!enabled));
+    }
+    syncStartAvailability() {
+        const unavailable = this.launchUnavailable || this.activeElsewhere;
+        const agreement = this.require('[data-role="consent-agreement"]');
+        const disabled = unavailable || !agreement.checked;
+        this.require('[data-role="start-text"]').disabled =
+            disabled;
+        this.require('[data-role="start-voice"]').disabled =
+            disabled;
+        this.require('[data-role="consent-controls"]').hidden =
+            unavailable;
+        this.require(".mode-actions").hidden = unavailable;
+    }
+    resolveVisualContext(approved) {
+        const value = this.currentVisualRequest;
+        if (!value)
+            return;
+        this.visualRequest.classList.remove("visible");
+        this.currentVisualRequest = null;
+        this.syncHeaderActions();
+        this.callbacks.onVisualContext(value, approved);
+    }
+    openPanel() {
+        this.panel.classList.add("open");
+        this.launcher.hidden = true;
+        if (this.active)
+            this.writePanelVisibility("open");
+        this.syncHeaderActions();
+        requestAnimationFrame(() => this.clampPanelPosition());
+    }
+    closePanel() {
+        this.closeControlsMenu();
+        this.hideTooltip();
+        this.closeLegalDetails();
+        if (this.currentConfirmation)
+            this.resolveConfirmation(false);
+        if (this.currentVisualRequest)
+            this.resolveVisualContext(false);
+        this.panel.classList.remove("open");
+        this.launcher.hidden = false;
+        if (this.active)
+            this.writePanelVisibility("hidden");
+        else
+            this.removeStoredPanelVisibility();
+        this.syncLauncherState();
+        this.launcher.focus();
+    }
+    initializePanelView() {
+        if (!this.active || this.panelViewInitialized)
+            return;
+        const stored = this.readPanelView();
+        this.panelViewInitialized = true;
+        this.setCompact(stored ? stored === "compact" : this.voiceActive);
+    }
+    setCompact(value, persist = true) {
+        this.closeControlsMenu();
+        this.hideTooltip();
+        this.compact = this.active ? value : false;
+        this.panel.classList.toggle("compact", this.compact);
+        if (persist && this.active) {
+            this.panelViewInitialized = true;
+            try {
+                sessionStorage.setItem(PANEL_VIEW_KEY, this.compact ? "compact" : "expanded");
+            }
+            catch {
+                // The current view still works when session storage is unavailable.
+            }
+        }
+        this.syncHeaderActions();
+        requestAnimationFrame(() => this.clampPanelPosition());
+    }
+    readPanelView() {
+        try {
+            const stored = sessionStorage.getItem(PANEL_VIEW_KEY);
+            return stored === "compact" || stored === "expanded" ? stored : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    readPanelVisibility() {
+        try {
+            const stored = sessionStorage.getItem(PANEL_VISIBILITY_KEY);
+            return stored === "open" || stored === "hidden" ? stored : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    writePanelVisibility(value) {
+        try {
+            sessionStorage.setItem(PANEL_VISIBILITY_KEY, value);
+        }
+        catch {
+            // Panel visibility remains usable when session storage is unavailable.
+        }
+    }
+    removeStoredPanelVisibility() {
+        try {
+            sessionStorage.removeItem(PANEL_VISIBILITY_KEY);
+        }
+        catch {
+            // Ignore unavailable session storage.
+        }
+    }
+    clearPanelSessionState() {
+        this.panelViewInitialized = false;
+        try {
+            sessionStorage.removeItem(PANEL_VIEW_KEY);
+            sessionStorage.removeItem(PANEL_VISIBILITY_KEY);
+        }
+        catch {
+            // Ignore unavailable session storage.
+        }
+    }
+    syncLauncherState() {
+        const label = this.launcher.dataset.label || this.messages.launcher;
+        this.launcher.dataset.active = String(this.active);
+        this.launcher.dataset.assistantState = this.active
+            ? this.assistantState
+            : "idle";
+        const status = this.status.textContent?.trim();
+        this.launcher.setAttribute("aria-label", this.active
+            ? `${label}. ${this.messages.activeCall}${status ? `. ${status}` : ""}`
+            : label);
+    }
+    cancelPendingConfirmation() {
+        if (!this.resolvePendingConfirmation(false))
+            return false;
+        this.setStatus(this.messages.ready);
+        return true;
+    }
+    resolvePendingConfirmation(approved) {
+        if (!this.currentConfirmation)
+            return false;
+        this.resolveConfirmation(approved);
+        return true;
+    }
+    ensureAmbient() {
+        if (this.ambient || this.config.appearance?.glassEffect === false)
+            return;
+        this.ambient = document.createElement("div");
+        this.ambient.className = "ambient";
+        this.ambient.dataset.anchor =
+            this.config.appearance?.position === "left" ? "left" : "right";
+        this.ambient.setAttribute("aria-hidden", "true");
+        this.shadow.insertBefore(this.ambient, this.highlight);
+    }
+    setAmbientActive(active, immediate = false) {
+        this.clearAmbientHideTimer();
+        if (active) {
+            this.ensureAmbient();
+            this.ambient?.classList.add("active");
+            return;
+        }
+        if (!this.ambient)
+            return;
+        if (immediate) {
+            this.ambient.classList.remove("active");
+            return;
+        }
+        this.ambientHideTimer = setTimeout(() => {
+            this.ambientHideTimer = null;
+            this.ambient?.classList.remove("active");
+        }, AMBIENT_IDLE_GRACE_MS);
+    }
+    clearAmbientHideTimer() {
+        if (this.ambientHideTimer === null)
+            return;
+        clearTimeout(this.ambientHideTimer);
+        this.ambientHideTimer = null;
+    }
+    startDuration(resume) {
+        if (this.durationInterval !== null)
+            return;
+        let startedAt = Date.now();
+        if (resume) {
+            try {
+                const stored = Number(sessionStorage.getItem(SESSION_START_KEY));
+                if (Number.isFinite(stored) && stored > 0 && stored <= startedAt) {
+                    startedAt = stored;
+                }
+            }
+            catch {
+                // A timer still works when session storage is unavailable.
+            }
+        }
+        this.sessionStartedAt = startedAt;
+        this.duration.hidden = false;
+        try {
+            sessionStorage.setItem(SESSION_START_KEY, String(startedAt));
+        }
+        catch {
+            // A timer still works when session storage is unavailable.
+        }
+        this.renderDuration();
+        this.durationInterval = setInterval(() => this.renderDuration(), 500);
+    }
+    renderDuration() {
+        if (this.sessionStartedAt === null)
+            return;
+        const elapsedSeconds = Math.max(0, Math.floor((Date.now() - this.sessionStartedAt) / 1000));
+        const minutes = Math.floor(elapsedSeconds / 60);
+        const seconds = elapsedSeconds % 60;
+        this.duration.textContent = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+    }
+    stopDuration(clearStoredStart) {
+        if (this.durationInterval !== null) {
+            clearInterval(this.durationInterval);
+            this.durationInterval = null;
+        }
+        this.renderDuration();
+        this.sessionStartedAt = null;
+        if (!clearStoredStart)
+            return;
+        try {
+            sessionStorage.removeItem(SESSION_START_KEY);
+        }
+        catch {
+            // Ignore unavailable session storage.
+        }
+    }
+    resetForNextSession() {
+        this.active = false;
+        this.assistantState = "ready";
+        this.panel.classList.remove("voice-session");
+        this.voiceActive = false;
+        this.setCompact(false, false);
+        this.clearCompactCaptions();
+        this.clearPanelSessionState();
+        this.resetPanelPosition();
+        this.controls.classList.remove("error");
+        this.feedback.classList.remove("visible");
+        this.hideAttribution();
+        this.intro.hidden = false;
+        this.require('[data-role="notice"]').classList.remove("visible");
+        this.require('[data-role="retry"]').hidden = true;
+        this.duration.hidden = true;
+        this.duration.textContent = "00:00";
+        this.captions.replaceChildren();
+        const empty = document.createElement("div");
+        empty.className = "empty";
+        empty.dataset.role = "empty";
+        empty.textContent = this.messages.emptyConversation;
+        this.captions.append(empty);
+        this.setStatus(this.messages.ready);
+        this.syncStartAvailability();
+        this.syncHeaderActions();
+    }
+    showAttribution() {
+        this.hideAttribution();
+        if (this.config.appearance?.attribution?.enabled === false)
+            return;
+        this.attribution.hidden = false;
+        this.attributionTimer = setTimeout(() => {
+            this.attributionTimer = null;
+            this.attribution.hidden = true;
+        }, 7000);
+    }
+    hideAttribution() {
+        if (this.attributionTimer)
+            clearTimeout(this.attributionTimer);
+        this.attributionTimer = null;
+        this.attribution.hidden = true;
+    }
+    openLegalDetails() {
+        const overlay = this.require('[data-role="legal-overlay"]');
+        overlay.hidden = false;
+        this.require('[data-role="legal-close"]').focus();
+    }
+    closeLegalDetails() {
+        const overlay = this.require('[data-role="legal-overlay"]');
+        if (overlay.hidden)
+            return;
+        overlay.hidden = true;
+        this.require('[data-role="legal-open"]').focus();
+    }
+    setControlLabel(role, label) {
+        const button = this.require(`[data-role="${role}"]`);
+        const text = button.querySelector(".control-label");
+        if (text)
+            text.textContent = label;
+        else
+            button.textContent = label;
+        button.setAttribute("aria-label", label);
+        button.removeAttribute("title");
+        if (button.hasAttribute("data-tooltip"))
+            this.setTooltip(button, label);
+    }
+    setControlIcon(role, icon) {
+        const control = this.require(`[data-role="${role}"]`);
+        const slot = control.querySelector("[data-icon]");
+        if (!slot)
+            return;
+        slot.replaceChildren(createLucideElement(icon, {
+            class: "lucide",
+            width: 16,
+            height: 16,
+            "stroke-width": 1.8,
+            "aria-hidden": "true",
+            focusable: "false",
+        }));
+    }
+    setTooltip(target, label) {
+        target.dataset.tooltip = label;
+        target.removeAttribute("title");
+    }
+    showTooltip(target, immediate = false) {
+        const label = target.dataset.tooltip?.trim();
+        if (!label ||
+            target.hidden ||
+            target.getAttribute("aria-hidden") === "true" ||
+            this.tooltipSuppressed(target))
+            return;
+        this.hideTooltip();
+        const render = () => {
+            this.tooltipTimer = null;
+            if (!target.isConnected || this.tooltipSuppressed(target))
+                return;
+            this.tooltipTarget = target;
+            this.tooltip.textContent = label;
+            this.tooltip.style.left = "8px";
+            this.tooltip.style.top = "-1000px";
+            this.tooltip.classList.add("visible");
+            this.tooltip.setAttribute("aria-hidden", "false");
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = this.tooltip.getBoundingClientRect();
+            const gap = 8;
+            let top = targetRect.top - tooltipRect.height - gap;
+            let placement = "top";
+            if (top < 8) {
+                top = targetRect.bottom + gap;
+                placement = "bottom";
+            }
+            const left = Math.min(Math.max(8, targetRect.left + (targetRect.width - tooltipRect.width) / 2), Math.max(8, window.innerWidth - tooltipRect.width - 8));
+            this.tooltip.dataset.placement = placement;
+            this.tooltip.style.left = `${Math.round(left)}px`;
+            this.tooltip.style.top = `${Math.round(top)}px`;
+        };
+        if (immediate)
+            render();
+        else
+            this.tooltipTimer = setTimeout(render, 180);
+    }
+    tooltipSuppressed(target) {
+        return (this.shadow.querySelector(".more-controls[open]") !== null ||
+            (target.matches('[data-role="more"]') &&
+                target.closest(".more-controls")?.hasAttribute("open") === true));
+    }
+    hideTooltip() {
+        if (this.tooltipTimer !== null) {
+            clearTimeout(this.tooltipTimer);
+            this.tooltipTimer = null;
+        }
+        this.tooltipTarget = null;
+        this.tooltip?.classList.remove("visible");
+        this.tooltip?.setAttribute("aria-hidden", "true");
+    }
+    tooltipTrigger(event) {
+        const target = event.target;
+        return target instanceof Element
+            ? target.closest("[data-tooltip]")
+            : null;
+    }
+    closeControlsMenu(focusTrigger = false) {
+        const details = this.require(".more-controls");
+        if (!details.open)
+            return false;
+        details.open = false;
+        const trigger = this.require('[data-role="more"]');
+        trigger.setAttribute("aria-expanded", "false");
+        if (focusTrigger)
+            trigger.focus();
+        return true;
+    }
+    setPanelPosition(left, top) {
+        this.panel.style.insetInlineStart = "auto";
+        this.panel.style.insetInlineEnd = "auto";
+        this.panel.style.right = "auto";
+        this.panel.style.bottom = "auto";
+        this.panel.style.left = `${Math.round(left)}px`;
+        this.panel.style.top = `${Math.round(top)}px`;
+    }
+    savePanelPosition(left, top) {
+        try {
+            sessionStorage.setItem(PANEL_POSITION_KEY, JSON.stringify({ left: Math.round(left), top: Math.round(top) }));
+        }
+        catch {
+            // The panel remains draggable when storage is unavailable.
+        }
+    }
+    hasActiveSessionMarker() {
+        try {
+            const startedAt = Number(sessionStorage.getItem(SESSION_START_KEY));
+            return (Number.isFinite(startedAt) && startedAt > 0 && startedAt <= Date.now());
+        }
+        catch {
+            return false;
+        }
+    }
+    resetPanelPosition() {
+        for (const property of [
+            "inset-inline-start",
+            "inset-inline-end",
+            "left",
+            "right",
+            "top",
+            "bottom",
+        ]) {
+            this.panel.style.removeProperty(property);
+        }
+        try {
+            sessionStorage.removeItem(PANEL_POSITION_KEY);
+        }
+        catch {
+            // The default anchored position still applies without session storage.
+        }
+    }
+    restorePanelPosition() {
+        if (window.innerWidth <= 520)
+            return;
+        try {
+            const parsed = JSON.parse(sessionStorage.getItem(PANEL_POSITION_KEY) || "null");
+            if (parsed &&
+                typeof parsed.left === "number" &&
+                Number.isFinite(parsed.left) &&
+                typeof parsed.top === "number" &&
+                Number.isFinite(parsed.top)) {
+                this.setPanelPosition(parsed.left, parsed.top);
+            }
+        }
+        catch {
+            // Ignore malformed or unavailable session storage.
+        }
+    }
+    clampPanelPosition() {
+        if (window.innerWidth <= 520 || !this.panel.style.left)
+            return;
+        const rect = this.panel.getBoundingClientRect();
+        const left = Math.min(Math.max(8, window.innerWidth - rect.width - 8), Math.max(8, rect.left));
+        const top = Math.min(Math.max(8, window.innerHeight - rect.height - 8), Math.max(8, rect.top));
+        this.setPanelPosition(left, top);
+        this.savePanelPosition(left, top);
+    }
+    syncHeaderActions() {
+        this.require('[data-role="end"]').hidden = !this.active;
+        const viewToggle = this.require('[data-role="view-toggle"]');
+        viewToggle.hidden = !this.active;
+        viewToggle.disabled = Boolean(this.currentConfirmation || this.currentVisualRequest);
+        const viewLabel = this.compact
+            ? this.messages.maximize
+            : this.messages.minimize;
+        viewToggle.setAttribute("aria-label", viewLabel);
+        viewToggle.setAttribute("aria-expanded", String(!this.compact));
+        this.setTooltip(viewToggle, viewLabel);
+        this.setControlIcon("view-toggle", this.compact ? Maximize2 : Minimize2);
+        this.require('[data-role="restart"]').hidden =
+            this.active || this.assistantState !== "ended";
+        const close = this.require('[data-role="close"]');
+        close.setAttribute("aria-label", this.messages.close);
+        this.setTooltip(close, this.messages.close);
+        this.syncLauncherState();
+    }
+    require(selector) {
+        const element = this.shadow.querySelector(selector);
+        if (!element)
+            throw new Error(`Missing AI Live Assist UI element: ${selector}`);
+        return element;
+    }
+}