@sevenfold/setto-client 0.23.0 → 0.24.0

package/dist/setto-client.js

@@ -21059,7 +21059,8 @@ async function asError(res, fallback) {
   }
 }
 function createApi(args) {
-  const { apiUrl, supabase } = args;
+  const apiUrl = args.apiUrl.replace(/\/+$/, "");
+  const { supabase } = args;
   const request = async (path, init = {}, label = `${init.method ?? "GET"} ${path}`) => {
     const token = await bearer(supabase);
     const res = await fetch(`${apiUrl}${path}`, {
@@ -22033,6 +22034,7 @@ function EditModeShell({ children, themeStore, active }) {
   ] });
 }
 const VISITOR_KEY = "setto-chat-visitor";
+const CLOSE_MS = 210;
 function visitorId() {
   try {
     const stored = window.localStorage.getItem(VISITOR_KEY);
@@ -22051,170 +22053,189 @@ 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:"]'
-  );
+  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) || /^rgb/.test(value)) ? value : fallback;
+}
+function chatPalette(colors) {
+  const values = colors?.map((color) => color.value) ?? [];
+  const ink = values.find((value) => /^#(?:[0-2][0-9a-f]){3}$/i.test(value));
+  return { "--setto-chat-pale": validColor(values[0], "#F2EBDF"), "--setto-chat-paper": validColor(values[1], "#FAF6EE"), "--setto-chat-ink": validColor(ink, "#211711"), "--setto-chat-accent": validColor(values[values.length - 2] ?? values.at(-1), "#C4502A") };
+}
 function SettoChat() {
   const { config } = useSetto();
   const { i18n } = useTranslation();
   const apiUrl = config.apiUrl.replace(/\/+$/, "");
   const [settings, setSettings] = useState(null);
-  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [drawer, setDrawer] = useState(false);
   const [messages, setMessages] = useState([]);
+  const [conversations, setConversations] = useState([]);
   const [draft, setDraft] = useState("");
+  const [files, setFiles] = useState([]);
   const [sending, setSending] = useState(false);
+  const [loadingConversation, setLoadingConversation] = useState(false);
+  const [availability, setAvailability] = useState({ 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 fileInput = useRef(null);
   const formId = useId();
+  const palette = useMemo(() => chatPalette(config.brandColors), [config.brandColors]);
   useChatStyles();
+  const locale = i18n.language || "no";
+  const isNo = norwegian(locale);
+  const siteName = settings?.displayName?.trim() || config.displayName?.trim() || null;
+  const labels = isNo ? { open: siteName ? `Åpne chat med ${siteName}` : "Åpne chat", close: "Lukk chatten", title: "Spør Barista", chats: "Chats", newChat: "Ny chat", disclosure: "AI-assistent · svarer fra nettstedets godkjente informasjon", placeholder: "Hva vil du spørre om?", send: "Send", sending: "Svarer …", attach: "Legg ved bilde", 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", emptyChats: "Nye samtaler du starter her vises i denne listen." } : { open: siteName ? `Open chat with ${siteName}` : "Open chat", close: "Close chat", title: "Ask Barista", chats: "Chats", newChat: "New chat", disclosure: "AI assistant · answers from this website’s approved information", placeholder: "What would you like to ask?", send: "Send", sending: "Replying …", attach: "Attach image", 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", emptyChats: "New conversations you start here will appear in this list." };
+  const ensureVisitor = () => visitor.current ??= visitorId();
+  const loadChats = async () => {
+    const id = visitor.current;
+    if (!id) return;
+    try {
+      const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/public?${new URLSearchParams({ visitorId: id })}`, { headers: { Accept: "application/json" } });
+      if (response.ok) setConversations((await response.json()).conversations);
+    } catch {
+    }
+  };
+  const loadConversation = async (id) => {
+    const visitorIdValue = ensureVisitor();
+    setLoadingConversation(true);
+    try {
+      const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(id)}/public?${new URLSearchParams({ visitorId: visitorIdValue })}`, { headers: { Accept: "application/json" } });
+      if (!response.ok) return;
+      const next = await response.json();
+      conversationId.current = next.conversationId;
+      setMessages(next.messages);
+      setLeadOpen(false);
+      setDrawer(false);
+    } finally {
+      setLoadingConversation(false);
+    }
+  };
   useEffect(() => {
     if (window.location.pathname.startsWith("/setto")) return;
     let cancelled = false;
-    fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/settings/public`, {
-      headers: { Accept: "application/json" }
-    }).then(async (response) => response.ok ? await response.json() : null).then((next) => {
+    fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/settings/public`, { headers: { Accept: "application/json" } }).then(async (response) => response.ok ? await response.json() : null).then((next) => {
       if (!cancelled && next?.enabled) setSettings(next);
-    }).catch(() => {
-    });
+    }).catch(() => void 0);
     return () => {
       cancelled = true;
     };
   }, [apiUrl, config.siteId]);
   useEffect(() => {
-    if (!open || messages.length > 0 || !settings) return;
-    setMessages([{ role: "assistant", content: intro(i18n.language, settings.displayName ?? void 0) }]);
-  }, [open, messages.length, settings, i18n.language]);
+    if (!settings) return;
+    let cancelled = false;
+    const refresh = () => fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/availability/public`, { headers: { Accept: "application/json" } }).then(async (response) => response.ok ? await response.json() : null).then((next) => {
+      if (!cancelled && next) setAvailability(next);
+    }).catch(() => void 0);
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), 3e4);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [apiUrl, config.siteId, settings]);
+  useEffect(() => {
+    if (mounted && messages.length === 0 && settings) setMessages([{ role: "assistant", content: intro(locale, settings.displayName ?? void 0) }]);
+  }, [mounted, messages.length, settings, locale]);
   useEffect(() => {
-    if (open) logRef.current?.scrollTo({ top: logRef.current.scrollHeight });
-  }, [messages, open]);
+    if (mounted) logRef.current?.scrollTo({ top: logRef.current.scrollHeight, behavior: "smooth" });
+  }, [messages, mounted, sending]);
+  useEffect(() => () => files.forEach((image) => URL.revokeObjectURL(image.preview)), [files]);
   useEffect(() => {
-    if (!open || !conversationId.current || !visitor.current || sending) return;
+    if (!mounted || !conversationId.current || !visitor.current || sending) return;
     let cancelled = false;
     const refresh = async () => {
       try {
-        const query = new URLSearchParams({ visitorId: visitor.current });
-        const response = await fetch(
-          `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(conversationId.current)}/public?${query}`,
-          { headers: { Accept: "application/json" } }
-        );
-        if (!response.ok) return;
+        const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(conversationId.current)}/public?${new URLSearchParams({ visitorId: visitor.current })}`, { headers: { Accept: "application/json" } });
+        if (!response.ok || cancelled) return;
         const next = await response.json();
-        if (cancelled) return;
-        const serverMessages = next.messages.map(({ role, content }) => ({ role, content }));
-        setMessages((previous) => {
-          const greeting = previous[0]?.role === "assistant" && !serverMessages.some((message) => message.content === previous[0]?.content) ? [previous[0]] : [];
-          return [...greeting, ...serverMessages];
-        });
+        if (!cancelled) setMessages(next.messages);
       } catch {
       }
     };
-    void refresh();
     const timer = window.setInterval(() => void refresh(), 5e3);
     return () => {
       cancelled = true;
       window.clearInterval(timer);
     };
-  }, [apiUrl, config.siteId, open, sending]);
+  }, [apiUrl, config.siteId, mounted, sending]);
   if (!settings || window.location.pathname.startsWith("/setto")) return null;
-  const locale = i18n.language || "no";
-  const siteName = settings.displayName?.trim() || null;
-  const labels = norwegian(locale) ? {
-    open: siteName ? `Snakk med ${siteName}` : "Snakk med oss",
-    close: "Lukk chatten",
-    title: "Spør Barista",
-    disclosure: "AI-assistent · svarer fra nettstedets godkjente informasjon",
-    placeholder: "Skriv spørsmålet ditt …",
-    send: "Send",
-    sending: "Svarer …",
-    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."
-  } : {
-    open: siteName ? `Chat with ${siteName}` : "Chat with us",
-    close: "Close chat",
-    title: "Ask Barista",
-    disclosure: "AI assistant · answers from this website’s approved information",
-    placeholder: "Write your question …",
-    send: "Send",
-    sending: "Replying …",
-    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."
+  const show = () => {
+    setMounted(true);
+    window.requestAnimationFrame(() => setVisible(true));
+    ensureVisitor();
+    void loadChats();
+  };
+  const hide = () => {
+    setVisible(false);
+    window.setTimeout(() => {
+      setMounted(false);
+      setDrawer(false);
+    }, CLOSE_MS);
+  };
+  const startNew = () => {
+    conversationId.current = null;
+    setMessages([{ role: "assistant", content: intro(locale, settings.displayName ?? void 0) }]);
+    setLeadOpen(false);
+    setDrawer(false);
+    setFiles([]);
   };
   const submit = async (event) => {
     event.preventDefault();
-    const message = draft.trim();
-    if (!message || sending) return;
+    const content = draft.trim();
+    if (!content && !files.length || sending) return;
     setDraft("");
     setSending(true);
-    setMessages((previous) => [...previous, { role: "visitor", content: message }, { role: "assistant", content: "" }]);
-    visitor.current ??= visitorId();
+    const visitorIdValue = ensureVisitor();
     try {
-      const response = await fetch(
-        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json", Accept: "text/plain, application/json" },
-          body: JSON.stringify({
-            conversationId: conversationId.current ?? void 0,
-            visitorId: visitor.current,
-            locale,
-            page: window.location.href,
-            message
-          })
-        }
-      );
+      const uploaded = [];
+      for (const image of files) {
+        const file = image.file;
+        const form = new FormData();
+        form.set("visitorId", visitorIdValue);
+        if (conversationId.current) form.set("conversationId", conversationId.current);
+        form.set("locale", locale);
+        form.set("page", window.location.href);
+        form.set("file", file, file.name);
+        const response2 = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/attachments`, { method: "POST", body: form });
+        if (!response2.ok) throw new Error("image_upload_failed");
+        const body = await response2.json();
+        conversationId.current = body.conversationId;
+        uploaded.push(body.attachment);
+      }
+      setFiles([]);
+      setMessages((previous) => [...previous, { role: "visitor", content: content || `[${labels.image}]`, attachments: uploaded }, { role: "assistant", content: "" }]);
+      const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`, { method: "POST", headers: { "Content-Type": "application/json", Accept: "text/plain, application/json" }, body: JSON.stringify({ conversationId: conversationId.current ?? void 0, visitorId: visitorIdValue, locale, page: window.location.href, message: content || void 0, attachmentIds: uploaded.map((attachment) => attachment.id) }) });
       const headerConversation = response.headers.get("X-Setto-Conversation");
       if (headerConversation) conversationId.current = headerConversation;
-      const contentType = response.headers.get("content-type") ?? "";
       if (!response.ok) throw new Error(`chat_failed_${response.status}`);
-      if (contentType.includes("application/json")) {
+      if ((response.headers.get("content-type") ?? "").includes("application/json")) {
         const body = await response.json();
         if (body.conversationId) conversationId.current = body.conversationId;
         setMessages((previous) => replaceLastAssistant(previous, body.answer || labels.failed));
-        return;
-      }
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error("chat_missing_stream");
-      const decoder = new TextDecoder();
-      let answer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        answer += decoder.decode(value, { stream: true });
-        setMessages((previous) => replaceLastAssistant(previous, answer));
+      } else {
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("chat_missing_stream");
+        const decoder = new TextDecoder();
+        let answer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          answer += decoder.decode(value, { stream: true });
+          setMessages((previous) => replaceLastAssistant(previous, answer));
+        }
+        answer += decoder.decode();
+        if (!answer.trim()) setMessages((previous) => replaceLastAssistant(previous, labels.failed));
       }
-      answer += decoder.decode();
-      if (!answer.trim()) setMessages((previous) => replaceLastAssistant(previous, labels.failed));
+      void loadChats();
     } catch {
       setMessages((previous) => replaceLastAssistant(previous, labels.failed));
     } finally {
@@ -22223,120 +22244,122 @@ function SettoChat() {
   };
   const submitLead = async (event) => {
     event.preventDefault();
-    if (leadStatus === "sending") return;
-    if (!conversationId.current || !visitor.current) {
+    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_${response.status}`);
+      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", { className: `setto-chat${open ? " setto-chat--open" : ""}`, "aria-label": labels.title, "data-setto-ui": true, children: [
-    open ? /* @__PURE__ */ jsxs("section", { className: "setto-chat__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": `${formId}-title`, children: [
-      /* @__PURE__ */ jsxs("header", { className: "setto-chat__header", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "setto-chat__eyebrow", children: "BARISTA" }),
-          /* @__PURE__ */ jsx("h2", { id: `${formId}-title`, children: labels.title }),
-          /* @__PURE__ */ jsx("p", { children: labels.disclosure })
+  return /* @__PURE__ */ jsxs("aside", { className: `setto-chat${mounted ? " setto-chat--mounted" : ""}${visible ? " setto-chat--visible" : ""}`, style: palette, "aria-label": labels.title, "data-setto-ui": true, children: [
+    mounted ? /* @__PURE__ */ jsxs("section", { className: "setto-chat__shell", role: "dialog", "aria-modal": "true", "aria-labelledby": `${formId}-title`, children: [
+      /* @__PURE__ */ jsxs("nav", { className: `setto-chat__chats${drawer ? " setto-chat__chats--open" : ""}`, "aria-label": labels.chats, children: [
+        /* @__PURE__ */ jsxs("div", { className: "setto-chat__chats-heading", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.chats }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: startNew, "aria-label": labels.newChat, children: "＋" })
         ] }),
-        /* @__PURE__ */ jsx("button", { className: "setto-chat__close", type: "button", onClick: () => setOpen(false), "aria-label": labels.close, children: "×" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "setto-chat__log", ref: logRef, "aria-live": "polite", 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: "Teamet" }) : null,
-        item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" })
-      ] }, `${item.role}-${index}`)) }),
-      /* @__PURE__ */ jsxs("div", { className: "setto-chat__contact", children: [
-        /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
-          labels.contact,
-          " ",
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
+        /* @__PURE__ */ jsxs("button", { className: "setto-chat__new", type: "button", onClick: startNew, children: [
+          "＋ ",
+          labels.newChat
         ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
-          setLeadOpen((value) => !value);
-          setLeadStatus("idle");
-        }, children: labels.followUp })
+        /* @__PURE__ */ jsx("div", { className: "setto-chat__chat-list", children: conversations.length ? conversations.map((chat) => /* @__PURE__ */ jsxs("button", { className: `setto-chat__chat-row${conversationId.current === chat.id ? " is-active" : ""}`, type: "button", onClick: () => void loadConversation(chat.id), children: [
+          /* @__PURE__ */ jsx("span", { children: chat.preview }),
+          /* @__PURE__ */ jsx("time", { children: new Date(chat.lastActivityAt).toLocaleDateString(isNo ? "nb-NO" : "en-GB", { day: "numeric", month: "short" }) })
+        ] }, chat.id)) : /* @__PURE__ */ jsx("p", { children: labels.emptyChats }) })
       ] }),
-      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("main", { className: "setto-chat__main", children: [
+        /* @__PURE__ */ jsxs("header", { className: "setto-chat__header", children: [
+          /* @__PURE__ */ jsx("button", { className: "setto-chat__round-button", type: "button", onClick: () => setDrawer((current) => !current), "aria-label": labels.chats, "aria-expanded": drawer, children: "☰" }),
+          /* @__PURE__ */ jsxs("div", { className: "setto-chat__brand", children: [
+            /* @__PURE__ */ jsx("h2", { id: `${formId}-title`, children: labels.title }),
+            /* @__PURE__ */ jsx("p", { children: siteName ?? "Barista" })
           ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            labels.interest,
-            /* @__PURE__ */ jsx("input", { value: lead.interest, maxLength: 500, onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value })) })
-          ] })
+          /* @__PURE__ */ jsx("button", { className: "setto-chat__round-button", type: "button", onClick: hide, "aria-label": labels.close, children: "×" })
         ] }),
-        /* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
-          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: lead.consent, onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked })) }),
-          labels.consent
+        /* @__PURE__ */ jsxs("div", { className: "setto-chat__disclosure", children: [
+          /* @__PURE__ */ jsx("span", { children: "BARISTA" }),
+          /* @__PURE__ */ jsx("p", { children: labels.disclosure })
         ] }),
-        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,
-      /* @__PURE__ */ jsxs("form", { className: "setto-chat__composer", onSubmit: submit, children: [
-        /* @__PURE__ */ jsx("label", { className: "setto-chat__sr", htmlFor: `${formId}-input`, children: labels.placeholder }),
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            id: `${formId}-input`,
-            value: draft,
-            rows: 1,
-            maxLength: 1500,
-            onChange: (event) => setDraft(event.target.value),
-            placeholder: labels.placeholder,
-            disabled: sending,
-            onKeyDown: (event) => {
+        /* @__PURE__ */ jsx("div", { className: "setto-chat__log", ref: logRef, "aria-live": "polite", "aria-busy": loadingConversation, 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,
+          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");
+          }, 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", { type: "checkbox", checked: lead.consent, onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked })) }),
+            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,
+        /* @__PURE__ */ jsxs("form", { className: "setto-chat__composer", onSubmit: submit, children: [
+          files.length ? /* @__PURE__ */ jsx("div", { className: "setto-chat__previews", children: files.map((image, index) => /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("img", { src: image.preview, alt: image.file.name }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index)), "aria-label": `Remove ${image.file.name}`, children: "×" })
+          ] }, `${image.file.name}-${index}`)) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-row", children: [
+            /* @__PURE__ */ jsx("input", { ref: fileInput, className: "setto-chat__file", type: "file", accept: "image/jpeg,image/png,image/webp,image/gif", multiple: true, onChange: (event) => setFiles(Array.from(event.target.files ?? []).slice(0, 4).map((file) => ({ file, preview: URL.createObjectURL(file) }))) }),
+            /* @__PURE__ */ jsx("button", { className: "setto-chat__attach", type: "button", onClick: () => fileInput.current?.click(), "aria-label": labels.attach, children: "＋" }),
+            /* @__PURE__ */ jsx("label", { className: "setto-chat__sr", htmlFor: `${formId}-input`, children: labels.placeholder }),
+            /* @__PURE__ */ jsx("textarea", { id: `${formId}-input`, value: draft, rows: 1, maxLength: 1500, onChange: (event) => setDraft(event.target.value), placeholder: labels.placeholder, disabled: sending, onKeyDown: (event) => {
               if (event.key === "Enter" && !event.shiftKey) {
                 event.preventDefault();
                 event.currentTarget.form?.requestSubmit();
               }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "submit", disabled: !draft.trim() || sending, children: sending ? labels.sending : labels.send })
+            } }),
+            /* @__PURE__ */ jsx("button", { className: "setto-chat__send", type: "submit", disabled: !draft.trim() && !files.length || sending, "aria-label": labels.send, children: sending ? "…" : "↑" })
+          ] })
+        ] })
       ] })
     ] }) : null,
-    !open ? /* @__PURE__ */ jsxs("button", { className: "setto-chat__launcher", type: "button", onClick: () => setOpen(true), "aria-expanded": "false", children: [
-      /* @__PURE__ */ jsx("span", { className: "setto-chat__launcher-mark", "aria-hidden": "true", children: "✦" }),
-      /* @__PURE__ */ jsx("span", { children: labels.open })
-    ] }) : null
+    !mounted ? /* @__PURE__ */ jsx("button", { className: "setto-chat__launcher", type: "button", onClick: show, "aria-label": labels.open, title: labels.open, children: availability.humanAvailable && availability.avatarUrl ? /* @__PURE__ */ jsx("img", { src: availability.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "✦" }) }) : null
   ] });
 }
 function replaceLastAssistant(messages, content) {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
-    if (messages[index]?.role === "assistant") {
+    const current = messages[index];
+    if (current?.role === "assistant") {
       const next = [...messages];
-      next[index] = { role: "assistant", content };
+      next[index] = { ...current, content };
       return next;
     }
   }
@@ -22347,51 +22370,15 @@ function useChatStyles() {
     const style = document.createElement("style");
     style.dataset.settoChat = "";
     style.textContent = `
-      .setto-chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483000; color: #231d17; font-family: Archivo, ui-sans-serif, sans-serif; }
-      .setto-chat *, .setto-chat *::before, .setto-chat *::after { box-sizing: border-box; }
-      .setto-chat--open { inset: 0; right: 0; bottom: 0; width: 100vw; height: 100dvh; display: block; background: #fffaf1; }
-      .setto-chat__launcher { border: 0; min-height: 54px; max-width: min(290px, calc(100vw - 32px)); border-radius: 999px; padding: 8px 18px 8px 9px; display: flex; align-items: center; gap: 10px; background: #251d16; color: #fff9ef; box-shadow: 0 14px 40px rgba(35,29,23,.28); font: 600 14px/1 Archivo, ui-sans-serif, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
-      .setto-chat__launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(35,29,23,.36); }
-      .setto-chat__launcher-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #df6540; color: #fff8eb; font-size: 18px; }
-      .setto-chat__panel { width: min(390px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 104px)); margin-bottom: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto auto; border: 1px solid rgba(37,29,22,.15); border-radius: 20px; background: #fffaf1; box-shadow: 0 22px 70px rgba(35,29,23,.3); }
-      .setto-chat--open .setto-chat__panel { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
-      .setto-chat__header { padding: 20px 20px 16px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eadfce; background: radial-gradient(circle at 0 0, #f4d4a9, transparent 52%), #fffaf1; }
-      .setto-chat--open .setto-chat__header { padding-top: max(20px, env(safe-area-inset-top)); padding-right: max(20px, env(safe-area-inset-right)); padding-left: max(20px, env(safe-area-inset-left)); }
-      .setto-chat__eyebrow { margin: 0 0 4px; color: #b54628; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
-      .setto-chat__header h2 { margin: 0; color: #211a14; font-family: "Instrument Serif", Georgia, serif; font-size: 29px; font-weight: 400; line-height: 1; }
-      .setto-chat__header p:not(.setto-chat__eyebrow) { margin: 7px 0 0; max-width: 280px; color: #70665a; font-size: 12px; line-height: 1.35; }
-      .setto-chat__close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(64,47,31,.07); color: #4f453a; font: 300 28px/27px Georgia, serif; cursor: pointer; }
-      .setto-chat__log { min-height: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
-      .setto-chat__message { max-width: 88%; padding: 11px 13px; border-radius: 14px; font-size: 14px; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
-      .setto-chat__message--assistant { align-self: flex-start; background: #efe7da; color: #302820; border-bottom-left-radius: 3px; }
-      .setto-chat__message--visitor { align-self: flex-end; background: #2b221b; color: #fffaf1; border-bottom-right-radius: 3px; }
-      .setto-chat__message--human { align-self: flex-start; background: #f5d3c7; color: #48261d; border-bottom-left-radius: 3px; }
-      .setto-chat__message--system { align-self: center; max-width: 100%; padding: 2px 8px; background: transparent; color: #817568; font-size: 11px; text-align: center; }
-      .setto-chat__speaker { display: block; margin-bottom: 3px; color: #a13e24; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-      .setto-chat__typing { display: inline-block; min-width: 24px; animation: setto-chat-pulse 1.1s ease-in-out infinite; letter-spacing: 2px; }
-      @keyframes setto-chat-pulse { 50% { opacity: .3; } }
-      .setto-chat__contact { padding: 0 18px 12px; display: flex; gap: 14px; flex-wrap: wrap; }
-      .setto-chat__contact button { border: 0; padding: 0; background: transparent; color: #b54628; font: 600 12px/1.4 Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
-      .setto-chat__lead { display: grid; gap: 8px; max-height: 255px; overflow: auto; padding: 12px 18px; border-top: 1px solid #eadfce; background: #fff7ed; font-size: 12px; line-height: 1.4; }
-      .setto-chat__lead p { margin: 0; color: #70665a; }
-      .setto-chat__lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
-      .setto-chat__lead label { display: grid; gap: 3px; color: #5f5347; font-weight: 600; }
-      .setto-chat__lead input:not([type="checkbox"]) { width: 100%; border: 1px solid #d8ccba; border-radius: 7px; background: #fffdf8; color: #231d17; padding: 7px; font: 13px Archivo, ui-sans-serif, sans-serif; }
-      .setto-chat__lead .setto-chat__consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; }
-      .setto-chat__lead button { justify-self: start; min-height: 34px; border: 0; border-radius: 8px; padding: 0 12px; background: #b54628; color: #fffaf1; font: 600 12px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
-      .setto-chat__lead button:disabled { opacity: .5; cursor: default; }
-      .setto-chat__lead-success { color: #30683d !important; font-weight: 600; }
-      .setto-chat__lead-error { color: #9b2f1e !important; font-weight: 600; }
-      .setto-chat__composer { padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; border-top: 1px solid #eadfce; background: #fffdf8; }
-      .setto-chat--open .setto-chat__composer { padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
-      .setto-chat__composer textarea { width: 100%; max-height: 100px; resize: none; border: 1px solid #d8ccba; border-radius: 10px; background: #fffaf1; color: #231d17; padding: 10px; font: 14px/1.35 Archivo, ui-sans-serif, sans-serif; outline: none; }
-      .setto-chat__composer textarea:focus { border-color: #b54628; box-shadow: 0 0 0 3px rgba(181,70,40,.12); }
-      .setto-chat__composer button { min-height: 40px; border: 0; border-radius: 9px; padding: 0 13px; background: #b54628; color: #fffaf1; font: 600 13px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
-      .setto-chat__composer button:disabled { opacity: .5; cursor: default; }
-      .setto-chat__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
-      @media (max-width: 480px) { .setto-chat:not(.setto-chat--open) { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .setto-chat:not(.setto-chat--open) .setto-chat__panel { width: calc(100vw - 24px); height: min(610px, calc(100dvh - 88px)); } .setto-chat__launcher { min-height: 50px; } .setto-chat__lead-grid { grid-template-columns: 1fr; } }
-      @media (prefers-reduced-motion: reduce) { .setto-chat *, .setto-chat *::before, .setto-chat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
-    `;
+.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,ui-sans-serif,sans-serif}.setto-chat *,.setto-chat *::before,.setto-chat *::after{box-sizing:border-box}.setto-chat--mounted{inset:0;right:0;bottom:0;width:100vw;height:100dvh;background:color-mix(in srgb,var(--setto-chat-paper) 88%,transparent);backdrop-filter:blur(8px);opacity:0;transition:opacity ${CLOSE_MS}ms ease}.setto-chat--visible{opacity:1}.setto-chat__shell{width:100%;height:100%;display:flex;overflow:hidden;opacity:0;transform:translateY(14px) scale(.992);transition:opacity ${CLOSE_MS}ms ease,transform ${CLOSE_MS}ms cubic-bezier(.2,.8,.2,1);background:var(--setto-chat-paper)}.setto-chat--visible .setto-chat__shell{opacity:1;transform:none}
+.setto-chat__chats{width:274px;flex:0 0 274px;padding:calc(25px + env(safe-area-inset-top)) 14px 22px;background:color-mix(in srgb,var(--setto-chat-pale) 72%,white);border-right:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);display:flex;flex-direction:column;gap:18px}.setto-chat__chats-heading{padding:0 7px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.setto-chat__chats-heading button{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--setto-chat-ink)}.setto-chat__new{border:1px solid color-mix(in srgb,var(--setto-chat-ink) 18%,transparent);border-radius:14px;padding:11px 13px;background:rgba(255,255,255,.45);color:var(--setto-chat-ink);font:600 13px Archivo,sans-serif;text-align:left;cursor:pointer}.setto-chat__chat-list{display:grid;gap:5px;overflow:auto}.setto-chat__chat-list p{margin:7px;padding:0;color:color-mix(in srgb,var(--setto-chat-ink) 57%,transparent);font-size:12px;line-height:1.45}.setto-chat__chat-row{border:0;border-radius:11px;padding:10px;background:transparent;color:var(--setto-chat-ink);display:grid;gap:4px;text-align:left;cursor:pointer}.setto-chat__chat-row:hover,.setto-chat__chat-row.is-active{background:color-mix(in srgb,var(--setto-chat-paper) 75%,transparent)}.setto-chat__chat-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px Archivo,sans-serif}.setto-chat__chat-row time{font-size:11px;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent)}
+.setto-chat__main{min-width:0;flex:1;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;background:var(--setto-chat-paper)}.setto-chat__header{min-height:86px;padding:calc(14px + env(safe-area-inset-top)) 26px 12px;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent)}.setto-chat__round-button{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 11%,transparent);border-radius:50%;background:color-mix(in srgb,var(--setto-chat-paper) 72%,white);color:var(--setto-chat-ink);font:500 23px/1 Archivo,sans-serif;cursor:pointer}.setto-chat__brand{text-align:center}.setto-chat__brand h2{margin:0;font:400 26px/1.05 "Instrument Serif",Georgia,serif;letter-spacing:-.025em}.setto-chat__brand p{margin:3px 0 0;color:color-mix(in srgb,var(--setto-chat-ink) 57%,transparent);font-size:12px}.setto-chat__disclosure{padding:14px max(32px,6vw) 6px;display:flex;align-items:baseline;gap:10px}.setto-chat__disclosure span{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--setto-chat-accent)}.setto-chat__disclosure p{margin:0;color:color-mix(in srgb,var(--setto-chat-ink) 60%,transparent);font-size:12px}
+.setto-chat__log{min-height:0;overflow:auto;padding:28px max(32px,10vw);display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}.setto-chat__message{max-width:min(620px,82%);padding:14px 16px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.setto-chat__message--assistant{align-self:flex-start;background:color-mix(in srgb,var(--setto-chat-pale) 82%,white);border-bottom-left-radius:4px}.setto-chat__message--visitor{align-self:flex-end;background:var(--setto-chat-ink);color:var(--setto-chat-paper);border-bottom-right-radius:4px}.setto-chat__message--human{align-self:flex-start;background:color-mix(in srgb,var(--setto-chat-accent) 20%,var(--setto-chat-paper));border-bottom-left-radius:4px}.setto-chat__message--system{align-self:center;padding:3px 10px;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:12px;text-align:center}.setto-chat__speaker{display:block;margin-bottom:4px;color:var(--setto-chat-accent);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.setto-chat__typing{animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;margin-top:9px;overflow:hidden;border-radius:11px}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
+.setto-chat__actions{padding:8px max(30px,6vw) 11px;display:flex;gap:20px}.setto-chat__actions button{border:0;background:transparent;color:var(--setto-chat-accent);font:700 13px Archivo,sans-serif;cursor:pointer}.setto-chat__lead{margin:0 max(30px,6vw) 10px;padding:16px;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 13%,transparent);border-radius:16px;background:color-mix(in srgb,var(--setto-chat-pale) 55%,white);display:grid;gap:9px}.setto-chat__lead strong{font-size:15px}.setto-chat__lead p{margin:0;color:color-mix(in srgb,var(--setto-chat-ink) 65%,transparent);font-size:12px;line-height:1.4}.setto-chat__lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.setto-chat__lead label{display:grid;gap:4px;font-size:11px;font-weight:700}.setto-chat__lead input{min-width:0;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 18%,transparent);border-radius:8px;padding:8px;background:var(--setto-chat-paper);color:var(--setto-chat-ink);font:13px Archivo,sans-serif}.setto-chat__consent{display:flex!important;grid-template-columns:auto 1fr;align-items:start;font-weight:400!important;line-height:1.35}.setto-chat__lead>button{justify-self:start;border:0;border-radius:9px;padding:9px 12px;background:var(--setto-chat-accent);color:white;font:700 12px Archivo,sans-serif;cursor:pointer}.setto-chat__lead-success{color:#28633d!important;font-weight:700}.setto-chat__lead-error{color:#a33024!important;font-weight:700}
+.setto-chat__composer{padding:0 max(24px,6vw) max(17px,env(safe-area-inset-bottom));background:var(--setto-chat-paper)}.setto-chat__composer-row{min-height:78px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr 44px;gap:8px;align-items:end;border:1.5px solid color-mix(in srgb,var(--setto-chat-accent) 80%,var(--setto-chat-ink));border-radius:25px;background:color-mix(in srgb,var(--setto-chat-paper) 82%,white);box-shadow:0 9px 26px color-mix(in srgb,var(--setto-chat-ink) 8%,transparent)}.setto-chat__composer textarea{width:100%;min-height:38px;max-height:100px;resize:none;border:0;background:transparent;color:var(--setto-chat-ink);padding:8px 0;font:15px/1.4 Archivo,sans-serif;outline:none}.setto-chat__composer textarea::placeholder{color:color-mix(in srgb,var(--setto-chat-ink) 45%,transparent)}.setto-chat__file,.setto-chat__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.setto-chat__attach{width:32px;height:32px;align-self:end;border:0;border-radius:50%;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 70%,transparent);font-size:28px;line-height:1;cursor:pointer}.setto-chat__send{width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,var(--setto-chat-accent) 36%,var(--setto-chat-paper));color:var(--setto-chat-accent);font:400 27px/1 Georgia,serif;cursor:pointer}.setto-chat__send:disabled{opacity:.45;cursor:default}.setto-chat__previews{display:flex;gap:8px;padding:0 10px 8px}.setto-chat__previews span{position:relative;width:42px;height:42px}.setto-chat__previews img{display:block;width:42px;height:42px;object-fit:cover;border-radius:9px}.setto-chat__previews button{position:absolute;right:-5px;top:-5px;width:17px;height:17px;border:0;border-radius:50%;background:var(--setto-chat-ink);color:white;line-height:15px;cursor:pointer}
+.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-paper) 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(1.15);color:var(--setto-chat-ink);display:grid;place-items:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s 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-paper);font-size:19px}.setto-chat__launcher img{width:50px;height:50px;border-radius:50%;object-fit:cover}.setto-chat__launcher:focus-visible,.setto-chat button:focus-visible,.setto-chat textarea:focus-visible,.setto-chat input:focus-visible{outline:3px solid color-mix(in srgb,var(--setto-chat-accent) 45%,white);outline-offset:3px}@keyframes setto-chat-pulse{50%{opacity:.35}}
+@media(max-width:700px){.setto-chat__chats{position:absolute;z-index:2;top:0;bottom:0;left:0;transform:translateX(-104%);transition:transform ${CLOSE_MS}ms ease;box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__header{padding-left:16px;padding-right:16px}.setto-chat__disclosure{padding:13px 20px 5px}.setto-chat__log{padding:24px 20px}.setto-chat__message{max-width:91%;font-size:14px}.setto-chat__actions{padding-left:20px;padding-right:20px;gap:15px}.setto-chat__composer{padding-left:14px;padding-right:14px}.setto-chat__lead{margin-left:20px;margin-right:20px}.setto-chat__lead-grid{grid-template-columns:1fr}.setto-chat__round-button{width:42px;height:42px}.setto-chat__brand h2{font-size:24px}}@media(prefers-reduced-motion:reduce){.setto-chat,.setto-chat__shell,.setto-chat__chats,.setto-chat__launcher{transition:none!important}.setto-chat__typing{animation:none}}
+`;
     document.head.appendChild(style);
     return () => style.remove();
   }, []);