@sonordev/site-kit 6.0.1 → 6.1.1

package/dist/{chunk-LZPICBND.js → chunk-QYRJ4IQD.js}

@@ -2,8 +2,9 @@
 'use strict';
 
 var chunkESP5RMB7_js = require('./chunk-ESP5RMB7.js');
-var chunkULSFOC3J_js = require('./chunk-ULSFOC3J.js');
-var chunk5ABTBPPK_js = require('./chunk-5ABTBPPK.js');
+var chunkNBOBOYMT_js = require('./chunk-NBOBOYMT.js');
+var chunkWWJQGMMN_js = require('./chunk-WWJQGMMN.js');
+var chunkVNJTU6LG_js = require('./chunk-VNJTU6LG.js');
 var react = require('react');
 var ReactMarkdown = require('react-markdown');
 var jsxRuntime = require('react/jsx-runtime');
@@ -38,7 +39,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     submit,
     isSubmitting,
     isComplete
-  } = chunkULSFOC3J_js.useForm(slug, { initialValues: prefill || {} });
+  } = chunkWWJQGMMN_js.useForm(slug, { initialValues: prefill || {} });
   const cardStyle = {
     marginTop: 8,
     padding: 12,
@@ -66,7 +67,9 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     borderColor: "var(--sk-border, #e5e7eb)",
     backgroundColor: "var(--sk-bg, #ffffff)",
     color: "var(--sk-text-primary, #111827)",
-    fontSize: 13.5,
+    // 16px, not smaller: iOS Safari zooms the whole page into any focused
+    // field under 16px, which throws the visitor out of the chat window.
+    fontSize: 16,
     boxSizing: "border-box",
     outline: "none"
   };
@@ -301,13 +304,17 @@ function userRequestedHandoff(text) {
   ];
   return patterns.some((p) => p.test(lower));
 }
-function adjustColor(hex, amount) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
-  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
-  const b = Math.min(255, Math.max(0, (num & 255) + amount));
-  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+var BUBBLE_BG = "color-mix(in srgb, var(--sk-bg, #ffffff) 94%, transparent)";
+var HAIRLINE = "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 9%, transparent)";
+var ECHO_STYLE_HREF = "sk-echo";
+var ECHO_CSS = `
+@media print {
+  [data-sk-echo-launcher], [data-sk-echo-panel] { display: none !important; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-sk-echo-panel] { animation: none !important; }
 }
+`;
 function isLightColor(hex) {
   const num = parseInt(hex.replace("#", ""), 16);
   const r = num >> 16;
@@ -395,7 +402,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const { apiKey } = getApiConfig();
     if (!apiKey) return;
     let cancelled = false;
-    chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/api/public/seo/project-info`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((data) => {
+    chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/api/public/seo/project-info`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((data) => {
       if (cancelled || !data?.valid || !data?.project_id) return;
       setResolvedProjectId(data.project_id);
     }).catch(() => {
@@ -409,7 +416,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return;
     try {
-      const response = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 });
+      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 });
       if (response.ok) {
         const { data } = await response.json();
         setWidgetConfig(data ?? null);
@@ -425,7 +432,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return null;
     try {
-      const response = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
+      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
       if (response.ok) {
         const { data } = await response.json();
         setAvailability(data);
@@ -442,7 +449,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return null;
     try {
-      const response = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/session`, {
+      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/session`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -503,7 +510,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         pageUrl: typeof window !== "undefined" ? window.location.href : void 0,
         ...siteContext ? { siteContext } : {}
       };
-      const res = await chunk5ABTBPPK_js.sonorFetch(url, {
+      const res = await chunkVNJTU6LG_js.sonorFetch(url, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -614,7 +621,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         if (currentSessionId) {
           const apiKey = ensureApiKey();
           if (apiKey) {
-            chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
+            chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
               const data = json?.data ?? json;
               if (Array.isArray(data) && data.length) {
                 setMessages((prev) => {
@@ -677,7 +684,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         try {
           const apiKey = ensureApiKey();
           if (!apiKey) return;
-          const response = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
+          const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
           if (response.ok) {
             const { data } = await response.json();
             setMessages((prev) => {
@@ -830,7 +837,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       form.append("file", file);
       form.append("sessionId", sessionId);
       form.append("visitorId", visitorId);
-      const res = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/upload`, {
+      const res = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/upload`, {
         method: "POST",
         body: form
       }, { apiKey, retries: 0 });
@@ -977,7 +984,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (!apiKey) return;
     setCheckingHandoff(true);
     try {
-      const res = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/handoff`, {
+      const res = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/handoff`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ sessionId })
@@ -1016,7 +1023,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       setIsLoading(true);
       setOfflineError(null);
       try {
-        const response = await chunk5ABTBPPK_js.sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
+        const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -1065,11 +1072,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
     return { dot: "var(--sk-text-tertiary, #9ca3af)", text: "We'll respond soon" };
   })();
+  const launcherIcon = isLightColor(primaryColor) ? "#1a1a1a" : "white";
   const ChatButton = /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
       "data-sk-echo-launcher": true,
+      className: "sk-glass sk-glass--brand",
       onClick: handleToggle,
       "aria-label": isOpen ? "Close chat" : "Open chat",
       style: {
@@ -1078,37 +1087,34 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         width: "60px",
         height: "60px",
         borderRadius: "50%",
-        backgroundColor: primaryColor,
-        border: "none",
+        ["--sk-glass-brand"]: primaryColor,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         cursor: "pointer",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
-        transition: "transform 0.2s, box-shadow 0.2s",
+        transition: "transform 0.2s, bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1)",
         zIndex: placement.zIndex.launcher
       },
       onMouseEnter: (e) => {
         e.currentTarget.style.transform = "scale(1.05)";
-        e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.3)";
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.transform = "scale(1)";
-        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.25)";
       },
-      children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
     }
   );
   const Header = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
-        padding: "16px 20px",
-        background: `linear-gradient(135deg, ${primaryColor}, ${adjustColor(primaryColor, -25)})`,
-        color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+        padding: "16px 18px 14px",
+        background: `linear-gradient(180deg, color-mix(in srgb, ${primaryColor} 16%, transparent), transparent)`,
+        borderBottom: "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 8%, transparent)",
+        color: "var(--sk-text-primary, #111827)",
         display: "flex",
         alignItems: "center",
         gap: 12
@@ -1121,7 +1127,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               width: 40,
               height: 40,
               borderRadius: "50%",
-              backgroundColor: "rgba(255,255,255,0.2)",
+              backgroundColor: primaryColor,
+              color: launcherIcon,
+              boxShadow: "inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12)",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1133,12 +1141,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: showOfflineForm ? offlineHeading : businessName }),
-          statusLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 13, opacity: 0.9, display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
+          statusLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 13, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
             statusLabel.dot && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: statusLabel.dot, flexShrink: 0 } }),
             statusLabel.text
           ] })
         ] }),
-        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, opacity: 0.7, display: "flex", alignItems: "center", gap: 4 }, children: [
+        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 4 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1s infinite ease-in-out" }, children: "\u25CF" }),
           "Connecting"
         ] })
@@ -1219,7 +1227,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         value: offlineForm[field.name],
         onChange: (e) => setOfflineForm((prev) => ({ ...prev, [field.name]: e.target.value })),
         required: field.required,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 14, outline: "none", boxSizing: "border-box" },
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 16, outline: "none", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
         onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
@@ -1232,7 +1240,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
         required: true,
         rows: 4,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 14, outline: "none", resize: "vertical", boxSizing: "border-box" },
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 16, outline: "none", resize: "vertical", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
         onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
@@ -1332,7 +1340,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "var(--sk-bg-elevated, #f9fafb)" },
+        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "transparent" },
         children: [
           messages.map((message) => {
             const isAssistant = message.role === "assistant" || message.role === "agent";
@@ -1342,17 +1350,19 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                 style: {
                   maxWidth: "80%",
                   padding: message.role === "system" ? "8px 12px" : isAssistant ? "12px 16px" : "10px 14px",
-                  borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
-                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "var(--sk-border, #e5e7eb)" : "var(--sk-bg, #ffffff)",
+                  borderRadius: message.role === "user" ? "18px 18px 6px 18px" : message.role === "system" ? "10px" : "18px 18px 18px 6px",
+                  // Bubbles on glass stay near-opaque: the glass behind them
+                  // is for depth, never for the text to read against.
+                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "color-mix(in srgb, var(--sk-text-primary, #111827) 7%, transparent)" : BUBBLE_BG,
                   color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
-                  boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
+                  border: message.role === "user" || message.role === "system" ? "none" : HAIRLINE,
+                  boxShadow: message.role === "system" ? "none" : message.role === "user" ? "inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), 0 1px 2px rgba(0,0,0,0.10)" : "0 1px 2px rgba(0,0,0,0.06)",
                   fontSize: message.role === "system" ? 13 : 14,
                   fontStyle: message.role === "system" ? "italic" : "normal",
                   lineHeight: isAssistant ? 1.6 : 1.5,
                   whiteSpace: isAssistant ? "normal" : "pre-wrap",
                   wordBreak: "break-word",
-                  textAlign: isAssistant ? "left" : void 0,
-                  borderLeft: isAssistant ? `3px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}` : void 0
+                  textAlign: isAssistant ? "left" : void 0
                 },
                 children: [
                   message.agentName && message.role === "agent" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
@@ -1479,9 +1489,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             {
               style: {
                 padding: "10px 14px",
-                borderRadius: "16px 16px 16px 4px",
-                backgroundColor: "var(--sk-bg, #ffffff)",
-                boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
+                borderRadius: "18px 18px 18px 6px",
+                backgroundColor: BUBBLE_BG,
+                border: HAIRLINE,
+                boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
                 display: "flex",
                 gap: 4,
                 color: "var(--sk-text-tertiary, #9ca3af)"
@@ -1501,7 +1512,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "var(--sk-error, #dc2626)" }, children: "Failed to send" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--sk-error, #dc2626)", background: "var(--sk-bg, #fff)", color: "var(--sk-error, #dc2626)", fontSize: 12, cursor: "pointer" }, children: "Retry" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid var(--sk-border, #e5e7eb)", backgroundColor: "var(--sk-bg, #ffffff)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: "10px 12px 12px", backgroundColor: "transparent" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1517,15 +1528,20 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           disabled: isLoading,
           style: {
             flex: 1,
-            padding: "10px 14px",
+            minWidth: 0,
+            padding: "10px 16px",
             borderRadius: 24,
-            border: "1px solid var(--sk-border, #e5e7eb)",
-            fontSize: 14,
+            border: HAIRLINE,
+            backgroundColor: BUBBLE_BG,
+            color: "var(--sk-text-primary, #111827)",
+            // 16px: iOS Safari zooms the page into any focused field under 16px.
+            fontSize: 16,
             outline: "none",
+            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.04)",
             transition: "border-color 0.2s"
           },
           onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-          onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
+          onBlur: (e) => e.currentTarget.style.borderColor = ""
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1555,33 +1571,35 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const ChatPopup = isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "data-sk-echo-panel": true,
+      className: "sk-glass sk-glass--panel",
       style: {
         position: "fixed",
         ...placement.popup,
         width: "380px",
         maxWidth: "calc(100vw - 40px)",
         height: "520px",
-        backgroundColor: "var(--sk-bg, #ffffff)",
-        borderRadius: "16px",
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        color: "var(--sk-text-primary, #111827)",
+        borderRadius: "24px",
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
         zIndex: placement.zIndex.popup,
-        animation: "chatSlideUp 0.3s ease-out"
+        transformOrigin: position === "bottom-left" ? "bottom left" : "bottom right",
+        animation: "chatGlassIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.05)"
       },
       children: [
         Header,
         checkingAvailability || checkingHandoff ? CheckingScreen : showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
-        showPoweredBy && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "var(--sk-bg, #ffffff)", borderTop: "1px solid var(--sk-bg-elevated, #f3f4f6)" }, children: [
+        showPoweredBy && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0 0 8px", textAlign: "center", fontSize: 11, color: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "transparent" }, children: [
           "Powered by",
           " ",
           /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://sonor.io", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--sk-text-secondary, #6b7280)", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        @keyframes chatSlideUp {
-          from { opacity: 0; transform: translateY(20px); }
-          to { opacity: 1; transform: translateY(0); }
+        @keyframes chatGlassIn {
+          from { opacity: 0; transform: translateY(12px) scale(0.94); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
         }
         @keyframes chatDot {
           0%, 80%, 100% { opacity: 0.3; }
@@ -1608,11 +1626,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkNBOBOYMT_js.GlassStyles, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { href: ECHO_STYLE_HREF, precedence: "default", children: ECHO_CSS }),
     ChatPopup,
     ChatButton
   ] });
 }
 
 exports.ChatWidget = ChatWidget;
-//# sourceMappingURL=chunk-LZPICBND.js.map
-//# sourceMappingURL=chunk-LZPICBND.js.map
+//# sourceMappingURL=chunk-QYRJ4IQD.js.map
+//# sourceMappingURL=chunk-QYRJ4IQD.js.map