@sevenfold/setto-client 0.24.3 → 0.24.5

package/dist/setto-client.js

@@ -22054,13 +22054,6 @@ function norwegian(locale) {
 function intro(locale, name) {
   return norwegian(locale) ? `Hei! Jeg er Barista, ${name ? `${name}s` : "nettstedets"} AI-assistent. Jeg svarer ut fra det teamet har delt her, og hjelper deg videre til dem når det trengs.` : `Hello! I’m Barista, the AI assistant for ${name ?? "this website"}. I answer from what the team has shared here and help you reach them when needed.`;
 }
-function contactTeam() {
-  const link = document.querySelector(
-    'a[href*="kontakt" i], a[href*="contact" i], a[href^="mailto:"]'
-  );
-  if (link) link.click();
-  else window.location.hash = "kontakt";
-}
 function validColor(value, fallback) {
   return value && (/^#[0-9a-f]{3,8}$/i.test(value) || /^rgba?\(/i.test(value)) ? value : fallback;
 }
@@ -22132,6 +22125,18 @@ function BaristaIcon() {
     }
   ) });
 }
+function PersonIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 12.25a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5ZM4.75 20.25c.55-3.35 3.3-5.5 7.25-5.5s6.7 2.15 7.25 5.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round"
+    }
+  ) });
+}
 function SiteChatComposer({
   value,
   onChange,
@@ -22161,7 +22166,11 @@ function SiteChatComposer({
     textarea.style.height = `${height}px`;
   }, [value]);
   useEffect(() => {
-    if (!busy) textareaRef.current?.focus();
+    if (busy || document.visibilityState !== "visible") return;
+    const textarea = textareaRef.current;
+    if (!textarea || document.activeElement === textarea) return;
+    const frame = window.requestAnimationFrame(() => textarea.focus({ preventScroll: true }));
+    return () => window.cancelAnimationFrame(frame);
   }, [busy]);
   function send() {
     if (!value.trim() && attachments.length === 0) return;
@@ -22185,7 +22194,9 @@ function SiteChatComposer({
       className: `setto-chat__composer${open ? " is-open" : ""}`,
       onSubmit: handleSubmit,
       onPointerDown: (event) => {
-        if (event.target === event.currentTarget) textareaRef.current?.focus();
+        if (event.target === event.currentTarget) {
+          textareaRef.current?.focus({ preventScroll: true });
+        }
       },
       children: [
         attachments.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "setto-chat__attachments", children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs("li", { children: [
@@ -22260,7 +22271,7 @@ function SiteChatComposer({
     }
   );
 }
-function useChatViewport(active, logRef) {
+function useChatViewport(active, logRef, pinToBottomRef, programmaticScrollRef) {
   useEffect(() => {
     if (!active) return;
     const root = document.documentElement;
@@ -22291,10 +22302,26 @@ function useChatViewport(active, logRef) {
       Math.round(window.innerHeight),
       Math.round((visualViewport?.height ?? window.innerHeight) + (visualViewport?.offsetTop ?? 0))
     );
+    let viewportHeight = -1;
+    let viewportTop = -1;
+    let viewportWidth = -1;
+    let scrollFrame = 0;
+    let releaseScrollFrame = 0;
+    const log = logRef.current;
+    const updatePinState = () => {
+      if (programmaticScrollRef.current) return;
+      if (!log) return;
+      pinToBottomRef.current = log.scrollHeight - log.scrollTop - log.clientHeight <= 96;
+    };
     const update = () => {
       const height = Math.round(visualViewport?.height ?? window.innerHeight);
       const top = Math.round(visualViewport?.offsetTop ?? 0);
       const width = Math.round(visualViewport?.width ?? window.innerWidth);
+      if (height < 1 || width < 1) return;
+      if (height === viewportHeight && top === viewportTop && width === viewportWidth) return;
+      viewportHeight = height;
+      viewportTop = top;
+      viewportWidth = width;
       const nextLayoutHeight = Math.max(
         Math.round(root.clientHeight),
         Math.round(window.innerHeight),
@@ -22309,13 +22336,19 @@ function useChatViewport(active, logRef) {
       root.style.setProperty("--setto-chat-height", `${height}px`);
       root.style.setProperty("--setto-chat-top", `${top}px`);
       root.style.setProperty("--setto-chat-layout-height", `${layoutHeight}px`);
-      if (window.scrollY !== 0) window.scrollTo(0, 0);
-      window.requestAnimationFrame(() => {
-        const log = logRef.current;
-        if (log) log.scrollTop = log.scrollHeight;
+      window.cancelAnimationFrame(scrollFrame);
+      scrollFrame = window.requestAnimationFrame(() => {
+        if (!log || !pinToBottomRef.current) return;
+        programmaticScrollRef.current = true;
+        log.scrollTop = log.scrollHeight;
+        window.cancelAnimationFrame(releaseScrollFrame);
+        releaseScrollFrame = window.requestAnimationFrame(() => {
+          programmaticScrollRef.current = false;
+        });
       });
     };
     update();
+    log?.addEventListener("scroll", updatePinState, { passive: true });
     visualViewport?.addEventListener("resize", update);
     visualViewport?.addEventListener("scroll", update);
     window.addEventListener("orientationchange", update);
@@ -22323,6 +22356,10 @@ function useChatViewport(active, logRef) {
       visualViewport?.removeEventListener("resize", update);
       visualViewport?.removeEventListener("scroll", update);
       window.removeEventListener("orientationchange", update);
+      log?.removeEventListener("scroll", updatePinState);
+      window.cancelAnimationFrame(scrollFrame);
+      window.cancelAnimationFrame(releaseScrollFrame);
+      programmaticScrollRef.current = false;
       root.style.removeProperty("--setto-chat-height");
       root.style.removeProperty("--setto-chat-top");
       root.style.removeProperty("--setto-chat-layout-height");
@@ -22334,9 +22371,9 @@ function useChatViewport(active, logRef) {
       body.style.right = previous.bodyRight;
       body.style.width = previous.bodyWidth;
       body.style.overflow = previous.bodyOverflow;
-      window.scrollTo(0, savedScrollY);
+      window.scrollTo({ top: savedScrollY, left: 0, behavior: "auto" });
     };
-  }, [active, logRef]);
+  }, [active, logRef, pinToBottomRef, programmaticScrollRef]);
 }
 function SettoChat() {
   const { config } = useSetto();
@@ -22357,23 +22394,16 @@ function SettoChat() {
     humanAvailable: false,
     avatarUrl: null
   });
-  const [leadOpen, setLeadOpen] = useState(false);
-  const [leadStatus, setLeadStatus] = useState("idle");
-  const [lead, setLead] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    interest: "",
-    consent: false
-  });
   const conversationId = useRef(null);
   const visitor = useRef(null);
   const logRef = useRef(null);
+  const pinToBottomRef = useRef(true);
+  const programmaticScrollRef = useRef(false);
   const filesRef = useRef([]);
   const formId = useId();
   const palette = useMemo(() => chatPalette(config.brandColors), [config.brandColors]);
   useChatStyles();
-  useChatViewport(mounted, logRef);
+  useChatViewport(mounted, logRef, pinToBottomRef, programmaticScrollRef);
   const locale = i18n.language || "no";
   const isNo = norwegian(locale);
   const siteName = settings?.displayName?.trim() || config.displayName?.trim() || null;
@@ -22388,19 +22418,6 @@ function SettoChat() {
     sending: "Svarer …",
     attach: "Legg ved bilde",
     remove: "Fjern",
-    contact: "Kontakt teamet",
-    followUp: "Be om oppfølging",
-    followUpTitle: "La teamet følge opp",
-    followUpDetail: "Legg igjen kontaktinformasjon hvis du vil at teamet skal følge opp denne samtalen.",
-    name: "Navn",
-    email: "E-post",
-    phone: "Telefon",
-    interest: "Hva vil du ha hjelp med?",
-    consent: "Ja, teamet kan bruke opplysningene mine til å følge opp denne henvendelsen.",
-    leadSend: "Send forespørsel",
-    leadSent: "Takk — forespørselen er sendt til teamet.",
-    leadFailed: "Kunne ikke lagre forespørselen. Prøv igjen eller kontakt teamet direkte.",
-    leadConversation: "Still et spørsmål først, så kan vi knytte oppfølgingen til samtalen.",
     failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte.",
     image: "Bilde",
     team: "Teamet",
@@ -22416,19 +22433,6 @@ function SettoChat() {
     sending: "Replying …",
     attach: "Attach image",
     remove: "Remove",
-    contact: "Contact the team",
-    followUp: "Ask for follow-up",
-    followUpTitle: "Let the team follow up",
-    followUpDetail: "Leave contact details if you want the team to follow up on this conversation.",
-    name: "Name",
-    email: "Email",
-    phone: "Phone",
-    interest: "What would you like help with?",
-    consent: "Yes, the team may use my details to follow up on this enquiry.",
-    leadSend: "Send request",
-    leadSent: "Thanks — your request has been sent to the team.",
-    leadFailed: "We could not save your request. Please try again or contact the team directly.",
-    leadConversation: "Ask a question first so we can link the follow-up to this conversation.",
     failed: "I cannot reply right now. Please contact the team directly.",
     image: "Image",
     team: "The team",
@@ -22465,8 +22469,8 @@ function SettoChat() {
       if (!response.ok) return;
       const next = await response.json();
       conversationId.current = next.conversationId;
+      pinToBottomRef.current = true;
       setMessages(next.messages);
-      setLeadOpen(false);
       setDrawer(false);
     } finally {
       setLoadingConversation(false);
@@ -22511,10 +22515,19 @@ function SettoChat() {
     });
   }, [mounted, settings, locale]);
   useEffect(() => {
-    if (!mounted) return;
+    if (!mounted || !pinToBottomRef.current) return;
     const log = logRef.current;
-    if (log) log.scrollTo({ top: log.scrollHeight, behavior: sending ? "auto" : "smooth" });
-  }, [messages, mounted, sending, leadOpen]);
+    if (!log) return;
+    programmaticScrollRef.current = true;
+    log.scrollTo({ top: log.scrollHeight, behavior: sending ? "auto" : "smooth" });
+    const timer = window.setTimeout(() => {
+      programmaticScrollRef.current = false;
+    }, sending ? 50 : 500);
+    return () => {
+      window.clearTimeout(timer);
+      programmaticScrollRef.current = false;
+    };
+  }, [messages, mounted, sending]);
   useEffect(() => {
     filesRef.current = files;
   }, [files]);
@@ -22562,6 +22575,7 @@ function SettoChat() {
   }, [mounted]);
   if (!settings || window.location.pathname.startsWith("/setto")) return null;
   function show() {
+    pinToBottomRef.current = true;
     setMounted(true);
     window.requestAnimationFrame(() => setVisible(true));
     ensureVisitor();
@@ -22586,7 +22600,6 @@ function SettoChat() {
     setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0) }]);
     setDraft("");
     setQueued(false);
-    setLeadOpen(false);
     setDrawer(false);
     clearPendingFiles();
   }
@@ -22616,6 +22629,7 @@ function SettoChat() {
     const content = draft.trim();
     const turnFiles = files;
     if (!content && turnFiles.length === 0) return;
+    pinToBottomRef.current = true;
     setDraft("");
     setFiles([]);
     setSending(true);
@@ -22693,36 +22707,6 @@ function SettoChat() {
       setSending(false);
     }
   }
-  async function submitLead(event) {
-    event.preventDefault();
-    if (leadStatus === "sending" || !conversationId.current || !visitor.current) {
-      setLeadStatus("failed");
-      return;
-    }
-    setLeadStatus("sending");
-    try {
-      const response = await fetch(
-        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json", Accept: "application/json" },
-          body: JSON.stringify({
-            conversationId: conversationId.current,
-            visitorId: visitor.current,
-            consent: lead.consent,
-            name: lead.name.trim() || void 0,
-            email: lead.email.trim() || void 0,
-            phone: lead.phone.trim() || void 0,
-            interest: lead.interest.trim() || void 0
-          })
-        }
-      );
-      if (!response.ok) throw new Error("lead_failed");
-      setLeadStatus("sent");
-    } catch {
-      setLeadStatus("failed");
-    }
-  }
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -22811,128 +22795,47 @@ function SettoChat() {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "setto-chat__body", children: [
-                  /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: "setto-chat__log",
                       ref: logRef,
                       "aria-live": "polite",
                       "aria-busy": loadingConversation,
-                      children: [
-                        /* @__PURE__ */ jsx("div", { className: "setto-chat__message-list", children: messages.map((item, index) => /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: `setto-chat__message setto-chat__message--${item.role}`,
-                            children: [
-                              item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: labels.team }) : null,
-                              /* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
-                              item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
-                                "a",
-                                {
-                                  className: "setto-chat__image",
-                                  href: attachment.url,
-                                  target: "_blank",
-                                  rel: "noreferrer",
-                                  children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
-                                },
-                                attachment.id
-                              ))
-                            ]
-                          },
-                          item.id ?? `${item.role}-${index}`
-                        )) }),
-                        /* @__PURE__ */ jsxs("div", { className: "setto-chat__actions", children: [
-                          /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
-                            labels.contact,
-                            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => {
-                                setLeadOpen((value) => !value);
-                                setLeadStatus("idle");
-                              },
-                              "aria-expanded": leadOpen,
-                              children: labels.followUp
-                            }
-                          )
-                        ] }),
-                        leadOpen ? /* @__PURE__ */ jsxs("form", { className: "setto-chat__lead", onSubmit: submitLead, children: [
-                          /* @__PURE__ */ jsx("strong", { children: labels.followUpTitle }),
-                          /* @__PURE__ */ jsx("p", { children: labels.followUpDetail }),
-                          /* @__PURE__ */ jsxs("div", { className: "setto-chat__lead-grid", children: [
-                            /* @__PURE__ */ jsxs("label", { children: [
-                              labels.name,
-                              /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  value: lead.name,
-                                  maxLength: 160,
-                                  onChange: (event) => setLead((current) => ({ ...current, name: event.target.value }))
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsxs("label", { children: [
-                              labels.email,
-                              /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  type: "email",
-                                  value: lead.email,
-                                  maxLength: 320,
-                                  onChange: (event) => setLead((current) => ({ ...current, email: event.target.value }))
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsxs("label", { children: [
-                              labels.phone,
-                              /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  type: "tel",
-                                  value: lead.phone,
-                                  maxLength: 64,
-                                  onChange: (event) => setLead((current) => ({ ...current, phone: event.target.value }))
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsxs("label", { children: [
-                              labels.interest,
-                              /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  value: lead.interest,
-                                  maxLength: 500,
-                                  onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value }))
-                                }
-                              )
-                            ] })
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
+                      children: /* @__PURE__ */ jsx("div", { className: "setto-chat__message-list", children: messages.map((item, index) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: `setto-chat__message setto-chat__message--${item.role}`,
+                          children: [
+                            item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx(
+                              "span",
                               {
-                                type: "checkbox",
-                                checked: lead.consent,
-                                onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked }))
+                                className: `setto-chat__avatar setto-chat__avatar--${item.role}`,
+                                "aria-hidden": "true",
+                                children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(BaristaIcon, {})
                               }
-                            ),
-                            labels.consent
-                          ] }),
-                          leadStatus === "sent" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-success", children: labels.leadSent }) : null,
-                          leadStatus === "failed" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-error", children: conversationId.current ? labels.leadFailed : labels.leadConversation }) : null,
-                          leadStatus !== "sent" ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "submit",
-                              disabled: leadStatus === "sending" || !lead.consent || !lead.email.trim() && !lead.phone.trim(),
-                              children: leadStatus === "sending" ? labels.sending : labels.leadSend
-                            }
-                          ) : null
-                        ] }) : null
-                      ]
+                            ) : null,
+                            /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
+                              item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? labels.team : "Barista" }) : null,
+                              /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-bubble", children: [
+                                /* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
+                                item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
+                                  "a",
+                                  {
+                                    className: "setto-chat__image",
+                                    href: attachment.url,
+                                    target: "_blank",
+                                    rel: "noreferrer",
+                                    children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
+                                  },
+                                  attachment.id
+                                ))
+                              ] })
+                            ] })
+                          ]
+                        },
+                        item.id ?? `${item.role}-${index}`
+                      )) })
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-shell", children: [
@@ -22994,12 +22897,11 @@ function useChatStyles() {
     style.textContent = `
 .setto-chat{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:2147483000;color:var(--setto-chat-ink);font-family:"Archivo Variable",Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.setto-chat *,.setto-chat *::before,.setto-chat *::after{box-sizing:border-box}.setto-chat button,.setto-chat input,.setto-chat textarea{font:inherit}.setto-chat--mounted{top:0;right:auto;bottom:auto;left:0;width:100vw;height:var(--setto-chat-layout-height,100lvh);overflow:hidden;background:var(--setto-chat-canvas);opacity:0;transition:opacity ${CLOSE_MS}ms ease}.setto-chat--visible{opacity:1}.setto-chat__shell{position:absolute;top:var(--setto-chat-top,0);left:0;width:100%;height:var(--setto-chat-height,100svh);display:flex;overflow:hidden;background:var(--setto-chat-canvas);opacity:0;transform:translateY(12px) scale(.994);transform-origin:center bottom;transition:opacity ${CLOSE_MS}ms ease,transform ${CLOSE_MS}ms cubic-bezier(.16,1,.3,1)}.setto-chat--visible .setto-chat__shell{opacity:1;transform:none}
 .setto-chat__scrim{position:absolute;inset:0;z-index:45;border:0;background:rgba(33,23,17,.32);opacity:0;pointer-events:none;transition:opacity 220ms ease}.setto-chat__scrim.is-open{opacity:1;pointer-events:auto}.setto-chat__chats{position:relative;z-index:50;width:min(84vw,280px);height:100%;flex:0 0 280px;padding:1rem .85rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.9rem;background:color-mix(in srgb,var(--setto-chat-crema) 32%,var(--setto-chat-canvas));border-right:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);overflow:hidden}.setto-chat__chats-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:34px;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent)}.setto-chat__chats-heading button{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.setto-chat__new{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .55rem;border:0;border-radius:8px;background:transparent;color:var(--setto-chat-ink);font-weight:600;font-size:.9rem;text-align:left;cursor:pointer;transition:background 140ms ease}.setto-chat__new:hover{background:color-mix(in srgb,var(--setto-chat-ink) 5%,transparent)}.setto-chat__chat-list{display:flex;flex-direction:column;gap:.1rem;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin-right:-.85rem;padding-right:.3rem}.setto-chat__chat-list p{margin:.35rem .55rem;font-size:.85rem;line-height:1.5;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent)}.setto-chat__chat-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;padding:.55rem;border:0;border-radius:8px;background:transparent;color:var(--setto-chat-ink);text-align:left;cursor:pointer}.setto-chat__chat-row:hover,.setto-chat__chat-row.is-active{background:color-mix(in srgb,var(--setto-chat-ink) 7.5%,transparent)}.setto-chat__chat-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600}.setto-chat__chat-row time{font-size:.72rem;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent)}
-.setto-chat__main{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:820px;height:100%;margin:0 auto;flex-direction:column;background:var(--setto-chat-canvas)}.setto-chat__header{position:relative;z-index:30;min-height:58px;padding:.35rem .75rem;display:flex;align-items:center;gap:.5rem;flex:0 0 auto;background:transparent;isolation:isolate}.setto-chat__header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--setto-chat-crema) 70%,transparent);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 45%,rgba(0,0,0,.45) 78%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 45%,rgba(0,0,0,.45) 78%,rgba(0,0,0,0) 100%)}.setto-chat__round-button{flex:none;width:46px;height:46px;padding:0;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:50%;background:var(--setto-chat-raised);color:var(--setto-chat-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.setto-chat__round-button:hover{background:var(--setto-chat-crema);border-color:var(--setto-chat-accent);color:var(--setto-chat-accent)}.setto-chat__round-button:active{transform:scale(.96)}.setto-chat__brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}.setto-chat__brand h2{margin:0;color:var(--setto-chat-ink);font-size:1.02rem;font-weight:600;line-height:1.15}.setto-chat__brand p{max-width:100%;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--setto-chat-ink) 56%,transparent);font-size:.78rem;line-height:1.15}
-.setto-chat__body{position:relative;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}.setto-chat__log{display:flex;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding:1.3rem .75rem 8rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.setto-chat__message-list{display:flex;flex-direction:column}.setto-chat__message{display:block;margin-bottom:1.5rem;font-size:16px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;color:color-mix(in srgb,var(--setto-chat-ink) 88%,transparent)}.setto-chat__message--assistant{align-self:stretch;max-width:100%;padding:0;background:transparent}.setto-chat__message--visitor{align-self:flex-end;max-width:85%;margin-bottom:1.25rem;padding:.65rem .95rem;background:var(--setto-chat-crema);color:var(--setto-chat-ink);border:1px solid color-mix(in srgb,var(--setto-chat-ink) 7%,transparent);border-radius:20px 20px 4px 20px;font-size:.95rem;line-height:1.55;box-shadow:0 1px 2px color-mix(in srgb,var(--setto-chat-ink) 6%,transparent)}.setto-chat__message--human{align-self:stretch;max-width:100%;padding-left:.8rem;border-left:2px solid var(--setto-chat-accent)}.setto-chat__message--system{align-self:center;max-width:85%;padding:.25rem .6rem;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__speaker{display:block;margin-bottom:.15rem;color:var(--setto-chat-accent);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.setto-chat__typing{display:inline-block;animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;width:max-content;max-width:100%;margin-top:.65rem;overflow:hidden;border-radius:14px;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent)}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
-.setto-chat__actions{display:flex;flex-wrap:wrap;gap:1.35rem;margin-top:auto;padding:1.2rem 0 .65rem}.setto-chat__actions button{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem 0;border:0;background:transparent;color:var(--setto-chat-accent);font-size:.9rem;font-weight:700;cursor:pointer}.setto-chat__lead{display:grid;gap:.6rem;margin:.5rem 0 1rem;padding:1rem;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:16px;background:color-mix(in srgb,var(--setto-chat-crema) 58%,var(--setto-chat-canvas))}.setto-chat__lead strong{font-size:.95rem}.setto-chat__lead p{margin:0;color:color-mix(in srgb,var(--setto-chat-ink) 65%,transparent);font-size:.8rem;line-height:1.45}.setto-chat__lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.setto-chat__lead label{display:grid;gap:.25rem;font-size:.72rem;font-weight:700}.setto-chat__lead input{min-width:0;padding:.55rem .6rem;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 18%,transparent);border-radius:8px;background:var(--setto-chat-canvas);color:var(--setto-chat-ink);font-size:.85rem}.setto-chat__consent{display:flex!important;align-items:flex-start;gap:.45rem;font-weight:400!important;line-height:1.4}.setto-chat__lead>button{justify-self:start;padding:.55rem .8rem;border:0;border-radius:9px;background:var(--setto-chat-accent);color:var(--setto-chat-raised);font-size:.78rem;font-weight:700;cursor:pointer}.setto-chat__lead>button:disabled{opacity:.4;cursor:default}.setto-chat__lead-success{color:#28633d!important;font-weight:700}.setto-chat__lead-error{color:#a33024!important;font-weight:700}
+.setto-chat__main{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:820px;height:100%;margin:0 auto;flex-direction:column;background:var(--setto-chat-canvas)}.setto-chat__header{position:absolute;inset:0 0 auto;z-index:30;min-height:58px;padding:.35rem .75rem;display:flex;align-items:center;gap:.5rem;background:linear-gradient(to bottom,color-mix(in srgb,var(--setto-chat-crema) 88%,transparent),color-mix(in srgb,var(--setto-chat-crema) 72%,transparent));border-bottom:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);isolation:isolate}.setto-chat__round-button{flex:none;width:46px;height:46px;padding:0;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:50%;background:var(--setto-chat-raised);color:var(--setto-chat-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.setto-chat__round-button:hover{background:var(--setto-chat-crema);border-color:var(--setto-chat-accent);color:var(--setto-chat-accent)}.setto-chat__round-button:active{transform:scale(.96)}.setto-chat__brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}.setto-chat__brand h2{margin:0;color:var(--setto-chat-ink);font-size:1.02rem;font-weight:600;line-height:1.15}.setto-chat__brand p{max-width:100%;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--setto-chat-ink) 56%,transparent);font-size:.78rem;line-height:1.15}
+.setto-chat__body{position:relative;display:flex;flex:1 1 auto;min-height:0;height:100%;flex-direction:column}.setto-chat__log{display:flex;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding:calc(58px + 1.3rem) .75rem 8rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.setto-chat__message-list{display:flex;flex-direction:column}.setto-chat__message{--setto-chat-bubble:color-mix(in srgb,var(--setto-chat-ink) 7%,var(--setto-chat-canvas));display:flex;align-items:flex-end;gap:.55rem;width:100%;margin-bottom:1rem;color:color-mix(in srgb,var(--setto-chat-ink) 92%,transparent);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.setto-chat__message-stack{display:flex;min-width:0;max-width:min(78%,36rem);flex-direction:column;align-items:flex-start}.setto-chat__message-bubble{position:relative;min-width:2.5rem;padding:.58rem .82rem;border-radius:19px 19px 19px 5px;background:var(--setto-chat-bubble);white-space:pre-wrap}.setto-chat__message--assistant .setto-chat__message-bubble::before,.setto-chat__message--human .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;left:-7px;bottom:0;width:16px;height:17px;border-bottom-right-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--assistant .setto-chat__message-bubble::after,.setto-chat__message--human .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;left:-10px;bottom:0;width:10px;height:18px;border-bottom-right-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message-copy,.setto-chat__image{position:relative;z-index:2}.setto-chat__message--visitor{--setto-chat-bubble:#0a84ff;justify-content:flex-end;color:#fff}.setto-chat__message--visitor .setto-chat__message-stack{align-items:flex-end}.setto-chat__message--visitor .setto-chat__message-bubble{border-radius:19px 19px 5px 19px}.setto-chat__message--visitor .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;right:-7px;bottom:0;width:16px;height:17px;border-bottom-left-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--visitor .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;right:-10px;bottom:0;width:10px;height:18px;border-bottom-left-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message--system{justify-content:center;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__message--system .setto-chat__message-stack{max-width:85%;align-items:center}.setto-chat__message--system .setto-chat__message-bubble{padding:.25rem .6rem;background:transparent}.setto-chat__avatar{position:relative;z-index:3;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-bottom:1px;overflow:hidden;border:2px solid var(--setto-chat-canvas);border-radius:50%;background:var(--setto-chat-crema);color:var(--setto-chat-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--setto-chat-ink) 14%,transparent)}.setto-chat__avatar--assistant{background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__avatar img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__speaker{display:block;margin:0 0 .2rem .4rem;color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent);font-size:.69rem;font-weight:500;line-height:1.2}.setto-chat__typing{display:inline-block;animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;width:max-content;max-width:100%;margin-top:.65rem;overflow:hidden;border-radius:13px}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
 .setto-chat__composer-shell{position:absolute;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr);padding:1.5rem .75rem 0;background:transparent;isolation:isolate}.setto-chat__composer-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--setto-chat-canvas) 82%,transparent) 46%,var(--setto-chat-canvas) 66%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%)}.setto-chat__composer{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;width:100%;min-width:0;margin:0;padding:.35rem .4rem;border:2px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent);border-radius:24px;background:var(--setto-chat-canvas);box-shadow:0 8px 24px -16px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent);transition:padding 220ms cubic-bezier(.16,1,.3,1),border-color 200ms ease,box-shadow 360ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open{padding:.55rem .5rem}.setto-chat__composer:focus-within{border-color:var(--setto-chat-accent)}.setto-chat__composer textarea,.setto-chat__composer textarea:hover,.setto-chat__composer textarea:focus,.setto-chat__composer textarea:focus-visible{width:100%;min-height:36px;max-height:200px;padding:.45rem .25rem;resize:none;-webkit-appearance:none!important;appearance:none!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--setto-chat-ink);font-family:"Archivo Variable",Archivo,system-ui,sans-serif;font-size:16px;line-height:1.35;transition:min-height 220ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open textarea{min-height:40px}.setto-chat__composer textarea::placeholder{color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent)}.setto-chat__composer-tools{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0}.setto-chat__attach{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,color 160ms ease}.setto-chat__attach:hover:not(:disabled){background:color-mix(in srgb,var(--setto-chat-ink) 6%,transparent);color:var(--setto-chat-ink)}.setto-chat__attach:disabled{opacity:.4;cursor:default}.setto-chat__send{flex:none;width:36px;height:36px;margin-left:auto;padding:0;border:0;border-radius:50%;background:var(--setto-chat-accent);color:var(--setto-chat-raised);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 360ms cubic-bezier(.16,1,.3,1),box-shadow 360ms cubic-bezier(.16,1,.3,1),background 200ms ease,opacity 200ms ease}.setto-chat__send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--setto-chat-ink) 45%,transparent)}.setto-chat__send:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px -8px color-mix(in srgb,var(--setto-chat-ink) 40%,transparent);transition-duration:90ms}.setto-chat__send:disabled{opacity:.35;cursor:default}.setto-chat__send.is-queued{animation:setto-chat-queued 1.1s ease-in-out infinite}.setto-chat__attachments{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.15rem .15rem 0}.setto-chat__attachments li{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);background:var(--setto-chat-crema)}.setto-chat__attachments img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__attachments button{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--setto-chat-ink) 72%,transparent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.setto-chat__composer-floor{position:relative;z-index:1;width:calc(100% + 1.5rem);height:max(.35rem,env(safe-area-inset-bottom));margin-left:-.75rem;background:var(--setto-chat-canvas)}
 .setto-chat__launcher{width:58px;height:58px;padding:3px;border:1px solid rgba(255,255,255,.54);border-radius:50%;background:color-mix(in srgb,var(--setto-chat-raised) 35%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--setto-chat-ink) 24%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);color:var(--setto-chat-ink);display:grid;place-items:center;cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease}.setto-chat__launcher:hover{transform:translateY(-2px);box-shadow:0 15px 35px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent)}.setto-chat__launcher span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__launcher img{display:block;width:50px;height:50px;border-radius:50%;object-fit:cover}.setto-chat__launcher:focus-visible,.setto-chat button:focus-visible,.setto-chat input:focus-visible{outline:2px solid var(--setto-chat-accent);outline-offset:2px}@keyframes setto-chat-pulse{50%{opacity:.35}}@keyframes setto-chat-queued{50%{opacity:.55}}
-@media(max-width:700px){.setto-chat__chats{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}.setto-chat__lead-grid{grid-template-columns:1fr}.setto-chat__actions{gap:1.1rem}.setto-chat__actions button{font-size:.88rem}}@media(min-width:700px){.setto-chat__header,.setto-chat__log{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-shell{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-floor{width:calc(100% + 2.5rem);margin-left:-1.25rem}.setto-chat__message{font-size:16.5px}}@media(prefers-reduced-motion:reduce){.setto-chat,.setto-chat__shell,.setto-chat__chats,.setto-chat__launcher,.setto-chat__composer,.setto-chat__composer textarea,.setto-chat__send{transition:none!important}.setto-chat__typing,.setto-chat__send.is-queued{animation:none}}
+@media(max-width:700px){.setto-chat__chats{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}}@media(min-width:700px){.setto-chat__header,.setto-chat__log{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-shell{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-floor{width:calc(100% + 2.5rem);margin-left:-1.25rem}.setto-chat__message{font-size:16.5px}}@media(prefers-reduced-motion:reduce){.setto-chat,.setto-chat__shell,.setto-chat__chats,.setto-chat__launcher,.setto-chat__composer,.setto-chat__composer textarea,.setto-chat__send{transition:none!important}.setto-chat__typing,.setto-chat__send.is-queued{animation:none}}
 `;
     document.head.appendChild(style);
     return () => style.remove();