@convai/web-widget 0.1.4 → 0.2.0

package/vanilla.js

@@ -0,0 +1,2512 @@
+import { AudioRenderer } from "@convai/web-sdk/vanilla";
+import { a as injectGlobalStyles, i as injectKeyframes, b as aeroTheme, M as MAX_CARDS_PER_MESSAGE, g as glyph, t as toCssText, p as presentationStyles, P as PREVIEW_TIMEOUT_MS, o as openLightbox } from "./chunks/lightbox-Dxfdw3VU.js";
+import { ConvaiClient, fetchCharacterInfo, parseInlineMarkdown, linkKindForUrl, hoverTitle, contactLabel, compactUrl, resolveLinkPreviewCached, isCardWorthy, faviconFor, siteNameFor, documentBadge, fileNameOf, isMixedContent, describeUrl } from "@convai/web-sdk/core";
+import { freshPublicationGrantOptions } from "@convai/web-sdk/embed";
+const iconSizes = {
+  xs: "12px",
+  sm: "16px",
+  md: "20px",
+  lg: "24px",
+  xl: "32px",
+  "2xl": "40px"
+};
+const secondStripColors = {
+  idle: "#1EB453",
+  connecting: "#f59e0b",
+  connected: "#1EB453",
+  disconnected: "#ef4444",
+  typing: "#8b5cf6",
+  listening: "#3b82f6",
+  processing: "#6366f1"
+};
+function createSVG(size, viewBox, paths, className) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const sizeValue = iconSizes[size];
+  svg.setAttribute("width", sizeValue);
+  svg.setAttribute("height", sizeValue);
+  svg.setAttribute("viewBox", viewBox);
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  if (className) {
+    svg.className.baseVal = className;
+  }
+  paths.forEach((pathData) => {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", pathData);
+    svg.appendChild(path);
+  });
+  return svg;
+}
+function createFilledSVG(size, viewBox, paths, className) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const sizeValue = iconSizes[size];
+  svg.setAttribute("width", sizeValue);
+  svg.setAttribute("height", sizeValue);
+  svg.setAttribute("viewBox", viewBox);
+  svg.setAttribute("fill", "currentColor");
+  if (className) {
+    svg.className.baseVal = className;
+  }
+  paths.forEach((pathConfig) => {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", pathConfig.d);
+    if (pathConfig.fill) {
+      path.setAttribute("fill", pathConfig.fill);
+    }
+    if (pathConfig.transform) {
+      path.setAttribute("transform", pathConfig.transform);
+    }
+    if (pathConfig.stroke) {
+      path.setAttribute("stroke", pathConfig.stroke);
+    }
+    if (pathConfig.strokeWidth) {
+      path.setAttribute("stroke-width", pathConfig.strokeWidth);
+    }
+    if (pathConfig.strokeLinecap) {
+      path.setAttribute("stroke-linecap", pathConfig.strokeLinecap);
+    }
+    if (pathConfig.strokeMiterlimit) {
+      path.setAttribute("stroke-miterlimit", pathConfig.strokeMiterlimit);
+    }
+    svg.appendChild(path);
+  });
+  return svg;
+}
+const Icons = {
+  // Convai Logo - exact copy from React example
+  ConvaiLogo: (size = "md", state = "idle", className) => {
+    return createFilledSVG(
+      size,
+      "0 0 384 384",
+      [
+        // First strip - Main body (always original green)
+        {
+          d: "M0 0 C0.69959839 -0.0065712 1.39919678 -0.0131424 2.11999512 -0.01991272 C4.43522251 -0.03962096 6.75038501 -0.05130455 9.06567383 -0.0612793 C9.85831446 -0.06535482 10.65095509 -0.06943035 11.46761513 -0.07362938 C15.66541914 -0.0944825 19.86319057 -0.10878583 24.06103516 -0.11816406 C28.38410215 -0.12920936 32.70665171 -0.16358924 37.02953625 -0.20333576 C40.36427221 -0.22956171 43.69888619 -0.23786131 47.0337162 -0.24144554 C48.62643224 -0.24629839 50.21914331 -0.2578751 51.81175804 -0.27648354 C69.26930263 -0.46773456 69.26930263 -0.46773456 75.58610535 5.6245575 C80.21645647 10.85588298 81.33540199 14.49016989 81.35986328 21.4206543 C81.36497421 22.14311844 81.37008514 22.86558258 81.37535095 23.60993958 C81.38923214 25.99435754 81.38829113 28.37848592 81.38598633 30.76293945 C81.38987448 32.42436836 81.39420939 34.08579627 81.39897156 35.7472229 C81.40643089 39.22905703 81.40614488 42.71078976 81.40087891 46.19262695 C81.39508893 50.64694813 81.41200506 55.10085286 81.43522358 59.55510521 C81.44998192 62.98670871 81.4508297 66.41821245 81.44771385 69.84984207 C81.44822615 71.49163258 81.45344672 73.1334288 81.46352577 74.77518845 C81.47591195 77.07525124 81.46908575 79.37450987 81.45751953 81.67456055 C81.45814896 82.981539 81.45877838 84.28851746 81.45942688 85.63510132 C80.84254452 91.47371365 78.52732357 95.26249723 74.08520508 98.98950195 C73.40458008 99.57344727 72.72395508 100.15739258 72.02270508 100.7590332 C68.47350615 103.35653161 65.36290965 103.30519544 61.10424805 103.31884766 C59.87221649 103.32588211 58.64018494 103.33291656 57.37081909 103.34016418 C56.7124493 103.34198008 56.05407951 103.34379597 55.37575912 103.34566689 C53.30624131 103.35285669 51.23695729 103.36854441 49.16751099 103.38700867 C43.28366424 103.43934056 37.3999433 103.4873775 31.51586914 103.50292969 C27.91355676 103.5130737 24.3118307 103.54256243 20.70975113 103.5842495 C19.34402042 103.59647838 17.97820656 103.60169572 16.61242294 103.59945107 C8.73090231 103.58969075 1.87263728 103.81383569 -4.91479492 108.17700195 C-7.72384754 111.13052013 -9.15477197 114.52324306 -10.91479492 118.17700195 C-11.28512344 118.93435638 -11.65545197 119.69171082 -12.03700256 120.47201538 C-16.07726993 130.41632989 -15.43823163 140.76281367 -15.37008476 151.32646561 C-15.34801891 154.90096301 -15.35197296 158.47462262 -15.36256409 162.04916382 C-15.38412577 170.92003422 -15.36687668 179.79071265 -15.34106445 188.66156006 C-15.31962039 196.17710783 -15.31776573 203.69211414 -15.34398079 211.20765305 C-15.34831203 214.71647808 -15.32375642 218.22434564 -15.29844666 221.73306274 C-15.30371999 223.89748554 -15.31044419 226.06190545 -15.31884766 228.22631836 C-15.30393784 229.19074356 -15.28902802 230.15516876 -15.27366638 231.14881897 C-15.34508206 238.01141921 -16.9480351 243.5040945 -20.91479492 249.17700195 C-26.0538927 253.49142781 -30.93587496 255.28530317 -37.61843872 255.3309021 C-38.56028519 255.33950256 -39.50213165 255.34810303 -40.47251892 255.35696411 C-41.49906082 255.36122406 -42.52560272 255.36548401 -43.58325195 255.36987305 C-44.66992661 255.37805054 -45.75660126 255.38622803 -46.87620544 255.39465332 C-50.47500054 255.41947905 -54.07375621 255.43601739 -57.67260742 255.45043945 C-58.90313717 255.45576313 -60.13366692 255.46108681 -61.40148544 255.46657181 C-67.24488135 255.49053877 -73.08826109 255.5097802 -78.93169224 255.52259386 C-84.98841103 255.53614167 -91.04475988 255.56242227 -97.10131836 255.60913086 C-103.60933706 255.65850314 -110.11701183 255.68322666 -116.62520981 255.69032669 C-119.10105009 255.69703038 -121.57688297 255.71222923 -124.05261612 255.7362175 C-127.52547148 255.76794397 -130.99700762 255.7678936 -134.4699707 255.76049805 C-135.48436722 255.77690338 -136.49876373 255.79330872 -137.54389954 255.81021118 C-144.58516525 255.74911945 -150.0594436 254.18666177 -155.91479492 250.17700195 C-160.11922437 245.7740819 -162.02935988 241.44006577 -162.06869507 235.39033508 C-162.08159576 233.91218575 -162.08159576 233.91218575 -162.09475708 232.4041748 C-162.09901703 231.32414185 -162.10327698 230.24410889 -162.10766602 229.13134766 C-162.11584351 227.99283859 -162.124021 226.85432953 -162.13244629 225.68132019 C-162.15730395 221.90514656 -162.17381777 218.12901055 -162.18823242 214.3527832 C-162.1935561 213.06367727 -162.19887978 211.77457134 -162.20436478 210.4464016 C-162.22559522 205.02735272 -162.24472449 199.60831609 -162.25598717 194.18923664 C-162.27221051 186.43543753 -162.30535181 178.68214076 -162.36238801 170.92853099 C-162.40584504 164.81123062 -162.42174109 158.6941264 -162.42811966 152.57668114 C-162.43483541 149.9791729 -162.45006568 147.38167207 -162.47401047 144.78426552 C-162.50563862 141.14566586 -162.50570126 137.50833002 -162.49829102 133.86962891 C-162.51469635 132.7997171 -162.53110168 131.7298053 -162.54800415 130.62747192 C-162.49171427 123.86379339 -161.30224231 119.40867493 -156.91479492 114.17700195 C-150.70048633 108.27340879 -145.09496666 107.88810653 -136.89892578 107.9375 C-135.89334625 107.93548584 -134.88776672 107.93347168 -133.85171509 107.93139648 C-131.67026481 107.92785441 -129.48880427 107.92861384 -127.30735588 107.93317223 C-123.84643147 107.93877446 -120.38584111 107.92958995 -116.92494202 107.91596985 C-107.08536336 107.87889048 -97.24589659 107.86026615 -87.40625 107.87158203 C-81.38322548 107.87745814 -75.36066903 107.85904709 -69.33773994 107.82569313 C-67.05060701 107.81777476 -64.76342257 107.81896733 -62.47630119 107.82971764 C-43.45245929 108.09017669 -43.45245929 108.09017669 -26.78979492 99.73950195 C-23.10917107 94.70931602 -22.66695746 89.8832171 -22.67529297 83.76977539 C-22.67327881 83.05344437 -22.67126465 82.33711334 -22.66918945 81.59907532 C-22.66565984 80.05224746 -22.66639133 78.50540513 -22.67096519 76.95858002 C-22.67659236 74.50202502 -22.66734352 72.0459363 -22.65376282 69.5894165 C-22.61678347 62.60801088 -22.59805845 55.62676468 -22.609375 48.64526367 C-22.61525918 44.36517663 -22.59680667 40.08574677 -22.5634861 35.80579376 C-22.55558359 34.18408293 -22.55673851 32.56229947 -22.5675106 30.94060516 C-22.62477994 21.92945939 -22.61028477 13.70058716 -16.91479492 6.17700195 C-11.68775031 1.25109893 -7.03157131 0.05467437 0 0 Z",
+          fill: "#1EB453",
+          transform: "translate(275.914794921875,92.822998046875)"
+        },
+        // Second strip - Accent (dynamic colors based on state)
+        {
+          d: "M0 0 C0.70949799 -0.0065712 1.41899597 -0.0131424 2.1499939 -0.01991272 C4.49224974 -0.03958252 6.83444162 -0.05129463 9.17675781 -0.0612793 C9.97951393 -0.06535482 10.78227005 -0.06943035 11.60935211 -0.07362938 C15.85903157 -0.09446397 20.10867901 -0.10877652 24.35839844 -0.11816406 C28.73412049 -0.12921848 33.10933265 -0.16361435 37.48487473 -0.20333576 C40.86164252 -0.22955602 44.23828982 -0.2378607 47.61515045 -0.24144554 C49.22740367 -0.24629814 50.83965199 -0.25787412 52.45180511 -0.27648354 C61.87754315 -0.37851798 69.22600258 -0.40722527 76.90332031 5.81762695 C77.34933594 6.3487207 77.79535156 6.87981445 78.25488281 7.42700195 C78.94710937 8.20817383 78.94710937 8.20817383 79.65332031 9.00512695 C84.02596265 16.74776753 83.1900497 25.91727112 83.18066406 34.5168457 C83.18455855 36.00842913 83.18889475 37.50001147 83.19364929 38.99159241 C83.20108066 42.10738735 83.20084254 45.22306892 83.19555664 48.33886719 C83.189763 52.31076588 83.20670518 56.28219809 83.22990131 60.25401974 C83.24470727 63.33145309 83.24550113 66.40877581 83.24239159 69.48623848 C83.24290125 70.94971198 83.24807164 72.41319226 83.25820351 73.87663078 C83.37438765 93.0006229 83.37438765 93.0006229 77.12988281 100.05200195 C76.68128906 100.58567383 76.23269531 101.1193457 75.77050781 101.66918945 C70.71771348 105.69889733 65.71373184 106.5516213 59.38745117 106.56176758 C58.67430252 106.56714035 57.96115387 106.57251312 57.22639465 106.57804871 C55.69051241 106.58777157 54.15457559 106.5907876 52.6186657 106.58769226 C50.18403577 106.58318589 47.75012185 106.59729184 45.31556702 106.61608887 C39.27289347 106.65895188 33.23023785 106.67011114 27.18743896 106.68231201 C22.07081894 106.69385979 16.95452773 106.71746947 11.83804512 106.75700378 C9.4460817 106.7705322 7.05456878 106.76641182 4.6625824 106.76159668 C3.1893558 106.77094038 1.71613413 106.78110998 0.24291992 106.79223633 C-1.03724503 106.79429077 -2.31740997 106.79634521 -3.6363678 106.79846191 C-7.41637293 107.20919275 -9.82064532 108.34953123 -13.12011719 110.17700195 C-13.78011719 110.17700195 -14.44011719 110.17700195 -15.12011719 110.17700195 C-17.52280099 115.83889015 -17.41598579 121.16057712 -17.42871094 127.20043945 C-17.45386958 129.37752548 -17.47926763 131.55460875 -17.50488281 133.73168945 C-17.53360338 137.14379163 -17.55763834 140.55584604 -17.57641602 143.96801758 C-17.59814672 147.27490607 -17.63758849 150.58124339 -17.67871094 153.88793945 C-17.67882675 154.89964203 -17.67894257 155.9113446 -17.67906189 156.95370483 C-17.7841159 164.52274898 -19.03497091 169.98795471 -23.24511719 176.42700195 C-29.45623238 182.36806866 -36.31490332 183.78705333 -44.68652344 183.6730957 C-46.00401833 183.67527855 -46.00401833 183.67527855 -47.34812927 183.67750549 C-49.19102319 183.67585714 -51.03393241 183.66441631 -52.87670898 183.64355469 C-55.67914918 183.61453786 -58.47969965 183.62298099 -61.28222656 183.63598633 C-63.08366794 183.62974909 -64.88510341 183.62135826 -66.68652344 183.6105957 C-67.51382462 183.61353134 -68.34112579 183.61646698 -69.1934967 183.61949158 C-75.59165864 183.51691869 -81.40132888 182.53204156 -86.39746094 178.2043457 C-86.9453125 177.51469727 -87.49316406 176.82504883 -88.05761719 176.11450195 C-88.62351562 175.42227539 -89.18941406 174.73004883 -89.77246094 174.0168457 C-91.95579877 171.03611492 -92.25725067 169.22772898 -92.31298828 165.57885742 C-92.32905121 164.62381317 -92.34511414 163.66876892 -92.36166382 162.68478394 C-92.40618833 158.30003565 -92.44720831 153.91543939 -92.47021484 149.53051758 C-92.48674024 147.22214655 -92.51398466 144.91382596 -92.55224609 142.60571289 C-92.60721123 139.27243575 -92.62892302 135.94035974 -92.64355469 132.60668945 C-92.66622406 131.58243866 -92.68889343 130.55818787 -92.71224976 129.50289917 C-92.69275809 122.84191599 -91.55490715 118.27254494 -87.12011719 113.17700195 C-82.85713484 109.85187572 -79.42315905 108.06794719 -74.01928711 108.01928711 C-73.19800827 108.00902496 -72.37672943 107.99876282 -71.53056335 107.9881897 C-70.64617081 107.98088837 -69.76177826 107.97358704 -68.85058594 107.96606445 C-66.97362414 107.93799282 -65.09667113 107.90932834 -63.21972656 107.88012695 C-60.26391881 107.83890024 -57.30827464 107.80200782 -54.35229492 107.77563477 C-51.49721474 107.74795955 -48.64287792 107.70208605 -45.78808594 107.65356445 C-44.47060616 107.64868515 -44.47060616 107.64868515 -43.12651062 107.64370728 C-38.07403193 107.54295109 -34.47561603 107.02250373 -30.12011719 104.17700195 C-28.38692337 101.61731491 -28.38692337 101.61731491 -27.30761719 98.67700195 C-26.90929687 97.71793945 -26.51097656 96.75887695 -26.10058594 95.77075195 C-24.41267145 91.30551203 -23.99587525 87.9866657 -23.99414062 83.20214844 C-23.99227249 82.49600906 -23.99040436 81.78986969 -23.98847961 81.06233215 C-23.9844771 79.52854718 -23.98240091 77.99475626 -23.98201752 76.46096611 C-23.97859338 73.18930997 -23.95721325 69.91785101 -23.93678665 66.64626408 C-23.89884548 60.55842138 -23.86749302 54.47078699 -23.86962891 48.3828125 C-23.87042015 44.14504806 -23.84687404 39.90800348 -23.80774689 35.67042732 C-23.79734392 34.06268623 -23.79572049 32.45486145 -23.80339813 30.84710503 C-23.84202858 21.8556044 -23.77030332 13.69524181 -18.12011719 6.17700195 C-12.50415323 0.77468343 -7.52615394 0.05781024 0 0 Z",
+          fill: secondStripColors[state],
+          transform: "translate(92.1201171875,53.822998046875)"
+        },
+        // Additional detail paths
+        {
+          d: "M0 0 C0.66 0.33 1.32 0.66 2 1 C0.90033225 2.29549899 -0.20491801 3.58626071 -1.3125 4.875 C-1.92738281 5.59429687 -2.54226563 6.31359375 -3.17578125 7.0546875 C-5 9 -5 9 -8 11 C-6.60366572 6.55711819 -4.39598172 4.13475236 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z",
+          fill: "currentColor",
+          transform: "translate(264,95)"
+        },
+        {
+          d: "M0 0 C0.66 0.33 1.32 0.66 2 1 C-0.64 3.64 -3.28 6.28 -6 9 C-6 6 -6 6 -3.5625 3.375 C-2.716875 2.59125 -1.87125 1.8075 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z",
+          fill: "currentColor",
+          transform: "translate(79,56)"
+        }
+      ],
+      className
+    );
+  },
+  // ChevronDown - from Feather Icons (react-icons/fi)
+  ChevronDown: (size = "md", className) => {
+    return createSVG(size, "0 0 24 24", ["M6 9l6 6 6-6"], className);
+  },
+  // Close - IoClose from react-icons/io5
+  Close: (size = "md", className) => {
+    return createSVG(size, "0 0 24 24", ["M18 6L6 18M6 6l12 12"], className);
+  },
+  // Send - FiSend from react-icons/fi
+  Send: (size = "md", className) => {
+    return createSVG(size, "0 0 24 24", ["M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"], className);
+  },
+  // Microphone - FiMic from react-icons/fi
+  Mic: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      [
+        "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z",
+        "M19 10v2a7 7 0 0 1-14 0v-2",
+        "M12 19v4M8 23h8"
+      ],
+      className
+    );
+  },
+  // Waveform - PiWaveform from react-icons/pi (Phosphor). The previous
+  // version was a hand-drawn 6-bar stroke icon on a 24x24 grid; the real
+  // PiWaveform is a single filled path with 5 bars on Phosphor's 256x256
+  // grid. Source: node_modules/react-icons/pi/index.js, PiWaveform.
+  Waveform: (size = "md", className) => {
+    return createFilledSVG(
+      size,
+      "0 0 256 256",
+      [
+        {
+          d: "M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z"
+        }
+      ],
+      className
+    );
+  },
+  // Phone Off - FiPhoneOff from react-icons/fi
+  PhoneOff: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      [
+        "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91",
+        "M23 1L1 23"
+      ],
+      className
+    );
+  },
+  // Video Camera - IoVideocam from react-icons/io5
+  Video: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      ["M23 7l-7 5 7 5V7zM16 5H2C.9 5 0 5.9 0 7v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"],
+      className
+    );
+  },
+  // Video Camera Off - IoVideocamOff from react-icons/io5
+  VideoOff: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      [
+        "M1 1l22 22M16 16v1a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2h2m5.66 0H14a2 2 0 012 2v3.34l1 1L23 7v10"
+      ],
+      className
+    );
+  },
+  // Volume Mute - IoVolumeMute from react-icons/io5 (Ionicons). The previous
+  // version was a hand-drawn Feather-style "volume-x" glyph on a 24x24 grid;
+  // the real IoVolumeMute lives on Ionicons' 512x512 grid and mixes two
+  // filled paths with one stroked diagonal slash. Source:
+  // node_modules/react-icons/io5/index.js, IoVolumeMute.
+  VolumeMute: (size = "md", className) => {
+    return createFilledSVG(
+      size,
+      "0 0 512 512",
+      [
+        {
+          d: "M416 432 64 80",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "32",
+          strokeLinecap: "round",
+          strokeMiterlimit: "10"
+        },
+        {
+          d: "M243.33 98.86a23.89 23.89 0 0 0-25.55 1.82l-.66.51-28.52 23.35a8 8 0 0 0-.59 11.85l54.33 54.33a8 8 0 0 0 13.66-5.66v-64.49a24.51 24.51 0 0 0-12.67-21.71zm8 236.43L96.69 180.69A16 16 0 0 0 85.38 176H56a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h69.76l92 75.31a23.9 23.9 0 0 0 25.87 1.69A24.51 24.51 0 0 0 256 391.45v-44.86a16 16 0 0 0-4.67-11.3zM352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 1 0-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 0 0 2.32 6.25l14.36 14.36a8 8 0 0 0 13.55-4.31A146 146 0 0 0 352 256zm64 0c0-51.18-13.08-83.89-34.18-120.06a16 16 0 0 0-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 0 0 1.9 8.26L389 337.4a8 8 0 0 0 13.13-2.79C411 311.76 416 287.26 416 256z"
+        },
+        {
+          d: "M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 1 0-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 0 0 1.59 9l11.92 11.92a8 8 0 0 0 12.92-2.16C471.6 344.9 480 305 480 256z"
+        }
+      ],
+      className
+    );
+  },
+  // Volume High - IoVolumeHigh from react-icons/io5 (Ionicons). Same
+  // grid/source mismatch as VolumeMute above: the previous version was a
+  // hand-drawn 24x24 Feather-style "volume-2" glyph. The real IoVolumeHigh
+  // is three filled paths on a 512x512 grid, no stroke. Source:
+  // node_modules/react-icons/io5/index.js, IoVolumeHigh.
+  VolumeHigh: (size = "md", className) => {
+    return createFilledSVG(
+      size,
+      "0 0 512 512",
+      [
+        {
+          d: "M232 416a23.88 23.88 0 0 1-14.2-4.68 8.27 8.27 0 0 1-.66-.51L125.76 336H56a24 24 0 0 1-24-24V200a24 24 0 0 1 24-24h69.75l91.37-74.81a8.27 8.27 0 0 1 .66-.51A24 24 0 0 1 256 120v272a24 24 0 0 1-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 0 1-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0 1 28.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 0 1 320 336z"
+        },
+        {
+          d: "M368 384a16 16 0 0 1-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0 1 27.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 0 1-13.87 8z"
+        },
+        {
+          d: "M416 432a16 16 0 0 1-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1 1 27-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 0 1 416 432z"
+        }
+      ],
+      className
+    );
+  },
+  // More Vertical - FiMoreVertical from react-icons/fi
+  MoreVertical: (size = "md", className) => {
+    const svg = createSVG(size, "0 0 24 24", [], className);
+    for (let cy of [12, 5, 19]) {
+      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      circle.setAttribute("cx", "12");
+      circle.setAttribute("cy", cy.toString());
+      circle.setAttribute("r", "1");
+      circle.setAttribute("fill", "currentColor");
+      svg.appendChild(circle);
+    }
+    return svg;
+  },
+  // Screen Share - MdScreenShare from react-icons/md
+  ScreenShare: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      [
+        "M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.11-.9-2-2-2H4c-1.11 0-2 .89-2 2v10c0 1.1.89 2 2 2H0v2h24v-2h-4zM13 14.47v-2.19c-2.78 0-4.61.85-6 2.72.56-2.67 2.11-5.33 6-5.87V7l4 3.73-4 3.74z"
+      ],
+      className
+    );
+  },
+  // Stop Screen Share - MdStopScreenShare from react-icons/md
+  StopScreenShare: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      [
+        "M21.22 18.02l2 2H24v-2h-2.78zm-1.13-1.13l1.54 1.54c.15-.34.24-.72.24-1.12L21.88 7c0-1.11-.9-2-2-2H7.8l5.88 5.88L13 12 6.97 6.97 2.39 2.39 1.11 3.67l.8.8c-.01.01-.01.02-.01.02L2 17.33c0 1.11.89 2 1.99 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 2.39zM7 15.13c.96-1.29 2.13-2.08 3.67-2.46l3.46 3.46H7v-1z"
+      ],
+      className
+    );
+  },
+  // Redo/Refresh - LiaRedoAltSolid from react-icons/lia
+  Redo: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      ["M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0118.8-4.3M22 12.5a10 10 0 01-18.8 4.2"],
+      className
+    );
+  },
+  // Drag Indicator - MdDragIndicator from react-icons/md
+  DragIndicator: (size = "md", className) => {
+    const svg = createFilledSVG(
+      size,
+      "0 0 24 24",
+      [
+        { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }
+      ],
+      className
+    );
+    svg.removeAttribute("stroke");
+    svg.removeAttribute("stroke-width");
+    return svg;
+  },
+  // User - FaUser from react-icons/fa
+  User: (size = "md", className) => {
+    return createSVG(
+      size,
+      "0 0 24 24",
+      ["M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", "M12 11a4 4 0 100-8 4 4 0 000 8z"],
+      className
+    );
+  }
+};
+class WidgetEventSubscriptions {
+  constructor(isDestroyed) {
+    this.isDestroyed = isDestroyed;
+    this.unsubscribes = [];
+  }
+  register(subscribe, listener) {
+    if (this.isDestroyed()) return;
+    const unsubscribe = subscribe((...args) => {
+      if (!this.isDestroyed()) {
+        listener(...args);
+      }
+    });
+    if (typeof unsubscribe !== "function") return;
+    if (this.isDestroyed()) {
+      unsubscribe();
+      return;
+    }
+    this.unsubscribes.push(unsubscribe);
+  }
+  unsubscribeAll() {
+    for (const unsubscribe of this.unsubscribes.splice(0)) {
+      unsubscribe();
+    }
+  }
+}
+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;"
+};
+const PANEL_W_PX = 400;
+const PANEL_H_PX = 600;
+const PANEL_MAX_W = `calc(100dvw - ${PLACEMENT_INSET_PX * 2}px)`;
+const PANEL_MAX_H = `calc(100dvh - ${PLACEMENT_INSET_PX * 2}px)`;
+const MIC_PERMISSION_ERROR_CODE = "mic-permission";
+function isMicPermissionDenial(error) {
+  const name = error == null ? void 0 : error.name;
+  return name === "NotAllowedError" || name === "PermissionDeniedError";
+}
+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;
+}
+function reportMicFailure(client, logLabel, error) {
+  var _a;
+  console.error(logLabel, error);
+  const payload = isMicPermissionDenial(error) ? toMicPermissionError(error) : error;
+  (_a = client.emit) == null ? void 0 : _a.call(client, "error", payload);
+}
+function createConvaiWidget(container, options) {
+  var _a;
+  const styleTarget = (_a = options.styleTarget) != null ? _a : container.getRootNode() instanceof ShadowRoot ? container.getRootNode() : document;
+  const client = options.convaiClient || (() => {
+    var _a2, _b, _c;
+    const hasAuth = Boolean(options.apiKey || options.authToken);
+    if (!hasAuth || !options.characterId) {
+      throw new Error(
+        "Either convaiClient or (apiKey or authToken) and characterId must be provided"
+      );
+    }
+    return new ConvaiClient({
+      apiKey: (options == null ? void 0 : options.apiKey) || void 0,
+      authToken: (options == null ? void 0 : options.authToken) || void 0,
+      characterId: options.characterId,
+      enableVideo: (_a2 = options.enableVideo) != null ? _a2 : false,
+      startWithVideoOn: (_b = options.startWithVideoOn) != null ? _b : false,
+      enableLipsync: (_c = options.enableLipsync) != null ? _c : false,
+      enableEmotion: options.enableEmotion,
+      blendshapeConfig: options.blendshapeConfig
+    });
+  })();
+  const {
+    showVideo = true,
+    showScreenShare = true,
+    defaultVoiceMode = true,
+    requestPublicationGrant,
+    publishedChatConnectOptions,
+    publishedChatDescriptor,
+    onConnect,
+    onDisconnect,
+    onMessage
+  } = options;
+  const placement = options.placement && options.placement in PLACEMENT_CSS ? options.placement : "bottom-right";
+  injectGlobalStyles(styleTarget);
+  injectKeyframes(styleTarget);
+  let isOpen = false;
+  let isSettingsOpen = false;
+  let isVoiceMode = defaultVoiceMode && !requestPublicationGrant && client.connectionType !== "text";
+  let isMuted = false;
+  let isVideoVisible = false;
+  let inputValue = "";
+  let characterName = (publishedChatDescriptor == null ? void 0 : publishedChatDescriptor.display_name) || "Character";
+  let characterImage = (publishedChatDescriptor == null ? void 0 : publishedChatDescriptor.image_url) || "";
+  let audioRenderer = null;
+  let hasEnteredDefaultVoiceMode = false;
+  let hasConnectedBefore = false;
+  let pendingOpen = false;
+  let isDestroyed = false;
+  const eventSubscriptions = new WidgetEventSubscriptions(() => isDestroyed);
+  let rootElement;
+  let morphingContainer;
+  let buttonContent;
+  let chatContent;
+  let headerElement;
+  let contentElement;
+  let footerElement;
+  let inputElement;
+  let messageListElement;
+  let settingsTray;
+  let floatingVideo;
+  let voiceModeOverlay;
+  let connectingOverlay;
+  const refs = {};
+  let audioContext = null;
+  let analyzer = null;
+  let dataArray = null;
+  let rafId = null;
+  let source = null;
+  const fetchCharacterInfo$1 = async () => {
+    var _a2, _b;
+    if (publishedChatDescriptor) return;
+    const credential = (_a2 = client.authToken) != null ? _a2 : client.apiKey;
+    if (!credential || !client.characterId) return;
+    try {
+      const info = await fetchCharacterInfo({
+        characterId: client.characterId,
+        apiKey: credential,
+        authToken: client.authToken,
+        baseUrl: client.characterInfoUrl
+      });
+      characterName = info.name;
+      characterImage = (_b = info.image) != null ? _b : "";
+      updateHeader();
+    } catch (error) {
+      console.error("Failed to fetch character info:", error);
+    }
+  };
+  const createDOM = () => {
+    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});
+    `;
+    morphingContainer = document.createElement("div");
+    morphingContainer.setAttribute("part", "launcher");
+    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});
+      backdrop-filter: ${aeroTheme.glass.backdrop};
+      border: ${aeroTheme.glass.border};
+      border-radius: 50%;
+      box-shadow: var(--convai-shadow, ${aeroTheme.shadows.glass});
+      transition: all 0.3s ease-in-out;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    `;
+    buttonContent = document.createElement("div");
+    buttonContent.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.3s, transform 0.3s;
+      opacity: 1;
+      transform: scale(1);
+    `;
+    const convaiLogo = Icons.ConvaiLogo("xl", "idle");
+    convaiLogo.style.color = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
+    buttonContent.appendChild(convaiLogo);
+    chatContent = document.createElement("div");
+    chatContent.setAttribute("part", "panel");
+    chatContent.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      opacity: 0;
+      transform: scale(0.8);
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+    `;
+    voiceModeOverlay = createVoiceModeOverlay();
+    chatContent.appendChild(voiceModeOverlay);
+    headerElement = createHeader();
+    contentElement = document.createElement("div");
+    contentElement.style.cssText = `
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      background: transparent;
+      position: relative;
+    `;
+    messageListElement = createMessageList();
+    contentElement.appendChild(messageListElement);
+    connectingOverlay = createConnectingOverlay();
+    contentElement.appendChild(connectingOverlay);
+    footerElement = createFooter();
+    chatContent.appendChild(headerElement);
+    chatContent.appendChild(contentElement);
+    chatContent.appendChild(footerElement);
+    morphingContainer.appendChild(buttonContent);
+    morphingContainer.appendChild(chatContent);
+    rootElement.appendChild(morphingContainer);
+    settingsTray = createSettingsTray();
+    rootElement.appendChild(settingsTray);
+    floatingVideo = createFloatingVideo();
+    container.appendChild(floatingVideo);
+    container.appendChild(rootElement);
+    morphingContainer.addEventListener("click", handleLauncherClick);
+  };
+  const createVoiceModeOverlay = () => {
+    const overlay = document.createElement("div");
+    overlay.style.cssText = `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      padding: 16px;
+      z-index: 10;
+      pointer-events: auto;
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 32px;
+    `;
+    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 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;
+    `;
+    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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    refs.voiceModeAvatarClip = avatarClip;
+    avatarStack.append(layer1, layer2, avatarClip);
+    avatarWrap.appendChild(avatarStack);
+    overlay.appendChild(avatarWrap);
+    const canvas = document.createElement("canvas");
+    canvas.className = "convai-voice-wave";
+    canvas.style.cssText = `width: 250px; height: 80px;`;
+    refs.voiceModeCanvas = canvas;
+    overlay.appendChild(canvas);
+    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;
+    `;
+    statusTitle.textContent = "Voice Mode";
+    const statusSubtitle = document.createElement("div");
+    statusSubtitle.id = "voice-mode-subtitle";
+    refs.voiceModeSubtitle = statusSubtitle;
+    statusSubtitle.style.cssText = `
+      font-size: 13px;
+      color: ${aeroTheme.colors.text.secondary};
+    `;
+    statusSubtitle.textContent = "Tap microphone to talk";
+    statusContainer.append(statusTitle, statusSubtitle);
+    overlay.appendChild(statusContainer);
+    return overlay;
+  };
+  const updateVoiceModeAvatar = () => {
+    var _a2;
+    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 = ((_a2 = characterName[0]) == null ? void 0 : _a2.toUpperCase()) || "C";
+    clip.appendChild(letter);
+  };
+  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;
+    `;
+    injectKeyframes(styleTarget);
+    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");
+    logo.style.color = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
+    spinWrapper.appendChild(logo);
+    overlay.appendChild(spinWrapper);
+    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;
+  };
+  const updateConnectingOverlay = () => {
+    if (!connectingOverlay) return;
+    const label = refs.connectingLabel;
+    if (label) {
+      label.textContent = `Connecting to ${characterName}...`;
+    }
+    const shouldShow = (client.state.isConnected || client.state.isConnecting) && !client.isBotReady;
+    connectingOverlay.style.opacity = shouldShow ? "1" : "0";
+    connectingOverlay.style.pointerEvents = shouldShow ? "auto" : "none";
+  };
+  let audioLevels = Array(40).fill(0);
+  let startTime = 0;
+  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;
+  };
+  const updateAudioBars = () => {
+    if (!voiceModeOverlay) return;
+    const isTalking = client.state.isSpeaking;
+    const isListening = client.state.isListening;
+    const micOpen = !client.audioControls.isAudioMuted;
+    const avatar = refs.voiceModeAvatar;
+    if (avatar) {
+      const wanted = isTalking ? "convaiVoiceBreathe 3s ease-in-out infinite" : "";
+      if (avatar.style.animation !== wanted) avatar.style.animation = wanted;
+    }
+    const title = refs.voiceModeTitle;
+    const subtitle = refs.voiceModeSubtitle;
+    if (title) {
+      title.textContent = isTalking ? `${characterName} Speaking...` : isListening || micOpen ? "Listening..." : "Voice Mode";
+    }
+    if (subtitle) {
+      subtitle.textContent = isListening || micOpen || isTalking ? "Audio active" : "Tap microphone to talk";
+    }
+    if ((isListening || micOpen) && analyzer && dataArray) {
+      analyzer.getByteTimeDomainData(dataArray);
+      let sum = 0;
+      for (let i = 0; i < dataArray.length; i++) {
+        const normalized = (dataArray[i] - 128) / 128;
+        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;
+        const wavePhase = Date.now() / 300 + position * Math.PI * 2;
+        const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85;
+        audioLevels[i] = volume * waveVariation;
+      }
+    } else {
+      for (let i = 0; i < audioLevels.length; i++) audioLevels[i] = 0;
+    }
+    drawWaves();
+    rafId = requestAnimationFrame(updateAudioBars);
+  };
+  const startAudioAnalysis = async () => {
+    try {
+      if (!audioContext) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      }
+      if (audioContext.state === "suspended") {
+        await audioContext.resume();
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      analyzer = audioContext.createAnalyser();
+      analyzer.fftSize = 256;
+      analyzer.smoothingTimeConstant = 0.7;
+      source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyzer);
+      dataArray = new Uint8Array(analyzer.fftSize);
+      updateAudioBars();
+    } catch (e) {
+      reportMicFailure(client, "Audio analysis setup failed:", e);
+    }
+  };
+  const stopAudioAnalysis = () => {
+    if (rafId) cancelAnimationFrame(rafId);
+    if (source) {
+      source.disconnect();
+      source.mediaStream.getTracks().forEach((t) => t.stop());
+      source = null;
+    }
+  };
+  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;
+      border-bottom: 1px solid ${aeroTheme.colors.neutral[200]};
+      background: var(--convai-panel-bg, white);
+      position: relative;
+    `;
+    const closeButton = document.createElement("button");
+    const chevronIcon = Icons.ChevronDown("md");
+    closeButton.appendChild(chevronIcon);
+    closeButton.style.cssText = `
+      font-size: 20px;
+      color: ${aeroTheme.colors.text.secondary};
+      cursor: pointer;
+      padding: 4px;
+      transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
+    `;
+    closeButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      handleClose();
+    });
+    const titleSection = document.createElement("div");
+    titleSection.style.cssText = `
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: ${aeroTheme.typography.fontSize.base};
+      font-weight: ${aeroTheme.typography.fontWeight.semibold};
+      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+    `;
+    titleSection.id = "convai-widget-title";
+    refs.widgetTitle = titleSection;
+    const settingsButton = document.createElement("button");
+    const moreIcon = Icons.MoreVertical("md");
+    settingsButton.appendChild(moreIcon);
+    settingsButton.style.cssText = `
+      font-size: 24px;
+      color: ${aeroTheme.colors.text.secondary};
+      cursor: pointer;
+      padding: 4px;
+      transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
+      margin-left: auto;
+    `;
+    settingsButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      handleSettingsToggle();
+    });
+    header.appendChild(closeButton);
+    header.appendChild(titleSection);
+    header.appendChild(settingsButton);
+    return header;
+  };
+  const updateHeader = () => {
+    const titleSection = refs.widgetTitle;
+    if (!titleSection) return;
+    titleSection.innerHTML = "";
+    if (characterImage) {
+      const img = document.createElement("img");
+      img.src = characterImage;
+      img.alt = characterName;
+      img.style.cssText = `
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1.5px solid ${getBotStatusColor().color};
+        box-shadow: 0 0 6px ${getBotStatusColor().color}40;
+        transition: all 0.3s ease;
+      `;
+      titleSection.appendChild(img);
+    }
+    const nameSpan = document.createElement("span");
+    nameSpan.textContent = characterName;
+    titleSection.appendChild(nameSpan);
+    const muteButton = document.createElement("button");
+    muteButton.innerHTML = "";
+    const volumeIcon = isMuted ? Icons.VolumeMute("sm") : Icons.VolumeHigh("sm");
+    volumeIcon.style.color = isMuted ? "#919EABA6" : "#0E7360";
+    muteButton.appendChild(volumeIcon);
+    muteButton.style.cssText = `
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      width: auto;
+      height: auto;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      margin-left: 8px;
+      outline: none;
+      transition: transform 0.1s ease-out;
+    `;
+    muteButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      handleToggleMute();
+    });
+    muteButton.addEventListener("mouseenter", () => {
+      muteButton.style.transform = "scale(1.1)";
+    });
+    muteButton.addEventListener("mouseleave", () => {
+      muteButton.style.transform = "scale(1)";
+    });
+    titleSection.appendChild(muteButton);
+    if (isVoiceMode) {
+      const voiceBadge = document.createElement("span");
+      voiceBadge.textContent = "VOICE";
+      voiceBadge.style.cssText = `
+        font-size: 10px;
+        color: var(--convai-accent, ${aeroTheme.colors.convai.light});
+        font-weight: 500;
+        margin-left: 8px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background-color: ${aeroTheme.colors.convai.light}20;
+      `;
+      titleSection.appendChild(voiceBadge);
+    }
+    if (client.state.isSpeaking) {
+      const speakingTag = document.createElement("span");
+      speakingTag.textContent = "SPEAKING";
+      speakingTag.style.cssText = `
+        font-size: 10px;
+        color: #10b981;
+        font-weight: 600;
+        margin-left: 8px;
+        padding: 3px 8px;
+        border-radius: 6px;
+        background-color: #10b98120;
+        border: 1px solid #10b98140;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      `;
+      const dot = document.createElement("span");
+      dot.style.cssText = `
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: #10b981;
+        display: inline-block;
+      `;
+      speakingTag.insertBefore(dot, speakingTag.firstChild);
+      titleSection.appendChild(speakingTag);
+    }
+    if (client.state.isListening && !client.state.isSpeaking) {
+      const listeningTag = document.createElement("span");
+      listeningTag.textContent = "LISTENING";
+      listeningTag.style.cssText = `
+        font-size: 10px;
+        color: #3b82f6;
+        font-weight: 600;
+        margin-left: 8px;
+        padding: 3px 8px;
+        border-radius: 6px;
+        background-color: #3b82f620;
+        border: 1px solid #3b82f640;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      `;
+      const dot = document.createElement("span");
+      dot.style.cssText = `
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: #3b82f6;
+        display: inline-block;
+      `;
+      listeningTag.insertBefore(dot, listeningTag.firstChild);
+      titleSection.appendChild(listeningTag);
+    }
+    updateConnectingOverlay();
+    updateVoiceModeAvatar();
+  };
+  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;
+      min-height: 100%;
+    `;
+    return list;
+  };
+  const createFooter = () => {
+    const footer = document.createElement("div");
+    footer.style.cssText = `
+      padding: 16px;
+      border-top: 1px solid ${aeroTheme.colors.neutral[200]};
+      background: var(--convai-panel-bg, white);
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      position: relative;
+    `;
+    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;
+      border-radius: 50%;
+      background: ${aeroTheme.colors.error[500]};
+      color: white;
+      display: none; /* Hidden by default */
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin: 0 auto;
+      border: none;
+    `;
+    voiceExitButton.addEventListener("click", () => {
+      client.sendInterruptMessage();
+      isVoiceMode = false;
+      applyVoiceMode();
+    });
+    footer.appendChild(voiceExitButton);
+    const standardContent = document.createElement("div");
+    standardContent.id = "convai-footer-standard";
+    refs.footerStandard = standardContent;
+    standardContent.style.cssText = `
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      width: 100%;
+    `;
+    const inputContainer = document.createElement("div");
+    inputContainer.style.cssText = `
+      flex: 1;
+      position: relative;
+      display: flex;
+      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;
+      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});
+      font-size: ${aeroTheme.typography.fontSize.sm};
+      transition: ${aeroTheme.transitions.fast};
+      outline: none;
+    `;
+    inputElement.addEventListener("input", (e) => {
+      inputValue = e.target.value;
+      updateSendButton();
+    });
+    inputElement.addEventListener("keypress", (e) => {
+      if (e.key === "Enter") handleSend();
+    });
+    const sendButton = document.createElement("button");
+    sendButton.id = "convai-send-button";
+    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;
+      border-radius: 50%;
+      background: transparent; /* Initial transparent for voice toggle */
+      color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: ${aeroTheme.transitions.fast};
+      border: none;
+    `;
+    sendButton.addEventListener("click", async () => {
+      if (inputValue.length > 0) {
+        handleSend();
+      } else if (!requestPublicationGrant && client.connectionType !== "text") {
+        client.sendInterruptMessage();
+        try {
+          await client.audioControls.unmuteAudio();
+          isVoiceMode = true;
+          await updateVoiceMode();
+        } catch (error) {
+          reportMicFailure(client, "Failed to enable microphone:", error);
+        }
+      }
+    });
+    inputContainer.appendChild(inputElement);
+    inputContainer.appendChild(sendButton);
+    standardContent.appendChild(inputContainer);
+    footer.appendChild(standardContent);
+    return footer;
+  };
+  const createSettingsTray = () => {
+    const tray = document.createElement("div");
+    tray.setAttribute("data-settings-tray", "true");
+    tray.style.cssText = `
+      position: absolute;
+      top: 60px;
+      right: 16px;
+      background: var(--convai-panel-bg, white);
+      border-radius: ${aeroTheme.borderRadius.xl};
+      box-shadow: ${aeroTheme.shadows.xl};
+      padding: 0;
+      display: none;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+      z-index: 9999;
+      min-width: auto;
+      transform-origin: top right;
+      animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      overflow: hidden;
+    `;
+    injectKeyframes(styleTarget);
+    const settingsRow = document.createElement("div");
+    settingsRow.style.cssText = `
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 8px;
+      gap: 4px;
+    `;
+    const createOption = (icon, label, onClick, isActive = false, isDestructive = false) => {
+      const btn = document.createElement("div");
+      btn.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+        border-radius: ${aeroTheme.borderRadius.md};
+        background-color: ${isActive ? "rgba(16, 185, 129, 0.15)" : isDestructive ? "rgba(239, 68, 68, 0.1)" : "transparent"};
+        color: ${isActive ? "#10b981" : isDestructive ? "#ef4444" : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`};
+        transition: ${aeroTheme.transitions.fast};
+        min-width: 50px;
+      `;
+      const iconContainer = document.createElement("div");
+      iconContainer.appendChild(icon);
+      btn.appendChild(iconContainer);
+      const span = document.createElement("span");
+      span.textContent = label;
+      span.style.cssText = `
+        font-size: 10px;
+        font-weight: 500;
+      `;
+      btn.appendChild(span);
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        onClick();
+      });
+      btn.addEventListener("mouseover", () => {
+        btn.style.transform = "scale(1.02)";
+        if (!isActive && !isDestructive) {
+          btn.style.backgroundColor = aeroTheme.colors.neutral[100];
+        }
+      });
+      btn.addEventListener("mouseout", () => {
+        btn.style.transform = "scale(1)";
+        btn.style.backgroundColor = isActive ? "rgba(16, 185, 129, 0.15)" : isDestructive ? "rgba(239, 68, 68, 0.1)" : "transparent";
+      });
+      return btn;
+    };
+    const resetIcon = Icons.Redo("md");
+    resetIcon.style.width = "18px";
+    resetIcon.style.height = "18px";
+    if (!client.isPublishedChatSession || requestPublicationGrant) {
+      settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+    }
+    const connectionType = client.connectionType;
+    if (connectionType === "video" && showVideo) {
+      const videoIcon = isVideoVisible ? Icons.Video("md") : Icons.VideoOff("md");
+      videoIcon.style.width = "18px";
+      videoIcon.style.height = "18px";
+      const videoBtn = createOption(
+        videoIcon,
+        "Video",
+        handleToggleVideo,
+        isVideoVisible
+      );
+      videoBtn.id = "convai-settings-video-btn";
+      refs.settingsVideoBtn = videoBtn;
+      settingsRow.appendChild(videoBtn);
+    }
+    if (connectionType === "video" && showScreenShare) {
+      const isSharing = client.screenShareControls.isScreenShareActive;
+      const shareIcon = isSharing ? Icons.StopScreenShare("md") : Icons.ScreenShare("md");
+      shareIcon.style.width = "18px";
+      shareIcon.style.height = "18px";
+      const shareBtn = createOption(
+        shareIcon,
+        "Screen",
+        handleToggleScreenShare,
+        isSharing
+      );
+      shareBtn.id = "convai-settings-share-btn";
+      refs.settingsShareBtn = shareBtn;
+      settingsRow.appendChild(shareBtn);
+    }
+    const disconnectIcon = document.createElement("span");
+    disconnectIcon.innerHTML = "⏻";
+    disconnectIcon.style.fontSize = "18px";
+    if (!client.isPublishedChatSession || requestPublicationGrant) {
+      settingsRow.appendChild(
+        createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true)
+      );
+    }
+    tray.appendChild(settingsRow);
+    return tray;
+  };
+  const updateSettingsTray = () => {
+    const settingsRow = settingsTray.querySelector("div");
+    if (!settingsRow) return;
+    settingsRow.innerHTML = "";
+    const createOption = (icon, label, onClick, isActive = false, isDestructive = false) => {
+      const btn = document.createElement("div");
+      btn.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+        border-radius: ${aeroTheme.borderRadius.md};
+        background-color: ${isActive ? "rgba(16, 185, 129, 0.15)" : isDestructive ? "rgba(239, 68, 68, 0.1)" : "transparent"};
+        color: ${isActive ? "#10b981" : isDestructive ? "#ef4444" : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`};
+        transition: ${aeroTheme.transitions.fast};
+        min-width: 50px;
+      `;
+      const iconContainer = document.createElement("div");
+      iconContainer.appendChild(icon);
+      btn.appendChild(iconContainer);
+      const span = document.createElement("span");
+      span.textContent = label;
+      span.style.cssText = `
+        font-size: 10px;
+        font-weight: 500;
+      `;
+      btn.appendChild(span);
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        onClick();
+      });
+      btn.addEventListener("mouseover", () => {
+        btn.style.transform = "scale(1.02)";
+        if (!isActive && !isDestructive) {
+          btn.style.backgroundColor = aeroTheme.colors.neutral[100];
+        }
+      });
+      btn.addEventListener("mouseout", () => {
+        btn.style.transform = "scale(1)";
+        btn.style.backgroundColor = isActive ? "rgba(16, 185, 129, 0.15)" : isDestructive ? "rgba(239, 68, 68, 0.1)" : "transparent";
+      });
+      return btn;
+    };
+    const resetIcon = Icons.Redo("md");
+    resetIcon.style.width = "18px";
+    resetIcon.style.height = "18px";
+    if (!client.isPublishedChatSession || requestPublicationGrant) {
+      settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+    }
+    const connectionType = client.connectionType;
+    if (connectionType === "video" && showVideo) {
+      const videoIcon = isVideoVisible ? Icons.Video("md") : Icons.VideoOff("md");
+      videoIcon.style.width = "18px";
+      videoIcon.style.height = "18px";
+      const videoBtn = createOption(
+        videoIcon,
+        "Video",
+        handleToggleVideo,
+        isVideoVisible
+      );
+      videoBtn.id = "convai-settings-video-btn";
+      refs.settingsVideoBtn = videoBtn;
+      settingsRow.appendChild(videoBtn);
+    }
+    if (connectionType === "video" && showScreenShare) {
+      const isSharing = client.screenShareControls.isScreenShareActive;
+      const shareIcon = isSharing ? Icons.StopScreenShare("md") : Icons.ScreenShare("md");
+      shareIcon.style.width = "18px";
+      shareIcon.style.height = "18px";
+      const shareBtn = createOption(
+        shareIcon,
+        "Screen",
+        handleToggleScreenShare,
+        isSharing
+      );
+      shareBtn.id = "convai-settings-share-btn";
+      refs.settingsShareBtn = shareBtn;
+      settingsRow.appendChild(shareBtn);
+    }
+    const disconnectIcon = document.createElement("span");
+    disconnectIcon.innerHTML = "⏻";
+    disconnectIcon.style.fontSize = "18px";
+    if (!client.isPublishedChatSession || requestPublicationGrant) {
+      settingsRow.appendChild(
+        createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true)
+      );
+    }
+  };
+  const createFloatingVideo = () => {
+    const container2 = document.createElement("div");
+    container2.id = "floating-video-container";
+    container2.style.cssText = `
+      position: fixed;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+      width: 320px;
+      border-radius: ${aeroTheme.borderRadius.lg};
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      cursor: grab;
+      display: none;
+      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    `;
+    const wrapper = document.createElement("div");
+    wrapper.style.cssText = `
+      background: rgba(15, 23, 42, 0.95);
+      backdrop-filter: blur(20px);
+      border: 1px solid ${aeroTheme.colors.neutral[700]};
+      border-radius: ${aeroTheme.borderRadius.lg};
+      overflow: hidden;
+    `;
+    const header = document.createElement("div");
+    header.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      background: rgba(0, 0, 0, 0.3);
+      border-bottom: 1px solid ${aeroTheme.colors.neutral[700]};
+    `;
+    const headerLeft = document.createElement("div");
+    headerLeft.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: ${aeroTheme.colors.neutral[300]};
+      font-size: 12px;
+      font-weight: 500;
+    `;
+    const dragIcon = Icons.DragIndicator("sm");
+    dragIcon.style.width = "16px";
+    dragIcon.style.height = "16px";
+    headerLeft.appendChild(dragIcon);
+    const label = document.createElement("span");
+    label.textContent = "Your Camera";
+    headerLeft.appendChild(label);
+    const closeButton = document.createElement("button");
+    closeButton.innerHTML = "";
+    const closeIcon = Icons.Close("md");
+    closeIcon.style.width = "20px";
+    closeIcon.style.height = "20px";
+    closeButton.appendChild(closeIcon);
+    closeButton.style.cssText = `
+      background: transparent;
+      border: none;
+      color: ${aeroTheme.colors.neutral[400]};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      transition: transform 0.1s ease-out;
+    `;
+    closeButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      client.videoControls.disableVideo();
+    });
+    closeButton.addEventListener("mouseenter", () => {
+      closeButton.style.transform = "scale(1.1)";
+    });
+    closeButton.addEventListener("mouseleave", () => {
+      closeButton.style.transform = "scale(1)";
+    });
+    header.appendChild(headerLeft);
+    header.appendChild(closeButton);
+    const videoContainer = document.createElement("div");
+    videoContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      padding-bottom: 75%;
+      background: #000;
+    `;
+    const videoWrapper = document.createElement("div");
+    videoWrapper.id = "floating-video-wrapper";
+    videoWrapper.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    const videoElement = document.createElement("video");
+    videoElement.id = "floating-video-element";
+    videoElement.autoplay = true;
+    videoElement.playsInline = true;
+    videoElement.muted = true;
+    videoElement.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scaleX(-1);
+    `;
+    const cameraOffPlaceholder = document.createElement("div");
+    cameraOffPlaceholder.id = "camera-off-placeholder";
+    cameraOffPlaceholder.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: ${aeroTheme.colors.neutral[400]};
+      gap: 12px;
+      background: #000;
+    `;
+    const cameraOffIcon = Icons.VideoOff("lg");
+    cameraOffIcon.style.width = "48px";
+    cameraOffIcon.style.height = "48px";
+    cameraOffPlaceholder.appendChild(cameraOffIcon);
+    const cameraOffText = document.createElement("span");
+    cameraOffText.textContent = "Camera is off";
+    cameraOffText.style.cssText = `
+      font-size: 14px;
+      text-align: center;
+    `;
+    cameraOffPlaceholder.appendChild(cameraOffText);
+    videoWrapper.appendChild(videoElement);
+    videoWrapper.appendChild(cameraOffPlaceholder);
+    videoContainer.appendChild(videoWrapper);
+    wrapper.appendChild(header);
+    wrapper.appendChild(videoContainer);
+    container2.appendChild(wrapper);
+    let isDragging = false;
+    let startX = 0;
+    let startY = 0;
+    let startLeft = 20;
+    let startTop = 20;
+    const handleMouseDown = (e) => {
+      if (e.target.closest("button")) return;
+      isDragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      const style = window.getComputedStyle(container2);
+      startLeft = parseInt(style.left);
+      startTop = parseInt(style.top);
+      container2.style.cursor = "grabbing";
+      e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - startX;
+      const deltaY = e.clientY - startY;
+      const newLeft = startLeft + deltaX;
+      const newTop = startTop + deltaY;
+      const maxX = window.innerWidth - 320;
+      const maxY = window.innerHeight - 240;
+      const boundedLeft = Math.max(0, Math.min(newLeft, maxX));
+      const boundedTop = Math.max(0, Math.min(newTop, maxY));
+      container2.style.left = `${boundedLeft}px`;
+      container2.style.top = `${boundedTop}px`;
+    };
+    const handleMouseUp = () => {
+      if (isDragging) {
+        isDragging = false;
+        container2.style.cursor = "grab";
+      }
+    };
+    container2.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return container2;
+  };
+  const handleToggle = async () => {
+    if (isDestroyed) return;
+    if (isOpen || pendingOpen) {
+      return;
+    }
+    if (!client.state.isConnected && !client.state.isConnecting) {
+      pendingOpen = true;
+      try {
+        if (requestPublicationGrant || client.isPublishedChatSession) {
+          if (!requestPublicationGrant) {
+            throw new Error(
+              "Published chat widgets require requestPublicationGrant to start a new session"
+            );
+          }
+          if (!client.connectWithPublicationGrant) {
+            throw new Error(
+              "This Convai client does not support published chat connections"
+            );
+          }
+          const launchToken = await requestPublicationGrant();
+          if (isDestroyed) {
+            return;
+          }
+          await client.connectWithPublicationGrant(
+            launchToken,
+            freshPublicationGrantOptions(publishedChatConnectOptions)
+          );
+        } else if (hasConnectedBefore && typeof client.reconnect === "function") {
+          await client.reconnect();
+        } else {
+          await client.connect();
+        }
+        if (isDestroyed) {
+          await client.disconnect();
+          return;
+        }
+        if (isDestroyed) {
+          await client.disconnect();
+          return;
+        }
+        if (!pendingOpen) return;
+        setIsOpen(true);
+      } catch (error) {
+        if (!isDestroyed) {
+          console.error("Failed to connect:", error);
+        }
+      } finally {
+        pendingOpen = false;
+      }
+    } else {
+      setIsOpen(!isOpen);
+    }
+  };
+  const handleLauncherClick = () => {
+    if (pendingOpen) {
+      handleClose();
+      return;
+    }
+    void handleToggle();
+  };
+  const handleClose = () => {
+    pendingOpen = false;
+    setIsOpen(false);
+  };
+  const requiresBotReadyForText = () => Boolean(requestPublicationGrant) || Boolean(client.isPublishedChatSession);
+  const isTextInputReady = () => client.state.isConnected && (!requiresBotReadyForText() || client.isBotReady);
+  const handleSend = () => {
+    if (inputValue.trim() && isTextInputReady()) {
+      client.sendUserTextMessage(inputValue);
+      inputValue = "";
+      inputElement.value = "";
+      updateSendButton();
+    }
+  };
+  const handleToggleMute = () => {
+    isMuted = !isMuted;
+    client.setCharacterMuted(isMuted);
+    updateHeader();
+  };
+  const handleReset = async () => {
+    setIsSettingsOpen(false);
+    try {
+      await client.disconnect();
+      client.resetSession();
+      isMuted = false;
+      isVoiceMode = false;
+      hasEnteredDefaultVoiceMode = false;
+      updateHeader();
+      await updateVoiceMode();
+      updateSendButton();
+    } catch (error) {
+      console.error("Failed to reset:", error);
+    }
+  };
+  const handleDisconnect = async () => {
+    setIsSettingsOpen(false);
+    await client.disconnect();
+    isMuted = false;
+    isVoiceMode = false;
+    hasEnteredDefaultVoiceMode = false;
+    updateHeader();
+    applyVoiceMode();
+    updateSendButton();
+  };
+  const handleToggleVideo = async () => {
+    if (client.connectionType !== "video") return;
+    try {
+      if (isVideoVisible) {
+        await client.videoControls.disableVideo();
+      } else {
+        await client.videoControls.enableVideo();
+      }
+    } catch (e) {
+      console.error("Failed to toggle video:", e);
+    }
+  };
+  const handleToggleScreenShare = async () => {
+    try {
+      await client.screenShareControls.toggleScreenShare();
+    } catch (e) {
+      console.error("Failed to toggle screen share:", e);
+    }
+  };
+  const handleSettingsToggle = () => {
+    if (!isSettingsOpen) {
+      updateSettingsTray();
+    }
+    setIsSettingsOpen(!isSettingsOpen);
+  };
+  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.cursor = "default";
+      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";
+      chatContent.style.opacity = "1";
+      chatContent.style.transform = "scale(1)";
+      chatContent.style.pointerEvents = "auto";
+      if (defaultVoiceMode && !requestPublicationGrant && client.connectionType !== "text" && !hasEnteredDefaultVoiceMode && client.state.isConnected) {
+        setTimeout(async () => {
+          try {
+            await client.audioControls.unmuteAudio();
+            isVoiceMode = true;
+            hasEnteredDefaultVoiceMode = true;
+            await updateVoiceMode();
+          } catch (error) {
+            reportMicFailure(client, "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)";
+      morphingContainer.style.borderRadius = "50%";
+      morphingContainer.style.cursor = "pointer";
+      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";
+      chatContent.style.opacity = "0";
+      chatContent.style.transform = "scale(0.8)";
+      chatContent.style.pointerEvents = "none";
+    }
+  };
+  const setIsSettingsOpen = (open) => {
+    isSettingsOpen = open;
+    settingsTray.style.display = open ? "flex" : "none";
+  };
+  const updateSendButton = () => {
+    const sendButton = refs.sendButton;
+    if (!sendButton) return;
+    sendButton.innerHTML = "";
+    const isPublishedTextChat = requiresBotReadyForText();
+    const textInputReady = isTextInputReady();
+    inputElement.disabled = isPublishedTextChat && !textInputReady;
+    if (inputValue.length > 0 || requestPublicationGrant || client.connectionType === "text") {
+      sendButton.appendChild(Icons.Send("md"));
+      sendButton.style.background = `var(--convai-accent, ${aeroTheme.colors.text.primary})`;
+      sendButton.style.color = "var(--convai-panel-bg, 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";
+      }
+    } else {
+      sendButton.appendChild(Icons.Waveform("md"));
+      sendButton.style.background = "transparent";
+      sendButton.style.color = `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+      sendButton.style.border = `1px solid ${aeroTheme.colors.neutral[300]}`;
+      sendButton.style.opacity = "1";
+      sendButton.disabled = false;
+      sendButton.title = "Voice Mode";
+    }
+  };
+  const updateVideoTrack = () => {
+    if (!floatingVideo || !client.room || !client.room.localParticipant) return;
+    const videoEl = floatingVideo.querySelector(
+      "#floating-video-element"
+    );
+    const placeholder = floatingVideo.querySelector(
+      "#camera-off-placeholder"
+    );
+    if (!videoEl || !placeholder) return;
+    if (isVideoVisible && !isVoiceMode) {
+      const tracks = Array.from(
+        client.room.localParticipant.videoTrackPublications.values()
+      );
+      const videoPub = tracks.find((t) => t.kind === "video");
+      if (videoPub && videoPub.track) {
+        videoPub.track.attach(videoEl);
+        videoEl.style.display = "block";
+        placeholder.style.display = "none";
+      } else {
+        videoEl.style.display = "none";
+        placeholder.style.display = "flex";
+      }
+    } else {
+      videoEl.style.display = "none";
+      placeholder.style.display = "flex";
+    }
+  };
+  const updateVoiceMode = async () => {
+    const standardFooter = refs.footerStandard;
+    const voiceExitBtn = refs.voiceExitBtn;
+    if (isVoiceMode) {
+      if (voiceModeOverlay) voiceModeOverlay.style.display = "flex";
+      if (messageListElement) messageListElement.style.display = "none";
+      if (floatingVideo) floatingVideo.style.display = "none";
+      if (standardFooter) standardFooter.style.display = "none";
+      if (voiceExitBtn) voiceExitBtn.style.display = "flex";
+      if (footerElement) footerElement.style.justifyContent = "center";
+      updateHeader();
+      startTime = Date.now();
+      startAudioAnalysis();
+    } else {
+      if (!client.audioControls.isAudioMuted) {
+        try {
+          await client.audioControls.muteAudio();
+        } catch (error) {
+          reportMicFailure(client, "Failed to mute microphone:", error);
+        }
+      }
+      if (voiceModeOverlay) voiceModeOverlay.style.display = "none";
+      if (isVideoVisible) {
+        if (messageListElement) messageListElement.style.display = "none";
+        if (floatingVideo) floatingVideo.style.display = "block";
+        updateVideoTrack();
+      } else {
+        if (messageListElement) messageListElement.style.display = "flex";
+        if (floatingVideo) floatingVideo.style.display = "none";
+      }
+      if (standardFooter) standardFooter.style.display = "flex";
+      if (voiceExitBtn) voiceExitBtn.style.display = "none";
+      if (footerElement) footerElement.style.justifyContent = "flex-start";
+      updateHeader();
+      stopAudioAnalysis();
+    }
+  };
+  const applyVoiceMode = () => {
+    void updateVoiceMode().catch((error) => {
+      reportMicFailure(client, "Failed to apply voice mode:", error);
+    });
+  };
+  const renderMarkdown = (text, container2, { media = true } = {}) => {
+    if (!text) return;
+    const lines = text.replace(/\\n/g, "\n").split("\n");
+    const budget = { cards: 0 };
+    const make = (tag, part, ...styles) => {
+      const node = document.createElement(tag);
+      node.setAttribute("part", part);
+      node.style.cssText = toCssText(Object.assign({}, ...styles));
+      return node;
+    };
+    const focusRing = (node) => {
+      const base = node.style.cssText;
+      node.addEventListener("focus", () => {
+        if (node.matches(":focus-visible")) node.style.cssText = `${base} ${toCssText(presentationStyles.linkFocus)}`;
+      });
+      node.addEventListener("blur", () => {
+        node.style.cssText = base;
+      });
+    };
+    const anchor = (href, kind, label) => {
+      const a = make("a", "message-link", presentationStyles.link);
+      a.href = href;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      const display = label === href ? compactUrl(label) : label;
+      a.textContent = display;
+      const title = hoverTitle(kind, href, display);
+      if (title) a.title = title;
+      if (kind === "ftp") {
+        const badge = make("span", "message-link-badge", presentationStyles.badge);
+        badge.textContent = "FTP";
+        a.appendChild(badge);
+      }
+      focusRing(a);
+      return a;
+    };
+    const contactChip = (href, kind) => {
+      const a = make("a", "message-contact", presentationStyles.contact);
+      a.href = href;
+      a.title = hoverTitle(kind, href, href);
+      const g = make("span", "message-contact-glyph", presentationStyles.contactGlyph);
+      g.innerHTML = glyph(kind);
+      const t = document.createElement("span");
+      t.textContent = contactLabel(href);
+      a.append(g, t);
+      focusRing(a);
+      return a;
+    };
+    const documentCard = (href) => {
+      let host = "";
+      try {
+        host = new URL(href).host;
+      } catch {
+      }
+      const a = make("a", "message-file-card", presentationStyles.fileCard);
+      a.href = href;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.title = href;
+      const icon = make("span", "message-file-icon", presentationStyles.fileIcon);
+      icon.textContent = documentBadge(href);
+      const body = document.createElement("span");
+      body.style.cssText = toCssText(presentationStyles.fileBody);
+      const name = make("span", "message-file-name", presentationStyles.fileName);
+      name.textContent = fileNameOf(href);
+      const meta = make("span", "message-file-meta", presentationStyles.fileMeta);
+      meta.textContent = `${host} · Opens in a new tab`;
+      body.append(name, meta);
+      a.append(icon, body);
+      focusRing(a);
+      return a;
+    };
+    const siteCard = (href) => {
+      const resolver = options.linkPreviewResolver;
+      const slot = document.createComment("site-card");
+      if (!resolver) return slot;
+      resolveLinkPreviewCached(resolver, href).then((meta) => {
+        if (!isCardWorthy(meta) || !slot.parentNode) return;
+        const a = make("a", "message-site-card", presentationStyles.siteCard);
+        a.href = href;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        const header = document.createElement("span");
+        header.style.cssText = toCssText(presentationStyles.siteHeader);
+        const favicon = faviconFor(meta, href);
+        if (favicon) {
+          const icon = make("img", "message-site-favicon", presentationStyles.siteFavicon);
+          icon.src = favicon;
+          icon.alt = "";
+          icon.addEventListener("error", () => icon.remove());
+          header.appendChild(icon);
+        }
+        const name = make("span", "message-site-name", presentationStyles.siteName);
+        name.textContent = siteNameFor(meta, href);
+        header.appendChild(name);
+        a.appendChild(header);
+        if (meta.title) {
+          const t = make("span", "message-site-title", presentationStyles.siteTitle);
+          t.textContent = meta.title;
+          a.appendChild(t);
+        }
+        if (meta.description) {
+          const d = make("span", "message-site-description", presentationStyles.siteDescription);
+          d.textContent = meta.description;
+          a.appendChild(d);
+        }
+        if (meta.image) {
+          const img = make("img", "message-site-image", presentationStyles.siteImage);
+          img.src = meta.image;
+          img.alt = "";
+          img.loading = "lazy";
+          img.addEventListener("error", () => img.remove());
+          a.appendChild(img);
+        }
+        focusRing(a);
+        slot.replaceWith(a);
+      });
+      return slot;
+    };
+    const unavailable = (src, insecure) => {
+      const dead = make("span", "message-media-unavailable", presentationStyles.unavailable);
+      dead.textContent = `Preview unavailable — ${describeUrl(src)}${insecure ? " (insecure URL)" : ""}`;
+      return dead;
+    };
+    const mediaPreview = (src, alt, kind) => {
+      const frag = document.createDocumentFragment();
+      if (isMixedContent(src)) {
+        frag.appendChild(unavailable(src, true));
+        return frag;
+      }
+      const card = make("span", "message-media-card", presentationStyles.card, kind === "image" ? presentationStyles.cardButton : {});
+      const el = kind === "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 = toCssText(
+        Object.assign({}, presentationStyles.media, kind === "video" ? presentationStyles.videoMedia : {}, { opacity: 0 })
+      );
+      const skeleton = make("span", "message-media-skeleton", presentationStyles.skeleton);
+      skeleton.setAttribute("aria-hidden", "true");
+      skeleton.dataset.convaiSkeleton = "";
+      const caption = make("span", "message-media-caption", presentationStyles.caption);
+      caption.textContent = describeUrl(src);
+      const fail = () => {
+        clearTimeout(timer);
+        card.replaceWith(unavailable(src, false));
+        caption.remove();
+      };
+      const settled = () => {
+        clearTimeout(timer);
+        el.style.opacity = "1";
+        skeleton.remove();
+        if (kind === "image") {
+          const zoom = make("span", "message-media-zoom", presentationStyles.zoom);
+          zoom.innerHTML = glyph("zoom");
+          card.appendChild(zoom);
+        }
+      };
+      const timer = setTimeout(fail, PREVIEW_TIMEOUT_MS);
+      el.addEventListener(kind === "image" ? "load" : "loadedmetadata", settled);
+      el.addEventListener("error", fail);
+      if (kind === "image") {
+        card.setAttribute("role", "button");
+        card.tabIndex = 0;
+        card.setAttribute("aria-label", `Open image: ${fileNameOf(src)}`);
+        const open = () => openLightbox({
+          src,
+          alt,
+          caption: describeUrl(src),
+          href: src,
+          root: styleTarget,
+          returnFocusTo: card
+        });
+        card.addEventListener("click", open);
+        card.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            open();
+          }
+        });
+      }
+      card.append(el, skeleton);
+      frag.append(card, caption);
+      return frag;
+    };
+    const processLine = (line) => {
+      const parts = [];
+      for (const node of parseInlineMarkdown(line)) {
+        switch (node.kind) {
+          case "strong": {
+            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 "blocked": {
+            const blocked = make("span", "message-link-blocked", presentationStyles.blocked);
+            blocked.textContent = node.label;
+            blocked.title = `Link blocked: ${node.href}`;
+            parts.push(blocked);
+            break;
+          }
+          case "image": {
+            if (media && budget.cards < MAX_CARDS_PER_MESSAGE) {
+              budget.cards++;
+              parts.push(mediaPreview(node.src, node.alt, "image"));
+            } else {
+              parts.push(anchor(node.src, "image", node.alt || node.src));
+            }
+            break;
+          }
+          case "link": {
+            const kind = linkKindForUrl(node.href);
+            if (kind === "email" || kind === "phone" || kind === "sms") {
+              parts.push(media ? contactChip(node.href, kind) : anchor(node.href, kind, node.label));
+              break;
+            }
+            parts.push(anchor(node.href, kind, node.label));
+            const wantsSiteCard = media && kind === "web" && !!options.linkPreviewResolver && budget.cards < MAX_CARDS_PER_MESSAGE;
+            if (wantsSiteCard) {
+              budget.cards++;
+              parts.push(siteCard(node.href));
+              break;
+            }
+            const wantsCard = media && (kind === "image" || kind === "video" || kind === "document") && budget.cards < MAX_CARDS_PER_MESSAGE;
+            if (!wantsCard) break;
+            budget.cards++;
+            parts.push(kind === "document" ? documentCard(node.href) : mediaPreview(node.href, node.label, kind));
+            break;
+          }
+          default:
+            parts.push(document.createTextNode(node.text));
+        }
+      }
+      return parts;
+    };
+    lines.forEach((line, lineIndex) => {
+      if (line.trim() === "" && lineIndex > 0) {
+        container2.appendChild(document.createElement("br"));
+        return;
+      }
+      const processed = processLine(line);
+      if (processed.length > 0) processed.forEach((p) => container2.appendChild(p));
+      else container2.appendChild(document.createTextNode(line));
+      if (lineIndex < lines.length - 1) container2.appendChild(document.createElement("br"));
+    });
+  };
+  const updateMessageList = () => {
+    if (!messageListElement) return;
+    const messages = formatMessages();
+    messageListElement.innerHTML = "";
+    if (messages.length === 0) {
+      const emptyState = document.createElement("div");
+      emptyState.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: ${aeroTheme.colors.text.secondary};
+            text-align: center;
+            padding: 32px;
+        `;
+      emptyState.innerHTML = `
+            <p style="font-weight: 500; margin-bottom: 8px;">Start a conversation</p>
+            <p style="font-size: 12px;">Type a message below to begin chatting</p>
+        `;
+      messageListElement.appendChild(emptyState);
+      return;
+    }
+    messages.forEach((msg) => {
+      const messageWrapper = document.createElement("div");
+      messageWrapper.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        max-width: ${msg.isUser ? "70%" : "70%"};
+        margin-left: ${msg.isUser ? "auto" : "0"};
+        width: 100%;
+        isolation: isolate;
+        contain: layout style paint;
+      `;
+      const bubble = document.createElement("div");
+      bubble.setAttribute("part", msg.isUser ? "message message-user" : "message message-bot");
+      if (msg.isUser) {
+        bubble.setAttribute("data-message-type", "user");
+      }
+      const backgroundColor = "rgba(252, 252, 253, 0.95)";
+      bubble.style.cssText = `
+        padding: 12px;
+        border-radius: ${msg.isUser ? "12px 12px 4px 12px" : "12px 12px 12px 4px"};
+        background: ${backgroundColor};
+        background-color: ${backgroundColor};
+        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});
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-text-size-adjust: 100%;
+        isolation: isolate;
+        contain: layout style paint;
+      `;
+      bubble.style.setProperty("background", backgroundColor, "important");
+      bubble.style.setProperty(
+        "background-color",
+        backgroundColor,
+        "important"
+      );
+      if (msg.sender) {
+        const header = document.createElement("div");
+        header.style.cssText = `
+          display: flex;
+          align-items: center;
+          gap: ${aeroTheme.spacing.xs};
+          margin-bottom: ${aeroTheme.spacing.xs};
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+        const logoContainer = document.createElement("div");
+        logoContainer.style.cssText = `
+          width: 16px;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+        if (msg.isUser) {
+          const userIcon = Icons.User("sm");
+          userIcon.style.width = "16px";
+          userIcon.style.height = "16px";
+          userIcon.style.color = aeroTheme.colors.convai.dark;
+          logoContainer.appendChild(userIcon);
+        } else {
+          const botLogo = Icons.ConvaiLogo("sm", "connected");
+          botLogo.style.width = "16px";
+          botLogo.style.height = "16px";
+          botLogo.style.color = "#10b981";
+          logoContainer.appendChild(botLogo);
+        }
+        const nameLabel = document.createElement("span");
+        nameLabel.textContent = msg.sender === "User" ? "You" : msg.sender;
+        nameLabel.style.cssText = `
+          font-size: 12px;
+          color: ${msg.isUser ? aeroTheme.colors.convai.dark : "#10b981"};
+          font-weight: 500;
+          font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.body});
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+        header.appendChild(logoContainer);
+        header.appendChild(nameLabel);
+        bubble.appendChild(header);
+      }
+      const contentDiv = document.createElement("div");
+      contentDiv.style.cssText = `
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      `;
+      renderMarkdown(msg.text, contentDiv, { media: !msg.isUser });
+      bubble.appendChild(contentDiv);
+      messageWrapper.appendChild(bubble);
+      if (msg.timestamp) {
+        const timestamp = document.createElement("span");
+        timestamp.textContent = msg.timestamp;
+        timestamp.style.cssText = `
+          font-size: 12px;
+          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});
+        `;
+        messageWrapper.appendChild(timestamp);
+      }
+      messageListElement.appendChild(messageWrapper);
+    });
+    messageListElement.scrollTop = messageListElement.scrollHeight;
+  };
+  const getBotStatusColor = () => {
+    if (!client.state.isConnected) {
+      return { color: "#ef4444", label: "Disconnected" };
+    }
+    if (client.state.isConnecting || !client.isBotReady) {
+      return { color: "#f59e0b", label: "Connecting" };
+    }
+    if (client.state.isListening) {
+      return { color: "#3b82f6", label: "Listening" };
+    }
+    return { color: "#10b981", label: "Connected" };
+  };
+  const formatMessages = () => {
+    const filteredMessages = client.chatMessages.filter(
+      (msg) => (msg.type === "user-transcription" || msg.type === "user-llm-text" || msg.type === "bot-llm-text" || msg.type === "bot-output" || msg.type === "bot-emotion") && msg.content && msg.content.trim().length > 0
+    );
+    return filteredMessages.map((msg) => ({
+      id: msg.id,
+      text: msg.content,
+      isUser: msg.type.includes("user"),
+      timestamp: new Date(msg.timestamp).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      }),
+      sender: msg.type.includes("user") ? "You" : characterName,
+      showLogo: msg.type.includes("bot")
+    }));
+  };
+  const setupClientListeners = () => {
+    eventSubscriptions.register(
+      (listener) => client.on("stateChange", listener),
+      () => {
+        if (client.connectionType === "text") {
+          if (isVoiceMode) {
+            isVoiceMode = false;
+            hasEnteredDefaultVoiceMode = true;
+            void updateVoiceMode();
+          }
+          updateSendButton();
+        }
+        updateHeader();
+        if (client.state.isConnecting) {
+          morphingContainer.style.animation = "convai-pulse 2s ease-in-out infinite";
+        } else {
+          morphingContainer.style.animation = "none";
+        }
+        if (client.state.isSpeaking) {
+          if (!startTime) {
+            startTime = Date.now();
+          }
+        } else {
+          if (startTime && !client.state.isSpeaking) {
+            startTime = 0;
+          }
+        }
+        if (!client.state.isConnected && !client.state.isConnecting) {
+          if (isOpen) {
+            setIsOpen(false);
+          }
+          isMuted = false;
+          isVoiceMode = false;
+          isVideoVisible = false;
+          hasEnteredDefaultVoiceMode = false;
+          updateHeader();
+          applyVoiceMode();
+        }
+        if (client.state.isConnected && defaultVoiceMode && isOpen && !hasEnteredDefaultVoiceMode && !isVoiceMode) {
+          setTimeout(async () => {
+            try {
+              await client.audioControls.unmuteAudio();
+              isVoiceMode = true;
+              hasEnteredDefaultVoiceMode = true;
+              await updateVoiceMode();
+            } catch (error) {
+              reportMicFailure(client, "Failed to enter voice mode:", error);
+            }
+          }, 100);
+        }
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.videoControls.on("videoStateChange", listener),
+      (videoState) => {
+        if (videoState.isVideoEnabled !== void 0) {
+          isVideoVisible = videoState.isVideoEnabled;
+          applyVoiceMode();
+          const videoBtn = refs.settingsVideoBtn;
+          if (videoBtn) {
+            const isActive = isVideoVisible;
+            videoBtn.style.backgroundColor = isActive ? "rgba(16, 185, 129, 0.15)" : "transparent";
+            videoBtn.style.color = isActive ? "#10b981" : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+            const iconContainer = videoBtn.querySelector("div");
+            if (iconContainer) {
+              iconContainer.innerHTML = "";
+              const icon = isActive ? Icons.Video("md") : Icons.VideoOff("md");
+              icon.style.width = "18px";
+              icon.style.height = "18px";
+              iconContainer.appendChild(icon);
+            }
+          }
+        }
+      }
+    );
+    client.screenShareControls.on(
+      "screenShareStateChange",
+      (screenShareState) => {
+        if (screenShareState.isScreenShareActive !== void 0) {
+          const isSharing = screenShareState.isScreenShareActive;
+          const shareBtn = refs.settingsShareBtn;
+          if (shareBtn) {
+            const isActive = isSharing;
+            shareBtn.style.backgroundColor = isActive ? "rgba(16, 185, 129, 0.15)" : "transparent";
+            shareBtn.style.color = isActive ? "#10b981" : `var(--convai-panel-fg, ${aeroTheme.colors.text.primary})`;
+            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);
+            }
+          }
+        }
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.on("messagesChange", listener),
+      () => {
+        updateMessageList();
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.on("botReady", listener),
+      () => {
+        updateHeader();
+        updateSendButton();
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.on("connect", listener),
+      () => {
+        hasConnectedBefore = true;
+        if (client.room && !audioRenderer) {
+          audioRenderer = new AudioRenderer(client.room, { container: rootElement });
+        }
+        fetchCharacterInfo$1();
+        if (onConnect) {
+          onConnect();
+        }
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.on("disconnect", listener),
+      () => {
+        if (audioRenderer) {
+          audioRenderer.destroy();
+          audioRenderer = null;
+        }
+        updateMessageList();
+        if (onDisconnect) {
+          onDisconnect();
+        }
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.on("message", listener),
+      (message) => {
+        const row = message;
+        if (onMessage && row) {
+          onMessage(row);
+        }
+      }
+    );
+    eventSubscriptions.register(
+      (listener) => client.screenShareControls.on("screenShareStateChange", listener),
+      (screenShareState) => {
+        if (screenShareState.isScreenShareActive !== void 0) {
+          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;
+            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);
+            }
+          }
+        }
+      }
+    );
+  };
+  createDOM();
+  setupClientListeners();
+  updateConnectingOverlay();
+  updateSendButton();
+  if (defaultVoiceMode) {
+    applyVoiceMode();
+  }
+  if (client.state.isConnected && client.room) {
+    audioRenderer = new AudioRenderer(client.room, { container: rootElement });
+    fetchCharacterInfo$1();
+  }
+  const widget = {
+    element: rootElement,
+    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) => {
+      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: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        client.chatMessages.push(chatMessage);
+      }
+      updateMessageList();
+    },
+    destroy: () => {
+      isDestroyed = true;
+      if (audioRenderer) {
+        audioRenderer.destroy();
+        audioRenderer = null;
+      }
+      morphingContainer.removeEventListener("click", handleLauncherClick);
+      if (rootElement.parentElement) {
+        rootElement.remove();
+      }
+      if (floatingVideo.parentElement) {
+        floatingVideo.remove();
+      }
+      eventSubscriptions.unsubscribeAll();
+    }
+  };
+  return widget;
+}
+function destroyConvaiWidget(widget) {
+  widget.destroy();
+}
+export {
+  createConvaiWidget,
+  destroyConvaiWidget
+};