@convai/web-sdk 1.8.0-beta.8 → 1.8.0

package/dist/vanilla/ConvaiWidget.js

@@ -3,107 +3,11 @@
  * Ports the React ConvaiWidget to vanilla TypeScript with DOM manipulation
  */
 import { AudioRenderer } from "./AudioRenderer.js";
-import { aeroTheme, injectGlobalStyles, injectKeyframes, } from "./styles.js";
+import { aeroTheme, injectGlobalStyles } from "./styles.js";
 import { Icons } from "./icons.js";
 import { WidgetEventSubscriptions } from "./WidgetEventSubscriptions.js";
 import { ConvaiClient } from "../core/ConvaiClient.js";
-import { parseInlineMarkdown, compactUrl } from "../utils/inlineMarkdown.js";
 import { freshPublicationGrantOptions } from "../core/publishedChat.js";
-/**
- * Positioning declarations for the widget root, keyed by `placement`. The
- * `bottom-right` entry must stay byte-identical to the literals it replaces --
- * the inline-style parity suite snapshots the resolved `cssText` and compares
- * it to a committed fixture.
- */
-/** Gap between a fixed-placement widget and the viewport edge it anchors to. */
-const PLACEMENT_INSET_PX = 24;
-const PLACEMENT_CSS = {
-    "bottom-right": `position: fixed; bottom: ${PLACEMENT_INSET_PX}px; right: ${PLACEMENT_INSET_PX}px;`,
-    "bottom-left": `position: fixed; bottom: ${PLACEMENT_INSET_PX}px; left: ${PLACEMENT_INSET_PX}px;`,
-    "top-right": `position: fixed; top: ${PLACEMENT_INSET_PX}px; right: ${PLACEMENT_INSET_PX}px;`,
-    "top-left": `position: fixed; top: ${PLACEMENT_INSET_PX}px; left: ${PLACEMENT_INSET_PX}px;`,
-    inline: "position: relative;",
-};
-/** The open panel's preferred size. Capped by `PANEL_MAX_*` — see below. */
-const PANEL_W_PX = 400;
-const PANEL_H_PX = 600;
-/**
- * A ceiling on the open panel, so it can never be clipped by the viewport.
- *
- * The panel used to be a flat 400x600. The widget is `position: fixed`
- * anchored `PLACEMENT_INSET_PX` from one edge, so on any viewport narrower
- * than 448px — or shorter than 648px — the panel ran past the opposite edge
- * and was silently cut off, with no scrollbar to reveal it, because fixed
- * elements do not contribute to scrollable overflow. That is most phones: at
- * 393px (iPhone 15 Pro) 30px of the panel sat off-screen, at 360px 63px did,
- * and in landscape 233px of it — the entire header, including the close
- * button — sat above the viewport, leaving nothing on screen to dismiss it.
- *
- * Expressed as `max-width`/`max-height` rather than folding the cap into the
- * width with `min()`. Both compute the same thing, but they fail differently:
- * a parser that does not know `min()` drops the whole declaration and the
- * panel is left with no width at all, which is worse than the bug. An unknown
- * `max-width` drops only the ceiling and leaves the previous behaviour intact.
- * (Not hypothetical — happy-dom, which this package's own tests run in, parses
- * the `max-width` form and discards the `min()` one.)
- *
- * Dynamic viewport units so mobile browser chrome is accounted for as it shows
- * and hides, rather than sizing against a viewport the user cannot fully see.
- * Applied to the container permanently rather than per state: the collapsed
- * bubble is far below the ceiling, so it is unaffected.
- */
-const PANEL_MAX_W = `calc(100dvw - ${PLACEMENT_INSET_PX * 2}px)`;
-const PANEL_MAX_H = `calc(100dvh - ${PLACEMENT_INSET_PX * 2}px)`;
-/** `convai-error{code:'mic-permission'}` per the embed's error-handling contract. */
-const MIC_PERMISSION_ERROR_CODE = "mic-permission";
-/**
- * Distinguishes a microphone-permission denial from any other audio failure.
- *
- * Traced (not assumed): `client.audioControls.unmuteAudio()` delegates to
- * `AudioManager.enableAudio()`, which calls
- * `room.localParticipant.setMicrophoneEnabled(true)`. That's LiveKit's
- * `setTrackEnabled()`, which on failure does `throw e` unchanged, from a
- * `catch` around `createLocalTracks()`, which itself does `throw e` unchanged
- * around `navigator.mediaDevices.getUserMedia()`. `AudioManager.enableAudio()`
- * also just does `throw error` in its own catch. Nothing on that path wraps or
- * replaces the error, so a user's permission denial reaches here as the exact
- * `DOMException` `getUserMedia()` produced, with `.name === 'NotAllowedError'`
- * (`'PermissionDeniedError'` is the old pre-spec name some browsers used).
- */
-function isMicPermissionDenial(error) {
-    const name = error?.name;
-    return name === "NotAllowedError" || name === "PermissionDeniedError";
-}
-/**
- * Wraps a mic-permission denial so a consumer of the client's `error`
- * channel can tell it apart from a generic failure without knowing anything
- * about `DOMException` internals -- it only has to check `error.code`. The
- * original error is preserved on `.cause` for anyone who wants the detail.
- */
-function toMicPermissionError(cause) {
-    const err = new Error("Microphone access was denied. Continuing in text-only mode.");
-    err.name = "ConvaiMicPermissionError";
-    err.code = MIC_PERMISSION_ERROR_CODE;
-    err.cause = cause;
-    return err;
-}
-/**
- * Routes a failed `enableAudio()`/`unmuteAudio()` call onto the client's
- * *existing* `error` channel -- the same one `ConvaiClient` already uses --
- * instead of letting it become an unhandled rejection (the click-handler
- * site) or vanish into a bare `console.error` (the auto-voice-mode sites).
- * `console.error` is kept alongside for local debugging; this just adds the
- * event emission next to it. `client.emit` is called defensively since it
- * isn't part of the public `IConvaiClient` surface -- see the `emit?` field
- * on `VanillaWidgetOptions.convaiClient` in `./types.ts`.
- */
-function reportMicFailure(client, logLabel, error) {
-    console.error(logLabel, error);
-    const payload = isMicPermissionDenial(error)
-        ? toMicPermissionError(error)
-        : error;
-    client.emit?.("error", payload);
-}
 /**
  * Create a Convai chat widget in the specified container
  *
@@ -140,21 +44,6 @@ function reportMicFailure(client, logLabel, error) {
  * ```
  */
 export function createConvaiWidget(container, options) {
-    /**
-     * Where global styles and `@keyframes` are injected.
-     *
-     * An explicit `options.styleTarget` wins and is used verbatim. Otherwise we
-     * fall back to deriving it from the container's current root — which is what
-     * every existing caller relies on, but only works when the container is
-     * already attached to its final root. A caller that builds a detached
-     * subtree and appends it to a shadow root afterwards must pass
-     * `styleTarget` explicitly, or the styles land in `document.head` and the
-     * shadow tree renders unstyled with no error.
-     */
-    const styleTarget = options.styleTarget ??
-        (container.getRootNode() instanceof ShadowRoot
-            ? container.getRootNode()
-            : document);
     // Create client if not provided - guarantee it's defined
     const client = options.convaiClient ||
         (() => {
@@ -174,18 +63,8 @@ export function createConvaiWidget(container, options) {
             });
         })();
     const { showVideo = true, showScreenShare = true, defaultVoiceMode = true, requestPublicationGrant, publishedChatConnectOptions, publishedChatDescriptor, onConnect, onDisconnect, onMessage, } = options;
-    // Unknown/typo'd values fall back to the default rather than throwing --
-    // a bad `placement` attribute on a customer's page must not blank the
-    // widget.
-    const placement = options.placement && options.placement in PLACEMENT_CSS
-        ? options.placement
-        : "bottom-right";
     // Inject global styles
-    injectGlobalStyles(styleTarget);
-    // Keyframes were injected lazily by the connecting overlay and the settings
-    // tray, but a link-preview skeleton can render before either exists — a
-    // replayed transcript paints message bubbles immediately. Idempotent.
-    injectKeyframes(styleTarget);
+    injectGlobalStyles();
     // State
     let isOpen = false;
     let isSettingsOpen = false;
@@ -201,22 +80,8 @@ export function createConvaiWidget(container, options) {
     let hasEnteredDefaultVoiceMode = false;
     /** True after we have connected at least once; used to call reconnect() instead of connect() when opening after disconnect */
     let hasConnectedBefore = false;
-    /**
-     * True from the moment an open is requested on a *disconnected* client
-     * until that open either completes or is cancelled.
-     *
-     * `isOpen` alone cannot express this: the first open awaits a real
-     * `connect()` (0.5-3s in production) and only flips `isOpen` afterwards, so
-     * for that whole window the widget is neither open nor idle. Without this
-     * flag `close()` sees `isOpen === false` and no-ops -- and the connect then
-     * pops the panel open behind the user -- while `toggle()` sees the same
-     * `false`, starts a *second* open, and lands on the already-connecting
-     * branch that opens immediately. Every entry point below treats
-     * `pendingOpen` as "open" for the purpose of deciding what a close/toggle
-     * means, and `handleToggle` re-checks it before committing `setIsOpen(true)`
-     * so a cancellation during the await is honoured.
-     */
-    let pendingOpen = false;
+    /** Prevent repeated open clicks from minting multiple one-time publication grants. */
+    let isStartingConnection = false;
     /** Prevent an in-flight publication grant request from connecting after teardown. */
     let isDestroyed = false;
     const eventSubscriptions = new WidgetEventSubscriptions(() => isDestroyed);
@@ -233,13 +98,6 @@ export function createConvaiWidget(container, options) {
     let settingsTray;
     let floatingVideo;
     let voiceModeOverlay;
-    let connectingOverlay;
-    /**
-     * Elements captured at creation. IDs are scoped per DOM tree, so
-     * document.getElementById() returns null when the widget is mounted
-     * inside a shadow root. Every element here is created in this file.
-     */
-    const refs = {};
     // Audio Analysis State
     let audioContext = null;
     let analyzer = null;
@@ -250,31 +108,15 @@ export function createConvaiWidget(container, options) {
     const fetchCharacterInfo = async () => {
         if (publishedChatDescriptor)
             return;
-        // Prefer authToken over apiKey, matching the precedence ConvaiClient
-        // uses when building /connect headers -- a client carrying both must
-        // behave identically in both places.
-        //
-        // The two credentials travel in *different* headers: api.convai.com reads
-        // an auth token from API-AUTH-TOKEN and an API key from X-API-Key, and
-        // answers an API key sent as API-AUTH-TOKEN with `400 Your session has
-        // expired.` Because the failure is swallowed below, sending the wrong one
-        // showed up only as a header stuck on the fallback name.
-        const credential = client.authToken ?? client.apiKey;
-        if (!credential || !client.characterId)
+        if (!client.apiKey || !client.characterId)
             return;
-        const headers = {
-            "Content-Type": "application/json",
-        };
-        if (client.authToken) {
-            headers["API-AUTH-TOKEN"] = client.authToken;
-        }
-        else {
-            headers["X-API-Key"] = credential;
-        }
         try {
             const response = await fetch("https://api.convai.com/character/get", {
                 method: "POST",
-                headers,
+                headers: {
+                    "Content-Type": "application/json",
+                    "API-AUTH-TOKEN": client.apiKey,
+                },
                 body: JSON.stringify({ charID: client.characterId }),
             });
             if (response.ok) {
@@ -298,34 +140,23 @@ export function createConvaiWidget(container, options) {
         rootElement = document.createElement("div");
         rootElement.className = "convai-widget";
         rootElement.style.cssText = `
-      ${PLACEMENT_CSS[placement]}
-      z-index: var(--convai-z-index, ${aeroTheme.zIndex.modal});
-      font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.primary});
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      z-index: ${aeroTheme.zIndex.modal};
+      font-family: ${aeroTheme.typography.fontFamily.primary};
     `;
         // Morphing container
         morphingContainer = document.createElement("div");
-        // `part="launcher"` is precise only while collapsed: this same element
-        // morphs into the open panel (400x600, capped to the viewport — see PANEL_MAX_W)
-        // and carries that panel's background,
-        // radius and shadow. See the `part="panel"` call site below for the full
-        // semantics a host needs to know.
-        morphingContainer.setAttribute("part", "launcher");
-        // NOTE on border-radius: deliberately NOT themable. `--convai-radius`
-        // drives the open panel only. One token cannot serve both geometries --
-        // `--convai-radius: 8px` would squircle the circular launcher, and `50%`
-        // would turn the panel into an ellipse. A dedicated
-        // `--convai-launcher-radius` can be added additively later if wanted.
         morphingContainer.style.cssText = `
       position: relative;
-      width: var(--convai-launcher-size, 64px);
-      height: var(--convai-launcher-size, 64px);
-      max-width: ${PANEL_MAX_W};
-      max-height: ${PANEL_MAX_H};
-      background: var(--convai-panel-bg, ${aeroTheme.colors.glass.backdrop});
+      width: 4rem;
+      height: 4rem;
+      background: ${aeroTheme.colors.glass.backdrop};
       backdrop-filter: ${aeroTheme.glass.backdrop};
       border: ${aeroTheme.glass.border};
       border-radius: 50%;
-      box-shadow: var(--convai-shadow, ${aeroTheme.shadows.glass});
+      box-shadow: ${aeroTheme.shadows.glass};
       transition: all 0.3s ease-in-out;
       overflow: hidden;
       display: flex;
@@ -346,39 +177,10 @@ export function createConvaiWidget(container, options) {
       transform: scale(1);
     `;
         const convaiLogo = Icons.ConvaiLogo("xl", "idle");
-        convaiLogo.style.color = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
+        convaiLogo.style.color = aeroTheme.colors.convai.light;
         buttonContent.appendChild(convaiLogo);
         // Chat content
         chatContent = document.createElement("div");
-        // ----------------------------------------------------------------------
-        // `launcher` / `panel` part semantics. Read before writing theming docs.
-        //
-        // This widget morphs rather than swapping trees: `morphingContainer` IS
-        // the 64px circle AND the open panel, animating between them (see
-        // setIsOpen). It therefore owns every painted surface property of both
-        // states -- background, border, border-radius, box-shadow. `buttonContent`
-        // and `chatContent` are transparent `inset: 0` overlays that only
-        // cross-fade their contents.
-        //
-        // So, precisely:
-        //   ::part(launcher)  -> morphingContainer. Paints the collapsed circle
-        //                        AND the open panel; there is no rule that hits
-        //                        only one. This is the surface part.
-        //   ::part(panel)     -> chatContent. The open state's *content layer*:
-        //                        useful for padding, colour, font, opacity. It has
-        //                        no background, no border and no radius of its
-        //                        own, so `::part(panel){border-radius}` does
-        //                        nothing -- set radius via ::part(launcher) or
-        //                        `--convai-radius` (which is panel-scoped).
-        //
-        // Assessed and deliberately not "fixed": moving `launcher` onto
-        // buttonContent would make `::part(launcher){background}` state-specific
-        // but would silently break `border-radius` and `box-shadow` on it, since
-        // buttonContent is clipped by the container's own radius + overflow:
-        // hidden. Correcting this properly needs a separate launcher element
-        // instead of a morph -- a rendering change, out of scope here.
-        // ----------------------------------------------------------------------
-        chatContent.setAttribute("part", "panel");
         chatContent.style.cssText = `
       position: absolute;
       inset: 0;
@@ -399,19 +201,11 @@ export function createConvaiWidget(container, options) {
         contentElement.style.cssText = `
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: 1rem;
       background: transparent;
-      position: relative;
     `;
         messageListElement = createMessageList();
         contentElement.appendChild(messageListElement);
-        // Connecting overlay -- shown until the bot is ready. Appended last, not
-        // to match DOM order (position: absolute + z-index: 100, set inside
-        // createConnectingOverlay, is what keeps it on top regardless of source
-        // order) but so inserting it doesn't shift every existing sibling's
-        // index-based path in the inline-style-parity fixture.
-        connectingOverlay = createConnectingOverlay();
-        contentElement.appendChild(connectingOverlay);
         // Footer
         footerElement = createFooter();
         chatContent.appendChild(headerElement);
@@ -428,31 +222,9 @@ export function createConvaiWidget(container, options) {
         container.appendChild(floatingVideo);
         container.appendChild(rootElement);
         // Event listeners
-        morphingContainer.addEventListener("click", handleLauncherClick);
+        morphingContainer.addEventListener("click", handleToggle);
     };
     // Create Voice Mode Overlay
-    /**
-     * Voice mode, matched to the React overlay (VoiceModeOverlay.tsx) rather
-     * than to what this file used to draw.
-     *
-     * The two had diverged badly: React centres the character's avatar inside
-     * two counter-rotating liquid-gradient layers and paints the user's
-     * microphone as three overlapping sine waves on a canvas, while this file
-     * drew forty grey vertical bars and no avatar at all. Same product, two
-     * unrelated screens.
-     *
-     * What is reproduced here, value for value: the 120px avatar with its 3px
-     * rgba(255,255,255,0.2) ring and letter fallback, the 126px conic and
-     * radial gradient layers (20s clockwise / 15s anticlockwise, blurred 8px
-     * and 6px), the 250x80 canvas carrying three waves, and the status text at
-     * 16px/600 over 13px with React's wording.
-     *
-     * The one deliberate omission is the `AudioVisualizer` ring that React
-     * fades in behind the avatar while the character speaks: it is a 364-line
-     * component wired directly to a LiveKit `Room`, and porting it is its own
-     * change. The avatar still breathes while the character speaks, so the
-     * speaking state reads without it.
-     */
     const createVoiceModeOverlay = () => {
         const overlay = document.createElement("div");
         overlay.style.cssText = `
@@ -461,383 +233,171 @@ export function createConvaiWidget(container, options) {
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
-      padding: 16px;
+      padding: 1rem;
       z-index: 10;
       pointer-events: auto;
       display: none;
       flex-direction: column;
       align-items: center;
-      gap: 32px;
-    `;
-        // --- Avatar, with the two rotating gradient layers behind it ----------
-        const avatarWrap = document.createElement("div");
-        avatarWrap.style.cssText = `
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      isolation: isolate;
-    `;
-        const avatarStack = document.createElement("div");
-        avatarStack.className = "convai-voice-avatar";
-        refs.voiceModeAvatar = avatarStack;
-        avatarStack.style.cssText = `
-      position: relative;
-      z-index: 10;
-      border-radius: 50%;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-      background: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-        const accent = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
-        const layer1 = document.createElement("div");
-        layer1.className = "convai-voice-gradient";
-        layer1.style.cssText = `
-      position: absolute;
-      width: 126px;
-      height: 126px;
-      border-radius: 50%;
-      background: conic-gradient(
-        from 0deg,
-        ${aeroTheme.colors.convai.light}00 0%,
-        ${aeroTheme.colors.convai.light}40 25%,
-        ${aeroTheme.colors.convai.dark}60 50%,
-        ${aeroTheme.colors.convai.light}40 75%,
-        ${aeroTheme.colors.convai.light}00 100%
-      );
-      opacity: 0.8;
-      filter: blur(8px);
-      z-index: -2;
-      animation: convaiVoiceSpin 20s linear infinite;
-    `;
-        const layer2 = document.createElement("div");
-        layer2.className = "convai-voice-gradient";
-        layer2.style.cssText = `
-      position: absolute;
-      width: 126px;
-      height: 126px;
-      border-radius: 50%;
-      background:
-        radial-gradient(ellipse 80% 100% at 30% 40%,
-          ${aeroTheme.colors.convai.light}50,
-          ${aeroTheme.colors.convai.light}30 40%,
-          transparent 70%),
-        radial-gradient(ellipse 80% 100% at 70% 60%,
-          ${aeroTheme.colors.convai.dark}50,
-          ${aeroTheme.colors.convai.dark}30 40%,
-          transparent 70%);
-      opacity: 0.9;
-      filter: blur(6px);
-      z-index: -1;
-      animation: convaiVoiceSpinReverse 15s linear infinite;
+      gap: 1.5rem;
     `;
-        // The image is clipped by its own container so the gradients above stay
-        // visible outside it — React nests it the same way for the same reason.
-        const avatarClip = document.createElement("div");
-        avatarClip.style.cssText = `
-      position: relative;
-      border-radius: 50%;
-      overflow: hidden;
-      border: 3px solid rgba(255, 255, 255, 0.2);
-      width: 120px;
-      height: 120px;
+        // Bars Container
+        const barsContainer = document.createElement("div");
+        barsContainer.id = "voice-bars-container";
+        barsContainer.style.cssText = `
       display: flex;
       align-items: center;
       justify-content: center;
+      gap: 2px;
+      height: 80px;
+      max-width: 300px;
     `;
-        refs.voiceModeAvatarClip = avatarClip;
-        avatarStack.append(layer1, layer2, avatarClip);
-        avatarWrap.appendChild(avatarStack);
-        overlay.appendChild(avatarWrap);
-        // --- The user's microphone, as three waves on a canvas ----------------
-        const canvas = document.createElement("canvas");
-        canvas.className = "convai-voice-wave";
-        canvas.style.cssText = `width: 250px; height: 80px;`;
-        refs.voiceModeCanvas = canvas;
-        overlay.appendChild(canvas);
-        // --- Status text ------------------------------------------------------
+        // Create 40 bars
+        for (let i = 0; i < 40; i++) {
+            const bar = document.createElement("div");
+            bar.className = "voice-bar";
+            bar.style.cssText = `
+        width: 3px;
+        height: 15px;
+        background-color: ${aeroTheme.colors.neutral[400]};
+        border-radius: 1.5px;
+        transition: height 0.08s ease-out, background-color 0.2s;
+        transform-origin: center;
+      `;
+            barsContainer.appendChild(bar);
+        }
+        overlay.appendChild(barsContainer);
+        // Status Text
         const statusContainer = document.createElement("div");
         const statusTitle = document.createElement("div");
         statusTitle.id = "voice-mode-title";
-        refs.voiceModeTitle = statusTitle;
         statusTitle.style.cssText = `
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
-      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      color: ${aeroTheme.colors.text.primary};
+      margin-bottom: 0.5rem;
     `;
-        statusTitle.textContent = "Voice Mode";
+        statusTitle.textContent = "Voice Only Mode";
         const statusSubtitle = document.createElement("div");
         statusSubtitle.id = "voice-mode-subtitle";
-        refs.voiceModeSubtitle = statusSubtitle;
         statusSubtitle.style.cssText = `
-      font-size: 13px;
+      font-size: 12px;
       color: ${aeroTheme.colors.text.secondary};
     `;
-        statusSubtitle.textContent = "Tap microphone to talk";
-        statusContainer.append(statusTitle, statusSubtitle);
+        statusSubtitle.textContent = "Press and hold the microphone to talk";
+        statusContainer.appendChild(statusTitle);
+        statusContainer.appendChild(statusSubtitle);
         overlay.appendChild(statusContainer);
-        void accent;
         return overlay;
     };
-    /**
-     * Fills the voice-mode avatar from the character info fetch, or falls back
-     * to the character's initial the way React does. Called from
-     * updateHeader(), so it tracks a late `fetchCharacterInfo()` rather than
-     * being fixed at construction.
-     */
-    const updateVoiceModeAvatar = () => {
-        const clip = refs.voiceModeAvatarClip;
-        if (!clip)
-            return;
-        const wanted = characterImage || `letter:${characterName}`;
-        if (clip.dataset.filledWith === wanted)
-            return;
-        clip.dataset.filledWith = wanted;
-        clip.replaceChildren();
-        if (characterImage) {
-            const img = document.createElement("img");
-            img.src = characterImage;
-            img.alt = characterName;
-            img.style.cssText = `width: 120px; height: 120px; object-fit: cover; display: block;`;
-            clip.appendChild(img);
-            return;
-        }
-        const letter = document.createElement("div");
-        letter.style.cssText = `
-      width: 120px;
-      height: 120px;
-      background-color: ${aeroTheme.colors.convai.light}20;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 48px;
-      font-weight: 600;
-      color: var(--convai-accent, ${aeroTheme.colors.convai.light});
-    `;
-        letter.textContent = characterName[0]?.toUpperCase() || "C";
-        clip.appendChild(letter);
-    };
-    // Create Connecting Overlay -- matches React's inline AnimatePresence
-    // block exactly (ConvaiWidget.tsx:681-737): shown whenever
-    // `isConnected && !isBotReady`, covering just the content area (not the
-    // header/footer) so the chrome stays interactive while the character
-    // joins. Persistent in the DOM like voiceModeOverlay above -- toggled via
-    // opacity/pointer-events rather than mounted/unmounted, since this file has
-    // no AnimatePresence-style exit-animation machinery. Visibility is driven
-    // by updateConnectingOverlay().
-    const createConnectingOverlay = () => {
-        const overlay = document.createElement("div");
-        overlay.id = "convai-connecting-overlay";
-        overlay.style.cssText = `
-      position: absolute;
-      inset: 0;
-      z-index: 100;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      background: rgba(255, 255, 255, 0.95);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s;
-    `;
-        // Keyframes live in the shadow-safe injector (styles.ts), not
-        // document.head -- @keyframes defined there do not resolve for shadow
-        // content. Idempotent; also called from createSettingsTray().
-        injectKeyframes(styleTarget);
-        // Spinning logo: a full turn every 2s, linear, infinite.
-        const spinWrapper = document.createElement("div");
-        spinWrapper.className = "convai-connecting-spin";
-        spinWrapper.style.cssText = `
-      display: inline-flex;
-      animation: convaiConnectingSpin 2s linear infinite;
-    `;
-        const logo = Icons.ConvaiLogo("xl", "connecting");
-        // Themable, like every other accent usage in this file (see
-        // theming.test.ts) -- var() with the exact literal React passes
-        // (`aeroTheme.colors.convai.light`) as the fallback, so an unset
-        // --convai-accent renders identically to the React value.
-        logo.style.color = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
-        spinWrapper.appendChild(logo);
-        overlay.appendChild(spinWrapper);
-        // Pulsing "Connecting to {characterName}..." label.
-        const label = document.createElement("div");
-        label.id = "convai-connecting-text";
-        label.className = "convai-connecting-pulse";
-        label.style.cssText = `
-      font-size: 14px;
-      font-weight: 500;
-      color: ${aeroTheme.colors.text.secondary};
-      animation: convaiConnectingPulse 2s ease-in-out infinite;
-    `;
-        refs.connectingLabel = label;
-        overlay.appendChild(label);
-        return overlay;
-    };
-    /** Shows/hides the connecting overlay and refreshes its label. Called
-     * from updateHeader() so every existing call site (stateChange, botReady,
-     * connect/disconnect via stateChange, character-info fetch, ...) stays in
-     * sync automatically. */
-    const updateConnectingOverlay = () => {
-        if (!connectingOverlay)
-            return;
-        const label = refs.connectingLabel;
-        if (label) {
-            label.textContent = `Connecting to ${characterName}...`;
-        }
-        // `isConnecting` matters as much as `isConnected` here. The panel opens
-        // on the click that *starts* the connect, so between that click and the
-        // transport coming up (a real network round trip — ~3s against the live
-        // service) `isConnected` is still false. Gating on it alone left the
-        // whole of that window with no overlay at all: an empty message area and
-        // a nameless header, i.e. the widget looked broken for exactly as long as
-        // it was doing the one thing the user asked for. Then the label appeared
-        // *after* the transport was already up, which reads backwards.
-        //
-        // The embed makes this the normal path rather than an edge case: its
-        // launcher click opens the panel immediately by design, so the pre-connect
-        // window is always visible to the user.
-        const shouldShow = (client.state.isConnected || client.state.isConnecting) && !client.isBotReady;
-        connectingOverlay.style.opacity = shouldShow ? "1" : "0";
-        connectingOverlay.style.pointerEvents = shouldShow ? "auto" : "none";
-    };
     // Audio Analysis State for Voice Mode
     let audioLevels = Array(40).fill(0);
+    let targetLevels = Array(40).fill(0.05);
+    let currentLevels = Array(40).fill(0.05);
     let startTime = 0;
-    /**
-     * Paints the three overlapping sine waves React draws for the user's
-     * microphone (VoiceModeOverlay.tsx's `drawWaves`), including its two
-     * performance guards, which matter more here than there: this canvas sits
-     * over whatever the host page is rendering, and every repaint forces the
-     * compositor to re-blend the whole panel. So it runs at 30fps rather than
-     * 60, and stops entirely while the input is silent — the static line is
-     * already on the canvas at that point.
-     */
-    let waveFrameParity = 0;
-    let waveWasSilent = false;
-    const drawWaves = () => {
-        const canvas = refs.voiceModeCanvas;
-        if (!canvas)
-            return;
-        waveFrameParity ^= 1;
-        if (waveFrameParity)
-            return;
-        let sum = 0;
-        for (let i = 0; i < audioLevels.length; i++)
-            sum += audioLevels[i];
-        const silent = sum / audioLevels.length < 0.012;
-        if (silent && waveWasSilent)
-            return;
-        waveWasSilent = silent;
-        const dpr = Math.min(window.devicePixelRatio || 1, 2);
-        if (canvas.width !== 250 * dpr) {
-            canvas.width = 250 * dpr;
-            canvas.height = 80 * dpr;
-        }
-        const ctx = canvas.getContext("2d");
-        if (!ctx)
-            return;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, 250, 80);
-        const centerY = 40;
-        const waveWidth = 250;
-        const segments = 40;
-        const avgLevel = sum / audioLevels.length;
-        const waveColors = [
-            aeroTheme.colors.convai.light,
-            aeroTheme.colors.convai.light,
-            "#34d399",
-        ];
-        ctx.lineCap = "round";
-        ctx.lineJoin = "round";
-        for (let waveIndex = 2; waveIndex >= 0; waveIndex--) {
-            ctx.beginPath();
-            for (let i = 0; i <= segments; i++) {
-                const x = (i / segments) * waveWidth;
-                const levelIndex = Math.floor((i / segments) * (audioLevels.length - 1));
-                const level = audioLevels[levelIndex] || 0;
-                const phase = (Date.now() / 500 + i * 0.2 + waveIndex * 1.5) % (Math.PI * 2);
-                const baseAmplitude = avgLevel > 0.05 ? 2 + waveIndex * 1.5 : 0;
-                const amplitude = baseAmplitude + level * (25 - baseAmplitude);
-                const y = centerY + Math.sin(phase) * amplitude;
-                if (i === 0)
-                    ctx.moveTo(x, y);
-                else
-                    ctx.lineTo(x, y);
-            }
-            ctx.strokeStyle = waveColors[waveIndex];
-            ctx.globalAlpha = 0.18 * (0.3 + avgLevel);
-            ctx.lineWidth = 2.5 - waveIndex * 0.4 + 8 * avgLevel + 3;
-            ctx.stroke();
-            ctx.globalAlpha = 0.95 - waveIndex * 0.15;
-            ctx.lineWidth = 2.5 - waveIndex * 0.4;
-            ctx.stroke();
-        }
-        ctx.globalAlpha = 1;
-    };
-    /**
-     * The voice-mode frame loop. Keeps the name `updateAudioBars` because
-     * every call site refers to it; what it drives is now the avatar, the
-     * canvas and the status text rather than forty bars.
-     */
+    // Audio Analysis Logic
     const updateAudioBars = () => {
         if (!voiceModeOverlay)
             return;
+        const bars = voiceModeOverlay.querySelectorAll(".voice-bar");
         const isTalking = client.state.isSpeaking;
-        const isListening = client.state.isListening;
-        const micOpen = !client.audioControls.isAudioMuted;
-        // The avatar breathes while the character speaks — React drives the same
-        // thing with a framer-motion scale keyframe.
-        const avatar = refs.voiceModeAvatar;
-        if (avatar) {
-            const wanted = isTalking ? "convaiVoiceBreathe 3s ease-in-out infinite" : "";
-            if (avatar.style.animation !== wanted)
-                avatar.style.animation = wanted;
-        }
-        // React's exact wording, including "Voice Mode" rather than the
-        // "Voice Only Mode" this file used to show.
-        const title = refs.voiceModeTitle;
-        const subtitle = refs.voiceModeSubtitle;
+        const isListening = client.state.isListening; // User is speaking (from user-started-speaking)
+        const isAnimating = isListening || isTalking;
+        // Update colors based on state
+        bars.forEach((bar) => {
+            bar.style.backgroundColor = isTalking
+                ? aeroTheme.colors.convai.light
+                : isListening
+                    ? aeroTheme.colors.text.primary
+                    : aeroTheme.colors.neutral[400];
+        });
+        // Update Text
+        const title = document.getElementById("voice-mode-title");
+        const subtitle = document.getElementById("voice-mode-subtitle");
         if (title) {
             title.textContent = isTalking
-                ? `${characterName} Speaking...`
-                : isListening || micOpen
+                ? "Character Speaking..."
+                : isListening
                     ? "Listening..."
-                    : "Voice Mode";
+                    : "Voice Only Mode";
         }
         if (subtitle) {
             subtitle.textContent =
-                isListening || micOpen || isTalking ? "Audio active" : "Tap microphone to talk";
+                isListening || isTalking
+                    ? "Audio active"
+                    : "Press and hold the microphone to talk";
         }
-        if ((isListening || micOpen) && analyzer && dataArray) {
+        // Animation Logic - Matches React version (animate when user or bot is active)
+        if ((isListening || !client.audioControls.isAudioMuted) && analyzer && dataArray) {
+            // Use time domain data (waveform) instead of frequency
             // @ts-ignore - TypeScript strict mode issue with Uint8Array type
             analyzer.getByteTimeDomainData(dataArray);
+            // Calculate RMS (Root Mean Square) for volume
             let sum = 0;
             for (let i = 0; i < dataArray.length; i++) {
-                const normalized = (dataArray[i] - 128) / 128;
+                const normalized = (dataArray[i] - 128) / 128; // Center around 0
                 sum += normalized * normalized;
             }
             const rms = Math.sqrt(sum / dataArray.length);
-            const volume = Math.min(1, rms * 3);
-            for (let i = 0; i < audioLevels.length; i++) {
-                const position = i / audioLevels.length;
+            // Apply some scaling and clamping
+            const volume = Math.min(1, rms * 3); // Boost sensitivity
+            // Create left-to-right wave effect
+            const minHeight = 8;
+            const maxHeight = 70;
+            bars.forEach((bar, i) => {
+                // Progressive wave from left to right
+                const position = i / 40; // 0 to 1 from left to right
                 const wavePhase = Date.now() / 300 + position * Math.PI * 2;
-                const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85;
-                audioLevels[i] = volume * waveVariation;
+                const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85; // 0.7 to 1.0
+                const level = volume * waveVariation;
+                const height = minHeight + level * (maxHeight - minHeight);
+                bar.style.height = `${Math.max(minHeight, height)}px`;
+            });
+        }
+        else if (isTalking) {
+            // Simulate speaking bars with natural speech patterns
+            const elapsed = (Date.now() - startTime) / 1000; // seconds
+            // Generate new random target levels occasionally (simulating syllables/words)
+            if (Math.random() < 0.08) {
+                // 8% chance per frame = ~5 times per second
+                targetLevels = Array(40)
+                    .fill(0)
+                    .map((_, i) => {
+                    // More variation in the middle bars, less on edges for natural spread
+                    const position = i / 40;
+                    const centerWeight = 1 - Math.abs(position - 0.5) * 0.5;
+                    // Random peaks and valleys like speech patterns
+                    const randomPeak = 0.2 + Math.random() * 0.7; // 0.2 to 0.9
+                    // Add some neighbor correlation so bars don't jump independently
+                    const prevTarget = targetLevels[i] || 0.3;
+                    const correlation = prevTarget * 0.4 + randomPeak * 0.6;
+                    return correlation * centerWeight;
+                });
             }
+            // Smoothly interpolate current levels toward targets (organic movement)
+            currentLevels = currentLevels.map((current, i) => {
+                const target = targetLevels[i];
+                const speed = 0.2; // Smooth but responsive
+                return current + (target - current) * speed;
+            });
+            // Apply a gentle fade-in for the first 0.3 seconds
+            const fadeIn = Math.min(1, elapsed / 0.3);
+            const minHeight = 8;
+            const maxHeight = 70;
+            bars.forEach((bar, i) => {
+                // Small random jitter for micro-variation
+                const microJitter = 0.95 + Math.random() * 0.1; // 0.95 to 1.05
+                const level = Math.max(0.05, Math.min(1, currentLevels[i] * fadeIn * microJitter));
+                const height = minHeight + level * (maxHeight - minHeight);
+                bar.style.height = `${Math.max(minHeight, height)}px`;
+            });
         }
         else {
-            // The waves settle to a flat line rather than animating on the
-            // character's behalf: React paints this canvas from the microphone
-            // only, and the character's own speech is the avatar's job.
-            for (let i = 0; i < audioLevels.length; i++)
-                audioLevels[i] = 0;
+            // Reset to idle state
+            bars.forEach((bar) => {
+                bar.style.height = "15px";
+            });
         }
-        drawWaves();
         rafId = requestAnimationFrame(updateAudioBars);
     };
     const startAudioAnalysis = async () => {
@@ -859,15 +419,7 @@ export function createConvaiWidget(container, options) {
             updateAudioBars();
         }
         catch (e) {
-            // Fourth mic-acquiring call site: this getUserMedia() is independent
-            // of client.audioControls (it's a separate analyser-only stream, not
-            // routed through AudioManager), but a denial here is the identical
-            // failure mode -- most commonly a mid-session permission revocation,
-            // since by the time voice mode is entered the mic has usually already
-            // been granted via unmuteAudio(). Same helper, same channel, so a
-            // consumer sees one consistent signal regardless of which internal
-            // path acquired the mic.
-            reportMicFailure(client, "Audio analysis setup failed:", e);
+            console.error("Audio analysis setup failed:", e);
         }
     };
     const stopAudioAnalysis = () => {
@@ -884,14 +436,13 @@ export function createConvaiWidget(container, options) {
     // Create header
     const createHeader = () => {
         const header = document.createElement("div");
-        header.setAttribute("part", "header");
         header.style.cssText = `
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 16px;
+      padding: 1rem;
       border-bottom: 1px solid ${aeroTheme.colors.neutral[200]};
-      background: var(--convai-panel-bg, white);
+      background: white;
       position: relative;
     `;
         // Close button on the left
@@ -899,10 +450,10 @@ export function createConvaiWidget(container, options) {
         const chevronIcon = Icons.ChevronDown("md");
         closeButton.appendChild(chevronIcon);
         closeButton.style.cssText = `
-      font-size: 20px;
+      font-size: 1.25rem;
       color: ${aeroTheme.colors.text.secondary};
       cursor: pointer;
-      padding: 4px;
+      padding: 0.25rem;
       transition: ${aeroTheme.transitions.fast};
       background: transparent;
       border: none;
@@ -919,22 +470,21 @@ export function createConvaiWidget(container, options) {
       transform: translateX(-50%);
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 0.5rem;
       font-size: ${aeroTheme.typography.fontSize.base};
       font-weight: ${aeroTheme.typography.fontWeight.semibold};
-      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+      color: ${aeroTheme.colors.text.primary};
     `;
         titleSection.id = "convai-widget-title";
-        refs.widgetTitle = titleSection;
         // Settings button on the right
         const settingsButton = document.createElement("button");
         const moreIcon = Icons.MoreVertical("md");
         settingsButton.appendChild(moreIcon);
         settingsButton.style.cssText = `
-      font-size: 24px;
+      font-size: 1.5rem;
       color: ${aeroTheme.colors.text.secondary};
       cursor: pointer;
-      padding: 4px;
+      padding: 0.25rem;
       transition: ${aeroTheme.transitions.fast};
       background: transparent;
       border: none;
@@ -951,7 +501,7 @@ export function createConvaiWidget(container, options) {
     };
     // Update header with character info
     const updateHeader = () => {
-        const titleSection = refs.widgetTitle;
+        const titleSection = document.getElementById("convai-widget-title");
         if (!titleSection)
             return;
         titleSection.innerHTML = "";
@@ -960,8 +510,8 @@ export function createConvaiWidget(container, options) {
             img.src = characterImage;
             img.alt = characterName;
             img.style.cssText = `
-        width: 24px;
-        height: 24px;
+        width: 1.5rem;
+        height: 1.5rem;
         border-radius: 50%;
         object-fit: cover;
         border: 1.5px solid ${getBotStatusColor().color};
@@ -991,7 +541,7 @@ export function createConvaiWidget(container, options) {
       padding: 0;
       display: inline-flex;
       align-items: center;
-      margin-left: 8px;
+      margin-left: 0.5rem;
       outline: none;
       transition: transform 0.1s ease-out;
     `;
@@ -1012,7 +562,7 @@ export function createConvaiWidget(container, options) {
             voiceBadge.textContent = "VOICE";
             voiceBadge.style.cssText = `
         font-size: 10px;
-        color: var(--convai-accent, ${aeroTheme.colors.convai.light});
+        color: ${aeroTheme.colors.convai.light};
         font-weight: 500;
         margin-left: 8px;
         padding: 2px 6px;
@@ -1077,22 +627,15 @@ export function createConvaiWidget(container, options) {
             listeningTag.insertBefore(dot, listeningTag.firstChild);
             titleSection.appendChild(listeningTag);
         }
-        // Every call site that refreshes the header (stateChange, botReady,
-        // connect/disconnect via stateChange, character-info fetch, ...) also
-        // needs the connecting overlay re-evaluated -- it depends on the same
-        // `isConnected`/`isBotReady`/`characterName` inputs.
-        updateConnectingOverlay();
-        updateVoiceModeAvatar();
     };
     // Create message list
     const createMessageList = () => {
         const list = document.createElement("div");
         list.id = "convai-message-list";
-        list.setAttribute("part", "messages");
         list.style.cssText = `
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 0.75rem;
       min-height: 100%;
     `;
         return list;
@@ -1101,23 +644,22 @@ export function createConvaiWidget(container, options) {
     const createFooter = () => {
         const footer = document.createElement("div");
         footer.style.cssText = `
-      padding: 16px;
+      padding: 1rem;
       border-top: 1px solid ${aeroTheme.colors.neutral[200]};
-      background: var(--convai-panel-bg, white);
+      background: white;
       display: flex;
-      gap: 8px;
+      gap: 0.5rem;
       align-items: center;
       position: relative;
     `;
         // Voice Mode Exit Button (Initially hidden)
         const voiceExitButton = document.createElement("button");
         voiceExitButton.id = "convai-voice-exit-btn";
-        refs.voiceExitBtn = voiceExitButton;
         const exitIcon = Icons.PhoneOff("md");
         voiceExitButton.appendChild(exitIcon);
         voiceExitButton.style.cssText = `
-      width: 36px;
-      height: 36px;
+      width: 2.25rem;
+      height: 2.25rem;
       border-radius: 50%;
       background: ${aeroTheme.colors.error[500]};
       color: white;
@@ -1128,31 +670,19 @@ export function createConvaiWidget(container, options) {
       margin: 0 auto;
       border: none;
     `;
-        voiceExitButton.addEventListener("click", () => {
-            // Deliberately a *sync* listener. It used to be `async` with a bare
-            // `await client.audioControls.muteAudio()` and no try/catch: on the
-            // LiveKit path that call rethrows when the room has dropped, so a
-            // network blip mid-call plus a tap on exit leaked an unhandled
-            // rejection onto the host page *and* skipped the two lines below,
-            // stranding the user in the voice overlay with no way out.
-            //
-            // The mute is not dropped -- `applyVoiceMode()` -> `updateVoiceMode()`
-            // performs it (conditionally, if the mic is live) inside the exit
-            // branch, where a failure is now reported rather than fatal. Exiting
-            // the UI is unconditional either way: the overlay must never outlive
-            // the user's decision to leave it.
+        voiceExitButton.addEventListener("click", async () => {
             client.sendInterruptMessage();
+            await client.audioControls.muteAudio(); // Mute on exit
             isVoiceMode = false;
-            applyVoiceMode();
+            updateVoiceMode();
         });
         footer.appendChild(voiceExitButton);
         // Standard Footer Content (Mic + Input)
         const standardContent = document.createElement("div");
         standardContent.id = "convai-footer-standard";
-        refs.footerStandard = standardContent;
         standardContent.style.cssText = `
       display: flex;
-      gap: 8px;
+      gap: 0.5rem;
       align-items: center;
       width: 100%;
     `;
@@ -1165,16 +695,15 @@ export function createConvaiWidget(container, options) {
       align-items: center;
     `;
         inputElement = document.createElement("input");
-        inputElement.setAttribute("part", "input");
         inputElement.type = "text";
         inputElement.placeholder = "Conversation";
         inputElement.style.cssText = `
       width: 100%;
-      padding: 12px 44px 12px 16px;
+      padding: 0.75rem 2.75rem 0.75rem 1rem;
       border-radius: ${aeroTheme.borderRadius.full};
       border: 1px solid ${aeroTheme.colors.neutral[300]};
       background: ${aeroTheme.colors.glass.medium};
-      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+      color: ${aeroTheme.colors.text.primary};
       font-size: ${aeroTheme.typography.fontSize.sm};
       transition: ${aeroTheme.transitions.fast};
       outline: none;
@@ -1190,22 +719,16 @@ export function createConvaiWidget(container, options) {
         // Send button
         const sendButton = document.createElement("button");
         sendButton.id = "convai-send-button";
-        // This button is dual-role -- it sends text when the input has a draft,
-        // and toggles voice mode when empty -- but there is no separate mic
-        // element, so only the send-button part applies. `mic-button` is
-        // reserved for a future version that splits the two; see parts.test.ts.
-        sendButton.setAttribute("part", "send-button");
-        refs.sendButton = sendButton;
         const sendIcon = Icons.Send("md");
         sendButton.appendChild(sendIcon);
         sendButton.style.cssText = `
       position: absolute;
-      right: 6px;
-      width: 36px;
-      height: 36px;
+      right: 0.375rem;
+      width: 2.25rem;
+      height: 2.25rem;
       border-radius: 50%;
       background: transparent; /* Initial transparent for voice toggle */
-      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+      color: ${aeroTheme.colors.text.primary};
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1221,19 +744,9 @@ export function createConvaiWidget(container, options) {
                 client.connectionType !== "text") {
                 // Toggle Voice Mode
                 client.sendInterruptMessage();
-                try {
-                    await client.audioControls.unmuteAudio(); // Unmute on enter
-                    isVoiceMode = true;
-                    // Awaited so this try/catch actually covers it -- bare, the promise
-                    // escaped the block it looks like it belongs to.
-                    await updateVoiceMode();
-                }
-                catch (error) {
-                    // isVoiceMode is only flipped after a successful unmute, so a
-                    // denial here leaves the widget in text mode, not stranded
-                    // mid-transition into voice mode.
-                    reportMicFailure(client, "Failed to enable microphone:", error);
-                }
+                await client.audioControls.unmuteAudio(); // Unmute on enter
+                isVoiceMode = true;
+                updateVoiceMode();
             }
         });
         inputContainer.appendChild(inputElement);
@@ -1250,7 +763,7 @@ export function createConvaiWidget(container, options) {
       position: absolute;
       top: 60px;
       right: 16px;
-      background: var(--convai-panel-bg, white);
+      background: white;
       border-radius: ${aeroTheme.borderRadius.xl};
       box-shadow: ${aeroTheme.shadows.xl};
       padding: 0;
@@ -1265,7 +778,17 @@ export function createConvaiWidget(container, options) {
       overflow: hidden;
     `;
         // Add animation keyframes if not present
-        injectKeyframes(styleTarget);
+        if (!document.getElementById("convai-widget-keyframes")) {
+            const style = document.createElement("style");
+            style.id = "convai-widget-keyframes";
+            style.textContent = `
+        @keyframes popIn {
+          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
         // Horizontal Settings Row Container
         const settingsRow = document.createElement("div");
         settingsRow.style.cssText = `
@@ -1294,7 +817,7 @@ export function createConvaiWidget(container, options) {
                 ? "#10b981"
                 : isDestructive
                     ? "#ef4444"
-                    : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`};
+                    : aeroTheme.colors.text.primary};
         transition: ${aeroTheme.transitions.fast};
         min-width: 50px;
       `;
@@ -1346,7 +869,6 @@ export function createConvaiWidget(container, options) {
             videoIcon.style.height = "18px";
             const videoBtn = createOption(videoIcon, "Video", handleToggleVideo, isVideoVisible);
             videoBtn.id = "convai-settings-video-btn";
-            refs.settingsVideoBtn = videoBtn;
             settingsRow.appendChild(videoBtn);
         }
         // Screen Share - only show if connection type is video
@@ -1359,7 +881,6 @@ export function createConvaiWidget(container, options) {
             shareIcon.style.height = "18px";
             const shareBtn = createOption(shareIcon, "Screen", handleToggleScreenShare, isSharing);
             shareBtn.id = "convai-settings-share-btn";
-            refs.settingsShareBtn = shareBtn;
             settingsRow.appendChild(shareBtn);
         }
         // Disconnect
@@ -1398,7 +919,7 @@ export function createConvaiWidget(container, options) {
                 ? "#10b981"
                 : isDestructive
                     ? "#ef4444"
-                    : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`};
+                    : aeroTheme.colors.text.primary};
         transition: ${aeroTheme.transitions.fast};
         min-width: 50px;
       `;
@@ -1450,7 +971,6 @@ export function createConvaiWidget(container, options) {
             videoIcon.style.height = "18px";
             const videoBtn = createOption(videoIcon, "Video", handleToggleVideo, isVideoVisible);
             videoBtn.id = "convai-settings-video-btn";
-            refs.settingsVideoBtn = videoBtn;
             settingsRow.appendChild(videoBtn);
         }
         // Screen Share - Always show if showScreenShare is true and connection type is video
@@ -1463,7 +983,6 @@ export function createConvaiWidget(container, options) {
             shareIcon.style.height = "18px";
             const shareBtn = createOption(shareIcon, "Screen", handleToggleScreenShare, isSharing);
             shareBtn.id = "convai-settings-share-btn";
-            refs.settingsShareBtn = shareBtn;
             settingsRow.appendChild(shareBtn);
         }
         // Disconnect
@@ -1478,12 +997,6 @@ export function createConvaiWidget(container, options) {
     const createFloatingVideo = () => {
         const container = document.createElement("div");
         container.id = "floating-video-container";
-        // NOTE on z-index: deliberately NOT themable. `--convai-z-index` drives the
-        // widget root only. Both elements are `position: fixed` and this one is
-        // appended *before* the widget root, so on a tie the widget paints on top:
-        // a host raising the token to clear their nav bar would hide the user's own
-        // camera preview behind the panel. Video/screen share are also out of scope
-        // for the embed, which is chat-only.
         container.style.cssText = `
       position: fixed;
       left: 20px;
@@ -1665,18 +1178,16 @@ export function createConvaiWidget(container, options) {
     };
     // Event handlers
     const handleToggle = async () => {
-        if (isDestroyed)
+        if (isDestroyed || isStartingConnection) {
             return;
-        if (isOpen || pendingOpen) {
-            // Already open, or an open is already in flight: nothing to do. The
-            // `pendingOpen` half is what keeps a repeat call from falling through
-            // to the `isConnecting` branch below and opening the panel *before* the
-            // connect it is waiting on has finished.
+        }
+        if (isOpen) {
+            // Just close if already open
             return;
         }
         // Connect on first click if not already connected/connecting
         if (!client.state.isConnected && !client.state.isConnecting) {
-            pendingOpen = true;
+            isStartingConnection = true;
             try {
                 if (requestPublicationGrant || client.isPublishedChatSession) {
                     if (!requestPublicationGrant) {
@@ -1706,20 +1217,6 @@ export function createConvaiWidget(container, options) {
                     await client.disconnect();
                     return;
                 }
-                // Re-checked *after* the await: a close()/toggle()/launcher click
-                // during the connect clears the flag, and that cancellation has to
-                // win. The client stays connected either way -- only the panel is
-                // held back -- so a later open() takes the already-connected branch
-                // and opens instantly.
-                if (isDestroyed) {
-                    // destroy() can also run after the grant is exchanged but before
-                    // Core or LiveKit finishes connecting. Disconnect that late session
-                    // instead of leaving an invisible room alive.
-                    await client.disconnect();
-                    return;
-                }
-                if (!pendingOpen)
-                    return;
                 setIsOpen(true);
             }
             catch (error) {
@@ -1728,7 +1225,7 @@ export function createConvaiWidget(container, options) {
                 }
             }
             finally {
-                pendingOpen = false;
+                isStartingConnection = false;
             }
         }
         else {
@@ -1736,29 +1233,11 @@ export function createConvaiWidget(container, options) {
             setIsOpen(!isOpen);
         }
     };
-    /** A launcher click while an open is pending means "cancel", same as `toggle()`. */
-    const handleLauncherClick = () => {
-        if (pendingOpen) {
-            handleClose();
-            return;
-        }
-        void handleToggle();
-    };
     const handleClose = () => {
-        // Cancels an in-flight open as well as closing an open panel; see
-        // `pendingOpen`. `setIsOpen(false)` on an already-closed widget just
-        // re-applies the collapsed styles, so this is safe in both cases.
-        pendingOpen = false;
         setIsOpen(false);
     };
-    // Published sessions must wait for Core's bot-ready handshake. A normal
-    // authenticated text session still gets the text-only UI, but can send as
-    // soon as it connects.
-    const requiresBotReadyForText = () => Boolean(requestPublicationGrant) || Boolean(client.isPublishedChatSession);
-    const isTextInputReady = () => client.state.isConnected &&
-        (!requiresBotReadyForText() || client.isBotReady);
     const handleSend = () => {
-        if (inputValue.trim() && isTextInputReady()) {
+        if (inputValue.trim() && client.state.isConnected && client.isBotReady) {
             client.sendUserTextMessage(inputValue);
             inputValue = "";
             inputElement.value = "";
@@ -1789,7 +1268,7 @@ export function createConvaiWidget(container, options) {
             isVoiceMode = false;
             hasEnteredDefaultVoiceMode = false;
             updateHeader();
-            await updateVoiceMode();
+            updateVoiceMode();
             updateSendButton();
         }
         catch (error) {
@@ -1803,11 +1282,7 @@ export function createConvaiWidget(container, options) {
         isVoiceMode = false;
         hasEnteredDefaultVoiceMode = false;
         updateHeader();
-        // Not awaited: this function has no try/catch of its own and is wired
-        // straight to a click, so awaiting would only move a rejection from one
-        // unguarded place to another. See the note on `handleDisconnect`'s own
-        // `await client.disconnect()` in the fix report.
-        applyVoiceMode();
+        updateVoiceMode();
         updateSendButton();
     };
     const handleToggleVideo = async () => {
@@ -1846,17 +1321,10 @@ export function createConvaiWidget(container, options) {
     const setIsOpen = async (open) => {
         isOpen = open;
         if (open) {
-            morphingContainer.style.width = `${PANEL_W_PX}px`;
-            morphingContainer.style.height = `${PANEL_H_PX}px`;
-            morphingContainer.style.borderRadius = `var(--convai-radius, ${aeroTheme.borderRadius.xl})`;
+            morphingContainer.style.width = "400px";
+            morphingContainer.style.height = "600px";
+            morphingContainer.style.borderRadius = aeroTheme.borderRadius.xl;
             morphingContainer.style.cursor = "default";
-            // The open panel is a *different* glass treatment from the launcher
-            // bubble, matching the React widget: near-opaque and saturated, so the
-            // host page does not bleed through. At the bubble's 0.8 alpha a dark
-            // host page shows through the panel and reads as grey.
-            morphingContainer.style.background =
-                "var(--convai-panel-bg, rgba(252, 252, 253, 0.95))";
-            morphingContainer.style.backdropFilter = "blur(20px) saturate(180%)";
             buttonContent.style.opacity = "0";
             buttonContent.style.transform = "scale(0.8)";
             buttonContent.style.pointerEvents = "none";
@@ -1874,24 +1342,19 @@ export function createConvaiWidget(container, options) {
                         await client.audioControls.unmuteAudio();
                         isVoiceMode = true;
                         hasEnteredDefaultVoiceMode = true;
-                        await updateVoiceMode();
+                        updateVoiceMode();
                     }
                     catch (error) {
-                        reportMicFailure(client, "Failed to enter voice mode on open:", error);
+                        console.error("Failed to enter voice mode on open:", error);
                     }
                 }, 100);
             }
         }
         else {
-            morphingContainer.style.width = "var(--convai-launcher-size, 64px)";
-            morphingContainer.style.height = "var(--convai-launcher-size, 64px)";
-            // Literal, not `--convai-radius` — see the creation site: that token is
-            // the *panel* radius, and reusing it here would squircle the launcher.
+            morphingContainer.style.width = "4rem";
+            morphingContainer.style.height = "4rem";
             morphingContainer.style.borderRadius = "50%";
             morphingContainer.style.cursor = "pointer";
-            // Back to the launcher bubble's lighter glass — see the open branch.
-            morphingContainer.style.background = `var(--convai-panel-bg, ${aeroTheme.colors.glass.backdrop})`;
-            morphingContainer.style.backdropFilter = aeroTheme.glass.backdrop;
             buttonContent.style.opacity = "1";
             buttonContent.style.transform = "scale(1)";
             buttonContent.style.pointerEvents = "auto";
@@ -1905,52 +1368,35 @@ export function createConvaiWidget(container, options) {
         settingsTray.style.display = open ? "flex" : "none";
     };
     const updateSendButton = () => {
-        const sendButton = refs.sendButton;
+        const sendButton = document.getElementById("convai-send-button");
         if (!sendButton)
             return;
         // Clear previous content
         sendButton.innerHTML = "";
-        // A published session must wait for Core's bot-ready handshake before
-        // accepting text. Preserve the established interactive-widget behavior
-        // for authenticated voice/video sessions.
-        const isPublishedTextChat = requiresBotReadyForText();
-        const textInputReady = isTextInputReady();
-        inputElement.disabled = isPublishedTextChat && !textInputReady;
+        const canSendText = client.state.isConnected && client.isBotReady;
+        inputElement.disabled = !canSendText;
         if (inputValue.length > 0 ||
             requestPublicationGrant ||
             client.connectionType === "text") {
             // Show Send Button
             sendButton.appendChild(Icons.Send("md"));
-            sendButton.style.background = `var(--convai-accent, ${aeroTheme.colors.text.primary})`;
-            // The label sits *on* the accent fill, so it must follow the panel
-            // surface colour rather than stay a hardcoded "white" -- a host setting
-            // a pale --convai-accent would otherwise get white-on-white. `white` is
-            // byte-identical to the fallback --convai-panel-bg already carries at
-            // its three other sites, so the default rendering is unchanged.
-            // Pairing requirement for hosts: --convai-accent and --convai-panel-bg
-            // must contrast with each other, since this is the one place they meet.
-            sendButton.style.color = "var(--convai-panel-bg, white)";
+            sendButton.style.background = aeroTheme.colors.text.primary;
+            sendButton.style.color = "white";
             sendButton.style.border = "none";
-            sendButton.disabled =
-                isPublishedTextChat && (inputValue.length === 0 || !textInputReady);
-            if (isPublishedTextChat) {
-                sendButton.style.opacity =
-                    inputValue.length > 0 && textInputReady ? "1" : "0.5";
-                sendButton.title = textInputReady
-                    ? inputValue.length > 0
-                        ? "Send"
-                        : "Type a message"
-                    : "Waiting for character";
-            }
-            else {
-                sendButton.title = "Send";
-            }
+            sendButton.disabled = inputValue.length === 0 || !canSendText;
+            sendButton.style.opacity =
+                inputValue.length > 0 && canSendText ? "1" : "0.5";
+            sendButton.title = canSendText
+                ? inputValue.length > 0
+                    ? "Send"
+                    : "Type a message"
+                : "Waiting for character";
         }
         else {
             // Show Voice Mode Toggle
             sendButton.appendChild(Icons.Waveform("md"));
             sendButton.style.background = "transparent";
-            sendButton.style.color = `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+            sendButton.style.color = aeroTheme.colors.text.primary;
             sendButton.style.border = `1px solid ${aeroTheme.colors.neutral[300]}`;
             sendButton.style.opacity = "1";
             sendButton.disabled = false;
@@ -1983,8 +1429,8 @@ export function createConvaiWidget(container, options) {
         }
     };
     const updateVoiceMode = async () => {
-        const standardFooter = refs.footerStandard;
-        const voiceExitBtn = refs.voiceExitBtn;
+        const standardFooter = document.getElementById("convai-footer-standard");
+        const voiceExitBtn = document.getElementById("convai-voice-exit-btn");
         if (isVoiceMode) {
             // Show Voice Overlay
             if (voiceModeOverlay)
@@ -2004,26 +1450,15 @@ export function createConvaiWidget(container, options) {
             updateHeader();
             // Reset animation state for voice mode
             startTime = Date.now();
+            currentLevels = Array(40).fill(0.05);
+            targetLevels = Array(40).fill(0.05);
             // Start Audio Analysis
             startAudioAnalysis();
         }
         else {
-            // Ensure microphone is muted when not in voice mode.
-            //
-            // This await is the only one in this function that can reject, and
-            // everything below it -- hiding the overlay, restoring the standard
-            // footer, updating the header, stopping the analyser -- is the only
-            // route out of the voice UI. So a failed mute must never short-circuit
-            // it: report it and carry on tearing the overlay down. (LiveKit's
-            // setMicrophoneEnabled(false) rethrows on a dropped room, which is
-            // exactly when the user is most likely to be hitting exit.)
+            // Ensure microphone is muted when not in voice mode
             if (!client.audioControls.isAudioMuted) {
-                try {
-                    await client.audioControls.muteAudio();
-                }
-                catch (error) {
-                    reportMicFailure(client, "Failed to mute microphone:", error);
-                }
+                await client.audioControls.muteAudio();
             }
             // Hide Overlay
             if (voiceModeOverlay)
@@ -2055,31 +1490,9 @@ export function createConvaiWidget(container, options) {
             stopAudioAnalysis();
         }
     };
-    /**
-     * Fire-and-forget `updateVoiceMode()` for the call sites that are
-     * synchronous (DOM listeners, the constructor tail) and therefore have no
-     * caller to catch anything it rejects with.
-     *
-     * `updateVoiceMode()` is `async`, so a bare call there would put a floating
-     * promise on the host page. Its one rejecting await is now guarded
-     * internally, which makes this belt-and-braces -- but it is the guarantee
-     * that keeps a future await added inside `updateVoiceMode()` from silently
-     * reintroducing the unhandled rejection this replaces. Routed through
-     * `reportMicFailure` so a failure is observable on the client's `error`
-     * channel rather than console-only.
-     */
-    const applyVoiceMode = () => {
-        void updateVoiceMode().catch((error) => {
-            reportMicFailure(client, "Failed to apply voice mode:", error);
-        });
-    };
     // Microphone button removed - only controlled via voice mode now
     // Helper for Markdown - matches React MarkdownRenderer.tsx
-    // `media` renders inline image/video previews under a media link. Bot messages
-    // want them; the user's own bubble does not — you already know what you typed,
-    // and a preview there would let a URL a user pasted embed remote media into
-    // the transcript. Links stay clickable either way.
-    const renderMarkdown = (text, container, { media = true } = {}) => {
+    const renderMarkdown = (text, container) => {
         if (!text)
             return;
         // Handle both actual newlines and \n escape sequences
@@ -2087,183 +1500,59 @@ export function createConvaiWidget(container, options) {
         const lines = normalizedText.split("\n");
         lines.forEach((line, lineIndex) => {
             // Process markdown within each line
-            // Bold, italic, links, images and bare URLs — see utils/inlineMarkdown.
-            // `cdn.example.com/a/b/c.png` -> `cdn.example.com · c.png`
-            const describeUrl = (url) => {
-                try {
-                    const { host, pathname } = new URL(url);
-                    const file = pathname.split("/").filter(Boolean).pop();
-                    return file ? `${host} · ${file}` : host;
-                }
-                catch {
-                    return url;
-                }
-            };
-            /**
-             * A preview card that reserves its space before the media arrives, so the
-             * bubble does not jump when an image decodes, and collapses to one muted
-             * line if the URL does not resolve — a character can easily invent one,
-             * and an empty player in the transcript reads as a broken widget.
-             *
-             * Chrome is derived from the inherited text colour: the widget is embedded
-             * in someone else's page, on a background this code cannot know.
-             */
-            const mediaPreview = (src, alt, media) => {
-                const card = document.createElement("span");
-                card.setAttribute("part", "message-media-card");
-                card.style.cssText = `
-          display: block;
-          position: relative;
-          margin-top: 6px;
-          max-width: 320px;
-          aspect-ratio: 16 / 10;
-          border-radius: 8px;
-          overflow: hidden;
-          background: color-mix(in srgb, currentColor 6%, transparent);
-          box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
-        `;
-                const el = media === "image"
-                    ? Object.assign(document.createElement("img"), { src, alt, loading: "lazy" })
-                    : Object.assign(document.createElement("video"), { src, controls: true, preload: "metadata" });
-                el.setAttribute("part", "message-media");
-                el.style.cssText = `
-          display: block;
-          width: 100%;
-          height: 100%;
-          object-fit: ${media === "image" ? "cover" : "contain"};
-          border-radius: 8px;
-          opacity: 0;
-          transition: opacity .18s ease;
-        `;
-                const skeleton = document.createElement("span");
-                skeleton.setAttribute("part", "message-media-skeleton");
-                skeleton.setAttribute("aria-hidden", "true");
-                skeleton.dataset.convaiSkeleton = "";
-                skeleton.style.cssText = `
-          position: absolute;
-          inset: 0;
-          border-radius: 8px;
-          background: color-mix(in srgb, currentColor 8%, transparent);
-          background-image: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 12%, transparent), transparent);
-          background-size: 200% 100%;
-          animation: convai-preview-shimmer 1.4s ease-in-out infinite;
-        `;
-                const caption = document.createElement("span");
-                caption.setAttribute("part", "message-media-caption");
-                caption.textContent = describeUrl(src);
-                caption.style.cssText = `
-          display: block;
-          margin-top: 4px;
-          font-size: 11px;
-          opacity: .7;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        `;
-                const settled = () => {
-                    el.style.opacity = "1";
-                    skeleton.remove();
-                };
-                el.addEventListener(media === "image" ? "load" : "loadedmetadata", settled);
-                el.addEventListener("error", () => {
-                    const dead = document.createElement("span");
-                    dead.setAttribute("part", "message-media-unavailable");
-                    dead.textContent = `Preview unavailable — ${describeUrl(src)}`;
-                    dead.style.cssText = `
-            display: block;
-            margin-top: 6px;
-            font-size: 11px;
-            opacity: .55;
-            font-style: italic;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          `;
-                    card.replaceWith(dead);
-                    caption.remove();
-                });
-                card.appendChild(el);
-                card.appendChild(skeleton);
-                const frag = document.createDocumentFragment();
-                frag.appendChild(card);
-                frag.appendChild(caption);
-                return frag;
-            };
             const processLine = (text) => {
                 const parts = [];
-                for (const node of parseInlineMarkdown(text)) {
-                    switch (node.kind) {
-                        case "strong": {
-                            // matches React UserBubble styling
-                            const strong = document.createElement("strong");
-                            strong.textContent = node.text;
-                            strong.style.cssText = `
-                font-weight: 600;
-                color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
-              `;
-                            parts.push(strong);
-                            break;
-                        }
-                        case "em": {
-                            const em = document.createElement("em");
-                            em.textContent = node.text;
-                            em.style.cssText = `font-style: italic;`;
-                            parts.push(em);
-                            break;
-                        }
-                        case "link": {
-                            const a = document.createElement("a");
-                            a.href = node.href;
-                            a.textContent = node.label === node.href ? compactUrl(node.label) : node.label;
-                            a.target = "_blank";
-                            a.rel = "noopener noreferrer";
-                            a.setAttribute("part", "message-link");
-                            a.style.cssText = `
-                color: #10b981;
-                text-decoration: underline;
-                word-break: break-all;
-              `;
-                            parts.push(a);
-                            if (media && node.media)
-                                parts.push(mediaPreview(node.href, node.label, node.media));
-                            break;
+                let remaining = text;
+                // Process bold and italic markdown
+                // Bold: **text** or __text__
+                // Italic: *text* or _text_
+                const markdownRegex = /(\*\*|__)(.*?)\1|\*([^*]+)\*|_([^_]+)_/g;
+                let lastIndex = 0;
+                let match;
+                while ((match = markdownRegex.exec(remaining)) !== null) {
+                    // Add text before the match
+                    if (match.index > lastIndex) {
+                        const textBefore = remaining.substring(lastIndex, match.index);
+                        if (textBefore) {
+                            parts.push(document.createTextNode(textBefore));
                         }
-                        case "blocked": {
-                            const blocked = document.createElement("span");
-                            blocked.setAttribute("part", "message-link-blocked");
-                            blocked.textContent = node.label;
-                            blocked.title = `Link blocked: ${node.href}`;
-                            blocked.style.cssText = `
-                opacity: .75;
-                text-decoration: underline dotted;
-                cursor: help;
-              `;
-                            parts.push(blocked);
-                            break;
-                        }
-                        case "image": {
-                            if (media) {
-                                parts.push(mediaPreview(node.src, node.alt, "image"));
-                                break;
-                            }
-                            // With previews off, an image still has to say what it pointed at,
-                            // so it degrades to the same anchor a plain link would render.
-                            const imgLink = document.createElement("a");
-                            imgLink.href = node.src;
-                            imgLink.textContent = node.alt || node.src;
-                            imgLink.target = "_blank";
-                            imgLink.rel = "noopener noreferrer";
-                            imgLink.setAttribute("part", "message-link");
-                            imgLink.style.cssText = `
-                color: #10b981;
-                text-decoration: underline;
-                word-break: break-all;
-              `;
-                            parts.push(imgLink);
-                            break;
-                        }
-                        default:
-                            parts.push(document.createTextNode(node.text));
+                    }
+                    // Determine if it's bold or italic
+                    if (match[1] && match[2]) {
+                        // Bold text (** or __) - matches React UserBubble styling
+                        const strong = document.createElement("strong");
+                        strong.textContent = match[2];
+                        strong.style.cssText = `
+              font-weight: 600;
+              color: ${aeroTheme.colors.text.primary};
+            `;
+                        parts.push(strong);
+                    }
+                    else if (match[3]) {
+                        // Italic text (*) - matches React UserBubble styling
+                        const em = document.createElement("em");
+                        em.textContent = match[3];
+                        em.style.cssText = `
+              font-style: italic;
+            `;
+                        parts.push(em);
+                    }
+                    else if (match[4]) {
+                        // Italic text (_) - matches React UserBubble styling
+                        const em = document.createElement("em");
+                        em.textContent = match[4];
+                        em.style.cssText = `
+              font-style: italic;
+            `;
+                        parts.push(em);
+                    }
+                    lastIndex = match.index + match[0].length;
+                }
+                // Add remaining text
+                if (lastIndex < remaining.length) {
+                    const textAfter = remaining.substring(lastIndex);
+                    if (textAfter) {
+                        parts.push(document.createTextNode(textAfter));
                     }
                 }
                 return parts;
@@ -2302,7 +1591,7 @@ export function createConvaiWidget(container, options) {
             height: 100%;
             color: ${aeroTheme.colors.text.secondary};
             text-align: center;
-            padding: 32px;
+            padding: 2rem;
         `;
             emptyState.innerHTML = `
             <p style="font-weight: 500; margin-bottom: 8px;">Start a conversation</p>
@@ -2324,7 +1613,6 @@ export function createConvaiWidget(container, options) {
         contain: layout style paint;
       `;
             const bubble = document.createElement("div");
-            bubble.setAttribute("part", msg.isUser ? "message message-user" : "message message-bot");
             // Add data attribute to identify user messages for debugging/styling
             if (msg.isUser) {
                 bubble.setAttribute("data-message-type", "user");
@@ -2332,10 +1620,6 @@ export function createConvaiWidget(container, options) {
             // Set base styles first - explicitly set background to match React UserBubble exactly
             // CRITICAL: Use the exact same background for both user and bot messages
             const backgroundColor = "rgba(252, 252, 253, 0.95)";
-            // NOTE on border-radius: deliberately NOT themable. `--convai-radius` is
-            // the open panel's radius; a bubble's asymmetric tail corner is a
-            // different geometry (`50%` would make ellipses of these). A dedicated
-            // `--convai-bubble-radius` can be added additively later if wanted.
             bubble.style.cssText = `
         padding: 12px;
         border-radius: ${msg.isUser ? "12px 12px 4px 12px" : "12px 12px 12px 4px"};
@@ -2344,8 +1628,8 @@ export function createConvaiWidget(container, options) {
         backdrop-filter: blur(20px) saturate(180%);
         border: 1px solid rgba(0, 0, 0, 0.06);
         box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 2px 8px rgba(0, 0, 0, 0.08);
-        color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
-        font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.body});
+        color: ${aeroTheme.colors.text.primary};
+        font-family: ${aeroTheme.typography.fontFamily.body};
         font-size: 14px;
         line-height: 1.5;
         word-wrap: break-word;
@@ -2377,8 +1661,8 @@ export function createConvaiWidget(container, options) {
                 // Logo/Icon - matches React LogoWrapper
                 const logoContainer = document.createElement("div");
                 logoContainer.style.cssText = `
-          width: 16px;
-          height: 16px;
+          width: 1rem;
+          height: 1rem;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -2405,10 +1689,10 @@ export function createConvaiWidget(container, options) {
                 const nameLabel = document.createElement("span");
                 nameLabel.textContent = msg.sender === "User" ? "You" : msg.sender;
                 nameLabel.style.cssText = `
-          font-size: 12px;
+          font-size: 0.75rem;
           color: ${msg.isUser ? aeroTheme.colors.convai.dark : "#10b981"};
           font-weight: 500;
-          font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.body});
+          font-family: ${aeroTheme.typography.fontFamily.body};
           isolation: isolate;
           contain: layout style paint;
         `;
@@ -2422,7 +1706,7 @@ export function createConvaiWidget(container, options) {
         white-space: pre-wrap;
         word-wrap: break-word;
       `;
-            renderMarkdown(msg.text, contentDiv, { media: !msg.isUser });
+            renderMarkdown(msg.text, contentDiv);
             bubble.appendChild(contentDiv);
             messageWrapper.appendChild(bubble);
             // Timestamp - matches React exactly
@@ -2430,11 +1714,11 @@ export function createConvaiWidget(container, options) {
                 const timestamp = document.createElement("span");
                 timestamp.textContent = msg.timestamp;
                 timestamp.style.cssText = `
-          font-size: 12px;
+          font-size: 0.75rem;
           color: ${aeroTheme.colors.text.secondary};
           margin-top: 4px;
           align-self: ${msg.isUser ? "flex-end" : "flex-start"};
-          font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.body});
+          font-family: ${aeroTheme.typography.fontFamily.body};
         `;
                 messageWrapper.appendChild(timestamp);
             }
@@ -2478,8 +1762,6 @@ export function createConvaiWidget(container, options) {
     // Setup event listeners for client state changes
     const setupClientListeners = () => {
         eventSubscriptions.register((listener) => client.on("stateChange", listener), () => {
-            // Published chat (connectionType "text") has no microphone: never let
-            // a voice-mode transition leave the panel in a mode it cannot honour.
             if (client.connectionType === "text") {
                 if (isVoiceMode) {
                     isVoiceMode = false;
@@ -2507,6 +1789,8 @@ export function createConvaiWidget(container, options) {
                 // Reset when not speaking
                 if (startTime && !client.state.isSpeaking) {
                     startTime = 0;
+                    currentLevels = Array(40).fill(0.05);
+                    targetLevels = Array(40).fill(0.05);
                 }
             }
             // Auto-collapse when disconnected
@@ -2519,14 +1803,12 @@ export function createConvaiWidget(container, options) {
                 isVideoVisible = false;
                 hasEnteredDefaultVoiceMode = false;
                 updateHeader();
-                // Synchronous listener: nothing here can catch a rejection, and the
-                // mute inside is the one most likely to fail (the room has just
-                // dropped -- that is why we are collapsing).
-                applyVoiceMode();
+                updateVoiceMode();
             }
             // Auto-enter voice mode on first connection if defaultVoiceMode is true
             if (client.state.isConnected &&
                 defaultVoiceMode &&
+                client.connectionType !== "text" &&
                 isOpen &&
                 !hasEnteredDefaultVoiceMode &&
                 !isVoiceMode) {
@@ -2535,10 +1817,10 @@ export function createConvaiWidget(container, options) {
                         await client.audioControls.unmuteAudio();
                         isVoiceMode = true;
                         hasEnteredDefaultVoiceMode = true;
-                        await updateVoiceMode();
+                        updateVoiceMode();
                     }
                     catch (error) {
-                        reportMicFailure(client, "Failed to enter voice mode:", error);
+                        console.error("Failed to enter voice mode:", error);
                     }
                 }, 100);
             }
@@ -2548,9 +1830,9 @@ export function createConvaiWidget(container, options) {
         eventSubscriptions.register((listener) => client.videoControls.on("videoStateChange", listener), (videoState) => {
             if (videoState.isVideoEnabled !== undefined) {
                 isVideoVisible = videoState.isVideoEnabled;
-                applyVoiceMode(); // synchronous listener; see applyVoiceMode()
+                updateVoiceMode();
                 // Update tray button state
-                const videoBtn = refs.settingsVideoBtn;
+                const videoBtn = document.getElementById("convai-settings-video-btn");
                 if (videoBtn) {
                     const isActive = isVideoVisible;
                     videoBtn.style.backgroundColor = isActive
@@ -2558,7 +1840,7 @@ export function createConvaiWidget(container, options) {
                         : "transparent";
                     videoBtn.style.color = isActive
                         ? "#10b981"
-                        : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+                        : aeroTheme.colors.text.primary;
                     // Update Icon - first child is icon container
                     const iconContainer = videoBtn.querySelector("div");
                     if (iconContainer) {
@@ -2572,10 +1854,10 @@ export function createConvaiWidget(container, options) {
             }
         });
         // Screen share state change listener
-        client.screenShareControls.on("screenShareStateChange", (screenShareState) => {
+        eventSubscriptions.register((listener) => client.screenShareControls.on("screenShareStateChange", listener), (screenShareState) => {
             if (screenShareState.isScreenShareActive !== undefined) {
                 const isSharing = screenShareState.isScreenShareActive;
-                const shareBtn = refs.settingsShareBtn;
+                const shareBtn = document.getElementById("convai-settings-share-btn");
                 if (shareBtn) {
                     const isActive = isSharing;
                     shareBtn.style.backgroundColor = isActive
@@ -2583,7 +1865,7 @@ export function createConvaiWidget(container, options) {
                         : "transparent";
                     shareBtn.style.color = isActive
                         ? "#10b981"
-                        : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+                        : aeroTheme.colors.text.primary;
                     // Update Icon - first child is icon container
                     const iconContainer = shareBtn.querySelector("div");
                     if (iconContainer) {
@@ -2600,6 +1882,11 @@ export function createConvaiWidget(container, options) {
         });
         eventSubscriptions.register((listener) => client.on("messagesChange", listener), () => {
             updateMessageList();
+            // Call onMessage callback if provided
+            if (onMessage && client.chatMessages.length > 0) {
+                const lastMessage = client.chatMessages[client.chatMessages.length - 1];
+                onMessage(lastMessage);
+            }
         });
         // Bot ready listener - updates UI when bot becomes ready
         eventSubscriptions.register((listener) => client.on("botReady", listener), () => {
@@ -2609,13 +1896,8 @@ export function createConvaiWidget(container, options) {
         eventSubscriptions.register((listener) => client.on("connect", listener), () => {
             hasConnectedBefore = true;
             // Initialize audio renderer on connection
-            // NOTE: the audio elements live under rootElement, so playback ends if
-            // the host *removes or re-parents* its mount container mid-call. Merely
-            // hiding it (display: none / visibility: hidden) does NOT stop
-            // HTMLMediaElement playback in any browser — an earlier version of this
-            // comment claimed otherwise and was wrong.
             if (client.room && !audioRenderer) {
-                audioRenderer = new AudioRenderer(client.room, { container: rootElement });
+                audioRenderer = new AudioRenderer(client.room);
             }
             // Fetch character info
             fetchCharacterInfo();
@@ -2636,127 +1918,25 @@ export function createConvaiWidget(container, options) {
                 onDisconnect();
             }
         });
-        // `message` carries the row actually updated. That can differ from the
-        // list tail when correlated v2 streams interleave, which is why onMessage
-        // no longer reads the last element of chatMessages.
-        eventSubscriptions.register((listener) => client.on("message", listener), (message) => {
-            const row = message;
-            if (onMessage && row) {
-                onMessage(row);
-            }
-        });
-        // Screen share state change listener
-        eventSubscriptions.register((listener) => client.screenShareControls.on("screenShareStateChange", listener), (screenShareState) => {
-            if (screenShareState.isScreenShareActive !== undefined) {
-                const isSharing = screenShareState.isScreenShareActive;
-                const shareBtn = document.getElementById("convai-settings-share-btn");
-                if (shareBtn) {
-                    const isActive = isSharing;
-                    shareBtn.style.backgroundColor = isActive
-                        ? "rgba(16, 185, 129, 0.15)"
-                        : "transparent";
-                    shareBtn.style.color = isActive
-                        ? "#10b981"
-                        : aeroTheme.colors.text.primary;
-                    // Update Icon - first child is icon container
-                    const iconContainer = shareBtn.querySelector("div");
-                    if (iconContainer) {
-                        iconContainer.innerHTML = "";
-                        const icon = isActive
-                            ? Icons.StopScreenShare("md")
-                            : Icons.ScreenShare("md");
-                        icon.style.width = "18px";
-                        icon.style.height = "18px";
-                        iconContainer.appendChild(icon);
-                    }
-                }
-            }
-        });
     };
     // Initialize
     createDOM();
     setupClientListeners();
-    // Paint the connecting overlay's initial state. updateHeader() (which also
-    // calls updateConnectingOverlay()) is otherwise only reached via a client
-    // event or a successful character-info fetch, so a widget constructed
-    // already connected-but-not-ready would show nothing until one of those
-    // fires without this.
-    updateConnectingOverlay();
     // Set initial button state
     updateSendButton(); // Show voice mode button initially since input is empty
     // Set initial voice mode UI if defaultVoiceMode is true
     if (defaultVoiceMode) {
-        applyVoiceMode(); // synchronous constructor tail; see applyVoiceMode()
+        updateVoiceMode();
     }
     // If already connected, initialize audio renderer and fetch character info
-    // NOTE: same lifetime caveat as the "connect" handler above — the audio
-    // elements are torn down with rootElement if the host detaches it.
     if (client.state.isConnected && client.room) {
-        audioRenderer = new AudioRenderer(client.room, { container: rootElement });
+        audioRenderer = new AudioRenderer(client.room);
         fetchCharacterInfo();
     }
     // Return widget instance
     const widget = {
         element: rootElement,
         client: client,
-        // `isOpen` reports *requested* state, which on a warm client is the same
-        // thing as rendered state: `setIsOpen()` runs synchronously. The one case
-        // where they differ is the first open on a disconnected client, where the
-        // panel is committed only after `connect()` resolves; reporting `false`
-        // for those seconds would tell an embed reconciling its own
-        // convai-open/convai-close events that a widget it just opened is closed.
-        // `pendingOpen` is cleared by every cancellation path, so this never
-        // reports open for a request that was called off.
-        get isOpen() {
-            return isOpen || pendingOpen;
-        },
-        // Drives the exact same path the launcher click does: `handleToggle`
-        // (connect-on-first-open, then `setIsOpen(true)`). Idempotent against an
-        // in-flight open as well as an open panel, so repeat calls never start a
-        // second connect.
-        open: () => {
-            if (isOpen || pendingOpen)
-                return;
-            void handleToggle();
-        },
-        // Drives the same path the header's close button does: `handleClose` ->
-        // `setIsOpen(false)`. Also cancels an open that is still waiting on
-        // `connect()`; a redundant `close()` is a no-op.
-        close: () => {
-            if (!isOpen && !pendingOpen)
-                return;
-            handleClose();
-        },
-        toggle: () => {
-            if (isOpen || pendingOpen) {
-                handleClose();
-            }
-            else {
-                void handleToggle();
-            }
-        },
-        // Pushes a synthetic ChatMessage straight onto `client.chatMessages` and
-        // re-renders via the widget's existing `updateMessageList()`. It never
-        // calls a client send method (e.g. `sendUserTextMessage`), so the
-        // message never reaches the character and is never billed as an LLM
-        // turn. The `local-` id keeps it from colliding with a server-issued id.
-        appendMessage: (message) => {
-            // Shared core path, so React and vanilla insert identically. A
-            // hand-rolled IConvaiClient without it falls back to the old local push.
-            if (typeof client.appendMessage === "function") {
-                client.appendMessage(message);
-            }
-            else {
-                const chatMessage = {
-                    id: `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`,
-                    type: message.sender === "user" ? "user-llm-text" : "bot-llm-text",
-                    content: message.content,
-                    timestamp: new Date().toISOString(),
-                };
-                client.chatMessages.push(chatMessage);
-            }
-            updateMessageList();
-        },
         destroy: () => {
             isDestroyed = true;
             // Cleanup audio renderer
@@ -2765,7 +1945,7 @@ export function createConvaiWidget(container, options) {
                 audioRenderer = null;
             }
             // Remove event listeners
-            morphingContainer.removeEventListener("click", handleLauncherClick);
+            morphingContainer.removeEventListener("click", handleToggle);
             // Remove DOM elements
             if (rootElement.parentElement) {
                 rootElement.remove();