@runtypelabs/persona 3.6.0 → 3.8.0

package/dist/theme-editor.js

@@ -299,7 +299,8 @@ var DEFAULT_COMPONENTS = {
       borderRadius: "palette.radius.lg",
       border: "palette.colors.gray.200",
       shadow: "palette.shadows.sm"
-    }
+    },
+    border: "semantic.colors.border"
   },
   toolBubble: {
     shadow: "palette.shadows.sm"
@@ -321,8 +322,30 @@ var DEFAULT_COMPONENTS = {
     },
     prose: {
       fontFamily: "inherit"
+    },
+    codeBlock: {
+      background: "semantic.colors.container",
+      borderColor: "semantic.colors.border",
+      textColor: "inherit"
+    },
+    table: {
+      headerBackground: "semantic.colors.container",
+      borderColor: "semantic.colors.border"
+    },
+    hr: {
+      color: "semantic.colors.divider"
+    },
+    blockquote: {
+      borderColor: "palette.colors.gray.900",
+      background: "transparent",
+      textColor: "palette.colors.gray.500"
     }
   },
+  collapsibleWidget: {
+    container: "palette.colors.gray.50",
+    surface: "semantic.colors.surface",
+    border: "semantic.colors.border"
+  },
   voice: {
     recording: {
       indicator: "palette.colors.error.500",
@@ -362,6 +385,18 @@ var DEFAULT_COMPONENTS = {
       border: "palette.colors.gray.200"
     }
   },
+  scrollToBottom: {
+    background: "components.button.primary.background",
+    foreground: "components.button.primary.foreground",
+    border: "semantic.colors.primary",
+    size: "40px",
+    borderRadius: "palette.radius.full",
+    shadow: "palette.shadows.sm",
+    padding: "0.5rem 0.875rem",
+    gap: "0.5rem",
+    fontSize: "0.875rem",
+    iconSize: "14px"
+  },
   artifact: {
     pane: {
       background: "semantic.colors.container",
@@ -543,7 +578,7 @@ function createTheme(userConfig, options = {}) {
   return theme;
 }
 function themeToCssVariables(theme) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb;
   const resolved = resolveTokens(theme);
   const cssVars = {};
   for (const [path, token] of Object.entries(resolved)) {
@@ -583,44 +618,55 @@ function themeToCssVariables(theme) {
   cssVars["--persona-radius-md"] = (_B = cssVars["--persona-palette-radius-md"]) != null ? _B : "0.375rem";
   cssVars["--persona-radius-lg"] = (_C = cssVars["--persona-palette-radius-lg"]) != null ? _C : "0.5rem";
   cssVars["--persona-radius-xl"] = (_D = cssVars["--persona-palette-radius-xl"]) != null ? _D : "0.75rem";
-  cssVars["--persona-launcher-radius"] = (_F = (_E = cssVars["--persona-components-launcher-borderRadius"]) != null ? _E : cssVars["--persona-palette-radius-full"]) != null ? _F : "9999px";
-  cssVars["--persona-launcher-bg"] = (_G = cssVars["--persona-components-launcher-background"]) != null ? _G : cssVars["--persona-primary"];
-  cssVars["--persona-launcher-fg"] = (_H = cssVars["--persona-components-launcher-foreground"]) != null ? _H : cssVars["--persona-text-inverse"];
-  cssVars["--persona-launcher-border"] = (_I = cssVars["--persona-components-launcher-border"]) != null ? _I : cssVars["--persona-border"];
-  cssVars["--persona-button-primary-bg"] = (_J = cssVars["--persona-components-button-primary-background"]) != null ? _J : cssVars["--persona-primary"];
-  cssVars["--persona-button-primary-fg"] = (_K = cssVars["--persona-components-button-primary-foreground"]) != null ? _K : cssVars["--persona-text-inverse"];
-  cssVars["--persona-button-radius"] = (_M = (_L = cssVars["--persona-components-button-primary-borderRadius"]) != null ? _L : cssVars["--persona-palette-radius-full"]) != null ? _M : "9999px";
-  cssVars["--persona-panel-radius"] = (_O = (_N = cssVars["--persona-components-panel-borderRadius"]) != null ? _N : cssVars["--persona-radius-xl"]) != null ? _O : "0.75rem";
-  cssVars["--persona-panel-border"] = (_P = cssVars["--persona-components-panel-border"]) != null ? _P : `1px solid ${cssVars["--persona-border"]}`;
-  cssVars["--persona-panel-shadow"] = (_R = (_Q = cssVars["--persona-components-panel-shadow"]) != null ? _Q : cssVars["--persona-palette-shadows-xl"]) != null ? _R : "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
-  cssVars["--persona-input-radius"] = (_T = (_S = cssVars["--persona-components-input-borderRadius"]) != null ? _S : cssVars["--persona-radius-lg"]) != null ? _T : "0.5rem";
-  cssVars["--persona-message-user-radius"] = (_V = (_U = cssVars["--persona-components-message-user-borderRadius"]) != null ? _U : cssVars["--persona-radius-lg"]) != null ? _V : "0.5rem";
-  cssVars["--persona-message-assistant-radius"] = (_X = (_W = cssVars["--persona-components-message-assistant-borderRadius"]) != null ? _W : cssVars["--persona-radius-lg"]) != null ? _X : "0.5rem";
-  cssVars["--persona-header-bg"] = (_Y = cssVars["--persona-components-header-background"]) != null ? _Y : cssVars["--persona-surface"];
-  cssVars["--persona-header-border"] = (_Z = cssVars["--persona-components-header-border"]) != null ? _Z : cssVars["--persona-divider"];
-  cssVars["--persona-header-icon-bg"] = (__ = cssVars["--persona-components-header-iconBackground"]) != null ? __ : cssVars["--persona-primary"];
-  cssVars["--persona-header-icon-fg"] = (_$ = cssVars["--persona-components-header-iconForeground"]) != null ? _$ : cssVars["--persona-text-inverse"];
-  cssVars["--persona-header-title-fg"] = (_aa = cssVars["--persona-components-header-titleForeground"]) != null ? _aa : cssVars["--persona-primary"];
-  cssVars["--persona-header-subtitle-fg"] = (_ba = cssVars["--persona-components-header-subtitleForeground"]) != null ? _ba : cssVars["--persona-text-muted"];
-  cssVars["--persona-header-action-icon-fg"] = (_ca = cssVars["--persona-components-header-actionIconForeground"]) != null ? _ca : cssVars["--persona-muted"];
-  const headerTokens = (_da = theme.components) == null ? void 0 : _da.header;
+  cssVars["--persona-radius-full"] = (_E = cssVars["--persona-palette-radius-full"]) != null ? _E : "9999px";
+  cssVars["--persona-launcher-radius"] = (_G = (_F = cssVars["--persona-components-launcher-borderRadius"]) != null ? _F : cssVars["--persona-palette-radius-full"]) != null ? _G : "9999px";
+  cssVars["--persona-launcher-bg"] = (_H = cssVars["--persona-components-launcher-background"]) != null ? _H : cssVars["--persona-primary"];
+  cssVars["--persona-launcher-fg"] = (_I = cssVars["--persona-components-launcher-foreground"]) != null ? _I : cssVars["--persona-text-inverse"];
+  cssVars["--persona-launcher-border"] = (_J = cssVars["--persona-components-launcher-border"]) != null ? _J : cssVars["--persona-border"];
+  cssVars["--persona-button-primary-bg"] = (_K = cssVars["--persona-components-button-primary-background"]) != null ? _K : cssVars["--persona-primary"];
+  cssVars["--persona-button-primary-fg"] = (_L = cssVars["--persona-components-button-primary-foreground"]) != null ? _L : cssVars["--persona-text-inverse"];
+  cssVars["--persona-button-radius"] = (_N = (_M = cssVars["--persona-components-button-primary-borderRadius"]) != null ? _M : cssVars["--persona-palette-radius-full"]) != null ? _N : "9999px";
+  cssVars["--persona-panel-radius"] = (_P = (_O = cssVars["--persona-components-panel-borderRadius"]) != null ? _O : cssVars["--persona-radius-xl"]) != null ? _P : "0.75rem";
+  cssVars["--persona-panel-border"] = (_Q = cssVars["--persona-components-panel-border"]) != null ? _Q : `1px solid ${cssVars["--persona-border"]}`;
+  cssVars["--persona-panel-shadow"] = (_S = (_R = cssVars["--persona-components-panel-shadow"]) != null ? _R : cssVars["--persona-palette-shadows-xl"]) != null ? _S : "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+  cssVars["--persona-input-radius"] = (_U = (_T = cssVars["--persona-components-input-borderRadius"]) != null ? _T : cssVars["--persona-radius-lg"]) != null ? _U : "0.5rem";
+  cssVars["--persona-message-user-radius"] = (_W = (_V = cssVars["--persona-components-message-user-borderRadius"]) != null ? _V : cssVars["--persona-radius-lg"]) != null ? _W : "0.5rem";
+  cssVars["--persona-message-assistant-radius"] = (_Y = (_X = cssVars["--persona-components-message-assistant-borderRadius"]) != null ? _X : cssVars["--persona-radius-lg"]) != null ? _Y : "0.5rem";
+  cssVars["--persona-header-bg"] = (_Z = cssVars["--persona-components-header-background"]) != null ? _Z : cssVars["--persona-surface"];
+  cssVars["--persona-header-border"] = (__ = cssVars["--persona-components-header-border"]) != null ? __ : cssVars["--persona-divider"];
+  cssVars["--persona-header-icon-bg"] = (_$ = cssVars["--persona-components-header-iconBackground"]) != null ? _$ : cssVars["--persona-primary"];
+  cssVars["--persona-header-icon-fg"] = (_aa = cssVars["--persona-components-header-iconForeground"]) != null ? _aa : cssVars["--persona-text-inverse"];
+  cssVars["--persona-header-title-fg"] = (_ba = cssVars["--persona-components-header-titleForeground"]) != null ? _ba : cssVars["--persona-primary"];
+  cssVars["--persona-header-subtitle-fg"] = (_ca = cssVars["--persona-components-header-subtitleForeground"]) != null ? _ca : cssVars["--persona-text-muted"];
+  cssVars["--persona-header-action-icon-fg"] = (_da = cssVars["--persona-components-header-actionIconForeground"]) != null ? _da : cssVars["--persona-muted"];
+  const headerTokens = (_ea = theme.components) == null ? void 0 : _ea.header;
   if (headerTokens == null ? void 0 : headerTokens.shadow) cssVars["--persona-header-shadow"] = headerTokens.shadow;
   if (headerTokens == null ? void 0 : headerTokens.borderBottom) cssVars["--persona-header-border-bottom"] = headerTokens.borderBottom;
-  cssVars["--persona-input-background"] = (_ea = cssVars["--persona-components-input-background"]) != null ? _ea : cssVars["--persona-surface"];
-  cssVars["--persona-input-placeholder"] = (_fa = cssVars["--persona-components-input-placeholder"]) != null ? _fa : cssVars["--persona-text-muted"];
-  cssVars["--persona-message-user-bg"] = (_ga = cssVars["--persona-components-message-user-background"]) != null ? _ga : cssVars["--persona-accent"];
-  cssVars["--persona-message-user-text"] = (_ha = cssVars["--persona-components-message-user-text"]) != null ? _ha : cssVars["--persona-text-inverse"];
-  cssVars["--persona-message-user-shadow"] = (_ia = cssVars["--persona-components-message-user-shadow"]) != null ? _ia : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-message-assistant-bg"] = (_ja = cssVars["--persona-components-message-assistant-background"]) != null ? _ja : cssVars["--persona-surface"];
-  cssVars["--persona-message-assistant-text"] = (_ka = cssVars["--persona-components-message-assistant-text"]) != null ? _ka : cssVars["--persona-text"];
-  cssVars["--persona-message-assistant-border"] = (_la = cssVars["--persona-components-message-assistant-border"]) != null ? _la : cssVars["--persona-border"];
-  cssVars["--persona-message-assistant-shadow"] = (_ma = cssVars["--persona-components-message-assistant-shadow"]) != null ? _ma : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-  cssVars["--persona-tool-bubble-shadow"] = (_na = cssVars["--persona-components-toolBubble-shadow"]) != null ? _na : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-reasoning-bubble-shadow"] = (_oa = cssVars["--persona-components-reasoningBubble-shadow"]) != null ? _oa : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-composer-shadow"] = (_pa = cssVars["--persona-components-composer-shadow"]) != null ? _pa : "none";
-  cssVars["--persona-md-inline-code-bg"] = (_qa = cssVars["--persona-components-markdown-inlineCode-background"]) != null ? _qa : cssVars["--persona-container"];
-  cssVars["--persona-md-inline-code-color"] = (_ra = cssVars["--persona-components-markdown-inlineCode-foreground"]) != null ? _ra : cssVars["--persona-text"];
-  cssVars["--persona-md-link-color"] = (_ta = (_sa = cssVars["--persona-components-markdown-link-foreground"]) != null ? _sa : cssVars["--persona-accent"]) != null ? _ta : "#0f0f0f";
+  cssVars["--persona-input-background"] = (_fa = cssVars["--persona-components-input-background"]) != null ? _fa : cssVars["--persona-surface"];
+  cssVars["--persona-input-placeholder"] = (_ga = cssVars["--persona-components-input-placeholder"]) != null ? _ga : cssVars["--persona-text-muted"];
+  cssVars["--persona-message-user-bg"] = (_ha = cssVars["--persona-components-message-user-background"]) != null ? _ha : cssVars["--persona-accent"];
+  cssVars["--persona-message-user-text"] = (_ia = cssVars["--persona-components-message-user-text"]) != null ? _ia : cssVars["--persona-text-inverse"];
+  cssVars["--persona-message-user-shadow"] = (_ja = cssVars["--persona-components-message-user-shadow"]) != null ? _ja : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-message-assistant-bg"] = (_ka = cssVars["--persona-components-message-assistant-background"]) != null ? _ka : cssVars["--persona-surface"];
+  cssVars["--persona-message-assistant-text"] = (_la = cssVars["--persona-components-message-assistant-text"]) != null ? _la : cssVars["--persona-text"];
+  cssVars["--persona-message-assistant-border"] = (_ma = cssVars["--persona-components-message-assistant-border"]) != null ? _ma : cssVars["--persona-border"];
+  cssVars["--persona-message-assistant-shadow"] = (_na = cssVars["--persona-components-message-assistant-shadow"]) != null ? _na : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+  cssVars["--persona-scroll-to-bottom-bg"] = (_pa = (_oa = cssVars["--persona-components-scrollToBottom-background"]) != null ? _oa : cssVars["--persona-button-primary-bg"]) != null ? _pa : cssVars["--persona-accent"];
+  cssVars["--persona-scroll-to-bottom-fg"] = (_ra = (_qa = cssVars["--persona-components-scrollToBottom-foreground"]) != null ? _qa : cssVars["--persona-button-primary-fg"]) != null ? _ra : cssVars["--persona-text-inverse"];
+  cssVars["--persona-scroll-to-bottom-border"] = (_sa = cssVars["--persona-components-scrollToBottom-border"]) != null ? _sa : cssVars["--persona-primary"];
+  cssVars["--persona-scroll-to-bottom-size"] = (_ta = cssVars["--persona-components-scrollToBottom-size"]) != null ? _ta : "40px";
+  cssVars["--persona-scroll-to-bottom-radius"] = (_wa = (_va = (_ua = cssVars["--persona-components-scrollToBottom-borderRadius"]) != null ? _ua : cssVars["--persona-button-radius"]) != null ? _va : cssVars["--persona-radius-full"]) != null ? _wa : "9999px";
+  cssVars["--persona-scroll-to-bottom-shadow"] = (_ya = (_xa = cssVars["--persona-components-scrollToBottom-shadow"]) != null ? _xa : cssVars["--persona-palette-shadows-sm"]) != null ? _ya : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+  cssVars["--persona-scroll-to-bottom-padding"] = (_za = cssVars["--persona-components-scrollToBottom-padding"]) != null ? _za : "0.5rem 0.875rem";
+  cssVars["--persona-scroll-to-bottom-gap"] = (_Aa = cssVars["--persona-components-scrollToBottom-gap"]) != null ? _Aa : "0.5rem";
+  cssVars["--persona-scroll-to-bottom-font-size"] = (_Ca = (_Ba = cssVars["--persona-components-scrollToBottom-fontSize"]) != null ? _Ba : cssVars["--persona-palette-typography-fontSize-sm"]) != null ? _Ca : "0.875rem";
+  cssVars["--persona-scroll-to-bottom-icon-size"] = (_Da = cssVars["--persona-components-scrollToBottom-iconSize"]) != null ? _Da : "14px";
+  cssVars["--persona-tool-bubble-shadow"] = (_Ea = cssVars["--persona-components-toolBubble-shadow"]) != null ? _Ea : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-reasoning-bubble-shadow"] = (_Fa = cssVars["--persona-components-reasoningBubble-shadow"]) != null ? _Fa : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-composer-shadow"] = (_Ga = cssVars["--persona-components-composer-shadow"]) != null ? _Ga : "none";
+  cssVars["--persona-md-inline-code-bg"] = (_Ha = cssVars["--persona-components-markdown-inlineCode-background"]) != null ? _Ha : cssVars["--persona-container"];
+  cssVars["--persona-md-inline-code-color"] = (_Ia = cssVars["--persona-components-markdown-inlineCode-foreground"]) != null ? _Ia : cssVars["--persona-text"];
+  cssVars["--persona-md-link-color"] = (_Ka = (_Ja = cssVars["--persona-components-markdown-link-foreground"]) != null ? _Ja : cssVars["--persona-accent"]) != null ? _Ka : "#0f0f0f";
   const mdH1Size = cssVars["--persona-components-markdown-heading-h1-fontSize"];
   if (mdH1Size) cssVars["--persona-md-h1-size"] = mdH1Size;
   const mdH1Weight = cssVars["--persona-components-markdown-heading-h1-fontWeight"];
@@ -633,6 +679,19 @@ function themeToCssVariables(theme) {
   if (mdProseFont && mdProseFont !== "inherit") {
     cssVars["--persona-md-prose-font-family"] = mdProseFont;
   }
+  cssVars["--persona-md-code-block-bg"] = (_La = cssVars["--persona-components-markdown-codeBlock-background"]) != null ? _La : cssVars["--persona-container"];
+  cssVars["--persona-md-code-block-border-color"] = (_Ma = cssVars["--persona-components-markdown-codeBlock-borderColor"]) != null ? _Ma : cssVars["--persona-border"];
+  cssVars["--persona-md-code-block-text-color"] = (_Na = cssVars["--persona-components-markdown-codeBlock-textColor"]) != null ? _Na : "inherit";
+  cssVars["--persona-md-table-header-bg"] = (_Oa = cssVars["--persona-components-markdown-table-headerBackground"]) != null ? _Oa : cssVars["--persona-container"];
+  cssVars["--persona-md-table-border-color"] = (_Pa = cssVars["--persona-components-markdown-table-borderColor"]) != null ? _Pa : cssVars["--persona-border"];
+  cssVars["--persona-md-hr-color"] = (_Qa = cssVars["--persona-components-markdown-hr-color"]) != null ? _Qa : cssVars["--persona-divider"];
+  cssVars["--persona-md-blockquote-border-color"] = (_Ra = cssVars["--persona-components-markdown-blockquote-borderColor"]) != null ? _Ra : cssVars["--persona-palette-colors-gray-900"];
+  cssVars["--persona-md-blockquote-bg"] = (_Sa = cssVars["--persona-components-markdown-blockquote-background"]) != null ? _Sa : "transparent";
+  cssVars["--persona-md-blockquote-text-color"] = (_Ta = cssVars["--persona-components-markdown-blockquote-textColor"]) != null ? _Ta : cssVars["--persona-palette-colors-gray-500"];
+  cssVars["--cw-container"] = (_Ua = cssVars["--persona-components-collapsibleWidget-container"]) != null ? _Ua : cssVars["--persona-surface"];
+  cssVars["--cw-surface"] = (_Va = cssVars["--persona-components-collapsibleWidget-surface"]) != null ? _Va : cssVars["--persona-surface"];
+  cssVars["--cw-border"] = (_Wa = cssVars["--persona-components-collapsibleWidget-border"]) != null ? _Wa : cssVars["--persona-border"];
+  cssVars["--persona-message-border"] = (_Xa = cssVars["--persona-components-message-border"]) != null ? _Xa : cssVars["--persona-border"];
   const components = theme.components;
   const iconBtn = components == null ? void 0 : components.iconButton;
   if (iconBtn) {
@@ -679,23 +738,23 @@ function themeToCssVariables(theme) {
     if (t.copyPadding) cssVars["--persona-artifact-toolbar-copy-padding"] = t.copyPadding;
     if (t.copyMenuBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-bg"] = t.copyMenuBackground;
-      cssVars["--persona-dropdown-bg"] = (_ua = cssVars["--persona-dropdown-bg"]) != null ? _ua : t.copyMenuBackground;
+      cssVars["--persona-dropdown-bg"] = (_Ya = cssVars["--persona-dropdown-bg"]) != null ? _Ya : t.copyMenuBackground;
     }
     if (t.copyMenuBorder) {
       cssVars["--persona-artifact-toolbar-copy-menu-border"] = t.copyMenuBorder;
-      cssVars["--persona-dropdown-border"] = (_va = cssVars["--persona-dropdown-border"]) != null ? _va : t.copyMenuBorder;
+      cssVars["--persona-dropdown-border"] = (_Za = cssVars["--persona-dropdown-border"]) != null ? _Za : t.copyMenuBorder;
     }
     if (t.copyMenuShadow) {
       cssVars["--persona-artifact-toolbar-copy-menu-shadow"] = t.copyMenuShadow;
-      cssVars["--persona-dropdown-shadow"] = (_wa = cssVars["--persona-dropdown-shadow"]) != null ? _wa : t.copyMenuShadow;
+      cssVars["--persona-dropdown-shadow"] = (__a = cssVars["--persona-dropdown-shadow"]) != null ? __a : t.copyMenuShadow;
     }
     if (t.copyMenuBorderRadius) {
       cssVars["--persona-artifact-toolbar-copy-menu-radius"] = t.copyMenuBorderRadius;
-      cssVars["--persona-dropdown-radius"] = (_xa = cssVars["--persona-dropdown-radius"]) != null ? _xa : t.copyMenuBorderRadius;
+      cssVars["--persona-dropdown-radius"] = (_$a = cssVars["--persona-dropdown-radius"]) != null ? _$a : t.copyMenuBorderRadius;
     }
     if (t.copyMenuItemHoverBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-item-hover-bg"] = t.copyMenuItemHoverBackground;
-      cssVars["--persona-dropdown-item-hover-bg"] = (_ya = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _ya : t.copyMenuItemHoverBackground;
+      cssVars["--persona-dropdown-item-hover-bg"] = (_ab = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _ab : t.copyMenuItemHoverBackground;
     }
     if (t.iconBackground) cssVars["--persona-artifact-toolbar-icon-bg"] = t.iconBackground;
     if (t.toolbarBorder) cssVars["--persona-artifact-toolbar-border"] = t.toolbarBorder;
@@ -715,7 +774,7 @@ function themeToCssVariables(theme) {
   if (artifact == null ? void 0 : artifact.pane) {
     const t = artifact.pane;
     if (t.toolbarBackground) {
-      const toolbarBg = (_za = resolveTokenValue(theme, t.toolbarBackground)) != null ? _za : t.toolbarBackground;
+      const toolbarBg = (_bb = resolveTokenValue(theme, t.toolbarBackground)) != null ? _bb : t.toolbarBackground;
       cssVars["--persona-artifact-toolbar-bg"] = toolbarBg;
     }
   }
@@ -1032,7 +1091,12 @@ var DEFAULT_WIDGET_CONFIG = {
   },
   features: {
     showReasoning: true,
-    showToolCalls: true
+    showToolCalls: true,
+    scrollToBottom: {
+      enabled: true,
+      iconName: "arrow-down",
+      label: ""
+    }
   },
   suggestionChips: [
     "What can you help me with?",
@@ -1134,9 +1198,11 @@ function mergeWithDefaults(config) {
       ...config.voiceRecognition
     },
     features: (() => {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d2;
       const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
       const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
+      const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
+      const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
       const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
         ...da,
         ...ca,
@@ -1145,9 +1211,14 @@ function mergeWithDefaults(config) {
           ...ca == null ? void 0 : ca.layout
         }
       };
+      const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
+        ...dsb,
+        ...csb
+      };
       return {
         ...DEFAULT_WIDGET_CONFIG.features,
         ...config.features,
+        ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
         ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
       };
     })(),
@@ -1676,6 +1747,16 @@ var ROLE_PRIMARY_ACTIONS = {
     { path: "semantic.colors.interactive.hover", kind: "accent" }
   ]
 };
+var ROLE_SCROLL_TO_BOTTOM = {
+  roleId: "role-scroll-to-bottom",
+  helper: "Scroll-to-bottom affordances in transcript and event stream",
+  intensities: ROLE_INTENSITIES,
+  targets: [
+    { path: "components.scrollToBottom.background", kind: "background" },
+    { path: "components.scrollToBottom.foreground", kind: "foreground" },
+    { path: "components.scrollToBottom.border", kind: "border" }
+  ]
+};
 var ROLE_INPUT = {
   roleId: "role-input",
   helper: "Message input field",
@@ -1714,6 +1795,7 @@ var ALL_ROLES = [
   ROLE_USER_MESSAGES,
   ROLE_ASSISTANT_MESSAGES,
   ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM,
   ROLE_INPUT,
   ROLE_LINKS_FOCUS,
   ROLE_BORDERS
@@ -2186,6 +2268,35 @@ var buttonColorsSectionDef = {
     { id: "btn-ghost-fg", label: "Ghost Foreground", type: "token-ref", path: "theme.components.button.ghost.foreground", defaultValue: "semantic.colors.text", tokenRef: { tokenType: "color" } }
   ]
 };
+var scrollToBottomSectionDef = {
+  id: "scroll-to-bottom-style",
+  title: "Scroll To Bottom",
+  description: "Style the floating jump-to-latest affordance.",
+  collapsed: true,
+  fields: [
+    { id: "scroll-bottom-bg", label: "Background", type: "token-ref", path: "theme.components.scrollToBottom.background", defaultValue: "components.button.primary.background", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-fg", label: "Foreground", type: "token-ref", path: "theme.components.scrollToBottom.foreground", defaultValue: "components.button.primary.foreground", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-border", label: "Border", type: "token-ref", path: "theme.components.scrollToBottom.border", defaultValue: "semantic.colors.primary", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-size", label: "Size", type: "text", path: "theme.components.scrollToBottom.size", defaultValue: "40px" },
+    { id: "scroll-bottom-radius", label: "Border Radius", type: "select", path: "theme.components.scrollToBottom.borderRadius", defaultValue: "palette.radius.full", options: [
+      { value: "palette.radius.md", label: "Medium" },
+      { value: "palette.radius.lg", label: "Large" },
+      { value: "palette.radius.xl", label: "Extra Large" },
+      { value: "palette.radius.full", label: "Full" }
+    ] },
+    { id: "scroll-bottom-shadow", label: "Shadow", type: "select", path: "theme.components.scrollToBottom.shadow", defaultValue: "palette.shadows.sm", options: [
+      { value: "palette.shadows.none", label: "None" },
+      { value: "palette.shadows.sm", label: "Small" },
+      { value: "palette.shadows.md", label: "Medium" },
+      { value: "palette.shadows.lg", label: "Large" },
+      { value: "palette.shadows.xl", label: "Extra Large" }
+    ] },
+    { id: "scroll-bottom-padding", label: "Padding", type: "text", path: "theme.components.scrollToBottom.padding", defaultValue: "0.5rem 0.875rem" },
+    { id: "scroll-bottom-gap", label: "Gap", type: "text", path: "theme.components.scrollToBottom.gap", defaultValue: "0.5rem" },
+    { id: "scroll-bottom-font-size", label: "Font Size", type: "text", path: "theme.components.scrollToBottom.fontSize", defaultValue: "0.875rem" },
+    { id: "scroll-bottom-icon-size", label: "Icon Size", type: "text", path: "theme.components.scrollToBottom.iconSize", defaultValue: "14px" }
+  ]
+};
 var COMPONENT_SHAPE_SECTIONS = [
   panelLayoutSectionDef,
   launcherLayoutSectionDef,
@@ -2197,7 +2308,8 @@ var COMPONENT_COLOR_SECTIONS = [
   headerColorsSectionDef,
   messageColorsSectionDef,
   inputColorsSectionDef,
-  buttonColorsSectionDef
+  buttonColorsSectionDef,
+  scrollToBottomSectionDef
 ];
 var COMPONENTS_SECTIONS = [
   ...COMPONENT_SHAPE_SECTIONS,
@@ -2424,7 +2536,10 @@ var featuresSectionDef = {
   collapsed: true,
   fields: [
     { id: "feat-voice", label: "Voice Recognition", description: "Enable voice input", type: "toggle", path: "voiceRecognition.enabled", defaultValue: false },
-    { id: "feat-auto-focus", label: "Auto Focus Input", description: "Focus input after panel opens", type: "toggle", path: "autoFocusInput", defaultValue: false }
+    { id: "feat-auto-focus", label: "Auto Focus Input", description: "Focus input after panel opens", type: "toggle", path: "autoFocusInput", defaultValue: false },
+    { id: "feat-scroll-bottom-enabled", label: "Scroll To Bottom", description: "Show a jump-to-latest affordance when the user scrolls away from new content", type: "toggle", path: "features.scrollToBottom.enabled", defaultValue: true },
+    { id: "feat-scroll-bottom-icon", label: "Scroll To Bottom Icon", type: "text", path: "features.scrollToBottom.iconName", defaultValue: "arrow-down" },
+    { id: "feat-scroll-bottom-label", label: "Scroll To Bottom Label", description: "Leave empty for icon-only mode", type: "text", path: "features.scrollToBottom.label", defaultValue: "" }
   ]
 };
 var attachmentsSectionDef = {
@@ -2590,6 +2705,13 @@ var INTERFACE_ROLES_SECTION = {
       path: "theme.components.button.primary.background",
       roleAssignment: ROLE_PRIMARY_ACTIONS
     },
+    {
+      id: "role-scroll-to-bottom",
+      label: "Scroll To Bottom",
+      type: "role-assignment",
+      path: "theme.components.scrollToBottom.background",
+      roleAssignment: ROLE_SCROLL_TO_BOTTOM
+    },
     {
       id: "role-input",
       label: "Input Field",
@@ -7535,6 +7657,72 @@ function pruneCache(cache, activeMessageIds) {
   }
 }
 
+// src/utils/auto-follow.ts
+function createFollowStateController(initiallyFollowing = true) {
+  let following = initiallyFollowing;
+  return {
+    isFollowing: () => following,
+    pause: () => {
+      if (!following) return false;
+      following = false;
+      return true;
+    },
+    resume: () => {
+      if (following) return false;
+      following = true;
+      return true;
+    }
+  };
+}
+function getScrollBottomOffset(element) {
+  return Math.max(0, element.scrollHeight - element.clientHeight);
+}
+function isElementNearBottom(element, threshold) {
+  return getScrollBottomOffset(element) - element.scrollTop <= threshold;
+}
+function resolveFollowStateFromScroll(input) {
+  const {
+    following,
+    currentScrollTop,
+    lastScrollTop,
+    nearBottom,
+    userScrollThreshold,
+    isAutoScrolling = false,
+    pauseOnUpwardScroll = false,
+    pauseWhenAwayFromBottom = true,
+    resumeRequiresDownwardScroll = false
+  } = input;
+  const delta = currentScrollTop - lastScrollTop;
+  if (isAutoScrolling || Math.abs(delta) < userScrollThreshold) {
+    return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+  }
+  if (!following && nearBottom && (!resumeRequiresDownwardScroll || delta > 0)) {
+    return { action: "resume", delta, nextLastScrollTop: currentScrollTop };
+  }
+  if (following && pauseOnUpwardScroll && delta < 0) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+  if (following && pauseWhenAwayFromBottom && !nearBottom) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+  return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+}
+function resolveFollowStateFromWheel(input) {
+  const {
+    following,
+    deltaY,
+    nearBottom = false,
+    resumeWhenNearBottom = false
+  } = input;
+  if (following && deltaY < 0) {
+    return "pause";
+  }
+  if (!following && resumeWhenNearBottom && deltaY > 0 && nearBottom) {
+    return "resume";
+  }
+  return "none";
+}
+
 // src/utils/constants.ts
 var statusCopy = {
   idle: "Online",
@@ -7542,6 +7730,70 @@ var statusCopy = {
   connected: "Streaming\u2026",
   error: "Offline"
 };
+var DEFAULT_OVERLAY_Z_INDEX = 1e5;
+var PORTALED_OVERLAY_Z_INDEX = DEFAULT_OVERLAY_Z_INDEX + 1;
+
+// src/utils/overlay-host-stacking.ts
+function syncOverlayHostStacking(host, zIndex = DEFAULT_OVERLAY_Z_INDEX) {
+  const originalPosition = host.style.position;
+  const originalZIndex = host.style.zIndex;
+  const originalIsolation = host.style.isolation;
+  const computed = getComputedStyle(host);
+  const positionWasSet = computed.position === "static" || computed.position === "";
+  if (positionWasSet) {
+    host.style.position = "relative";
+  }
+  host.style.zIndex = String(zIndex);
+  host.style.isolation = "isolate";
+  return () => {
+    if (positionWasSet) {
+      host.style.position = originalPosition;
+    }
+    host.style.zIndex = originalZIndex;
+    host.style.isolation = originalIsolation;
+  };
+}
+
+// src/utils/scroll-lock.ts
+var lockCount = 0;
+var savedState = null;
+function acquireScrollLock(doc = document) {
+  var _a;
+  lockCount++;
+  if (lockCount === 1) {
+    const body = doc.body;
+    const win = (_a = doc.defaultView) != null ? _a : window;
+    const scrollY = win.scrollY || doc.documentElement.scrollTop;
+    savedState = {
+      originalOverflow: body.style.overflow,
+      originalPosition: body.style.position,
+      originalTop: body.style.top,
+      originalWidth: body.style.width,
+      scrollY
+    };
+    body.style.overflow = "hidden";
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.width = "100%";
+  }
+  let released = false;
+  return () => {
+    var _a2;
+    if (released) return;
+    released = true;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0 && savedState) {
+      const body = doc.body;
+      const win = (_a2 = doc.defaultView) != null ? _a2 : window;
+      body.style.overflow = savedState.originalOverflow;
+      body.style.position = savedState.originalPosition;
+      body.style.top = savedState.originalTop;
+      body.style.width = savedState.originalWidth;
+      win.scrollTo(0, savedState.scrollY);
+      savedState = null;
+    }
+  };
+}
 
 // src/utils/dock.ts
 var DEFAULT_DOCK_CONFIG = {
@@ -7588,7 +7840,7 @@ var createLauncherButton = (config, onToggle) => {
   `;
   button.addEventListener("click", onToggle);
   const update = (newConfig) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const launcher = (_a = newConfig.launcher) != null ? _a : {};
     const dockedMode = isDockedMountMode(newConfig);
     const titleEl = button.querySelector("[data-role='launcher-title']");
@@ -7699,13 +7951,16 @@ var createLauncherButton = (config, onToggle) => {
       }
     }
     const positionClass = launcher.position && positionMap[launcher.position] ? positionMap[launcher.position] : positionMap["bottom-right"];
-    const floatingBase = "persona-fixed persona-flex persona-items-center persona-gap-3 persona-rounded-launcher persona-bg-persona-surface persona-py-2.5 persona-pl-3 persona-pr-3 persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer persona-z-50";
+    const floatingBase = "persona-fixed persona-flex persona-items-center persona-gap-3 persona-rounded-launcher persona-bg-persona-surface persona-py-2.5 persona-pl-3 persona-pr-3 persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer";
     const dockedBase = "persona-relative persona-mt-4 persona-mb-4 persona-mx-auto persona-flex persona-items-center persona-justify-center persona-rounded-launcher persona-bg-persona-surface persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer";
     button.className = dockedMode ? dockedBase : `${floatingBase} ${positionClass}`;
+    if (!dockedMode) {
+      button.style.zIndex = String((_k = launcher.zIndex) != null ? _k : DEFAULT_OVERLAY_Z_INDEX);
+    }
     const defaultBorder = "1px solid var(--persona-border, #e5e7eb)";
     const defaultShadow = "var(--persona-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1))";
-    button.style.border = (_k = launcher.border) != null ? _k : defaultBorder;
-    button.style.boxShadow = (_l = launcher.shadow) != null ? _l : defaultShadow;
+    button.style.border = (_l = launcher.border) != null ? _l : defaultBorder;
+    button.style.boxShadow = (_m = launcher.shadow) != null ? _m : defaultShadow;
     if (dockedMode) {
       button.style.width = "0";
       button.style.minWidth = "0";
@@ -7717,7 +7972,7 @@ var createLauncherButton = (config, onToggle) => {
     } else {
       button.style.width = "";
       button.style.minWidth = "";
-      button.style.maxWidth = (_m = launcher.collapsedMaxWidth) != null ? _m : "";
+      button.style.maxWidth = (_n = launcher.collapsedMaxWidth) != null ? _n : "";
       button.style.justifyContent = "";
       button.style.padding = "";
       button.style.overflow = "";
@@ -7887,6 +8142,7 @@ var buildHeader = (context) => {
         portaledTooltip.appendChild(arrow);
         const buttonRect = clearChatButton.getBoundingClientRect();
         portaledTooltip.style.position = "fixed";
+        portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
         portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
         portaledTooltip.style.top = `${buttonRect.top - 8}px`;
         portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -7998,6 +8254,7 @@ var buildHeader = (context) => {
       portaledTooltip.appendChild(arrow);
       const buttonRect = closeButton.getBoundingClientRect();
       portaledTooltip.style.position = "fixed";
+      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
       portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
       portaledTooltip.style.top = `${buttonRect.top - 8}px`;
       portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -8059,7 +8316,7 @@ function createDropdownMenu(options) {
   menu.setAttribute("data-persona-theme-zone", "dropdown");
   if (portal) {
     menu.style.position = "fixed";
-    menu.style.zIndex = "10000";
+    menu.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
   } else {
     menu.style.position = "absolute";
     menu.style.top = "100%";
@@ -8902,7 +9159,7 @@ var buildComposer = (context) => {
 
 // src/components/panel.ts
 var createWrapper = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const launcherEnabled = (_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.enabled) != null ? _b : true;
   const dockedMode = isDockedMountMode(config);
   if (dockedMode) {
@@ -8936,13 +9193,14 @@ var createWrapper = (config) => {
   const position = launcher.position && positionMap[launcher.position] ? positionMap[launcher.position] : positionMap["bottom-right"];
   const wrapper = createElement(
     "div",
-    `persona-widget-wrapper persona-fixed ${position} persona-z-50 persona-transition`
+    `persona-widget-wrapper persona-fixed ${position} persona-transition`
   );
+  wrapper.style.zIndex = String((_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.zIndex) != null ? _g : DEFAULT_OVERLAY_Z_INDEX);
   const panel = createElement(
     "div",
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
-  const launcherWidth = (_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.width) != null ? _g : config == null ? void 0 : config.launcherWidth;
+  const launcherWidth = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.width) != null ? _i : config == null ? void 0 : config.launcherWidth;
   const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
   panel.style.width = width;
   panel.style.maxWidth = width;
@@ -10505,7 +10763,7 @@ function renderEventRow(event, index, firstTimestamp, esConfig, expandedSet, onT
   }
 }
 function createEventStreamView(options) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const {
     buffer,
     getFullHistory,
@@ -10513,7 +10771,11 @@ function createEventStreamView(options) {
     config,
     plugins = []
   } = options;
-  const esConfig = (_b = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.eventStream) != null ? _b : {};
+  const scrollToBottomConfig = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.scrollToBottom;
+  const scrollToBottomEnabled = (scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.enabled) !== false;
+  const scrollToBottomIconName = (_b = scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.iconName) != null ? _b : "arrow-down";
+  const scrollToBottomLabel = (_c = scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.label) != null ? _c : "";
+  const esConfig = (_e = (_d = config == null ? void 0 : config.features) == null ? void 0 : _d.eventStream) != null ? _e : {};
   const viewPlugin = plugins.find((p) => p.renderEventStreamView);
   if ((viewPlugin == null ? void 0 : viewPlugin.renderEventStreamView) && config) {
     const customView = viewPlugin.renderEventStreamView({
@@ -10547,7 +10809,7 @@ function createEventStreamView(options) {
     let lastKnownTypes = [];
     let lastTypeCounts = {};
     let lastFilteredCount = 0;
-    let userScrolledUp = false;
+    const autoFollow = createFollowStateController();
     let newEventsSincePause = 0;
     let lastRenderTime = 0;
     let pendingUpdate = false;
@@ -10700,18 +10962,23 @@ function createEventStreamView(options) {
     eventsList.style.height = "100%";
     const scrollIndicator = createElement(
       "div",
-      "persona-absolute persona-bottom-3 persona-left-1/2 persona-transform persona--translate-x-1/2 persona-bg-persona-accent persona-text-white persona-text-xs persona-px-3 persona-py-1.5 persona-rounded-full persona-cursor-pointer persona-shadow-md persona-z-10 persona-flex persona-items-center persona-gap-1"
+      "persona-scroll-to-bottom-indicator persona-absolute persona-bottom-3 persona-left-1/2 persona-transform persona--translate-x-1/2 persona-cursor-pointer persona-z-10 persona-text-xs"
     );
     applyCustomClasses(scrollIndicator, customClasses == null ? void 0 : customClasses.scrollIndicator);
     scrollIndicator.style.display = "none";
+    scrollIndicator.setAttribute(
+      "data-persona-scroll-to-bottom-has-label",
+      scrollToBottomLabel ? "true" : "false"
+    );
     const arrowIcon = renderLucideIcon(
-      "arrow-down",
-      "12px",
+      scrollToBottomIconName,
+      "14px",
       "currentColor",
       2
     );
     if (arrowIcon) scrollIndicator.appendChild(arrowIcon);
     const indicatorText = createElement("span", "");
+    indicatorText.textContent = scrollToBottomLabel;
     scrollIndicator.appendChild(indicatorText);
     const noResultsMsg = createElement(
       "div",
@@ -10783,7 +11050,7 @@ function createEventStreamView(options) {
     function resetScrollState() {
       lastFilteredCount = 0;
       newEventsSincePause = 0;
-      userScrolledUp = false;
+      autoFollow.resume();
       scrollIndicator.style.display = "none";
     }
     function toggleExpand(eventId) {
@@ -10794,17 +11061,18 @@ function createEventStreamView(options) {
       }
       dirtyExpandId = eventId;
       const savedScrollTop = eventsList.scrollTop;
-      const wasUserScrolledUp = userScrolledUp;
+      const wasAutoFollowing = autoFollow.isFollowing();
       suppressScrollHandler = true;
-      userScrolledUp = true;
+      autoFollow.pause();
       updateNow();
       eventsList.scrollTop = savedScrollTop;
-      userScrolledUp = wasUserScrolledUp;
+      if (wasAutoFollowing) {
+        autoFollow.resume();
+      }
       suppressScrollHandler = false;
     }
     function isNearBottom() {
-      const threshold = 50;
-      return eventsList.scrollHeight - eventsList.scrollTop - eventsList.clientHeight <= threshold;
+      return isElementNearBottom(eventsList, 50);
     }
     function updateNow() {
       lastRenderTime = Date.now();
@@ -10834,9 +11102,9 @@ function createEventStreamView(options) {
       if (copyAllBtn) {
         copyAllBtn.title = hasActiveFilters() ? `Copy Filtered (${newCount})` : "Copy All";
       }
-      if (userScrolledUp && newCount > lastFilteredCount) {
+      if (scrollToBottomEnabled && !autoFollow.isFollowing() && newCount > lastFilteredCount) {
         newEventsSincePause += newCount - lastFilteredCount;
-        indicatorText.textContent = `${newEventsSincePause} new event${newEventsSincePause === 1 ? "" : "s"}`;
+        indicatorText.textContent = scrollToBottomLabel ? `${scrollToBottomLabel}${newEventsSincePause > 0 ? ` (${newEventsSincePause})` : ""}` : "";
         scrollIndicator.style.display = "";
       }
       lastFilteredCount = newCount;
@@ -10920,7 +11188,7 @@ function createEventStreamView(options) {
           }
         }
       }
-      if (!userScrolledUp) {
+      if (autoFollow.isFollowing()) {
         eventsList.scrollTop = eventsList.scrollHeight;
       }
     }
@@ -11029,24 +11297,50 @@ function createEventStreamView(options) {
     const handleListScroll = () => {
       if (suppressScrollHandler) return;
       const currentScrollTop = eventsList.scrollTop;
-      const scrollingDown = currentScrollTop > lastScrollTop;
-      lastScrollTop = currentScrollTop;
-      if (isNearBottom() && scrollingDown) {
-        userScrolledUp = false;
+      const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
+        following: autoFollow.isFollowing(),
+        currentScrollTop,
+        lastScrollTop,
+        nearBottom: isNearBottom(),
+        userScrollThreshold: 1,
+        resumeRequiresDownwardScroll: true
+      });
+      lastScrollTop = nextLastScrollTop;
+      if (action === "resume") {
+        autoFollow.resume();
         newEventsSincePause = 0;
         scrollIndicator.style.display = "none";
-      } else if (!isNearBottom()) {
-        userScrolledUp = true;
+      } else if (action === "pause") {
+        autoFollow.pause();
+        if (scrollToBottomEnabled) {
+          indicatorText.textContent = scrollToBottomLabel;
+          scrollIndicator.style.display = "";
+        }
       }
     };
     const handleWheel = (e) => {
-      if (e.deltaY < 0) {
-        userScrolledUp = true;
+      const action = resolveFollowStateFromWheel({
+        following: autoFollow.isFollowing(),
+        deltaY: e.deltaY,
+        nearBottom: isNearBottom(),
+        resumeWhenNearBottom: true
+      });
+      if (action === "pause") {
+        autoFollow.pause();
+        if (scrollToBottomEnabled) {
+          indicatorText.textContent = scrollToBottomLabel;
+          scrollIndicator.style.display = "";
+        }
+      } else if (action === "resume") {
+        autoFollow.resume();
+        newEventsSincePause = 0;
+        scrollIndicator.style.display = "none";
       }
     };
     const handleScrollIndicatorClick = () => {
+      if (!scrollToBottomEnabled) return;
       eventsList.scrollTop = eventsList.scrollHeight;
-      userScrolledUp = false;
+      autoFollow.resume();
       newEventsSincePause = 0;
       scrollIndicator.style.display = "none";
     };
@@ -11128,7 +11422,7 @@ function renderDefaultArtifactCard(props, _context) {
   const root = document.createElement("div");
   root.className = "persona-flex persona-w-full persona-max-w-full persona-items-center persona-gap-3 persona-rounded-xl persona-px-4 persona-py-3";
   root.style.border = "1px solid var(--persona-border, #e5e7eb)";
-  root.style.backgroundColor = "var(--persona-bg, #ffffff)";
+  root.style.backgroundColor = "var(--persona-surface, #ffffff)";
   root.style.cursor = "pointer";
   root.tabIndex = 0;
   root.setAttribute("role", "button");
@@ -12665,7 +12959,7 @@ var buildPostprocessor = (cfg, actionManager, onResubmitRequested) => {
   };
 };
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
   if (mount.id && !mount.getAttribute("data-persona-instance")) {
     mount.setAttribute("data-persona-instance", mount.id);
   }
@@ -12783,10 +13077,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let showReasoning = (_l = (_k = config.features) == null ? void 0 : _k.showReasoning) != null ? _l : true;
   let showToolCalls = (_n = (_m = config.features) == null ? void 0 : _m.showToolCalls) != null ? _n : true;
   let showEventStreamToggle = (_p = (_o = config.features) == null ? void 0 : _o.showEventStreamToggle) != null ? _p : false;
-  const persistKeyPrefix = (_r = typeof config.persistState === "object" ? (_q = config.persistState) == null ? void 0 : _q.keyPrefix : void 0) != null ? _r : "persona-";
+  let scrollToBottomFeature = (_r = (_q = config.features) == null ? void 0 : _q.scrollToBottom) != null ? _r : {};
+  const persistKeyPrefix = (_t = typeof config.persistState === "object" ? (_s = config.persistState) == null ? void 0 : _s.keyPrefix : void 0) != null ? _t : "persona-";
   const eventStreamDbName = `${persistKeyPrefix}event-stream`;
   let eventStreamStore = showEventStreamToggle ? new EventStreamStore(eventStreamDbName) : null;
-  const eventStreamMaxEvents = (_u = (_t = (_s = config.features) == null ? void 0 : _s.eventStream) == null ? void 0 : _t.maxEvents) != null ? _u : 2e3;
+  const eventStreamMaxEvents = (_w = (_v = (_u = config.features) == null ? void 0 : _u.eventStream) == null ? void 0 : _v.maxEvents) != null ? _w : 2e3;
   let eventStreamBuffer = showEventStreamToggle ? new EventStreamBuffer(eventStreamMaxEvents, eventStreamStore) : null;
   let eventStreamView = null;
   let eventStreamVisible = false;
@@ -12823,7 +13118,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       (_b2 = (_a2 = config.messageActions) == null ? void 0 : _a2.onFeedback) == null ? void 0 : _b2.call(_a2, feedback);
     }
   };
-  const statusConfig = (_v = config.statusIndicator) != null ? _v : {};
+  const statusConfig = (_x = config.statusIndicator) != null ? _x : {};
   const _getStatusText = (status) => {
     var _a2, _b2, _c2, _d2;
     if (status === "idle") return (_a2 = statusConfig.idleText) != null ? _a2 : statusCopy.idle;
@@ -12877,6 +13172,52 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let attachmentButtonWrapper = panelElements.attachmentButtonWrapper;
   let attachmentInput = panelElements.attachmentInput;
   let attachmentPreviewsContainer = panelElements.attachmentPreviewsContainer;
+  container.classList.add("persona-relative");
+  body.classList.add("persona-relative");
+  const SCROLL_TO_BOTTOM_EDGE_OFFSET = 12;
+  const getScrollToBottomLabel = () => {
+    var _a2;
+    return (_a2 = scrollToBottomFeature.label) != null ? _a2 : "";
+  };
+  const getScrollToBottomIconName = () => {
+    var _a2;
+    return (_a2 = scrollToBottomFeature.iconName) != null ? _a2 : "arrow-down";
+  };
+  const isScrollToBottomEnabled = () => scrollToBottomFeature.enabled !== false;
+  const scrollToBottomButton = createElement(
+    "button",
+    "persona-scroll-to-bottom-indicator persona-absolute persona-bottom-3 persona-left-1/2 persona-z-10 persona-flex persona-items-center persona-gap-1 persona-text-xs persona-transform persona--translate-x-1/2 persona-cursor-pointer"
+  );
+  scrollToBottomButton.type = "button";
+  scrollToBottomButton.style.display = "none";
+  scrollToBottomButton.setAttribute("data-persona-scroll-to-bottom", "true");
+  const scrollToBottomIcon = createElement("span", "persona-flex persona-items-center");
+  const scrollToBottomLabel = createElement("span", "");
+  scrollToBottomButton.append(scrollToBottomIcon, scrollToBottomLabel);
+  container.appendChild(scrollToBottomButton);
+  const updateScrollToBottomButtonOffset = () => {
+    const footerHidden = footer.style.display === "none";
+    const footerHeight = footerHidden ? 0 : footer.offsetHeight;
+    scrollToBottomButton.style.bottom = `${footerHeight + SCROLL_TO_BOTTOM_EDGE_OFFSET}px`;
+  };
+  updateScrollToBottomButtonOffset();
+  const renderScrollToBottomButton = () => {
+    const hasLabel = Boolean(getScrollToBottomLabel());
+    scrollToBottomButton.setAttribute("aria-label", getScrollToBottomLabel() || "Jump to latest");
+    scrollToBottomButton.title = getScrollToBottomLabel();
+    scrollToBottomButton.setAttribute("data-persona-scroll-to-bottom-has-label", hasLabel ? "true" : "false");
+    scrollToBottomIcon.innerHTML = "";
+    const icon = renderLucideIcon(getScrollToBottomIconName(), "14px", "currentColor", 2);
+    if (icon) {
+      scrollToBottomIcon.appendChild(icon);
+      scrollToBottomIcon.style.display = "";
+    } else {
+      scrollToBottomIcon.style.display = "none";
+    }
+    scrollToBottomLabel.textContent = getScrollToBottomLabel();
+    scrollToBottomLabel.style.display = hasLabel ? "" : "none";
+  };
+  renderScrollToBottomButton();
   let attachmentManager = null;
   let composerVoiceBridge = null;
   const headerPlugin = plugins.find((p) => p.renderHeader);
@@ -12932,6 +13273,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     };
     eventStreamLastUpdate = 0;
     eventStreamRAF = requestAnimationFrame(rafLoop);
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:opened", { timestamp: Date.now() });
   };
   const toggleEventStreamOff = () => {
@@ -12951,11 +13293,12 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cancelAnimationFrame(eventStreamRAF);
       eventStreamRAF = null;
     }
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:closed", { timestamp: Date.now() });
   };
   let eventStreamToggleBtn = null;
   if (showEventStreamToggle) {
-    const esClassNames = (_x = (_w = config.features) == null ? void 0 : _w.eventStream) == null ? void 0 : _x.classNames;
+    const esClassNames = (_z = (_y = config.features) == null ? void 0 : _y.eventStream) == null ? void 0 : _z.classNames;
     const toggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + ((esClassNames == null ? void 0 : esClassNames.toggleButton) ? " " + esClassNames.toggleButton : "");
     eventStreamToggleBtn = createElement("button", toggleBtnClasses);
     eventStreamToggleBtn.style.width = "28px";
@@ -13034,7 +13377,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       onModelChange: (modelId) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
       },
-      onVoiceToggle: ((_y = config.voiceRecognition) == null ? void 0 : _y.enabled) === true ? () => {
+      onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
         composerVoiceBridge == null ? void 0 : composerVoiceBridge();
       } : void 0
     });
@@ -13073,7 +13416,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   };
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
-  const contentMaxWidth = (_z = config.layout) == null ? void 0 : _z.contentMaxWidth;
+  const contentMaxWidth = (_B = config.layout) == null ? void 0 : _B.contentMaxWidth;
   if (contentMaxWidth && composerForm) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
@@ -13084,7 +13427,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     attachmentPreviewsContainer.style.marginLeft = "auto";
     attachmentPreviewsContainer.style.marginRight = "auto";
   }
-  if (((_A = config.attachments) == null ? void 0 : _A.enabled) && attachmentInput && attachmentPreviewsContainer) {
+  if (((_C = config.attachments) == null ? void 0 : _C.enabled) && attachmentInput && attachmentPreviewsContainer) {
     attachmentManager = AttachmentManager.fromConfig(config.attachments);
     attachmentManager.setPreviewsContainer(attachmentPreviewsContainer);
     attachmentInput.addEventListener("change", (e) => {
@@ -13577,7 +13920,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   mount.appendChild(wrapper);
   const applyFullHeightStyles = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2;
     const dockedMode = isDockedMountMode(config);
     const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
     const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
@@ -13596,7 +13939,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const shouldGoFullscreen = mobileFullscreen && isMobileViewport && launcherEnabled;
     const position = (_n2 = (_m2 = config.launcher) == null ? void 0 : _m2.position) != null ? _n2 : "bottom-left";
     const isLeftSidebar = position === "bottom-left" || position === "top-left";
-    const overlayZIndex = (_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.zIndex) != null ? _p2 : 9999;
+    const overlayZIndex = (_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.zIndex) != null ? _p2 : DEFAULT_OVERLAY_Z_INDEX;
     let defaultPanelBorder = sidebarMode || shouldGoFullscreen ? "none" : "1px solid var(--persona-border)";
     let defaultPanelShadow = shouldGoFullscreen ? "none" : sidebarMode ? isLeftSidebar ? "var(--persona-palette-shadows-sidebar-left, 2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-sidebar-right, -2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25))";
     if (dockedMode && !shouldGoFullscreen) {
@@ -13807,7 +14150,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (!isInlineEmbed && !dockedMode) {
       const maxHeightStyles = "max-height: -moz-available !important; max-height: stretch !important;";
       const paddingStyles = sidebarMode ? "" : "padding-top: 1.25em !important;";
-      const zIndexStyles = !sidebarMode && ((_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? `z-index: ${config.launcher.zIndex} !important;` : "";
+      const zIndexStyles = !sidebarMode ? `z-index: ${(_w2 = (_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? _w2 : DEFAULT_OVERLAY_Z_INDEX} !important;` : "";
       wrapper.style.cssText += maxHeightStyles + paddingStyles + zIndexStyles;
     }
   };
@@ -13816,6 +14159,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   applyArtifactLayoutCssVars(mount, config);
   applyArtifactPaneAppearance(mount, config);
   const destroyCallbacks = [];
+  let teardownHostStacking = null;
+  let releaseScrollLock = null;
+  destroyCallbacks.push(() => {
+    teardownHostStacking == null ? void 0 : teardownHostStacking();
+    teardownHostStacking = null;
+    releaseScrollLock == null ? void 0 : releaseScrollLock();
+    releaseScrollLock = null;
+  });
   if (artifactPanelResizeObs) {
     destroyCallbacks.push(() => {
       artifactPanelResizeObs == null ? void 0 : artifactPanelResizeObs.disconnect();
@@ -13871,17 +14222,12 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let isStreaming = false;
   const messageCache = createMessageCache();
   let configVersion = 0;
-  let shouldAutoScroll = true;
+  const autoFollow = createFollowStateController();
   let lastScrollTop = 0;
-  let lastAutoScrollTime = 0;
   let scrollRAF = null;
-  let isAutoScrollBlocked = false;
-  let blockUntilTime = 0;
   let isAutoScrolling = false;
-  const AUTO_SCROLL_THROTTLE = 125;
-  const AUTO_SCROLL_BLOCK_TIME = 2e3;
-  const USER_SCROLL_THRESHOLD = 5;
-  const BOTTOM_THRESHOLD = 50;
+  const USER_SCROLL_THRESHOLD = 1;
+  const BOTTOM_THRESHOLD = 8;
   const messageState = /* @__PURE__ */ new Map();
   const voiceState = {
     active: false,
@@ -13889,7 +14235,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     lastUserMessageWasVoice: false,
     lastUserMessageId: null
   };
-  const voiceAutoResumeMode = (_C = (_B = config.voiceRecognition) == null ? void 0 : _B.autoResume) != null ? _C : false;
+  const voiceAutoResumeMode = (_E = (_D = config.voiceRecognition) == null ? void 0 : _D.autoResume) != null ? _E : false;
   const emitVoiceState = (source) => {
     eventBus.emit("voice:state", {
       active: voiceState.active,
@@ -13955,56 +14301,79 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   }
-  const scheduleAutoScroll = (force = false) => {
-    if (!shouldAutoScroll) return;
-    const now = Date.now();
-    if (isAutoScrollBlocked && now < blockUntilTime) {
-      if (!force) return;
-    }
-    if (isAutoScrollBlocked && now >= blockUntilTime) {
-      isAutoScrollBlocked = false;
+  let smoothScrollRAF = null;
+  const getScrollableContainer = () => {
+    const scrollable = wrapper.querySelector("#persona-scroll-container");
+    return scrollable || body;
+  };
+  const cancelSmoothScroll = () => {
+    if (smoothScrollRAF !== null) {
+      cancelAnimationFrame(smoothScrollRAF);
+      smoothScrollRAF = null;
     }
-    if (!force && !isStreaming) return;
-    if (now - lastAutoScrollTime < AUTO_SCROLL_THROTTLE) return;
-    lastAutoScrollTime = now;
-    if (scrollRAF) {
+    isAutoScrolling = false;
+  };
+  const cancelAutoScroll = () => {
+    if (scrollRAF !== null) {
       cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
     }
+    cancelSmoothScroll();
+  };
+  const syncScrollToBottomButton = () => {
+    if (!isScrollToBottomEnabled() || eventStreamVisible) {
+      if (scrollToBottomButton.parentNode) {
+        scrollToBottomButton.remove();
+      }
+      scrollToBottomButton.style.display = "none";
+      return;
+    }
+    if (scrollToBottomButton.parentNode !== container) {
+      container.appendChild(scrollToBottomButton);
+    }
+    updateScrollToBottomButtonOffset();
+    const hasOverflow = getScrollBottomOffset(body) > 0;
+    scrollToBottomButton.style.display = autoFollow.isFollowing() || !hasOverflow ? "none" : "";
+  };
+  const pauseAutoScroll = () => {
+    if (!autoFollow.pause()) return;
+    cancelAutoScroll();
+    syncScrollToBottomButton();
+  };
+  const resumeAutoScroll = () => {
+    autoFollow.resume();
+    syncScrollToBottomButton();
+  };
+  const scheduleAutoScroll = (force = false) => {
+    if (!autoFollow.isFollowing()) return;
+    if (!force && !isStreaming) return;
+    cancelAutoScroll();
     scrollRAF = requestAnimationFrame(() => {
-      if (isAutoScrollBlocked || !shouldAutoScroll) return;
-      isAutoScrolling = true;
-      body.scrollTop = body.scrollHeight;
-      lastScrollTop = body.scrollTop;
-      requestAnimationFrame(() => {
-        isAutoScrolling = false;
-      });
       scrollRAF = null;
+      if (!autoFollow.isFollowing()) return;
+      smoothScrollToBottom(getScrollableContainer(), force ? 220 : 140);
     });
   };
-  let smoothScrollRAF = null;
-  const getScrollableContainer = () => {
-    const scrollable = wrapper.querySelector("#persona-scroll-container");
-    return scrollable || body;
-  };
   const smoothScrollToBottom = (element, duration = 500) => {
     const start = element.scrollTop;
-    const clientHeight = element.clientHeight;
-    let target = element.scrollHeight;
+    let target = getScrollBottomOffset(element);
     let distance = target - start;
-    const isAtBottom = start + clientHeight >= target - 2;
-    if (isAtBottom || Math.abs(distance) < 5) {
+    if (Math.abs(distance) < 1) {
+      lastScrollTop = element.scrollTop;
       return;
     }
-    if (smoothScrollRAF !== null) {
-      cancelAnimationFrame(smoothScrollRAF);
-      smoothScrollRAF = null;
-    }
+    cancelSmoothScroll();
     const startTime = performance.now();
+    isAutoScrolling = true;
     const easeOutCubic = (t) => {
       return 1 - Math.pow(1 - t, 3);
     };
     const animate = (currentTime) => {
-      const currentTarget = element.scrollHeight;
+      if (!autoFollow.isFollowing()) {
+        cancelSmoothScroll();
+        return;
+      }
+      const currentTarget = getScrollBottomOffset(element);
       if (currentTarget !== target) {
         target = currentTarget;
         distance = target - start;
@@ -14014,11 +14383,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const eased = easeOutCubic(progress);
       const currentScroll = start + distance * eased;
       element.scrollTop = currentScroll;
+      lastScrollTop = element.scrollTop;
       if (progress < 1) {
         smoothScrollRAF = requestAnimationFrame(animate);
       } else {
-        element.scrollTop = element.scrollHeight;
+        element.scrollTop = target;
+        lastScrollTop = element.scrollTop;
         smoothScrollRAF = null;
+        isAutoScrolling = false;
       }
     };
     smoothScrollRAF = requestAnimationFrame(animate);
@@ -14358,15 +14730,6 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
     morphMessages(container2, tempContainer);
-    if (shouldAutoScroll && !isAutoScrollBlocked) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (!shouldAutoScroll || isAutoScrollBlocked) return;
-          const scrollableContainer = getScrollableContainer();
-          smoothScrollToBottom(scrollableContainer);
-        });
-      });
-    }
   };
   const renderMessagesWithPlugins = renderMessagesWithPluginsImpl;
   const updateOpenState = () => {
@@ -14417,11 +14780,42 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   };
   const setOpenState = (nextOpen, source = "user") => {
+    var _a2, _b2;
     if (!launcherEnabled) return;
     if (open === nextOpen) return;
     const prevOpen = open;
     open = nextOpen;
     updateOpenState();
+    const isViewportCovering = (() => {
+      var _a3, _b3, _c2, _d2, _e2, _f2, _g2;
+      const sm = (_b3 = (_a3 = config.launcher) == null ? void 0 : _a3.sidebarMode) != null ? _b3 : false;
+      const ow = (_c2 = mount.ownerDocument.defaultView) != null ? _c2 : window;
+      const mf = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.mobileFullscreen) != null ? _e2 : true;
+      const mb = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.mobileBreakpoint) != null ? _g2 : 640;
+      const isMobile = ow.innerWidth <= mb;
+      const dockedMF = isDockedMountMode(config) && mf && isMobile;
+      return sm || mf && isMobile && launcherEnabled || dockedMF;
+    })();
+    if (open && isViewportCovering) {
+      if (!teardownHostStacking) {
+        const root = mount.getRootNode();
+        const hostEl = root instanceof ShadowRoot ? root.host : mount.closest(".persona-host");
+        if (hostEl) {
+          teardownHostStacking = syncOverlayHostStacking(
+            hostEl,
+            (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.zIndex) != null ? _b2 : DEFAULT_OVERLAY_Z_INDEX
+          );
+        }
+      }
+      if (!releaseScrollLock) {
+        releaseScrollLock = acquireScrollLock(mount.ownerDocument);
+      }
+    } else if (!open) {
+      teardownHostStacking == null ? void 0 : teardownHostStacking();
+      teardownHostStacking = null;
+      releaseScrollLock == null ? void 0 : releaseScrollLock();
+      releaseScrollLock = null;
+    }
     if (open) {
       recalcPanelHeight();
       scheduleAutoScroll(true);
@@ -14584,7 +14978,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   });
   sessionRef.current = session;
-  if (((_E = (_D = config.voiceRecognition) == null ? void 0 : _D.provider) == null ? void 0 : _E.type) === "runtype") {
+  if (((_G = (_F = config.voiceRecognition) == null ? void 0 : _F.provider) == null ? void 0 : _G.type) === "runtype") {
     try {
       session.setupVoice();
     } catch (err) {
@@ -15113,7 +15507,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   }
   const recalcPanelHeight = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2;
     const dockedMode = isDockedMountMode(config);
     const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
     const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
@@ -15155,38 +15549,94 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         panel.style.height = `${finalHeight}px`;
       }
     } finally {
+      updateScrollToBottomButtonOffset();
       updateOpenState();
+      if (open && launcherEnabled) {
+        const ow = (_n2 = mount.ownerDocument.defaultView) != null ? _n2 : window;
+        const isMobile = ow.innerWidth <= ((_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.mobileBreakpoint) != null ? _p2 : 640);
+        const sm = (_r2 = (_q2 = config.launcher) == null ? void 0 : _q2.sidebarMode) != null ? _r2 : false;
+        const mf = (_t2 = (_s2 = config.launcher) == null ? void 0 : _s2.mobileFullscreen) != null ? _t2 : true;
+        const dockedMF = isDockedMountMode(config) && mf && isMobile;
+        const isVC = sm || mf && isMobile && launcherEnabled || dockedMF;
+        if (isVC && !releaseScrollLock) {
+          const root = mount.getRootNode();
+          const hostEl = root instanceof ShadowRoot ? root.host : mount.closest(".persona-host");
+          if (hostEl && !teardownHostStacking) {
+            teardownHostStacking = syncOverlayHostStacking(
+              hostEl,
+              (_v2 = (_u2 = config.launcher) == null ? void 0 : _u2.zIndex) != null ? _v2 : DEFAULT_OVERLAY_Z_INDEX
+            );
+          }
+          releaseScrollLock = acquireScrollLock(mount.ownerDocument);
+        } else if (!isVC) {
+          teardownHostStacking == null ? void 0 : teardownHostStacking();
+          teardownHostStacking = null;
+          releaseScrollLock == null ? void 0 : releaseScrollLock();
+          releaseScrollLock = null;
+        }
+      }
     }
   };
   recalcPanelHeight();
-  const ownerWindow = (_F = mount.ownerDocument.defaultView) != null ? _F : window;
+  const ownerWindow = (_H = mount.ownerDocument.defaultView) != null ? _H : window;
   ownerWindow.addEventListener("resize", recalcPanelHeight);
   destroyCallbacks.push(() => ownerWindow.removeEventListener("resize", recalcPanelHeight));
+  if (typeof ResizeObserver !== "undefined") {
+    const footerResizeObserver = new ResizeObserver(() => {
+      updateScrollToBottomButtonOffset();
+    });
+    footerResizeObserver.observe(footer);
+    destroyCallbacks.push(() => footerResizeObserver.disconnect());
+  }
   lastScrollTop = body.scrollTop;
   const handleScroll = () => {
     const scrollTop = body.scrollTop;
-    const scrollHeight = body.scrollHeight;
-    const clientHeight = body.clientHeight;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const delta = Math.abs(scrollTop - lastScrollTop);
-    lastScrollTop = scrollTop;
-    if (isAutoScrolling) return;
-    if (delta <= USER_SCROLL_THRESHOLD) return;
-    if (!shouldAutoScroll && distanceFromBottom < BOTTOM_THRESHOLD) {
-      isAutoScrollBlocked = false;
-      shouldAutoScroll = true;
+    const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
+      following: autoFollow.isFollowing(),
+      currentScrollTop: scrollTop,
+      lastScrollTop,
+      nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
+      userScrollThreshold: USER_SCROLL_THRESHOLD,
+      isAutoScrolling,
+      pauseOnUpwardScroll: true,
+      pauseWhenAwayFromBottom: false,
+      resumeRequiresDownwardScroll: true
+    });
+    lastScrollTop = nextLastScrollTop;
+    if (action === "resume") {
+      resumeAutoScroll();
       return;
     }
-    if (shouldAutoScroll && distanceFromBottom > BOTTOM_THRESHOLD) {
-      isAutoScrollBlocked = true;
-      blockUntilTime = Date.now() + AUTO_SCROLL_BLOCK_TIME;
-      shouldAutoScroll = false;
+    if (action === "pause") {
+      pauseAutoScroll();
     }
   };
   body.addEventListener("scroll", handleScroll, { passive: true });
   destroyCallbacks.push(() => body.removeEventListener("scroll", handleScroll));
+  const handleWheel = (event) => {
+    const action = resolveFollowStateFromWheel({
+      following: autoFollow.isFollowing(),
+      deltaY: event.deltaY,
+      nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
+      resumeWhenNearBottom: true
+    });
+    if (action === "pause") {
+      pauseAutoScroll();
+    } else if (action === "resume") {
+      resumeAutoScroll();
+    }
+  };
+  body.addEventListener("wheel", handleWheel, { passive: true });
+  destroyCallbacks.push(() => body.removeEventListener("wheel", handleWheel));
+  scrollToBottomButton.addEventListener("click", () => {
+    body.scrollTop = body.scrollHeight;
+    lastScrollTop = body.scrollTop;
+    resumeAutoScroll();
+    scheduleAutoScroll(true);
+  });
+  destroyCallbacks.push(() => scrollToBottomButton.remove());
   destroyCallbacks.push(() => {
-    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    cancelAutoScroll();
   });
   const refreshCloseButton = () => {
     if (!closeButton) return;
@@ -15211,6 +15661,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     clearChatButton.addEventListener("click", () => {
       session.clearMessages();
       messageCache.clear();
+      resumeAutoScroll();
       try {
         localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
         if (config.debug) {
@@ -15282,7 +15733,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -15305,8 +15756,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       autoExpand = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.autoExpand) != null ? _e2 : false;
       showReasoning = (_g2 = (_f2 = config.features) == null ? void 0 : _f2.showReasoning) != null ? _g2 : true;
       showToolCalls = (_i2 = (_h2 = config.features) == null ? void 0 : _h2.showToolCalls) != null ? _i2 : true;
+      scrollToBottomFeature = (_k2 = (_j2 = config.features) == null ? void 0 : _j2.scrollToBottom) != null ? _k2 : {};
+      renderScrollToBottomButton();
+      syncScrollToBottomButton();
       const prevShowEventStreamToggle = showEventStreamToggle;
-      showEventStreamToggle = (_k2 = (_j2 = config.features) == null ? void 0 : _j2.showEventStreamToggle) != null ? _k2 : false;
+      showEventStreamToggle = (_m2 = (_l2 = config.features) == null ? void 0 : _l2.showEventStreamToggle) != null ? _m2 : false;
       if (showEventStreamToggle && !prevShowEventStreamToggle) {
         if (!eventStreamBuffer) {
           eventStreamStore = new EventStreamStore(eventStreamDbName);
@@ -15323,7 +15777,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           });
         }
         if (!eventStreamToggleBtn && header) {
-          const dynEsClassNames = (_m2 = (_l2 = config.features) == null ? void 0 : _l2.eventStream) == null ? void 0 : _m2.classNames;
+          const dynEsClassNames = (_o2 = (_n2 = config.features) == null ? void 0 : _n2.eventStream) == null ? void 0 : _o2.classNames;
           const dynToggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + ((dynEsClassNames == null ? void 0 : dynEsClassNames.toggleButton) ? " " + dynEsClassNames.toggleButton : "");
           eventStreamToggleBtn = createElement("button", dynToggleBtnClasses);
           eventStreamToggleBtn.style.width = "28px";
@@ -15361,15 +15815,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         eventStreamBuffer = null;
         eventStreamStore = null;
       }
-      if (((_n2 = config.launcher) == null ? void 0 : _n2.enabled) === false && launcherButtonInstance) {
+      if (((_p2 = config.launcher) == null ? void 0 : _p2.enabled) === false && launcherButtonInstance) {
         launcherButtonInstance.destroy();
         launcherButtonInstance = null;
       }
-      if (((_o2 = config.launcher) == null ? void 0 : _o2.enabled) === false && customLauncherElement) {
+      if (((_q2 = config.launcher) == null ? void 0 : _q2.enabled) === false && customLauncherElement) {
         customLauncherElement.remove();
         customLauncherElement = null;
       }
-      if (((_p2 = config.launcher) == null ? void 0 : _p2.enabled) !== false && !launcherButtonInstance && !customLauncherElement) {
+      if (((_r2 = config.launcher) == null ? void 0 : _r2.enabled) !== false && !launcherButtonInstance && !customLauncherElement) {
         const launcherPlugin = plugins.find((p) => p.renderLauncher);
         if (launcherPlugin == null ? void 0 : launcherPlugin.renderLauncher) {
           const customLauncher = launcherPlugin.renderLauncher({
@@ -15393,13 +15847,13 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (launcherButtonInstance) {
         launcherButtonInstance.update(config);
       }
-      if (headerTitle && ((_q2 = config.launcher) == null ? void 0 : _q2.title) !== void 0) {
+      if (headerTitle && ((_s2 = config.launcher) == null ? void 0 : _s2.title) !== void 0) {
         headerTitle.textContent = config.launcher.title;
       }
-      if (headerSubtitle && ((_r2 = config.launcher) == null ? void 0 : _r2.subtitle) !== void 0) {
+      if (headerSubtitle && ((_t2 = config.launcher) == null ? void 0 : _t2.subtitle) !== void 0) {
         headerSubtitle.textContent = config.launcher.subtitle;
       }
-      const headerLayoutConfig = (_s2 = config.layout) == null ? void 0 : _s2.header;
+      const headerLayoutConfig = (_u2 = config.layout) == null ? void 0 : _u2.header;
       const headerLayoutChanged = (headerLayoutConfig == null ? void 0 : headerLayoutConfig.layout) !== prevHeaderLayout;
       if (headerLayoutChanged && header) {
         const newHeaderElements = headerLayoutConfig ? buildHeaderWithLayout(config, headerLayoutConfig, {
@@ -15445,14 +15899,16 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
       }
-      const showHeader = ((_t2 = config.layout) == null ? void 0 : _t2.showHeader) !== false;
+      const showHeader = ((_v2 = config.layout) == null ? void 0 : _v2.showHeader) !== false;
       if (header) {
         header.style.display = showHeader ? "" : "none";
       }
-      const showFooter = ((_u2 = config.layout) == null ? void 0 : _u2.showFooter) !== false;
+      const showFooter = ((_w2 = config.layout) == null ? void 0 : _w2.showFooter) !== false;
       if (footer) {
         footer.style.display = showFooter ? "" : "none";
       }
+      updateScrollToBottomButtonOffset();
+      syncScrollToBottomButton();
       const launcherEnabledChanged = launcherEnabled !== prevLauncherEnabled;
       const autoExpandChanged = autoExpand !== prevAutoExpand;
       if (launcherEnabledChanged) {
@@ -15471,20 +15927,20 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       refreshCloseButton();
       const toolCallConfigChanged = JSON.stringify(nextConfig.toolCall) !== JSON.stringify(previousToolCallConfig);
       const messageActionsChanged = JSON.stringify(config.messageActions) !== JSON.stringify(previousMessageActions);
-      const layoutMessagesChanged = JSON.stringify((_v2 = config.layout) == null ? void 0 : _v2.messages) !== JSON.stringify(previousLayoutMessages);
-      const loadingIndicatorChanged = ((_w2 = config.loadingIndicator) == null ? void 0 : _w2.render) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.render) || ((_x2 = config.loadingIndicator) == null ? void 0 : _x2.renderIdle) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.renderIdle) || ((_y2 = config.loadingIndicator) == null ? void 0 : _y2.showBubble) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.showBubble);
+      const layoutMessagesChanged = JSON.stringify((_x2 = config.layout) == null ? void 0 : _x2.messages) !== JSON.stringify(previousLayoutMessages);
+      const loadingIndicatorChanged = ((_y2 = config.loadingIndicator) == null ? void 0 : _y2.render) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.render) || ((_z2 = config.loadingIndicator) == null ? void 0 : _z2.renderIdle) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.renderIdle) || ((_A2 = config.loadingIndicator) == null ? void 0 : _A2.showBubble) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.showBubble);
       const iterationDisplayChanged = config.iterationDisplay !== previousIterationDisplay;
       const messagesConfigChanged = toolCallConfigChanged || messageActionsChanged || layoutMessagesChanged || loadingIndicatorChanged || iterationDisplayChanged;
       if (messagesConfigChanged && session) {
         configVersion++;
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);
       }
-      const launcher = (_z2 = config.launcher) != null ? _z2 : {};
-      const headerIconHidden = (_A2 = launcher.headerIconHidden) != null ? _A2 : false;
-      const layoutShowIcon = (_C2 = (_B2 = config.layout) == null ? void 0 : _B2.header) == null ? void 0 : _C2.showIcon;
+      const launcher = (_B2 = config.launcher) != null ? _B2 : {};
+      const headerIconHidden = (_C2 = launcher.headerIconHidden) != null ? _C2 : false;
+      const layoutShowIcon = (_E2 = (_D2 = config.layout) == null ? void 0 : _D2.header) == null ? void 0 : _E2.showIcon;
       const shouldHideIcon = headerIconHidden || layoutShowIcon === false;
       const headerIconName = launcher.headerIconName;
-      const headerIconSize = (_D2 = launcher.headerIconSize) != null ? _D2 : "48px";
+      const headerIconSize = (_F2 = launcher.headerIconSize) != null ? _F2 : "48px";
       if (iconHolder) {
         const headerEl = container.querySelector(".persona-border-b-persona-divider");
         const headerCopy = headerEl == null ? void 0 : headerEl.querySelector(".persona-flex-col");
@@ -15511,7 +15967,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             if (iconSvg) {
               iconHolder.replaceChildren(iconSvg);
             } else {
-              iconHolder.textContent = (_E2 = launcher.agentIconText) != null ? _E2 : "\u{1F4AC}";
+              iconHolder.textContent = (_G2 = launcher.agentIconText) != null ? _G2 : "\u{1F4AC}";
             }
           } else if (launcher.iconUrl) {
             const img2 = iconHolder.querySelector("img");
@@ -15534,7 +15990,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             if (existingSvg || existingImg) {
               iconHolder.replaceChildren();
             }
-            iconHolder.textContent = (_F2 = launcher.agentIconText) != null ? _F2 : "\u{1F4AC}";
+            iconHolder.textContent = (_H2 = launcher.agentIconText) != null ? _H2 : "\u{1F4AC}";
           }
           const img = iconHolder.querySelector("img");
           if (img) {
@@ -15543,8 +15999,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
       }
-      const layoutShowTitle = (_H2 = (_G2 = config.layout) == null ? void 0 : _G2.header) == null ? void 0 : _H2.showTitle;
-      const layoutShowSubtitle = (_J2 = (_I2 = config.layout) == null ? void 0 : _I2.header) == null ? void 0 : _J2.showSubtitle;
+      const layoutShowTitle = (_J2 = (_I2 = config.layout) == null ? void 0 : _I2.header) == null ? void 0 : _J2.showTitle;
+      const layoutShowSubtitle = (_L2 = (_K2 = config.layout) == null ? void 0 : _K2.header) == null ? void 0 : _L2.showSubtitle;
       if (headerTitle) {
         headerTitle.style.display = layoutShowTitle === false ? "none" : "";
       }
@@ -15552,14 +16008,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         headerSubtitle.style.display = layoutShowSubtitle === false ? "none" : "";
       }
       if (closeButton) {
-        const layoutShowCloseButton = (_L2 = (_K2 = config.layout) == null ? void 0 : _K2.header) == null ? void 0 : _L2.showCloseButton;
+        const layoutShowCloseButton = (_N2 = (_M2 = config.layout) == null ? void 0 : _M2.header) == null ? void 0 : _N2.showCloseButton;
         if (layoutShowCloseButton === false) {
           closeButton.style.display = "none";
         } else {
           closeButton.style.display = "";
         }
-        const closeButtonSize = (_M = launcher.closeButtonSize) != null ? _M : "32px";
-        const closeButtonPlacement = (_N = launcher.closeButtonPlacement) != null ? _N : "inline";
+        const closeButtonSize = (_O = launcher.closeButtonSize) != null ? _O : "32px";
+        const closeButtonPlacement = (_P = launcher.closeButtonPlacement) != null ? _P : "inline";
         closeButton.style.height = closeButtonSize;
         closeButton.style.width = closeButtonSize;
         const { closeButtonWrapper } = panelElements;
@@ -15572,8 +16028,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             container.style.position = "relative";
             container.appendChild(closeButtonWrapper);
           } else {
-            const clearChatPlacement = (_P = (_O = launcher.clearChat) == null ? void 0 : _O.placement) != null ? _P : "inline";
-            const clearChatEnabled = (_R = (_Q = launcher.clearChat) == null ? void 0 : _Q.enabled) != null ? _R : true;
+            const clearChatPlacement = (_R = (_Q = launcher.clearChat) == null ? void 0 : _Q.placement) != null ? _R : "inline";
+            const clearChatEnabled = (_T = (_S = launcher.clearChat) == null ? void 0 : _S.enabled) != null ? _T : true;
             closeButtonWrapper.className = clearChatEnabled && clearChatPlacement === "inline" ? "" : "persona-ml-auto";
             const header2 = container.querySelector(".persona-border-b-persona-divider");
             if (header2) {
@@ -15619,8 +16075,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           closeButton.style.paddingTop = "";
           closeButton.style.paddingBottom = "";
         }
-        const closeButtonIconName = (_S = launcher.closeButtonIconName) != null ? _S : "x";
-        const closeButtonIconText = (_T = launcher.closeButtonIconText) != null ? _T : "\xD7";
+        const closeButtonIconName = (_U = launcher.closeButtonIconName) != null ? _U : "x";
+        const closeButtonIconText = (_V = launcher.closeButtonIconText) != null ? _V : "\xD7";
         closeButton.innerHTML = "";
         const iconSvg = renderLucideIcon(closeButtonIconName, "20px", "currentColor", 2);
         if (iconSvg) {
@@ -15628,8 +16084,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         } else {
           closeButton.textContent = closeButtonIconText;
         }
-        const closeButtonTooltipText = (_U = launcher.closeButtonTooltipText) != null ? _U : "Close chat";
-        const closeButtonShowTooltip = (_V = launcher.closeButtonShowTooltip) != null ? _V : true;
+        const closeButtonTooltipText = (_W = launcher.closeButtonTooltipText) != null ? _W : "Close chat";
+        const closeButtonShowTooltip = (_X = launcher.closeButtonShowTooltip) != null ? _X : true;
         closeButton.setAttribute("aria-label", closeButtonTooltipText);
         if (closeButtonWrapper) {
           if (closeButtonWrapper._cleanupTooltip) {
@@ -15654,6 +16110,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               portaledTooltip.appendChild(arrow);
               const buttonRect = closeButton.getBoundingClientRect();
               portaledTooltip.style.position = "fixed";
+              portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
               portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
               portaledTooltip.style.top = `${buttonRect.top - 8}px`;
               portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -15685,11 +16142,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       const { clearChatButton, clearChatButtonWrapper } = panelElements;
       if (clearChatButton) {
-        const clearChatConfig = (_W = launcher.clearChat) != null ? _W : {};
-        const clearChatEnabled = (_X = clearChatConfig.enabled) != null ? _X : true;
-        const layoutShowClearChat = (_Z = (_Y = config.layout) == null ? void 0 : _Y.header) == null ? void 0 : _Z.showClearChat;
+        const clearChatConfig = (_Y = launcher.clearChat) != null ? _Y : {};
+        const clearChatEnabled = (_Z = clearChatConfig.enabled) != null ? _Z : true;
+        const layoutShowClearChat = (_$ = (__ = config.layout) == null ? void 0 : __.header) == null ? void 0 : _$.showClearChat;
         const shouldShowClearChat = layoutShowClearChat !== void 0 ? layoutShowClearChat : clearChatEnabled;
-        const clearChatPlacement = (__ = clearChatConfig.placement) != null ? __ : "inline";
+        const clearChatPlacement = (_aa = clearChatConfig.placement) != null ? _aa : "inline";
         if (clearChatButtonWrapper) {
           clearChatButtonWrapper.style.display = shouldShowClearChat ? "" : "none";
           const { closeButtonWrapper } = panelElements;
@@ -15731,11 +16188,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
         if (shouldShowClearChat) {
-          const clearChatSize = (_$ = clearChatConfig.size) != null ? _$ : "32px";
+          const clearChatSize = (_ba = clearChatConfig.size) != null ? _ba : "32px";
           clearChatButton.style.height = clearChatSize;
           clearChatButton.style.width = clearChatSize;
-          const clearChatIconName = (_aa = clearChatConfig.iconName) != null ? _aa : "refresh-cw";
-          const clearChatIconColor = (_ba = clearChatConfig.iconColor) != null ? _ba : "";
+          const clearChatIconName = (_ca = clearChatConfig.iconName) != null ? _ca : "refresh-cw";
+          const clearChatIconColor = (_da = clearChatConfig.iconColor) != null ? _da : "";
           clearChatButton.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
           clearChatButton.innerHTML = "";
           const iconSvg = renderLucideIcon(clearChatIconName, "20px", "currentColor", 2);
@@ -15779,8 +16236,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             clearChatButton.style.paddingTop = "";
             clearChatButton.style.paddingBottom = "";
           }
-          const clearChatTooltipText = (_ca = clearChatConfig.tooltipText) != null ? _ca : "Clear chat";
-          const clearChatShowTooltip = (_da = clearChatConfig.showTooltip) != null ? _da : true;
+          const clearChatTooltipText = (_ea = clearChatConfig.tooltipText) != null ? _ea : "Clear chat";
+          const clearChatShowTooltip = (_fa = clearChatConfig.showTooltip) != null ? _fa : true;
           clearChatButton.setAttribute("aria-label", clearChatTooltipText);
           if (clearChatButtonWrapper) {
             if (clearChatButtonWrapper._cleanupTooltip) {
@@ -15805,6 +16262,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
                 portaledTooltip.appendChild(arrow);
                 const buttonRect = clearChatButton.getBoundingClientRect();
                 portaledTooltip.style.position = "fixed";
+                portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
                 portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
                 portaledTooltip.style.top = `${buttonRect.top - 8}px`;
                 portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -15855,9 +16313,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       suggestionsManager.render(config.suggestionChips, session, textarea, void 0, config.suggestionChipsConfig);
       updateCopy();
       setComposerDisabled(session.isStreaming());
-      const voiceRecognitionEnabled = ((_ea = config.voiceRecognition) == null ? void 0 : _ea.enabled) === true;
+      const voiceRecognitionEnabled = ((_ga = config.voiceRecognition) == null ? void 0 : _ga.enabled) === true;
       const hasSpeechRecognition = typeof window !== "undefined" && (typeof window.webkitSpeechRecognition !== "undefined" || typeof window.SpeechRecognition !== "undefined");
-      const hasRuntypeProvider = ((_ga = (_fa = config.voiceRecognition) == null ? void 0 : _fa.provider) == null ? void 0 : _ga.type) === "runtype";
+      const hasRuntypeProvider = ((_ia = (_ha = config.voiceRecognition) == null ? void 0 : _ha.provider) == null ? void 0 : _ia.type) === "runtype";
       const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
       if (voiceRecognitionEnabled && hasVoiceInput) {
         if (!micButton || !micButtonWrapper) {
@@ -15870,17 +16328,17 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             micButton.disabled = session.isStreaming();
           }
         } else {
-          const voiceConfig = (_ha = config.voiceRecognition) != null ? _ha : {};
-          const sendButtonConfig2 = (_ia = config.sendButton) != null ? _ia : {};
-          const micIconName = (_ja = voiceConfig.iconName) != null ? _ja : "mic";
-          const buttonSize2 = (_ka = sendButtonConfig2.size) != null ? _ka : "40px";
-          const micIconSize = (_la = voiceConfig.iconSize) != null ? _la : buttonSize2;
+          const voiceConfig = (_ja = config.voiceRecognition) != null ? _ja : {};
+          const sendButtonConfig2 = (_ka = config.sendButton) != null ? _ka : {};
+          const micIconName = (_la = voiceConfig.iconName) != null ? _la : "mic";
+          const buttonSize2 = (_ma = sendButtonConfig2.size) != null ? _ma : "40px";
+          const micIconSize = (_na = voiceConfig.iconSize) != null ? _na : buttonSize2;
           const micIconSizeNum = parseFloat(micIconSize) || 24;
           micButton.style.width = micIconSize;
           micButton.style.height = micIconSize;
           micButton.style.minWidth = micIconSize;
           micButton.style.minHeight = micIconSize;
-          const iconColor = (_na = (_ma = voiceConfig.iconColor) != null ? _ma : sendButtonConfig2.textColor) != null ? _na : "currentColor";
+          const iconColor = (_pa = (_oa = voiceConfig.iconColor) != null ? _oa : sendButtonConfig2.textColor) != null ? _pa : "currentColor";
           micButton.innerHTML = "";
           const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColor, 2);
           if (micIconSvg) {
@@ -15888,7 +16346,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           } else {
             micButton.textContent = "\u{1F3A4}";
           }
-          const backgroundColor2 = (_oa = voiceConfig.backgroundColor) != null ? _oa : sendButtonConfig2.backgroundColor;
+          const backgroundColor2 = (_qa = voiceConfig.backgroundColor) != null ? _qa : sendButtonConfig2.backgroundColor;
           if (backgroundColor2) {
             micButton.style.backgroundColor = backgroundColor2;
           } else {
@@ -15926,8 +16384,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             micButton.style.paddingBottom = "";
           }
           const tooltip2 = micButtonWrapper == null ? void 0 : micButtonWrapper.querySelector(".persona-send-button-tooltip");
-          const tooltipText2 = (_pa = voiceConfig.tooltipText) != null ? _pa : "Start voice recognition";
-          const showTooltip2 = (_qa = voiceConfig.showTooltip) != null ? _qa : false;
+          const tooltipText2 = (_ra = voiceConfig.tooltipText) != null ? _ra : "Start voice recognition";
+          const showTooltip2 = (_sa = voiceConfig.showTooltip) != null ? _sa : false;
           if (showTooltip2 && tooltipText2) {
             if (!tooltip2) {
               const newTooltip = document.createElement("div");
@@ -15947,19 +16405,19 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else {
         if (micButton && micButtonWrapper) {
           micButtonWrapper.style.display = "none";
-          if (((_sa = (_ra = config.voiceRecognition) == null ? void 0 : _ra.provider) == null ? void 0 : _sa.type) === "runtype") {
+          if (((_ua = (_ta = config.voiceRecognition) == null ? void 0 : _ta.provider) == null ? void 0 : _ua.type) === "runtype") {
             if (session.isVoiceActive()) session.toggleVoice();
           } else if (isRecording) {
             stopVoiceRecognition();
           }
         }
       }
-      const attachmentsEnabled = ((_ta = config.attachments) == null ? void 0 : _ta.enabled) === true;
+      const attachmentsEnabled = ((_va = config.attachments) == null ? void 0 : _va.enabled) === true;
       if (attachmentsEnabled) {
         if (!attachmentButtonWrapper || !attachmentButton) {
-          const attachmentsConfig = (_ua = config.attachments) != null ? _ua : {};
-          const sendButtonConfig2 = (_va = config.sendButton) != null ? _va : {};
-          const buttonSize2 = (_wa = sendButtonConfig2.size) != null ? _wa : "40px";
+          const attachmentsConfig = (_wa = config.attachments) != null ? _wa : {};
+          const sendButtonConfig2 = (_xa = config.sendButton) != null ? _xa : {};
+          const buttonSize2 = (_ya = sendButtonConfig2.size) != null ? _ya : "40px";
           if (!attachmentPreviewsContainer) {
             attachmentPreviewsContainer = createElement("div", "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2");
             attachmentPreviewsContainer.style.display = "none";
@@ -15968,8 +16426,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           if (!attachmentInput) {
             attachmentInput = document.createElement("input");
             attachmentInput.type = "file";
-            attachmentInput.accept = ((_xa = attachmentsConfig.allowedTypes) != null ? _xa : ALL_SUPPORTED_MIME_TYPES).join(",");
-            attachmentInput.multiple = ((_ya = attachmentsConfig.maxFiles) != null ? _ya : 4) > 1;
+            attachmentInput.accept = ((_za = attachmentsConfig.allowedTypes) != null ? _za : ALL_SUPPORTED_MIME_TYPES).join(",");
+            attachmentInput.multiple = ((_Aa = attachmentsConfig.maxFiles) != null ? _Aa : 4) > 1;
             attachmentInput.style.display = "none";
             attachmentInput.setAttribute("aria-label", "Attach files");
             composerForm.insertBefore(attachmentInput, textarea);
@@ -15980,8 +16438,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
           );
           attachmentButton.type = "button";
-          attachmentButton.setAttribute("aria-label", (_za = attachmentsConfig.buttonTooltipText) != null ? _za : "Attach file");
-          const attachIconName = (_Aa = attachmentsConfig.buttonIconName) != null ? _Aa : "paperclip";
+          attachmentButton.setAttribute("aria-label", (_Ba = attachmentsConfig.buttonTooltipText) != null ? _Ba : "Attach file");
+          const attachIconName = (_Ca = attachmentsConfig.buttonIconName) != null ? _Ca : "paperclip";
           const attachIconSize = buttonSize2;
           const buttonSizeNum = parseFloat(attachIconSize) || 40;
           const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
@@ -16013,7 +16471,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             attachmentInput == null ? void 0 : attachmentInput.click();
           });
           attachmentButtonWrapper.appendChild(attachmentButton);
-          const attachTooltipText = (_Ba = attachmentsConfig.buttonTooltipText) != null ? _Ba : "Attach file";
+          const attachTooltipText = (_Da = attachmentsConfig.buttonTooltipText) != null ? _Da : "Attach file";
           const tooltip2 = createElement("div", "persona-send-button-tooltip");
           tooltip2.textContent = attachTooltipText;
           attachmentButtonWrapper.appendChild(tooltip2);
@@ -16030,10 +16488,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         } else {
           attachmentButtonWrapper.style.display = "";
-          const attachmentsConfig = (_Ca = config.attachments) != null ? _Ca : {};
+          const attachmentsConfig = (_Ea = config.attachments) != null ? _Ea : {};
           if (attachmentInput) {
-            attachmentInput.accept = ((_Da = attachmentsConfig.allowedTypes) != null ? _Da : ALL_SUPPORTED_MIME_TYPES).join(",");
-            attachmentInput.multiple = ((_Ea = attachmentsConfig.maxFiles) != null ? _Ea : 4) > 1;
+            attachmentInput.accept = ((_Fa = attachmentsConfig.allowedTypes) != null ? _Fa : ALL_SUPPORTED_MIME_TYPES).join(",");
+            attachmentInput.multiple = ((_Ga = attachmentsConfig.maxFiles) != null ? _Ga : 4) > 1;
           }
           if (attachmentManager) {
             attachmentManager.updateConfig({
@@ -16051,13 +16509,13 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           attachmentManager.clearAttachments();
         }
       }
-      const sendButtonConfig = (_Fa = config.sendButton) != null ? _Fa : {};
-      const useIcon = (_Ga = sendButtonConfig.useIcon) != null ? _Ga : false;
-      const iconText = (_Ha = sendButtonConfig.iconText) != null ? _Ha : "\u2191";
+      const sendButtonConfig = (_Ha = config.sendButton) != null ? _Ha : {};
+      const useIcon = (_Ia = sendButtonConfig.useIcon) != null ? _Ia : false;
+      const iconText = (_Ja = sendButtonConfig.iconText) != null ? _Ja : "\u2191";
       const iconName = sendButtonConfig.iconName;
-      const tooltipText = (_Ia = sendButtonConfig.tooltipText) != null ? _Ia : "Send message";
-      const showTooltip = (_Ja = sendButtonConfig.showTooltip) != null ? _Ja : false;
-      const buttonSize = (_Ka = sendButtonConfig.size) != null ? _Ka : "40px";
+      const tooltipText = (_Ka = sendButtonConfig.tooltipText) != null ? _Ka : "Send message";
+      const showTooltip = (_La = sendButtonConfig.showTooltip) != null ? _La : false;
+      const buttonSize = (_Ma = sendButtonConfig.size) != null ? _Ma : "40px";
       const backgroundColor = sendButtonConfig.backgroundColor;
       const textColor = sendButtonConfig.textColor;
       if (useIcon) {
@@ -16094,7 +16552,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {
-        sendButton.textContent = (_Ma = (_La = config.copy) == null ? void 0 : _La.sendButtonLabel) != null ? _Ma : "Send";
+        sendButton.textContent = (_Oa = (_Na = config.copy) == null ? void 0 : _Na.sendButtonLabel) != null ? _Oa : "Send";
         sendButton.style.width = "";
         sendButton.style.height = "";
         sendButton.style.minWidth = "";
@@ -16154,7 +16612,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else if (tooltip) {
         tooltip.style.display = "none";
       }
-      const updatedContentMaxWidth = (_Na = config.layout) == null ? void 0 : _Na.contentMaxWidth;
+      const updatedContentMaxWidth = (_Pa = config.layout) == null ? void 0 : _Pa.contentMaxWidth;
       if (updatedContentMaxWidth) {
         messagesWrapper.style.maxWidth = updatedContentMaxWidth;
         messagesWrapper.style.marginLeft = "auto";
@@ -16176,8 +16634,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginRight = "";
         }
       }
-      const statusIndicatorConfig = (_Oa = config.statusIndicator) != null ? _Oa : {};
-      const isVisible = (_Pa = statusIndicatorConfig.visible) != null ? _Pa : true;
+      const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
+      const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;
       statusText.style.display = isVisible ? "" : "none";
       if (session) {
         const currentStatus = session.getStatus();
@@ -16211,6 +16669,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       artifactsPaneUserHidden = false;
       session.clearMessages();
       messageCache.clear();
+      resumeAutoScroll();
       try {
         localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
         if (config.debug) {
@@ -16531,7 +16990,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   };
-  const shouldExposeDebugApi = ((_G = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _G : false) || Boolean(config.debug);
+  const shouldExposeDebugApi = ((_I = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _I : false) || Boolean(config.debug);
   if (shouldExposeDebugApi && typeof window !== "undefined") {
     const previousDebug = window.AgentWidgetBrowser;
     const debugApi = {
@@ -16634,9 +17093,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const voiceKey = `${persistConfig.keyPrefix}widget-voice`;
     const voiceModeKey = `${persistConfig.keyPrefix}widget-voice-mode`;
     if (storage) {
-      const wasOpen = ((_H = persistConfig.persist) == null ? void 0 : _H.openState) && storage.getItem(openKey) === "true";
-      const wasVoiceActive = ((_I = persistConfig.persist) == null ? void 0 : _I.voiceState) && storage.getItem(voiceKey) === "true";
-      const wasInVoiceMode = ((_J = persistConfig.persist) == null ? void 0 : _J.voiceState) && storage.getItem(voiceModeKey) === "true";
+      const wasOpen = ((_J = persistConfig.persist) == null ? void 0 : _J.openState) && storage.getItem(openKey) === "true";
+      const wasVoiceActive = ((_K = persistConfig.persist) == null ? void 0 : _K.voiceState) && storage.getItem(voiceKey) === "true";
+      const wasInVoiceMode = ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) && storage.getItem(voiceModeKey) === "true";
       if (wasOpen) {
         setTimeout(() => {
           controller.open();
@@ -16653,7 +17112,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }, 100);
         }, 0);
       }
-      if ((_K = persistConfig.persist) == null ? void 0 : _K.openState) {
+      if ((_M = persistConfig.persist) == null ? void 0 : _M.openState) {
         eventBus.on("widget:opened", () => {
           storage.setItem(openKey, "true");
         });
@@ -16661,7 +17120,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           storage.setItem(openKey, "false");
         });
       }
-      if ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) {
+      if ((_N = persistConfig.persist) == null ? void 0 : _N.voiceState) {
         eventBus.on("voice:state", (event) => {
           storage.setItem(voiceKey, event.active ? "true" : "false");
         });
@@ -16834,7 +17293,7 @@ var applyDockStyles = (shell, pushTrack, contentSlot, dockSlot, host, config, ex
     dockSlot.style.minWidth = "0";
     dockSlot.style.minHeight = "0";
     dockSlot.style.overflow = "hidden";
-    dockSlot.style.zIndex = String((_f = (_e = config == null ? void 0 : config.launcher) == null ? void 0 : _e.zIndex) != null ? _f : 9999);
+    dockSlot.style.zIndex = String((_f = (_e = config == null ? void 0 : config.launcher) == null ? void 0 : _e.zIndex) != null ? _f : DEFAULT_OVERLAY_Z_INDEX);
     dockSlot.style.transform = "none";
     dockSlot.style.transition = "none";
     dockSlot.style.pointerEvents = "auto";
@@ -17579,6 +18038,7 @@ export {
   ROLE_INTENSITIES,
   ROLE_LINKS_FOCUS,
   ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM,
   ROLE_SURFACES,
   ROLE_USER_MESSAGES,
   SEMANTIC_COLORS_SECTION,