@mediansh/widget 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,18 +1,20 @@
 "use client";
 import {
   cn
-} from "./chunk-3KEM4W7J.js";
+} from "./chunk-3ZXE5RBN.js";
 import {
-  __export,
   clsx
-} from "./chunk-W6NPKKCE.js";
+} from "./chunk-HLALDSPM.js";
+import {
+  __export
+} from "./chunk-77KIJLPP.js";
 
 // ../../apps/web/src/components/support-widget/sdk/median-support.tsx
-import { useEffect as useEffect22 } from "react";
+import { useEffect as useEffect26 } from "react";
 
 // ../../apps/web/src/components/support-widget/markdown-chunk.tsx
 import { lazy, useSyncExternalStore } from "react";
-var load = () => import("./message-markdown-LOE74LBE.js");
+var load = () => import("./message-markdown-KQVNAD42.js");
 var MessageMarkdown = lazy(async () => ({
   default: (await load()).MessageMarkdown
 }));
@@ -61,18 +63,18 @@ function useMarkdownReady() {
 }
 
 // ../../apps/web/src/components/support-widget/widget-launcher.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef13, useState as useState16 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef14, useState as useState15 } from "react";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/lib/SSRBase.es.js
 import * as e from "react";
 var w = e.forwardRef((l5, s4) => {
   const {
-    alt: r32,
-    color: a28 = "currentColor",
-    size: t10 = "1em",
-    weight: o43 = "regular",
+    alt: r42,
+    color: a30 = "currentColor",
+    size: t14 = "1em",
+    weight: o54 = "regular",
     mirrored: i3 = false,
-    children: n,
+    children: n2,
     weights: c8,
     ...m5
   } = l5;
@@ -81,16 +83,16 @@ var w = e.forwardRef((l5, s4) => {
     {
       ref: s4,
       xmlns: "http://www.w3.org/2000/svg",
-      width: t10,
-      height: t10,
-      fill: a28,
+      width: t14,
+      height: t14,
+      fill: a30,
       viewBox: "0 0 256 256",
       transform: i3 ? "scale(-1, 1)" : void 0,
       ...m5
     },
-    !!r32 && /* @__PURE__ */ e.createElement("title", null, r32),
-    n,
-    c8.get(o43)
+    !!r42 && /* @__PURE__ */ e.createElement("title", null, r42),
+    n2,
+    c8.get(o54)
   );
 });
 w.displayName = "SSRBase";
@@ -128,7 +130,7 @@ var a = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowDown.es.js
-var r = o.forwardRef((e55, t10) => /* @__PURE__ */ o.createElement(w, { ref: t10, ...e55, weights: a }));
+var r = o.forwardRef((e62, t14) => /* @__PURE__ */ o.createElement(w, { ref: t14, ...e62, weights: a }));
 r.displayName = "ArrowDownIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowRight.es.js
@@ -164,7 +166,7 @@ var a2 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowRight.es.js
-var o2 = r2.forwardRef((t10, e55) => /* @__PURE__ */ r2.createElement(w, { ref: e55, ...t10, weights: a2 }));
+var o2 = r2.forwardRef((t14, e62) => /* @__PURE__ */ r2.createElement(w, { ref: e62, ...t14, weights: a2 }));
 o2.displayName = "ArrowRightIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowUp.es.js
@@ -200,7 +202,7 @@ var a3 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowUp.es.js
-var o3 = r3.forwardRef((e55, t10) => /* @__PURE__ */ r3.createElement(w, { ref: t10, ...e55, weights: a3 }));
+var o3 = r3.forwardRef((e62, t14) => /* @__PURE__ */ r3.createElement(w, { ref: t14, ...e62, weights: a3 }));
 o3.displayName = "ArrowUpIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsClockwise.es.js
@@ -236,7 +238,7 @@ var e5 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsClockwise.es.js
-var r4 = o4.forwardRef((e55, s4) => /* @__PURE__ */ o4.createElement(w, { ref: s4, ...e55, weights: e5 }));
+var r4 = o4.forwardRef((e62, s4) => /* @__PURE__ */ o4.createElement(w, { ref: s4, ...e62, weights: e5 }));
 r4.displayName = "ArrowsClockwiseIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsIn.es.js
@@ -278,7 +280,7 @@ var e6 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsIn.es.js
-var o5 = r5.forwardRef((e55, s4) => /* @__PURE__ */ r5.createElement(w, { ref: s4, ...e55, weights: e6 }));
+var o5 = r5.forwardRef((e62, s4) => /* @__PURE__ */ r5.createElement(w, { ref: s4, ...e62, weights: e6 }));
 o5.displayName = "ArrowsInIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsOut.es.js
@@ -314,7 +316,7 @@ var e7 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ArrowsOut.es.js
-var o6 = r6.forwardRef((t10, e55) => /* @__PURE__ */ r6.createElement(w, { ref: e55, ...t10, weights: e7 }));
+var o6 = r6.forwardRef((t14, e62) => /* @__PURE__ */ r6.createElement(w, { ref: e62, ...t14, weights: e7 }));
 o6.displayName = "ArrowsOutIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Bug.es.js
@@ -350,7 +352,7 @@ var e8 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Bug.es.js
-var e9 = o7.forwardRef((r32, t10) => /* @__PURE__ */ o7.createElement(w, { ref: t10, ...r32, weights: e8 }));
+var e9 = o7.forwardRef((r42, t14) => /* @__PURE__ */ o7.createElement(w, { ref: t14, ...r42, weights: e8 }));
 e9.displayName = "BugIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/CaretDown.es.js
@@ -386,7 +388,7 @@ var t = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/CaretDown.es.js
-var e11 = o8.forwardRef((r32, t10) => /* @__PURE__ */ o8.createElement(w, { ref: t10, ...r32, weights: t }));
+var e11 = o8.forwardRef((r42, t14) => /* @__PURE__ */ o8.createElement(w, { ref: t14, ...r42, weights: t }));
 e11.displayName = "CaretDownIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/CaretRight.es.js
@@ -422,7 +424,7 @@ var t2 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/CaretRight.es.js
-var e13 = t3.forwardRef((r32, o43) => /* @__PURE__ */ t3.createElement(w, { ref: o43, ...r32, weights: t2 }));
+var e13 = t3.forwardRef((r42, o54) => /* @__PURE__ */ t3.createElement(w, { ref: o54, ...r42, weights: t2 }));
 e13.displayName = "CaretRightIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ChatCircleDots.es.js
@@ -464,7 +466,7 @@ var e14 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ChatCircleDots.es.js
-var o9 = t4.forwardRef((e55, r32) => /* @__PURE__ */ t4.createElement(w, { ref: r32, ...e55, weights: e14 }));
+var o9 = t4.forwardRef((e62, r42) => /* @__PURE__ */ t4.createElement(w, { ref: r42, ...e62, weights: e14 }));
 o9.displayName = "ChatCircleDotsIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Check.es.js
@@ -506,7 +508,7 @@ var a9 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Check.es.js
-var o10 = e16.forwardRef((r32, t10) => /* @__PURE__ */ e16.createElement(w, { ref: t10, ...r32, weights: a9 }));
+var o10 = e16.forwardRef((r42, t14) => /* @__PURE__ */ e16.createElement(w, { ref: t14, ...r42, weights: a9 }));
 o10.displayName = "CheckIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/EnvelopeSimple.es.js
@@ -578,7 +580,7 @@ var a11 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/File.es.js
-var o12 = e20.forwardRef((r32, t10) => /* @__PURE__ */ e20.createElement(w, { ref: t10, ...r32, weights: a11 }));
+var o12 = e20.forwardRef((r42, t14) => /* @__PURE__ */ e20.createElement(w, { ref: t14, ...r42, weights: a11 }));
 o12.displayName = "FileIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ImageSquare.es.js
@@ -620,7 +622,7 @@ var e21 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/ImageSquare.es.js
-var a13 = e22.forwardRef((r32, o43) => /* @__PURE__ */ e22.createElement(w, { ref: o43, ...r32, weights: e21 }));
+var a13 = e22.forwardRef((r42, o54) => /* @__PURE__ */ e22.createElement(w, { ref: o54, ...r42, weights: e21 }));
 a13.displayName = "ImageSquareIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Lightbulb.es.js
@@ -662,7 +664,7 @@ var e23 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Lightbulb.es.js
-var o13 = t5.forwardRef((e55, r32) => /* @__PURE__ */ t5.createElement(w, { ref: r32, ...e55, weights: e23 }));
+var o13 = t5.forwardRef((e62, r42) => /* @__PURE__ */ t5.createElement(w, { ref: r42, ...e62, weights: e23 }));
 o13.displayName = "LightbulbIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/LockSimple.es.js
@@ -704,7 +706,7 @@ var e24 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/LockSimple.es.js
-var e25 = o14.forwardRef((m5, r32) => /* @__PURE__ */ o14.createElement(w, { ref: r32, ...m5, weights: e24 }));
+var e25 = o14.forwardRef((m5, r42) => /* @__PURE__ */ o14.createElement(w, { ref: r42, ...m5, weights: e24 }));
 e25.displayName = "LockSimpleIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Play.es.js
@@ -746,7 +748,7 @@ var a16 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Play.es.js
-var a17 = o15.forwardRef((e55, r32) => /* @__PURE__ */ o15.createElement(w, { ref: r32, ...e55, weights: a16 }));
+var a17 = o15.forwardRef((e62, r42) => /* @__PURE__ */ o15.createElement(w, { ref: r42, ...e62, weights: a16 }));
 a17.displayName = "PlayIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Plus.es.js
@@ -788,7 +790,7 @@ var a18 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Plus.es.js
-var e28 = o16.forwardRef((r32, s4) => /* @__PURE__ */ o16.createElement(w, { ref: s4, ...r32, weights: a18 }));
+var e28 = o16.forwardRef((r42, s4) => /* @__PURE__ */ o16.createElement(w, { ref: s4, ...r42, weights: a18 }));
 e28.displayName = "PlusIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Sparkle.es.js
@@ -830,7 +832,7 @@ var l = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Sparkle.es.js
-var r7 = e29.forwardRef((o43, a28) => /* @__PURE__ */ e29.createElement(w, { ref: a28, ...o43, weights: l }));
+var r7 = e29.forwardRef((o54, a30) => /* @__PURE__ */ e29.createElement(w, { ref: a30, ...o54, weights: l }));
 r7.displayName = "SparkleIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Star.es.js
@@ -872,7 +874,7 @@ var l2 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/Star.es.js
-var t6 = r8.forwardRef((o43, a28) => /* @__PURE__ */ r8.createElement(w, { ref: a28, ...o43, weights: l2 }));
+var t6 = r8.forwardRef((o54, a30) => /* @__PURE__ */ r8.createElement(w, { ref: a30, ...o54, weights: l2 }));
 t6.displayName = "StarIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/UserCircle.es.js
@@ -914,7 +916,7 @@ var a21 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/UserCircle.es.js
-var r9 = e31.forwardRef((o43, s4) => /* @__PURE__ */ e31.createElement(w, { ref: s4, ...o43, weights: a21 }));
+var r9 = e31.forwardRef((o54, s4) => /* @__PURE__ */ e31.createElement(w, { ref: s4, ...o54, weights: a21 }));
 r9.displayName = "UserCircleIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/WarningCircle.es.js
@@ -950,7 +952,7 @@ var a22 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/WarningCircle.es.js
-var e33 = r10.forwardRef((o43, a28) => /* @__PURE__ */ r10.createElement(w, { ref: a28, ...o43, weights: a22 }));
+var e33 = r10.forwardRef((o54, a30) => /* @__PURE__ */ r10.createElement(w, { ref: a30, ...o54, weights: a22 }));
 e33.displayName = "WarningCircleIcon";
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/X.es.js
@@ -992,7 +994,7 @@ var a23 = /* @__PURE__ */ new Map([
 ]);
 
 // ../../node_modules/.bun/@phosphor-icons+react@2.1.10+005eabf3d8b6ef06/node_modules/@phosphor-icons/react/dist/ssr/X.es.js
-var e35 = o17.forwardRef((r32, t10) => /* @__PURE__ */ o17.createElement(w, { ref: t10, ...r32, weights: a23 }));
+var e35 = o17.forwardRef((r42, t14) => /* @__PURE__ */ o17.createElement(w, { ref: t14, ...r42, weights: a23 }));
 e35.displayName = "XIcon";
 
 // ../../apps/web/src/components/icons.tsx
@@ -1007,8 +1009,15 @@ function icon(Base, name, weight = "fill") {
 var Bug = /* @__PURE__ */ icon(e9, "Bug");
 var ChatCircleDots = /* @__PURE__ */ icon(o9, "ChatCircleDots");
 var EnvelopeSimple = /* @__PURE__ */ icon(o11, "EnvelopeSimple");
-var File = /* @__PURE__ */ icon(o12, "File");
+var File2 = /* @__PURE__ */ icon(o12, "File");
 var ImageSquare = /* @__PURE__ */ icon(a13, "ImageSquare");
+var LIFEBUOY = [
+  "M128,24A104,104,0,1,0,232,128,104,104,0,0,0,128,24Z",
+  "M166.6,69.6L149.08,87.12A46,46,0,0,0,106.92,87.12L89.4,69.6A70,70,0,0,1,166.6,69.6Z",
+  "M186.4,166.6L168.88,149.08A46,46,0,0,0,168.88,106.92L186.4,89.4A70,70,0,0,1,186.4,166.6Z",
+  "M89.4,186.4L106.92,168.88A46,46,0,0,0,149.08,168.88L166.6,186.4A70,70,0,0,1,89.4,186.4Z",
+  "M69.6,89.4L87.12,106.92A46,46,0,0,0,87.12,149.08L69.6,166.6A70,70,0,0,1,69.6,89.4Z"
+].join("");
 var Lightbulb = /* @__PURE__ */ icon(o13, "Lightbulb");
 var LockSimple = /* @__PURE__ */ icon(e25, "LockSimple");
 var Play = /* @__PURE__ */ icon(a17, "Play");
@@ -1113,7 +1122,7 @@ function setSpot(spot) {
 }
 
 // ../../apps/web/src/components/support-widget/support-widget.tsx
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 
 // ../../apps/web/src/components/ui/collapse.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1121,17 +1130,21 @@ var COLLAPSE_MS = 200;
 function Collapse({
   isOpen,
   id,
+  direction = "vertical",
   children,
   className
 }) {
+  const isSideways = direction === "horizontal";
   return /* @__PURE__ */ jsx2(
     "div",
     {
       id,
       inert: isOpen ? void 0 : true,
       className: cn(
-        "grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
-        isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+        "grid duration-200 ease-out motion-reduce:transition-none",
+        isSideways ? "transition-[grid-template-columns,opacity]" : "transition-[grid-template-rows,opacity]",
+        isSideways ? isOpen ? "grid-cols-[1fr]" : "grid-cols-[0fr]" : isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        isOpen ? "opacity-100" : "opacity-0",
         className
       ),
       children: /* @__PURE__ */ jsx2("div", { className: "overflow-hidden", children })
@@ -1144,57 +1157,57 @@ import * as React3 from "react";
 
 // ../../node_modules/.bun/@shadcn+react@0.3.0+03aa47d54245a271/node_modules/@shadcn/react/dist/chunk-HBS6WEDP.js
 import * as i2 from "react";
-function S({ defaultTagName: a28, props: r32, render: t10, state: n = {}, stateAttributesMapping: e55 }) {
-  let o43 = d(R(n, e55), r32);
-  if (!t10) return i2.createElement(a28, o43);
-  if (typeof t10 == "function") return t10(o43, n);
-  if (!i2.isValidElement(t10)) return null;
-  let s4 = t10.props, u = { ...d(o43, s4), ref: f8(o43.ref, s4.ref) };
-  return i2.cloneElement(t10, u);
-}
-function d(...a28) {
-  let r32 = {};
-  for (let t10 of a28) {
-    if (!t10) continue;
-    let n = t10;
-    for (let e55 of Object.keys(n)) {
-      let o43 = n[e55];
-      if (o43 === void 0) continue;
-      let s4 = r32[e55];
-      e55 === "className" ? r32[e55] = [s4, o43].filter(Boolean).join(" ") : e55 === "style" ? r32[e55] = { ...s4, ...o43 } : e55 === "ref" ? r32[e55] = f8(s4, o43) : l4(e55) && typeof s4 == "function" && typeof o43 == "function" ? r32[e55] = p2(o43, s4) : r32[e55] = o43;
+function S({ defaultTagName: a30, props: r42, render: t14, state: n2 = {}, stateAttributesMapping: e62 }) {
+  let o54 = d(R(n2, e62), r42);
+  if (!t14) return i2.createElement(a30, o54);
+  if (typeof t14 == "function") return t14(o54, n2);
+  if (!i2.isValidElement(t14)) return null;
+  let s4 = t14.props, u = { ...d(o54, s4), ref: f8(o54.ref, s4.ref) };
+  return i2.cloneElement(t14, u);
+}
+function d(...a30) {
+  let r42 = {};
+  for (let t14 of a30) {
+    if (!t14) continue;
+    let n2 = t14;
+    for (let e62 of Object.keys(n2)) {
+      let o54 = n2[e62];
+      if (o54 === void 0) continue;
+      let s4 = r42[e62];
+      e62 === "className" ? r42[e62] = [s4, o54].filter(Boolean).join(" ") : e62 === "style" ? r42[e62] = { ...s4, ...o54 } : e62 === "ref" ? r42[e62] = f8(s4, o54) : l4(e62) && typeof s4 == "function" && typeof o54 == "function" ? r42[e62] = p2(o54, s4) : r42[e62] = o54;
     }
   }
-  return r32;
-}
-function R(a28, r32) {
-  let t10 = {};
-  for (let n of Object.keys(a28)) {
-    let e55 = a28[n], o43 = r32?.[n]?.(e55);
-    if (o43) {
-      Object.assign(t10, o43);
+  return r42;
+}
+function R(a30, r42) {
+  let t14 = {};
+  for (let n2 of Object.keys(a30)) {
+    let e62 = a30[n2], o54 = r42?.[n2]?.(e62);
+    if (o54) {
+      Object.assign(t14, o54);
       continue;
     }
-    if (n === "slot") {
-      t10["data-slot"] = e55;
+    if (n2 === "slot") {
+      t14["data-slot"] = e62;
       continue;
     }
-    let s4 = `data-${String(n).replace(/[A-Z]/g, (c8) => `-${c8.toLowerCase()}`)}`;
-    typeof e55 == "boolean" ? t10[s4] = e55 ? "" : void 0 : e55 != null && (t10[s4] = String(e55));
+    let s4 = `data-${String(n2).replace(/[A-Z]/g, (c8) => `-${c8.toLowerCase()}`)}`;
+    typeof e62 == "boolean" ? t14[s4] = e62 ? "" : void 0 : e62 != null && (t14[s4] = String(e62));
   }
-  return t10;
+  return t14;
 }
-function p2(a28, r32) {
-  return function(n) {
-    a28(n), n.defaultPrevented || r32(n);
+function p2(a30, r42) {
+  return function(n2) {
+    a30(n2), n2.defaultPrevented || r42(n2);
   };
 }
-function l4(a28) {
-  return /^on[A-Z]/.test(a28);
+function l4(a30) {
+  return /^on[A-Z]/.test(a30);
 }
-function f8(...a28) {
-  let r32 = a28.filter(Boolean);
-  if (r32.length !== 0) return (t10) => {
-    for (let n of r32) typeof n == "function" ? n(t10) : n && (n.current = t10);
+function f8(...a30) {
+  let r42 = a30.filter(Boolean);
+  if (r42.length !== 0) return (t14) => {
+    for (let n2 of r42) typeof n2 == "function" ? n2(t14) : n2 && (n2.current = t14);
   };
 }
 
@@ -1210,15 +1223,15 @@ var Be = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "End", "Home", "PageDo
 var ge = { start: false, end: false };
 var dt = [];
 var Q = { currentAnchorId: null, visibleMessageIds: dt };
-function De({ content: e55, scrollEdgeThreshold: t10, spacer: r32, viewport: n }) {
-  if (!n || !e55) return ge;
-  let o43 = Se({ content: e55, spacer: r32, viewport: n });
-  return { start: n.scrollTop > t10, end: o43 - n.scrollTop - n.clientHeight > t10 };
-}
-function Fe({ content: e55, scrollMargin: t10, scrollPreviousItemPeek: r32, spacer: n, viewport: o43, visibleMessageIds: i3 }) {
-  if (!e55 || !o43) return Q;
-  let S2 = o43.getBoundingClientRect(), l5 = S2.top + t10 + r32, d2 = typeof IntersectionObserver > "u", E = [], b2 = null;
-  for (let C of ee(e55, n)) {
+function De({ content: e62, scrollEdgeThreshold: t14, spacer: r42, viewport: n2 }) {
+  if (!n2 || !e62) return ge;
+  let o54 = Se({ content: e62, spacer: r42, viewport: n2 });
+  return { start: n2.scrollTop > t14, end: o54 - n2.scrollTop - n2.clientHeight > t14 };
+}
+function Fe({ content: e62, scrollMargin: t14, scrollPreviousItemPeek: r42, spacer: n2, viewport: o54, visibleMessageIds: i3 }) {
+  if (!e62 || !o54) return Q;
+  let S2 = o54.getBoundingClientRect(), l5 = S2.top + t14 + r42, d2 = typeof IntersectionObserver > "u", E = [], b2 = null;
+  for (let C of ee(e62, n2)) {
     let p3 = C.dataset.messageId;
     if (!p3) continue;
     let m5 = C.dataset.scrollAnchor === "true", L = m5 || d2 ? C.getBoundingClientRect() : null;
@@ -1226,100 +1239,100 @@ function Fe({ content: e55, scrollMargin: t10, scrollPreviousItemPeek: r32, spac
   }
   return E.length === 0 && b2 === null ? Q : { currentAnchorId: b2, visibleMessageIds: E };
 }
-function ee(e55, t10) {
-  return Array.from(e55.children).filter((r32) => r32 instanceof HTMLElement && r32 !== t10);
+function ee(e62, t14) {
+  return Array.from(e62.children).filter((r42) => r42 instanceof HTMLElement && r42 !== t14);
 }
-function je(e55, t10) {
-  for (let r32 = t10; r32 < e55.length; r32++) {
-    let n = e55[r32];
-    if (n?.dataset.scrollAnchor === "true") return n;
+function je(e62, t14) {
+  for (let r42 = t14; r42 < e62.length; r42++) {
+    let n2 = e62[r42];
+    if (n2?.dataset.scrollAnchor === "true") return n2;
   }
   return null;
 }
-function Ge(e55, t10) {
-  for (let r32 of e55) if (r32.dataset.scrollAnchor === "true" && !t10.has(r32)) return r32;
+function Ge(e62, t14) {
+  for (let r42 of e62) if (r42.dataset.scrollAnchor === "true" && !t14.has(r42)) return r42;
   return null;
 }
-function Ne(e55, t10) {
-  let r32 = 0;
-  for (let n = t10; n < e55.length; n++) if (e55[n]?.dataset.scrollAnchor === "true" && (r32 += 1, r32 > 1)) return true;
+function Ne(e62, t14) {
+  let r42 = 0;
+  for (let n2 = t14; n2 < e62.length; n2++) if (e62[n2]?.dataset.scrollAnchor === "true" && (r42 += 1, r42 > 1)) return true;
   return false;
 }
-function Ue(e55) {
-  for (let t10 = e55.length - 1; t10 >= 0; t10--) {
-    let r32 = e55[t10];
-    if (r32?.dataset.scrollAnchor === "true") return r32;
+function Ue(e62) {
+  for (let t14 = e62.length - 1; t14 >= 0; t14--) {
+    let r42 = e62[t14];
+    if (r42?.dataset.scrollAnchor === "true") return r42;
   }
   return null;
 }
-function Ye({ content: e55, spacer: t10, viewport: r32 }) {
-  let n = r32.getBoundingClientRect();
-  for (let o43 of ee(e55, t10)) {
-    if (!o43.dataset.messageId) continue;
-    let i3 = o43.getBoundingClientRect();
-    if (i3.bottom > n.top && i3.top < n.bottom) return o43;
+function Ye({ content: e62, spacer: t14, viewport: r42 }) {
+  let n2 = r42.getBoundingClientRect();
+  for (let o54 of ee(e62, t14)) {
+    if (!o54.dataset.messageId) continue;
+    let i3 = o54.getBoundingClientRect();
+    if (i3.bottom > n2.top && i3.top < n2.bottom) return o54;
   }
   return null;
 }
-function ze({ align: e55, element: t10, scrollMargin: r32, spacer: n, viewport: o43 }) {
-  let i3 = pe(t10, o43), S2 = t10.getBoundingClientRect().height, l5 = bt(n);
-  if (e55 === "center") {
-    let d2 = Math.max(0, o43.clientHeight - l5.start - l5.end);
-    return i3 - l5.start - (d2 - S2) / 2 - r32;
+function ze({ align: e62, element: t14, scrollMargin: r42, spacer: n2, viewport: o54 }) {
+  let i3 = pe(t14, o54), S2 = t14.getBoundingClientRect().height, l5 = bt(n2);
+  if (e62 === "center") {
+    let d2 = Math.max(0, o54.clientHeight - l5.start - l5.end);
+    return i3 - l5.start - (d2 - S2) / 2 - r42;
   }
-  if (e55 === "end") return i3 - o43.clientHeight + S2 + l5.end + r32;
-  if (e55 === "nearest") {
-    let d2 = i3 + S2, E = o43.scrollTop + l5.start, b2 = o43.scrollTop + o43.clientHeight - l5.end;
-    return i3 >= E && d2 <= b2 ? o43.scrollTop : i3 < E ? i3 - l5.start - r32 : d2 - o43.clientHeight + l5.end + r32;
+  if (e62 === "end") return i3 - o54.clientHeight + S2 + l5.end + r42;
+  if (e62 === "nearest") {
+    let d2 = i3 + S2, E = o54.scrollTop + l5.start, b2 = o54.scrollTop + o54.clientHeight - l5.end;
+    return i3 >= E && d2 <= b2 ? o54.scrollTop : i3 < E ? i3 - l5.start - r42 : d2 - o54.clientHeight + l5.end + r42;
   }
-  return i3 - l5.start - r32;
+  return i3 - l5.start - r42;
 }
-function pe(e55, t10) {
-  let r32 = e55.getBoundingClientRect(), n = t10.getBoundingClientRect();
-  return r32.top - n.top + t10.scrollTop;
+function pe(e62, t14) {
+  let r42 = e62.getBoundingClientRect(), n2 = t14.getBoundingClientRect();
+  return r42.top - n2.top + t14.scrollTop;
 }
-function te(e55, t10) {
-  return e55.getBoundingClientRect().top - t10.getBoundingClientRect().top;
+function te(e62, t14) {
+  return e62.getBoundingClientRect().top - t14.getBoundingClientRect().top;
 }
-function qe({ content: e55, scrollTop: t10, spacer: r32, viewport: n }) {
-  let o43 = Se({ content: e55, spacer: r32, viewport: n });
-  return t10 + n.clientHeight - o43;
+function qe({ content: e62, scrollTop: t14, spacer: r42, viewport: n2 }) {
+  let o54 = Se({ content: e62, spacer: r42, viewport: n2 });
+  return t14 + n2.clientHeight - o54;
 }
-function Se({ content: e55, spacer: t10, viewport: r32 }) {
-  let n = ee(e55, t10), o43 = We(e55), i3 = r32.getBoundingClientRect(), S2 = r32.scrollTop, l5 = o43.start + o43.end;
-  for (let d2 of n) {
+function Se({ content: e62, spacer: t14, viewport: r42 }) {
+  let n2 = ee(e62, t14), o54 = We(e62), i3 = r42.getBoundingClientRect(), S2 = r42.scrollTop, l5 = o54.start + o54.end;
+  for (let d2 of n2) {
     let E = d2.getBoundingClientRect();
-    l5 = Math.max(l5, E.bottom - i3.top + S2 + o43.end);
+    l5 = Math.max(l5, E.bottom - i3.top + S2 + o54.end);
   }
   return l5;
 }
-function Ke(e55) {
-  return Math.max(0, e55.scrollHeight - e55.clientHeight);
+function Ke(e62) {
+  return Math.max(0, e62.scrollHeight - e62.clientHeight);
 }
-function We(e55) {
-  let t10 = window.getComputedStyle(e55);
-  return { end: Re(t10.paddingBlockEnd || t10.paddingBottom), start: Re(t10.paddingBlockStart || t10.paddingTop) };
+function We(e62) {
+  let t14 = window.getComputedStyle(e62);
+  return { end: Re(t14.paddingBlockEnd || t14.paddingBottom), start: Re(t14.paddingBlockStart || t14.paddingTop) };
 }
-function bt(e55) {
-  let t10 = e55?.parentElement;
-  return t10 ? We(t10) : { end: 0, start: 0 };
+function bt(e62) {
+  let t14 = e62?.parentElement;
+  return t14 ? We(t14) : { end: 0, start: 0 };
 }
-function $e(e55) {
-  if (!e55) return 0;
-  let t10 = window.getComputedStyle(e55), r32 = t10.rowGap === "normal" ? t10.gap : t10.rowGap;
-  return Re(r32);
+function $e(e62) {
+  if (!e62) return 0;
+  let t14 = window.getComputedStyle(e62), r42 = t14.rowGap === "normal" ? t14.gap : t14.rowGap;
+  return Re(r42);
 }
-function Re(e55) {
-  if (!e55) return 0;
-  let t10 = Number.parseFloat(e55);
-  return Number.isFinite(t10) ? t10 : 0;
+function Re(e62) {
+  if (!e62) return 0;
+  let t14 = Number.parseFloat(e62);
+  return Number.isFinite(t14) ? t14 : 0;
 }
-function Je({ refs: e55, commitScrollState: t10, scheduleStateCommit: r32, scheduleVisibilitySync: n }) {
-  let { streamingTurnRef: o43, autoScrollRef: i3, autoscrollingRef: S2, autoscrollingTimeoutRef: l5, contentRef: d2, defaultScrollPositionAppliedRef: E, itemCountRef: b2, messageElementsRef: C, modeRef: p3, pendingScrollToMessageRef: m5, prependRestoreRef: L, scrollMarginRef: y, scrollPreviousItemPeekRef: u, spacerGapRef: x, spacerHeightRef: Y, spacerRef: k, viewportRef: _ } = e55, G = g.useCallback((c8) => {
-    l5.current !== null && (window.clearTimeout(l5.current), l5.current = null), S2.current !== c8 && (S2.current = c8, t10()), c8 && (l5.current = window.setTimeout(() => {
-      l5.current = null, S2.current = false, t10();
+function Je({ refs: e62, commitScrollState: t14, scheduleStateCommit: r42, scheduleVisibilitySync: n2 }) {
+  let { streamingTurnRef: o54, autoScrollRef: i3, autoscrollingRef: S2, autoscrollingTimeoutRef: l5, contentRef: d2, defaultScrollPositionAppliedRef: E, itemCountRef: b2, messageElementsRef: C, modeRef: p3, pendingScrollToMessageRef: m5, prependRestoreRef: L, scrollMarginRef: y, scrollPreviousItemPeekRef: u, spacerGapRef: x, spacerHeightRef: Y, spacerRef: k, viewportRef: _ } = e62, G = g.useCallback((c8) => {
+    l5.current !== null && (window.clearTimeout(l5.current), l5.current = null), S2.current !== c8 && (S2.current = c8, t14()), c8 && (l5.current = window.setTimeout(() => {
+      l5.current = null, S2.current = false, t14();
     }, ke));
-  }, [t10]), v = g.useCallback((c8) => {
+  }, [t14]), v = g.useCallback((c8) => {
     let f9 = k.current;
     if (!f9) return;
     let h = Math.max(0, Math.ceil(c8));
@@ -1329,20 +1342,20 @@ function Je({ refs: e55, commitScrollState: t10, scheduleStateCommit: r32, sched
     if (!P) return;
     let V = Math.max(0, c8);
     if (Math.abs(P.scrollTop - V) <= J) {
-      P.scrollTop = V, t10();
+      P.scrollTop = V, t14();
       return;
     }
-    h && G(true), P.scrollTo({ top: V, behavior: f9 }), r32();
-  }, [t10, r32, G]), N = g.useCallback(({ behavior: c8 = "auto" } = {}) => _.current ? (v(0), o43.current = null, p3.current = "free-scrolling", H(0, { behavior: c8 }), n(), true) : false, [n, H, v]), ne = g.useCallback(({ behavior: c8 = "auto" } = {}) => {
+    h && G(true), P.scrollTo({ top: V, behavior: f9 }), r42();
+  }, [t14, r42, G]), N = g.useCallback(({ behavior: c8 = "auto" } = {}) => _.current ? (v(0), o54.current = null, p3.current = "free-scrolling", H(0, { behavior: c8 }), n2(), true) : false, [n2, H, v]), ne = g.useCallback(({ behavior: c8 = "auto" } = {}) => {
     let f9 = _.current;
-    return f9 ? (v(0), o43.current = null, p3.current = i3.current ? "following-bottom" : "free-scrolling", H(Ke(f9), { autoscrolling: true, behavior: c8 }), n(), true) : false;
-  }, [n, H, v]), A = g.useCallback((c8, { align: f9 = "start", behavior: h = "auto", scrollMargin: P = y.current } = {}, { keepPreviousPeek: V = false } = {}) => {
+    return f9 ? (v(0), o54.current = null, p3.current = i3.current ? "following-bottom" : "free-scrolling", H(Ke(f9), { autoscrolling: true, behavior: c8 }), n2(), true) : false;
+  }, [n2, H, v]), A = g.useCallback((c8, { align: f9 = "start", behavior: h = "auto", scrollMargin: P = y.current } = {}, { keepPreviousPeek: V = false } = {}) => {
     let z = d2.current, q = _.current;
     if (!z || !q || !z.contains(c8)) return false;
     let K = ze({ align: f9, element: c8, scrollMargin: V ? P + u.current : P, spacer: k.current, viewport: q }), se = qe({ content: z, scrollTop: K, spacer: k.current, viewport: q });
-    return v(se), L.current = { element: c8, viewportTop: te(c8, q) }, p3.current = V ? "anchored-to-message" : "settling-jump", o43.current = V ? c8 : null, H(K, { behavior: h }), n(), true;
-  }, [n, H, v]), B = g.useCallback(() => {
-    let c8 = o43.current;
+    return v(se), L.current = { element: c8, viewportTop: te(c8, q) }, p3.current = V ? "anchored-to-message" : "settling-jump", o54.current = V ? c8 : null, H(K, { behavior: h }), n2(), true;
+  }, [n2, H, v]), B = g.useCallback(() => {
+    let c8 = o54.current;
     return !c8 || !c8.isConnected || p3.current !== "anchored-to-message" ? false : A(c8, { align: "start" }, { keepPreviousPeek: true });
   }, [A]), D = g.useCallback((c8, f9) => {
     let h = C.current.get(c8);
@@ -1355,52 +1368,52 @@ function Je({ refs: e55, commitScrollState: t10, scheduleStateCommit: r32, sched
     return !f9 || !A(f9, c8.options) ? false : (m5.current = null, E.current = true, true);
   }, [A]), reanchorToAnchoredMessage: B, scrollToElement: A, scrollToEnd: ne, scrollToMessage: D, scrollToStart: N };
 }
-function Qe(e55, t10) {
-  let r32 = e55, n = /* @__PURE__ */ new Set();
-  return { getSnapshot: () => r32, hasListeners: () => n.size > 0, setSnapshot: (o43) => {
-    t10(r32, o43) || (r32 = o43, n.forEach((i3) => i3()));
-  }, subscribe: (o43, i3, S2) => {
-    let l5 = n.size === 0;
-    return n.add(o43), l5 && i3?.(), () => {
-      n.delete(o43), n.size === 0 && S2?.();
+function Qe(e62, t14) {
+  let r42 = e62, n2 = /* @__PURE__ */ new Set();
+  return { getSnapshot: () => r42, hasListeners: () => n2.size > 0, setSnapshot: (o54) => {
+    t14(r42, o54) || (r42 = o54, n2.forEach((i3) => i3()));
+  }, subscribe: (o54, i3, S2) => {
+    let l5 = n2.size === 0;
+    return n2.add(o54), l5 && i3?.(), () => {
+      n2.delete(o54), n2.size === 0 && S2?.();
     };
   } };
 }
-function Xe(e55, t10) {
-  return Qe(e55, t10);
+function Xe(e62, t14) {
+  return Qe(e62, t14);
 }
 function Ze() {
   return Qe(Q, Tt);
 }
-function et(e55, t10) {
-  return e55.start === t10.start && e55.end === t10.end;
+function et(e62, t14) {
+  return e62.start === t14.start && e62.end === t14.end;
 }
-function Tt(e55, t10) {
-  return e55.currentAnchorId !== t10.currentAnchorId || e55.visibleMessageIds.length !== t10.visibleMessageIds.length ? false : e55.visibleMessageIds.every((r32, n) => r32 === t10.visibleMessageIds[n]);
+function Tt(e62, t14) {
+  return e62.currentAnchorId !== t14.currentAnchorId || e62.visibleMessageIds.length !== t14.visibleMessageIds.length ? false : e62.visibleMessageIds.every((r42, n2) => r42 === t14.visibleMessageIds[n2]);
 }
-function tt({ autoScroll: e55, scrollEdgeThreshold: t10, scrollMargin: r32, scrollPreviousItemPeek: n }) {
-  let o43 = g.useRef(e55), i3 = g.useRef(false), S2 = g.useRef(null), l5 = g.useRef(false), d2 = g.useRef(t10), E = g.useRef(0), b2 = g.useRef(null), C = g.useRef(0), p3 = g.useRef(e55 ? "following-bottom" : "free-scrolling"), m5 = g.useRef(/* @__PURE__ */ new Map()), L = g.useRef(null), y = g.useRef(null), u = g.useRef(null), x = g.useRef(n), Y = g.useRef(true), k = g.useRef(null), _ = g.useRef(r32), G = g.useRef(null), v = g.useRef(0), H = g.useRef(0), N = g.useRef(null), ne = g.useRef(null), A = g.useRef(null), B = g.useRef(null), D = g.useRef(null), U = g.useRef(null), c8 = g.useRef(null), f9 = g.useRef(null), h = g.useRef(/* @__PURE__ */ new Set()), P = g.useRef(/* @__PURE__ */ new WeakSet());
-  return A.current === null && (A.current = Xe(ge, et)), f9.current === null && (f9.current = Ze()), o43.current = e55, d2.current = t10, _.current = r32, x.current = n, { autoScrollRef: o43, autoscrollingRef: i3, autoscrollingTimeoutRef: B, streamingTurnRef: u, contentRef: S2, defaultScrollPositionAppliedRef: l5, firstItemRef: b2, itemCountRef: E, lastScrollTopRef: C, messageElementsRef: m5, modeRef: p3, pendingScrollFrameRef: G, pendingScrollToMessageRef: L, prependRestoreRef: y, preserveScrollOnPrependRef: Y, rootRef: k, scrollEdgeThresholdRef: d2, scrollMarginRef: _, scrollPreviousItemPeekRef: x, spacerGapRef: v, spacerHeightRef: H, spacerRef: N, stateFrameRef: ne, stateStore: A.current, viewportRef: D, visibilityFrameRef: U, visibilityObserverRef: c8, visibilityStore: f9.current, visibleMessageIdsRef: h, handledScrollAnchorsRef: P };
+function tt({ autoScroll: e62, scrollEdgeThreshold: t14, scrollMargin: r42, scrollPreviousItemPeek: n2 }) {
+  let o54 = g.useRef(e62), i3 = g.useRef(false), S2 = g.useRef(null), l5 = g.useRef(false), d2 = g.useRef(t14), E = g.useRef(0), b2 = g.useRef(null), C = g.useRef(0), p3 = g.useRef(e62 ? "following-bottom" : "free-scrolling"), m5 = g.useRef(/* @__PURE__ */ new Map()), L = g.useRef(null), y = g.useRef(null), u = g.useRef(null), x = g.useRef(n2), Y = g.useRef(true), k = g.useRef(null), _ = g.useRef(r42), G = g.useRef(null), v = g.useRef(0), H = g.useRef(0), N = g.useRef(null), ne = g.useRef(null), A = g.useRef(null), B = g.useRef(null), D = g.useRef(null), U = g.useRef(null), c8 = g.useRef(null), f9 = g.useRef(null), h = g.useRef(/* @__PURE__ */ new Set()), P = g.useRef(/* @__PURE__ */ new WeakSet());
+  return A.current === null && (A.current = Xe(ge, et)), f9.current === null && (f9.current = Ze()), o54.current = e62, d2.current = t14, _.current = r42, x.current = n2, { autoScrollRef: o54, autoscrollingRef: i3, autoscrollingTimeoutRef: B, streamingTurnRef: u, contentRef: S2, defaultScrollPositionAppliedRef: l5, firstItemRef: b2, itemCountRef: E, lastScrollTopRef: C, messageElementsRef: m5, modeRef: p3, pendingScrollFrameRef: G, pendingScrollToMessageRef: L, prependRestoreRef: y, preserveScrollOnPrependRef: Y, rootRef: k, scrollEdgeThresholdRef: d2, scrollMarginRef: _, scrollPreviousItemPeekRef: x, spacerGapRef: v, spacerHeightRef: H, spacerRef: N, stateFrameRef: ne, stateStore: A.current, viewportRef: D, visibilityFrameRef: U, visibilityObserverRef: c8, visibilityStore: f9.current, visibleMessageIdsRef: h, handledScrollAnchorsRef: P };
 }
-function rt(e55, t10) {
-  return g.useCallback((r32) => {
-    e55.current = r32, r32 && t10();
-  }, [e55, t10]);
+function rt(e62, t14) {
+  return g.useCallback((r42) => {
+    e62.current = r42, r42 && t14();
+  }, [e62, t14]);
 }
-function nt({ autoScroll: e55 = false, defaultScrollPosition: t10 = "end", scrollEdgeThreshold: r32 = xe, scrollPreviousItemPeek: n = Ve, scrollMargin: o43 = _e }) {
-  let i3 = tt({ autoScroll: e55, scrollEdgeThreshold: r32, scrollMargin: o43, scrollPreviousItemPeek: n }), { streamingTurnRef: S2, autoScrollRef: l5, autoscrollingRef: d2, autoscrollingTimeoutRef: E, contentRef: b2, defaultScrollPositionAppliedRef: C, firstItemRef: p3, itemCountRef: m5, lastScrollTopRef: L, messageElementsRef: y, modeRef: u, pendingScrollFrameRef: x, pendingScrollToMessageRef: Y, prependRestoreRef: k, preserveScrollOnPrependRef: _, rootRef: G, scrollEdgeThresholdRef: v, scrollMarginRef: H, scrollPreviousItemPeekRef: N, spacerGapRef: ne, spacerHeightRef: A, spacerRef: B, stateFrameRef: D, stateStore: U, viewportRef: c8, visibilityFrameRef: f9, visibilityObserverRef: h, visibilityStore: P, visibleMessageIdsRef: V, handledScrollAnchorsRef: z } = i3, q = g.useRef(t10);
-  q.current !== t10 && (q.current = t10, C.current = false);
+function nt({ autoScroll: e62 = false, defaultScrollPosition: t14 = "end", scrollEdgeThreshold: r42 = xe, scrollPreviousItemPeek: n2 = Ve, scrollMargin: o54 = _e }) {
+  let i3 = tt({ autoScroll: e62, scrollEdgeThreshold: r42, scrollMargin: o54, scrollPreviousItemPeek: n2 }), { streamingTurnRef: S2, autoScrollRef: l5, autoscrollingRef: d2, autoscrollingTimeoutRef: E, contentRef: b2, defaultScrollPositionAppliedRef: C, firstItemRef: p3, itemCountRef: m5, lastScrollTopRef: L, messageElementsRef: y, modeRef: u, pendingScrollFrameRef: x, pendingScrollToMessageRef: Y, prependRestoreRef: k, preserveScrollOnPrependRef: _, rootRef: G, scrollEdgeThresholdRef: v, scrollMarginRef: H, scrollPreviousItemPeekRef: N, spacerGapRef: ne, spacerHeightRef: A, spacerRef: B, stateFrameRef: D, stateStore: U, viewportRef: c8, visibilityFrameRef: f9, visibilityObserverRef: h, visibilityStore: P, visibleMessageIdsRef: V, handledScrollAnchorsRef: z } = i3, q = g.useRef(t14);
+  q.current !== t14 && (q.current = t14, C.current = false);
   let K = g.useCallback((s4) => {
-    let a28 = G.current, T = c8.current, O = [s4.start && "start", s4.end && "end"].filter(Boolean).join(" "), ue = d2.current;
-    for (let W of [a28, T]) W && (O ? W.setAttribute("data-scrollable", O) : W.removeAttribute("data-scrollable"), W.toggleAttribute("data-autoscrolling", ue));
+    let a30 = G.current, T = c8.current, O = [s4.start && "start", s4.end && "end"].filter(Boolean).join(" "), ue = d2.current;
+    for (let W of [a30, T]) W && (O ? W.setAttribute("data-scrollable", O) : W.removeAttribute("data-scrollable"), W.toggleAttribute("data-autoscrolling", ue));
   }, []), se = g.useCallback((s4) => {
-    let a28 = c8.current?.scrollTop ?? 0, T = a28 < L.current - J;
-    L.current = a28, l5.current && !s4.end && u.current !== "settling-jump" && u.current !== "anchored-to-message" ? u.current = "following-bottom" : u.current === "following-bottom" && s4.end && T && !d2.current && (u.current = "free-scrolling");
+    let a30 = c8.current?.scrollTop ?? 0, T = a30 < L.current - J;
+    L.current = a30, l5.current && !s4.end && u.current !== "settling-jump" && u.current !== "anchored-to-message" ? u.current = "following-bottom" : u.current === "following-bottom" && s4.end && T && !d2.current && (u.current = "free-scrolling");
   }, []), F = g.useCallback(() => {
     let s4 = De({ content: b2.current, scrollEdgeThreshold: v.current, spacer: B.current, viewport: c8.current });
     se(s4);
-    let a28 = u.current === "following-bottom" ? { ...s4, end: false } : s4;
-    K(a28), U.setSnapshot(a28);
+    let a30 = u.current === "following-bottom" ? { ...s4, end: false } : s4;
+    K(a30), U.setSnapshot(a30);
   }, [se, U, K]), oe = g.useCallback(() => {
     D.current === null && (D.current = window.requestAnimationFrame(() => {
       D.current = null, F();
@@ -1410,54 +1423,54 @@ function nt({ autoScroll: e55 = false, defaultScrollPosition: t10 = "end", scrol
       f9.current = null, P.hasListeners() && P.setSnapshot(Fe({ content: b2.current, scrollMargin: H.current, scrollPreviousItemPeek: N.current, spacer: B.current, viewport: c8.current, visibleMessageIds: V.current }));
     }));
   }, [P]), { flushPendingScrollToMessage: ce, reanchorToAnchoredMessage: me, scrollToElement: le, scrollToEnd: I2, scrollToMessage: Me, scrollToStart: ae } = Je({ refs: i3, commitScrollState: F, scheduleStateCommit: oe, scheduleVisibilitySync: w2 }), de = g.useCallback(() => {
-    let s4 = k.current, a28 = c8.current;
-    if (!s4 || !a28 || !s4.element.isConnected) return false;
-    let O = te(s4.element, a28) - s4.viewportTop;
-    return Math.abs(O) <= J ? false : (a28.scrollTop += O, s4.viewportTop = te(s4.element, a28), oe(), w2(), true);
+    let s4 = k.current, a30 = c8.current;
+    if (!s4 || !a30 || !s4.element.isConnected) return false;
+    let O = te(s4.element, a30) - s4.viewportTop;
+    return Math.abs(O) <= J ? false : (a30.scrollTop += O, s4.viewportTop = te(s4.element, a30), oe(), w2(), true);
   }, [oe, w2]), Z = g.useCallback(() => {
-    let s4 = b2.current, a28 = c8.current;
-    if (!s4 || !a28) {
+    let s4 = b2.current, a30 = c8.current;
+    if (!s4 || !a30) {
       k.current = null;
       return;
     }
-    let T = Ye({ content: s4, spacer: B.current, viewport: a28 });
-    k.current = T ? { element: T, viewportTop: te(T, a28) } : null;
+    let T = Ye({ content: s4, spacer: B.current, viewport: a30 });
+    k.current = T ? { element: T, viewportTop: te(T, a30) } : null;
   }, []), be = g.useCallback(() => {
     x.current === null && (x.current = window.requestAnimationFrame(() => {
       x.current = null, ce() && Z();
     }));
   }, [Z, ce]), ie = g.useCallback(() => {
-    if (!t10 || C.current || m5.current === 0) return false;
+    if (!t14 || C.current || m5.current === 0) return false;
     let s4 = false;
-    if (t10 === "last-anchor") {
-      let a28 = b2.current, T = c8.current, O = a28 && T ? Ue(ee(a28, B.current)) : null;
-      if (!a28 || !T || !O) s4 = I2({ behavior: "auto" });
+    if (t14 === "last-anchor") {
+      let a30 = b2.current, T = c8.current, O = a30 && T ? Ue(ee(a30, B.current)) : null;
+      if (!a30 || !T || !O) s4 = I2({ behavior: "auto" });
       else {
         let ue = pe(O, T);
-        s4 = Se({ content: a28, spacer: B.current, viewport: T }) - ue <= T.clientHeight ? I2({ behavior: "auto" }) : le(O, { align: "start" }, { keepPreviousPeek: true });
+        s4 = Se({ content: a30, spacer: B.current, viewport: T }) - ue <= T.clientHeight ? I2({ behavior: "auto" }) : le(O, { align: "start" }, { keepPreviousPeek: true });
       }
-    } else s4 = t10 === "end" ? I2({ behavior: "auto" }) : ae({ behavior: "auto" });
+    } else s4 = t14 === "end" ? I2({ behavior: "auto" }) : ae({ behavior: "auto" });
     return s4 ? (C.current = true, true) : false;
-  }, [t10, le, I2, ae]), Te = g.useCallback(() => {
+  }, [t14, le, I2, ae]), Te = g.useCallback(() => {
     let s4 = b2.current;
     if (!s4) return;
-    let a28 = ee(s4, B.current), T = m5.current, O = p3.current;
-    m5.current = a28.length, p3.current = a28[0] ?? null, (() => {
+    let a30 = ee(s4, B.current), T = m5.current, O = p3.current;
+    m5.current = a30.length, p3.current = a30[0] ?? null, (() => {
       if (ce()) return;
       if (T === 0) {
-        if (ie() || a28.length > 0 && l5.current && I2({ behavior: "auto" })) return;
+        if (ie() || a30.length > 0 && l5.current && I2({ behavior: "auto" })) return;
         F(), w2();
         return;
       }
-      let W = O ? a28.indexOf(O) : -1;
+      let W = O ? a30.indexOf(O) : -1;
       if (_.current && W > 0) {
         de();
         return;
       }
-      if (a28.length > T) {
-        let $ = je(a28, T);
+      if (a30.length > T) {
+        let $ = je(a30, T);
         if ($) {
-          if (l5.current && u.current === "following-bottom" && Ne(a28, T)) {
+          if (l5.current && u.current === "following-bottom" && Ne(a30, T)) {
             I2({ behavior: "auto" });
             return;
           }
@@ -1465,8 +1478,8 @@ function nt({ autoScroll: e55 = false, defaultScrollPosition: t10 = "end", scrol
           return;
         }
       }
-      if (a28.length === T) {
-        let $ = Ge(a28, z.current);
+      if (a30.length === T) {
+        let $ = Ge(a30, z.current);
         if ($) {
           le($, { align: "start" }, { keepPreviousPeek: true }), z.current.add($);
           return;
@@ -1492,21 +1505,21 @@ function nt({ autoScroll: e55 = false, defaultScrollPosition: t10 = "end", scrol
         w2();
         return;
       }
-      h.current || (h.current = new IntersectionObserver((a28) => {
-        for (let T of a28) {
+      h.current || (h.current = new IntersectionObserver((a30) => {
+        for (let T of a30) {
           let O = T.target.dataset.messageId;
           O && (T.isIntersecting ? V.current.add(O) : V.current.delete(O));
         }
         w2();
-      }, { root: s4, rootMargin: `${-(H.current + N.current)}px 0px 0px 0px`, threshold: [0, 0.01, 0.5, 1] })), y.current.forEach((a28) => {
-        h.current?.observe(a28);
+      }, { root: s4, rootMargin: `${-(H.current + N.current)}px 0px 0px 0px`, threshold: [0, 0.01, 0.5, 1] })), y.current.forEach((a30) => {
+        h.current?.observe(a30);
       }), w2();
     }
   }, [w2, P]), he = g.useCallback(() => {
     f9.current !== null && (window.cancelAnimationFrame(f9.current), f9.current = null), h.current?.disconnect(), h.current = null, V.current.clear(), P.setSnapshot(Q);
-  }, [P]), pt = g.useCallback((s4, a28, T) => {
-    if (a28) {
-      y.current.set(s4, a28), h.current?.observe(a28), w2(), Y.current?.messageId === s4 && be();
+  }, [P]), pt = g.useCallback((s4, a30, T) => {
+    if (a30) {
+      y.current.set(s4, a30), h.current?.observe(a30), w2(), Y.current?.messageId === s4 && be();
       return;
     }
     T && y.current.get(s4) === T && (y.current.delete(s4), V.current.delete(s4), h.current?.unobserve(T), w2());
@@ -1524,54 +1537,54 @@ function nt({ autoScroll: e55 = false, defaultScrollPosition: t10 = "end", scrol
   }, [ie]), g.useEffect(() => () => {
     D.current !== null && (window.cancelAnimationFrame(D.current), D.current = null), f9.current !== null && (window.cancelAnimationFrame(f9.current), f9.current = null), E.current !== null && (window.clearTimeout(E.current), E.current = null), x.current !== null && (window.cancelAnimationFrame(x.current), x.current = null), h.current?.disconnect(), h.current = null;
   }, []), g.useLayoutEffect(() => {
-    if (e55 && u.current === "following-bottom" && m5.current > 0) {
+    if (e62 && u.current === "following-bottom" && m5.current > 0) {
       I2({ behavior: "auto" });
       return;
     }
     F();
-  }, [e55, F, I2]), { context: mt, registerMessage: pt };
+  }, [e62, F, I2]), { context: mt, registerMessage: pt };
 }
-function lt(e55) {
-  let t10 = g.useRef(e55);
-  return t10.current = e55, t10;
+function lt(e62) {
+  let t14 = g.useRef(e62);
+  return t14.current = e62, t14;
 }
 var st = g.createContext(null);
 var ct = g.createContext(null);
 function X2() {
-  let e55 = g.useContext(st);
-  if (!e55) throw new Error("useMessageScroller must be used within a MessageScroller.");
-  return e55;
+  let e62 = g.useContext(st);
+  if (!e62) throw new Error("useMessageScroller must be used within a MessageScroller.");
+  return e62;
 }
 function Et() {
-  let e55 = g.useContext(ct);
-  if (!e55) throw new Error("MessageScrollerItem must be used within a MessageScroller.");
-  return e55;
+  let e62 = g.useContext(ct);
+  if (!e62) throw new Error("MessageScrollerItem must be used within a MessageScroller.");
+  return e62;
 }
-function at({ autoScroll: e55 = false, children: t10, defaultScrollPosition: r32 = "end", scrollEdgeThreshold: n, scrollPreviousItemPeek: o43, scrollMargin: i3 }) {
-  let { context: S2, registerMessage: l5 } = nt({ autoScroll: e55, defaultScrollPosition: r32, scrollEdgeThreshold: n, scrollPreviousItemPeek: o43, scrollMargin: i3 });
-  return jsx3(st.Provider, { value: S2, children: jsx3(ct.Provider, { value: l5, children: t10 }) });
+function at({ autoScroll: e62 = false, children: t14, defaultScrollPosition: r42 = "end", scrollEdgeThreshold: n2, scrollPreviousItemPeek: o54, scrollMargin: i3 }) {
+  let { context: S2, registerMessage: l5 } = nt({ autoScroll: e62, defaultScrollPosition: r42, scrollEdgeThreshold: n2, scrollPreviousItemPeek: o54, scrollMargin: i3 });
+  return jsx3(st.Provider, { value: S2, children: jsx3(ct.Provider, { value: l5, children: t14 }) });
 }
-function it({ children: e55, ...t10 }) {
-  let { setRootElement: r32 } = X2();
-  return jsx3("div", { ref: r32, ...t10, children: e55 });
+function it({ children: e62, ...t14 }) {
+  let { setRootElement: r42 } = X2();
+  return jsx3("div", { ref: r42, ...t14, children: e62 });
 }
-function ut({ "aria-label": e55, children: t10, onKeyDown: r32, onScroll: n, onTouchMove: o43, onWheel: i3, preserveScrollOnPrepend: S2 = true, ref: l5, role: d2, tabIndex: E, ...b2 }) {
+function ut({ "aria-label": e62, children: t14, onKeyDown: r42, onScroll: n2, onTouchMove: o54, onWheel: i3, preserveScrollOnPrepend: S2 = true, ref: l5, role: d2, tabIndex: E, ...b2 }) {
   let { handleResize: C, preserveScrollOnPrependRef: p3, setViewportElement: m5, syncAfterScroll: L, userScrollIntent: y, viewportRef: u } = X2();
   p3.current = S2;
   let x = g.useCallback((v) => {
     m5(v), f8(l5)?.(v);
   }, [l5, m5]);
   function Y(v) {
-    L(), n?.(v);
+    L(), n2?.(v);
   }
   function k(v) {
     y(), i3?.(v);
   }
   function _(v) {
-    y(), o43?.(v);
+    y(), o54?.(v);
   }
   function G(v) {
-    Be.has(v.key) && y(), r32?.(v);
+    Be.has(v.key) && y(), r42?.(v);
   }
   return g.useEffect(() => {
     let v = u.current;
@@ -1582,12 +1595,12 @@ function ut({ "aria-label": e55, children: t10, onKeyDown: r32, onScroll: n, onT
     return N.observe(v), () => {
       window.cancelAnimationFrame(H), N.disconnect();
     };
-  }, [C, u]), jsx3("div", { ref: x, role: d2 ?? "region", "aria-label": e55 ?? "Messages", tabIndex: E ?? 0, onKeyDown: G, onScroll: Y, onTouchMove: _, onWheel: k, ...b2, children: t10 });
+  }, [C, u]), jsx3("div", { ref: x, role: d2 ?? "region", "aria-label": e62 ?? "Messages", tabIndex: E ?? 0, onKeyDown: G, onScroll: Y, onTouchMove: _, onWheel: k, ...b2, children: t14 });
 }
-function ft({ "aria-relevant": e55, children: t10, ref: r32, role: n, spacerClassName: o43, ...i3 }) {
+function ft({ "aria-relevant": e62, children: t14, ref: r42, role: n2, spacerClassName: o54, ...i3 }) {
   let { handleContentChange: S2, handleResize: l5, setContentElement: d2, setSpacerElement: E } = X2(), b2 = g.useRef(null), C = g.useCallback((p3) => {
-    b2.current = p3, d2(p3), f8(r32)?.(p3);
-  }, [r32, d2]);
+    b2.current = p3, d2(p3), f8(r42)?.(p3);
+  }, [r42, d2]);
   return g.useLayoutEffect(() => {
     let p3 = b2.current;
     if (!p3 || (S2(), typeof MutationObserver > "u")) return;
@@ -1604,23 +1617,23 @@ function ft({ "aria-relevant": e55, children: t10, ref: r32, role: n, spacerClas
     return L.observe(p3), () => {
       window.cancelAnimationFrame(m5), L.disconnect();
     };
-  }, [l5]), jsxs("div", { ref: C, role: n ?? "log", "aria-relevant": e55 ?? "additions", ...i3, children: [t10, jsx3("div", { ref: E, "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: o43 })] });
+  }, [l5]), jsxs("div", { ref: C, role: n2 ?? "log", "aria-relevant": e62 ?? "additions", ...i3, children: [t14, jsx3("div", { ref: E, "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: o54 })] });
 }
-function gt({ messageId: e55, ref: t10, scrollAnchor: r32 = false, ...n }) {
-  let o43 = Et(), i3 = g.useRef(null), S2 = g.useCallback((l5) => {
+function gt({ messageId: e62, ref: t14, scrollAnchor: r42 = false, ...n2 }) {
+  let o54 = Et(), i3 = g.useRef(null), S2 = g.useCallback((l5) => {
     let d2 = i3.current;
-    i3.current = l5, e55 && o43(e55, l5, d2), f8(t10)?.(l5);
-  }, [e55, t10, o43]);
-  return jsx3("div", { ref: S2, "data-message-id": e55, "data-scroll-anchor": r32 ? "true" : "false", ...n });
+    i3.current = l5, e62 && o54(e62, l5, d2), f8(t14)?.(l5);
+  }, [e62, t14, o54]);
+  return jsx3("div", { ref: S2, "data-message-id": e62, "data-scroll-anchor": r42 ? "true" : "false", ...n2 });
 }
-function St({ behavior: e55 = "smooth", children: t10, direction: r32 = "end", onClick: n, render: o43, tabIndex: i3, type: S2 = "button", ...l5 }) {
-  let { scrollToEnd: d2, scrollToStart: E, stateStore: b$1 } = X2(), C = lt(n), p3 = g.useCallback((u) => b$1.subscribe(u), [b$1]), m5 = g.useCallback(() => {
+function St({ behavior: e62 = "smooth", children: t14, direction: r42 = "end", onClick: n2, render: o54, tabIndex: i3, type: S2 = "button", ...l5 }) {
+  let { scrollToEnd: d2, scrollToStart: E, stateStore: b$1 } = X2(), C = lt(n2), p3 = g.useCallback((u) => b$1.subscribe(u), [b$1]), m5 = g.useCallback(() => {
     let u = b$1.getSnapshot();
-    return r32 === "start" ? u.start : u.end;
-  }, [r32, b$1]), L = g.useSyncExternalStore(p3, m5, m5), y = g.useCallback((u) => {
-    L && (C.current?.(u), u.defaultPrevented || (u.currentTarget.blur(), r32 === "start" ? E({ behavior: e55 }) : d2({ behavior: e55 })));
-  }, [e55, r32, L, C, d2, E]);
-  return S({ defaultTagName: "button", props: d({ type: S2, inert: !L, tabIndex: L ? i3 : -1, children: t10 ?? jsxs("span", { children: ["Scroll to ", r32] }), onClick: y }, l5), render: o43, state: { active: L, direction: r32 }, stateAttributesMapping: { active: (u) => ({ "data-active": u ? "true" : "false" }) } });
+    return r42 === "start" ? u.start : u.end;
+  }, [r42, b$1]), L = g.useSyncExternalStore(p3, m5, m5), y = g.useCallback((u) => {
+    L && (C.current?.(u), u.defaultPrevented || (u.currentTarget.blur(), r42 === "start" ? E({ behavior: e62 }) : d2({ behavior: e62 })));
+  }, [e62, r42, L, C, d2, E]);
+  return S({ defaultTagName: "button", props: d({ type: S2, inert: !L, tabIndex: L ? i3 : -1, children: t14 ?? jsxs("span", { children: ["Scroll to ", r42] }), onClick: y }, l5), render: o54, state: { active: L, direction: r42 }, stateAttributesMapping: { active: (u) => ({ "data-active": u ? "true" : "false" }) } });
 }
 var $t = { Provider: at, Root: it, Viewport: ut, Content: ft, Item: gt, Button: St };
 
@@ -1859,14 +1872,14 @@ var use = React2[" use ".trim().toString()];
 // ../../apps/web/src/components/ui/button.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none touch-manipulation focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow,translate] duration-(--duration-quick) ease-(--ease-smooth-out) motion-reduce:transition-none outline-none select-none touch-manipulation focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 motion-safe:active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        default: "surface-primary bg-primary bg-clip-border text-primary-foreground hover:bg-primary/90 active:shadow-field",
+        outline: "surface-control border-input/80 bg-card text-foreground hover:border-input hover:bg-muted/60 aria-expanded:bg-muted aria-expanded:text-foreground active:shadow-field",
+        secondary: "surface-control border-border bg-secondary text-secondary-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground active:shadow-field",
+        ghost: "text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline"
       },
@@ -1907,34 +1920,6 @@ function Button({
   );
 }
 
-// ../../apps/web/src/hooks/use-is-resizing.ts
-import { useEffect as useEffect2, useState } from "react";
-var SETTLE_MS = 120;
-function useIsResizing(target) {
-  const [isResizing, setIsResizing] = useState(false);
-  useEffect2(() => {
-    const node = target.current;
-    if (!node || typeof ResizeObserver === "undefined") return;
-    let settle = 0;
-    let isOpeningReport = true;
-    const observer = new ResizeObserver(() => {
-      if (isOpeningReport) {
-        isOpeningReport = false;
-        return;
-      }
-      setIsResizing(true);
-      window.clearTimeout(settle);
-      settle = window.setTimeout(() => setIsResizing(false), SETTLE_MS);
-    });
-    observer.observe(node);
-    return () => {
-      window.clearTimeout(settle);
-      observer.disconnect();
-    };
-  }, [target]);
-  return isResizing;
-}
-
 // ../../apps/web/src/components/ui/message-scroller.tsx
 import { Fragment as Fragment25, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function MessageScrollerProvider({
@@ -1969,9 +1954,12 @@ function usePinnedToEnd(viewport) {
     const remember = () => {
       wasAtEnd = node.scrollHeight - node.scrollTop - node.clientHeight <= AT_END_PX;
     };
+    let height = node.clientHeight;
     const observer = new ResizeObserver(() => {
       const drift = node.scrollHeight - node.scrollTop - node.clientHeight;
-      if (wasAtEnd && drift > DRIFT_PX) {
+      const shrank = node.clientHeight < height;
+      height = node.clientHeight;
+      if (wasAtEnd && shrank && drift > DRIFT_PX) {
         node.scrollTo({
           top: node.scrollHeight - node.clientHeight,
           behavior: "instant"
@@ -1992,11 +1980,11 @@ var MAX_STEP_MS = 64;
 function prefersReducedMotion() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function useGlidingScroll(viewport, isSettled) {
-  const settled = React3.useRef(isSettled);
+function useGlidingScroll(viewport, hasLanded) {
+  const landed = React3.useRef(hasLanded);
   React3.useLayoutEffect(() => {
-    settled.current = isSettled;
-  }, [isSettled]);
+    landed.current = hasLanded;
+  }, [hasLanded]);
   React3.useEffect(() => {
     const node = viewport.current;
     if (!node) return;
@@ -2004,6 +1992,7 @@ function useGlidingScroll(viewport, isSettled) {
     let target = null;
     let frame = 0;
     let last = 0;
+    let box = { width: node.clientWidth, height: node.clientHeight };
     const stop = () => {
       if (frame !== 0) cancelAnimationFrame(frame);
       frame = 0;
@@ -2012,11 +2001,12 @@ function useGlidingScroll(viewport, isSettled) {
     const step = (now) => {
       frame = 0;
       if (target === null) return;
-      const elapsed = Math.min(now - last, MAX_STEP_MS);
+      const elapsed = Math.max(0, Math.min(now - last, MAX_STEP_MS));
       last = now;
-      const left = target - node.scrollTop;
+      const goal = Math.min(target, node.scrollHeight - node.clientHeight);
+      const left = goal - node.scrollTop;
       if (Math.abs(left) < 0.5) {
-        node.scrollTop = target;
+        node.scrollTop = goal;
         target = null;
         return;
       }
@@ -2025,7 +2015,10 @@ function useGlidingScroll(viewport, isSettled) {
     };
     const glide = (options, y) => {
       const asked = typeof options === "number" ? { left: options, top: y } : options;
-      const glides = asked !== void 0 && typeof asked.top === "number" && asked.behavior !== "instant" && settled.current && !prefersReducedMotion();
+      const size = { width: node.clientWidth, height: node.clientHeight };
+      const shrank = size.width !== box.width || size.height < box.height;
+      box = size;
+      const glides = asked !== void 0 && typeof asked.top === "number" && asked.behavior !== "instant" && landed.current && !shrank && !prefersReducedMotion();
       if (!glides) {
         stop();
         scrollNatively.call(node, asked);
@@ -2070,10 +2063,8 @@ function MessageScrollerViewport({
 }) {
   const viewport = React3.useRef(null);
   const hasLanded = useHasLanded();
-  const isResizing = useIsResizing(viewport);
-  const isSettled = hasLanded && !isResizing;
   usePinnedToEnd(viewport);
-  useGlidingScroll(viewport, isSettled);
+  useGlidingScroll(viewport, hasLanded);
   const holdViewport = React3.useCallback(
     (node) => {
       viewport.current = node;
@@ -2087,7 +2078,6 @@ function MessageScrollerViewport({
     {
       ref: holdViewport,
       "data-slot": "message-scroller-viewport",
-      "data-settled": isSettled ? "" : void 0,
       className: cn(
         "size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin]",
         // The fade says "there is more below", so it only belongs to a
@@ -2266,9 +2256,9 @@ var SETTLE_BODY = cn(
 
 // ../../apps/web/src/components/support-widget/widget-composer.tsx
 import {
-  useEffect as useEffect6,
-  useRef as useRef7,
-  useState as useState5
+  useEffect as useEffect5,
+  useRef as useRef8,
+  useState as useState4
 } from "react";
 
 // src/next-image-shim.tsx
@@ -2296,7 +2286,7 @@ import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var KIND_ICONS = {
   image: ImageSquare,
   video: Play,
-  file: File
+  file: File2
 };
 function AttachmentDraftChip({
   draft,
@@ -2369,7 +2359,7 @@ function AttachmentDraftChip({
 }
 
 // ../../apps/web/src/components/attachments/use-attachment-drafts.ts
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
 var MAX_BYTES = 25 * 1024 * 1024;
 var UNSAFE_TYPES = [
   "text/html",
@@ -2410,12 +2400,12 @@ function useAttachmentDrafts({
   accept,
   max
 } = {}) {
-  const [drafts, setDrafts] = useState3([]);
+  const [drafts, setDrafts] = useState2([]);
   const draftsRef = useRef4(drafts);
-  useEffect4(() => {
+  useEffect3(() => {
     draftsRef.current = drafts;
   }, [drafts]);
-  useEffect4(() => () => draftsRef.current.forEach(release), []);
+  useEffect3(() => () => draftsRef.current.forEach(release), []);
   function add(files) {
     const picked = Array.from(files).map((file, index) => {
       const isTooBig = file.size > MAX_BYTES;
@@ -2460,12 +2450,12 @@ function useAttachmentDrafts({
 }
 
 // ../../apps/web/src/components/attachments/use-attachment-target.ts
-import { useRef as useRef5, useState as useState4 } from "react";
+import { useRef as useRef5, useState as useState3 } from "react";
 function useAttachmentTarget({
   onFiles,
   disabled = false
 }) {
-  const [isDropTarget, setIsDropTarget] = useState4(false);
+  const [isDropTarget, setIsDropTarget] = useState3(false);
   const depth = useRef5(0);
   function handleDragEnter(event) {
     if (disabled || !event.dataTransfer.types.includes("Files")) return;
@@ -2516,7 +2506,7 @@ var widgetButtonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary,oklch(0.97_0_0)),var(--foreground,oklch(0.145_0_0))_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline"
@@ -2561,12 +2551,10 @@ function WidgetButton({
   );
 }
 
-// ../../apps/web/src/components/ui/text-field.ts
-var TEXT_FIELD_SHELL = [
+// ../../apps/web/src/components/support-widget/widget-field.ts
+var WIDGET_TEXT_FIELD_SHELL = [
   "rounded-lg border border-input bg-transparent text-sm max-sm:text-base transition-[color,box-shadow] outline-none dark:bg-input/30",
   "placeholder:text-muted-foreground",
-  // Focus recolours the hairline rather than adding a ring on top of it, so
-  // the outline stays exactly 1px and nothing swells on click.
   "focus-within:border-ring",
   "aria-invalid:border-destructive",
   "disabled:pointer-events-none disabled:opacity-50"
@@ -2591,12 +2579,12 @@ function Textarea({ className, ...props }) {
 }
 
 // ../../apps/web/src/hooks/use-typing-signal.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef6 } from "react";
 var REFRESH_MS = 2500;
 var IDLE_MS = 8e3;
 function useTypingSignal(onChange) {
   const onChangeRef = useRef6(onChange);
-  useEffect5(() => {
+  useEffect4(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
   const isTypingRef = useRef6(false);
@@ -2630,10 +2618,33 @@ function useTypingSignal(onChange) {
       send(true);
     }
   }, [send, stop]);
-  useEffect5(() => () => stop(), [stop]);
+  useEffect4(() => () => stop(), [stop]);
   return { ping, stop, settle };
 }
 
+// ../../apps/web/src/components/support-widget/use-eased-height.ts
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
+function useEasedHeight(field) {
+  const box = useRef7(null);
+  useLayoutEffect4(() => {
+    const outer = box.current;
+    const inner = field.current;
+    if (!outer || !inner) return;
+    const follow = () => {
+      outer.style.height = `${inner.offsetHeight}px`;
+    };
+    follow();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(follow);
+    observer.observe(inner);
+    return () => {
+      observer.disconnect();
+      outer.style.height = "";
+    };
+  }, [field]);
+  return box;
+}
+
 // ../../apps/web/src/components/brand-art.ts
 var BRAND_INK = "#191919";
 var LOGO = {
@@ -2661,7 +2672,7 @@ var LOGO_MASK_URL = `url("data:image/svg+xml,${encodeURIComponent(
 )}")`;
 
 // ../../apps/web/src/components/brand.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var INVERT_IN_DARK = "dark:invert";
 function Wordmark({
   width = 132,
@@ -2714,7 +2725,11 @@ function ShimmerLogo({
         WebkitMaskSize: "contain",
         WebkitMaskRepeat: "no-repeat",
         WebkitMaskPosition: "center",
-        backgroundImage: "linear-gradient(115deg, var(--muted) 34%, var(--muted-foreground) 50%, var(--muted) 66%)",
+        backgroundImage: (
+          // With the widget's own light values behind the host's, since this
+          // mark also draws on pages that define neither.
+          "linear-gradient(115deg, var(--muted, oklch(0.955 0 0)) 34%, var(--muted-foreground, oklch(0.556 0 0)) 50%, var(--muted, oklch(0.955 0 0)) 66%)"
+        ),
         backgroundSize: "300% 100%"
       },
       className: cn(
@@ -2726,10 +2741,10 @@ function ShimmerLogo({
 }
 
 // ../../apps/web/src/components/support-widget/widget-badge.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var MEDIAN_URL = "https://median.sh";
 function PoweredByMedian({ className }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "a",
     {
       href: MEDIAN_URL,
@@ -2754,12 +2769,13 @@ function PoweredByMedian({ className }) {
 }
 
 // ../../apps/web/src/components/support-widget/widget-composer.tsx
-import { Fragment as Fragment26, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var SWAP = "transition-[opacity,translate] duration-300 ease-out motion-reduce:transition-none";
 var RISE = "transition-transform duration-450 ease-spring motion-reduce:transition-none";
 var SINK = "transition-transform duration-250 ease-in motion-reduce:transition-none";
 var ROLL = "transition-transform duration-350 ease-out-quint motion-reduce:transition-none";
+var GROW = "transition-[height] duration-200 ease-out-quint motion-reduce:transition-none";
 var SAVED_MS = 1200;
 function WidgetComposer({
   onSend,
@@ -2773,11 +2789,12 @@ function WidgetComposer({
   compact = false
 }) {
   const isStacked = variant === "stacked";
-  const [draft, setDraft] = useState5("");
-  const [email, setEmail] = useState5("");
-  const [answer, setAnswer] = useState5("none");
-  const fileInputRef = useRef7(null);
-  const draftRef = useRef7(null);
+  const [draft, setDraft] = useState4("");
+  const [email, setEmail] = useState4("");
+  const [answer, setAnswer] = useState4("none");
+  const fileInputRef = useRef8(null);
+  const draftRef = useRef8(null);
+  const draftBoxRef = useEasedHeight(draftRef);
   const attachments = useAttachmentDrafts();
   const target = useAttachmentTarget({ onFiles: attachments.add });
   const typing = useTypingSignal(onTypingChange);
@@ -2793,12 +2810,12 @@ function WidgetComposer({
     setAnswer("saved");
     onSubmitEmail(email.trim());
   }
-  useEffect6(() => {
+  useEffect5(() => {
     if (answer !== "saved") return;
     const timer = setTimeout(() => setAnswer("settled"), SAVED_MS);
     return () => clearTimeout(timer);
   }, [answer]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (answer !== "saved" || askForEmail) return;
     draftRef.current?.focus({ preventScroll: true });
   }, [answer, askForEmail]);
@@ -2848,24 +2865,42 @@ function WidgetComposer({
       children: /* @__PURE__ */ jsx13(Plus, { className: isStacked ? "size-5" : void 0 })
     }
   );
-  const draftBox = /* @__PURE__ */ jsx13(
-    Textarea,
-    {
-      ref: draftRef,
-      rows: 1,
-      value: draft,
-      onChange: (event) => {
-        setDraft(event.target.value);
-        typing.ping();
-      },
-      onKeyDown: handleKeyDown,
-      placeholder: target.isDropTarget ? "Drop to attach" : placeholder,
-      "aria-label": "Message",
-      className: cn(
-        "max-h-40 flex-1 max-sm:text-[16px]",
-        isStacked ? "min-h-9 px-2 pt-1.5 pb-1 text-sm" : "min-h-10 px-2 py-2 text-base"
-      )
-    }
+  const draftBox = (
+    // The field sizes itself to its words and sits at the foot of the box,
+    // so a line that wraps stays where it was typed and the box's top edge
+    // rises to take the first line in: the composer grows upward, and the
+    // words hold still under the caret. The box follows the field on a
+    // curve and clips whatever it is behind by.
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: draftBoxRef,
+        className: cn(
+          "flex flex-col justify-end overflow-clip",
+          isStacked ? "w-full" : "min-w-0 flex-1",
+          draft.length > 0 && GROW
+        ),
+        children: /* @__PURE__ */ jsx13(
+          Textarea,
+          {
+            ref: draftRef,
+            rows: 1,
+            value: draft,
+            onChange: (event) => {
+              setDraft(event.target.value);
+              typing.ping();
+            },
+            onKeyDown: handleKeyDown,
+            placeholder: target.isDropTarget ? "Drop to attach" : placeholder,
+            "aria-label": "Message",
+            className: cn(
+              "max-h-40 shrink-0 max-sm:text-[16px]",
+              isStacked ? "min-h-9 px-2 pt-1.5 pb-1 text-sm" : "min-h-10 px-2 py-2 text-base"
+            )
+          }
+        )
+      }
+    )
   );
   const sendButton = /* @__PURE__ */ jsx13(
     WidgetButton,
@@ -2925,7 +2960,7 @@ function WidgetComposer({
     // anyway. Paste rides on the same element, so it is caught wherever the
     // caret happens to be inside the composer. None of that while the email
     // is asked for: there is no message yet to attach anything to.
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn(
@@ -2941,7 +2976,7 @@ function WidgetComposer({
               onRemove: () => attachments.remove(item.id)
             }
           ) }, item.id)) }),
-          /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
             /* @__PURE__ */ jsx13(
               "div",
               {
@@ -2958,8 +2993,8 @@ function WidgetComposer({
                       showTab ? RISE : SINK,
                       !showTab && "translate-y-full"
                     ),
-                    children: /* @__PURE__ */ jsxs5("span", { className: "grid overflow-hidden", children: [
-                      /* @__PURE__ */ jsxs5(
+                    children: /* @__PURE__ */ jsxs6("span", { className: "grid overflow-hidden", children: [
+                      /* @__PURE__ */ jsxs6(
                         "span",
                         {
                           "aria-hidden": isSaved,
@@ -2974,7 +3009,7 @@ function WidgetComposer({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxs5(
+                      /* @__PURE__ */ jsxs6(
                         "span",
                         {
                           "aria-hidden": !isSaved,
@@ -2994,11 +3029,11 @@ function WidgetComposer({
                 )
               }
             ),
-            /* @__PURE__ */ jsxs5(
+            /* @__PURE__ */ jsxs6(
               "div",
               {
                 className: cn(
-                  TEXT_FIELD_SHELL,
+                  WIDGET_TEXT_FIELD_SHELL,
                   "relative z-10 grid bg-card p-2 transition-colors dark:bg-card",
                   // Half the pill's one line height, so it is a full pill at one
                   // line and keeps those corners as it grows. The box keeps a
@@ -3020,17 +3055,17 @@ function WidgetComposer({
                         SWAP,
                         isAsking && "-translate-y-1 opacity-0 pointer-events-none"
                       ),
-                      children: isStacked ? /* @__PURE__ */ jsxs5(Fragment26, { children: [
+                      children: isStacked ? /* @__PURE__ */ jsxs6(Fragment26, { children: [
                         draftBox,
-                        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
                           fileInput,
                           addButton,
-                          /* @__PURE__ */ jsxs5("div", { className: "ml-auto flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-2", children: [
                             badge,
                             sendButton
                           ] })
                         ] })
-                      ] }) : /* @__PURE__ */ jsxs5(Fragment26, { children: [
+                      ] }) : /* @__PURE__ */ jsxs6(Fragment26, { children: [
                         fileInput,
                         addButton,
                         draftBox,
@@ -3049,13 +3084,13 @@ function WidgetComposer({
                         SWAP,
                         !isAsking && "pointer-events-none translate-y-1 opacity-0"
                       ),
-                      children: isStacked ? /* @__PURE__ */ jsxs5(Fragment26, { children: [
+                      children: isStacked ? /* @__PURE__ */ jsxs6(Fragment26, { children: [
                         emailBox,
-                        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-end gap-2", children: [
+                        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-2", children: [
                           badge,
                           emailButton
                         ] })
-                      ] }) : /* @__PURE__ */ jsxs5(Fragment26, { children: [
+                      ] }) : /* @__PURE__ */ jsxs6(Fragment26, { children: [
                         emailBox,
                         emailButton
                       ] })
@@ -3072,13 +3107,17 @@ function WidgetComposer({
   );
 }
 
+// ../../apps/web/src/components/support-widget/widget-corner.ts
+var WIDGET_RADIUS = "0.875rem";
+var WIDGET_CORNER = "rounded-[0.875rem]";
+
 // ../../apps/web/src/components/support-widget/widget-destination.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function WidgetDestination({
   destination,
   onFollow
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     WidgetButton,
     {
       type: "button",
@@ -3100,10 +3139,24 @@ function WidgetDestination({
 }
 
 // ../../apps/web/src/components/avatar.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 
 // ../../apps/web/src/components/initial-badge.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
+var TONES = [
+  "bg-[var(--avatar-blue,#e0edfa)] text-[var(--avatar-blue-foreground,#37628c)]",
+  "bg-[var(--avatar-violet,#eae4f7)] text-[var(--avatar-violet-foreground,#705894)]",
+  "bg-[var(--avatar-amber,#f8ead6)] text-[var(--avatar-amber-foreground,#8b6434)]",
+  "bg-[var(--avatar-teal,#dbefea)] text-[var(--avatar-teal-foreground,#3c766d)]",
+  "bg-[var(--avatar-rose,#f5e2e8)] text-[var(--avatar-rose-foreground,#92586c)]"
+];
+function toneFor(value) {
+  let hash = 0;
+  for (const character of value.trim().toLowerCase()) {
+    hash = hash * 31 + character.charCodeAt(0) >>> 0;
+  }
+  return TONES[hash % TONES.length];
+}
 function InitialBadge({
   value,
   className
@@ -3114,7 +3167,8 @@ function InitialBadge({
       "aria-hidden": true,
       className: cn(
         // Sized to match UserAvatar, since the two sit side by side in the nav.
-        "grid size-4.5 shrink-0 place-items-center rounded border text-[10px] font-semibold text-muted-foreground",
+        "surface-control grid size-4.5 shrink-0 place-items-center rounded border border-foreground/5 text-[10px] font-medium",
+        toneFor(value),
         className
       ),
       children: value.trim().charAt(0).toUpperCase() || "?"
@@ -3131,7 +3185,7 @@ function Avatar({
   unoptimized = false,
   className
 }) {
-  const [failedSrc, setFailedSrc] = useState6(null);
+  const [failedSrc, setFailedSrc] = useState5(null);
   const hasFailed = failedSrc !== null && failedSrc === src;
   const shape2 = "size-4.5 shrink-0 rounded-full";
   if (!src || hasFailed) {
@@ -3139,7 +3193,7 @@ function Avatar({
       InitialBadge,
       {
         value: name,
-        className: cn(shape2, "border-none bg-muted text-[10px]", className)
+        className: cn(shape2, "border-none text-[10px]", className)
       }
     );
   }
@@ -3153,7 +3207,7 @@ function Avatar({
       unoptimized,
       onError: () => setFailedSrc(src),
       draggable: false,
-      className: cn(shape2, "bg-muted object-cover", className)
+      className: cn(shape2, "bg-muted object-cover ring-1 ring-foreground/5", className)
     }
   );
 }
@@ -3192,7 +3246,7 @@ function WidgetAvatar({
         {
           src: agent.avatarUrl,
           name: agent.name,
-          className: "size-full rounded-[inherit]"
+          className: "size-full rounded-[inherit] bg-muted bg-none font-semibold text-muted-foreground shadow-none ring-0"
         }
       )
     }
@@ -3215,7 +3269,7 @@ function WidgetAvatarStack({
 }
 
 // ../../apps/web/src/components/support-widget/widget-empty.tsx
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var STARTERS = [
   {
     label: "Ask a question",
@@ -3242,7 +3296,7 @@ function WidgetEmpty({
   compact = false
 }) {
   const agent = team.find((member) => member.kind === "ai") ?? team[0];
-  return /* @__PURE__ */ jsxs7("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-5 px-6 pb-2 text-center", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-5 px-6 pb-2 text-center", children: [
     agent && /* @__PURE__ */ jsx18(
       WidgetAvatar,
       {
@@ -3253,7 +3307,7 @@ function WidgetEmpty({
         )
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { className: "flex max-w-72 animate-in flex-col gap-1 delay-150 duration-500 ease-out fade-in-0 slide-in-from-bottom-2 fill-mode-backwards motion-reduce:animate-none", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex max-w-72 animate-in flex-col gap-1 delay-150 duration-500 ease-out fade-in-0 slide-in-from-bottom-2 fill-mode-backwards motion-reduce:animate-none", children: [
       agent && /* @__PURE__ */ jsx18(
         "p",
         {
@@ -3275,7 +3329,7 @@ function WidgetEmpty({
         }
       )
     ] }),
-    onPick && /* @__PURE__ */ jsx18("div", { className: "flex w-full max-w-md flex-col gap-2 pt-1", children: STARTERS.map((starter, index) => /* @__PURE__ */ jsxs7(
+    onPick && /* @__PURE__ */ jsx18("div", { className: "flex w-full max-w-md flex-col gap-2 pt-1", children: STARTERS.map((starter, index) => /* @__PURE__ */ jsxs8(
       WidgetButton,
       {
         type: "button",
@@ -3316,7 +3370,7 @@ function WidgetEmpty({
 }
 
 // ../../apps/web/src/components/support-widget/widget-header.tsx
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function WidgetHeader({
   presence,
   onClose,
@@ -3327,7 +3381,7 @@ function WidgetHeader({
   compact = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "header",
     {
       ...grabHandlers,
@@ -3344,7 +3398,7 @@ function WidgetHeader({
         ]
       ),
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col pt-0.5", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 flex-col pt-0.5", children: [
           /* @__PURE__ */ jsx19(
             "h2",
             {
@@ -3366,7 +3420,7 @@ function WidgetHeader({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-3", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 items-center gap-3", children: [
           /* @__PURE__ */ jsx19(
             WidgetAvatarStack,
             {
@@ -3374,7 +3428,7 @@ function WidgetHeader({
               avatarClassName: compact ? "size-8" : void 0
             }
           ),
-          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5", children: [
             onToggleExpanded && /* @__PURE__ */ jsx19(
               WidgetButton,
               {
@@ -3412,16 +3466,16 @@ function WidgetLoading() {
 }
 
 // ../../apps/web/src/components/support-widget/widget-locked.tsx
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function WidgetLocked({
   orgName,
   onSignIn,
   showBadge = true
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-5 px-8 text-center", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-5 px-8 text-center", children: [
       /* @__PURE__ */ jsx21("span", { className: "grid size-16 animate-in place-items-center rounded-2xl bg-muted duration-500 ease-out fade-in-0 zoom-in-95 motion-reduce:animate-none", children: /* @__PURE__ */ jsx21(LockSimple, { className: "size-7 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex max-w-72 animate-in flex-col gap-1 delay-150 duration-500 ease-out fade-in-0 slide-in-from-bottom-2 fill-mode-backwards motion-reduce:animate-none", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex max-w-72 animate-in flex-col gap-1 delay-150 duration-500 ease-out fade-in-0 slide-in-from-bottom-2 fill-mode-backwards motion-reduce:animate-none", children: [
         /* @__PURE__ */ jsx21("p", { className: "text-xl font-semibold tracking-tight", children: "Sign in to chat" }),
         /* @__PURE__ */ jsx21("p", { className: "text-base text-balance text-muted-foreground", children: orgName ? `Ask ${orgName} anything once you are signed in.` : "Sign in to contact our support team." })
       ] }),
@@ -3440,7 +3494,7 @@ function WidgetLocked({
 }
 
 // ../../apps/web/src/components/support-widget/widget-message.tsx
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 
 // ../../apps/web/src/components/ui/badge.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -3449,10 +3503,10 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-secondary text-secondary-foreground",
-        muted: "bg-muted text-muted-foreground",
+        default: "bg-secondary text-secondary-foreground inset-ring-1 inset-ring-foreground/5",
+        muted: "bg-muted/70 text-muted-foreground inset-ring-1 inset-ring-foreground/5",
         outline: "border border-border text-muted-foreground",
-        solid: "bg-primary text-primary-foreground"
+        solid: "surface-primary bg-primary text-primary-foreground"
       }
     },
     defaultVariants: {
@@ -3479,7 +3533,7 @@ function Badge({
 }
 
 // ../../apps/web/src/components/ui/morph-bubble.tsx
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef8 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var MORPH_MS = 350;
 var MORPH_EASING = "ease-in-out";
@@ -3507,11 +3561,11 @@ function MorphBubble({
   contentClassName,
   children
 }) {
-  const box = useRef8(null);
-  const content = useRef8(null);
-  const previous = useRef8(null);
-  const running = useRef8([]);
-  useLayoutEffect4(() => {
+  const box = useRef9(null);
+  const content = useRef9(null);
+  const previous = useRef9(null);
+  const running = useRef9([]);
+  useLayoutEffect5(() => {
     const outer = box.current;
     const inner = content.current;
     if (!outer || !inner) return;
@@ -3564,8 +3618,8 @@ function MorphBubble({
 }
 
 // ../../apps/web/src/components/support-widget/widget-attachments.tsx
-import { useState as useState7 } from "react";
-import { Fragment as Fragment27, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment27, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var SURFACE = "rounded-xl border border-foreground/10 bg-card/70";
 function OpenAttachment({
   attachment,
@@ -3593,9 +3647,9 @@ function MediaTile({
   attachment,
   className
 }) {
-  const [hasFailed, setHasFailed] = useState7(false);
+  const [hasFailed, setHasFailed] = useState6(false);
   if (!attachment.previewUrl || hasFailed) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -3610,7 +3664,7 @@ function MediaTile({
       }
     );
   }
-  return /* @__PURE__ */ jsxs10("figure", { className: cn(SURFACE, "relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs11("figure", { className: cn(SURFACE, "relative overflow-hidden", className), children: [
     /* @__PURE__ */ jsx24(
       "img",
       {
@@ -3634,9 +3688,9 @@ function MediaTile({
   ] });
 }
 function FileRow({ attachment }) {
-  return /* @__PURE__ */ jsx24(OpenAttachment, { attachment, children: /* @__PURE__ */ jsxs10("div", { className: cn(SURFACE, "flex items-center gap-2.5 px-2.5 py-2"), children: [
-    /* @__PURE__ */ jsx24(File, { className: "size-5 shrink-0 text-muted-foreground" }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
+  return /* @__PURE__ */ jsx24(OpenAttachment, { attachment, children: /* @__PURE__ */ jsxs11("div", { className: cn(SURFACE, "flex items-center gap-2.5 px-2.5 py-2"), children: [
+    /* @__PURE__ */ jsx24(File2, { className: "size-5 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
       /* @__PURE__ */ jsx24("p", { className: "truncate text-sm font-medium", children: attachment.name }),
       /* @__PURE__ */ jsx24("p", { className: "truncate text-sm text-muted-foreground", children: attachment.size })
     ] })
@@ -3647,7 +3701,7 @@ function WidgetAttachments({
 }) {
   const media = attachments.filter((one) => one.kind !== "file");
   const files = attachments.filter((one) => one.kind === "file");
-  return /* @__PURE__ */ jsxs10("div", { className: "flex w-64 max-w-full flex-col gap-2", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex w-64 max-w-full flex-col gap-2", children: [
     media.length > 0 && /* @__PURE__ */ jsx24("div", { className: cn("grid gap-2", media.length > 1 && "grid-cols-2"), children: media.map((attachment) => /* @__PURE__ */ jsx24(
       OpenAttachment,
       {
@@ -3685,7 +3739,7 @@ function WidgetBubble({
 import { Suspense } from "react";
 
 // ../../apps/web/src/components/ui/line-reveal.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef9, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef10, useState as useState7 } from "react";
 
 // ../../apps/web/src/hooks/use-media-query.ts
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -3712,7 +3766,7 @@ function durationMs(token, fallback, from = document.documentElement) {
 }
 
 // ../../apps/web/src/components/ui/line-reveal.tsx
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var LAST_BEAT = 11;
 function lineSlices(root) {
   const host = root.getBoundingClientRect();
@@ -3748,7 +3802,7 @@ function lineSlices(root) {
     return [{ top: 0, height: host.height }];
   }
   const unique = [...new Set(tops.map((top) => Math.round(top)))].sort(
-    (a28, b2) => a28 - b2
+    (a30, b2) => a30 - b2
   );
   return unique.map((top, index) => {
     const next = unique[index + 1] ?? Math.ceil(host.height);
@@ -3798,10 +3852,10 @@ function LineReveal({
   children,
   className
 }) {
-  const sourceRef = useRef9(null);
-  const stageRef = useRef9(null);
+  const sourceRef = useRef10(null);
+  const stageRef = useRef10(null);
   const reduce = useMediaQuery("(prefers-reduced-motion: reduce)");
-  const [play2, setPlay] = useState8({
+  const [play2, setPlay] = useState7({
     key: contentKey,
     delay,
     isPlaying: !reduce
@@ -3810,19 +3864,20 @@ function LineReveal({
     setPlay({ key: contentKey, delay, isPlaying: !reduce });
   }
   const { key: playKey, delay: hold, isPlaying } = play2;
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (reduce || !isPlaying) return;
     const source = sourceRef.current;
     const stage = stageRef.current;
     if (source === null || stage === null) return;
+    const wait = typeof hold === "number" ? hold : durationMs(hold, 0, stage);
     let painted = false;
     let timer = 0;
     const end = () => setPlay((now) => ({ ...now, isPlaying: false }));
     const paint = () => {
       if (painted) return;
-      if (!paintSlices(source, stage, hold)) return;
+      if (!paintSlices(source, stage, wait)) return;
       painted = true;
-      timer = window.setTimeout(end, playMs(stage, hold));
+      timer = window.setTimeout(end, playMs(stage, wait));
       observer.disconnect();
     };
     const observer = new ResizeObserver(paint);
@@ -3839,7 +3894,7 @@ function LineReveal({
     };
   }, [playKey, hold, isPlaying, reduce]);
   const showSlices = isPlaying && !reduce;
-  return /* @__PURE__ */ jsxs11("div", { className: cn("relative", className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx26("div", { className: showSlices ? "pointer-events-none opacity-0" : void 0, children: /* @__PURE__ */ jsx26("div", { ref: sourceRef, children }) }),
     showSlices && /* @__PURE__ */ jsx26(
       "div",
@@ -3868,10 +3923,10 @@ function WidgetMessageBody({
 }
 
 // ../../apps/web/src/components/support-widget/widget-typing.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 var DOTS = [0, 160, 320];
 function WidgetTyping({ label }) {
-  return /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1.5 py-2", children: [
+  return /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-1.5 py-2", children: [
     /* @__PURE__ */ jsx28("span", { className: "sr-only", children: label }),
     DOTS.map((delay) => /* @__PURE__ */ jsx28(
       "span",
@@ -3886,16 +3941,17 @@ function WidgetTyping({ label }) {
 }
 
 // ../../apps/web/src/components/support-widget/widget-message.tsx
-import { Fragment as Fragment28, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 var BUBBLE = "max-w-[min(80%,36rem)] rounded-2xl px-4 py-2.5 text-base";
 var COMPACT_BUBBLE = "max-w-[min(80%,36rem)] rounded-2xl px-3.5 py-2 text-sm";
-var VISITOR_BUBBLE = "bg-[color-mix(in_oklch,var(--muted),var(--foreground)_12%)]";
+var VISITOR_BUBBLE = "bg-[color-mix(in_oklch,var(--muted,oklch(0.955_0_0)),var(--foreground,oklch(0.145_0_0))_12%)]";
 var ARRIVES = "animate-in fade-in-0 slide-in-from-bottom-1 duration-300 ease-out-quint motion-reduce:animate-none";
+var SENT = "animate-in fade-in-0 slide-in-from-bottom-3 zoom-in-95 origin-bottom-right duration-400 ease-out-quint motion-reduce:animate-none";
 var LADDER_DELAY_MS = Math.round(MORPH_MS * 0.7);
 function WidgetDivider({ message }) {
   const label = message.startsConversation ? "New conversation" : message.dayLabel;
   if (!label) return null;
-  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 py-1", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 py-1", children: [
     /* @__PURE__ */ jsx29("span", { className: "h-px flex-1 bg-border" }),
     /* @__PURE__ */ jsx29("span", { className: "text-sm text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx29("span", { className: "h-px flex-1 bg-border" })
@@ -3908,7 +3964,7 @@ function WidgetMessage({
   compact = false,
   isLive = false
 }) {
-  return message.sender === "visitor" ? /* @__PURE__ */ jsx29(VisitorMessage, { message, compact }) : /* @__PURE__ */ jsx29(
+  return message.sender === "visitor" ? /* @__PURE__ */ jsx29(VisitorMessage, { message, compact, isLive }) : /* @__PURE__ */ jsx29(
     AgentMessage,
     {
       message,
@@ -3932,7 +3988,7 @@ function BubbleContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs13(Fragment28, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment28, { children: [
     hasAttachments && /* @__PURE__ */ jsx29(WidgetAttachments, { attachments: message.attachments ?? [] }),
     message.body && /* @__PURE__ */ jsx29(
       WidgetMessageBody,
@@ -3946,9 +4002,10 @@ function BubbleContent({
 }
 function VisitorMessage({
   message,
-  compact
+  compact,
+  isLive
 }) {
-  return /* @__PURE__ */ jsx29("div", { className: cn("flex justify-end", ARRIVES), children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx29("div", { className: cn("flex justify-end", isLive ? SENT : ARRIVES), children: /* @__PURE__ */ jsx29(
     WidgetBubble,
     {
       morphKey: "settled",
@@ -3965,7 +4022,7 @@ function AgentMessage({
   isLive
 }) {
   const { agent } = message;
-  const [sawDots, setSawDots] = useState9(message.pending === true);
+  const [sawDots, setSawDots] = useState8(message.pending === true);
   if (message.pending && !sawDots) setSawDots(true);
   const arrival = isLive && !message.pending && message.body.length > 0 ? { key: message.id, delay: sawDots ? LADDER_DELAY_MS : 0 } : null;
   const destination = message.navigateTo === void 0 ? null : {
@@ -3979,8 +4036,8 @@ function AgentMessage({
     // below, which spread four small things across three rows and pushed every
     // bubble in off the edge. All of it is one line now, and the bubble gets
     // the full width back.
-    /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col items-start gap-1", ARRIVES), children: [
-      group.isFirst && /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-col items-start gap-1", ARRIVES), children: [
+      group.isFirst && /* @__PURE__ */ jsxs14(
         "div",
         {
           className: cn(
@@ -3988,7 +4045,7 @@ function AgentMessage({
             compact ? "text-xs" : "text-sm"
           ),
           children: [
-            agent && /* @__PURE__ */ jsxs13(Fragment28, { children: [
+            agent && /* @__PURE__ */ jsxs14(Fragment28, { children: [
               /* @__PURE__ */ jsx29(
                 WidgetAvatar,
                 {
@@ -3997,7 +4054,7 @@ function AgentMessage({
                 }
               ),
               /* @__PURE__ */ jsx29("span", { className: "truncate font-medium", children: agent.name }),
-              agent.kind === "ai" && /* @__PURE__ */ jsx29(Badge, { variant: "muted", className: "shrink-0 rounded-md px-1", children: "AI" })
+              agent.kind === "ai" && /* @__PURE__ */ jsx29(Badge, { variant: "muted", className: "shrink-0 rounded-md bg-muted px-1 inset-ring-0", children: "AI" })
             ] }),
             !message.pending && /* @__PURE__ */ jsx29("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: message.time })
           ]
@@ -4035,21 +4092,21 @@ var TYPING_TTL_MS = 12e3;
 var SNOOZE_MAX_MS = 365 * 24 * 60 * 6e4;
 
 // ../../apps/web/src/components/support-widget/widget-rating.tsx
-import { useEffect as useEffect7, useRef as useRef10, useState as useState10 } from "react";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef11, useState as useState9 } from "react";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var STARS = Array.from({ length: RATING_MAX_STARS }, (_, index) => index + 1);
 var THANKS_MS = 1400;
 var STAR_STAGGER_MS = 40;
 function WidgetRating({ rating }) {
-  const [isOpen, setIsOpen] = useState10(false);
-  const [picked, setPicked] = useState10(rating.stars);
-  const [hovered, setHovered] = useState10(null);
-  const [feedback, setFeedback] = useState10("");
-  const [isSending, setIsSending] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [isDone, setIsDone] = useState10(false);
-  const timers = useRef10([]);
-  useEffect7(() => {
+  const [isOpen, setIsOpen] = useState9(false);
+  const [picked, setPicked] = useState9(rating.stars);
+  const [hovered, setHovered] = useState9(null);
+  const [feedback, setFeedback] = useState9("");
+  const [isSending, setIsSending] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [isDone, setIsDone] = useState9(false);
+  const timers = useRef11([]);
+  useEffect6(() => {
     const frame = requestAnimationFrame(() => setIsOpen(true));
     const pending = timers.current;
     return () => {
@@ -4090,9 +4147,9 @@ function WidgetRating({ rating }) {
     setIsDone(true);
     later(THANKS_MS, leave);
   }
-  return /* @__PURE__ */ jsx30(Collapse, { isOpen, className: "shrink-0", children: /* @__PURE__ */ jsxs14("div", { className: "mx-4 mb-3 rounded-xl border bg-muted/40 px-4 dark:bg-muted/20", children: [
-    /* @__PURE__ */ jsx30(Collapse, { isOpen: !isDone, children: /* @__PURE__ */ jsxs14("div", { className: "py-3", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex items-start justify-between gap-2", children: [
+  return /* @__PURE__ */ jsx30(Collapse, { isOpen, className: "shrink-0", children: /* @__PURE__ */ jsxs15("div", { className: "mx-4 mb-3 rounded-xl border bg-muted/40 px-4 dark:bg-muted/20", children: [
+    /* @__PURE__ */ jsx30(Collapse, { isOpen: !isDone, children: /* @__PURE__ */ jsxs15("div", { className: "py-3", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsx30("p", { className: "text-base font-medium", children: picked === null ? "How did we do?" : "Anything we could improve?" }),
         /* @__PURE__ */ jsx30(
           WidgetButton,
@@ -4149,7 +4206,7 @@ function WidgetRating({ rating }) {
           ))
         }
       ),
-      /* @__PURE__ */ jsx30(Collapse, { isOpen: picked !== null, children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2 pt-2", children: [
+      /* @__PURE__ */ jsx30(Collapse, { isOpen: picked !== null, children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2 pt-2", children: [
         /* @__PURE__ */ jsx30(
           Textarea,
           {
@@ -4161,7 +4218,7 @@ function WidgetRating({ rating }) {
             maxLength: RATING_FEEDBACK_MAX_LENGTH,
             disabled: isSending,
             className: cn(
-              TEXT_FIELD_SHELL,
+              WIDGET_TEXT_FIELD_SHELL,
               "max-h-28 min-h-20 bg-card px-3 py-2.5 text-base"
             )
           }
@@ -4184,16 +4241,16 @@ function WidgetRating({ rating }) {
 }
 
 // ../../apps/web/src/components/support-widget/widget-status.tsx
-import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function WidgetAwaitingHuman() {
-  return /* @__PURE__ */ jsxs15("p", { className: "flex items-center justify-center gap-1.5 px-4 pb-1.5 text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs16("p", { className: "flex items-center justify-center gap-1.5 px-4 pb-1.5 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsx31(UserCircle, { "aria-hidden": true, className: "size-4" }),
     "Waiting for the support team"
   ] });
 }
 
 // ../../apps/web/src/components/support-widget/support-widget.tsx
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function joinsPreviousTurn(message, previous) {
   return !message.dayLabel && !message.startsConversation && message.sender === previous.sender && message.agent?.id === previous.agent?.id && withinRun(previous.sentAt, message.sentAt);
 }
@@ -4223,7 +4280,7 @@ function SupportWidget({
   className
 }) {
   const stack = useStackShift(messages.length);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "section",
     {
       "aria-label": `${presence.name} support`,
@@ -4231,7 +4288,7 @@ function SupportWidget({
         // The widget keeps its own radius scale. The app's token can climb as
         // the chrome gets rounder without the widget changing shape under the
         // hosts embedding it.
-        "flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card text-card-foreground [--radius:0.625rem]",
+        `flex h-full w-full flex-col overflow-hidden ${WIDGET_CORNER} border bg-card text-card-foreground [--radius:0.625rem]`,
         // And its own pace for a reply arriving a line at a time: a step
         // quicker than the palette's ladder, since a support answer is a
         // few short lines in a bubble rather than an essay in a column.
@@ -4305,14 +4362,14 @@ function Conversation({
   stackRef
 }) {
   const groups = groupMessages(messages, joinsPreviousTurn);
-  const [openedWith] = useState11(
+  const [openedWith] = useState10(
     () => new Set(messages.map((message) => message.id))
   );
-  const [heldOffer, setHeldOffer] = useState11(offer);
+  const [heldOffer, setHeldOffer] = useState10(offer);
   if (offer !== null && offer.key !== heldOffer?.key) setHeldOffer(offer);
-  const [heldNotice, setHeldNotice] = useState11(notice ?? null);
+  const [heldNotice, setHeldNotice] = useState10(notice ?? null);
   if (notice && notice !== heldNotice) setHeldNotice(notice);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -4340,7 +4397,7 @@ function Conversation({
                      so a scroller left alone slides the newest message under the
                      composer and has to catch up afterwards. Following it is what the
                      scroller stops easing for, so this tracks frame by frame. */
-          /* @__PURE__ */ jsx32(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs16(MessageScroller, { className: "h-auto min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx32(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs17(MessageScroller, { className: "h-auto min-h-0 flex-1", children: [
             /* @__PURE__ */ jsx32(
               MessageScrollerViewport,
               {
@@ -4354,7 +4411,7 @@ function Conversation({
                   {
                     ref: stackRef,
                     className: "justify-end gap-0",
-                    children: messages.map((message, index) => /* @__PURE__ */ jsxs16(
+                    children: messages.map((message, index) => /* @__PURE__ */ jsxs17(
                       MessageScrollerItem,
                       {
                         messageId: message.id,
@@ -4417,10 +4474,10 @@ function Conversation({
 // ../../apps/web/src/components/support-widget/use-launcher-drag.ts
 import {
   useCallback as useCallback6,
-  useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect6,
-  useRef as useRef11,
-  useState as useState12,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect7,
+  useRef as useRef12,
+  useState as useState11,
   useSyncExternalStore as useSyncExternalStore4
 } from "react";
 import { flushSync } from "react-dom";
@@ -4439,9 +4496,9 @@ function useLauncherDrag({
   subject
 }) {
   const spot = useSyncExternalStore4(subscribeSpot, getSpot, getDefaultSpot);
-  const [isMoving, setIsMoving] = useState12(false);
-  const grip = useRef11(null);
-  const justDragged = useRef11(false);
+  const [isMoving, setIsMoving] = useState11(false);
+  const grip = useRef12(null);
+  const justDragged = useRef12(false);
   const measure = useCallback6(() => {
     const box = boxRef.current;
     const button = buttonRef.current;
@@ -4492,12 +4549,12 @@ function useLauncherDrag({
     box.style.top = `${metrics.boxTop - taken.bounds.top}px`;
     box.style.setProperty(BUTTON_Y, `${metrics.buttonInBox}px`);
   }, [boxRef, measure, spot]);
-  useLayoutEffect6(place, [place]);
-  useEffect8(() => {
+  useLayoutEffect7(place, [place]);
+  useEffect7(() => {
     window.addEventListener("resize", place);
     return () => window.removeEventListener("resize", place);
   }, [place]);
-  useEffect8(() => {
+  useEffect7(() => {
     const box = boxRef.current;
     if (!box || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(place);
@@ -4508,10 +4565,10 @@ function useLauncherDrag({
     const box = boxRef.current;
     if (box) box.style.transform = "";
   }, [boxRef]);
-  const holdPointer = useCallback6((held) => {
-    document.body.style.userSelect = held ? "none" : "";
-    document.body.style.cursor = held ? "grabbing" : "";
-    if (held) window.getSelection()?.removeAllRanges();
+  const holdPointer = useCallback6((held2) => {
+    document.body.style.userSelect = held2 ? "none" : "";
+    document.body.style.cursor = held2 ? "grabbing" : "";
+    if (held2) window.getSelection()?.removeAllRanges();
   }, []);
   const handlePointerDown = useCallback6(
     (event) => {
@@ -4548,57 +4605,57 @@ function useLauncherDrag({
   );
   const handlePointerMove = useCallback6(
     (event) => {
-      const held = grip.current;
+      const held2 = grip.current;
       const box = boxRef.current;
-      if (held === null || box === null) return;
-      if (!held.moved) {
+      if (held2 === null || box === null) return;
+      if (!held2.moved) {
         const travelled = Math.hypot(
-          event.clientX - held.startX,
-          event.clientY - held.startY
+          event.clientX - held2.startX,
+          event.clientY - held2.startY
         );
         if (travelled < DRAG_THRESHOLD) return;
-        held.moved = true;
+        held2.moved = true;
         holdPointer(true);
         setIsMoving(true);
       }
-      held.at = {
+      held2.at = {
         x: clamp2(
-          event.clientX - held.grabX,
-          held.bounds.left + held.margin,
-          held.bounds.left + held.bounds.width - held.margin - held.dragged.width
+          event.clientX - held2.grabX,
+          held2.bounds.left + held2.margin,
+          held2.bounds.left + held2.bounds.width - held2.margin - held2.dragged.width
         ),
         y: clamp2(
-          event.clientY - held.grabY,
-          held.bounds.top + held.margin,
-          held.bounds.top + held.bounds.height - held.margin - held.dragged.height
+          event.clientY - held2.grabY,
+          held2.bounds.top + held2.margin,
+          held2.bounds.top + held2.bounds.height - held2.margin - held2.dragged.height
         )
       };
-      box.style.transform = `translate3d(${held.at.x - held.resting.x}px, ${held.at.y - held.resting.y}px, 0)`;
+      box.style.transform = `translate3d(${held2.at.x - held2.resting.x}px, ${held2.at.y - held2.resting.y}px, 0)`;
     },
     [boxRef, holdPointer]
   );
   const finishDrag = useCallback6(() => {
-    const held = grip.current;
-    if (held === null) return;
+    const held2 = grip.current;
+    if (held2 === null) return;
     grip.current = null;
     holdPointer(false);
     const box = boxRef.current;
-    if (!held.moved || box === null) {
+    if (!held2.moved || box === null) {
       setIsMoving(false);
       return;
     }
     justDragged.current = true;
-    const target = held.subject === "panel" ? spotFromPanel(held.at, held.bounds, held.size, held.box, held.margin) : spotFrom(held.at, held.bounds, held.size, held.margin);
+    const target = held2.subject === "panel" ? spotFromPanel(held2.at, held2.bounds, held2.size, held2.box, held2.margin) : spotFrom(held2.at, held2.bounds, held2.size, held2.margin);
     const home = metricsFor(
       target,
-      held.bounds,
-      held.size,
-      held.box.height,
-      held.margin
+      held2.bounds,
+      held2.size,
+      held2.box.height,
+      held2.margin
     );
     const from = {
-      x: held.at.x - (target.side === "left" ? held.bounds.left + held.margin : held.bounds.left + held.bounds.width - held.margin - held.dragged.width),
-      y: held.at.y - (held.subject === "panel" ? home.boxTop : home.buttonY)
+      x: held2.at.x - (target.side === "left" ? held2.bounds.left + held2.margin : held2.bounds.left + held2.bounds.width - held2.margin - held2.dragged.width),
+      y: held2.at.y - (held2.subject === "panel" ? home.boxTop : home.buttonY)
     };
     flushSync(() => setSpot(target));
     settle();
@@ -4625,7 +4682,7 @@ function useLauncherDrag({
     },
     [finishDrag]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     if (!isMoving) return;
     const end = () => finishDrag();
     window.addEventListener("pointerup", end);
@@ -4643,7 +4700,7 @@ function useLauncherDrag({
     onPointerUp: handlePointerUp,
     onPointerCancel: handlePointerUp
   };
-  useEffect8(() => {
+  useEffect7(() => {
     function abandon() {
       if (grip.current === null) return;
       grip.current = null;
@@ -4682,15 +4739,15 @@ function clamp2(value, low, high) {
 }
 
 // ../../apps/web/src/components/support-widget/use-teaser-placement.ts
-import { useLayoutEffect as useLayoutEffect7, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useState as useState12 } from "react";
 var ROOM_ABOVE_PX = 128;
 function useTeaserPlacement({
   buttonRef,
   enabled: enabled2,
   isMoving
 }) {
-  const [placement, setPlacement] = useState13("above");
-  useLayoutEffect7(() => {
+  const [placement, setPlacement] = useState12("above");
+  useLayoutEffect8(() => {
     if (!enabled2 || isMoving) return;
     const measure = () => {
       const button = buttonRef.current;
@@ -4706,18 +4763,18 @@ function useTeaserPlacement({
 
 // ../../apps/web/src/components/support-widget/use-widget-sheet.ts
 import {
-  useLayoutEffect as useLayoutEffect8,
-  useState as useState14,
+  useLayoutEffect as useLayoutEffect9,
+  useState as useState13,
   useSyncExternalStore as useSyncExternalStore5
 } from "react";
 
 // ../../apps/web/src/components/support-widget/use-page-lock.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 function usePageLock(isLocked) {
-  useEffect9(() => {
+  useEffect8(() => {
     if (!isLocked) return;
     const { style } = document.body;
-    const held = {
+    const held2 = {
       position: style.position,
       top: style.top,
       left: style.left,
@@ -4731,11 +4788,11 @@ function usePageLock(isLocked) {
     style.right = "0";
     style.overflow = "hidden";
     return () => {
-      style.position = held.position;
-      style.top = held.top;
-      style.left = held.left;
-      style.right = held.right;
-      style.overflow = held.overflow;
+      style.position = held2.position;
+      style.top = held2.top;
+      style.left = held2.left;
+      style.right = held2.right;
+      style.overflow = held2.overflow;
       window.scrollTo({ top: scrollY, behavior: "instant" });
     };
   }, [isLocked]);
@@ -4743,7 +4800,7 @@ function usePageLock(isLocked) {
 
 // ../../apps/web/src/components/support-widget/use-widget-sheet.ts
 var PHONE = "(max-width: 40rem)";
-var SETTLE_MS2 = 400;
+var SETTLE_MS = 400;
 var KEYBOARD_PX = 96;
 function subscribePhone(onChange) {
   const media = window.matchMedia(PHONE);
@@ -4762,13 +4819,13 @@ function useWidgetSheet({
     isPhoneNow,
     isPhoneOnServer
   );
-  const [isFramed, setIsFramed] = useState14(false);
-  useLayoutEffect8(() => {
+  const [isFramed, setIsFramed] = useState13(false);
+  useLayoutEffect9(() => {
     setIsFramed(boxRef.current?.offsetParent != null);
   }, [boxRef, isPhone]);
   const isSheet = isPhone && !isFramed;
   const isUp = isSheet && isOpen;
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!isUp) return;
     const panel = panelRef.current;
     const viewport = window.visualViewport;
@@ -4797,7 +4854,7 @@ function useWidgetSheet({
       frame = performance.now() < until ? requestAnimationFrame(follow) : 0;
     };
     const track = () => {
-      until = performance.now() + SETTLE_MS2;
+      until = performance.now() + SETTLE_MS;
       if (frame === 0) frame = requestAnimationFrame(follow);
     };
     fit();
@@ -4820,7 +4877,7 @@ function useWidgetSheet({
 }
 
 // ../../apps/web/src/components/support-widget/widget-modal.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../apps/web/src/components/support-widget/use-hydrated.ts
@@ -4834,12 +4891,12 @@ function useHydrated() {
 }
 
 // ../../apps/web/src/components/support-widget/use-scroll-lock.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useScrollLock(isLocked) {
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isLocked) return;
     const { body } = document;
-    const held = {
+    const held2 = {
       overflow: body.style.overflow,
       paddingRight: body.style.paddingRight
     };
@@ -4850,14 +4907,14 @@ function useScrollLock(isLocked) {
       body.style.paddingRight = `${existing + gutter}px`;
     }
     return () => {
-      body.style.overflow = held.overflow;
-      body.style.paddingRight = held.paddingRight;
+      body.style.overflow = held2.overflow;
+      body.style.paddingRight = held2.paddingRight;
     };
   }, [isLocked]);
 }
 
 // ../../apps/web/src/components/support-widget/widget-modal.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var LAYER = 2147483e3;
 var WIDTH = "50rem";
 var HEIGHT = "40rem";
@@ -4873,13 +4930,13 @@ function SupportModal({
   label,
   children
 }) {
-  const layerRef = useRef12(null);
+  const layerRef = useRef13(null);
   const isHydrated = useHydrated();
   const isSheet = useWidgetSheet({ boxRef: layerRef, panelRef, isOpen });
   useScrollLock(isOpen && !isSheet);
   if (!isHydrated) return null;
   return createPortal(
-    /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: layerRef,
@@ -4924,7 +4981,7 @@ function SupportModal({
                   isOpen ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
                 ] : [
                   // Never past the layer's padding, whatever the size says.
-                  "relative max-h-full max-w-full rounded-xl shadow-2xl",
+                  `relative max-h-full max-w-full ${WIDGET_CORNER} shadow-2xl`,
                   MOTION,
                   isOpen ? [OPEN, "scale-100 opacity-100 translate-y-0"] : [SHUT, "scale-[0.96] opacity-0 translate-y-2"]
                 ]
@@ -4947,7 +5004,7 @@ var SHEET_PANEL = cn(
 );
 
 // ../../apps/web/src/components/support-widget/widget-teaser.tsx
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 
 // ../../apps/web/src/components/support-widget/plain-text.ts
 function plainTextOf(markdown) {
@@ -4955,7 +5012,7 @@ function plainTextOf(markdown) {
 }
 
 // ../../apps/web/src/components/support-widget/widget-teaser.tsx
-import { Fragment as Fragment29, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var WIDTH2 = "min(20rem, 100%)";
 var GAP = "0.5rem";
 function WidgetTeaser({
@@ -4968,13 +5025,13 @@ function WidgetTeaser({
   onOpen,
   onDismiss
 }) {
-  const [held, setHeld] = useState15(message);
-  if (message !== null && message !== held) setHeld(message);
-  const shown = message ?? held;
+  const [held2, setHeld] = useState14(message);
+  if (message !== null && message !== held2) setHeld(message);
+  const shown = message ?? held2;
   if (shown === null) return null;
   const agent = shown.agent;
   const text = plainTextOf(shown.body);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       inert: !isShown,
@@ -4999,7 +5056,7 @@ function WidgetTeaser({
         ] : "pointer-events-none scale-95 opacity-0 duration-150 ease-out-quint"
       ),
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           "button",
           {
             type: "button",
@@ -5008,17 +5065,17 @@ function WidgetTeaser({
             className: cn(
               // Its own radius scale, like the panel, so the app's token cannot
               // reshape a card that sits on somebody else's site.
-              "block w-full rounded-xl border bg-card p-3.5 pr-10 text-left text-card-foreground shadow-lg [--radius:0.625rem]",
+              `block w-full ${WIDGET_CORNER} border bg-card p-3.5 pr-10 text-left text-card-foreground shadow-lg [--radius:0.625rem]`,
               "transition-[background-color,box-shadow] outline-none",
               "hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50",
               "cursor-pointer select-none"
             ),
             children: [
-              /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-2", children: [
-                agent && /* @__PURE__ */ jsxs18(Fragment29, { children: [
+              /* @__PURE__ */ jsxs19("span", { className: "flex items-center gap-2", children: [
+                agent && /* @__PURE__ */ jsxs19(Fragment29, { children: [
                   /* @__PURE__ */ jsx34(WidgetAvatar, { agent, className: "size-6 rounded-md" }),
                   /* @__PURE__ */ jsx34("span", { className: "truncate text-sm font-medium", children: agent.name }),
-                  agent.kind === "ai" && /* @__PURE__ */ jsx34(Badge, { variant: "muted", className: "shrink-0 rounded-md px-1", children: "AI" })
+                  agent.kind === "ai" && /* @__PURE__ */ jsx34(Badge, { variant: "muted", className: "shrink-0 rounded-md bg-muted px-1 inset-ring-0", children: "AI" })
                 ] }),
                 /* @__PURE__ */ jsx34("span", { className: "ml-auto shrink-0 text-sm text-muted-foreground tabular-nums", children: shown.time })
               ] }),
@@ -5048,14 +5105,13 @@ function WidgetTeaser({
 }
 
 // ../../apps/web/src/components/support-widget/widget-launcher.tsx
-import { Fragment as Fragment30, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var DEFAULT_WIDTH = "28rem";
 var DEFAULT_HEIGHT = "40rem";
 var DEFAULT_BUTTON_SIZE = "3rem";
 var EXPANDED_WIDTH = "34rem";
 var EXPANDED_HEIGHT = "52rem";
-var PANEL_RADIUS = "0.75rem";
-var OPEN_CLIP = `inset(0px 0px 0px 0px round ${PANEL_RADIUS})`;
+var OPEN_CLIP = `inset(0px 0px 0px 0px round ${WIDGET_RADIUS})`;
 var buttonY = (buttonSize) => `var(${BUTTON_Y}, calc(100% - ${buttonSize}))`;
 var MARGIN = "1rem";
 var CLOSED_SCALE = "scale(0.94)";
@@ -5105,14 +5161,14 @@ function SupportLauncher({
   onOpenChange,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState16(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState15(defaultOpen);
   const isOpen = open ?? uncontrolledOpen;
   const hasBubble = launcher === "bubble";
   const isModal = presentation === "modal";
-  const [isExpanded, setExpanded] = useState16(false);
-  const launcherRef = useRef13(null);
-  const panelRef = useRef13(null);
-  const boxRef = useRef13(null);
+  const [isExpanded, setExpanded] = useState15(false);
+  const launcherRef = useRef14(null);
+  const panelRef = useRef14(null);
+  const boxRef = useRef14(null);
   const drag = useLauncherDrag({
     boxRef,
     buttonRef: launcherRef,
@@ -5132,8 +5188,8 @@ function SupportLauncher({
     enabled: hasTeaser,
     isMoving: drag.isMoving
   });
-  const opener = useRef13(null);
-  const wasOpen = useRef13(isOpen);
+  const opener = useRef14(null);
+  const wasOpen = useRef14(isOpen);
   const setOpen = useCallback7(
     (next) => {
       if (open === void 0) setUncontrolledOpen(next);
@@ -5149,10 +5205,10 @@ function SupportLauncher({
     },
     [onFollow, isSheet, isModal, close]
   );
-  useEffect11(() => {
+  useEffect10(() => {
     if (isOpen) warmMarkdown();
   }, [isOpen]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!isOpen) return;
     function handleKeyDown(event) {
       if (event.key === "Escape") close();
@@ -5160,7 +5216,7 @@ function SupportLauncher({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (wasOpen.current === isOpen) return;
     wasOpen.current = isOpen;
     if (isOpen) {
@@ -5201,8 +5257,8 @@ function SupportLauncher({
       compact: isModal
     }
   );
-  return /* @__PURE__ */ jsxs19(Fragment30, { children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(Fragment30, { children: [
+    /* @__PURE__ */ jsxs20(
       "div",
       {
         ref: boxRef,
@@ -5271,7 +5327,7 @@ function SupportLauncher({
               children: widget(isSheet)
             }
           ),
-          hasBubble && /* @__PURE__ */ jsxs19(
+          hasBubble && /* @__PURE__ */ jsxs20(
             "button",
             {
               ref: launcherRef,
@@ -5386,9 +5442,9 @@ function SupportLauncher({
 }
 
 // ../../apps/web/src/components/support-widget/widget-spotlight.tsx
-import { useEffect as useEffect12, useRef as useRef14, useState as useState17 } from "react";
+import { useEffect as useEffect11, useRef as useRef15, useState as useState16 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var FIND_TIMEOUT_MS = 4e3;
 var HOLD_MS = 2600;
 var FADE_MS = 300;
@@ -5397,10 +5453,10 @@ function prefersReducedMotion4() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function WidgetSpotlight({ selector }) {
-  const [isShown, setIsShown] = useState17(false);
-  const [isLeaving, setIsLeaving] = useState17(false);
-  const ring = useRef14(null);
-  useEffect12(() => {
+  const [isShown, setIsShown] = useState16(false);
+  const [isLeaving, setIsLeaving] = useState16(false);
+  const ring = useRef15(null);
+  useEffect11(() => {
     let target = null;
     let frame = 0;
     let startedAt = 0;
@@ -5459,7 +5515,7 @@ function WidgetSpotlight({ selector }) {
   }, [selector]);
   if (!isShown || typeof document === "undefined") return null;
   return createPortal2(
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       "div",
       {
         ref: ring,
@@ -5473,7 +5529,9 @@ function WidgetSpotlight({ selector }) {
             {
               className: [
                 "absolute -inset-1 rounded-lg outline-2 outline-offset-0 outline-primary",
-                "shadow-[0_0_0_6px_color-mix(in_oklch,var(--primary)_20%,transparent)]",
+                // With the widget's own primary behind the host's, like every
+                // other colour it draws.
+                "shadow-[0_0_0_6px_color-mix(in_oklch,var(--primary,oklch(0.205_0_0))_20%,transparent)]",
                 "transition-opacity duration-300 ease-out motion-reduce:transition-none",
                 isLeaving ? "opacity-0" : "opacity-100"
               ].join(" ")
@@ -5497,7 +5555,7 @@ function WidgetSpotlight({ selector }) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/control.ts
-import { useSyncExternalStore as useSyncExternalStore11 } from "react";
+import { useSyncExternalStore as useSyncExternalStore13 } from "react";
 
 // ../backend/convex/shared/customData.ts
 var MAX_CUSTOM_ENTRIES = 8;
@@ -5544,7 +5602,20 @@ function mergeCustomData(...sources) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/custom-data.ts
+import { useEffect as useEffect12 } from "react";
 var queued = [];
+var senders = 0;
+function useCustomDataSender() {
+  useEffect12(() => {
+    senders += 1;
+    return () => {
+      senders -= 1;
+    };
+  }, []);
+}
+function hasCustomDataSender() {
+  return senders > 0;
+}
 function queueCustomData(label, value) {
   const cleaned = cleanCustomData([{ label, value }]);
   if (cleaned === void 0) return false;
@@ -5562,23 +5633,26 @@ function restoreCustomData(entries) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/open-store.ts
-import { useCallback as useCallback8, useEffect as useEffect13, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef16, useSyncExternalStore as useSyncExternalStore7 } from "react";
 var isDevelopment = typeof process !== "undefined" && process.env.NODE_ENV === "development";
 function createOpenStore(component) {
   let requested = null;
   let effective = false;
   let mounted = 0;
-  const listeners6 = /* @__PURE__ */ new Set();
+  const mountedNames = [];
+  const listeners7 = /* @__PURE__ */ new Set();
+  const requestListeners = /* @__PURE__ */ new Set();
+  let isReporting = false;
   function emit() {
-    for (const listener of listeners6) listener();
+    for (const listener of listeners7) listener();
   }
   return {
     /** The component a warning should name, so it reads like the host's code. */
     component,
     subscribe(listener) {
-      listeners6.add(listener);
+      listeners7.add(listener);
       return () => {
-        listeners6.delete(listener);
+        listeners7.delete(listener);
       };
     },
     readRequested: () => requested,
@@ -5592,6 +5666,20 @@ function createOpenStore(component) {
     request(next) {
       requested = next;
       emit();
+      if (isReporting) return;
+      isReporting = true;
+      try {
+        for (const listener of requestListeners) listener(next);
+      } finally {
+        isReporting = false;
+      }
+    },
+    /** Hears each request: a trigger, the hook, or the panel's own button. */
+    onRequest(listener) {
+      requestListeners.add(listener);
+      return () => {
+        requestListeners.delete(listener);
+      };
     },
     /** Told, not asked: the panel saying what it settled on. */
     settle(next) {
@@ -5599,12 +5687,17 @@ function createOpenStore(component) {
       effective = next;
       emit();
     },
-    countMounted() {
+    countMounted(name = component) {
       mounted += 1;
+      mountedNames.push(name);
       return mounted;
     },
-    countUnmounted() {
+    /** The components on the page, for a warning that names them. */
+    mountedNames: () => [...mountedNames],
+    countUnmounted(name = component) {
       mounted -= 1;
+      const at2 = mountedNames.indexOf(name);
+      if (at2 !== -1) mountedNames.splice(at2, 1);
       if (mounted === 0 && effective) {
         effective = false;
         emit();
@@ -5645,24 +5738,48 @@ function useOpenState(store3, {
   useEffect13(() => {
     store3.settle(isOpen);
   }, [store3, isOpen]);
+  const reportRef = useRef16(onOpenChange);
+  useEffect13(() => {
+    reportRef.current = onOpenChange;
+  });
+  useEffect13(
+    () => store3.onRequest((next) => reportRef.current?.(next)),
+    [store3]
+  );
   const setOpen = useCallback8(
     (next) => {
       store3.request(next);
-      onOpenChange?.(next);
     },
-    [store3, onOpenChange]
+    [store3]
   );
   return [isOpen, setOpen];
 }
-function useRegister(store3) {
+function useRegister(store3, name = store3.component) {
   useEffect13(() => {
-    if (store3.countMounted() > 1 && isDevelopment) {
+    if (store3.countMounted(name) > 1 && isDevelopment) {
+      const names = [...new Set(store3.mountedNames())];
+      const which = names.length === 1 ? `more than one <${names[0]}> is mounted` : `${names.map((one) => `<${one}>`).join(" and ")} are both mounted`;
       console.warn(
-        `Median: more than one <${store3.component}> is mounted. They share one open state and open together. Mount it once, near the root of your app.`
+        `Median: ${which}. They share one open state and open together. Mount one, once, near the root of your app.`
       );
     }
-    return () => store3.countUnmounted();
-  }, [store3]);
+    return () => store3.countUnmounted(name);
+  }, [store3, name]);
+}
+
+// ../backend/convex/shared/mutationResult.ts
+import { ConvexError } from "convex/values";
+function unwrapResult(result) {
+  if (result.auditResult === "error") throw new ConvexError(result.data);
+  return result.value;
+}
+
+// ../backend/client/mutationResult.ts
+function unwrapMutationResult(result) {
+  if (result && typeof result === "object" && "auditResult" in result && (result.auditResult === "ok" && "value" in result || result.auditResult === "error" && "data" in result)) {
+    return unwrapResult(result);
+  }
+  return result;
 }
 
 // ../backend/convex/_generated/api.js
@@ -5702,6 +5819,33 @@ function cleanCrash(input) {
 import { ConvexHttpClient } from "convex/browser";
 import { useSyncExternalStore as useSyncExternalStore10 } from "react";
 
+// ../../apps/web/src/lib/upload.ts
+async function uploadFile(getUploadUrl, file) {
+  const url = await getUploadUrl();
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": file.type || "application/octet-stream" },
+    body: file
+  });
+  if (!response.ok) {
+    throw new Error(`Uploading ${file.name} failed with ${response.status}`);
+  }
+  const { storageId } = await response.json();
+  return storageId;
+}
+async function uploadAttachments(getUploadUrl, files) {
+  const attachments = [];
+  for (const file of files) {
+    attachments.push({
+      storageId: await uploadFile(getUploadUrl, file),
+      name: file.name,
+      size: file.size,
+      type: file.type || "application/octet-stream"
+    });
+  }
+  return attachments;
+}
+
 // ../../apps/web/src/components/support-widget/sdk/context.ts
 var BROWSERS = [
   { name: "Edge", token: /Edg(?:e|A|iOS)?\/(\d+)/ },
@@ -5867,7 +6011,7 @@ function cleanClientDiagnostics(input) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/diagnostics.ts
-import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef15 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef17 } from "react";
 function settingsOf(option) {
   if (option === void 0 || option === false) return null;
   if (option === true) return { errors: true, network: false, console: false };
@@ -5897,9 +6041,8 @@ function messageOf(value) {
 function stackOf(value) {
   return value instanceof Error && typeof value.stack === "string" ? value.stack.slice(0, STACK_MAX_LENGTH) : void 0;
 }
-function collect(settings) {
-  const undo = [];
-  if (settings.errors) {
+var INSTALLERS = {
+  errors: () => {
     const onError = (event) => {
       if (!event.error && !event.message) return;
       record({
@@ -5925,12 +6068,14 @@ function collect(settings) {
     };
     window.addEventListener("error", onError);
     window.addEventListener("unhandledrejection", onRejection);
-    undo.push(() => {
+    return () => {
       window.removeEventListener("error", onError);
       window.removeEventListener("unhandledrejection", onRejection);
-    });
-  }
-  if (settings.network && typeof window.fetch === "function") {
+    };
+  },
+  network: () => {
+    if (typeof window.fetch !== "function") return () => {
+    };
     const original = window.fetch;
     window.fetch = async function medianFetch(...args) {
       const [input, init] = args;
@@ -5964,11 +6109,11 @@ function collect(settings) {
         throw thrown;
       }
     };
-    undo.push(() => {
+    return () => {
       window.fetch = original;
-    });
-  }
-  if (settings.console) {
+    };
+  },
+  console: () => {
     const original = console.error;
     console.error = function medianConsoleError(...args) {
       record({
@@ -5979,12 +6124,32 @@ function collect(settings) {
       });
       original.apply(console, args);
     };
-    undo.push(() => {
+    return () => {
       console.error = original;
-    });
+    };
+  }
+};
+var wanted = {
+  errors: 0,
+  network: 0,
+  console: 0
+};
+var removers = {};
+function collect(settings) {
+  const kinds = Object.keys(settings).filter(
+    (kind) => settings[kind]
+  );
+  for (const kind of kinds) {
+    wanted[kind] += 1;
+    if (wanted[kind] === 1) removers[kind] = INSTALLERS[kind]();
   }
   return () => {
-    for (const off of undo) off();
+    for (const kind of kinds) {
+      wanted[kind] -= 1;
+      if (wanted[kind] > 0) continue;
+      removers[kind]?.();
+      delete removers[kind];
+    }
   };
 }
 function snapshot(state) {
@@ -5998,24 +6163,37 @@ function snapshot(state) {
   });
 }
 function snapshotNow(extraState) {
-  return snapshot({ ...latestState, ...extraState });
+  const merged = { ...extraState };
+  for (const [key, value] of Object.entries(latestState ?? {})) {
+    if (!Object.prototype.hasOwnProperty.call(merged, key)) {
+      merged[key] = value;
+    }
+  }
+  return snapshot(merged);
 }
 function useDiagnostics(option, appState) {
   const settings = settingsOf(option);
   const key = settings === null ? null : JSON.stringify(settings);
-  const stateRef = useRef15(appState);
+  const stateRef = useRef17(appState);
+  const shared = useRef17(void 0);
   useEffect14(() => {
     stateRef.current = appState;
-    latestState = appState;
+    if (appState !== void 0) {
+      latestState = appState;
+    } else if (shared.current !== void 0 && latestState === shared.current) {
+      latestState = void 0;
+    }
+    shared.current = appState;
   });
-  const sentAt = useRef15(null);
+  const sentAt = useRef17(null);
   useEffect14(() => {
     if (key === null) return;
     return collect(JSON.parse(key));
   }, [key]);
   const take = useCallback9(() => {
     if (key === null) return void 0;
-    if (sentAt.current !== null && sentAt.current === recorded) return void 0;
+    if (sentAt.current !== null && sentAt.current === recorded)
+      return void 0;
     sentAt.current = recorded;
     return snapshot(stateRef.current);
   }, [key]);
@@ -6051,10 +6229,117 @@ function useRememberInstall(apiKey, user) {
   });
 }
 
+// ../../apps/web/src/components/support-widget/sdk/screenshot.ts
+var MAX_WIDTH = 1440;
+var TIMEOUT_MS = 6e3;
+var TYPE = "image/jpeg";
+var QUALITY = 0.85;
+var SCREENSHOT_NAME = "screenshot.jpg";
+var PIN_ATTRIBUTE = "data-median-pin";
+async function capturePage() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return null;
+  }
+  const page = document.documentElement;
+  if (page === null) return null;
+  try {
+    const blob = await Promise.race([
+      draw(page),
+      new Promise((resolve) => setTimeout(() => resolve(null), TIMEOUT_MS))
+    ]);
+    if (blob === null) return null;
+    return new File([blob], SCREENSHOT_NAME, { type: TYPE });
+  } catch (caught) {
+    console.warn("Median: taking a screenshot for this report failed", caught);
+    return null;
+  }
+}
+async function draw(page) {
+  const { domToBlob } = await import("./dist-VC6ZVTA2.js");
+  const width = page.clientWidth || window.innerWidth;
+  const height = page.clientHeight || window.innerHeight;
+  const unpin = pinFixed();
+  try {
+    return await domToBlob(page, {
+      width,
+      height,
+      // Their view, not the whole document: the page is drawn in full and
+      // the part they are looking at is what the frame is put around. A page
+      // held still by `usePageLock` has already been scrolled to nothing,
+      // and is shifted by nothing here.
+      style: {
+        transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`,
+        transformOrigin: "top left"
+      },
+      scale: Math.min(1, MAX_WIDTH / Math.max(width, 1)),
+      type: TYPE,
+      quality: QUALITY,
+      // JPEG has no transparency, so anything clear would come out black.
+      backgroundColor: pageBackground(),
+      filter: notOurs,
+      onCloneNode: placePinned,
+      timeout: TIMEOUT_MS,
+      features: { copyScrollbar: false }
+    });
+  } finally {
+    unpin();
+  }
+}
+function pinFixed() {
+  const pinned = [];
+  for (const element of document.body.querySelectorAll("*")) {
+    if (window.getComputedStyle(element).position !== "fixed") continue;
+    const box = element.getBoundingClientRect();
+    if (box.width === 0 || box.height === 0) continue;
+    element.setAttribute(
+      PIN_ATTRIBUTE,
+      [box.left, box.top, box.width, box.height].join(",")
+    );
+    pinned.push(element);
+  }
+  return () => {
+    for (const element of pinned) element.removeAttribute(PIN_ATTRIBUTE);
+  };
+}
+function placePinned(clone) {
+  if (!(clone instanceof Element)) return;
+  for (const element of clone.querySelectorAll(`[${PIN_ATTRIBUTE}]`)) {
+    const [left, top, width, height] = (element.getAttribute(PIN_ATTRIBUTE) ?? "").split(",").map(Number);
+    element.removeAttribute(PIN_ATTRIBUTE);
+    if (!(element instanceof HTMLElement) || Number.isNaN(top)) continue;
+    element.style.setProperty("left", `${left + window.scrollX}px`, "important");
+    element.style.setProperty("top", `${top + window.scrollY}px`, "important");
+    element.style.setProperty("right", "auto", "important");
+    element.style.setProperty("bottom", "auto", "important");
+    element.style.setProperty("width", `${width}px`, "important");
+    element.style.setProperty("height", `${height}px`, "important");
+    element.style.setProperty("margin", "0", "important");
+  }
+}
+function notOurs(node) {
+  return !(node instanceof Element && node.hasAttribute("data-median-widget"));
+}
+function pageBackground() {
+  for (const element of [document.body, document.documentElement]) {
+    if (element === null) continue;
+    const color = window.getComputedStyle(element).backgroundColor;
+    if (color && !isClear(color)) return color;
+  }
+  return "#ffffff";
+}
+function isClear(color) {
+  const clear = color.replace(/\s/g, "");
+  return clear === "transparent" || clear === "rgba(0,0,0,0)";
+}
+
 // ../../apps/web/src/components/support-widget/sdk/session.ts
 var STORAGE_PREFIX = "median:session:";
 var inMemorySessions = /* @__PURE__ */ new Map();
 var listeners4 = /* @__PURE__ */ new Set();
+var resetCount = 0;
+function getResetCount() {
+  return resetCount;
+}
 function subscribeSession(listener) {
   listeners4.add(listener);
   return () => {
@@ -6077,6 +6362,7 @@ function getOrCreateSessionId(apiKey) {
   }
 }
 function resetSessions() {
+  resetCount += 1;
   inMemorySessions.clear();
   if (typeof window !== "undefined") {
     try {
@@ -6093,19 +6379,32 @@ function resetSessions() {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-median-thread.ts
-import { useMutation, useQuery } from "convex/react";
+import { useMutation as useMutation2, useQuery } from "convex/react";
+
+// ../../apps/web/src/components/support-widget/sdk/use-widget-mutation.ts
+import { useMutation } from "convex/react";
+import { useCallback as useCallback10 } from "react";
+function useWidgetMutation(reference) {
+  const mutation = useMutation(reference);
+  return useCallback10(
+    async (...args) => unwrapMutationResult(await mutation(...args)),
+    [mutation]
+  );
+}
+
+// ../../apps/web/src/components/support-widget/sdk/use-median-thread.ts
 import {
-  useCallback as useCallback11,
-  useEffect as useEffect17,
+  useCallback as useCallback12,
+  useEffect as useEffect18,
   useMemo as useMemo2,
-  useState as useState19,
+  useState as useState18,
   useSyncExternalStore as useSyncExternalStore9
 } from "react";
 
 // ../../apps/web/src/hooks/use-now.ts
-import { useEffect as useEffect16, useState as useState18 } from "react";
+import { useEffect as useEffect16, useState as useState17 } from "react";
 function useNow(intervalMs = 3e4) {
-  const [now, setNow] = useState18(() => Date.now());
+  const [now, setNow] = useState17(() => Date.now());
   useEffect16(() => {
     const timer = setInterval(() => setNow(Date.now()), intervalMs);
     return () => clearInterval(timer);
@@ -6114,16 +6413,21 @@ function useNow(intervalMs = 3e4) {
 }
 
 // ../../apps/web/src/lib/errors.ts
-import { ConvexError } from "convex/values";
+import { ConvexError as ConvexError2 } from "convex/values";
 var FALLBACK = "Something went wrong on our end. Please try again.";
+var OUT_OF_DATE = "This page is out of date. Refresh to get the latest version.";
+function isMissingFunction(error) {
+  return error instanceof Error && error.message.includes("Could not find public function");
+}
 function isErrorPayload(data) {
   return typeof data === "object" && data !== null && "message" in data && typeof data.message === "string";
 }
 function errorMessage(error) {
-  if (error instanceof ConvexError) {
+  if (error instanceof ConvexError2) {
     if (typeof error.data === "string") return error.data;
     if (isErrorPayload(error.data)) return error.data.message;
   }
+  if (isMissingFunction(error)) return OUT_OF_DATE;
   return FALLBACK;
 }
 
@@ -6161,33 +6465,6 @@ function isNewDay(previous, next) {
   return startOfDay(previous) !== startOfDay(next);
 }
 
-// ../../apps/web/src/lib/upload.ts
-async function uploadFile(getUploadUrl, file) {
-  const url = await getUploadUrl();
-  const response = await fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": file.type || "application/octet-stream" },
-    body: file
-  });
-  if (!response.ok) {
-    throw new Error(`Uploading ${file.name} failed with ${response.status}`);
-  }
-  const { storageId } = await response.json();
-  return storageId;
-}
-async function uploadAttachments(getUploadUrl, files) {
-  const attachments = [];
-  for (const file of files) {
-    attachments.push({
-      storageId: await uploadFile(getUploadUrl, file),
-      name: file.name,
-      size: file.size,
-      type: file.type || "application/octet-stream"
-    });
-  }
-  return attachments;
-}
-
 // ../../apps/web/src/components/support-widget/sdk/rating-skips.ts
 var STORAGE_PREFIX2 = "median:rating-skips:";
 var MAX_REMEMBERED = 20;
@@ -6222,45 +6499,56 @@ function writeSkippedRating(apiKey, conversationId) {
   }
 }
 
-// ../../apps/web/src/components/support-widget/sdk/stamps.ts
-var inMemory2 = /* @__PURE__ */ new Map();
-function keyOf(name, apiKey) {
-  return `median:${name}:${apiKey}`;
-}
-function readStamp(name, apiKey) {
-  if (typeof window === "undefined") return 0;
-  const key = keyOf(name, apiKey);
-  try {
-    const stored = window.localStorage.getItem(key);
-    const at2 = stored === null ? Number.NaN : Number(stored);
-    return Number.isFinite(at2) ? at2 : 0;
-  } catch {
-    return inMemory2.get(key) ?? 0;
-  }
+// ../../apps/web/src/components/support-widget/sdk/read-state.ts
+function isUnreadReply(message) {
+  return message.sender === "agent" && !message.pending && !message.isRead;
 }
-function writeStamp(name, apiKey, at2) {
-  if (typeof window === "undefined") return;
-  const key = keyOf(name, apiKey);
-  inMemory2.set(key, at2);
-  try {
-    window.localStorage.setItem(key, String(at2));
-  } catch {
+function widgetReadReceipts(messages, now) {
+  const receipts = /* @__PURE__ */ new Map();
+  const blocked = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    const { conversationId } = message;
+    if (!receipts.has(conversationId)) {
+      receipts.set(conversationId, { conversationId });
+    }
+    if (blocked.has(conversationId)) continue;
+    if (message.pending) {
+      if (message.typingAt === null || now - message.typingAt <= TYPING_TTL_MS) {
+        blocked.add(conversationId);
+      }
+      continue;
+    }
+    if (message.sender === "agent" && (message.body.trim() || message.attachments.length > 0)) {
+      receipts.set(conversationId, { conversationId, messageId: message._id });
+    }
   }
+  return [...receipts.values()];
 }
 
-// ../../apps/web/src/components/support-widget/sdk/read-state.ts
-var READ = "read";
-function readLastSeenAt(apiKey) {
-  return readStamp(READ, apiKey);
-}
-function writeLastSeenAt(apiKey, at2) {
-  writeStamp(READ, apiKey, at2);
+// ../../apps/web/src/components/support-widget/sdk/use-screenshot-ask.ts
+import { useEffect as useEffect17, useRef as useRef18 } from "react";
+function useScreenshotAsk({
+  ask,
+  enabled: enabled2,
+  answer
+}) {
+  const answered = useRef18(/* @__PURE__ */ new Set());
+  useEffect17(() => {
+    if (ask === null || answered.current.has(ask.key)) return;
+    answered.current.add(ask.key);
+    void (async () => {
+      const shot = enabled2 ? await capturePage() : null;
+      await answer(ask.key, shot);
+    })().catch((caught) => {
+      console.warn("Median: answering the agent's request for a picture failed", caught);
+    });
+  }, [ask, enabled2, answer]);
 }
 
 // ../../apps/web/src/components/support-widget/sdk/visitor-email.ts
-import { useCallback as useCallback10, useSyncExternalStore as useSyncExternalStore8 } from "react";
+import { useCallback as useCallback11, useSyncExternalStore as useSyncExternalStore8 } from "react";
 var STORAGE_PREFIX3 = "median:email:";
-var inMemory3 = /* @__PURE__ */ new Map();
+var inMemory2 = /* @__PURE__ */ new Map();
 var listeners5 = /* @__PURE__ */ new Set();
 function subscribeVisitorEmail(listener) {
   listeners5.add(listener);
@@ -6274,11 +6562,11 @@ function readVisitorEmail(apiKey) {
     const stored = window.localStorage.getItem(`${STORAGE_PREFIX3}${apiKey}`);
     return stored && stored.length > 0 ? stored : null;
   } catch {
-    return inMemory3.get(apiKey) ?? null;
+    return inMemory2.get(apiKey) ?? null;
   }
 }
 function writeVisitorEmail(apiKey, email) {
-  inMemory3.set(apiKey, email);
+  inMemory2.set(apiKey, email);
   try {
     window.localStorage.setItem(`${STORAGE_PREFIX3}${apiKey}`, email);
   } catch {
@@ -6286,7 +6574,7 @@ function writeVisitorEmail(apiKey, email) {
   for (const listener of listeners5) listener();
 }
 function resetVisitorEmails() {
-  inMemory3.clear();
+  inMemory2.clear();
   if (typeof window !== "undefined") {
     try {
       const stale = [];
@@ -6303,10 +6591,10 @@ function resetVisitorEmails() {
 function useVisitorEmail(apiKey) {
   const email = useSyncExternalStore8(
     subscribeVisitorEmail,
-    useCallback10(() => readVisitorEmail(apiKey), [apiKey]),
+    useCallback11(() => readVisitorEmail(apiKey), [apiKey]),
     () => null
   );
-  const setEmail = useCallback10(
+  const setEmail = useCallback11(
     (next) => writeVisitorEmail(apiKey, next),
     [apiKey]
   );
@@ -6333,10 +6621,20 @@ var IDENTITY_COMPLAINTS = {
   unverified: "Median: the user hash passed to <MedianSupport> did not match. Sign the same string you pass as `user.id` with the Median key that produced this widget id. Until it matches, this visitor gets a conversation of their own on every device.",
   unconfigured: "Median: a user hash was passed to <MedianSupport>, but its widget id and hash came from different Median keys. Derive both from the same key."
 };
-function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagnostics, appState, requireEmail = true, messagePreview = true) {
+function useMedianThread({
+  apiKey,
+  user,
+  telemetry = true,
+  screenshot = true,
+  isLocked = false,
+  diagnostics,
+  appState,
+  requireEmail = true,
+  messagePreview = true
+}) {
   const sessionId = useSyncExternalStore9(
     subscribeSession,
-    useCallback11(() => getOrCreateSessionId(apiKey), [apiKey]),
+    useCallback12(() => getOrCreateSessionId(apiKey), [apiKey]),
     () => null
   );
   const config = useQuery(api.widget.config, { apiKey });
@@ -6346,18 +6644,45 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
     api.widget.thread,
     sessionId === null || isLocked ? "skip" : { apiKey, sessionId }
   );
-  const send = useMutation(api.widget.send);
-  const sendTyping = useMutation(api.widget.setTyping);
-  const sendPresence = useMutation(api.widget.presence);
-  const rateConversation = useMutation(api.widget.rate);
-  const identify = useMutation(api.widget.identify);
-  const generateUploadUrl = useMutation(api.widget.generateUploadUrl);
+  const send = useWidgetMutation(api.widget.sendV2);
+  const sendTyping = useMutation2(api.widget.setTyping);
+  const sendPresence = useMutation2(api.widget.presence);
+  const rateConversation = useWidgetMutation(api.widget.rateV2);
+  const identify = useWidgetMutation(api.widget.identifyV2);
+  const generateUploadUrl = useWidgetMutation(api.widget.generateUploadUrlV2);
+  const answerScreenshot = useWidgetMutation(api.widget.answerScreenshotV2);
+  const answerAsk = useCallback12(
+    async (key, shot) => {
+      if (sessionId === null) return;
+      let attachment;
+      if (shot !== null) {
+        try {
+          [attachment] = await uploadAttachments(
+            () => generateUploadUrl({ apiKey, sessionId }),
+            [shot]
+          );
+        } catch (caught) {
+          console.warn(
+            "Median: the picture the agent asked for could not be uploaded",
+            caught
+          );
+        }
+      }
+      await answerScreenshot({
+        apiKey,
+        sessionId,
+        key,
+        ...attachment === void 0 ? {} : { attachment }
+      });
+    },
+    [apiKey, sessionId, generateUploadUrl, answerScreenshot]
+  );
   const identityKey = user ? JSON.stringify(user) : null;
   const identity = useMemo2(
     () => identityKey === null ? null : JSON.parse(identityKey),
     [identityKey]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (sessionId === null || identity === null) return;
     const { facts, claim } = splitIdentity(identity);
     identify({
@@ -6376,8 +6701,8 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
   ) ?? false;
   const now = useNow(hasLiveDots ? 1e3 : 6e4);
   const takeDiagnostics = useDiagnostics(diagnostics, appState);
-  const [isSending, setIsSending] = useState19(false);
-  const [sendError, setSendError] = useState19(null);
+  const [isSending, setIsSending] = useState18(false);
+  const [sendError, setSendError] = useState18(null);
   const agent = useMemo2(
     () => config === void 0 ? null : {
       id: "median-agent",
@@ -6450,17 +6775,16 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
       team: [...[...humans.values()].slice(-2), agent]
     };
   }, [config, agent, messages]);
-  const [lastSeenAt, setLastSeenAt] = useState19(() => readLastSeenAt(apiKey));
-  const unread = useMemo2(
-    () => messages.filter(
-      (message) => message.sender === "agent" && !message.pending && (message.sentAt ?? 0) > lastSeenAt
-    ),
-    [messages, lastSeenAt]
-  );
+  const unread = useMemo2(() => {
+    const unreadIds = new Set(
+      thread?.messages.filter(isUnreadReply).map((message) => message._id)
+    );
+    return messages.filter((message) => unreadIds.has(message.id));
+  }, [messages, thread]);
   const unreadCount = unread.length;
   const latestUnread = messagePreview && (config?.messagePreview ?? true) ? unread[unread.length - 1] ?? null : null;
-  const [picked, setPicked] = useState19(null);
-  const [skipped, setSkipped] = useState19(
+  const [picked, setPicked] = useState18(null);
+  const [skipped, setSkipped] = useState18(
     () => readSkippedRatings(apiKey)
   );
   const conversationId = thread?.conversationId ?? null;
@@ -6484,15 +6808,6 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
       setSkipped((current2) => new Set(current2).add(conversationId));
     }
   } : null;
-  const markSeen = useCallback11(() => {
-    const newest = messages.reduce(
-      (latest, message) => Math.max(latest, message.sentAt ?? 0),
-      0
-    );
-    if (newest <= lastSeenAt) return;
-    writeLastSeenAt(apiKey, newest);
-    setLastSeenAt(newest);
-  }, [apiKey, messages, lastSeenAt]);
   async function handleSend(body, files) {
     if (sessionId === null || isSending) return;
     setSendError(null);
@@ -6534,12 +6849,29 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
     sendTyping({ apiKey, sessionId, isTyping }).catch(() => {
     });
   }
-  const reportPresence = useCallback11(() => {
+  const readsKey = JSON.stringify(
+    widgetReadReceipts(thread?.messages ?? [], now)
+  );
+  const reads = useMemo2(
+    () => JSON.parse(readsKey),
+    [readsKey]
+  );
+  const reportPresence = useCallback12(() => {
     if (sessionId === null || isLocked) return;
-    sendPresence({ apiKey, sessionId }).catch(() => {
+    sendPresence({
+      apiKey,
+      sessionId,
+      reads
+    }).catch((caught) => {
+      console.warn("Median: support read status could not be synced", caught);
     });
-  }, [apiKey, sessionId, isLocked, sendPresence]);
+  }, [apiKey, sessionId, isLocked, sendPresence, reads]);
   const ask = thread?.direction ?? null;
+  useScreenshotAsk({
+    ask: thread?.screenshotAsk ?? null,
+    enabled: screenshot,
+    answer: answerAsk
+  });
   return {
     presence,
     messages,
@@ -6574,7 +6906,6 @@ function useMedianThread(apiKey, user, telemetry = true, isLocked = false, diagn
     unreadCount,
     /** The newest of those, for the card on the closed button. */
     latestUnread,
-    markSeen,
     /** Say the panel is on screen, so replies are not also emailed. */
     reportPresence,
     sendError,
@@ -6649,17 +6980,19 @@ async function reportError(error, options = {}) {
   const diagnostics = snapshotNow({ ...factsOf(crash), ...options.state });
   try {
     client ??= new ConvexHttpClient(MEDIAN_DEPLOYMENT_URL);
-    const outcome = await client.mutation(api.feedback.reportError, {
+    const images = options.screenshot === false ? [] : await screenshotOf(client, apiKey, sessionId);
+    const outcome = await client.mutation(api.feedback.reportErrorV2, {
       apiKey,
       sessionId,
       error: crash,
+      ...images.length > 0 ? { images } : {},
       ...user ? { user: facts } : {},
       ...claim ? { identity: claim } : {},
       ...context ? { context } : {},
       ...page ? { page } : {},
       ...diagnostics ? { diagnostics } : {},
       ...custom ? { customData: custom } : {}
-    });
+    }).then(unwrapMutationResult);
     if (outcome === "off") {
       if (custom) restoreCustomData(custom);
       return { reported: false, reason: REASONS.off };
@@ -6671,6 +7004,22 @@ async function reportError(error, options = {}) {
     return { reported: false, reason: REASONS.failed };
   }
 }
+async function screenshotOf(client3, apiKey, sessionId) {
+  try {
+    const shot = await capturePage();
+    if (shot === null) return [];
+    return await uploadAttachments(
+      () => client3.mutation(api.widget.generateUploadUrlV2, { apiKey, sessionId }).then(unwrapMutationResult),
+      [shot]
+    );
+  } catch (caught) {
+    console.warn(
+      "Median: the crash report's screenshot could not be sent",
+      caught
+    );
+    return [];
+  }
+}
 function useCanReportError() {
   const isInstalled = useSyncExternalStore10(
     subscribeInstall,
@@ -6683,6 +7032,77 @@ function useCanReportError() {
   return isInstalled && Boolean(MEDIAN_DEPLOYMENT_URL);
 }
 
+// ../../apps/web/src/components/support-widget/sdk/signed-out.ts
+import { useEffect as useEffect19, useRef as useRef19, useState as useState19, useSyncExternalStore as useSyncExternalStore11 } from "react";
+var held = /* @__PURE__ */ new Map();
+var signedOut = /* @__PURE__ */ new Set();
+var RELEASE_AFTER_MS = 2e3;
+function signOutHeldUsers() {
+  for (const person of held.values()) signedOut.add(person);
+}
+function releaseLater(person) {
+  if (!signedOut.has(person)) return;
+  setTimeout(() => {
+    for (const other of held.values()) if (other === person) return;
+    signedOut.delete(person);
+  }, RELEASE_AFTER_MS);
+}
+function personKey(user) {
+  if (user === void 0) return null;
+  return user.id && user.hash ? `id:${user.id}` : JSON.stringify(user);
+}
+function useSignedInUser(user) {
+  const person = personKey(user);
+  useSyncExternalStore11(subscribeSession, getResetCount, () => 0);
+  const [token] = useState19(() => Symbol("median-panel"));
+  const previous = useRef19(null);
+  useEffect19(() => {
+    if (previous.current !== null && previous.current !== person) {
+      signedOut.delete(previous.current);
+    }
+    previous.current = person;
+    if (person === null) held.delete(token);
+    else held.set(token, person);
+  }, [person, token]);
+  useEffect19(
+    () => () => {
+      const person2 = held.get(token);
+      held.delete(token);
+      if (person2 !== void 0) releaseLater(person2);
+    },
+    [token]
+  );
+  return person !== null && signedOut.has(person) ? void 0 : user;
+}
+
+// ../../apps/web/src/components/support-widget/sdk/unread-store.ts
+import { useSyncExternalStore as useSyncExternalStore12 } from "react";
+var count = 0;
+var listeners6 = /* @__PURE__ */ new Set();
+var unreadStore = {
+  subscribe(listener) {
+    listeners6.add(listener);
+    return () => {
+      listeners6.delete(listener);
+    };
+  },
+  read: () => count,
+  /** The server has no thread to count, and neither does the first paint. */
+  readServer: () => 0,
+  set(next) {
+    if (count === next) return;
+    count = next;
+    for (const listener of listeners6) listener();
+  }
+};
+function useUnreadCount() {
+  return useSyncExternalStore12(
+    unreadStore.subscribe,
+    unreadStore.read,
+    unreadStore.readServer
+  );
+}
+
 // ../../apps/web/src/components/support-widget/sdk/control.ts
 var store = createOpenStore("MedianSupport");
 var medianSupport = {
@@ -6690,6 +7110,10 @@ var medianSupport = {
   get isOpen() {
     return store.readEffective();
   },
+  /** Replies the visitor has not read. Zero while nothing is mounted. */
+  get unreadCount() {
+    return unreadStore.read();
+  },
   open() {
     store.request(true);
     store.warnIfNothingIsMounted("the widget was asked to open");
@@ -6717,7 +7141,13 @@ var medianSupport = {
       }
       return;
     }
-    store.warnIfNothingIsMounted("data was attached");
+    if (!isDevelopment || hasCustomDataSender()) return;
+    setTimeout(() => {
+      if (hasCustomDataSender()) return;
+      console.warn(
+        "Median: data was attached, but no <MedianSupport>, <MedianFeedback> or contact form is on the page to send it. It goes with the next message, note, sendMedianContact() or reportError() call."
+      );
+    }, 1e3);
   },
   /**
    * File the crash your error screen is showing, with everything the browser
@@ -6736,20 +7166,27 @@ var medianSupport = {
    * Forget this browser's conversation, so the next one starts fresh and
    * anonymous. Call it when your user signs out: whoever sits down next
    * should not find somebody else's thread waiting.
+   *
+   * The user the widget holds right now is signed out with it, even if your
+   * own state still passes them for a moment, and an identity route is read
+   * again.
    */
   reset() {
+    signOutHeldUsers();
     resetSessions();
     resetVisitorEmails();
   }
 };
 function useMedianSupport() {
-  const isOpen = useSyncExternalStore11(
+  const isOpen = useSyncExternalStore13(
     store.subscribe,
     store.readEffective,
     store.readServerEffective
   );
+  const unreadCount = useUnreadCount();
   return {
     isOpen,
+    unreadCount,
     open: medianSupport.open,
     close: medianSupport.close,
     toggle: medianSupport.toggle,
@@ -6761,18 +7198,18 @@ function useMedianSupport() {
 function useMedianOpenState(options) {
   return useOpenState(store, options);
 }
-function useRegisterMedianSupport() {
-  useRegister(store);
+function useRegisterMedianSupport(name = "MedianSupport") {
+  useRegister(store, name);
 }
 
 // ../../apps/web/src/components/support-widget/sdk/error-boundary.tsx
-import { ConvexError as ConvexError2 } from "convex/values";
+import { ConvexError as ConvexError3 } from "convex/values";
 import { Component } from "react";
-function adviceFor(error) {
-  if (error instanceof ConvexError2 && typeof error.data === "object" && error.data !== null && error.data.code === "invalid_api_key") {
-    return "Median did not recognize the apiKey passed to <MedianSupport>, so the widget has been hidden. Derive it from an active MEDIAN_KEY with publicKeyFromMedianKey.";
+function adviceFor(error, component) {
+  if (error instanceof ConvexError3 && typeof error.data === "object" && error.data !== null && error.data.code === "invalid_api_key") {
+    return `Median did not recognize the apiKey passed to <${component}>, so it has been hidden. Derive it from an active MEDIAN_KEY with publicKeyFromMedianKey.`;
   }
-  return "The Median support widget hit an error and has been hidden. Your page is unaffected.";
+  return `Median: <${component}> hit an error and has been hidden. Your page is unaffected.`;
 }
 var MedianErrorBoundary = class extends Component {
   state = { hasFailed: false };
@@ -6780,7 +7217,7 @@ var MedianErrorBoundary = class extends Component {
     return { hasFailed: true };
   }
   componentDidCatch(error) {
-    console.error(adviceFor(error), error);
+    console.error(adviceFor(error, this.props.component), error);
   }
   render() {
     return this.state.hasFailed ? null : this.props.children;
@@ -6788,7 +7225,7 @@ var MedianErrorBoundary = class extends Component {
 };
 
 // ../../apps/web/src/components/support-widget/sdk/use-identity.ts
-import { useEffect as useEffect18, useState as useState20 } from "react";
+import { useEffect as useEffect20, useState as useState20, useSyncExternalStore as useSyncExternalStore14 } from "react";
 var NOTHING = {
   apiKey: void 0,
   user: void 0,
@@ -6796,8 +7233,9 @@ var NOTHING = {
 };
 var WAITING = { ...NOTHING, isLoading: true };
 var inFlight2 = /* @__PURE__ */ new Map();
-function read3(endpoint) {
-  const existing = inFlight2.get(endpoint);
+function read3(endpoint, resets) {
+  const cacheKey = `${resets}:${endpoint}`;
+  const existing = inFlight2.get(cacheKey);
   if (existing !== void 0) return existing;
   const request = (async () => {
     const response = await fetch(endpoint, {
@@ -6812,26 +7250,27 @@ function read3(endpoint) {
       );
     }
     return await response.json();
-  })().finally(() => inFlight2.delete(endpoint));
-  inFlight2.set(endpoint, request);
+  })().finally(() => inFlight2.delete(cacheKey));
+  inFlight2.set(cacheKey, request);
   return request;
 }
-function useMissingCredentials(component, apiKey, endpoint) {
-  useEffect18(() => {
+function useMissingCredentials(caller, apiKey, endpoint, consequence = "nothing is on the page") {
+  useEffect20(() => {
     if (apiKey !== void 0 || endpoint !== void 0) return;
     console.error(
-      `Median: <${component}> was given neither apiKey nor identity, so nothing is on the page. Pass the median_pk_ id from publicKeyFromMedianKey(MEDIAN_KEY), or the path of a route built with medianIdentity().`
+      `Median: ${caller} was given neither apiKey nor identity, so ${consequence}. Pass the median_pk_ id from publicKeyFromMedianKey(MEDIAN_KEY), or the path of a route built with medianIdentity().`
     );
-  }, [component, apiKey, endpoint]);
+  }, [caller, apiKey, endpoint, consequence]);
 }
 function useMedianIdentity(endpoint) {
   const [answered, setAnswered] = useState20(null);
-  useEffect18(() => {
+  const resets = useSyncExternalStore14(subscribeSession, getResetCount, () => 0);
+  useEffect20(() => {
     if (endpoint === void 0) return;
     let listening = true;
     void (async () => {
       try {
-        const body = await read3(endpoint);
+        const body = await read3(endpoint, resets);
         if (!listening) return;
         setAnswered({
           endpoint,
@@ -6855,21 +7294,60 @@ function useMedianIdentity(endpoint) {
     return () => {
       listening = false;
     };
-  }, [endpoint]);
+  }, [endpoint, resets]);
   if (endpoint === void 0) return NOTHING;
   if (answered?.endpoint === endpoint) return answered.identity;
   return WAITING;
 }
 
+// ../../apps/web/src/components/support-widget/sdk/use-median-branding.ts
+import { ConvexHttpClient as ConvexHttpClient2 } from "convex/browser";
+import { useEffect as useEffect21, useState as useState21 } from "react";
+function useMedianBranding(apiKey) {
+  const [state, setState] = useState21({ key: apiKey, show: true });
+  useEffect21(() => {
+    if (!apiKey || !MEDIAN_DEPLOYMENT_URL) return;
+    const client3 = new ConvexHttpClient2(MEDIAN_DEPLOYMENT_URL);
+    let active = true;
+    let expiry;
+    async function refresh() {
+      try {
+        const result = await client3.action(api.billingAccess.branding, {
+          apiKey
+        });
+        if (!active) return;
+        clearTimeout(expiry);
+        const expired = result.expiresAt !== null && result.expiresAt <= Date.now();
+        setState({ key: apiKey, show: result.showBranding || expired });
+        if (!result.showBranding && result.expiresAt !== null)
+          expiry = setTimeout(
+            () => setState({ key: apiKey, show: true }),
+            Math.min(2147483647, Math.max(0, result.expiresAt - Date.now()))
+          );
+      } catch {
+        if (active) setState({ key: apiKey, show: true });
+      }
+    }
+    void refresh();
+    const timer = setInterval(() => void refresh(), 6e4);
+    return () => {
+      active = false;
+      clearInterval(timer);
+      clearTimeout(expiry);
+    };
+  }, [apiKey]);
+  return state.key === apiKey ? state.show : true;
+}
+
 // ../../apps/web/src/components/support-widget/sdk/median-connection.tsx
 import { ConvexProvider, ConvexReactClient } from "convex/react";
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function MedianConnection({
   what,
   children
 }) {
-  const [client3] = useState21(() => {
+  const [client3] = useState22(() => {
     if (!MEDIAN_DEPLOYMENT_URL) {
       throw new Error(
         `The Median ${what} was built without a deployment URL. Set NEXT_PUBLIC_CONVEX_URL.`
@@ -6881,15 +7359,15 @@ function MedianConnection({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-api-key-warning.ts
-import { useEffect as useEffect19 } from "react";
-function useApiKeyShapeWarning(component, apiKey) {
-  useEffect19(() => {
+import { useEffect as useEffect22 } from "react";
+function useApiKeyShapeWarning(caller, apiKey) {
+  useEffect22(() => {
     if (apiKey === void 0 || hasPrefix(apiKey, API_KEY_PREFIX)) return;
     const shown = apiKey === "" ? "an empty string" : `"${apiKey.length > 16 ? `${apiKey.slice(0, 16)}\u2026` : apiKey}"`;
     console.error(
-      `Median: the apiKey passed to <${component}> is ${shown}, which does not look like the browser-safe id from publicKeyFromMedianKey(MEDIAN_KEY). It should start with ${API_KEY_PREFIX}.`
+      `Median: the apiKey passed to ${caller} is ${shown}, which does not look like the browser-safe id from publicKeyFromMedianKey(MEDIAN_KEY). It should start with ${API_KEY_PREFIX}.`
     );
-  }, [component, apiKey]);
+  }, [caller, apiKey]);
 }
 
 // ../../node_modules/.bun/cuelume@0.2.2/node_modules/cuelume/dist/sounds/recipes.js
@@ -7210,16 +7688,16 @@ function play(sound = "chime", options) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-message-sound.ts
-import { useEffect as useEffect20, useRef as useRef16 } from "react";
+import { useEffect as useEffect23, useRef as useRef20 } from "react";
 var ARRIVAL_VOLUME = 0.45;
 function useMessageSound({
   messages,
   conversationId = null,
   isLoading
 }) {
-  const heard = useRef16(null);
-  const watching = useRef16(null);
-  useEffect20(() => {
+  const heard = useRef20(null);
+  const watching = useRef20(null);
+  useEffect23(() => {
     if (isLoading) {
       heard.current = null;
       return;
@@ -7243,7 +7721,7 @@ function useMessageSound({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-navigation.ts
-import { useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect as useLayoutEffect9, useRef as useRef17, useState as useState22 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect24, useLayoutEffect as useLayoutEffect10, useRef as useRef21, useState as useState23 } from "react";
 var isDevelopment2 = typeof process !== "undefined" && process.env.NODE_ENV === "development";
 var STALE_AFTER_MS = 5 * 60 * 1e3;
 function isFresh(at2) {
@@ -7287,12 +7765,12 @@ function useSupportNavigation({
   isLoading,
   onNavigate
 }) {
-  const seen = useRef17(null);
-  const watching = useRef17(null);
-  const [spotlight, setSpotlight] = useState22(null);
-  const drawn = useRef17(0);
-  const [taken, setTaken] = useState22(null);
-  const follow = useCallback12(
+  const seen = useRef21(null);
+  const watching = useRef21(null);
+  const [spotlight, setSpotlight] = useState23(null);
+  const drawn = useRef21(0);
+  const [taken, setTaken] = useState23(null);
+  const follow = useCallback13(
     (destination) => {
       if (onNavigate === void 0) return;
       const path = pathOnThisSite(destination.path);
@@ -7314,7 +7792,7 @@ function useSupportNavigation({
     },
     [onNavigate]
   );
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (isLoading) return;
     const asked = ringing(messages, ask);
     if (seen.current === null || watching.current !== conversationId) {
@@ -7332,8 +7810,8 @@ function useSupportNavigation({
     }
     if (latest !== null) setSpotlight(latest);
   }, [messages, ask, conversationId, isLoading]);
-  const warned = useRef17(false);
-  useEffect21(() => {
+  const warned = useRef21(false);
+  useEffect24(() => {
     if (!isDevelopment2 || onNavigate !== void 0 || warned.current) return;
     const offered = messages.some((message) => message.navigateTo !== void 0) || ask?.navigateTo != null;
     if (!offered) return;
@@ -7342,12 +7820,12 @@ function useSupportNavigation({
       "Median: a tool offered to take this visitor to a page, but <MedianSupport> has no onNavigate, so no button is shown for it. Pass one, such as onNavigate={router.push}."
     );
   }, [messages, ask, onNavigate]);
-  const [, expire] = useState22(0);
-  useEffect21(() => {
+  const [, expire] = useState23(0);
+  useEffect24(() => {
     if (ask === null || ask.navigateTo === null) return;
     const left = ask.at + STALE_AFTER_MS - Date.now();
     if (left <= 0) return;
-    const timer = setTimeout(() => expire((count) => count + 1), left);
+    const timer = setTimeout(() => expire((count2) => count2 + 1), left);
     return () => clearTimeout(timer);
   }, [ask]);
   const offer = ask !== null && ask.navigateTo !== null && ask.key !== taken && onNavigate !== void 0 && isFresh(ask.at) ? { key: ask.key, path: ask.navigateTo, highlight: ask.highlight } : null;
@@ -7355,7 +7833,33 @@ function useSupportNavigation({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-teaser.ts
-import { useCallback as useCallback13, useState as useState23 } from "react";
+import { useCallback as useCallback14, useState as useState24 } from "react";
+
+// ../../apps/web/src/components/support-widget/sdk/stamps.ts
+var inMemory3 = /* @__PURE__ */ new Map();
+function keyOf(name, apiKey) {
+  return `median:${name}:${apiKey}`;
+}
+function readStamp(name, apiKey) {
+  if (typeof window === "undefined") return 0;
+  const key = keyOf(name, apiKey);
+  try {
+    const stored = window.localStorage.getItem(key);
+    const at2 = stored === null ? Number.NaN : Number(stored);
+    return Number.isFinite(at2) ? at2 : 0;
+  } catch {
+    return inMemory3.get(key) ?? 0;
+  }
+}
+function writeStamp(name, apiKey, at2) {
+  if (typeof window === "undefined") return;
+  const key = keyOf(name, apiKey);
+  inMemory3.set(key, at2);
+  try {
+    window.localStorage.setItem(key, String(at2));
+  } catch {
+  }
+}
 
 // ../../apps/web/src/components/support-widget/sdk/teaser-state.ts
 var TEASER = "teaser";
@@ -7368,11 +7872,11 @@ function writeTeaserDismissedAt(apiKey, at2) {
 
 // ../../apps/web/src/components/support-widget/sdk/use-teaser.ts
 function useTeaser(apiKey, latestUnread) {
-  const [dismissedAt, setDismissedAt] = useState23(
+  const [dismissedAt, setDismissedAt] = useState24(
     () => readTeaserDismissedAt(apiKey)
   );
   const teaser = latestUnread !== null && (latestUnread.sentAt ?? 0) > dismissedAt ? latestUnread : null;
-  const dismiss = useCallback13(() => {
+  const dismiss = useCallback14(() => {
     if (teaser === null) return;
     const at2 = teaser.sentAt ?? Date.now();
     writeTeaserDismissedAt(apiKey, at2);
@@ -7381,8 +7885,38 @@ function useTeaser(apiKey, latestUnread) {
   return { teaser, dismiss };
 }
 
+// ../../apps/web/src/components/support-widget/sdk/use-unread-title.ts
+import { useEffect as useEffect25 } from "react";
+function badged(count2, title) {
+  return `(${count2}) ${title}`.trim();
+}
+function useUnreadTitle(unreadCount) {
+  useEffect25(() => {
+    if (unreadCount === 0 || typeof document === "undefined") return;
+    let plain = document.title;
+    let shown = badged(unreadCount, plain);
+    document.title = shown;
+    const observer = new MutationObserver(() => {
+      const current2 = document.title;
+      if (current2 === shown) return;
+      plain = current2;
+      shown = badged(unreadCount, plain);
+      document.title = shown;
+    });
+    observer.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+      if (document.title === shown) document.title = plain;
+    };
+  }, [unreadCount]);
+}
+
 // ../../apps/web/src/components/support-widget/sdk/median-support.tsx
-import { Fragment as Fragment31, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var PRESENCE_BEAT_MS = 45e3;
 function MedianSupport(props) {
   return /* @__PURE__ */ jsx38(MedianSupportPreview, { ...props });
@@ -7393,7 +7927,7 @@ function MedianSupportPreview({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(MedianErrorBoundary, { children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx38(MedianErrorBoundary, { component: componentName(presentation), children: /* @__PURE__ */ jsx38(
     MedianIdentity,
     {
       ...props,
@@ -7403,17 +7937,25 @@ function MedianSupportPreview({
     }
   ) });
 }
+function componentName(presentation) {
+  return presentation === "modal" ? "MedianSupportModal" : "MedianSupport";
+}
 function MedianIdentity({ apiKey, identity, user, ...rest }) {
   const resolved = useMedianIdentity(identity);
-  useMissingCredentials("MedianSupport", apiKey, identity);
+  useMissingCredentials(
+    `<${componentName(rest.presentation)}>`,
+    apiKey,
+    identity
+  );
   const key = apiKey ?? resolved.apiKey;
+  const person = useSignedInUser(user ?? resolved.user);
   if (key === void 0) return null;
   return /* @__PURE__ */ jsx38(MedianConnection, { what: "widget", children: /* @__PURE__ */ jsx38(
     MedianLauncher,
     {
       ...rest,
       apiKey: key,
-      user: user ?? resolved.user,
+      user: person,
       isResolvingIdentity: resolved.isLoading
     }
   ) });
@@ -7422,12 +7964,14 @@ function MedianLauncher({
   apiKey,
   user,
   telemetry,
+  screenshot,
   diagnostics,
   appState,
   requireSignIn = false,
   onSignIn,
   requireEmail = true,
   messagePreview = true,
+  titleCount = true,
   launcher,
   presentation,
   defaultOpen,
@@ -7437,12 +7981,11 @@ function MedianLauncher({
   isResolvingIdentity,
   className
 }) {
-  useRegisterMedianSupport();
-  useApiKeyShapeWarning(
-    presentation === "modal" ? "MedianSupportModal" : "MedianSupport",
-    apiKey
-  );
+  useRegisterMedianSupport(componentName(presentation));
+  useCustomDataSender();
+  useApiKeyShapeWarning(`<${componentName(presentation)}>`, apiKey);
   useRememberInstall(apiKey, user);
+  const showBranding = useMedianBranding(apiKey);
   const [isOpen, setOpen] = useMedianOpenState({
     open,
     defaultOpen,
@@ -7462,31 +8005,28 @@ function MedianLauncher({
     rating,
     unreadCount,
     latestUnread,
-    markSeen,
     reportPresence,
     sendError,
     send,
     setTyping
-  } = useMedianThread(
+  } = useMedianThread({
     apiKey,
     user,
     telemetry,
+    screenshot,
     isLocked,
     diagnostics,
     appState,
     requireEmail,
     messagePreview
-  );
+  });
   const { teaser, dismiss: dismissTeaser } = useTeaser(apiKey, latestUnread);
   const isSettling = isLoading || isResolvingIdentity;
-  useEffect22(() => {
-    if (isOpen) markSeen();
-  }, [isOpen, markSeen]);
-  useEffect22(() => {
+  useEffect26(() => {
     if (!threadRendersMarkdown(messages)) return;
     return warmMarkdownWhenIdle();
   }, [messages]);
-  useEffect22(() => {
+  useEffect26(() => {
     if (!isOpen) return;
     const beat = () => {
       if (document.visibilityState === "visible") reportPresence();
@@ -7519,16 +8059,22 @@ function MedianLauncher({
     conversationId,
     isLoading: isSettling || isLocked
   });
+  useUnreadTitle(titleCount ? unreadCount : 0);
+  useEffect26(() => {
+    unreadStore.set(unreadCount);
+  }, [unreadCount]);
+  useEffect26(() => () => unreadStore.set(0), []);
   const resolvedPresence = presence ?? {
     name: "Support",
     status: "Connecting",
     team: []
   };
-  return /* @__PURE__ */ jsxs21(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment31, { children: [
     spotlight !== null && /* @__PURE__ */ jsx38(WidgetSpotlight, { selector: spotlight.selector }, spotlight.key),
     /* @__PURE__ */ jsx38(
       SupportLauncher,
       {
+        showBadge: showBranding,
         presence: resolvedPresence,
         messages,
         onSend: send,
@@ -7644,7 +8190,12 @@ function mountMedianSupportModal(options) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/median-feedback.tsx
-import { useCallback as useCallback15, useEffect as useEffect25, useRef as useRef20, useState as useState27 } from "react";
+import {
+  useCallback as useCallback16,
+  useEffect as useEffect29,
+  useRef as useRef24,
+  useState as useState28
+} from "react";
 
 // ../backend/convex/shared/feedback.ts
 var NOTE_MAX_LENGTH = 2e3;
@@ -7654,17 +8205,17 @@ var MAX_REPORT_IMAGES = 6;
 
 // ../../apps/web/src/components/support-widget/feedback/feedback-panel.tsx
 import {
-  useEffect as useEffect24,
-  useRef as useRef19,
-  useState as useState25
+  useEffect as useEffect28,
+  useRef as useRef23,
+  useState as useState26
 } from "react";
 
 // ../../apps/web/src/components/support-widget/feedback/feedback-popover.tsx
-import { useEffect as useEffect23, useRef as useRef18 } from "react";
+import { useEffect as useEffect27, useRef as useRef22 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // ../../apps/web/src/components/support-widget/feedback/use-anchor.ts
-import { useLayoutEffect as useLayoutEffect10, useState as useState24 } from "react";
+import { useLayoutEffect as useLayoutEffect11, useState as useState25 } from "react";
 var GAP2 = 8;
 var MARGIN2 = 16;
 function findAnchor(selector) {
@@ -7684,8 +8235,8 @@ function useAnchor({
   panelRef,
   isOpen
 }) {
-  const [side, setSide] = useState24("bottom");
-  useLayoutEffect10(() => {
+  const [side, setSide] = useState25("bottom");
+  useLayoutEffect11(() => {
     if (!isOpen) return;
     let frame = 0;
     function place() {
@@ -7753,12 +8304,12 @@ function FeedbackPopover({
   width,
   children
 }) {
-  const panelRef = useRef18(null);
+  const panelRef = useRef22(null);
   const side = useAnchor({ triggerRef, anchor, panelRef, isOpen });
   const isHydrated = useHydrated();
-  const opener = useRef18(null);
-  const wasOpen = useRef18(isOpen);
-  useEffect23(() => {
+  const opener = useRef22(null);
+  const wasOpen = useRef22(isOpen);
+  useEffect27(() => {
     if (!isOpen) return;
     function handleKeyDown(event) {
       if (event.key === "Escape") onClose();
@@ -7766,7 +8317,7 @@ function FeedbackPopover({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, onClose]);
-  useEffect23(() => {
+  useEffect27(() => {
     if (!isOpen) return;
     function handlePointerDown(event) {
       const target = event.target;
@@ -7778,7 +8329,7 @@ function FeedbackPopover({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isOpen, onClose, triggerRef]);
-  useEffect23(() => {
+  useEffect27(() => {
     if (wasOpen.current === isOpen) return;
     wasOpen.current = isOpen;
     if (isOpen) {
@@ -7834,7 +8385,7 @@ function FeedbackPopover({
 }
 
 // ../../apps/web/src/components/support-widget/feedback/feedback-panel.tsx
-import { Fragment as Fragment32, jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 var THANKS_MS2 = 1600;
 function FeedbackPanel({
   onSubmit,
@@ -7843,21 +8394,21 @@ function FeedbackPanel({
   notice,
   showBadge = true,
   title = "Share feedback",
-  description = "The current page URL is included.",
+  description = "Bugs, ideas, anything.",
   placeholder = "Tell us what could be better.",
   className
 }) {
-  const [draft, setDraft] = useState25("");
-  const [isSending, setSending] = useState25(false);
-  const [isSent, setSent] = useState25(false);
-  const fileInputRef = useRef19(null);
+  const [draft, setDraft] = useState26("");
+  const [isSending, setSending] = useState26(false);
+  const [isSent, setSent] = useState26(false);
+  const fileInputRef = useRef23(null);
   const images = useAttachmentDrafts({
     accept: "image",
     max: MAX_REPORT_IMAGES
   });
   const target = useAttachmentTarget({ onFiles: images.add });
   const canSend = draft.trim().length > 0 && !images.hasBlocker && !isSending && !isSent;
-  useEffect24(() => {
+  useEffect28(() => {
     if (!isSent) return;
     const timer = setTimeout(() => onSent?.(), THANKS_MS2);
     return () => clearTimeout(timer);
@@ -7885,7 +8436,7 @@ function FeedbackPanel({
     event.preventDefault();
     void send();
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "section",
     {
       "aria-label": title,
@@ -7893,12 +8444,12 @@ function FeedbackPanel({
       className: cn(
         // The widget's own radius scale, so the app's token can climb as the
         // chrome gets rounder without this changing shape under its hosts.
-        "flex w-full flex-col gap-2 overflow-hidden rounded-xl border bg-card p-3 text-card-foreground [--radius:0.625rem]",
+        `flex w-full flex-col gap-2 overflow-hidden ${WIDGET_CORNER} border bg-card p-3 text-card-foreground [--radius:0.625rem]`,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs22("header", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs23("header", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 flex-col", children: [
             /* @__PURE__ */ jsx43("h2", { className: "truncate text-sm font-semibold tracking-tight", children: title }),
             /* @__PURE__ */ jsx43("p", { className: "text-xs text-muted-foreground", children: description })
           ] }),
@@ -7915,8 +8466,8 @@ function FeedbackPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "grid", children: [
-          /* @__PURE__ */ jsx43(Collapse, { isOpen: !isSent, children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "grid", children: [
+          /* @__PURE__ */ jsx43(Collapse, { isOpen: !isSent, children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1.5", children: [
             /* @__PURE__ */ jsx43(
               Textarea,
               {
@@ -7929,7 +8480,7 @@ function FeedbackPanel({
                 "aria-label": title,
                 ...{ [AUTOFOCUS_ATTRIBUTE]: "" },
                 className: cn(
-                  TEXT_FIELD_SHELL,
+                  WIDGET_TEXT_FIELD_SHELL,
                   "max-h-40 min-h-18 px-2.5 py-2",
                   // 16px on phones, in pixels: any focused field smaller than
                   // that makes iOS zoom the host's whole page in.
@@ -7947,14 +8498,14 @@ function FeedbackPanel({
             )) }),
             notice && /* @__PURE__ */ jsx43("p", { className: "animate-in px-0.5 text-xs text-destructive fade-in duration-150", children: notice })
           ] }) }),
-          /* @__PURE__ */ jsx43(Collapse, { isOpen: isSent, children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-center gap-2 py-4 text-sm font-medium", children: [
+          /* @__PURE__ */ jsx43(Collapse, { isOpen: isSent, children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center gap-2 py-4 text-sm font-medium", children: [
             /* @__PURE__ */ jsx43("span", { className: "grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx43(Check, { className: "size-3" }) }),
             "Thanks for your feedback."
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "flex min-h-8 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex min-h-8 items-center gap-2", children: [
           showBadge && /* @__PURE__ */ jsx43(PoweredByMedian, { className: "justify-start" }),
-          !isSent && /* @__PURE__ */ jsxs22(Fragment32, { children: [
+          !isSent && /* @__PURE__ */ jsxs23(Fragment32, { children: [
             /* @__PURE__ */ jsx43(
               "input",
               {
@@ -7980,7 +8531,7 @@ function FeedbackPanel({
                 children: /* @__PURE__ */ jsx43(ImageSquare, {})
               }
             ),
-            /* @__PURE__ */ jsxs22(
+            /* @__PURE__ */ jsxs23(
               WidgetButton,
               {
                 type: "button",
@@ -8017,7 +8568,7 @@ function FeedbackPanel({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/feedback-control.ts
-import { useSyncExternalStore as useSyncExternalStore12 } from "react";
+import { useSyncExternalStore as useSyncExternalStore15 } from "react";
 var store2 = createOpenStore("MedianFeedback");
 var medianFeedback = {
   /** What the panel is doing right now. */
@@ -8040,7 +8591,7 @@ var medianFeedback = {
   }
 };
 function useMedianFeedback() {
-  const isOpen = useSyncExternalStore12(
+  const isOpen = useSyncExternalStore15(
     store2.subscribe,
     store2.readEffective,
     store2.readServerEffective
@@ -8060,8 +8611,7 @@ function useRegisterMedianFeedback() {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-feedback-note.ts
-import { useMutation as useMutation2 } from "convex/react";
-import { useCallback as useCallback14, useState as useState26, useSyncExternalStore as useSyncExternalStore13 } from "react";
+import { useCallback as useCallback15, useState as useState27, useSyncExternalStore as useSyncExternalStore16 } from "react";
 var REFUSALS = {
   off: "Feedback is currently unavailable. Try again later.",
   empty: "Enter your feedback before sending."
@@ -8070,19 +8620,20 @@ function useFeedbackNote({
   apiKey,
   user,
   telemetry = true,
+  screenshot = true,
   diagnostics,
   appState
 }) {
-  const sessionId = useSyncExternalStore13(
+  const sessionId = useSyncExternalStore16(
     subscribeSession,
-    useCallback14(() => getOrCreateSessionId(apiKey), [apiKey]),
+    useCallback15(() => getOrCreateSessionId(apiKey), [apiKey]),
     () => null
   );
-  const submitNote = useMutation2(api.feedback.submit);
-  const getUploadUrl = useMutation2(api.widget.generateUploadUrl);
+  const submitNote = useWidgetMutation(api.feedback.submitV2);
+  const getUploadUrl = useWidgetMutation(api.widget.generateUploadUrlV2);
   const takeDiagnostics = useDiagnostics(diagnostics, appState);
-  const [notice, setNotice] = useState26(null);
-  const submit = useCallback14(
+  const [notice, setNotice] = useState27(null);
+  const submit = useCallback15(
     async (body, images = []) => {
       setNotice(null);
       if (sessionId === null) {
@@ -8096,9 +8647,10 @@ function useFeedbackNote({
         const page = telemetry ? collectPage() : void 0;
         const collected = takeDiagnostics();
         const { facts, claim } = splitIdentity(user ?? null);
+        const shot = screenshot && images.length < MAX_REPORT_IMAGES ? await capturePage() : null;
         const attached = await uploadAttachments(
           () => getUploadUrl({ apiKey, sessionId }),
-          images
+          shot === null ? images : [...images, shot]
         );
         const outcome = await submitNote({
           apiKey,
@@ -8114,13 +8666,18 @@ function useFeedbackNote({
         });
         if (outcome !== "taken") {
           explained = true;
-          setNotice(REFUSALS[outcome] ?? "Could not send your feedback. Try again.");
+          setNotice(
+            REFUSALS[outcome] ?? "Could not send your feedback. Try again."
+          );
           throw new Error(outcome);
         }
       } catch (caught) {
         if (custom) restoreCustomData(custom);
         if (!explained) {
-          console.error("Sending feedback from the Median panel failed", caught);
+          console.error(
+            "Sending feedback from the Median panel failed",
+            caught
+          );
           setNotice(errorMessage(caught));
         }
         throw caught;
@@ -8131,6 +8688,7 @@ function useFeedbackNote({
       sessionId,
       user,
       telemetry,
+      screenshot,
       takeDiagnostics,
       submitNote,
       getUploadUrl
@@ -8140,10 +8698,10 @@ function useFeedbackNote({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/median-feedback.tsx
-import { Fragment as Fragment33, jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_WIDTH2 = "20rem";
 function MedianFeedback(props) {
-  return /* @__PURE__ */ jsx44(MedianErrorBoundary, { children: /* @__PURE__ */ jsx44(FeedbackIdentity, { ...props }) });
+  return /* @__PURE__ */ jsx44(MedianErrorBoundary, { component: "MedianFeedback", children: /* @__PURE__ */ jsx44(FeedbackIdentity, { ...props }) });
 }
 function FeedbackIdentity({
   apiKey,
@@ -8152,18 +8710,11 @@ function FeedbackIdentity({
   ...rest
 }) {
   const resolved = useMedianIdentity(identity);
-  useMissingCredentials("MedianFeedback", apiKey, identity);
+  useMissingCredentials("<MedianFeedback>", apiKey, identity);
   const key = apiKey ?? resolved.apiKey;
-  const person = user ?? resolved.user;
+  const person = useSignedInUser(user ?? resolved.user);
   if (key === void 0) return null;
-  return /* @__PURE__ */ jsx44(MedianConnection, { what: "feedback panel", children: /* @__PURE__ */ jsx44(
-    Feedback,
-    {
-      ...rest,
-      apiKey: key,
-      ...person ? { user: person } : {}
-    }
-  ) });
+  return /* @__PURE__ */ jsx44(MedianConnection, { what: "feedback panel", children: /* @__PURE__ */ jsx44(Feedback, { ...rest, apiKey: key, ...person ? { user: person } : {} }) });
 }
 function Feedback({
   apiKey,
@@ -8171,6 +8722,7 @@ function Feedback({
   anchor,
   user,
   telemetry,
+  screenshot,
   diagnostics,
   appState,
   open,
@@ -8181,9 +8733,10 @@ function Feedback({
   placeholder
 }) {
   useRegisterMedianFeedback();
-  useApiKeyShapeWarning("MedianFeedback", apiKey);
+  useApiKeyShapeWarning("<MedianFeedback>", apiKey);
+  useCustomDataSender();
   useRememberInstall(apiKey, user);
-  const triggerRef = useRef20(null);
+  const triggerRef = useRef24(null);
   const [isOpen, setOpen] = useMedianFeedbackOpenState({
     ...open !== void 0 ? { open } : {},
     ...onOpenChange ? { onOpenChange } : {}
@@ -8192,18 +8745,20 @@ function Feedback({
     apiKey,
     ...user ? { user } : {},
     ...telemetry !== void 0 ? { telemetry } : {},
+    ...screenshot !== void 0 ? { screenshot } : {},
     ...diagnostics !== void 0 ? { diagnostics } : {},
     ...appState ? { appState } : {}
   });
-  const close = useCallback15(() => setOpen(false), [setOpen]);
-  const [attempt, setAttempt] = useState27(0);
-  const hasSent = useRef20(false);
-  useEffect25(() => {
+  const showBranding = useMedianBranding(apiKey);
+  const close = useCallback16(() => setOpen(false), [setOpen]);
+  const [attempt, setAttempt] = useState28(0);
+  const hasSent = useRef24(false);
+  useEffect29(() => {
     if (!isOpen || !hasSent.current) return;
     hasSent.current = false;
-    setAttempt((count) => count + 1);
+    setAttempt((count2) => count2 + 1);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs23(Fragment33, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment33, { children: [
     children !== void 0 && // An inline span rather than a clone of whatever was passed: the
     // host's trigger keeps its own props, its own ref and its own
     // styles, and the click is caught on the way past. `display:
@@ -8228,6 +8783,7 @@ function Feedback({
         children: /* @__PURE__ */ jsx44(
           FeedbackPanel,
           {
+            showBadge: showBranding,
             onSubmit: note.submit,
             onClose: close,
             onSent: () => {
@@ -8260,23 +8816,23 @@ function mountMedianFeedback(options) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/median-contact-form.tsx
-import { useEffect as useEffect27, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo5 } from "react";
 
 // ../../apps/web/src/components/support-widget/contact/contact-form.tsx
 import {
-  useEffect as useEffect26,
+  useEffect as useEffect30,
   useId,
   useMemo as useMemo3,
-  useRef as useRef22,
-  useState as useState29
+  useRef as useRef26,
+  useState as useState30
 } from "react";
 
 // ../../apps/web/src/components/support-widget/contact/contact-field.tsx
-import { useState as useState28 } from "react";
-import { jsx as jsx46, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState29 } from "react";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var LINE_MAX_LENGTH = 200;
 var SHELL = cn(
-  TEXT_FIELD_SHELL,
+  WIDGET_TEXT_FIELD_SHELL,
   "w-full bg-card text-base max-sm:text-[16px] dark:bg-card"
 );
 var LINE = "h-11 rounded-full px-4";
@@ -8290,9 +8846,9 @@ function ContactField({
   onChange,
   onSubmit
 }) {
-  const [held, setHeld] = useState28(error);
-  if (error !== null && error !== held) setHeld(error);
-  const shown = error ?? held;
+  const [held2, setHeld] = useState29(error);
+  if (error !== null && error !== held2) setHeld(error);
+  const shown = error ?? held2;
   const errorId = `${id}-error`;
   const control = {
     id,
@@ -8308,8 +8864,8 @@ function ContactField({
     event.preventDefault();
     onSubmit?.();
   }
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs25(
       "label",
       {
         htmlFor: id,
@@ -8331,8 +8887,8 @@ function ContactField({
         onKeyDown: handleKeyDown,
         className: cn(SHELL, PARAGRAPH)
       }
-    ) : field.type === "select" ? /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs24(
+    ) : field.type === "select" ? /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs25(
         "select",
         {
           ...control,
@@ -8498,8 +9054,8 @@ function fieldComplaints(fields) {
 }
 
 // ../../apps/web/src/components/support-widget/contact/sent-mark.tsx
-import { useLayoutEffect as useLayoutEffect11, useRef as useRef21 } from "react";
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef25 } from "react";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var EASE_OUT = "cubic-bezier(0.22, 1, 0.36, 1)";
 var TRAVEL_MS = 550;
 var DRAW_LEAD_MS = 150;
@@ -8512,11 +9068,11 @@ function SentMark({
   from = null,
   className
 }) {
-  const frame = useRef21(null);
-  const square = useRef21(null);
-  const tick = useRef21(null);
-  const ring = useRef21(null);
-  useLayoutEffect11(() => {
+  const frame = useRef25(null);
+  const square = useRef25(null);
+  const tick = useRef25(null);
+  const ring = useRef25(null);
+  useLayoutEffect12(() => {
     const rest = frame.current;
     const box = square.current;
     const path = tick.current;
@@ -8574,7 +9130,7 @@ function SentMark({
       for (const animation of animations) animation.cancel();
     };
   }, [from]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "span",
     {
       ref: frame,
@@ -8618,7 +9174,7 @@ function SentMark({
 }
 
 // ../../apps/web/src/components/support-widget/contact/contact-form.tsx
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var EMAIL_PATTERN2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var FORM_SWAP = "transition-[opacity,translate] duration-250 ease-out-quint motion-reduce:transition-none";
 var THANKS_SWAP = "transition-opacity ease-out motion-reduce:transition-none";
@@ -8663,18 +9219,18 @@ function ContactForm({
 }) {
   const fields = useMemo3(() => resolveFields(hostFields), [hostFields]);
   const prefix = useId();
-  const formRef = useRef22(null);
-  const sendRef = useRef22(null);
-  const [values, setValues] = useState29(
+  const formRef = useRef26(null);
+  const sendRef = useRef26(null);
+  const [values, setValues] = useState30(
     () => startingValues(fields, initialValues)
   );
-  const [errors, setErrors] = useState29({});
-  const [isSending, setSending] = useState29(false);
-  const [sent, setSent] = useState29(null);
+  const [errors, setErrors] = useState30({});
+  const [isSending, setSending] = useState30(false);
+  const [sent, setSent] = useState30(null);
   const isSent = sent !== null;
   const knownEmail = initialValues?.email;
   const knownName = initialValues?.name;
-  const [known, setKnown] = useState29({ email: knownEmail, name: knownName });
+  const [known, setKnown] = useState30({ email: knownEmail, name: knownName });
   if (known.email !== knownEmail || known.name !== knownName) {
     setKnown({ email: knownEmail, name: knownName });
     setValues((current2) => {
@@ -8684,8 +9240,8 @@ function ContactForm({
       return next;
     });
   }
-  const [focusRequest, setFocusRequest] = useState29(0);
-  useEffect26(() => {
+  const [focusRequest, setFocusRequest] = useState30(0);
+  useEffect30(() => {
     if (focusRequest === 0) return;
     formRef.current?.querySelector('[aria-invalid="true"]')?.focus({ preventScroll: false });
   }, [focusRequest]);
@@ -8707,7 +9263,7 @@ function ContactForm({
     }
     if (Object.keys(found).length > 0) {
       setErrors(found);
-      setFocusRequest((count) => count + 1);
+      setFocusRequest((count2) => count2 + 1);
       return;
     }
     const message = composeMessage(fields, values);
@@ -8736,22 +9292,22 @@ function ContactForm({
     event.preventDefault();
     void send();
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "section",
     {
       "aria-label": title,
       "data-median-widget": "",
       className: cn(
-        "flex w-full flex-col overflow-hidden rounded-xl border bg-card p-5 text-card-foreground [--radius:0.625rem]",
+        `flex w-full flex-col overflow-hidden ${WIDGET_CORNER} border bg-card p-5 text-card-foreground [--radius:0.625rem]`,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs26("header", { className: "flex flex-col gap-0.5 pb-4", children: [
+        /* @__PURE__ */ jsxs27("header", { className: "flex flex-col gap-0.5 pb-4", children: [
           /* @__PURE__ */ jsx48("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
           /* @__PURE__ */ jsx48("p", { className: "text-sm text-muted-foreground", children: description })
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: "grid", children: [
-          /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27("div", { className: "grid", children: [
+          /* @__PURE__ */ jsxs27(
             "form",
             {
               ref: formRef,
@@ -8778,9 +9334,9 @@ function ContactForm({
                   field.name
                 )),
                 notice && /* @__PURE__ */ jsx48("p", { className: "animate-in px-1 text-sm text-destructive fade-in duration-150", children: notice }),
-                /* @__PURE__ */ jsxs26("div", { className: "flex min-h-10 flex-wrap items-center gap-3 pt-1", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "flex min-h-10 flex-wrap items-center gap-3 pt-1", children: [
                   showBadge && /* @__PURE__ */ jsx48(PoweredByMedian, { className: "justify-start" }),
-                  /* @__PURE__ */ jsxs26(
+                  /* @__PURE__ */ jsxs27(
                     WidgetButton,
                     {
                       ref: sendRef,
@@ -8832,15 +9388,15 @@ function ContactForm({
                 THANKS_SWAP,
                 isSent ? "duration-0" : "pointer-events-none opacity-0 duration-200"
               ),
-              children: sent !== null && /* @__PURE__ */ jsxs26("div", { className: "contents", children: [
+              children: sent !== null && /* @__PURE__ */ jsxs27("div", { className: "contents", children: [
                 /* @__PURE__ */ jsx48(SentMark, { from: sent.from }),
-                /* @__PURE__ */ jsxs26(
+                /* @__PURE__ */ jsxs27(
                   "div",
                   {
                     className: cn("flex max-w-72 flex-col gap-1", ARRIVES2, "delay-[400ms]"),
                     children: [
                       /* @__PURE__ */ jsx48("p", { className: "text-xl font-semibold tracking-tight", children: "Message sent" }),
-                      /* @__PURE__ */ jsxs26("p", { className: "text-base text-balance text-muted-foreground", children: [
+                      /* @__PURE__ */ jsxs27("p", { className: "text-base text-balance text-muted-foreground", children: [
                         "Replies go to ",
                         sent.email,
                         "."
@@ -8848,7 +9404,7 @@ function ContactForm({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs26(
+                /* @__PURE__ */ jsxs27(
                   "div",
                   {
                     className: cn(
@@ -8882,10 +9438,10 @@ function ContactForm({
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-median-contact.ts
-import { useCallback as useCallback16, useMemo as useMemo4, useState as useState30, useSyncExternalStore as useSyncExternalStore14 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo4, useState as useState31, useSyncExternalStore as useSyncExternalStore17 } from "react";
 
 // ../../apps/web/src/components/support-widget/sdk/contact.ts
-import { ConvexHttpClient as ConvexHttpClient2 } from "convex/browser";
+import { ConvexHttpClient as ConvexHttpClient3 } from "convex/browser";
 var client2 = null;
 async function deliverContact(options, message) {
   const { apiKey, sessionId, user, telemetry = true } = options;
@@ -8898,11 +9454,11 @@ async function deliverContact(options, message) {
         "The Median SDK was built without a deployment URL. Set NEXT_PUBLIC_CONVEX_URL."
       );
     }
-    client2 ??= new ConvexHttpClient2(MEDIAN_DEPLOYMENT_URL);
+    client2 ??= new ConvexHttpClient3(MEDIAN_DEPLOYMENT_URL);
     const context = telemetry ? collectContext() : void 0;
     const page = telemetry ? collectPage() : void 0;
     const { facts, claim } = splitIdentity(user ?? null);
-    await client2.mutation(api.widget.send, {
+    await client2.mutation(api.widget.sendV2, {
       apiKey,
       sessionId,
       body: composeBody(message),
@@ -8913,8 +9469,10 @@ async function deliverContact(options, message) {
       ...context ? { context } : {},
       ...page ? { page } : {},
       ...options.diagnostics ? { diagnostics: options.diagnostics } : {},
-      ...custom ? { customData: custom } : {}
-    });
+      ...custom ? { customData: custom } : {},
+      // Replies go to the address they typed: nothing on the page shows one.
+      fromContactForm: true
+    }).then(unwrapMutationResult);
   } catch (caught) {
     if (custom) restoreCustomData(custom);
     console.error("Median: sending a contact message failed", caught);
@@ -8933,24 +9491,29 @@ async function sendMedianContact(options, message) {
 }
 
 // ../../apps/web/src/components/support-widget/sdk/use-median-contact.ts
-function useMedianContact(options) {
+function useMedianContact(options, caller = "useMedianContact()") {
   const { apiKey, identity, user, telemetry, diagnostics, appState } = options;
   const resolved = useMedianIdentity(identity);
-  useMissingCredentials("useMedianContact", apiKey, identity);
+  useMissingCredentials(caller, apiKey, identity, "it cannot send");
   const key = apiKey ?? resolved.apiKey;
-  useApiKeyShapeWarning("useMedianContact", key);
-  const person = user ?? resolved.user;
+  const showBranding = useMedianBranding(key);
+  useApiKeyShapeWarning(caller, key);
+  useCustomDataSender();
+  const person = useSignedInUser(user ?? resolved.user);
   useRememberInstall(key, person);
-  const sessionId = useSyncExternalStore14(
+  const sessionId = useSyncExternalStore17(
     subscribeSession,
-    useCallback16(() => key === void 0 ? null : getOrCreateSessionId(key), [key]),
+    useCallback17(
+      () => key === void 0 ? null : getOrCreateSessionId(key),
+      [key]
+    ),
     () => null
   );
   const takeDiagnostics = useDiagnostics(diagnostics, appState);
   const [knownEmail] = useVisitorEmail(key ?? "");
-  const [isSending, setSending] = useState30(false);
-  const [error, setError] = useState30(null);
-  const send = useCallback16(
+  const [isSending, setSending] = useState31(false);
+  const [error, setError] = useState31(null);
+  const send = useCallback17(
     async (message) => {
       setError(null);
       if (key === void 0 || sessionId === null) {
@@ -8987,6 +9550,7 @@ function useMedianContact(options) {
   }, [person, knownEmail]);
   return {
     send,
+    showBranding,
     isSending,
     error,
     isReady: key !== void 0 && sessionId !== null,
@@ -8997,14 +9561,16 @@ function useMedianContact(options) {
 // ../../apps/web/src/components/support-widget/sdk/median-contact-form.tsx
 import { jsx as jsx49 } from "react/jsx-runtime";
 function MedianContactForm(props) {
-  return /* @__PURE__ */ jsx49(MedianErrorBoundary, { children: /* @__PURE__ */ jsx49(ConnectedContactForm, { ...props }) });
+  return /* @__PURE__ */ jsx49(MedianErrorBoundary, { component: "MedianContactForm", children: /* @__PURE__ */ jsx49(ConnectedContactForm, { ...props }) });
 }
 function useFieldComplaints(fields) {
   const key = fields === void 0 ? null : JSON.stringify(fields);
-  useEffect27(() => {
+  useEffect31(() => {
     if (key === null) return;
     for (const complaint of fieldComplaints(JSON.parse(key))) {
-      console.error(`Median: in the fields passed to <MedianContactForm>, ${complaint}`);
+      console.error(
+        `Median: in the fields passed to <MedianContactForm>, ${complaint}`
+      );
     }
   }, [key]);
 }
@@ -9015,7 +9581,7 @@ function ConnectedContactForm({
   onSent,
   ...options
 }) {
-  const contact = useMedianContact(options);
+  const contact = useMedianContact(options, "<MedianContactForm>");
   useFieldComplaints(fields);
   const knownEmail = contact.user?.email || void 0;
   const knownName = contact.user?.name || void 0;
@@ -9029,10 +9595,18 @@ function ConnectedContactForm({
   return /* @__PURE__ */ jsx49(
     ContactForm,
     {
+      showBadge: contact.showBranding,
       fields,
       onSubmit: async (message) => {
         await contact.send(message);
-        onSent?.();
+        try {
+          onSent?.();
+        } catch (caught) {
+          console.error(
+            "Median: onSent threw after the message was sent.",
+            caught
+          );
+        }
       },
       notice: contact.error,
       initialValues,