@xcelsior/ui-chat 1.0.8 → 2.0.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ChatWidget.tsx
-import { useCallback as useCallback4, useEffect as useEffect6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8 } from "react";
 
 // src/hooks/useWebSocket.ts
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -196,6 +196,7 @@ function useMessages(websocket, config) {
   const [nextPageToken, setNextPageToken] = useState2(void 0);
   const [hasMore, setHasMore] = useState2(true);
   const [isLoadingMore, setIsLoadingMore] = useState2(false);
+  const [isBotThinking, setIsBotThinking] = useState2(false);
   const { httpApiUrl, conversationId, headers, onError, toast } = config;
   const headersWithApiKey = useMemo(
     () => ({
@@ -244,6 +245,9 @@ function useMessages(websocket, config) {
         }
         return [...prev, newMessage];
       });
+      if (newMessage.senderType === "bot" || newMessage.senderType === "system") {
+        setIsBotThinking(false);
+      }
       onMessageReceived?.(newMessage);
     }
   }, [websocket.lastMessage, onMessageReceived, conversationId]);
@@ -254,6 +258,9 @@ function useMessages(websocket, config) {
       }
       return [...prev, message];
     });
+    if (message.senderType === "customer") {
+      setIsBotThinking(true);
+    }
   }, []);
   const updateMessageStatus = useCallback2((messageId, status) => {
     setMessages((prev) => prev.map((msg) => msg.id === messageId ? { ...msg, status } : msg));
@@ -305,7 +312,8 @@ function useMessages(websocket, config) {
     error,
     loadMore,
     hasMore,
-    isLoadingMore
+    isLoadingMore,
+    isBotThinking
   };
 }
 
@@ -442,214 +450,1281 @@ function useTypingIndicator(websocket) {
   };
 }
 
-// src/components/ChatHeader.tsx
+// src/hooks/useResizableWidget.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+var STORAGE_KEY = "xcelsior-chat-size";
+var EDGE_ZONE = 8;
+var CURSOR_MAP = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  ne: "nesw-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  sw: "nesw-resize"
+};
+function readStoredSize(key, fallbackWidth, fallbackHeight) {
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      if (typeof parsed.width === "number" && typeof parsed.height === "number") {
+        return { width: parsed.width, height: parsed.height };
+      }
+    }
+  } catch {
+  }
+  return { width: fallbackWidth, height: fallbackHeight };
+}
+function persistSize(key, width, height) {
+  try {
+    localStorage.setItem(key, JSON.stringify({ width, height }));
+  } catch {
+  }
+}
+function isMobile() {
+  return typeof window !== "undefined" && window.innerWidth < 768;
+}
+function detectEdge(e, rect) {
+  const { clientX: x, clientY: y } = e;
+  const nearTop = y - rect.top < EDGE_ZONE;
+  const nearBottom = rect.bottom - y < EDGE_ZONE;
+  const nearLeft = x - rect.left < EDGE_ZONE;
+  const nearRight = rect.right - x < EDGE_ZONE;
+  if (nearTop && nearLeft) return "nw";
+  if (nearTop && nearRight) return "ne";
+  if (nearBottom && nearLeft) return "sw";
+  if (nearBottom && nearRight) return "se";
+  if (nearTop) return "n";
+  if (nearBottom) return "s";
+  if (nearLeft) return "w";
+  if (nearRight) return "e";
+  return null;
+}
+function useResizableWidget({
+  initialWidth = 380,
+  initialHeight = 580,
+  minWidth = 320,
+  minHeight = 400,
+  maxWidth = 800,
+  maxHeight = 900,
+  storageKey = STORAGE_KEY,
+  enabled = true
+} = {}) {
+  const [size, setSize] = useState5(() => {
+    if (typeof window === "undefined") return { width: initialWidth, height: initialHeight };
+    return readStoredSize(storageKey, initialWidth, initialHeight);
+  });
+  const [isResizing, setIsResizing] = useState5(false);
+  const [isNearEdge, setIsNearEdge] = useState5(false);
+  const [activeEdge, setActiveEdge] = useState5(null);
+  const sizeRef = useRef2(size);
+  sizeRef.current = size;
+  const dragRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const clamp = useCallback3(
+    (w, h) => {
+      const mxW = Math.min(maxWidth, window.innerWidth - 24);
+      const mxH = Math.min(maxHeight, window.innerHeight - 100);
+      return {
+        width: Math.round(Math.max(minWidth, Math.min(mxW, w))),
+        height: Math.round(Math.max(minHeight, Math.min(mxH, h)))
+      };
+    },
+    [minWidth, minHeight, maxWidth, maxHeight]
+  );
+  const calcSize = useCallback3(
+    (dx, dy) => {
+      if (!dragRef.current) return sizeRef.current;
+      const { edge, startWidth, startHeight } = dragRef.current;
+      let w = startWidth;
+      let h = startHeight;
+      if (edge.includes("e")) w = startWidth + dx;
+      if (edge.includes("w")) w = startWidth - dx;
+      if (edge.includes("s")) h = startHeight + dy;
+      if (edge.includes("n")) h = startHeight - dy;
+      return clamp(w, h);
+    },
+    [clamp]
+  );
+  const handleDocMouseMove = useCallback3(
+    (e) => {
+      if (!dragRef.current) return;
+      const dx = e.clientX - dragRef.current.startX;
+      const dy = e.clientY - dragRef.current.startY;
+      setSize(calcSize(dx, dy));
+    },
+    [calcSize]
+  );
+  const handleDocMouseUp = useCallback3(
+    (e) => {
+      if (!dragRef.current) return;
+      const dx = e.clientX - dragRef.current.startX;
+      const dy = e.clientY - dragRef.current.startY;
+      const final = calcSize(dx, dy);
+      persistSize(storageKey, final.width, final.height);
+      dragRef.current = null;
+      setIsResizing(false);
+      setActiveEdge(null);
+      document.body.style.cursor = "";
+      document.removeEventListener("mousemove", handleDocMouseMove);
+      document.removeEventListener("mouseup", handleDocMouseUp);
+    },
+    [calcSize, storageKey, handleDocMouseMove]
+  );
+  const handleDocTouchMove = useCallback3(
+    (e) => {
+      if (!dragRef.current || e.touches.length === 0) return;
+      e.preventDefault();
+      const t = e.touches[0];
+      const dx = t.clientX - dragRef.current.startX;
+      const dy = t.clientY - dragRef.current.startY;
+      setSize(calcSize(dx, dy));
+    },
+    [calcSize]
+  );
+  const handleDocTouchEnd = useCallback3(
+    (e) => {
+      if (!dragRef.current) return;
+      const t = e.changedTouches[0];
+      if (t) {
+        const dx = t.clientX - dragRef.current.startX;
+        const dy = t.clientY - dragRef.current.startY;
+        const final = calcSize(dx, dy);
+        persistSize(storageKey, final.width, final.height);
+      }
+      dragRef.current = null;
+      setIsResizing(false);
+      setActiveEdge(null);
+      document.removeEventListener("touchmove", handleDocTouchMove);
+      document.removeEventListener("touchend", handleDocTouchEnd);
+    },
+    [calcSize, storageKey, handleDocTouchMove]
+  );
+  useEffect4(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleDocMouseMove);
+      document.removeEventListener("mouseup", handleDocMouseUp);
+      document.removeEventListener("touchmove", handleDocTouchMove);
+      document.removeEventListener("touchend", handleDocTouchEnd);
+      document.body.style.cursor = "";
+    };
+  }, [handleDocMouseMove, handleDocMouseUp, handleDocTouchMove, handleDocTouchEnd]);
+  const onContainerMouseMove = useCallback3(
+    (e) => {
+      if (!enabled || isMobile() || isResizing) return;
+      const el = e.currentTarget;
+      containerRef.current = el;
+      const rect = el.getBoundingClientRect();
+      const edge = detectEdge(e, rect);
+      setIsNearEdge(!!edge);
+      setActiveEdge(edge);
+      el.style.cursor = edge ? CURSOR_MAP[edge] : "";
+    },
+    [enabled, isResizing]
+  );
+  const onContainerMouseDown = useCallback3(
+    (e) => {
+      if (!enabled || isMobile() || !activeEdge) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragRef.current = {
+        edge: activeEdge,
+        startX: e.clientX,
+        startY: e.clientY,
+        startWidth: sizeRef.current.width,
+        startHeight: sizeRef.current.height
+      };
+      setIsResizing(true);
+      document.body.style.cursor = CURSOR_MAP[activeEdge];
+      document.addEventListener("mousemove", handleDocMouseMove);
+      document.addEventListener("mouseup", handleDocMouseUp);
+    },
+    [enabled, activeEdge, handleDocMouseMove, handleDocMouseUp]
+  );
+  const onContainerMouseLeave = useCallback3(
+    (_e) => {
+      if (!isResizing) {
+        setIsNearEdge(false);
+        setActiveEdge(null);
+        if (containerRef.current) containerRef.current.style.cursor = "";
+      }
+    },
+    [isResizing]
+  );
+  const onContainerTouchStart = useCallback3(
+    (e) => {
+      if (!enabled || isMobile() || e.touches.length === 0) return;
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const t = e.touches[0];
+      const edge = detectEdge(t, rect);
+      if (!edge) return;
+      dragRef.current = {
+        edge,
+        startX: t.clientX,
+        startY: t.clientY,
+        startWidth: sizeRef.current.width,
+        startHeight: sizeRef.current.height
+      };
+      setIsResizing(true);
+      setActiveEdge(edge);
+      document.addEventListener("touchmove", handleDocTouchMove, { passive: false });
+      document.addEventListener("touchend", handleDocTouchEnd);
+    },
+    [enabled, handleDocTouchMove, handleDocTouchEnd]
+  );
+  return {
+    width: size.width,
+    height: size.height,
+    isResizing,
+    isNearEdge,
+    activeEdge,
+    containerResizeProps: {
+      onMouseMove: onContainerMouseMove,
+      onMouseDown: onContainerMouseDown,
+      onMouseLeave: onContainerMouseLeave,
+      onTouchStart: onContainerTouchStart
+    }
+  };
+}
+
+// src/components/BrandIcons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function ChatHeader({ agent, onClose, onMinimize }) {
-  return /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-white/20 flex items-center justify-center text-lg font-medium", children: agent?.avatar ? /* @__PURE__ */ jsx(
-          "img",
+function XcelsiorSymbol({ size = 24, color = "white", className = "", style }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      style,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            src: agent.avatar,
-            alt: agent.name,
-            className: "h-10 w-10 rounded-full object-cover"
+            d: "M20.582 15.027L31.849 0.036H24.808L17.039 10.303L20.582 15.027ZM24.808 31.837H31.849L20.582 16.846L17.039 21.57L24.808 31.837Z",
+            fill: color
           }
-        ) : "\u{1F3A7}" }),
-        agent?.status === "online" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-base", children: agent?.name || "Support Team" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/80", children: agent?.status === "online" ? "Online" : agent?.status === "away" ? "Away" : "We'll reply as soon as possible" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      onMinimize && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onMinimize,
-          className: "p-2 hover:bg-white/10 rounded-full transition-colors",
-          "aria-label": "Minimize chat",
-          children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "w-5 h-5",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsx("title", { children: "Minimize icon" }),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M20 12H4"
-                  }
-                )
-              ]
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14.313 15.027H18.402L7.135 0.036H0.185L9.406 12.392C10.587 13.983 12.359 15.027 14.313 15.027Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.185 31.837H7.135L18.402 16.846H14.313C12.359 16.846 10.588 17.891 9.406 19.481L0.185 31.837Z",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatBubbleIcon({ size = 28, color = "white", className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+function XcelsiorAvatar({ size = 40, className = "" }) {
+  const iconSize = Math.round(size * 0.55);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex items-center justify-center rounded-full ${className}`,
+      style: {
+        width: size,
+        height: size,
+        background: "linear-gradient(135deg, #337eff, #005eff)"
+      },
+      children: /* @__PURE__ */ jsx(XcelsiorSymbol, { size: iconSize, color: "white" })
+    }
+  );
+}
+
+// src/components/ChatHeader.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatHeader({ agent, onClose, onMinimize, theme }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "relative text-white overflow-hidden",
+      style: {
+        flexShrink: 0,
+        /* Layered blue smoke/glow effect for premium look */
+        background: [
+          "radial-gradient(ellipse at 30% 50%, rgba(0,50,255,0.4) 0%, transparent 60%)",
+          "radial-gradient(ellipse at 70% 30%, rgba(0,80,255,0.3) 0%, transparent 50%)",
+          "radial-gradient(ellipse at 50% 80%, rgba(0,30,200,0.3) 0%, transparent 60%)",
+          `linear-gradient(135deg, #0030cc 0%, #001a66 50%, #000d33 100%)`
+        ].join(", ")
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none",
+            style: {
+              background: "linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%)"
             }
-          )
-        }
-      ),
-      onClose && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "p-2 hover:bg-white/10 rounded-full transition-colors",
-          "aria-label": "Close chat",
-          children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "w-5 h-5",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsx("title", { children: "Close icon" }),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M6 18L18 6M6 6l12 12"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", style: { padding: "8px 16px" }, children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+              agent?.avatar ? /* @__PURE__ */ jsx2(
+                "img",
+                {
+                  src: agent.avatar,
+                  alt: agent.name,
+                  className: "h-10 w-10 rounded-full object-cover",
+                  style: {
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
                   }
-                )
-              ]
+                }
+              ) : /* @__PURE__ */ jsx2("div", { style: { filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.3))" }, children: /* @__PURE__ */ jsx2(XcelsiorSymbol, { size: 28, color: "white" }) }),
+              agent?.status === "online" && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full",
+                  style: {
+                    backgroundColor: theme?.statusPositive || "#1ed473",
+                    border: "2.5px solid rgba(0,50,180,0.9)",
+                    boxShadow: `0 0 8px ${theme?.statusPositive || "#1ed473"}80`
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2(
+                "h3",
+                {
+                  className: "font-semibold leading-tight",
+                  style: {
+                    fontSize: "15px",
+                    letterSpacing: "-0.01em"
+                  },
+                  children: agent?.name || "Xcelsior Software"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "p",
+                {
+                  className: "mt-0.5 leading-tight",
+                  style: {
+                    fontSize: "12px",
+                    letterSpacing: "0.015em",
+                    color: "rgba(255,255,255,0.6)"
+                  },
+                  children: agent?.status === "online" ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        className: "inline-block w-1.5 h-1.5 rounded-full",
+                        style: {
+                          backgroundColor: theme?.statusPositive || "#1ed473",
+                          boxShadow: `0 0 4px ${theme?.statusPositive || "#1ed473"}60`
+                        }
+                      }
+                    ),
+                    "Online now"
+                  ] }) : agent?.status === "away" ? "Away" : "We typically reply within minutes"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-0.5", children: (onMinimize || onClose) && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onMinimize || onClose,
+              className: "p-2 rounded-lg transition-all duration-150",
+              style: { backgroundColor: "transparent" },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              "aria-label": "Minimize chat",
+              children: /* @__PURE__ */ jsxs2(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx2("title", { children: "Minimize" }),
+                    /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  ]
+                }
+              )
             }
-          )
-        }
-      )
-    ] })
-  ] });
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "h-px",
+            style: {
+              background: "linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent 95%)"
+            }
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect4, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4 } from "react";
 import { Spinner } from "@xcelsior/design-system";
 
 // src/components/MessageItem.tsx
 import { formatDistanceToNow } from "date-fns";
+
+// src/components/MarkdownMessage.tsx
 import ReactMarkdown from "react-markdown";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/utils/markdown-styles.ts
+function getMarkdownStyles(theme, isLightTheme) {
+  const primaryColor = theme?.primary || "#337eff";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const strongColor = isLightTheme ? "rgba(0,0,0,0.9)" : "rgba(255,255,255,0.95)";
+  const inlineCodeBg = isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)";
+  const codeBlockBg = isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(0,0,0,0.25)";
+  const codeBlockBorder = isLightTheme ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(255,255,255,0.06)";
+  const blockquoteBorder = isLightTheme ? `3px solid ${primaryColor}60` : `3px solid ${primaryColor}80`;
+  const blockquoteBg = isLightTheme ? "rgba(0,0,0,0.02)" : "rgba(255,255,255,0.02)";
+  return {
+    paragraph: {
+      margin: "0 0 8px 0",
+      lineHeight: "1.6",
+      color: textColor
+    },
+    strong: {
+      fontWeight: 600,
+      color: strongColor
+    },
+    emphasis: {
+      fontStyle: "italic",
+      color: textColor
+    },
+    link: {
+      color: primaryColor,
+      textDecoration: "underline",
+      textUnderlineOffset: "2px",
+      cursor: "pointer"
+    },
+    list: {
+      paddingLeft: "20px",
+      margin: "8px 0",
+      color: textColor
+    },
+    listItem: {
+      margin: "4px 0",
+      lineHeight: "1.5",
+      color: textColor
+    },
+    code: {
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      fontSize: "0.875em",
+      backgroundColor: inlineCodeBg,
+      padding: "2px 6px",
+      borderRadius: "4px",
+      color: textColor
+    },
+    codeBlock: {
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      fontSize: "0.8125em",
+      backgroundColor: codeBlockBg,
+      border: codeBlockBorder,
+      padding: "12px",
+      borderRadius: "8px",
+      overflowX: "auto",
+      margin: "8px 0",
+      color: textColor,
+      lineHeight: "1.5",
+      display: "block",
+      whiteSpace: "pre"
+    },
+    heading: {
+      fontWeight: 600,
+      marginTop: "12px",
+      marginBottom: "6px",
+      color: strongColor,
+      lineHeight: "1.3"
+    },
+    blockquote: {
+      borderLeft: blockquoteBorder,
+      backgroundColor: blockquoteBg,
+      margin: "8px 0",
+      padding: "6px 12px",
+      borderRadius: "0 4px 4px 0",
+      color: textColor,
+      fontStyle: "italic"
+    },
+    hr: {
+      border: "none",
+      borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.1)" : "1px solid rgba(255,255,255,0.08)",
+      margin: "12px 0"
+    }
+  };
+}
+
+// src/components/MarkdownMessage.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function computeIsLightTheme(theme) {
+  const bgColor = theme?.background || "#00001a";
+  if (!bgColor.startsWith("#")) return false;
+  const hex = bgColor.replace("#", "");
+  if (hex.length < 6) return false;
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+}
+function MarkdownMessage({ content, theme }) {
+  const isLightTheme = computeIsLightTheme(theme);
+  const styles = getMarkdownStyles(theme, isLightTheme);
+  const wrapperStyle = {
+    // Collapse bottom margin of the last child to avoid extra padding
+    // inside the bubble.
+    display: "block"
+  };
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+    ReactMarkdown,
+    {
+      components: {
+        // Paragraphs
+        p: ({ children }) => /* @__PURE__ */ jsx3("p", { style: styles.paragraph, children }),
+        // Bold
+        strong: ({ children }) => /* @__PURE__ */ jsx3("strong", { style: styles.strong, children }),
+        // Italic
+        em: ({ children }) => /* @__PURE__ */ jsx3("em", { style: styles.emphasis, children }),
+        // Links — open in new tab
+        a: ({ href, children }) => /* @__PURE__ */ jsx3(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: styles.link,
+            children
+          }
+        ),
+        // Unordered list
+        ul: ({ children }) => /* @__PURE__ */ jsx3("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
+        // Ordered list
+        ol: ({ children }) => /* @__PURE__ */ jsx3(
+          "ol",
+          {
+            style: { ...styles.list, listStyleType: "decimal" },
+            children
+          }
+        ),
+        // List item
+        li: ({ children }) => /* @__PURE__ */ jsx3("li", { style: styles.listItem, children }),
+        // Inline code vs code block — react-markdown wraps fenced
+        // code blocks as <pre><code className="language-*">. The
+        // cleanest heuristic: if the className starts with
+        // "language-" it is a fenced block; otherwise it's inline.
+        code: (({ children, className }) => {
+          const isBlock = Boolean(
+            className?.startsWith("language-")
+          );
+          if (isBlock) {
+            return /* @__PURE__ */ jsx3(
+              "code",
+              {
+                className,
+                style: styles.codeBlock,
+                children
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx3("code", { style: styles.code, children });
+        }),
+        // Pre wrapper for code blocks
+        pre: ({ children }) => /* @__PURE__ */ jsx3(
+          "pre",
+          {
+            style: {
+              margin: "8px 0",
+              padding: 0,
+              backgroundColor: "transparent",
+              border: "none",
+              overflow: "visible"
+            },
+            children
+          }
+        ),
+        // Headings — h1 through h6 with progressive size reduction
+        h1: ({ children }) => /* @__PURE__ */ jsx3(
+          "h1",
+          {
+            style: {
+              ...styles.heading,
+              fontSize: "1.15em"
+            },
+            children
+          }
+        ),
+        h2: ({ children }) => /* @__PURE__ */ jsx3(
+          "h2",
+          {
+            style: {
+              ...styles.heading,
+              fontSize: "1.1em"
+            },
+            children
+          }
+        ),
+        h3: ({ children }) => /* @__PURE__ */ jsx3(
+          "h3",
+          {
+            style: {
+              ...styles.heading,
+              fontSize: "1.05em"
+            },
+            children
+          }
+        ),
+        h4: ({ children }) => /* @__PURE__ */ jsx3("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
+        h5: ({ children }) => /* @__PURE__ */ jsx3(
+          "h5",
+          {
+            style: {
+              ...styles.heading,
+              fontSize: "0.95em"
+            },
+            children
+          }
+        ),
+        h6: ({ children }) => /* @__PURE__ */ jsx3(
+          "h6",
+          {
+            style: {
+              ...styles.heading,
+              fontSize: "0.9em"
+            },
+            children
+          }
+        ),
+        // Blockquote
+        blockquote: ({ children }) => /* @__PURE__ */ jsx3("blockquote", { style: styles.blockquote, children }),
+        // Horizontal rule
+        hr: () => /* @__PURE__ */ jsx3("hr", { style: styles.hr })
+      },
+      children: content
+    }
+  ) });
+}
+
+// src/components/MessageItem.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function MessageItem({
   message,
   currentUser,
   showAvatar = true,
-  showTimestamp = true
+  showTimestamp = true,
+  theme
 }) {
   const isOwnMessage = message.senderType === currentUser.type;
   const isSystemMessage = message.senderType === "system";
   const isAIMessage = message.metadata?.isAI === true;
+  const isBotMessage = message.senderType === "bot";
+  const bgColor = theme?.background || "#00001a";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const primaryColor = theme?.primary || "#337eff";
+  const primaryStrong = theme?.primaryStrong || "#005eff";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.35)");
   if (isSystemMessage) {
-    return /* @__PURE__ */ jsx2("div", { className: "flex justify-center my-4", children: /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-full", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: message.content }) }) });
+    return /* @__PURE__ */ jsx4("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "px-4 py-1.5 rounded-full",
+        style: {
+          backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.03)",
+          boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06)"
+        },
+        children: /* @__PURE__ */ jsx4(
+          "p",
+          {
+            style: {
+              fontSize: "11px",
+              letterSpacing: "0.019em",
+              color: textMuted
+            },
+            children: message.content
+          }
+        )
+      }
+    ) });
   }
-  const getAvatarIcon = () => {
-    if (isAIMessage) {
-      return "\u{1F916}";
-    }
+  const getSenderLabel = () => {
+    if (isBotMessage || isAIMessage) return "AI Assistant";
     if (message.senderType === "agent") {
-      return "\u{1F3A7}";
+      return message.metadata?.agentName || "Support Agent";
     }
-    return "\u{1F464}";
+    return null;
   };
-  return /* @__PURE__ */ jsxs2("div", { className: `flex gap-2 mb-4 ${!isOwnMessage ? "flex-row-reverse" : "flex-row"}`, children: [
-    showAvatar && /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx2("div", { className: "h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium", children: getAvatarIcon() }) }),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: `flex flex-col max-w-[70%] ${!isOwnMessage ? "items-end" : "items-start"}`,
-        children: [
-          /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              className: `rounded-2xl px-4 py-2 ${isOwnMessage ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"}`,
-              children: [
-                message.messageType === "text" && /* @__PURE__ */ jsx2(
-                  ReactMarkdown,
-                  {
-                    components: {
-                      p: ({ children }) => /* @__PURE__ */ jsx2("p", { className: "mb-0", children }),
-                      img: ({ src, alt, ...props }) => /* @__PURE__ */ jsx2(
-                        "img",
+  const senderLabel = !isOwnMessage ? getSenderLabel() : null;
+  const ownBubbleStyle = {
+    background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
+    color: "#ffffff",
+    borderRadius: "18px 18px 4px 18px",
+    boxShadow: `0 2px 12px -3px ${primaryColor}40`
+  };
+  const otherBubbleStyle = isLightTheme ? {
+    backgroundColor: "rgba(0,0,0,0.04)",
+    color: textColor,
+    borderRadius: "18px 18px 18px 4px",
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)"
+  } : {
+    backgroundColor: "rgba(255,255,255,0.04)",
+    color: textColor,
+    borderRadius: "18px 18px 18px 4px",
+    boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
+      children: [
+        showAvatar && !isOwnMessage && /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx4(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "h-7 w-7 rounded-full flex items-center justify-center",
+            style: {
+              background: isLightTheme ? `linear-gradient(135deg, ${primaryColor}30, rgba(0,0,0,0.04))` : `linear-gradient(135deg, ${primaryColor}60, rgba(255,255,255,0.06))`,
+              boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.08)" : "inset 0 0 0 0.5px rgba(255,255,255,0.1)"
+            },
+            children: /* @__PURE__ */ jsxs3(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: isLightTheme ? primaryColor : "white",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx4("title", { children: "Agent" }),
+                  /* @__PURE__ */ jsx4("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
+                  /* @__PURE__ */ jsx4("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
+                ]
+              }
+            )
+          }
+        ) }),
+        showAvatar && isOwnMessage && /* @__PURE__ */ jsx4("div", { className: "w-7 flex-shrink-0" }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
+            children: [
+              senderLabel && /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: "mb-1 px-1 font-medium",
+                  style: {
+                    color: isLightTheme ? "rgba(0,0,0,0.45)" : "rgba(247,247,248,0.4)",
+                    fontSize: "11px",
+                    letterSpacing: "0.019em"
+                  },
+                  children: senderLabel
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "px-4 py-2.5",
+                  style: {
+                    ...isOwnMessage ? ownBubbleStyle : otherBubbleStyle,
+                    fontSize: "14px",
+                    lineHeight: "1.5",
+                    letterSpacing: "0.006em"
+                  },
+                  children: [
+                    message.messageType === "text" && (isOwnMessage ? (
+                      // User messages: plain text — no markdown parsing
+                      /* @__PURE__ */ jsx4("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
+                    ) : (
+                      // Bot / agent messages: full markdown rendering
+                      /* @__PURE__ */ jsx4(MarkdownMessage, { content: message.content, theme })
+                    )),
+                    message.messageType === "image" && /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+                      "img",
+                      {
+                        src: message.content,
+                        alt: "Attachment",
+                        className: "max-w-full h-auto rounded-lg",
+                        loading: "lazy"
+                      }
+                    ) }),
+                    message.messageType === "file" && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs3(
+                        "svg",
                         {
-                          ...props,
-                          src,
-                          alt,
-                          className: "max-w-full h-auto rounded-lg shadow-sm my-2",
-                          loading: "lazy"
+                          width: "18",
+                          height: "18",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.75",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx4("title", { children: "File" }),
+                            /* @__PURE__ */ jsx4("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+                          ]
                         }
                       ),
-                      a: ({ href, children, ...props }) => /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx4(
                         "a",
                         {
-                          ...props,
-                          href,
+                          href: message.content,
                           target: "_blank",
                           rel: "noopener noreferrer",
-                          className: `${isOwnMessage ? "text-blue-200 hover:text-blue-100" : "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"} underline`,
-                          children
+                          style: {
+                            color: isOwnMessage ? "rgba(255,255,255,0.85)" : primaryColor,
+                            textDecoration: "underline",
+                            textUnderlineOffset: "2px"
+                          },
+                          children: message.metadata?.fileName || "Download file"
                         }
                       )
-                    },
-                    children: message.content
-                  }
-                ),
-                message.messageType === "image" && /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
-                  "img",
-                  {
-                    src: message.content,
-                    alt: "Attachment",
-                    className: "max-w-full h-auto rounded-lg",
-                    loading: "lazy"
-                  }
-                ) }),
-                message.messageType === "file" && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "text-2xl", children: "\u{1F4CE}" }),
-                  /* @__PURE__ */ jsx2(
-                    "a",
-                    {
-                      href: message.content,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: `${isOwnMessage ? "text-blue-200 hover:text-blue-100" : "text-blue-600 hover:text-blue-700 dark:text-blue-400"} underline`,
-                      children: message.metadata?.fileName || "Download file"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          showTimestamp && /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              className: `flex items-center gap-2 mt-1 px-2 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
-              children: [
-                /* @__PURE__ */ jsx2("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatDistanceToNow(new Date(message.createdAt), {
-                  addSuffix: true
-                }) }),
-                isOwnMessage && message.status && /* @__PURE__ */ jsxs2("span", { className: "text-xs", children: [
-                  message.status === "sent" && "\u2713",
-                  message.status === "delivered" && "\u2713\u2713",
-                  message.status === "read" && /* @__PURE__ */ jsx2("span", { className: "text-blue-600", children: "\u2713\u2713" })
-                ] })
-              ]
-            }
-          )
-        ]
+                    ] })
+                  ]
+                }
+              ),
+              showTimestamp && /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "11px",
+                          letterSpacing: "0.019em",
+                          color: textMuted
+                        },
+                        children: formatDistanceToNow(new Date(message.createdAt), {
+                          addSuffix: true
+                        })
+                      }
+                    ),
+                    isOwnMessage && message.status && /* @__PURE__ */ jsxs3("span", { style: { color: textMuted }, children: [
+                      message.status === "sent" && /* @__PURE__ */ jsxs3(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx4("title", { children: "Sent" }),
+                            /* @__PURE__ */ jsx4("polyline", { points: "20 6 9 17 4 12" })
+                          ]
+                        }
+                      ),
+                      message.status === "delivered" && /* @__PURE__ */ jsxs3(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx4("title", { children: "Delivered" }),
+                            /* @__PURE__ */ jsx4("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ jsx4("polyline", { points: "22 6 11 17" })
+                          ]
+                        }
+                      ),
+                      message.status === "read" && /* @__PURE__ */ jsxs3(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: primaryColor,
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx4("title", { children: "Read" }),
+                            /* @__PURE__ */ jsx4("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ jsx4("polyline", { points: "22 6 11 17" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ThinkingIndicator.tsx
+import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PHRASE_POOLS = {
+  // ── Greetings & small talk ──
+  greeting: [
+    "Hey there!",
+    "Hello!",
+    "Hi! One moment",
+    "Welcome!",
+    "Nice to meet you"
+  ],
+  farewell: [
+    "Wrapping up",
+    "One last thing",
+    "Almost done"
+  ],
+  // ── Sales & pricing ──
+  pricing: [
+    "Crunching numbers",
+    "Checking our plans",
+    "Let me look into that",
+    "Pulling up pricing",
+    "Running the numbers",
+    "Checking options"
+  ],
+  quote: [
+    "Putting this together",
+    "Working on your quote",
+    "Gathering the details",
+    "Tailoring this for you"
+  ],
+  // ── Scheduling & booking ──
+  booking: [
+    "Checking the calendar",
+    "Finding good times",
+    "Pulling up availability",
+    "Let me check slots"
+  ],
+  // ── Technical questions ──
+  technical: [
+    "Diving into the docs",
+    "Interesting question",
+    "Let me look that up",
+    "Checking the specs",
+    "Hmm, good one",
+    "Researching this"
+  ],
+  code: [
+    "Reading the code",
+    "Checking the repo",
+    "Let me trace that",
+    "Debugging in my head"
+  ],
+  // ── Support & issues ──
+  support: [
+    "On it!",
+    "Let me help",
+    "Looking into this",
+    "Checking for you",
+    "I got you",
+    "Investigating"
+  ],
+  frustrated: [
+    "I hear you",
+    "Let me fix this",
+    "Sorry about that",
+    "Working on it now",
+    "Bear with me"
+  ],
+  // ── Services & capabilities ──
+  services: [
+    "Great question",
+    "Let me explain",
+    "Pulling up details",
+    "Good to know you ask"
+  ],
+  portfolio: [
+    "Checking our work",
+    "Pulling up examples",
+    "Let me show you",
+    "Finding case studies"
+  ],
+  // ── About the company ──
+  about: [
+    "Glad you asked!",
+    "Let me tell you",
+    "Good question",
+    "Here we go"
+  ],
+  // ── Comparison & decisions ──
+  comparison: [
+    "Weighing the options",
+    "Let me compare",
+    "Thinking through this",
+    "Good point"
+  ],
+  // ── Follow-up & continuation ──
+  followUp: [
+    "Let me dig deeper",
+    "More details coming",
+    "Building on that",
+    "Expanding on this"
+  ],
+  // ── General / fallback ──
+  general: [
+    "Hmm, let me think",
+    "One sec",
+    "On it",
+    "Working on it",
+    "Almost there",
+    "Bear with me",
+    "Let me check",
+    "Good question",
+    "Hang tight",
+    "Looking into it",
+    "Let me see",
+    "Thinking",
+    "Just a moment",
+    "Figuring this out"
+  ]
+};
+var CONTEXT_RULES = [
+  // Frustration / urgency (check first — trumps topic)
+  { key: "frustrated", pattern: /frustrat|angry|annoyed|terrible|worst|useless|waste|stupid|wtf|seriously|ridiculous|unacceptable|disappointing/ },
+  // Greetings (start of message)
+  { key: "greeting", pattern: /^(hi\b|hey\b|hello\b|good morning|good afternoon|good evening|g'day|howdy|yo\b|sup\b|what's up|greetings)/ },
+  { key: "farewell", pattern: /\b(thanks|thank you|bye|goodbye|cheers|that's all|that's it|no more|all good|perfect thanks)\b/ },
+  // Booking & scheduling
+  { key: "booking", pattern: /\b(book|schedule|meeting|appointment|calendar|available time|free slot|set up a call|arrange|consultation time|when can)\b/ },
+  // Pricing & quotes
+  { key: "quote", pattern: /\b(quote|proposal|estimate|project cost|custom price|tailor|bespoke)\b/ },
+  { key: "pricing", pattern: /\b(price|cost|how much|pricing|rate|fee|budget|afford|charge|per hour|hourly|package|plan|tier|subscription)\b/ },
+  // Technical / code
+  { key: "code", pattern: /\b(code|github|repo|commit|deploy|ci\/cd|docker|aws|lambda|api endpoint|sdk|npm|yarn|pnpm|typescript|react|next\.?js)\b/ },
+  { key: "technical", pattern: /\b(api|integrate|integration|stack|server|database|backend|frontend|infrastructure|architecture|performance|scalab|migration|devops|cloud)\b/ },
+  // Support & bugs
+  { key: "support", pattern: /\b(bug|error|issue|broken|not working|help|support|problem|fix|crash|down|fail|stuck|trouble|can't|cannot|doesn't work|won't)\b/ },
+  // Services & portfolio
+  { key: "portfolio", pattern: /\b(portfolio|case stud|example|previous work|client|project you|showcase|demo|sample)\b/ },
+  { key: "services", pattern: /\b(service|what do you|what can you|offer|do you do|capabilit|specializ|expertise|solution|consult|develop|design|build|create)\b/ },
+  // About company
+  { key: "about", pattern: /\b(who are|about you|your team|your company|where are you|location|office|founded|history|values|mission)\b/ },
+  // Comparison / decision-making
+  { key: "comparison", pattern: /\b(compare|vs|versus|difference|better|which one|alternative|competitor|pros and cons|trade.?off|should i|recommend)\b/ },
+  // Follow-up patterns (vague follow-ups to prior answers)
+  { key: "followUp", pattern: /\b(more detail|tell me more|elaborate|explain further|what about|and also|another question|one more|can you also|what else|go on)\b/ }
+];
+function detectContext(message) {
+  if (!message) return "general";
+  const lower = message.toLowerCase().trim();
+  for (const rule of CONTEXT_RULES) {
+    if (rule.pattern.test(lower)) return rule.key;
+  }
+  if (lower.split(/\s+/).length <= 3) return "general";
+  if (lower.endsWith("?")) return "general";
+  return "general";
+}
+function getShuffledPhrases(context) {
+  const pool = PHRASE_POOLS[context] || PHRASE_POOLS.general;
+  const contextPhrases = [...pool];
+  const extras = PHRASE_POOLS.general.filter((p) => !contextPhrases.includes(p)).sort(() => Math.random() - 0.5).slice(0, 3);
+  const combined = [...contextPhrases, ...extras];
+  for (let i = combined.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [combined[i], combined[j]] = [combined[j], combined[i]];
+  }
+  return combined;
+}
+function computeIsLightTheme2(bg) {
+  if (!bg?.startsWith("#")) return false;
+  const hex = bg.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+}
+function ThinkingIndicator({
+  lastUserMessage,
+  theme,
+  showAvatar = true
+}) {
+  const isLightTheme = computeIsLightTheme2(theme?.background);
+  const primaryColor = theme?.primary || "#337eff";
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
+  const [phraseIndex, setPhraseIndex] = useState6(0);
+  const [displayText, setDisplayText] = useState6("");
+  const [isDeleting, setIsDeleting] = useState6(false);
+  const phrasesRef = useRef3(getShuffledPhrases(detectContext(lastUserMessage)));
+  useEffect5(() => {
+    phrasesRef.current = getShuffledPhrases(detectContext(lastUserMessage));
+    setPhraseIndex(0);
+    setDisplayText("");
+    setIsDeleting(false);
+  }, [lastUserMessage]);
+  useEffect5(() => {
+    const phrases = phrasesRef.current;
+    const phrase = phrases[phraseIndex % phrases.length];
+    let timeout;
+    if (!isDeleting) {
+      if (displayText.length < phrase.length) {
+        timeout = setTimeout(
+          () => setDisplayText(phrase.slice(0, displayText.length + 1)),
+          30 + Math.random() * 30
+        );
+      } else {
+        timeout = setTimeout(() => setIsDeleting(true), 1800);
       }
-    )
-  ] });
+    } else {
+      if (displayText.length > 0) {
+        timeout = setTimeout(
+          () => setDisplayText(displayText.slice(0, -1)),
+          18
+        );
+      } else {
+        setIsDeleting(false);
+        setPhraseIndex((prev) => (prev + 1) % phrasesRef.current.length);
+      }
+    }
+    return () => clearTimeout(timeout);
+  }, [displayText, isDeleting, phraseIndex]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "flex gap-2.5 mb-3",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "Xcelsior is thinking",
+      children: [
+        showAvatar && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx5(XcelsiorAvatar, { size: 28 }) }),
+        /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)",
+              borderRadius: "18px 18px 18px 4px",
+              boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)",
+              padding: "12px 16px",
+              minWidth: 160
+            },
+            children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx5("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  style: {
+                    width: 5,
+                    height: 5,
+                    borderRadius: "50%",
+                    backgroundColor: primaryColor,
+                    display: "inline-block",
+                    animation: `thinkingPulse 1.4s ease-in-out ${i * 0.2}s infinite`
+                  }
+                },
+                i
+              )) }),
+              /* @__PURE__ */ jsxs4(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    color: textMuted,
+                    letterSpacing: "0.015em",
+                    fontStyle: "italic"
+                  },
+                  children: [
+                    displayText,
+                    /* @__PURE__ */ jsx5(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-block",
+                          width: 1,
+                          height: 13,
+                          backgroundColor: textMuted,
+                          marginLeft: 1,
+                          animation: "cursorBlink 0.8s step-end infinite",
+                          verticalAlign: "text-bottom"
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function MessageList({
   messages,
   currentUser,
@@ -659,16 +1734,31 @@ function MessageList({
   autoScroll = true,
   onLoadMore,
   hasMore = false,
-  isLoadingMore = false
+  isLoadingMore = false,
+  theme,
+  onQuickAction,
+  isBotThinking = false
 }) {
-  const messagesEndRef = useRef2(null);
-  const containerRef = useRef2(null);
-  const prevLengthRef = useRef2(messages.length);
-  const loadMoreTriggerRef = useRef2(null);
-  const prevScrollHeightRef = useRef2(0);
-  const hasInitialScrolledRef = useRef2(false);
-  const isUserScrollingRef = useRef2(false);
-  useEffect4(() => {
+  const messagesEndRef = useRef4(null);
+  const containerRef = useRef4(null);
+  const prevLengthRef = useRef4(messages.length);
+  const loadMoreTriggerRef = useRef4(null);
+  const prevScrollHeightRef = useRef4(0);
+  const hasInitialScrolledRef = useRef4(false);
+  const isUserScrollingRef = useRef4(false);
+  const bgColor = theme?.background || "#00001a";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const primaryColor = theme?.primary || "#337eff";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
+  useEffect6(() => {
     if (autoScroll && messagesEndRef.current) {
       if (messages.length > prevLengthRef.current && !isLoadingMore) {
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -676,7 +1766,7 @@ function MessageList({
       prevLengthRef.current = messages.length;
     }
   }, [messages.length, autoScroll, isLoadingMore]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (messages.length > 0 && messagesEndRef.current && !isLoading && !hasInitialScrolledRef.current) {
       setTimeout(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
@@ -690,7 +1780,7 @@ function MessageList({
       hasInitialScrolledRef.current = true;
     }
   }, [isLoading, messages.length]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (isLoadingMore) {
       prevScrollHeightRef.current = containerRef.current?.scrollHeight || 0;
     } else if (prevScrollHeightRef.current > 0 && containerRef.current) {
@@ -700,7 +1790,7 @@ function MessageList({
       prevScrollHeightRef.current = 0;
     }
   }, [isLoadingMore]);
-  const handleScroll = useCallback3(() => {
+  const handleScroll = useCallback4(() => {
     if (!containerRef.current || !onLoadMore || !hasMore || isLoadingMore) return;
     if (!isUserScrollingRef.current) return;
     const { scrollTop } = containerRef.current;
@@ -708,79 +1798,182 @@ function MessageList({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, isLoadingMore]);
-  useEffect4(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!container) return;
     container.addEventListener("scroll", handleScroll);
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx3(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx6(Spinner, { size: "lg" }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center h-full text-center p-8", children: [
-      /* @__PURE__ */ jsx3("div", { className: "text-6xl mb-4", children: "\u{1F4AC}" }),
-      /* @__PURE__ */ jsx3("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2", children: "No messages yet" }),
-      /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Start the conversation by sending a message below" })
+    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
+      /* @__PURE__ */ jsx6(
+        "h3",
+        {
+          className: "font-semibold mb-2",
+          style: {
+            color: textColor,
+            fontSize: "17px",
+            letterSpacing: "-0.01em"
+          },
+          children: "How can we help?"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "p",
+        {
+          className: "max-w-[240px]",
+          style: {
+            color: textMuted,
+            fontSize: "13px",
+            lineHeight: "1.5",
+            letterSpacing: "0.015em",
+            marginBottom: 20
+          },
+          children: "Ask us anything. We are here to help you get the most out of Xcelsior."
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap justify-center gap-2", children: [
+        { label: "Our services", message: "What services does Xcelsior offer?" },
+        { label: "Get a quote", message: "I would like to get a quote for a project" },
+        { label: "Support", message: "I need help with something" }
+      ].map((action) => /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: () => onQuickAction?.(action.message),
+          style: {
+            padding: "6px 14px",
+            borderRadius: "999px",
+            cursor: "pointer",
+            transition: "all 150ms ease",
+            backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)",
+            border: isLightTheme ? "1px solid rgba(0,0,0,0.1)" : "1px solid rgba(255,255,255,0.1)",
+            color: isLightTheme ? "rgba(0,0,0,0.6)" : "rgba(247,247,248,0.6)",
+            fontSize: "12px",
+            letterSpacing: "0.015em"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = isLightTheme ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.08)";
+            e.currentTarget.style.color = isLightTheme ? "rgba(0,0,0,0.8)" : "rgba(247,247,248,0.8)";
+            e.currentTarget.style.borderColor = primaryColor;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)";
+            e.currentTarget.style.color = isLightTheme ? "rgba(0,0,0,0.6)" : "rgba(247,247,248,0.6)";
+            e.currentTarget.style.borderColor = isLightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+          },
+          children: action.label
+        },
+        action.label
+      )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: containerRef,
-      className: "flex-1 overflow-y-auto p-4 space-y-2",
+      className: "flex-1 overflow-y-auto px-4 py-3",
       style: { scrollBehavior: "smooth" },
       children: [
-        isLoadingMore && /* @__PURE__ */ jsx3("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx3(Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ jsx3("div", { ref: loadMoreTriggerRef }),
-        messages.map((message) => /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx6("style", { children: `
+                @keyframes thinkingPulse {
+                    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+                    30% { opacity: 1; transform: scale(1); }
+                }
+                @keyframes cursorBlink {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0; }
+                }
+            ` }),
+        isLoadingMore && /* @__PURE__ */ jsx6("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx6(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ jsx6("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ jsx6(
           MessageItem,
           {
             message,
             currentUser,
             showAvatar: true,
-            showTimestamp: true
+            showTimestamp: true,
+            theme
           },
           message.id
         )),
-        isTyping && /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 mb-4", children: [
-          /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx3("div", { className: "h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium", children: "\u{1F3A7}" }) }),
-          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx3("div", { className: "rounded-2xl px-4 py-3 bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx3("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce" }),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
-                  style: { animationDelay: "0.1s" }
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
-                  style: { animationDelay: "0.2s" }
-                }
-              )
-            ] }) }),
-            typingUser && /* @__PURE__ */ jsxs3("span", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 px-2", children: [
-              typingUser,
-              " is typing..."
-            ] })
+        isTyping && /* @__PURE__ */ jsxs5("div", { className: "flex gap-2.5 mb-3", children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx6(XcelsiorAvatar, { size: 28 }) }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "px-4 py-3",
+                style: {
+                  backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)",
+                  borderRadius: "18px 18px 18px 4px",
+                  boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
+                },
+                children: /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx6(
+                  "span",
+                  {
+                    className: "rounded-full animate-bounce",
+                    style: {
+                      width: 5,
+                      height: 5,
+                      backgroundColor: `${primaryColor}80`,
+                      animationDelay: `${i * 0.15}s`,
+                      animationDuration: "0.8s"
+                    }
+                  },
+                  i
+                )) })
+              }
+            ),
+            typingUser && /* @__PURE__ */ jsxs5(
+              "span",
+              {
+                className: "mt-1 px-1",
+                style: {
+                  color: textMuted,
+                  fontSize: "11px",
+                  letterSpacing: "0.019em"
+                },
+                children: [
+                  typingUser,
+                  " is typing..."
+                ]
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+        isBotThinking && !isTyping && /* @__PURE__ */ jsx6(
+          ThinkingIndicator,
+          {
+            theme,
+            lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { ref: messagesEndRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
 import { createPortal } from "react-dom";
-import { Button, TextArea } from "@xcelsior/design-system";
 import Picker from "@emoji-mart/react";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function isLightColor(color) {
+  let r = 0, g = 0, b = 0;
+  if (color.startsWith("#")) {
+    const hex = color.replace("#", "");
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  }
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+}
 function ChatInput({
   onSend,
   onTyping,
@@ -788,20 +1981,26 @@ function ChatInput({
   fileUpload,
   disabled = false
 }) {
-  const [message, setMessage] = useState5("");
-  const [showEmojiPicker, setShowEmojiPicker] = useState5(false);
-  const [emojiData, setEmojiData] = useState5();
-  const [emojiPickerPosition, setEmojiPickerPosition] = useState5(null);
-  const textAreaRef = useRef3(null);
-  const emojiPickerRef = useRef3(null);
-  const emojiButtonRef = useRef3(null);
-  const fileInputRef = useRef3(null);
-  const typingTimeoutRef = useRef3(null);
-  const startTypingTimeoutRef = useRef3(null);
-  const isTypingRef = useRef3(false);
+  const [message, setMessage] = useState7("");
+  const [showEmojiPicker, setShowEmojiPicker] = useState7(false);
+  const [emojiData, setEmojiData] = useState7();
+  const [emojiPickerPosition, setEmojiPickerPosition] = useState7(null);
+  const [isFocused, setIsFocused] = useState7(false);
+  const textAreaRef = useRef5(null);
+  const emojiPickerRef = useRef5(null);
+  const emojiButtonRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const typingTimeoutRef = useRef5(null);
+  const startTypingTimeoutRef = useRef5(null);
+  const isTypingRef = useRef5(false);
   const enableEmoji = config.enableEmoji ?? true;
   const enableFileUpload = config.enableFileUpload ?? true;
-  useEffect5(() => {
+  const bgColor = config.theme?.background || "#00001a";
+  const isLightTheme = isLightColor(bgColor);
+  const textColor = config.theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = config.theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
+  const primaryColor = config.theme?.primary || "#337eff";
+  useEffect7(() => {
     if (!enableEmoji) return;
     (async () => {
       try {
@@ -812,7 +2011,7 @@ function ChatInput({
       }
     })();
   }, [enableEmoji]);
-  useEffect5(() => {
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
         setShowEmojiPicker(false);
@@ -825,7 +2024,7 @@ function ChatInput({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showEmojiPicker]);
-  useEffect5(() => {
+  useEffect7(() => {
     return () => {
       if (typingTimeoutRef.current) {
         clearTimeout(typingTimeoutRef.current);
@@ -835,7 +2034,7 @@ function ChatInput({
       }
     };
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!showEmojiPicker) return;
     const updatePosition = () => {
       if (emojiButtonRef.current) {
@@ -940,167 +2139,347 @@ ${uploadedFile.markdown}
       }
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3", children: [
-    /* @__PURE__ */ jsx4("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx4(
-        TextArea,
-        {
-          ref: textAreaRef,
-          value: message,
-          onChange: (e) => handleTyping(e.target.value),
-          onKeyDown: handleKeyDown,
-          placeholder: "Type a message...",
-          rows: 1,
-          className: "resize-none pr-24 pl-4 py-3 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm leading-5 placeholder-gray-500 dark:placeholder-gray-400",
-          disabled
-        }
-      ),
-      /* @__PURE__ */ jsxs4("div", { className: "absolute right-12 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
-        enableEmoji && /* @__PURE__ */ jsx4("div", { className: "relative", children: /* @__PURE__ */ jsx4(
-          "button",
+  const canSend = message.trim().length > 0 && !disabled;
+  const placeholderColor = isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.3)";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "px-4 py-3",
+      style: {
+        borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
           {
-            ref: emojiButtonRef,
-            type: "button",
-            onClick: () => {
-              if (!showEmojiPicker && emojiButtonRef.current) {
-                const rect = emojiButtonRef.current.getBoundingClientRect();
-                setEmojiPickerPosition({
-                  top: rect.top - 450,
-                  left: rect.left - 290
-                });
-              }
-              setShowEmojiPicker((v) => !v);
+            className: "relative flex items-center rounded-full transition-all duration-200",
+            style: {
+              backgroundColor: isLightTheme ? "rgba(112,115,124,0.08)" : "rgba(112,115,124,0.12)",
+              outline: isFocused ? `2px solid ${primaryColor}` : "none",
+              outlineOffset: "-1px",
+              border: isLightTheme ? "1px solid rgba(0,0,0,0.1)" : "1px solid rgba(255,255,255,0.08)",
+              backdropFilter: "blur(32px)"
             },
-            className: "p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
-            disabled,
-            "aria-label": "Add emoji",
-            children: /* @__PURE__ */ jsx4("span", { className: "text-lg", children: "\u{1F60A}" })
+            children: [
+              /* @__PURE__ */ jsx7("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
+              /* @__PURE__ */ jsx7(
+                "textarea",
+                {
+                  ref: textAreaRef,
+                  value: message,
+                  onChange: (e) => handleTyping(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => setIsFocused(false),
+                  placeholder: "Type a message...",
+                  rows: 1,
+                  className: "xchat-input flex-1 resize-none bg-transparent",
+                  style: {
+                    color: textColor,
+                    border: "none",
+                    outline: "none",
+                    boxShadow: "none",
+                    WebkitAppearance: "none",
+                    padding: "10px 0 10px 20px",
+                    minHeight: "42px",
+                    maxHeight: "120px",
+                    caretColor: primaryColor,
+                    fontSize: "14px",
+                    lineHeight: "20px",
+                    letterSpacing: "0.006em"
+                  },
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
+                enableEmoji && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    ref: emojiButtonRef,
+                    type: "button",
+                    onClick: () => {
+                      if (!showEmojiPicker && emojiButtonRef.current) {
+                        const rect = emojiButtonRef.current.getBoundingClientRect();
+                        setEmojiPickerPosition({
+                          top: rect.top - 450,
+                          left: rect.left - 290
+                        });
+                      }
+                      setShowEmojiPicker((v) => !v);
+                    },
+                    className: "p-1.5 rounded-lg transition-all duration-150",
+                    style: {
+                      color: textMuted,
+                      backgroundColor: "transparent"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)";
+                      e.currentTarget.style.color = textColor;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      e.currentTarget.style.color = textMuted;
+                    },
+                    disabled,
+                    "aria-label": "Add emoji",
+                    children: /* @__PURE__ */ jsxs6(
+                      "svg",
+                      {
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "1.75",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx7("title", { children: "Emoji" }),
+                          /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ jsx7("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+                          /* @__PURE__ */ jsx7("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+                          /* @__PURE__ */ jsx7("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => fileInputRef.current?.click(),
+                      className: "p-1.5 rounded-lg transition-all duration-150",
+                      style: {
+                        color: textMuted,
+                        backgroundColor: "transparent"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.06)";
+                        e.currentTarget.style.color = textColor;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                        e.currentTarget.style.color = textMuted;
+                      },
+                      disabled: disabled || fileUpload.isUploading,
+                      "aria-label": "Attach file",
+                      children: fileUpload.isUploading ? /* @__PURE__ */ jsxs6(
+                        "svg",
+                        {
+                          width: "18",
+                          height: "18",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.75",
+                          className: "animate-spin",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx7("title", { children: "Uploading" }),
+                            /* @__PURE__ */ jsx7("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsxs6(
+                        "svg",
+                        {
+                          width: "18",
+                          height: "18",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.75",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx7("title", { children: "Attach file" }),
+                            /* @__PURE__ */ jsx7("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: "image/*,application/pdf,.doc,.docx",
+                      className: "hidden",
+                      onChange: handleFileSelect
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSend,
+                    disabled: !canSend,
+                    className: "p-1.5 rounded-lg transition-all duration-200",
+                    style: {
+                      background: canSend ? `linear-gradient(135deg, ${primaryColor}, ${config.theme?.primaryStrong || "#005eff"})` : "transparent",
+                      color: canSend ? "#ffffff" : textMuted,
+                      opacity: canSend ? 1 : 0.35,
+                      cursor: canSend ? "pointer" : "default",
+                      boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
+                    },
+                    "aria-label": "Send message",
+                    children: /* @__PURE__ */ jsxs6(
+                      "svg",
+                      {
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx7("title", { children: "Send" }),
+                          /* @__PURE__ */ jsx7("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ jsx7("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
           }
-        ) }),
-        enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx4(
-            "button",
+        ),
+        fileUpload.isUploading && /* @__PURE__ */ jsxs6("div", { className: "mt-2 px-1", children: [
+          /* @__PURE__ */ jsx7(
+            "div",
             {
-              type: "button",
-              onClick: () => fileInputRef.current?.click(),
-              className: "p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
-              disabled: disabled || fileUpload.isUploading,
-              "aria-label": "Attach file",
-              children: fileUpload.isUploading ? /* @__PURE__ */ jsx4("span", { className: "text-lg animate-spin", children: "\u23F3" }) : /* @__PURE__ */ jsx4("span", { className: "text-lg", children: "\u{1F4CE}" })
+              className: "w-full rounded-full overflow-hidden",
+              style: {
+                height: 3,
+                backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
+              },
+              children: /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "h-full rounded-full transition-all duration-300",
+                  style: {
+                    width: `${fileUpload.uploadProgress}%`,
+                    background: `linear-gradient(90deg, ${primaryColor}, ${config.theme?.primaryStrong || "#005eff"})`
+                  }
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsx4(
-            "input",
+          /* @__PURE__ */ jsxs6(
+            "p",
             {
-              ref: fileInputRef,
-              type: "file",
-              accept: "image/*,application/pdf,.doc,.docx",
-              className: "hidden",
-              onChange: handleFileSelect
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx4("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx4(
-        Button,
-        {
-          onClick: handleSend,
-          disabled: !message.trim() || disabled,
-          variant: "primary",
-          size: "sm",
-          className: "h-9 w-9 p-0 rounded-full flex items-center justify-center shadow-sm",
-          children: /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs4(
-            "svg",
-            {
-              className: "w-4 h-4 rotate-90",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "aria-hidden": "true",
+              className: "mt-1",
+              style: {
+                fontSize: "11px",
+                letterSpacing: "0.019em",
+                color: textMuted
+              },
               children: [
-                /* @__PURE__ */ jsx4("title", { children: "Send icon" }),
-                /* @__PURE__ */ jsx4(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                  }
-                )
-              ]
-            }
-          ) })
-        }
-      ) })
-    ] }) }),
-    fileUpload.isUploading && /* @__PURE__ */ jsxs4("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx4("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx4(
-        "div",
-        {
-          className: "bg-blue-600 h-1.5 rounded-full transition-all duration-300",
-          style: { width: `${fileUpload.uploadProgress}%` }
-        }
-      ) }),
-      /* @__PURE__ */ jsxs4("p", { className: "text-xs text-gray-600 dark:text-gray-400 mt-1", children: [
-        "Uploading... ",
-        fileUpload.uploadProgress,
-        "%"
-      ] })
-    ] }),
-    showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx4(
-        "div",
-        {
-          ref: emojiPickerRef,
-          className: "fixed rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 shadow-xl",
-          style: {
-            top: `${emojiPickerPosition.top}px`,
-            left: `${emojiPickerPosition.left}px`,
-            zIndex: 9999
-          },
-          children: /* @__PURE__ */ jsx4(
-            Picker,
+                "Uploading... ",
+                fileUpload.uploadProgress,
+                "%"
+              ]
+            }
+          )
+        ] }),
+        showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx7(
+            "div",
             {
-              data: emojiData,
-              onEmojiSelect: (emoji) => {
-                insertAtCursor(emoji.native || emoji.shortcodes || "");
-                setShowEmojiPicker(false);
+              ref: emojiPickerRef,
+              className: "fixed rounded-xl overflow-hidden",
+              style: {
+                top: `${emojiPickerPosition.top}px`,
+                left: `${emojiPickerPosition.left}px`,
+                zIndex: 9999,
+                boxShadow: [
+                  "inset 0 0 0 0.5px rgba(255,255,255,0.06)",
+                  "inset 0 1px 0 0 rgba(255,255,255,0.1)",
+                  "0 16px 48px -8px rgba(0,0,0,0.5)"
+                ].join(", ")
               },
-              previewPosition: "none",
-              skinTonePosition: "none",
-              navPosition: "bottom",
-              perLine: 8,
-              searchPosition: "sticky",
-              theme: "auto"
+              children: /* @__PURE__ */ jsx7(
+                Picker,
+                {
+                  data: emojiData,
+                  onEmojiSelect: (emoji) => {
+                    insertAtCursor(emoji.native || emoji.shortcodes || "");
+                    setShowEmojiPicker(false);
+                  },
+                  previewPosition: "none",
+                  skinTonePosition: "none",
+                  navPosition: "bottom",
+                  perLine: 8,
+                  searchPosition: "sticky",
+                  theme: "dark"
+                }
+              )
             }
-          )
-        }
-      ),
-      document.body
-    )
-  ] });
+          ),
+          document.body
+        )
+      ]
+    }
+  );
 }
 
 // src/components/ChatWidget.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function getAnonymousUser() {
+  let anonId;
+  try {
+    const stored = localStorage.getItem("xcelsior-chat-anon-id");
+    if (stored) {
+      anonId = stored;
+    } else {
+      anonId = `anon-${crypto.randomUUID?.() || Math.random().toString(36).slice(2)}`;
+      localStorage.setItem("xcelsior-chat-anon-id", anonId);
+    }
+  } catch {
+    anonId = `anon-${Math.random().toString(36).slice(2)}`;
+  }
+  return {
+    name: "Visitor",
+    email: `${anonId}@anonymous.xcelsior.co`,
+    type: "customer",
+    status: "online"
+  };
+}
 function ChatWidget({
   config,
   className = "",
   variant = "popover",
   externalWebSocket,
   onMinimize,
-  onClose
+  onClose,
+  resolvedPosition = "right"
 }) {
   const isFullPage = variant === "fullPage";
-  const websocket = useWebSocket(config, externalWebSocket);
-  const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
-    websocket,
-    config
-  );
+  const effectiveUser = config.currentUser || getAnonymousUser();
+  const effectiveConfig = { ...config, currentUser: effectiveUser };
+  const websocket = useWebSocket(effectiveConfig, externalWebSocket);
+  const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore, isBotThinking } = useMessages(websocket, effectiveConfig);
   const fileUpload = useFileUpload(config.apiKey, config.fileUpload);
   const { isTyping, typingUsers } = useTypingIndicator(websocket);
-  const handleSendMessage = useCallback4(
+  const { width, height, isResizing, isNearEdge, containerResizeProps } = useResizableWidget({
+    initialWidth: 380,
+    initialHeight: 580,
+    minWidth: 320,
+    minHeight: 400,
+    maxWidth: 800,
+    maxHeight: 900,
+    enabled: !isFullPage
+  });
+  const handleSendMessage = useCallback5(
     (content) => {
       if (!websocket.isConnected) {
         config.toast?.error("Not connected to chat server");
@@ -1109,8 +2488,8 @@ function ChatWidget({
       const optimisticMessage = {
         id: `temp-${Date.now()}`,
         conversationId: config.conversationId || "",
-        senderId: config.currentUser.email,
-        senderType: config.currentUser.type,
+        senderId: effectiveUser.email,
+        senderType: effectiveUser.type,
         content,
         messageType: "text",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -1124,13 +2503,11 @@ function ChatWidget({
       });
       config.onMessageSent?.(optimisticMessage);
     },
-    [websocket, config, addMessage]
+    [websocket, config, addMessage, effectiveUser]
   );
-  const handleTyping = useCallback4(
+  const handleTyping = useCallback5(
     (isTyping2) => {
-      if (!websocket.isConnected || config.enableTypingIndicator === false) {
-        return;
-      }
+      if (!websocket.isConnected || config.enableTypingIndicator === false) return;
       websocket.sendMessage("typing", {
         conversationId: config.conversationId,
         isTyping: isTyping2
@@ -1138,83 +2515,217 @@ function ChatWidget({
     },
     [websocket, config]
   );
-  useEffect6(() => {
+  useEffect8(() => {
     if (websocket.error) {
       config.toast?.error(websocket.error.message || "An error occurred");
     }
   }, [websocket.error, config]);
-  const containerClasses = isFullPage ? `flex flex-col bg-white dark:bg-gray-900 h-full ${className}` : `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`;
-  const containerStyle = isFullPage ? void 0 : {
-    width: "400px",
-    height: "600px",
-    maxHeight: "calc(100vh - 2rem)"
+  const bgColor = config.theme?.background || "#00001a";
+  const bgAlt = config.theme?.backgroundAlt || "#02164a";
+  const textColor = config.theme?.text || "#f7f7f8";
+  const primaryColor = config.theme?.primary || "#337eff";
+  const textMuted = config.theme?.textMuted || "rgba(247,247,248,0.45)";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const positionClass = resolvedPosition === "left" ? "left-4" : "right-4";
+  const containerStyle = isFullPage ? { backgroundColor: bgColor, color: textColor } : {
+    position: "relative",
+    width,
+    height,
+    maxHeight: "calc(100vh - 100px)",
+    backgroundColor: bgColor,
+    color: textColor,
+    borderRadius: 16,
+    /* Xcelsior card pattern: inset box-shadow borders instead of border-image */
+    boxShadow: isLightTheme ? [
+      "0 25px 60px -12px rgba(0,0,0,0.15)",
+      "0 0 0 1px rgba(0,0,0,0.08)"
+    ].join(", ") : [
+      "inset 0 0 0 0.5px rgba(255,255,255,0.06)",
+      "inset 0 1px 0 0 rgba(255,255,255,0.12)",
+      "0 25px 60px -12px rgba(0,0,0,0.6)",
+      "0 0 40px -8px rgba(51,126,255,0.15)"
+    ].join(", "),
+    userSelect: isResizing ? "none" : void 0
   };
-  return /* @__PURE__ */ jsxs5("div", { className: containerClasses, style: containerStyle, children: [
-    !isFullPage && /* @__PURE__ */ jsx5(
-      ChatHeader,
-      {
-        agent: config.currentUser.type === "customer" ? {
-          email: "contact@xcelsior.co",
-          name: "Support Agent",
-          type: "agent",
-          status: websocket.isConnected ? "online" : "offline"
-        } : void 0,
-        onMinimize,
-        onClose
-      }
-    ),
-    !websocket.isConnected && /* @__PURE__ */ jsx5("div", { className: "bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800 px-4 py-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx5("div", { className: "w-2 h-2 rounded-full bg-yellow-500 animate-pulse" }),
-      /* @__PURE__ */ jsx5("span", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "Reconnecting..." }),
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          onClick: websocket.reconnect,
-          className: "ml-auto text-xs text-yellow-700 dark:text-yellow-300 hover:underline",
-          children: "Retry"
-        }
-      )
-    ] }) }),
-    isLoading ? /* @__PURE__ */ jsx5("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
-      /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Loading messages..." })
-    ] }) }) : /* @__PURE__ */ jsx5(
-      MessageList,
-      {
-        messages,
-        currentUser: config.currentUser,
-        isTyping,
-        typingUser: typingUsers[0],
-        autoScroll: true,
-        onLoadMore: loadMore,
-        hasMore,
-        isLoadingMore
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      ChatInput,
-      {
-        onSend: handleSendMessage,
-        onTyping: handleTyping,
-        config,
-        fileUpload,
-        disabled: !websocket.isConnected
-      }
-    ),
-    !isFullPage && /* @__PURE__ */ jsx5("div", { className: "bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs5("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
-      "Powered by ",
-      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: "Xcelsior Chat" })
-    ] }) })
-  ] });
+  const dotGridBg = !isFullPage ? {
+    backgroundImage: isLightTheme ? `radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px)` : `radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)`,
+    backgroundSize: "24px 24px"
+  } : {};
+  const edgeHintStyle = !isFullPage && isNearEdge ? {
+    outline: isLightTheme ? "2px solid rgba(0,94,255,0.25)" : "2px solid rgba(51,126,255,0.35)",
+    outlineOffset: -1,
+    transition: "outline 150ms ease"
+  } : {
+    outline: "2px solid transparent",
+    outlineOffset: -1,
+    transition: "outline 150ms ease"
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: isFullPage ? `flex flex-col h-full ${className}` : `fixed bottom-20 ${positionClass} z-50 flex flex-col overflow-hidden ${className}`,
+      style: { ...containerStyle, ...dotGridBg, ...edgeHintStyle },
+      ...!isFullPage ? containerResizeProps : {},
+      children: [
+        !isFullPage && /* @__PURE__ */ jsx8(
+          ChatHeader,
+          {
+            agent: effectiveUser.type === "customer" ? {
+              email: "contact@xcelsior.co",
+              name: "Xcelsior Software",
+              type: "agent",
+              status: websocket.isConnected ? "online" : "offline"
+            } : void 0,
+            onMinimize,
+            onClose,
+            theme: config.theme
+          }
+        ),
+        !websocket.isConnected && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "px-4 py-2",
+            style: {
+              backgroundColor: isLightTheme ? "rgba(255,169,56,0.08)" : "rgba(255,169,56,0.06)",
+              borderBottom: `1px solid rgba(255,169,56,${isLightTheme ? "0.15" : "0.12"})`
+            },
+            children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "w-1.5 h-1.5 rounded-full animate-pulse",
+                  style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  style: {
+                    fontSize: "12px",
+                    letterSpacing: "0.015em",
+                    color: config.theme?.statusCaution || "#ffa938"
+                  },
+                  children: "Reconnecting..."
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: websocket.reconnect,
+                  className: "ml-auto transition-opacity",
+                  style: {
+                    fontSize: "12px",
+                    letterSpacing: "0.015em",
+                    color: config.theme?.statusCaution || "#ffa938",
+                    opacity: 0.7
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = "0.7";
+                  },
+                  children: "Retry"
+                }
+              )
+            ] })
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsx8("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
+              style: {
+                borderColor: primaryColor,
+                borderTopColor: "transparent"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "p",
+            {
+              style: {
+                fontSize: "12px",
+                letterSpacing: "0.015em",
+                color: textMuted
+              },
+              children: "Loading messages..."
+            }
+          )
+        ] }) }) : /* @__PURE__ */ jsx8(
+          MessageList,
+          {
+            messages,
+            currentUser: effectiveUser,
+            isTyping,
+            typingUser: typingUsers[0],
+            autoScroll: true,
+            onLoadMore: loadMore,
+            hasMore,
+            isLoadingMore,
+            theme: config.theme,
+            onQuickAction: handleSendMessage,
+            isBotThinking
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          ChatInput,
+          {
+            onSend: handleSendMessage,
+            onTyping: handleTyping,
+            config: effectiveConfig,
+            fileUpload,
+            disabled: !websocket.isConnected
+          }
+        ),
+        !isFullPage && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "px-4 py-1.5 text-center",
+            style: {
+              borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)",
+              backgroundColor: isLightTheme ? "rgba(0,0,0,0.03)" : "rgba(0,0,0,0.2)"
+            },
+            children: /* @__PURE__ */ jsxs7(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  letterSpacing: "0.025em",
+                  color: isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.28)"
+                },
+                children: [
+                  "Powered by",
+                  " ",
+                  /* @__PURE__ */ jsx8("span", { style: {
+                    fontWeight: 600,
+                    color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
+                  }, children: "Xcelsior" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/Chat.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useState as useState11 } from "react";
 
 // src/components/PreChatForm.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function PreChatForm({
   onSubmit,
   className = "",
@@ -1223,10 +2734,11 @@ function PreChatForm({
   onMinimize,
   onClose
 }) {
-  const [name, setName] = useState6(initialName);
-  const [email, setEmail] = useState6(initialEmail);
-  const [errors, setErrors] = useState6({});
-  const [isSubmitting, setIsSubmitting] = useState6(false);
+  const [name, setName] = useState8(initialName);
+  const [email, setEmail] = useState8(initialEmail);
+  const [errors, setErrors] = useState8({});
+  const [isSubmitting, setIsSubmitting] = useState8(false);
+  const [focusedField, setFocusedField] = useState8(null);
   const validateForm = () => {
     const newErrors = {};
     if (!name.trim()) {
@@ -1259,97 +2771,194 @@ function PreChatForm({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs6(
+  const inputStyle = (fieldName, hasError) => ({
+    width: "100%",
+    padding: "10px 16px",
+    fontSize: "14px",
+    lineHeight: "20px",
+    letterSpacing: "0.006em",
+    color: "#f7f7f8",
+    backgroundColor: "rgba(255,255,255,0.04)",
+    border: "none",
+    borderRadius: "12px",
+    outline: "none",
+    boxShadow: hasError ? "inset 0 0 0 1px rgba(255,99,99,0.5)" : focusedField === fieldName ? "inset 0 0 0 1px rgba(51,126,255,0.4), 0 0 0 3px rgba(51,126,255,0.15)" : "inset 0 0 0 0.5px rgba(255,255,255,0.08)",
+    transition: "box-shadow 0.2s ease",
+    caretColor: "#337eff"
+  });
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`,
+      className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
       style: {
-        width: "400px",
-        maxHeight: "calc(100vh - 2rem)"
+        width: 380,
+        maxHeight: "calc(100vh - 2rem)",
+        backgroundColor: "#00001a",
+        borderRadius: 16,
+        boxShadow: [
+          "inset 0 0 0 0.5px rgba(255,255,255,0.06)",
+          "inset 0 1px 0 0 rgba(255,255,255,0.12)",
+          "0 25px 60px -12px rgba(0,0,0,0.6)",
+          "0 0 40px -8px rgba(51,126,255,0.15)"
+        ].join(", "),
+        /* Dot grid texture */
+        backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)",
+        backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx6("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
-            /* @__PURE__ */ jsx6("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex gap-2 ml-2", children: [
-            /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                onClick: onMinimize,
-                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
-                "aria-label": "Minimize chat",
-                children: /* @__PURE__ */ jsxs6(
-                  "svg",
-                  {
-                    className: "w-5 h-5",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: [
-                      /* @__PURE__ */ jsx6("title", { children: "Minimize" }),
-                      /* @__PURE__ */ jsx6(
-                        "path",
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: "relative text-white overflow-hidden",
+            style: {
+              background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
+            },
+            children: [
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none",
+                  style: {
+                    background: "linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 40%)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx9("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx9(
+                    "h2",
+                    {
+                      className: "font-semibold",
+                      style: {
+                        fontSize: "17px",
+                        letterSpacing: "-0.01em"
+                      },
+                      children: "Start a Conversation"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "p",
+                    {
+                      className: "mt-1",
+                      style: {
+                        fontSize: "13px",
+                        letterSpacing: "0.015em",
+                        color: "rgba(255,255,255,0.6)"
+                      },
+                      children: "Please provide your details to continue"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 ml-2", children: [
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onMinimize,
+                      className: "p-2 rounded-lg transition-all duration-150",
+                      style: { backgroundColor: "transparent" },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      "aria-label": "Minimize chat",
+                      children: /* @__PURE__ */ jsxs8(
+                        "svg",
                         {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M20 12H4"
+                          width: "18",
+                          height: "18",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx9("title", { children: "Minimize" }),
+                            /* @__PURE__ */ jsx9(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M20 12H4"
+                              }
+                            )
+                          ]
                         }
                       )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
-                "aria-label": "Close chat",
-                children: /* @__PURE__ */ jsxs6(
-                  "svg",
-                  {
-                    className: "w-5 h-5",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: [
-                      /* @__PURE__ */ jsx6("title", { children: "Close" }),
-                      /* @__PURE__ */ jsx6(
-                        "path",
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      className: "p-2 rounded-lg transition-all duration-150",
+                      style: { backgroundColor: "transparent" },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      "aria-label": "Close chat",
+                      children: /* @__PURE__ */ jsxs8(
+                        "svg",
                         {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M6 18L18 6M6 6l12 12"
+                          width: "18",
+                          height: "18",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx9("title", { children: "Close" }),
+                            /* @__PURE__ */ jsx9(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M6 18L18 6M6 6l12 12"
+                              }
+                            )
+                          ]
                         }
                       )
-                    ]
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "h-px",
+                  style: {
+                    background: "linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent 95%)"
                   }
-                )
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "p-6 space-y-5", children: [
-          /* @__PURE__ */ jsxs6("div", { children: [
-            /* @__PURE__ */ jsxs6(
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsxs8(
               "label",
               {
                 htmlFor: "chat-name",
-                className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200",
+                className: "block mb-2 font-medium",
+                style: {
+                  fontSize: "13px",
+                  letterSpacing: "0.015em",
+                  color: "rgba(247,247,248,0.72)"
+                },
                 children: [
                   "Name ",
-                  /* @__PURE__ */ jsx6("span", { className: "text-red-500", children: "*" })
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 type: "text",
@@ -1361,27 +2970,46 @@ function PreChatForm({
                     setErrors((prev) => ({ ...prev, name: void 0 }));
                   }
                 },
-                className: `block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${errors.name ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500"} dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`,
+                onFocus: () => setFocusedField("name"),
+                onBlur: () => setFocusedField(null),
+                style: inputStyle("name", !!errors.name),
                 placeholder: "John Doe",
                 disabled: isSubmitting,
                 autoComplete: "name"
               }
             ),
-            errors.name && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-red-600 dark:text-red-500", role: "alert", children: errors.name })
+            errors.name && /* @__PURE__ */ jsx9(
+              "p",
+              {
+                className: "mt-1.5",
+                style: {
+                  fontSize: "12px",
+                  letterSpacing: "0.015em",
+                  color: "#ff6363"
+                },
+                role: "alert",
+                children: errors.name
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs6("div", { children: [
-            /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsxs8(
               "label",
               {
                 htmlFor: "chat-email",
-                className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200",
+                className: "block mb-2 font-medium",
+                style: {
+                  fontSize: "13px",
+                  letterSpacing: "0.015em",
+                  color: "rgba(247,247,248,0.72)"
+                },
                 children: [
                   "Email ",
-                  /* @__PURE__ */ jsx6("span", { className: "text-red-500", children: "*" })
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 type: "email",
@@ -1393,50 +3021,65 @@ function PreChatForm({
                     setErrors((prev) => ({ ...prev, email: void 0 }));
                   }
                 },
-                className: `block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${errors.email ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500"} dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`,
+                onFocus: () => setFocusedField("email"),
+                onBlur: () => setFocusedField(null),
+                style: inputStyle("email", !!errors.email),
                 placeholder: "john@example.com",
                 disabled: isSubmitting,
                 autoComplete: "email"
               }
             ),
-            errors.email && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-red-600 dark:text-red-500", role: "alert", children: errors.email })
+            errors.email && /* @__PURE__ */ jsx9(
+              "p",
+              {
+                className: "mt-1.5",
+                style: {
+                  fontSize: "12px",
+                  letterSpacing: "0.015em",
+                  color: "#ff6363"
+                },
+                role: "alert",
+                children: errors.email
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "submit",
               disabled: isSubmitting,
-              className: "w-full px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all",
-              children: isSubmitting ? /* @__PURE__ */ jsxs6("span", { className: "flex items-center justify-center", children: [
-                /* @__PURE__ */ jsxs6(
+              className: "w-full py-2.5 rounded-xl font-semibold text-white transition-all duration-200",
+              style: {
+                fontSize: "14px",
+                letterSpacing: "0.006em",
+                background: "linear-gradient(135deg, #337eff, #005eff)",
+                boxShadow: "0 4px 16px -4px rgba(51,126,255,0.4)",
+                opacity: isSubmitting ? 0.6 : 1,
+                cursor: isSubmitting ? "not-allowed" : "pointer"
+              },
+              onMouseEnter: (e) => {
+                if (!isSubmitting) {
+                  e.currentTarget.style.boxShadow = "0 6px 20px -4px rgba(51,126,255,0.5)";
+                }
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
+              },
+              children: isSubmitting ? /* @__PURE__ */ jsxs8("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxs8(
                   "svg",
                   {
-                    className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    fill: "none",
+                    className: "animate-spin",
+                    width: "18",
+                    height: "18",
                     viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
                     "aria-label": "Loading",
                     children: [
-                      /* @__PURE__ */ jsx6("title", { children: "Loading" }),
-                      /* @__PURE__ */ jsx6(
-                        "circle",
-                        {
-                          className: "opacity-25",
-                          cx: "12",
-                          cy: "12",
-                          r: "10",
-                          stroke: "currentColor",
-                          strokeWidth: "4"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx6(
-                        "path",
-                        {
-                          className: "opacity-75",
-                          fill: "currentColor",
-                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        }
-                      )
+                      /* @__PURE__ */ jsx9("title", { children: "Loading" }),
+                      /* @__PURE__ */ jsx9("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                     ]
                   }
                 ),
@@ -1444,28 +3087,136 @@ function PreChatForm({
               ] }) : "Start Chat"
             }
           ),
-          /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: "We respect your privacy. Your information will only be used to assist you." })
+          /* @__PURE__ */ jsx9(
+            "p",
+            {
+              className: "text-center",
+              style: {
+                fontSize: "11px",
+                letterSpacing: "0.019em",
+                color: "rgba(247,247,248,0.28)"
+              },
+              children: "We respect your privacy. Your information will only be used to assist you."
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs6("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
-          "Powered by ",
-          /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: "Xcelsior Chat" })
-        ] }) })
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: "px-4 py-1.5 text-center",
+            style: {
+              borderTop: "1px solid rgba(255,255,255,0.06)",
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
+            children: /* @__PURE__ */ jsxs8(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  letterSpacing: "0.025em",
+                  color: "rgba(247,247,248,0.28)"
+                },
+                children: [
+                  "Powered by",
+                  " ",
+                  /* @__PURE__ */ jsx9("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
+                ]
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
 
+// src/hooks/useDraggablePosition.ts
+import { useState as useState9, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect9 } from "react";
+var STORAGE_KEY2 = "xcelsior-chat-position";
+function getStoredPosition() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    if (stored === "left" || stored === "right") return stored;
+  } catch {
+  }
+  return "right";
+}
+function storePosition(position) {
+  try {
+    localStorage.setItem(STORAGE_KEY2, position);
+  } catch {
+  }
+}
+function useDraggablePosition(configPosition = "auto") {
+  const resolvedDefault = configPosition === "auto" ? getStoredPosition() : configPosition;
+  const [position, setPosition] = useState9(resolvedDefault);
+  const [isDragging, setIsDragging] = useState9(false);
+  const dragStartX = useRef6(0);
+  const fabRef = useRef6(null);
+  const hasShownHint = useRef6(false);
+  const [showHint, setShowHint] = useState9(false);
+  useEffect9(() => {
+    try {
+      const hasVisited = localStorage.getItem("xcelsior-chat-hint-shown");
+      if (!hasVisited && !hasShownHint.current) {
+        hasShownHint.current = true;
+        setShowHint(true);
+        const timer = setTimeout(() => {
+          setShowHint(false);
+          localStorage.setItem("xcelsior-chat-hint-shown", "true");
+        }, 2e3);
+        return () => clearTimeout(timer);
+      }
+    } catch {
+    }
+  }, []);
+  const handlePointerDown = useCallback6((e) => {
+    dragStartX.current = e.clientX;
+    setIsDragging(true);
+    e.target.setPointerCapture(e.pointerId);
+  }, []);
+  const handlePointerMove = useCallback6((_e) => {
+  }, []);
+  const handlePointerUp = useCallback6(
+    (e) => {
+      setIsDragging(false);
+      e.target.releasePointerCapture(e.pointerId);
+      const deltaX = e.clientX - dragStartX.current;
+      if (Math.abs(deltaX) > 50) {
+        const screenMid = window.innerWidth / 2;
+        const newPosition = e.clientX < screenMid ? "left" : "right";
+        if (newPosition !== position) {
+          setPosition(newPosition);
+          storePosition(newPosition);
+        }
+      }
+    },
+    [position]
+  );
+  return {
+    position,
+    isDragging,
+    showHint,
+    fabRef,
+    handlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp
+    }
+  };
+}
+
 // src/hooks/useChatWidgetState.ts
-import { useCallback as useCallback5, useState as useState7 } from "react";
+import { useCallback as useCallback7, useState as useState10 } from "react";
 function useChatWidgetState({
   state: controlledState,
   defaultState = "minimized",
   onStateChange
 }) {
-  const [uncontrolledState, setUncontrolledState] = useState7(defaultState);
+  const [uncontrolledState, setUncontrolledState] = useState10(defaultState);
   const isControlled = controlledState !== void 0 && controlledState !== "undefined";
   const currentState = isControlled ? controlledState : uncontrolledState;
-  const setState = useCallback5(
+  const setState = useCallback7(
     (newValue) => {
       if (!isControlled) {
         setUncontrolledState(newValue);
@@ -1482,7 +3233,7 @@ function useChatWidgetState({
 }
 
 // src/components/Chat.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function generateSessionId() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
@@ -1498,15 +3249,48 @@ function Chat({
   defaultState = "minimized",
   onStateChange
 }) {
-  const [userInfo, setUserInfo] = useState8(null);
-  const [conversationId, setConversationId] = useState8("");
-  const [isLoading, setIsLoading] = useState8(true);
-  const { currentState, setState } = useChatWidgetState({
+  const [userInfo, setUserInfo] = useState11(null);
+  const [conversationId, setConversationId] = useState11("");
+  const [isLoading, setIsLoading] = useState11(true);
+  const [isAnimating, setIsAnimating] = useState11(false);
+  const [showWidget, setShowWidget] = useState11(false);
+  const identityMode = config.identityCollection || "progressive";
+  const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
+  const { currentState, setState: setStateRaw } = useChatWidgetState({
     state,
     defaultState,
     onStateChange
   });
-  useEffect7(() => {
+  const setState = useCallback8(
+    (newState) => {
+      if (newState === "open" && currentState === "minimized") {
+        setShowWidget(true);
+        setIsAnimating(true);
+        setStateRaw(newState);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsAnimating(false);
+          });
+        });
+      } else if ((newState === "minimized" || newState === "closed") && currentState === "open") {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setShowWidget(false);
+          setIsAnimating(false);
+          setStateRaw(newState);
+        }, 200);
+      } else {
+        setStateRaw(newState);
+      }
+    },
+    [currentState, setStateRaw]
+  );
+  useEffect10(() => {
+    if (currentState === "open") {
+      setShowWidget(true);
+    }
+  }, [currentState]);
+  useEffect10(() => {
     const initializeSession = () => {
       try {
         if (config.currentUser?.email && config.currentUser?.name) {
@@ -1542,15 +3326,8 @@ function Chat({
         }
         const convId = config.conversationId || generateSessionId();
         setConversationId(convId);
-        if (config.currentUser?.email && config.currentUser?.name) {
-          const user = {
-            name: config.currentUser.name,
-            email: config.currentUser.email,
-            avatar: config.currentUser.avatar,
-            type: "customer",
-            status: "online"
-          };
-          setUserInfo(user);
+        if (identityMode === "progressive" || identityMode === "none") {
+          setUserInfo(null);
         }
       } catch (error) {
         console.error("Error initializing chat session:", error);
@@ -1560,16 +3337,11 @@ function Chat({
       }
     };
     initializeSession();
-  }, [config, storageKeyPrefix]);
-  const handlePreChatSubmit = useCallback6(
+  }, [config, storageKeyPrefix, identityMode]);
+  const handlePreChatSubmit = useCallback8(
     (name, email) => {
       const convId = conversationId || generateSessionId();
-      const user = {
-        name,
-        email,
-        type: "customer",
-        status: "online"
-      };
+      const user = { name, email, type: "customer", status: "online" };
       const storageData = {
         name,
         email,
@@ -1578,8 +3350,7 @@ function Chat({
       };
       try {
         localStorage.setItem(`${storageKeyPrefix}_user`, JSON.stringify(storageData));
-      } catch (error) {
-        console.error("Error storing user data:", error);
+      } catch {
       }
       setUserInfo(user);
       setConversationId(convId);
@@ -1587,26 +3358,55 @@ function Chat({
     },
     [conversationId, storageKeyPrefix, onPreChatSubmit]
   );
-  if (isLoading) {
-    return null;
-  }
-  if (currentState === "closed") {
-    return null;
-  }
+  if (isLoading) return null;
+  if (currentState === "closed") return null;
+  const positionClass = position === "left" ? "left-4" : "right-4";
+  const primaryColor = config.theme?.primary || "#337eff";
+  const primaryStrong = config.theme?.primaryStrong || "#005eff";
   if (currentState === "minimized") {
-    return /* @__PURE__ */ jsx7("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx10("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
         onClick: () => setState("open"),
-        className: "h-14 w-14 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-xl transition-all flex items-center justify-center relative",
+        className: `group relative rounded-full text-white transition-all duration-300 flex items-center justify-center touch-none select-none ${showHint ? "animate-bounce" : ""} ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "scale(1.08)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = isDragging ? "scale(1.1)" : "scale(1)";
+        },
+        style: {
+          width: 64,
+          height: 64,
+          background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
+          boxShadow: [
+            `0 4px 24px 0 ${primaryColor}80`,
+            `0 8px 32px -4px rgba(0,0,0,0.3)`,
+            `inset 0 1px 0 0 rgba(255,255,255,0.2)`
+          ].join(", ")
+        },
         "aria-label": "Open chat",
-        children: /* @__PURE__ */ jsx7("span", { className: "text-2xl", children: "\u{1F4AC}" })
+        ...handlers,
+        children: [
+          /* @__PURE__ */ jsx10(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
+              style: {
+                backgroundColor: primaryColor,
+                opacity: 0.15,
+                animationDuration: "2.5s"
+              }
+            }
+          )
+        ]
       }
     ) });
   }
-  if (!userInfo || !userInfo.email || !userInfo.name) {
-    return /* @__PURE__ */ jsx7(
+  if (identityMode === "form" && (!userInfo || !userInfo.email || !userInfo.name)) {
+    return /* @__PURE__ */ jsx10(
       PreChatForm,
       {
         onSubmit: handlePreChatSubmit,
@@ -1621,54 +3421,83 @@ function Chat({
   const fullConfig = {
     ...config,
     conversationId,
-    currentUser: userInfo
+    currentUser: userInfo || void 0
+  };
+  const widgetAnimationStyle = showWidget && !isAnimating ? {
+    opacity: 1,
+    transform: "translateY(0) scale(1)",
+    transition: "opacity 0.25s ease-out, transform 0.25s ease-out"
+  } : {
+    opacity: 0,
+    transform: "translateY(12px) scale(0.97)",
+    transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx10(
     ChatWidget,
     {
       config: fullConfig,
       className,
       onClose: () => setState("closed"),
-      onMinimize: () => setState("minimized")
+      onMinimize: () => setState("minimized"),
+      resolvedPosition: position
     }
-  );
+  ) });
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function TypingIndicator({ isTyping, userName }) {
   if (!isTyping) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("div", { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx8("span", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
-      /* @__PURE__ */ jsx8(
-        "span",
-        {
-          className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
-          style: { animationDelay: "0.1s" }
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "span",
-        {
-          className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
-          style: { animationDelay: "0.2s" }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx8("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: userName ? `${userName} is typing...` : "Someone is typing..." })
-  ] }) });
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "px-4 py-2",
+      style: {
+        borderTop: "1px solid rgba(255,255,255,0.06)",
+        backgroundColor: "rgba(0,0,0,0.15)"
+      },
+      children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx11("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: "rounded-full animate-bounce",
+            style: {
+              width: 5,
+              height: 5,
+              backgroundColor: "rgba(51,126,255,0.6)",
+              animationDelay: `${i * 0.1}s`,
+              animationDuration: "0.8s"
+            }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            style: {
+              fontSize: "12px",
+              letterSpacing: "0.015em",
+              color: "rgba(247,247,248,0.45)"
+            },
+            children: userName ? `${userName} is typing...` : "Someone is typing..."
+          }
+        )
+      ] })
+    }
+  );
 }
 export {
   Chat,
   ChatHeader,
   ChatInput,
   ChatWidget,
+  MarkdownMessage,
   MessageItem,
   MessageList,
   PreChatForm,
+  ThinkingIndicator,
   TypingIndicator,
   fetchMessages,
   useChatWidgetState,