@channlize/react 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -3,7 +3,10 @@ import { createContext, useContext } from "react";
 import { ChannlizeClient } from "@channlize/core";
 import { jsx } from "react/jsx-runtime";
 var ChannlizeContext = createContext(null);
-function ChannlizeProvider({ config, children }) {
+function ChannlizeProvider({
+  config,
+  children
+}) {
   const client = new ChannlizeClient(config);
   return /* @__PURE__ */ jsx(ChannlizeContext.Provider, { value: { client, config }, children });
 }
@@ -73,15 +76,18 @@ function useChatSession(options = {}) {
   useEffect(() => {
     sessionRef.current = session;
   }, [session]);
-  const saveSessionToStorage = useCallback2((sessionId) => {
-    if (persistSession && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(storageKey, sessionId);
-      } catch (err) {
-        console.warn("Failed to save session to localStorage:", err);
+  const saveSessionToStorage = useCallback2(
+    (sessionId) => {
+      if (persistSession && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(storageKey, sessionId);
+        } catch (err) {
+          console.warn("Failed to save session to localStorage:", err);
+        }
       }
-    }
-  }, [persistSession, storageKey]);
+    },
+    [persistSession, storageKey]
+  );
   const getSessionFromStorage = useCallback2(() => {
     if (persistSession && typeof window !== "undefined") {
       try {
@@ -101,64 +107,80 @@ function useChatSession(options = {}) {
       }
     }
   }, [persistSession, storageKey]);
-  const connectToSSE = useCallback2((sseEndpoint) => {
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close();
-    }
-    const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
-    const eventSource = new EventSource(fullUrl);
-    eventSourceRef.current = eventSource;
-    eventSource.onopen = () => {
-      setIsConnected(true);
-      setError(null);
-    };
-    eventSource.addEventListener("connected", (event) => {
-      console.log("SSE connected:", event.data);
-    });
-    eventSource.addEventListener("message", (event) => {
-      try {
-        console.log("SSE message:", event.data);
-        const message = JSON.parse(event.data);
-        const chatMessage = {
-          ...message,
-          timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => {
-          const exists = prev.some((m) => m.id === chatMessage.id);
-          return exists ? prev : [...prev, chatMessage];
-        });
-        options.onMessage?.(chatMessage);
-      } catch (err) {
-        console.warn("Failed to parse SSE message:", err, event.data);
+  const connectToSSE = useCallback2(
+    (sseEndpoint) => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
       }
-    });
-    eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === "message" && data.message) {
-          const message = {
-            ...data.message,
-            timestamp: data.message.timestamp ? new Date(data.message.timestamp) : /* @__PURE__ */ new Date()
+      const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
+      console.log("[Channlize SSE] Connecting to:", fullUrl);
+      const eventSource = new EventSource(fullUrl);
+      eventSourceRef.current = eventSource;
+      eventSource.onopen = () => {
+        console.log("[Channlize SSE] Connection opened");
+        setIsConnected(true);
+        setError(null);
+      };
+      eventSource.addEventListener("connected", (event) => {
+        console.log("SSE connected:", event.data);
+      });
+      eventSource.addEventListener("message", (event) => {
+        try {
+          console.log("SSE message:", event.data);
+          const message = JSON.parse(event.data);
+          const chatMessage = {
+            ...message,
+            timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
           };
           setMessages((prev) => {
-            const exists = prev.some((m) => m.id === message.id);
-            return exists ? prev : [...prev, message];
+            const exists = prev.some((m) => m.id === chatMessage.id);
+            return exists ? prev : [...prev, chatMessage];
           });
-          options.onMessage?.(message);
+          options.onMessage?.(chatMessage);
+        } catch (err) {
+          console.warn("Failed to parse SSE message:", err, event.data);
         }
-      } catch (err) {
-        console.warn("Failed to parse default SSE message:", err);
-      }
-    };
-    eventSource.onerror = () => {
-      setIsConnected(false);
-      eventSource.close();
-      eventSourceRef.current = null;
-      const error2 = new Error("Connection lost");
-      setError(error2);
-      options.onError?.(error2);
-    };
-  }, [baseUrl, options.onError, options.onMessage]);
+      });
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === "message" && data.message) {
+            const message = {
+              ...data.message,
+              timestamp: data.message.timestamp ? new Date(data.message.timestamp) : /* @__PURE__ */ new Date()
+            };
+            setMessages((prev) => {
+              const exists = prev.some((m) => m.id === message.id);
+              return exists ? prev : [...prev, message];
+            });
+            options.onMessage?.(message);
+          }
+        } catch (err) {
+          console.warn("Failed to parse default SSE message:", err);
+        }
+      };
+      eventSource.onerror = (event) => {
+        if (eventSource.readyState === EventSource.CONNECTING) {
+          setIsConnected(false);
+          return;
+        }
+        console.error("[Channlize SSE] Connection error", {
+          readyState: eventSource.readyState,
+          url: fullUrl,
+          event
+        });
+        const stateMessage = eventSource.readyState === 0 ? "Failed to connect (CONNECTING)" : eventSource.readyState === 1 ? "Connection error while OPEN" : "Connection closed";
+        setIsConnected(false);
+        eventSource.close();
+        eventSourceRef.current = null;
+        const error2 = new Error(`SSE ${stateMessage}`);
+        error2.code = "SSE_ERROR";
+        setError(error2);
+        options.onError?.(error2);
+      };
+    },
+    [baseUrl, options.onError, options.onMessage]
+  );
   const startSession = useCallback2(async () => {
     if (isConnecting || session) return;
     setIsConnecting(true);
@@ -170,11 +192,14 @@ function useChatSession(options = {}) {
           console.log("\u{1F4E6} Resuming session from storage:", existingSessionId);
           const existingSession = await client.getChatSession(existingSessionId);
           const existingMessages = await client.getChatMessages(existingSessionId);
+          sessionRef.current = existingSession;
           setSession(existingSession);
-          const normalizedMessages2 = existingMessages.map((msg) => ({
-            ...msg,
-            timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
-          }));
+          const normalizedMessages2 = existingMessages.map(
+            (msg) => ({
+              ...msg,
+              timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
+            })
+          );
           setMessages(normalizedMessages2);
           const sseEndpoint = `/v1/chat/sessions/${existingSessionId}/events`;
           connectToSSE(sseEndpoint);
@@ -187,12 +212,15 @@ function useChatSession(options = {}) {
       }
       console.log("\u{1F195} Creating new chat session");
       const response = await client.createChatSession(options.metadata);
+      sessionRef.current = response.session;
       setSession(response.session);
       saveSessionToStorage(response.session.id);
-      const normalizedMessages = (response.session.messages || []).map((msg) => ({
-        ...msg,
-        timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
-      }));
+      const normalizedMessages = (response.session.messages || []).map(
+        (msg) => ({
+          ...msg,
+          timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
+        })
+      );
       setMessages(normalizedMessages);
       if (response.sseEndpoint) {
         connectToSSE(response.sseEndpoint);
@@ -205,7 +233,18 @@ function useChatSession(options = {}) {
     } finally {
       setIsConnecting(false);
     }
-  }, [client, connectToSSE, options.metadata, options.onError, options.sessionId, getSessionFromStorage, saveSessionToStorage, clearSessionFromStorage, isConnecting, session]);
+  }, [
+    client,
+    connectToSSE,
+    options.metadata,
+    options.onError,
+    options.sessionId,
+    getSessionFromStorage,
+    saveSessionToStorage,
+    clearSessionFromStorage,
+    isConnecting,
+    session
+  ]);
   const sendMessage = useCallback2(
     async (content, attachments) => {
       if (!sessionRef.current) {
@@ -244,6 +283,7 @@ function useChatSession(options = {}) {
         eventSourceRef.current = null;
       }
       clearSessionFromStorage();
+      sessionRef.current = null;
       setSession(null);
       setMessages([]);
       setIsConnected(false);
@@ -254,17 +294,29 @@ function useChatSession(options = {}) {
       options.onError?.(error2);
     }
   }, [client, options.onError, clearSessionFromStorage]);
+  const reconnect = useCallback2(() => {
+    const current = sessionRef.current;
+    if (!current) return;
+    if (eventSourceRef.current && eventSourceRef.current.readyState !== EventSource.CLOSED) {
+      return;
+    }
+    setError(null);
+    connectToSSE(`/v1/chat/sessions/${current.id}/events`);
+  }, [connectToSSE]);
   useEffect(() => {
     if (options.autoConnect && !session && !isConnecting && !isInitializedRef.current) {
       isInitializedRef.current = true;
       startSession();
     }
+  }, [options.autoConnect, session, isConnecting, startSession]);
+  useEffect(() => {
     return () => {
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
+        eventSourceRef.current = null;
       }
     };
-  }, [options.autoConnect, session, isConnecting, startSession]);
+  }, []);
   return {
     session,
     messages,
@@ -273,220 +325,1379 @@ function useChatSession(options = {}) {
     error,
     sendMessage,
     startSession,
-    endSession
+    endSession,
+    reconnect
   };
 }
 
+// src/hooks/useChannlizeAnalytics.ts
+import { useCallback as useCallback3 } from "react";
+function useChannlizeAnalytics() {
+  const { client } = useChannlize();
+  const track = useCallback3(
+    (name, options) => client.trackEvent(name, options),
+    [client]
+  );
+  return { track };
+}
+
 // src/components/Form.tsx
-import { useState as useState3 } from "react";
+import {
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+
+// src/components/chat/icons.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Icon({ size = 20, children, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var ChatIcon = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "M21 11.5a8.4 8.4 0 0 1-9 8.4 9.3 9.3 0 0 1-3.7-.8L3 21l1.9-4.9A8 8 0 0 1 3 11.5 8.6 8.6 0 0 1 12 3a8.6 8.6 0 0 1 9 8.5Z" }) });
+var CloseIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+] });
+var ChevronDownIcon = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+var MoreIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+] });
+var SendIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M12 19V5" }),
+  /* @__PURE__ */ jsx2("path", { d: "m5 12 7-7 7 7" })
+] });
+var PaperclipIcon = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5" }) });
+var FileIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M14 3v5h5" })
+] });
+var AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx2("path", { d: "M12 8v4" }),
+  /* @__PURE__ */ jsx2("path", { d: "M12 16h.01" })
+] });
+var ExitIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+  /* @__PURE__ */ jsx2("path", { d: "m16 17 5-5-5-5" }),
+  /* @__PURE__ */ jsx2("path", { d: "M21 12H9" })
+] });
+var CheckIcon = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }) });
+
+// src/components/chat/utils.ts
+var GROUP_GAP_MS = 5 * 60 * 1e3;
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+function dayKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+function groupMessages(messages) {
+  const sections = [];
+  let section;
+  let group;
+  let lastTime = 0;
+  for (const msg of messages) {
+    const time = isValidDate(msg.timestamp) ? msg.timestamp : /* @__PURE__ */ new Date();
+    const key = dayKey(time);
+    if (!section || section.key !== key) {
+      section = { key, date: time, groups: [] };
+      sections.push(section);
+      group = void 0;
+    }
+    const sameAuthor = group && group.author === msg.author && (msg.author === "user" || group.authorName === msg.authorName);
+    const closeInTime = time.getTime() - lastTime < GROUP_GAP_MS;
+    if (!group || !sameAuthor || !closeInTime) {
+      group = {
+        key: msg.key,
+        author: msg.author,
+        authorName: msg.authorName,
+        avatarUrl: msg.avatarUrl,
+        messages: []
+      };
+      section.groups.push(group);
+    }
+    group.messages.push(msg);
+    lastTime = time.getTime();
+  }
+  return sections;
+}
+function formatTime(date, locale) {
+  if (!isValidDate(date)) return "";
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  } catch {
+    return "";
+  }
+}
+function formatFullDate(date, locale) {
+  if (!isValidDate(date)) return "";
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short"
+    }).format(date);
+  } catch {
+    return "";
+  }
+}
+function formatDayLabel(date, labels, locale, now = /* @__PURE__ */ new Date()) {
+  if (!isValidDate(date)) return "";
+  const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((startOfDay(now) - startOfDay(date)) / 864e5);
+  if (days === 0) return labels.today;
+  if (days === 1) return labels.yesterday;
+  try {
+    if (days > 1 && days < 7) {
+      return new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
+    }
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+      ...date.getFullYear() !== now.getFullYear() && { year: "numeric" }
+    }).format(date);
+  } catch {
+    return date.toDateString();
+  }
+}
+function formatFileSize(bytes) {
+  if (typeof bytes !== "number" || !isFinite(bytes) || bytes < 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function safeUrl(url, baseUrl) {
+  if (!url || typeof url !== "string") return void 0;
+  try {
+    const base = baseUrl || (typeof window !== "undefined" ? window.location.href : void 0);
+    const parsed = new URL(url, base);
+    if (["http:", "https:", "blob:"].includes(parsed.protocol)) {
+      return parsed.href;
+    }
+  } catch {
+  }
+  return void 0;
+}
+function toDisplayAttachments(attachments, baseUrl) {
+  if (!Array.isArray(attachments)) return [];
+  return attachments.map((a, i) => ({
+    key: a.id || `${a.name}-${i}`,
+    name: a.name || "Attachment",
+    size: a.size,
+    type: a.type,
+    url: safeUrl(a.url, baseUrl)
+  }));
+}
+function isImage(attachment) {
+  if (attachment.type) return attachment.type.startsWith("image/");
+  return /\.(png|jpe?g|gif|webp|avif)$/i.test(attachment.name);
+}
+var URL_PATTERN = /\b(?:https?:\/\/|www\.)[^\s<>"']+/gi;
+var TRAILING_PUNCTUATION = /[.,;:!?'"\]}]+$/;
+function linkify(text) {
+  const parts = [];
+  if (!text) return parts;
+  let last = 0;
+  for (const match of text.matchAll(URL_PATTERN)) {
+    const start = match.index ?? 0;
+    let raw = match[0];
+    for (; ; ) {
+      const trimmed = raw.replace(TRAILING_PUNCTUATION, "");
+      const opens = (trimmed.match(/\(/g) || []).length;
+      const closes = (trimmed.match(/\)/g) || []).length;
+      const next = trimmed.endsWith(")") && closes > opens ? trimmed.slice(0, -1) : trimmed;
+      if (next === raw) break;
+      raw = next;
+    }
+    const href = safeUrl(
+      raw.toLowerCase().startsWith("www.") ? `https://${raw}` : raw
+    );
+    if (!href || !/^https?:/.test(href)) continue;
+    if (start > last) {
+      parts.push({ type: "text", value: text.slice(last, start) });
+    }
+    parts.push({ type: "link", value: raw, href });
+    last = start + raw.length;
+  }
+  if (last < text.length) {
+    parts.push({ type: "text", value: text.slice(last) });
+  }
+  return parts;
+}
+function initials(name) {
+  if (!name) return "?";
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = words[0]?.[0] ?? "";
+  const second = words.length > 1 ? words[words.length - 1]?.[0] ?? "" : "";
+  return (first + second).toUpperCase();
+}
+function parseHexColor(color) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  let hex = m?.[1];
+  if (!hex) return null;
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const n = parseInt(hex, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function relativeLuminance([r, g, b]) {
+  const channel = (v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function readableTextColor(background) {
+  const rgb = parseHexColor(background);
+  if (!rgb) return "#ffffff";
+  const lum = relativeLuminance(rgb);
+  const onWhite = 1.05 / (lum + 0.05);
+  const onDark = (lum + 0.05) / (relativeLuminance([17, 24, 39]) + 0.05);
+  return onWhite >= 4.5 || onWhite >= onDark ? "#ffffff" : "#111827";
+}
+
+// src/components/form/styles.ts
+var FORM_CSS = `
+.channlize-contact{
+  --chz-primary:#2563eb;
+  --chz-on-primary:#ffffff;
+  --chz-bg:#ffffff;
+  --chz-surface:#f6f7f9;
+  --chz-field:#ffffff;
+  --chz-text:#111827;
+  --chz-muted:#5d6572;
+  --chz-border:#d5d9e0;
+  --chz-border-soft:#e3e6eb;
+  --chz-danger:#b42318;
+  --chz-danger-bg:#fdecec;
+  --chz-success:#067647;
+  --chz-success-bg:#e7f6ec;
+  --chz-radius:10px;
+  display:block;
+  box-sizing:border-box;
+  width:100%;
+  max-width:100%;
+  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  font-size:14px;
+  line-height:1.5;
+  font-weight:400;
+  letter-spacing:normal;
+  text-transform:none;
+  text-align:left;
+  color:var(--chz-text);
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+}
+.channlize-contact[data-theme="dark"]{
+  --chz-bg:#16181d;
+  --chz-surface:#1f2228;
+  --chz-field:#1b1e24;
+  --chz-text:#f2f4f7;
+  --chz-muted:#a7aebb;
+  --chz-border:#3a404a;
+  --chz-border-soft:#2f343d;
+  --chz-danger:#ff9b9b;
+  --chz-danger-bg:#3b1e22;
+  --chz-success:#6ce9a6;
+  --chz-success-bg:#12301f;
+}
+@media (prefers-color-scheme: dark){
+  .channlize-contact[data-theme="auto"]{
+    --chz-bg:#16181d;
+    --chz-surface:#1f2228;
+    --chz-field:#1b1e24;
+    --chz-text:#f2f4f7;
+    --chz-muted:#a7aebb;
+    --chz-border:#3a404a;
+    --chz-border-soft:#2f343d;
+    --chz-danger:#ff9b9b;
+    --chz-danger-bg:#3b1e22;
+    --chz-success:#6ce9a6;
+    --chz-success-bg:#12301f;
+  }
+}
+.channlize-contact[data-variant="card"]{background:var(--chz-bg);border:1px solid var(--chz-border-soft);border-radius:16px;padding:24px;}
+@media (max-width: 480px){.channlize-contact[data-variant="card"]{padding:18px;}}
+.channlize-contact *,.channlize-contact *::before,.channlize-contact *::after{box-sizing:border-box;letter-spacing:inherit;}
+.channlize-contact :where(h2,p,form,fieldset,label){margin:0;padding:0;border:0;font:inherit;color:inherit;background:none;}
+.channlize-contact :where(button,input,textarea,select){font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;margin:0;}
+.channlize-contact :where(button){appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer;line-height:inherit;text-decoration:none;}
+.channlize-contact :where(button:disabled){cursor:default;}
+.channlize-contact :where(svg){display:block;flex-shrink:0;}
+.channlize-contact :where(:focus-visible){outline:2px solid var(--chz-primary);outline-offset:2px;}
+
+.channlize-contact .channlize-form{display:flex;flex-direction:column;gap:18px;}
+.channlize-contact .channlize-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px;}
+.channlize-contact .channlize-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
+.channlize-contact .channlize-label{display:flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--chz-text);}
+.channlize-contact .channlize-optional{font-weight:400;color:var(--chz-muted);font-size:12.5px;}
+.channlize-contact .channlize-form-input,.channlize-contact .channlize-form-select,.channlize-contact .channlize-form-textarea{display:block;width:100%;min-width:0;padding:10px 12px;border-radius:var(--chz-radius);border:1px solid var(--chz-border);background:var(--chz-field);color:var(--chz-text);font-size:15px;line-height:1.4;box-shadow:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
+.channlize-contact .channlize-form-input,.channlize-contact .channlize-form-select{height:44px;}
+.channlize-contact .channlize-form-textarea{min-height:132px;resize:vertical;}
+.channlize-contact .channlize-form-input::placeholder,.channlize-contact .channlize-form-textarea::placeholder{color:var(--chz-muted);opacity:1;}
+.channlize-contact .channlize-form-input:hover,.channlize-contact .channlize-form-select:hover,.channlize-contact .channlize-form-textarea:hover{border-color:color-mix(in srgb, var(--chz-text) 30%, var(--chz-border));}
+.channlize-contact .channlize-form-input:focus,.channlize-contact .channlize-form-select:focus,.channlize-contact .channlize-form-textarea:focus{border-color:var(--chz-primary);box-shadow:0 0 0 3px rgba(37,99,235,.18);box-shadow:0 0 0 3px color-mix(in srgb, var(--chz-primary) 22%, transparent);outline:none;}
+.channlize-contact .channlize-form-select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer;}
+.channlize-contact .channlize-form-select[data-empty="true"]{color:var(--chz-muted);}
+.channlize-contact .channlize-form-select option{color:var(--chz-text);background:var(--chz-field);}
+.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-input,.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-select,.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-textarea{border-color:var(--chz-danger);}
+.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-input:focus,.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-select:focus,.channlize-contact .channlize-field[data-invalid="true"] .channlize-form-textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--chz-danger) 22%, transparent);}
+.channlize-contact .channlize-field-error{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.35;color:var(--chz-danger);}
+.channlize-contact .channlize-field-error svg{margin-top:1px;}
+.channlize-contact .channlize-field-meta{display:flex;justify-content:space-between;gap:12px;}
+.channlize-contact .channlize-counter{margin-left:auto;font-size:12px;color:var(--chz-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
+.channlize-contact .channlize-counter[data-over="true"]{color:var(--chz-danger);}
+
+.channlize-contact .channlize-error{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--chz-radius);background:var(--chz-danger-bg);color:var(--chz-danger);font-size:14px;line-height:1.4;}
+.channlize-contact .channlize-error svg{margin-top:1px;}
+
+.channlize-contact .channlize-form-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
+.channlize-contact .channlize-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--chz-radius);background:var(--chz-primary);color:var(--chz-on-primary);font-size:15px;font-weight:600;line-height:1.2;transition:filter .15s ease,transform .15s ease,opacity .15s ease;}
+.channlize-contact .channlize-submit:hover:not(:disabled){filter:brightness(1.08);}
+.channlize-contact .channlize-submit:active:not(:disabled){transform:translateY(1px);}
+.channlize-contact .channlize-submit:disabled{opacity:.75;}
+.channlize-contact .channlize-submit:focus-visible{outline:2px solid var(--chz-primary);outline-offset:3px;}
+@media (max-width: 480px){.channlize-contact .channlize-submit{width:100%;}}
+.channlize-contact .channlize-footnote{font-size:12.5px;color:var(--chz-muted);}
+.channlize-contact .channlize-form-spinner{width:14px;height:14px;flex-shrink:0;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:channlize-spin .8s linear infinite;}
+
+.channlize-contact .channlize-honeypot{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;}
+.channlize-contact .channlize-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
+
+.channlize-contact .channlize-form-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 8px;animation:channlize-fade-in .25s ease;}
+.channlize-contact .channlize-success-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:6px;border-radius:999px;background:var(--chz-success-bg);color:var(--chz-success);}
+.channlize-contact .channlize-success-title{font-size:20px;font-weight:650;line-height:1.3;color:var(--chz-text);outline:none;}
+.channlize-contact .channlize-success-text{max-width:380px;font-size:15px;color:var(--chz-muted);}
+.channlize-contact .channlize-secondary{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:var(--chz-radius);border:1px solid var(--chz-border);background:var(--chz-surface);color:var(--chz-text);font-size:14px;font-weight:600;transition:background-color .15s ease;}
+.channlize-contact .channlize-secondary:hover{background:var(--chz-border-soft);}
+
+@media (max-width: 640px), (pointer: coarse){
+  .channlize-contact .channlize-form-input,.channlize-contact .channlize-form-select,.channlize-contact .channlize-form-textarea{font-size:16px;}
+}
+@media (prefers-reduced-motion: reduce){
+  .channlize-contact,.channlize-contact *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
+}
+@keyframes channlize-spin{to{transform:rotate(360deg);}}
+@keyframes channlize-fade-in{from{opacity:0;}to{opacity:1;}}
+`;
+
+// src/components/Form.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultContactFormLabels = {
+  name: "Name",
+  email: "Email",
+  company: "Company",
+  subject: "Subject",
+  topic: "Topic",
+  message: "Message",
+  namePlaceholder: "Jane Doe",
+  emailPlaceholder: "you@company.com",
+  companyPlaceholder: "Acme Inc.",
+  subjectPlaceholder: "What is this about?",
+  topicPlaceholder: "Choose a topic",
+  messagePlaceholder: "How can we help?",
+  optional: "(optional)",
+  submit: "Send message",
+  submitting: "Sending\u2026",
+  successTitle: "Message sent",
+  successMessage: "Thanks for reaching out. We\u2019ll get back to you by email.",
+  sendAnother: "Send another message",
+  errorRequired: "Please fill in this field.",
+  errorSelect: "Please choose an option.",
+  errorEmail: "Enter a valid email address, like name@example.com.",
+  errorTooShort: "Please write at least {min} characters.",
+  errorTooLong: "Please keep this under {max} characters.",
+  errorSummary: "Please fix the highlighted fields.",
+  errorGeneric: "We couldn\u2019t send your message. Please try again.",
+  errorRateLimit: "Too many messages in a short time. Please wait a minute and try again.",
+  footnote: ""
+};
+var DEFAULT_PRIMARY = "#2563eb";
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var EMPTY_VALUES = {
+  name: "",
+  email: "",
+  company: "",
+  subject: "",
+  topic: "",
+  message: ""
+};
+function normalizeTopics(topics) {
+  return (topics ?? []).map(
+    (t) => typeof t === "string" ? { value: t, label: t } : { value: t.value, label: t.label ?? t.value }
+  );
+}
+function matchTopic(topics, wanted) {
+  const w = wanted?.trim().toLowerCase();
+  if (!w) return "";
+  const hit = topics.find(
+    (t) => t.value.toLowerCase() === w || t.label.toLowerCase() === w
+  );
+  return hit ? hit.value : "";
+}
 function Form({
   customFields = [],
   onSuccess,
   onError,
   className = "",
   styles = {},
-  submitText = "Send Message",
-  successMessage = "Thank you! Your message has been sent."
+  submitText,
+  successMessage,
+  theme = "light",
+  primaryColor,
+  primaryTextColor,
+  variant = "card",
+  unstyled = false,
+  fields = {},
+  topics,
+  defaultValues,
+  labels: labelOverrides,
+  minMessageLength = 10,
+  maxMessageLength = 5e3,
+  honeypot = true,
+  showSuccessState = true,
+  idPrefix = "channlize"
 }) {
-  const [formData, setFormData] = useState3({
-    name: "",
-    email: "",
-    subject: "",
-    message: "",
-    customFields: {}
+  const labels = {
+    ...defaultContactFormLabels,
+    ...labelOverrides,
+    ...submitText !== void 0 && { submit: submitText },
+    ...successMessage !== void 0 && { successMessage }
+  };
+  const topicOptions = useMemo(() => normalizeTopics(topics), [topics]);
+  const modes = {
+    name: fields.name ?? "required",
+    company: fields.company ?? "hidden",
+    subject: fields.subject ?? "optional",
+    topic: topicOptions.length === 0 ? "hidden" : fields.topic ?? "optional"
+  };
+  const initialValues = () => ({
+    ...EMPTY_VALUES,
+    ...defaultValues,
+    topic: matchTopic(topicOptions, defaultValues?.topic)
   });
+  const [values, setValues] = useState3(initialValues);
+  const [custom, setCustom] = useState3({});
+  const [touched, setTouched] = useState3({});
+  const [showAllErrors, setShowAllErrors] = useState3(false);
+  const [trap, setTrap] = useState3("");
+  const [botSuccess, setBotSuccess] = useState3(false);
+  const [announcement, setAnnouncement] = useState3("");
+  const formRef = useRef2(null);
+  const successRef = useRef2(null);
+  const wantedTopic = defaultValues?.topic;
+  useEffect2(() => {
+    const matched = matchTopic(topicOptions, wantedTopic);
+    if (matched) setValues((v) => v.topic ? v : { ...v, topic: matched });
+  }, [wantedTopic, topicOptions]);
   const { submit, isSubmitting, isSuccess, error, reset } = useContactForm({
-    onSuccess: () => {
-      setFormData({
-        name: "",
-        email: "",
-        subject: "",
-        message: "",
-        customFields: {}
-      });
-      onSuccess?.();
+    onSuccess: (response) => {
+      setValues((v) => ({
+        ...EMPTY_VALUES,
+        name: v.name,
+        email: v.email,
+        company: v.company
+      }));
+      setCustom({});
+      setTouched({});
+      setShowAllErrors(false);
+      if (!showSuccessState) setAnnouncement(labels.successTitle);
+      onSuccess?.(response);
     },
     onError
   });
+  const succeeded = (isSuccess || botSuccess) && showSuccessState;
+  useEffect2(() => {
+    if (succeeded) successRef.current?.focus();
+  }, [succeeded]);
+  const id = (name) => `${idPrefix}-${name}`;
+  const validate = (v, c) => {
+    const errors2 = {};
+    const need = (name, mode) => {
+      if (mode === "required" && !v[name].trim()) {
+        errors2[name] = name === "topic" ? labels.errorSelect : labels.errorRequired;
+      }
+    };
+    need("name", modes.name);
+    need("company", modes.company);
+    need("subject", modes.subject);
+    need("topic", modes.topic);
+    if (!v.email.trim()) errors2.email = labels.errorRequired;
+    else if (!EMAIL_PATTERN.test(v.email.trim()))
+      errors2.email = labels.errorEmail;
+    const message = v.message.trim();
+    if (!message) errors2.message = labels.errorRequired;
+    else if (message.length < minMessageLength) {
+      errors2.message = labels.errorTooShort.replace(
+        "{min}",
+        String(minMessageLength)
+      );
+    } else if (message.length > maxMessageLength) {
+      errors2.message = labels.errorTooLong.replace(
+        "{max}",
+        String(maxMessageLength)
+      );
+    }
+    for (const field of customFields) {
+      const value = (c[field.name] ?? "").trim();
+      if (field.required && !value) {
+        errors2[`custom:${field.name}`] = field.type === "select" ? labels.errorSelect : labels.errorRequired;
+      } else if (field.type === "email" && value && !EMAIL_PATTERN.test(value)) {
+        errors2[`custom:${field.name}`] = labels.errorEmail;
+      }
+    }
+    return errors2;
+  };
+  const errors = validate(values, custom);
+  const visibleError = (key) => showAllErrors || touched[key] ? errors[key] : void 0;
+  const handleBlur = (key) => (e) => {
+    const value = e.target.value;
+    if (value || touched[key] || showAllErrors)
+      setTouched((t) => ({ ...t, [key]: true }));
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!formData.name || !formData.email || !formData.message) {
+    if (isSubmitting) return;
+    if (Object.values(errors).some(Boolean)) {
+      setShowAllErrors(true);
+      setAnnouncement("");
+      setTimeout(() => setAnnouncement(labels.errorSummary), 0);
+      const order = [
+        "name",
+        "email",
+        "company",
+        "topic",
+        "subject",
+        ...customFields.map((f) => `custom:${f.name}`),
+        "message"
+      ];
+      const firstKey = order.find((key) => errors[key]);
+      if (firstKey) {
+        const target = formRef.current?.querySelector(
+          `[id="${id(firstKey.replace(/^custom:/, ""))}"]`
+        );
+        target?.focus();
+      }
+      return;
+    }
+    if (honeypot && trap) {
+      setBotSuccess(true);
       return;
     }
-    await submit(formData);
+    const topic = topicOptions.find((t) => t.value === values.topic);
+    const customFieldValues = {};
+    for (const field of customFields) {
+      const v = (custom[field.name] ?? "").trim();
+      if (v) customFieldValues[field.name] = v;
+    }
+    if (modes.topic !== "hidden" && topic)
+      customFieldValues.topic = topic.label;
+    if (modes.company !== "hidden" && values.company.trim()) {
+      customFieldValues.company = values.company.trim();
+    }
+    const subject = modes.subject !== "hidden" && values.subject.trim() || topic?.label || void 0;
+    const data = {
+      name: modes.name === "hidden" ? "" : values.name.trim(),
+      email: values.email.trim(),
+      subject,
+      message: values.message.trim(),
+      ...Object.keys(customFieldValues).length > 0 && {
+        customFields: customFieldValues
+      }
+    };
+    await submit(data);
   };
-  const handleInputChange = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+  const handleReset = () => {
+    reset();
+    setBotSuccess(false);
+    setTrap("");
+    setAnnouncement("");
   };
-  const handleCustomFieldChange = (fieldName, value) => {
-    setFormData((prev) => ({
-      ...prev,
-      customFields: {
-        ...prev.customFields,
-        [fieldName]: value
-      }
-    }));
+  const accent = primaryColor || DEFAULT_PRIMARY;
+  const rootStyle = {
+    ...primaryColor && { "--chz-primary": primaryColor },
+    "--chz-on-primary": primaryTextColor || readableTextColor(accent)
+  };
+  const rootProps = {
+    className: `channlize-contact ${className}`.trim(),
+    "data-theme": theme === "system" ? "auto" : theme,
+    "data-variant": variant,
+    style: rootStyle
   };
-  if (isSuccess) {
-    return /* @__PURE__ */ jsxs("div", { className: `channlize-form-success ${className}`, style: styles.success, children: [
-      /* @__PURE__ */ jsx2("p", { children: successMessage }),
-      /* @__PURE__ */ jsx2(
-        "button",
+  const stylesheet = unstyled ? null : (
+    // Static, trusted CSS; dangerouslySetInnerHTML keeps `>` intact in SSR.
+    /* @__PURE__ */ jsx3(
+      "style",
+      {
+        "data-channlize-form": "",
+        dangerouslySetInnerHTML: { __html: FORM_CSS }
+      }
+    )
+  );
+  if (succeeded) {
+    return /* @__PURE__ */ jsxs2("div", { ...rootProps, children: [
+      stylesheet,
+      /* @__PURE__ */ jsxs2(
+        "div",
         {
-          type: "button",
-          onClick: reset,
-          style: styles.button,
-          children: "Send Another Message"
+          className: "channlize-form-success",
+          style: styles.success,
+          role: "status",
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "channlize-success-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(CheckIcon, { size: 26 }) }),
+            /* @__PURE__ */ jsx3(
+              "h2",
+              {
+                ref: successRef,
+                tabIndex: -1,
+                className: "channlize-success-title",
+                children: labels.successTitle
+              }
+            ),
+            /* @__PURE__ */ jsx3("p", { className: "channlize-success-text", children: labels.successMessage }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "channlize-secondary",
+                onClick: handleReset,
+                children: labels.sendAnother
+              }
+            )
+          ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      className: `channlize-form ${className}`,
-      style: styles.form,
-      onSubmit: handleSubmit,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "channlize-field", style: styles.field, children: [
-          /* @__PURE__ */ jsx2("label", { htmlFor: "channlize-name", style: styles.label, children: "Name *" }),
-          /* @__PURE__ */ jsx2(
+  const label = (name, text, required) => /* @__PURE__ */ jsxs2("label", { htmlFor: id(name), className: "channlize-label", style: styles.label, children: [
+    text,
+    !required && /* @__PURE__ */ jsx3("span", { className: "channlize-optional", children: labels.optional })
+  ] });
+  const fieldError = (key, errorId) => {
+    const message = visibleError(key);
+    if (!message) return null;
+    return /* @__PURE__ */ jsxs2("p", { id: errorId, className: "channlize-field-error", children: [
+      /* @__PURE__ */ jsx3(AlertIcon, { size: 14 }),
+      /* @__PURE__ */ jsx3("span", { children: message })
+    ] });
+  };
+  const a11y = (key, name, required, extraDescribedBy) => {
+    const invalid = Boolean(visibleError(key));
+    const describedBy = [invalid ? id(`${name}-error`) : null, extraDescribedBy].filter(Boolean).join(" ");
+    return {
+      id: id(name),
+      "aria-invalid": invalid || void 0,
+      "aria-required": required || void 0,
+      "aria-describedby": describedBy || void 0
+    };
+  };
+  const setValue = (name) => (e) => setValues((v) => ({ ...v, [name]: e.target.value }));
+  const textField = (name, mode, inputProps) => {
+    if (mode === "hidden") return null;
+    const required = mode === "required";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "channlize-field",
+        "data-invalid": Boolean(visibleError(name)),
+        style: styles.field,
+        children: [
+          label(name, labels[name], required),
+          /* @__PURE__ */ jsx3(
             "input",
             {
-              id: "channlize-name",
-              type: "text",
-              value: formData.name || "",
-              onChange: (e) => handleInputChange("name", e.target.value),
-              required: true,
+              ...a11y(name, name, required),
+              className: "channlize-form-input",
+              name,
+              type: inputProps.type,
+              autoComplete: inputProps.autoComplete,
+              inputMode: inputProps.inputMode,
+              placeholder: labels[`${name}Placeholder`],
+              value: values[name],
+              onChange: setValue(name),
+              onBlur: handleBlur(name),
+              maxLength: name === "subject" ? 200 : 254,
               style: styles.input
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "channlize-field", style: styles.field, children: [
-          /* @__PURE__ */ jsx2("label", { htmlFor: "channlize-email", style: styles.label, children: "Email *" }),
-          /* @__PURE__ */ jsx2(
-            "input",
-            {
-              id: "channlize-email",
+          ),
+          fieldError(name, id(`${name}-error`))
+        ]
+      }
+    );
+  };
+  const topicField = modes.topic === "hidden" ? null : /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "channlize-field",
+      "data-invalid": Boolean(visibleError("topic")),
+      style: styles.field,
+      children: [
+        label("topic", labels.topic, modes.topic === "required"),
+        /* @__PURE__ */ jsxs2(
+          "select",
+          {
+            ...a11y("topic", "topic", modes.topic === "required"),
+            className: "channlize-form-select",
+            name: "topic",
+            value: values.topic,
+            "data-empty": !values.topic,
+            onChange: (e) => {
+              setValue("topic")(e);
+              setTouched((t) => ({ ...t, topic: true }));
+            },
+            onBlur: handleBlur("topic"),
+            style: styles.input,
+            children: [
+              /* @__PURE__ */ jsx3("option", { value: "", children: labels.topicPlaceholder }),
+              topicOptions.map((t) => /* @__PURE__ */ jsx3("option", { value: t.value, children: t.label }, t.value))
+            ]
+          }
+        ),
+        fieldError("topic", id("topic-error"))
+      ]
+    }
+  );
+  const messageLength = values.message.trim().length;
+  const showCounter = messageLength > maxMessageLength * 0.8;
+  const counterId = id("message-count");
+  const submitError = error ? error.statusCode === 429 || error.code === "RATE_LIMIT_ERROR" ? labels.errorRateLimit : labels.errorGeneric : null;
+  return /* @__PURE__ */ jsxs2("div", { ...rootProps, children: [
+    stylesheet,
+    /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        ref: formRef,
+        className: "channlize-form",
+        style: styles.form,
+        onSubmit: handleSubmit,
+        noValidate: true,
+        "aria-busy": isSubmitting || void 0,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "channlize-form-row", children: [
+            textField("name", modes.name, {
+              type: "text",
+              autoComplete: "name"
+            }),
+            textField("email", "required", {
               type: "email",
-              value: formData.email || "",
-              onChange: (e) => handleInputChange("email", e.target.value),
-              required: true,
-              style: styles.input
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "channlize-field", style: styles.field, children: [
-          /* @__PURE__ */ jsx2("label", { htmlFor: "channlize-subject", style: styles.label, children: "Subject" }),
-          /* @__PURE__ */ jsx2(
-            "input",
-            {
-              id: "channlize-subject",
+              autoComplete: "email",
+              inputMode: "email"
+            })
+          ] }),
+          (modes.company !== "hidden" || modes.topic !== "hidden") && /* @__PURE__ */ jsxs2("div", { className: "channlize-form-row", children: [
+            textField("company", modes.company, {
               type: "text",
-              value: formData.subject || "",
-              onChange: (e) => handleInputChange("subject", e.target.value),
-              style: styles.input
-            }
-          )
-        ] }),
-        customFields.map((field) => /* @__PURE__ */ jsxs("div", { className: "channlize-field", style: styles.field, children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: `channlize-${field.name}`, style: styles.label, children: [
-            field.label,
-            " ",
-            field.required && "*"
+              autoComplete: "organization"
+            }),
+            topicField
           ] }),
-          field.type === "select" ? /* @__PURE__ */ jsxs(
-            "select",
+          textField("subject", modes.subject, {
+            type: "text",
+            autoComplete: "off"
+          }),
+          customFields.map((field) => {
+            const key = `custom:${field.name}`;
+            const required = Boolean(field.required);
+            const common = {
+              ...a11y(key, field.name, required),
+              name: field.name,
+              value: custom[field.name] ?? "",
+              onChange: (e) => {
+                const value = e.target.value;
+                setCustom((c) => ({ ...c, [field.name]: value }));
+              },
+              onBlur: handleBlur(key)
+            };
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "channlize-field",
+                "data-invalid": Boolean(visibleError(key)),
+                style: styles.field,
+                children: [
+                  label(field.name, field.label, required),
+                  field.type === "select" ? /* @__PURE__ */ jsxs2(
+                    "select",
+                    {
+                      ...common,
+                      className: "channlize-form-select",
+                      "data-empty": !common.value,
+                      style: styles.input,
+                      children: [
+                        /* @__PURE__ */ jsx3("option", { value: "", children: field.placeholder ?? labels.topicPlaceholder }),
+                        field.options?.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option))
+                      ]
+                    }
+                  ) : field.type === "textarea" ? /* @__PURE__ */ jsx3(
+                    "textarea",
+                    {
+                      ...common,
+                      className: "channlize-form-textarea",
+                      placeholder: field.placeholder,
+                      rows: 3,
+                      style: styles.textarea
+                    }
+                  ) : /* @__PURE__ */ jsx3(
+                    "input",
+                    {
+                      ...common,
+                      className: "channlize-form-input",
+                      type: field.type,
+                      placeholder: field.placeholder,
+                      style: styles.input
+                    }
+                  ),
+                  fieldError(key, id(`${field.name}-error`))
+                ]
+              },
+              field.name
+            );
+          }),
+          /* @__PURE__ */ jsxs2(
+            "div",
             {
-              id: `channlize-${field.name}`,
-              value: formData.customFields?.[field.name] || "",
-              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
-              required: field.required,
-              style: styles.input,
+              className: "channlize-field",
+              "data-invalid": Boolean(visibleError("message")),
+              style: styles.field,
               children: [
-                /* @__PURE__ */ jsx2("option", { value: "", children: "Select..." }),
-                field.options?.map((option) => /* @__PURE__ */ jsx2("option", { value: option, children: option }, option))
+                label("message", labels.message, true),
+                /* @__PURE__ */ jsx3(
+                  "textarea",
+                  {
+                    ...a11y(
+                      "message",
+                      "message",
+                      true,
+                      showCounter ? counterId : void 0
+                    ),
+                    className: "channlize-form-textarea",
+                    name: "message",
+                    rows: 5,
+                    placeholder: labels.messagePlaceholder,
+                    value: values.message,
+                    onChange: setValue("message"),
+                    onBlur: handleBlur("message"),
+                    style: styles.textarea
+                  }
+                ),
+                (visibleError("message") || showCounter) && /* @__PURE__ */ jsxs2("div", { className: "channlize-field-meta", children: [
+                  fieldError("message", id("message-error")),
+                  showCounter && /* @__PURE__ */ jsxs2(
+                    "span",
+                    {
+                      id: counterId,
+                      className: "channlize-counter",
+                      "data-over": messageLength > maxMessageLength,
+                      children: [
+                        messageLength,
+                        "/",
+                        maxMessageLength
+                      ]
+                    }
+                  )
+                ] })
               ]
             }
-          ) : field.type === "textarea" ? /* @__PURE__ */ jsx2(
-            "textarea",
-            {
-              id: `channlize-${field.name}`,
-              value: formData.customFields?.[field.name] || "",
-              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
-              required: field.required,
-              style: styles.textarea
-            }
-          ) : /* @__PURE__ */ jsx2(
-            "input",
-            {
-              id: `channlize-${field.name}`,
-              type: field.type,
-              value: formData.customFields?.[field.name] || "",
-              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
-              required: field.required,
-              style: styles.input
-            }
-          )
-        ] }, field.name)),
-        /* @__PURE__ */ jsxs("div", { className: "channlize-field", style: styles.field, children: [
-          /* @__PURE__ */ jsx2("label", { htmlFor: "channlize-message", style: styles.label, children: "Message *" }),
-          /* @__PURE__ */ jsx2(
-            "textarea",
+          ),
+          honeypot && // Bots fill every input; people never see this one. No `id`, so
+          // host-page form helpers keyed on ids skip it too.
+          /* @__PURE__ */ jsx3("div", { className: "channlize-honeypot", "aria-hidden": "true", children: /* @__PURE__ */ jsxs2("label", { children: [
+            "Leave this field empty",
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "text",
+                name: "website",
+                tabIndex: -1,
+                autoComplete: "off",
+                value: trap,
+                onChange: (e) => setTrap(e.target.value)
+              }
+            )
+          ] }) }),
+          submitError && /* @__PURE__ */ jsxs2("div", { className: "channlize-error", role: "alert", style: styles.error, children: [
+            /* @__PURE__ */ jsx3(AlertIcon, { size: 18 }),
+            /* @__PURE__ */ jsx3("span", { children: submitError })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "channlize-form-footer", children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "submit",
+                className: "channlize-submit",
+                disabled: isSubmitting,
+                style: styles.button,
+                children: [
+                  isSubmitting && /* @__PURE__ */ jsx3("span", { className: "channlize-form-spinner", "aria-hidden": "true" }),
+                  isSubmitting ? labels.submitting : labels.submit
+                ]
+              }
+            ),
+            labels.footnote && /* @__PURE__ */ jsx3("p", { className: "channlize-footnote", children: labels.footnote })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "p",
             {
-              id: "channlize-message",
-              value: formData.message || "",
-              onChange: (e) => handleInputChange("message", e.target.value),
-              required: true,
-              rows: 4,
-              style: styles.textarea
+              className: "channlize-visually-hidden",
+              role: "status",
+              "aria-live": "polite",
+              children: announcement
             }
           )
-        ] }),
-        error && /* @__PURE__ */ jsx2("div", { className: "channlize-error", style: styles.error, children: error.message }),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "submit",
-            disabled: isSubmitting,
-            style: styles.button,
-            children: isSubmitting ? "Sending..." : submitText
-          }
-        )
-      ]
-    }
-  );
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/ContactForm.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function ContactForm(props) {
-  return /* @__PURE__ */ jsx3(Form, { ...props });
+  return /* @__PURE__ */ jsx4(Form, { ...props });
 }
 
 // src/components/SupportChat.tsx
-import { useState as useState4, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function SupportChat({
-  autoConnect = true,
-  metadata,
-  onMessage,
-  onError,
-  sessionId,
-  persistSession,
-  storageKey,
-  className = "",
-  styles = {},
-  placeholder = "Type your message...",
-  title = "Support Chat",
-  sendButtonText = "Send",
-  showTimestamps = true,
-  allowAttachments = false
-}) {
-  const [messageInput, setMessageInput] = useState4("");
-  const [attachments, setAttachments] = useState4([]);
-  const messagesEndRef = useRef2(null);
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
+
+// src/components/chat/internal.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect as useEffect3,
+  useLayoutEffect,
+  useState as useState4
+} from "react";
+
+// src/components/chat/styles.ts
+var WIDGET_CSS = `
+.channlize-widget{
+  --chz-primary:#2563eb;
+  --chz-on-primary:#ffffff;
+  --chz-bg:#ffffff;
+  --chz-surface:#f6f7f9;
+  --chz-bubble:#eff1f4;
+  --chz-text:#111827;
+  --chz-muted:#5d6572;
+  --chz-border:#e3e6eb;
+  --chz-danger:#b91c1c;
+  --chz-danger-bg:#fdecec;
+  --chz-warn-bg:#fff6e0;
+  --chz-warn-text:#7a4b00;
+  --chz-online:#22c55e;
+  --chz-away:#f59e0b;
+  --chz-offline:#9ca3af;
+  --chz-shadow:0 24px 48px -12px rgba(15,23,42,.28),0 0 0 1px rgba(15,23,42,.06);
+  --chz-radius:18px;
+  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  font-size:14px;
+  line-height:1.45;
+  font-weight:400;
+  font-style:normal;
+  letter-spacing:normal;
+  text-transform:none;
+  text-align:left;
+  color:var(--chz-text);
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+  -webkit-tap-highlight-color:transparent;
+}
+.channlize-widget[data-theme="dark"]{
+  --chz-bg:#16181d;
+  --chz-surface:#1f2228;
+  --chz-bubble:#2a2e36;
+  --chz-text:#f2f4f7;
+  --chz-muted:#a7aebb;
+  --chz-border:#2f343d;
+  --chz-danger:#ff9b9b;
+  --chz-danger-bg:#3b1e22;
+  --chz-warn-bg:#352a10;
+  --chz-warn-text:#f6c768;
+  --chz-offline:#6b7280;
+  --chz-shadow:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
+}
+@media (prefers-color-scheme: dark){
+  .channlize-widget[data-theme="auto"]{
+    --chz-bg:#16181d;
+    --chz-surface:#1f2228;
+    --chz-bubble:#2a2e36;
+    --chz-text:#f2f4f7;
+    --chz-muted:#a7aebb;
+    --chz-border:#2f343d;
+    --chz-danger:#ff9b9b;
+    --chz-danger-bg:#3b1e22;
+    --chz-warn-bg:#352a10;
+    --chz-warn-text:#f6c768;
+    --chz-offline:#6b7280;
+    --chz-shadow:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
+  }
+}
+.channlize-widget *,.channlize-widget *::before,.channlize-widget *::after{box-sizing:border-box;letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-indent:0;}
+.channlize-widget :where(h1,h2,h3,h4,p,ul,ol,li,figure,form,fieldset){margin:0;padding:0;border:0;font:inherit;color:inherit;background:none;}
+.channlize-widget :where(button,textarea,input){font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-shadow:none;margin:0;}
+.channlize-widget :where(button){appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:0;box-shadow:none;cursor:pointer;width:auto;height:auto;min-width:0;min-height:0;line-height:inherit;text-align:center;text-decoration:none;}
+.channlize-widget :where(button:disabled){cursor:default;}
+.channlize-widget :where(img,svg){display:block;max-width:100%;border:0;}
+.channlize-widget :where(a){color:inherit;}
+.channlize-widget :where(:focus-visible){outline:2px solid var(--chz-primary);outline-offset:2px;}
+
+/* ---------- Floating widget (ChannlizeChat) ---------- */
+.channlize-floating{position:static;}
+.channlize-floating .channlize-launcher-wrap,.channlize-floating .channlize-panel{position:fixed;z-index:var(--chz-z,2147483000);}
+.channlize-floating[data-position$="right"] .channlize-launcher-wrap,.channlize-floating[data-position$="right"] .channlize-panel{right:calc(var(--chz-x) + env(safe-area-inset-right,0px));}
+.channlize-floating[data-position$="left"] .channlize-launcher-wrap,.channlize-floating[data-position$="left"] .channlize-panel{left:calc(var(--chz-x) + env(safe-area-inset-left,0px));}
+.channlize-floating[data-position^="bottom"] .channlize-launcher-wrap,.channlize-floating[data-position^="bottom"] .channlize-panel{bottom:calc(var(--chz-y) + env(safe-area-inset-bottom,0px));}
+.channlize-floating[data-position^="top"] .channlize-launcher-wrap,.channlize-floating[data-position^="top"] .channlize-panel{top:calc(var(--chz-y) + env(safe-area-inset-top,0px));}
+
+.channlize-launcher{position:relative;display:flex;align-items:center;justify-content:center;width:var(--chz-launcher-size,56px);height:var(--chz-launcher-size,56px);border-radius:999px;background:var(--chz-launcher-bg,var(--chz-primary));color:var(--chz-launcher-fg,var(--chz-on-primary));box-shadow:0 8px 24px -6px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.12);transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease,box-shadow .2s ease,background-color .2s ease,visibility 0s;}
+.channlize-launcher:hover{transform:translateY(-2px) scale(1.04);background:var(--chz-launcher-hover,var(--chz-launcher-bg,var(--chz-primary)));box-shadow:0 12px 28px -6px rgba(15,23,42,.4),0 2px 6px rgba(15,23,42,.12);}
+.channlize-launcher:active{transform:scale(.96);}
+.channlize-launcher:focus-visible{outline:3px solid var(--chz-launcher-bg,var(--chz-primary));outline-offset:3px;}
+.channlize-launcher-custom{display:block;cursor:pointer;}
+.channlize-launcher-wrap{transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s;}
+.channlize-floating[data-open="true"] .channlize-launcher-wrap{opacity:0;transform:scale(.6);visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;}
+.channlize-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d92d20;color:#ffffff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--chz-bg);animation:channlize-pop .3s cubic-bezier(.2,.8,.2,1);}
+
+.channlize-panel{display:flex;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;}
+.channlize-floating[data-position="bottom-left"] .channlize-panel{transform-origin:bottom left;}
+.channlize-floating[data-position="top-right"] .channlize-panel{transform-origin:top right;transform:translateY(-16px) scale(.97);}
+.channlize-floating[data-position="top-left"] .channlize-panel{transform-origin:top left;transform:translateY(-16px) scale(.97);}
+.channlize-floating[data-open="true"] .channlize-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s;}
+.channlize-panel .channlize-chat-container{width:var(--chz-panel-width,380px);height:640px;max-height:calc(100vh - var(--chz-y) * 2);max-height:calc(100dvh - var(--chz-y) * 2);min-height:0;border:0;box-shadow:var(--chz-shadow);}
+
+.channlize-widget[data-animate="false"] *,.channlize-widget[data-animate="false"]{transition:none !important;animation:none !important;}
+@media (prefers-reduced-motion: reduce){
+  .channlize-widget,.channlize-widget *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
+  .channlize-panel{transform:none !important;}
+}
+
+@media (max-width: 640px){
+  .channlize-floating[data-hide-mobile="true"] .channlize-launcher-wrap{display:none;}
+  .channlize-floating .channlize-panel{inset:0 !important;width:100%;height:100%;transform-origin:bottom center !important;}
+  .channlize-panel .channlize-chat-container{width:100% !important;height:100% !important;max-height:none !important;border-radius:0 !important;box-shadow:none !important;}
+  .channlize-panel .channlize-chat-header{padding-top:max(14px, env(safe-area-inset-top,0px));}
+  .channlize-panel .channlize-chat-input-container{padding-bottom:max(12px, env(safe-area-inset-bottom,0px));}
+}
+
+/* ---------- Chat container ---------- */
+.channlize-chat-container{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;background:var(--chz-bg);color:var(--chz-text);border:1px solid var(--chz-border);border-radius:16px;isolation:isolate;}
+
+/* Header */
+.channlize-chat-header{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--chz-primary);color:var(--chz-on-primary);flex-shrink:0;}
+.channlize-header-text{flex:1;min-width:0;}
+.channlize-chat-title{font-size:15px;font-weight:650;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.channlize-chat-status{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.channlize-chat-status>span:last-child{overflow:hidden;text-overflow:ellipsis;}
+.channlize-status-dot{flex-shrink:0;width:8px;height:8px;border-radius:999px;background:var(--chz-online);box-shadow:0 0 0 2px color-mix(in srgb, var(--chz-on-primary) 35%, transparent);}
+.channlize-chat-status[data-status="connecting"] .channlize-status-dot{background:var(--chz-away);animation:channlize-pulse 1.4s ease-in-out infinite;}
+.channlize-chat-status[data-status="offline"] .channlize-status-dot{background:var(--chz-offline);}
+.channlize-header-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;}
+.channlize-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:inherit;transition:background-color .15s ease;}
+.channlize-icon-btn:hover{background:rgba(127,127,127,.16);background:color-mix(in srgb, currentColor 14%, transparent);}
+.channlize-chat-header .channlize-icon-btn:focus-visible{outline-color:var(--chz-on-primary);outline-offset:0;}
+
+/* Avatars */
+.channlize-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:999px;overflow:hidden;background:var(--chz-primary);color:var(--chz-on-primary);font-size:11px;font-weight:650;line-height:1;user-select:none;}
+.channlize-avatar img{width:100%;height:100%;object-fit:cover;}
+.channlize-header-avatar{width:40px;height:40px;font-size:15px;background:rgba(255,255,255,.18);background:color-mix(in srgb, var(--chz-on-primary) 18%, transparent);color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--chz-on-primary) 20%, transparent);}
+
+/* Overflow menu */
+.channlize-menu-wrap{position:relative;}
+.channlize-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:3;min-width:200px;padding:6px;border-radius:12px;background:var(--chz-bg);color:var(--chz-text);border:1px solid var(--chz-border);box-shadow:0 12px 32px -8px rgba(15,23,42,.3);animation:channlize-fade-in .14s ease;}
+.channlize-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;text-align:left;font-size:14px;color:var(--chz-text);}
+.channlize-menu-item:hover,.channlize-menu-item:focus-visible{background:var(--chz-surface);outline:none;}
+.channlize-menu-item svg{color:var(--chz-muted);}
+
+/* Banner */
+.channlize-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;line-height:1.35;background:var(--chz-warn-bg);color:var(--chz-warn-text);border-bottom:1px solid var(--chz-border);flex-shrink:0;animation:channlize-fade-in .2s ease;}
+.channlize-banner[data-tone="error"]{background:var(--chz-danger-bg);color:var(--chz-danger);}
+.channlize-banner-text{flex:1;min-width:0;}
+.channlize-banner-action{font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:4px;padding:2px 4px;}
+.channlize-spinner{width:12px;height:12px;flex-shrink:0;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:channlize-spin .8s linear infinite;}
+
+/* Messages */
+.channlize-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;background:var(--chz-bg);}
+.channlize-day{display:flex;align-items:center;gap:10px;margin:8px 0 12px;font-size:12px;font-weight:550;color:var(--chz-muted);}
+.channlize-day::before,.channlize-day::after{content:"";flex:1;height:1px;background:var(--chz-border);}
+.channlize-group{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;}
+.channlize-group[data-author="user"]{justify-content:flex-end;}
+.channlize-group-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:82%;}
+.channlize-group[data-author="user"] .channlize-group-body{align-items:flex-end;}
+.channlize-group-avatar{margin-top:20px;}
+.channlize-group-name{font-size:12px;font-weight:600;color:var(--chz-muted);padding:0 4px 1px;}
+.channlize-message{position:relative;max-width:100%;padding:9px 13px;border-radius:var(--chz-radius);font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
+.channlize-message-agent{background:var(--chz-bubble);color:var(--chz-text);}
+.channlize-message-user{background:var(--chz-primary);color:var(--chz-on-primary);}
+.channlize-message-agent[data-pos="first"]{border-bottom-left-radius:6px;}
+.channlize-message-agent[data-pos="middle"]{border-top-left-radius:6px;border-bottom-left-radius:6px;}
+.channlize-message-agent[data-pos="last"]{border-top-left-radius:6px;}
+.channlize-message-user[data-pos="first"]{border-bottom-right-radius:6px;}
+.channlize-message-user[data-pos="middle"]{border-top-right-radius:6px;border-bottom-right-radius:6px;}
+.channlize-message-user[data-pos="last"]{border-top-right-radius:6px;}
+.channlize-message[data-status="sending"]{opacity:.7;}
+.channlize-message[data-status="failed"]{opacity:.85;box-shadow:0 0 0 2px var(--chz-danger);}
+.channlize-message-content a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
+.channlize-message-content a:hover{text-decoration-thickness:2px;}
+.channlize-message-content:empty{display:none;}
+.channlize-message-timestamp{font-size:11.5px;color:var(--chz-muted);padding:1px 4px 0;}
+.channlize-message-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--chz-muted);padding:1px 4px 0;}
+.channlize-message-meta[data-status="failed"]{color:var(--chz-danger);}
+.channlize-link-btn{font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:4px;padding:0 2px;color:inherit;}
+
+/* Attachments */
+.channlize-attachments{display:flex;flex-direction:column;gap:6px;margin-top:6px;white-space:normal;}
+.channlize-message-content:empty+.channlize-attachments{margin-top:0;}
+.channlize-attachment-image{display:block;border-radius:12px;overflow:hidden;max-width:240px;background:rgba(127,127,127,.12);}
+.channlize-attachment-image img{width:100%;height:auto;max-height:220px;object-fit:cover;}
+.channlize-attachment-file{display:flex;align-items:center;gap:10px;min-width:0;max-width:260px;padding:8px 10px;border-radius:12px;background:rgba(127,127,127,.14);background:color-mix(in srgb, currentColor 10%, transparent);color:inherit;text-decoration:none;}
+a.channlize-attachment-file:hover{background:color-mix(in srgb, currentColor 16%, transparent);}
+.channlize-attachment-name{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.channlize-attachment-size{display:block;font-size:11.5px;opacity:.8;}
+.channlize-attachment-text{min-width:0;}
+
+/* Welcome / empty state */
+.channlize-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 12px 12px;animation:channlize-fade-in .3s ease;}
+.channlize-welcome .channlize-avatar{width:52px;height:52px;font-size:18px;margin-bottom:8px;}
+.channlize-welcome-title{font-size:18px;font-weight:650;line-height:1.3;color:var(--chz-text);}
+.channlize-welcome-text{font-size:14px;color:var(--chz-muted);max-width:280px;}
+.channlize-notice{margin:4px 0 0;font-size:12.5px;color:var(--chz-muted);}
+.channlize-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;}
+.channlize-chip{padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:550;line-height:1.3;color:var(--chz-text);background:var(--chz-bg);border:1px solid var(--chz-border);transition:border-color .15s ease,background-color .15s ease;text-align:left;}
+.channlize-chip:hover:not(:disabled){border-color:var(--chz-primary);background:var(--chz-surface);}
+.channlize-chip:disabled{opacity:.55;}
+
+/* Composer */
+.channlize-chat-input-container{flex-shrink:0;padding:10px 12px 12px;background:var(--chz-bg);border-top:1px solid var(--chz-border);}
+.channlize-composer{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 12px;border-radius:22px;background:var(--chz-surface);border:1px solid var(--chz-border);transition:border-color .15s ease,box-shadow .15s ease;}
+.channlize-composer:focus-within{border-color:var(--chz-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);box-shadow:0 0 0 3px color-mix(in srgb, var(--chz-primary) 18%, transparent);}
+.channlize-composer[data-has-attach="true"]{padding-left:4px;}
+.channlize-input{flex:1;min-width:0;display:block;resize:none;border:0;outline:none;background:transparent;color:var(--chz-text);padding:7px 0;max-height:140px;font-size:15px;line-height:1.4;overflow-y:auto;box-shadow:none;border-radius:0;}
+.channlize-input:focus,.channlize-input:focus-visible{outline:none;}
+.channlize-input::placeholder{color:var(--chz-muted);opacity:1;}
+.channlize-input:disabled{opacity:.7;}
+.channlize-send{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:999px;background:var(--chz-primary);color:var(--chz-on-primary);transition:opacity .15s ease,transform .15s ease,background-color .15s ease;}
+.channlize-send:hover:not(:disabled){transform:scale(1.05);}
+.channlize-send:disabled{background:var(--chz-border);color:var(--chz-muted);}
+.channlize-composer .channlize-icon-btn{width:34px;height:34px;border-radius:999px;color:var(--chz-muted);}
+.channlize-composer .channlize-icon-btn:hover{color:var(--chz-text);}
+.channlize-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
+.channlize-pending-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
+.channlize-pending-file{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 4px 4px 10px;border-radius:999px;background:var(--chz-surface);border:1px solid var(--chz-border);font-size:12.5px;}
+.channlize-pending-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
+.channlize-pending-file button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;color:var(--chz-muted);}
+.channlize-pending-file button:hover{background:var(--chz-border);color:var(--chz-text);}
+.channlize-composer-footer{display:flex;justify-content:flex-end;padding:4px 6px 0;font-size:11.5px;color:var(--chz-muted);}
+.channlize-composer-footer[data-over="true"]{color:var(--chz-danger);}
+@media (max-width: 640px), (pointer: coarse){
+  .channlize-input{font-size:16px;}
+}
+
+/* End-chat confirmation sheet */
+.channlize-sheet-backdrop{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(15,23,42,.35);animation:channlize-fade-in .15s ease;}
+.channlize-sheet{width:100%;padding:20px 18px max(18px, env(safe-area-inset-bottom,0px));background:var(--chz-bg);color:var(--chz-text);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(15,23,42,.18);animation:channlize-slide-up .22s cubic-bezier(.2,.8,.2,1);}
+.channlize-sheet-title{font-size:16px;font-weight:650;}
+.channlize-sheet-text{margin-top:4px;font-size:14px;color:var(--chz-muted);}
+.channlize-sheet-actions{display:flex;gap:8px;margin-top:16px;}
+.channlize-btn{flex:1;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;transition:background-color .15s ease,filter .15s ease;}
+.channlize-btn-secondary{background:var(--chz-surface);color:var(--chz-text);border:1px solid var(--chz-border);}
+.channlize-btn-secondary:hover{background:var(--chz-border);}
+.channlize-btn-danger{background:#b42318;color:#ffffff;}
+.channlize-btn-danger:hover{filter:brightness(.92);}
+.channlize-btn-primary{background:var(--chz-primary);color:var(--chz-on-primary);}
+
+.channlize-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
+
+@keyframes channlize-spin{to{transform:rotate(360deg);}}
+@keyframes channlize-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
+@keyframes channlize-fade-in{from{opacity:0;}to{opacity:1;}}
+@keyframes channlize-slide-up{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
+@keyframes channlize-pop{from{transform:scale(.4);}to{transform:scale(1);}}
+`;
+
+// src/components/chat/internal.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var StylesContext = createContext2(false);
+function WidgetStylesProvider({ children }) {
+  return /* @__PURE__ */ jsxs3(StylesContext.Provider, { value: true, children: [
+    /* @__PURE__ */ jsx5(WidgetStyles, {}),
+    children
+  ] });
+}
+function WidgetStyles({ ifMissing = false }) {
+  const provided = useContext2(StylesContext);
+  if (ifMissing && provided) return null;
+  return /* @__PURE__ */ jsx5(
+    "style",
+    {
+      "data-channlize-widget": "",
+      dangerouslySetInnerHTML: { __html: WIDGET_CSS }
+    }
+  );
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
+function useDelayedFlag(value, delayMs) {
+  const [elapsed, setElapsed] = useState4(false);
+  useEffect3(() => {
+    if (!value) return;
+    const timer = setTimeout(() => setElapsed(true), delayMs);
+    return () => {
+      clearTimeout(timer);
+      setElapsed(false);
+    };
+  }, [value, delayMs]);
+  return value && elapsed;
+}
+function Avatar({
+  name,
+  url,
+  node,
+  className = ""
+}) {
+  const [failedUrl, setFailedUrl] = useState4(null);
+  const src = safeUrl(url);
+  if (node) {
+    return /* @__PURE__ */ jsx5("span", { className: `channlize-avatar ${className}`, "aria-hidden": "true", children: node });
+  }
+  return /* @__PURE__ */ jsx5("span", { className: `channlize-avatar ${className}`, "aria-hidden": "true", children: src && failedUrl !== src ? /* @__PURE__ */ jsx5(
+    "img",
+    {
+      src,
+      alt: "",
+      referrerPolicy: "no-referrer",
+      onError: () => setFailedUrl(src)
+    }
+  ) : initials(name) });
+}
+
+// src/components/SupportChat.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultSupportChatLabels = {
+  online: "Online",
+  connecting: "Connecting\u2026",
+  reconnecting: "Reconnecting\u2026",
+  offline: "Offline",
+  connectionLost: "Connection lost. New replies may be delayed.",
+  startFailed: "We couldn\u2019t start the chat.",
+  retry: "Retry",
+  today: "Today",
+  yesterday: "Yesterday",
+  you: "You",
+  sending: "Sending\u2026",
+  failed: "Not sent",
+  remove: "Remove",
+  moreOptions: "More options",
+  minimize: "Minimize chat",
+  endChat: "End conversation",
+  endChatTitle: "End this conversation?",
+  endChatDescription: "The chat history will be cleared from this device. You can start a new conversation at any time.",
+  endChatConfirm: "End conversation",
+  cancel: "Cancel",
+  attach: "Attach files",
+  removeAttachment: "Remove attachment",
+  messages: "Messages",
+  conversationEnded: "Conversation ended. Send a message to start a new one.",
+  charactersLeft: "characters"
+};
+var DEFAULT_PRIMARY2 = "#2563eb";
+var MAX_FILES = 10;
+var STATUS_DELAY_MS = 3e3;
+var BANNER_DELAY_MS = 5e3;
+var localIdCounter = 0;
+function createPendingMessage(content, files) {
+  localIdCounter += 1;
+  return {
+    localId: `local-${Date.now()}-${localIdCounter}`,
+    content,
+    files,
+    timestamp: /* @__PURE__ */ new Date(),
+    status: "sending"
+  };
+}
+function SupportChat({
+  autoConnect = true,
+  metadata,
+  onMessage,
+  onError,
+  sessionId,
+  persistSession,
+  storageKey,
+  className = "",
+  styles = {},
+  placeholder = "Write a message\u2026",
+  title = "Support",
+  sendButtonText = "Send message",
+  showTimestamps = true,
+  allowAttachments = false,
+  avatarUrl,
+  avatar,
+  statusText = "Replies in a few minutes",
+  greeting = "Hi there!",
+  welcomeMessage = "Ask us anything. We\u2019re here to help.",
+  suggestions,
+  theme = "auto",
+  primaryColor,
+  primaryTextColor,
+  locale,
+  maxLength = 5e3,
+  allowEndChat = true,
+  onMinimize,
+  labels: labelOverrides
+}) {
+  const labels = useMemo2(
+    () => ({ ...defaultSupportChatLabels, ...labelOverrides }),
+    [labelOverrides]
+  );
+  const { config } = useChannlize();
+  const baseUrl = config.baseUrl || "https://api.channlize.com";
+  const [text, setText] = useState5("");
+  const [files, setFiles] = useState5([]);
+  const [pending, setPending] = useState5([]);
+  const [sendError, setSendError] = useState5(null);
+  const [menuOpen, setMenuOpen] = useState5(false);
+  const [confirmOpen, setConfirmOpen] = useState5(false);
+  const [ended, setEnded] = useState5(false);
+  const rootId = useId();
+  const titleId = `${rootId}-title`;
+  const menuId = `${rootId}-menu`;
+  const confirmTitleId = `${rootId}-confirm-title`;
+  const confirmTextId = `${rootId}-confirm-text`;
+  const listRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const menuWrapRef = useRef3(null);
+  const moreButtonRef = useRef3(null);
+  const cancelRef = useRef3(null);
+  const stickToBottomRef = useRef3(true);
+  const startingRef = useRef3(null);
   const {
     session,
     messages,
@@ -495,7 +1706,8 @@ function SupportChat({
     error,
     sendMessage,
     startSession,
-    endSession
+    endSession,
+    reconnect
   } = useChatSession({
     autoConnect,
     metadata,
@@ -505,182 +1717,730 @@ function SupportChat({
     persistSession,
     storageKey
   });
-  useEffect2(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!messageInput.trim() && attachments.length === 0) return;
-    try {
-      await sendMessage(messageInput, attachments.length > 0 ? attachments : void 0);
-      setMessageInput("");
-      setAttachments([]);
-    } catch (err) {
-      console.error("Failed to send message:", err);
+  const sseFailed = error?.code === "SSE_ERROR";
+  const ownSendError = !!error && error === sendError;
+  const startFailed = !session && !!error && !isConnecting && !ownSendError;
+  const streamDown = !!session && !isConnected && !sseFailed;
+  const showConnecting = useDelayedFlag(
+    isConnecting || streamDown,
+    STATUS_DELAY_MS
+  );
+  const showReconnectBanner = useDelayedFlag(
+    streamDown && !isConnecting,
+    BANNER_DELAY_MS
+  );
+  const status = sseFailed || startFailed ? "offline" : showConnecting ? "connecting" : "online";
+  const statusLabel = status === "offline" ? labels.offline : status === "connecting" ? session ? labels.reconnecting : labels.connecting : statusText ? `${labels.online} \xB7 ${statusText}` : labels.online;
+  const displayMessages = useMemo2(() => {
+    const fromServer = messages.map(
+      (m, i) => ({
+        key: m.id || `m-${i}`,
+        author: m.author === "user" ? "user" : "agent",
+        content: typeof m.content === "string" ? m.content : "",
+        timestamp: isValidDate(m.timestamp) ? m.timestamp : new Date(m.timestamp),
+        authorName: m.author === "user" ? void 0 : m.authorData?.name || title,
+        avatarUrl: m.author === "user" ? void 0 : m.authorData?.avatarUrl,
+        attachments: toDisplayAttachments(m.attachments, baseUrl),
+        status: "sent",
+        message: m
+      })
+    );
+    const local = pending.map((p) => ({
+      key: p.localId,
+      localId: p.localId,
+      author: "user",
+      content: p.content,
+      timestamp: p.timestamp,
+      attachments: p.files.map((f, i) => ({
+        key: `${p.localId}-${i}`,
+        name: f.name,
+        size: f.size,
+        type: f.type
+      })),
+      status: p.status
+    }));
+    return [...fromServer, ...local];
+  }, [messages, pending, title, baseUrl]);
+  const sections = useMemo2(
+    () => groupMessages(displayMessages),
+    [displayMessages]
+  );
+  const lastMessage = displayMessages[displayMessages.length - 1];
+  useIsomorphicLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    if (stickToBottomRef.current || lastMessage?.localId) {
+      el.scrollTop = el.scrollHeight;
     }
+  }, [lastMessage?.key, lastMessage?.status, displayMessages.length]);
+  const handleScroll = () => {
+    const el = listRef.current;
+    if (!el) return;
+    stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
   };
-  const handleFileChange = (e) => {
-    if (e.target.files) {
-      setAttachments(Array.from(e.target.files));
+  const handleMediaLoad = () => {
+    const el = listRef.current;
+    if (el && stickToBottomRef.current) el.scrollTop = el.scrollHeight;
+  };
+  useIsomorphicLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 140)}px`;
+  }, [text]);
+  const deliver = useCallback4(
+    async (item) => {
+      setPending(
+        (prev) => prev.map(
+          (p) => p.localId === item.localId ? { ...p, status: "sending" } : p
+        )
+      );
+      try {
+        if (!session) {
+          if (!startingRef.current) {
+            startingRef.current = startSession().finally(() => {
+              startingRef.current = null;
+            });
+          }
+          await startingRef.current;
+        }
+        await sendMessage(
+          item.content,
+          item.files.length > 0 ? item.files : void 0
+        );
+        setPending((prev) => prev.filter((p) => p.localId !== item.localId));
+      } catch (err) {
+        setSendError(err);
+        setPending(
+          (prev) => prev.map(
+            (p) => p.localId === item.localId ? { ...p, status: "failed" } : p
+          )
+        );
+      }
+    },
+    [session, startSession, sendMessage]
+  );
+  const send = (raw, attached) => {
+    const content = raw.trim() || attached.map((f) => f.name).join(", ");
+    if (!content) return;
+    const item = createPendingMessage(content, attached);
+    stickToBottomRef.current = true;
+    setEnded(false);
+    setPending((prev) => [...prev, item]);
+    void deliver(item);
+  };
+  const canSend = (!!text.trim() || files.length > 0) && !isConnecting;
+  const handleSubmit = (e) => {
+    e?.preventDefault();
+    if (!canSend) return;
+    send(text, files);
+    setText("");
+    setFiles([]);
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key !== "Enter" || e.shiftKey || e.altKey) return;
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (typeof window !== "undefined" && window.matchMedia?.("(hover: none) and (pointer: coarse)").matches) {
+      return;
     }
+    e.preventDefault();
+    handleSubmit();
   };
-  const formatTimestamp = (date) => {
-    if (!date || isNaN(date.getTime())) {
-      return "";
+  const handleFileChange = (e) => {
+    const selected = e.target.files ? Array.from(e.target.files) : [];
+    if (selected.length > 0) {
+      setFiles((prev) => [...prev, ...selected].slice(0, MAX_FILES));
     }
-    try {
-      return new Intl.DateTimeFormat("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true
-      }).format(date);
-    } catch (error2) {
-      console.warn("Failed to format timestamp:", error2);
-      return "";
+    e.target.value = "";
+  };
+  const retry = (localId) => {
+    const item = pending.find((p) => p.localId === localId);
+    if (item) void deliver(item);
+  };
+  const removePending = (localId) => {
+    setPending((prev) => prev.filter((p) => p.localId !== localId));
+  };
+  useEffect4(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e) => {
+      if (!menuWrapRef.current?.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [menuOpen]);
+  useEffect4(() => {
+    if (confirmOpen) cancelRef.current?.focus();
+  }, [confirmOpen]);
+  const closeConfirm = () => {
+    setConfirmOpen(false);
+    moreButtonRef.current?.focus();
+  };
+  const confirmEnd = async () => {
+    setConfirmOpen(false);
+    await endSession();
+    setPending([]);
+    setEnded(true);
+    inputRef.current?.focus();
+  };
+  const handleRootKeyDown = (e) => {
+    if (e.key !== "Escape") return;
+    if (confirmOpen) {
+      e.stopPropagation();
+      closeConfirm();
+    } else if (menuOpen) {
+      e.stopPropagation();
+      setMenuOpen(false);
+      moreButtonRef.current?.focus();
+    } else if (onMinimize) {
+      e.stopPropagation();
+      onMinimize();
     }
   };
-  if (!session && !isConnecting) {
-    return /* @__PURE__ */ jsxs2("div", { className: `channlize-chat-container ${className}`, style: styles.container, children: [
-      /* @__PURE__ */ jsx4("div", { className: "channlize-chat-header", style: styles.header, children: /* @__PURE__ */ jsx4("h3", { children: title }) }),
-      /* @__PURE__ */ jsx4("div", { className: "channlize-chat-start", children: /* @__PURE__ */ jsx4("button", { onClick: startSession, style: styles.button, children: "Start Chat" }) }),
-      error && /* @__PURE__ */ jsx4("div", { className: "channlize-error", style: styles.error, children: error.message })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: `channlize-chat-container ${className}`, style: styles.container, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "channlize-chat-header", style: styles.header, children: [
-      /* @__PURE__ */ jsx4("h3", { children: title }),
-      /* @__PURE__ */ jsxs2("div", { className: "channlize-chat-status", style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-        isConnecting && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx4("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#f59e0b"
-          } }),
-          /* @__PURE__ */ jsx4("span", { children: "Connecting..." })
-        ] }),
-        isConnected && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx4("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#10b981"
-          } }),
-          /* @__PURE__ */ jsx4("span", { children: "Connected" })
-        ] }),
-        !isConnected && !isConnecting && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx4("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#ef4444"
-          } }),
-          /* @__PURE__ */ jsx4("span", { children: "Disconnected" })
-        ] })
-      ] }),
-      session && /* @__PURE__ */ jsx4(
-        "button",
-        {
-          onClick: endSession,
-          style: { ...styles.button, fontSize: "0.875rem" },
-          type: "button",
-          children: "End Chat"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "channlize-messages", style: styles.messagesContainer, children: [
-      messages.length === 0 && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", padding: "2rem", color: "#666" }, children: "No messages yet. Start the conversation!" }),
-      messages.map((message, index) => /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: `channlize-message ${message.author === "user" ? "channlize-message-user" : "channlize-message-agent"}`,
-          style: {
-            ...styles.message,
-            ...message.author === "user" ? styles.userMessage : styles.agentMessage
-          },
-          children: [
-            /* @__PURE__ */ jsx4("div", { className: "channlize-message-content", children: message.content }),
-            showTimestamps && /* @__PURE__ */ jsx4("div", { className: "channlize-message-timestamp", style: styles.timestamp, children: formatTimestamp(message.timestamp) })
-          ]
-        },
-        message.id || index
-      )),
-      /* @__PURE__ */ jsx4("div", { ref: messagesEndRef })
-    ] }),
-    error && /* @__PURE__ */ jsx4("div", { className: "channlize-error", style: styles.error, children: error.message }),
-    /* @__PURE__ */ jsxs2(
-      "form",
+  let banner = null;
+  if (sseFailed || startFailed) {
+    banner = /* @__PURE__ */ jsxs4(
+      "div",
       {
-        className: "channlize-chat-input-container",
-        style: styles.inputContainer,
-        onSubmit: handleSubmit,
+        className: "channlize-banner channlize-error",
+        "data-tone": "error",
+        role: "alert",
+        style: styles.error,
         children: [
-          allowAttachments && /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx4(
-              "input",
+          /* @__PURE__ */ jsx6(AlertIcon, { size: 16 }),
+          /* @__PURE__ */ jsx6("span", { className: "channlize-banner-text", children: sseFailed ? labels.connectionLost : labels.startFailed }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "channlize-banner-action",
+              onClick: () => sseFailed ? reconnect() : void startSession(),
+              children: labels.retry
+            }
+          )
+        ]
+      }
+    );
+  } else if (error && !ownSendError) {
+    banner = /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "channlize-banner channlize-error",
+        "data-tone": "error",
+        role: "alert",
+        style: styles.error,
+        children: [
+          /* @__PURE__ */ jsx6(AlertIcon, { size: 16 }),
+          /* @__PURE__ */ jsx6("span", { className: "channlize-banner-text", children: error.message })
+        ]
+      }
+    );
+  } else if (showReconnectBanner) {
+    banner = /* @__PURE__ */ jsxs4("div", { className: "channlize-banner", role: "status", children: [
+      /* @__PURE__ */ jsx6("span", { className: "channlize-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx6("span", { className: "channlize-banner-text", children: labels.reconnecting })
+    ] });
+  }
+  const accent = primaryColor || DEFAULT_PRIMARY2;
+  const themeVars = {
+    ...primaryColor && { "--chz-primary": primaryColor },
+    "--chz-on-primary": primaryTextColor || readableTextColor(accent)
+  };
+  const headerAvatar = /* @__PURE__ */ jsx6(
+    Avatar,
+    {
+      name: title,
+      url: avatarUrl,
+      node: avatar,
+      className: "channlize-header-avatar"
+    }
+  );
+  const counterVisible = text.length > maxLength * 0.8;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `channlize-widget channlize-chat-container ${className}`,
+      "data-theme": theme,
+      style: { ...themeVars, ...styles.container },
+      onKeyDown: handleRootKeyDown,
+      children: [
+        /* @__PURE__ */ jsx6(WidgetStyles, { ifMissing: true }),
+        /* @__PURE__ */ jsxs4("div", { className: "channlize-chat-header", style: styles.header, children: [
+          headerAvatar,
+          /* @__PURE__ */ jsxs4("div", { className: "channlize-header-text", children: [
+            /* @__PURE__ */ jsx6("h2", { className: "channlize-chat-title", id: titleId, children: title }),
+            /* @__PURE__ */ jsxs4(
+              "p",
               {
-                type: "file",
-                multiple: true,
-                onChange: handleFileChange,
-                style: { fontSize: "0.875rem" }
+                className: "channlize-chat-status",
+                "data-status": status,
+                title: statusLabel,
+                children: [
+                  /* @__PURE__ */ jsx6("span", { className: "channlize-status-dot", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx6("span", { children: statusLabel })
+                ]
               }
-            ),
-            attachments.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { fontSize: "0.75rem", marginTop: "0.25rem" }, children: [
-              attachments.length,
-              " file(s) selected"
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ jsx4(
-              "input",
-              {
-                type: "text",
-                value: messageInput,
-                onChange: (e) => setMessageInput(e.target.value),
-                placeholder,
-                disabled: !session || isConnecting,
-                style: { ...styles.input, flex: 1 }
-              }
-            ),
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs4("div", { className: "channlize-header-actions", children: [
+            allowEndChat && session && /* @__PURE__ */ jsxs4("div", { className: "channlize-menu-wrap", ref: menuWrapRef, children: [
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  ref: moreButtonRef,
+                  type: "button",
+                  className: "channlize-icon-btn",
+                  "aria-label": labels.moreOptions,
+                  title: labels.moreOptions,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": menuOpen,
+                  "aria-controls": menuOpen ? menuId : void 0,
+                  onClick: () => setMenuOpen((o) => !o),
+                  children: /* @__PURE__ */ jsx6(MoreIcon, { size: 20 })
+                }
+              ),
+              menuOpen && /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  className: "channlize-menu",
+                  role: "menu",
+                  id: menuId,
+                  "aria-label": labels.moreOptions,
+                  children: /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      className: "channlize-menu-item",
+                      autoFocus: true,
+                      onClick: () => {
+                        setMenuOpen(false);
+                        setConfirmOpen(true);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx6(ExitIcon, { size: 16 }),
+                        labels.endChat
+                      ]
+                    }
+                  )
+                }
+              )
+            ] }),
+            onMinimize && /* @__PURE__ */ jsx6(
               "button",
               {
-                type: "submit",
-                disabled: !session || isConnecting || !messageInput.trim() && attachments.length === 0,
-                style: styles.button,
-                children: sendButtonText
+                type: "button",
+                className: "channlize-icon-btn",
+                "aria-label": labels.minimize,
+                title: labels.minimize,
+                onClick: onMinimize,
+                children: /* @__PURE__ */ jsx6(ChevronDownIcon, { size: 22 })
               }
             )
           ] })
+        ] }),
+        banner,
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            ref: listRef,
+            className: "channlize-messages channlize-chat-messages",
+            style: styles.messagesContainer,
+            role: "log",
+            "aria-live": "polite",
+            "aria-relevant": "additions",
+            "aria-label": labels.messages,
+            tabIndex: 0,
+            onScroll: handleScroll,
+            onLoadCapture: handleMediaLoad,
+            children: displayMessages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "channlize-welcome", children: [
+              /* @__PURE__ */ jsx6(Avatar, { name: title, url: avatarUrl, node: avatar }),
+              /* @__PURE__ */ jsx6("h3", { className: "channlize-welcome-title", children: greeting }),
+              welcomeMessage && /* @__PURE__ */ jsx6("p", { className: "channlize-welcome-text", children: welcomeMessage }),
+              ended && !session && /* @__PURE__ */ jsx6("p", { className: "channlize-notice", role: "status", children: labels.conversationEnded }),
+              suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx6("div", { className: "channlize-suggestions", children: suggestions.map((s) => /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  className: "channlize-chip",
+                  disabled: isConnecting,
+                  onClick: () => send(s, []),
+                  children: s
+                },
+                s
+              )) })
+            ] }) : sections.map((section) => /* @__PURE__ */ jsxs4("div", { className: "channlize-day-section", children: [
+              /* @__PURE__ */ jsx6("div", { className: "channlize-day", role: "separator", children: /* @__PURE__ */ jsx6("span", { children: formatDayLabel(section.date, labels, locale) }) }),
+              section.groups.map((group) => {
+                const last = group.messages[group.messages.length - 1];
+                const isUser = group.author === "user";
+                const speaker = isUser ? labels.you : group.authorName;
+                return /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: "channlize-group",
+                    "data-author": group.author,
+                    children: [
+                      !isUser && /* @__PURE__ */ jsx6(
+                        Avatar,
+                        {
+                          name: group.authorName,
+                          url: group.avatarUrl || (group.authorName === title ? avatarUrl : void 0),
+                          node: group.authorName === title ? avatar : void 0,
+                          className: "channlize-group-avatar"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs4("div", { className: "channlize-group-body", children: [
+                        !isUser && group.authorName && /* @__PURE__ */ jsx6(
+                          "div",
+                          {
+                            className: "channlize-group-name",
+                            "aria-hidden": "true",
+                            children: group.authorName
+                          }
+                        ),
+                        group.messages.map((msg, i) => {
+                          const n = group.messages.length;
+                          const pos = n === 1 ? "single" : i === 0 ? "first" : i === n - 1 ? "last" : "middle";
+                          return /* @__PURE__ */ jsx6(
+                            MessageBubble,
+                            {
+                              msg,
+                              pos,
+                              speaker,
+                              locale,
+                              labels,
+                              styles,
+                              onRetry: retry,
+                              onRemove: removePending
+                            },
+                            msg.key
+                          );
+                        }),
+                        showTimestamps && last && last.status === "sent" && /* @__PURE__ */ jsx6(
+                          "div",
+                          {
+                            className: "channlize-message-timestamp",
+                            style: styles.timestamp,
+                            children: /* @__PURE__ */ jsx6(
+                              "time",
+                              {
+                                dateTime: isValidDate(last.timestamp) ? last.timestamp.toISOString() : void 0,
+                                children: formatTime(last.timestamp, locale)
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  group.key
+                );
+              })
+            ] }, section.key))
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "form",
+          {
+            className: "channlize-chat-input-container",
+            style: styles.inputContainer,
+            onSubmit: handleSubmit,
+            children: [
+              files.length > 0 && /* @__PURE__ */ jsx6("div", { className: "channlize-pending-files", children: files.map((f, i) => /* @__PURE__ */ jsxs4("span", { className: "channlize-pending-file", children: [
+                /* @__PURE__ */ jsx6("span", { title: f.name, children: f.name }),
+                /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${labels.removeAttachment}: ${f.name}`,
+                    onClick: () => setFiles((prev) => prev.filter((_, j) => j !== i)),
+                    children: /* @__PURE__ */ jsx6(CloseIcon, { size: 14 })
+                  }
+                )
+              ] }, `${f.name}-${i}`)) }),
+              /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: "channlize-composer",
+                  "data-has-attach": allowAttachments ? "true" : void 0,
+                  children: [
+                    allowAttachments && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          className: "channlize-icon-btn",
+                          "aria-label": labels.attach,
+                          title: labels.attach,
+                          onClick: () => fileInputRef.current?.click(),
+                          disabled: files.length >= MAX_FILES,
+                          children: /* @__PURE__ */ jsx6(PaperclipIcon, { size: 18 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "input",
+                        {
+                          ref: fileInputRef,
+                          type: "file",
+                          multiple: true,
+                          className: "channlize-file-input",
+                          tabIndex: -1,
+                          "aria-hidden": "true",
+                          onChange: handleFileChange
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx6(
+                      "textarea",
+                      {
+                        ref: inputRef,
+                        className: "channlize-input",
+                        rows: 1,
+                        value: text,
+                        maxLength,
+                        onChange: (e) => setText(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder,
+                        "aria-label": placeholder,
+                        enterKeyHint: "send",
+                        style: styles.input
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "channlize-send",
+                        disabled: !canSend,
+                        "aria-label": sendButtonText,
+                        title: sendButtonText,
+                        style: styles.button,
+                        children: /* @__PURE__ */ jsx6(SendIcon, { size: 18 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              counterVisible && /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: "channlize-composer-footer",
+                  "data-over": text.length >= maxLength ? "true" : void 0,
+                  "aria-live": "polite",
+                  children: [
+                    text.length,
+                    "/",
+                    maxLength,
+                    /* @__PURE__ */ jsxs4("span", { className: "channlize-visually-hidden", children: [
+                      " ",
+                      labels.charactersLeft
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        confirmOpen && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "channlize-sheet-backdrop",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) closeConfirm();
+            },
+            children: /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: "channlize-sheet",
+                role: "alertdialog",
+                "aria-modal": "true",
+                "aria-labelledby": confirmTitleId,
+                "aria-describedby": confirmTextId,
+                children: [
+                  /* @__PURE__ */ jsx6("h3", { className: "channlize-sheet-title", id: confirmTitleId, children: labels.endChatTitle }),
+                  /* @__PURE__ */ jsx6("p", { className: "channlize-sheet-text", id: confirmTextId, children: labels.endChatDescription }),
+                  /* @__PURE__ */ jsxs4("div", { className: "channlize-sheet-actions", children: [
+                    /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        ref: cancelRef,
+                        type: "button",
+                        className: "channlize-btn channlize-btn-secondary",
+                        onClick: closeConfirm,
+                        children: labels.cancel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        type: "button",
+                        className: "channlize-btn channlize-btn-danger",
+                        onClick: () => void confirmEnd(),
+                        children: labels.endChatConfirm
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function MessageBubble({
+  msg,
+  pos,
+  speaker,
+  locale,
+  labels,
+  styles,
+  onRetry,
+  onRemove
+}) {
+  const isUser = msg.author === "user";
+  const parts = useMemo2(() => linkify(msg.content), [msg.content]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `channlize-message ${isUser ? "channlize-message-user" : "channlize-message-agent"}`,
+        "data-pos": pos,
+        "data-status": msg.status,
+        title: formatFullDate(msg.timestamp, locale) || void 0,
+        style: {
+          ...styles.message,
+          ...isUser ? styles.userMessage : styles.agentMessage
+        },
+        children: [
+          speaker && /* @__PURE__ */ jsxs4("span", { className: "channlize-visually-hidden", children: [
+            speaker,
+            ": "
+          ] }),
+          /* @__PURE__ */ jsx6("div", { className: "channlize-message-content", children: parts.map(
+            (part, i) => part.type === "link" ? /* @__PURE__ */ jsx6(
+              "a",
+              {
+                href: part.href,
+                target: "_blank",
+                rel: "noopener noreferrer nofollow",
+                children: part.value
+              },
+              i
+            ) : /* @__PURE__ */ jsx6("span", { children: part.value }, i)
+          ) }),
+          msg.attachments.length > 0 && /* @__PURE__ */ jsx6("div", { className: "channlize-attachments", children: msg.attachments.map((a) => /* @__PURE__ */ jsx6(AttachmentView, { attachment: a }, a.key)) })
+        ]
+      }
+    ),
+    msg.status === "sending" && /* @__PURE__ */ jsx6("div", { className: "channlize-message-meta", "data-status": "sending", children: labels.sending }),
+    msg.status === "failed" && msg.localId && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "channlize-message-meta",
+        "data-status": "failed",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx6(AlertIcon, { size: 14 }),
+          /* @__PURE__ */ jsx6("span", { children: labels.failed }),
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "channlize-link-btn",
+              onClick: () => onRetry(msg.localId),
+              children: labels.retry
+            }
+          ),
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "channlize-link-btn",
+              onClick: () => onRemove(msg.localId),
+              children: labels.remove
+            }
+          )
         ]
       }
     )
   ] });
 }
+function AttachmentView({ attachment }) {
+  const size = formatFileSize(attachment.size);
+  if (attachment.url && isImage(attachment)) {
+    return /* @__PURE__ */ jsx6(
+      "a",
+      {
+        className: "channlize-attachment-image",
+        href: attachment.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: /* @__PURE__ */ jsx6(
+          "img",
+          {
+            src: attachment.url,
+            alt: attachment.name,
+            loading: "lazy",
+            referrerPolicy: "no-referrer"
+          }
+        )
+      }
+    );
+  }
+  const body = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx6(FileIcon, { size: 18 }),
+    /* @__PURE__ */ jsxs4("span", { className: "channlize-attachment-text", children: [
+      /* @__PURE__ */ jsx6("span", { className: "channlize-attachment-name", children: attachment.name }),
+      size && /* @__PURE__ */ jsx6("span", { className: "channlize-attachment-size", children: size })
+    ] })
+  ] });
+  return attachment.url ? /* @__PURE__ */ jsx6(
+    "a",
+    {
+      className: "channlize-attachment-file",
+      href: attachment.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      download: attachment.name,
+      children: body
+    }
+  ) : /* @__PURE__ */ jsx6("div", { className: "channlize-attachment-file", children: body });
+}
 
 // src/components/ChannlizeChat.tsx
-import { useState as useState5, useEffect as useEffect3 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useRef as useRef4,
+  useState as useState6,
+  useSyncExternalStore
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var emptySubscribe = () => () => {
+};
 function ChannlizeChat({
   config,
   position = "bottom-right",
-  offset = { x: 24, y: 24 },
+  offset,
   buttonElement,
   buttonIcon,
   buttonSize = 56,
-  buttonColors = {
-    background: "#3b82f6",
-    hover: "#2563eb",
-    text: "#ffffff"
-  },
+  buttonColors,
   chatProps = {},
+  primaryColor,
+  theme,
   defaultOpen = false,
   showBadge = false,
   unreadCount = 0,
-  zIndex = 1e3,
+  zIndex = 2147483e3,
   showOnMobile = true,
   onOpen,
   onClose,
@@ -688,311 +2448,167 @@ function ChannlizeChat({
   buttonClassName = "",
   chatClassName = ""
 }) {
-  const [isOpen, setIsOpen] = useState5(defaultOpen);
-  const [isMounted, setIsMounted] = useState5(false);
-  const [isDarkMode, setIsDarkMode] = useState5(false);
-  useEffect3(() => {
-    setIsMounted(true);
-  }, []);
-  useEffect3(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    setIsDarkMode(mediaQuery.matches);
-    const handler = (e) => setIsDarkMode(e.matches);
-    mediaQuery.addEventListener("change", handler);
-    return () => mediaQuery.removeEventListener("change", handler);
+  const [isOpen, setIsOpen] = useState6(defaultOpen);
+  const [autoUnread, setAutoUnread] = useState6(0);
+  const launcherRef = useRef4(null);
+  const panelRef = useRef4(null);
+  const isOpenRef = useRef4(isOpen);
+  const userOnMessageRef = useRef4(chatProps.onMessage);
+  const isMounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+  useEffect5(() => {
+    isOpenRef.current = isOpen;
+    userOnMessageRef.current = chatProps.onMessage;
+  });
+  const handleMessage = useCallback5((message) => {
+    if (!isOpenRef.current && message.author === "agent") {
+      setAutoUnread((n) => n + 1);
+    }
+    userOnMessageRef.current?.(message);
   }, []);
+  const open = useCallback5(() => {
+    setIsOpen(true);
+    setAutoUnread(0);
+    onOpen?.();
+  }, [onOpen]);
+  const close = useCallback5(() => {
+    const hadFocus = !!panelRef.current?.contains(document.activeElement);
+    setIsOpen(false);
+    onClose?.();
+    if (hadFocus) {
+      requestAnimationFrame(() => launcherRef.current?.focus());
+    }
+  }, [onClose]);
+  useEffect5(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.inert = !isOpen;
+    if (!isOpen) return;
+    const frame = requestAnimationFrame(() => {
+      const coarse = window.matchMedia?.("(pointer: coarse)").matches;
+      const input = panel.querySelector("textarea");
+      if (input && !coarse) input.focus();
+      else panel.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, isMounted]);
   if (!isMounted) {
     return null;
   }
-  const handleToggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    if (newState) {
-      onOpen?.();
-    } else {
-      onClose?.();
+  const accent = primaryColor || chatProps.primaryColor;
+  const launcherBg = buttonColors?.background || accent;
+  const badgeCount = showBadge ? unreadCount : autoUnread;
+  const title = chatProps.title || "Support";
+  const rootStyle = {
+    "--chz-x": `${offset?.x ?? 24}px`,
+    "--chz-y": `${offset?.y ?? 24}px`,
+    "--chz-z": String(zIndex),
+    "--chz-launcher-size": `${buttonSize}px`,
+    ...accent && {
+      "--chz-primary": accent,
+      "--chz-on-primary": chatProps.primaryTextColor || readableTextColor(accent)
+    },
+    ...launcherBg && { "--chz-launcher-bg": launcherBg },
+    ...buttonColors?.hover && { "--chz-launcher-hover": buttonColors.hover },
+    ...(buttonColors?.text || launcherBg) && {
+      "--chz-launcher-fg": buttonColors?.text || readableTextColor(launcherBg)
     }
   };
-  const positionStyles = {
-    position: "fixed",
-    zIndex,
-    ...position.includes("bottom") ? { bottom: `${offset.y}px` } : { top: `${offset.y}px` },
-    ...position.includes("right") ? { right: `${offset.x}px` } : { left: `${offset.x}px` }
-  };
-  const buttonStyle = {
-    width: `${buttonSize}px`,
-    height: `${buttonSize}px`,
-    borderRadius: "50%",
-    backgroundColor: buttonColors.background,
-    color: buttonColors.text,
-    border: "none",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-    transition: enableAnimations ? "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" : "none",
-    transform: enableAnimations && isOpen ? "scale(0.9)" : "scale(1)"
-  };
-  const chatContainerStyle = {
-    ...positionStyles,
-    opacity: isOpen ? 1 : 0,
-    visibility: isOpen ? "visible" : "hidden",
-    transform: enableAnimations ? isOpen ? "scale(1) translateY(0)" : "scale(0.95) translateY(10px)" : "none",
-    transition: enableAnimations ? "opacity 0.2s, transform 0.2s, visibility 0.2s" : "none"
+  const launcherLabel = badgeCount > 0 ? `Open chat, ${badgeCount} unread ${badgeCount === 1 ? "message" : "messages"}` : "Open chat";
+  const badge = badgeCount > 0 ? /* @__PURE__ */ jsx7("span", { className: "channlize-badge", "aria-hidden": "true", children: badgeCount > 99 ? "99+" : badgeCount }) : null;
+  const onCustomLauncherKey = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open();
+    }
   };
-  const defaultIcon = /* @__PURE__ */ jsx5(
-    "svg",
+  const widget = /* @__PURE__ */ jsx7(ChannlizeProvider, { config, children: /* @__PURE__ */ jsx7(WidgetStylesProvider, { children: /* @__PURE__ */ jsxs5(
+    "div",
     {
-      width: buttonSize * 0.5,
-      height: buttonSize * 0.5,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: isOpen ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx5("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }),
-        /* @__PURE__ */ jsx5("path", { d: "M8 10h.01" }),
-        /* @__PURE__ */ jsx5("path", { d: "M12 10h.01" }),
-        /* @__PURE__ */ jsx5("path", { d: "M16 10h.01" })
-      ] })
-    }
-  );
-  return /* @__PURE__ */ jsxs3(ChannlizeProvider, { config, children: [
-    !isOpen && /* @__PURE__ */ jsx5(
-      "div",
-      {
-        style: {
-          ...positionStyles,
-          display: !showOnMobile && typeof window !== "undefined" && window.innerWidth < 768 ? "none" : "block"
-        },
-        className: buttonClassName,
-        children: buttonElement ? /* @__PURE__ */ jsx5("div", { onClick: handleToggle, style: { cursor: "pointer" }, children: buttonElement }) : /* @__PURE__ */ jsxs3(
-          "button",
+      className: "channlize-widget channlize-floating",
+      "data-theme": theme || chatProps.theme || "auto",
+      "data-position": position,
+      "data-open": isOpen ? "true" : "false",
+      "data-animate": enableAnimations ? "true" : "false",
+      "data-hide-mobile": showOnMobile ? void 0 : "true",
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: `channlize-launcher-wrap ${buttonClassName}`, children: buttonElement ? /* @__PURE__ */ jsx7(
+          "div",
           {
-            onClick: handleToggle,
-            style: buttonStyle,
-            onMouseEnter: (e) => {
-              if (enableAnimations) {
-                e.currentTarget.style.backgroundColor = buttonColors.hover || buttonColors.background || "#2563eb";
-                e.currentTarget.style.transform = "scale(1.05)";
-              }
+            ref: (el) => {
+              launcherRef.current = el;
             },
-            onMouseLeave: (e) => {
-              if (enableAnimations) {
-                e.currentTarget.style.backgroundColor = buttonColors.background || "#3b82f6";
-                e.currentTarget.style.transform = "scale(1)";
-              }
+            className: "channlize-launcher-custom",
+            role: "button",
+            tabIndex: isOpen ? -1 : 0,
+            "aria-label": launcherLabel,
+            "aria-expanded": isOpen,
+            onClick: open,
+            onKeyDown: onCustomLauncherKey,
+            children: buttonElement
+          }
+        ) : /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            ref: (el) => {
+              launcherRef.current = el;
             },
-            "aria-label": isOpen ? "Close chat" : "Open chat",
+            type: "button",
+            className: "channlize-launcher",
+            onClick: open,
+            "aria-label": launcherLabel,
+            "aria-expanded": isOpen,
+            tabIndex: isOpen ? -1 : 0,
             children: [
-              buttonIcon || defaultIcon,
-              showBadge && unreadCount > 0 && /* @__PURE__ */ jsx5(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "-4px",
-                    right: "-4px",
-                    backgroundColor: "#ef4444",
-                    color: "white",
-                    borderRadius: "10px",
-                    padding: "2px 6px",
-                    fontSize: "12px",
-                    fontWeight: "600",
-                    minWidth: "20px",
-                    textAlign: "center",
-                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-                  },
-                  children: unreadCount > 99 ? "99+" : unreadCount
-                }
-              )
+              buttonIcon || /* @__PURE__ */ jsx7(ChatIcon, { size: Math.round(buttonSize * 0.46) }),
+              badge
             ]
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        style: chatContainerStyle,
-        className: chatClassName,
-        children: [
-          /* @__PURE__ */ jsx5(
-            SupportChat,
-            {
-              autoConnect: isOpen,
-              persistSession: true,
-              title: "Support Chat",
-              placeholder: "Type your message...",
-              showTimestamps: true,
-              ...chatProps,
-              styles: {
-                container: {
-                  width: "384px",
-                  height: "600px",
-                  maxHeight: "calc(100vh - 120px)",
-                  borderRadius: "16px",
-                  overflow: "hidden",
-                  boxShadow: isDarkMode ? "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.5)" : "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-                  backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
-                  display: "flex",
-                  flexDirection: "column",
-                  position: "relative",
-                  ...chatProps.styles?.container
-                },
-                header: {
-                  background: "linear-gradient(135deg, #3b82f6 0%, #9333ea 100%)",
-                  padding: "20px",
-                  borderRadius: "16px 16px 0 0",
-                  color: "white",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  ...chatProps.styles?.header
-                },
-                messagesContainer: {
-                  flex: 1,
-                  overflowY: "auto",
-                  padding: "20px",
-                  backgroundColor: isDarkMode ? "#111827" : "#f9fafb",
-                  ...chatProps.styles?.messagesContainer
-                },
-                inputContainer: {
-                  padding: "16px",
-                  backgroundColor: isDarkMode ? "#1f2937" : "white",
-                  borderTop: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
-                  ...chatProps.styles?.inputContainer
-                },
-                input: {
-                  ...chatProps.styles?.input,
-                  borderRadius: "12px",
-                  padding: "12px 16px",
-                  fontSize: "14px",
-                  border: `1px solid ${isDarkMode ? "#374151" : "#d1d5db"}`,
-                  outline: "none",
-                  backgroundColor: isDarkMode ? "#374151" : "#ffffff",
-                  color: isDarkMode ? "#f9fafb" : "#111827",
-                  fontWeight: "400"
-                },
-                button: {
-                  backgroundColor: "#3b82f6",
-                  color: "white",
-                  borderRadius: "12px",
-                  padding: "12px 24px",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  border: "none",
-                  cursor: "pointer",
-                  transition: "background-color 0.2s",
-                  ...chatProps.styles?.button
-                },
-                userMessage: {
-                  backgroundColor: "#3b82f6",
-                  color: "white",
-                  padding: "10px 14px",
-                  borderRadius: "12px 12px 4px 12px",
-                  marginBottom: "8px",
-                  marginLeft: "auto",
-                  maxWidth: "80%",
-                  width: "fit-content",
-                  ...chatProps.styles?.userMessage
-                },
-                agentMessage: {
-                  backgroundColor: isDarkMode ? "#374151" : "white",
-                  color: isDarkMode ? "#f9fafb" : "#1f2937",
-                  padding: "10px 14px",
-                  borderRadius: "12px 12px 12px 4px",
-                  marginBottom: "8px",
-                  marginRight: "auto",
-                  maxWidth: "80%",
-                  width: "fit-content",
-                  boxShadow: isDarkMode ? "0 1px 2px 0 rgb(0 0 0 / 0.3)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-                  ...chatProps.styles?.agentMessage
-                },
-                timestamp: {
-                  fontSize: "11px",
-                  opacity: 0.7,
-                  marginTop: "4px",
-                  color: isDarkMode ? "#d1d5db" : "inherit",
-                  ...chatProps.styles?.timestamp
-                },
-                error: {
-                  backgroundColor: isDarkMode ? "#7f1d1d" : "#fee2e2",
-                  color: isDarkMode ? "#fca5a5" : "#991b1b",
-                  padding: "12px",
-                  margin: "8px 16px",
-                  borderRadius: "8px",
-                  fontSize: "14px",
-                  ...chatProps.styles?.error
-                }
+        ) }),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            ref: panelRef,
+            className: `channlize-panel ${chatClassName}`,
+            role: "dialog",
+            "aria-modal": "false",
+            "aria-label": title,
+            "aria-hidden": !isOpen,
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx7(
+              SupportChat,
+              {
+                persistSession: true,
+                title,
+                showTimestamps: true,
+                ...chatProps,
+                theme: theme || chatProps.theme,
+                primaryColor: accent,
+                autoConnect: isOpen,
+                onMessage: handleMessage,
+                onMinimize: close
               }
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            "button",
-            {
-              onClick: handleToggle,
-              style: {
-                position: "absolute",
-                top: "16px",
-                right: "16px",
-                width: "32px",
-                height: "32px",
-                borderRadius: "50%",
-                backgroundColor: "rgba(255, 255, 255, 0.2)",
-                border: "none",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color: "white",
-                transition: "background-color 0.2s",
-                zIndex: 10
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
-              },
-              "aria-label": "Close chat",
-              children: /* @__PURE__ */ jsxs3(
-                "svg",
-                {
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  ] });
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+  return typeof document !== "undefined" ? createPortal(widget, document.body) : widget;
 }
 export {
   ChannlizeChat,
   ChannlizeProvider,
   ContactForm,
   SupportChat,
+  defaultContactFormLabels,
+  defaultSupportChatLabels,
   useChannlize,
+  useChannlizeAnalytics,
   useChatSession,
   useContactForm
 };