@banbox/chat 1.0.3 → 1.0.4

package/dist/index.js

@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import React10, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx18, { clsx } from 'clsx';
+import clsx16, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import _Lottie from 'lottie-react';
 
@@ -457,7 +457,7 @@ var ChatTranslateSettingsModal = ({
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         isSingle ? "fixed inset-0 z-9999 flex" : "absolute inset-0 z-50 flex items-center justify-center"
       ),
       onClick: () => onClose(),
@@ -470,7 +470,7 @@ var ChatTranslateSettingsModal = ({
             "aria-modal": "true",
             "aria-labelledby": "translate-settings-title",
             onClick: (e) => e.stopPropagation(),
-            className: clsx18(
+            className: clsx16(
               isSingle ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]" : "relative w-[500px] max-w-[95vw]",
               "z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
               className
@@ -553,7 +553,7 @@ var extColor = (ext) => {
 var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => /* @__PURE__ */ jsxs("div", { className: "mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]", children: [
   /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor(ext)) }),
+      /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor(ext)) }),
       " ",
       /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-normal text-black", children: name })
     ] }),
@@ -704,7 +704,7 @@ var ChatComposerBar = ({
               {
                 type: "button",
                 onClick: sendText,
-                className: clsx18(
+                className: clsx16(
                   "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]"
                 ),
                 title: hasAttachments ? "Send attachments" : "Send",
@@ -720,7 +720,7 @@ var ChatComposerBar = ({
                 type: "button",
                 onClick: sendAttachments,
                 disabled: !hasAttachments,
-                className: clsx18(
+                className: clsx16(
                   "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
                   hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
                 ),
@@ -745,7 +745,7 @@ var ChatComposerBar = ({
         children: /* @__PURE__ */ jsx(
           RecordMicIcon,
           {
-            className: clsx18(
+            className: clsx16(
               "h-6 w-6",
               seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
             )
@@ -1042,7 +1042,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
       ref: panelRef,
       role: "dialog",
       "aria-label": "Emoji picker",
-      className: clsx18("emoji-dropup", className),
+      className: clsx16("emoji-dropup", className),
       style: {
         zIndex: "9999",
         width: WIDTH2,
@@ -1186,7 +1186,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
     "div",
     {
       onClick: clickToJump,
-      className: clsx18(
+      className: clsx16(
         widthClamp,
         "relative rounded-md bg-[#f8f8f8] px-3",
         "border-l-2 border-[#FF5300]",
@@ -1505,7 +1505,7 @@ var ChatFooter = ({
     }
     setSeconds(0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("border-t border-[#ededed] bg-white p-3.5", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("border-t border-[#ededed] bg-white p-3.5", className), children: [
     replyTo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
     /* @__PURE__ */ jsx(
       AttachmentPreviewStrip_default,
@@ -1603,12 +1603,27 @@ var ChatFooter = ({
   ] });
 };
 var ChatFooter_default = ChatFooter;
-function ChatHeader({ left, right, below, className }) {
+function ChatHeader({ left, right, below }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: clsx18("border-b border-[#e1e1e1] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-4 pt-2.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-start gap-3", children: left }),
-      right
-    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderBottom: "1px solid #e1e1e1",
+          height: 64,
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 10
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: left }),
+          right
+        ]
+      }
+    ),
     below && /* @__PURE__ */ jsx(Fragment, { children: below })
   ] });
 }
@@ -1626,11 +1641,11 @@ var ChatIdentity = (props) => {
     size = 46,
     className
   } = props;
-  const subtitleClass = clsx18(
+  const subtitleClass = clsx16(
     "text-[10px] font-medium",
     subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]"
   );
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-start gap-3", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-start gap-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
       props.variant === "avatar" && /* @__PURE__ */ jsx(
         "img",
@@ -1643,7 +1658,7 @@ var ChatIdentity = (props) => {
       props.variant === "initial" && /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx18(
+          className: clsx16(
             "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
             props.textClassName
           ),
@@ -1718,7 +1733,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
         className
       ),
@@ -1751,7 +1766,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
   );
 };
 var ChatInquiryBar_default = ChatInquiryBar;
-var ChatListHeader = ({ className, onClose, onSearchChange }) => {
+var ChatListHeader = ({ onClose, onSearchChange }) => {
   const [searching, setSearching] = React10.useState(false);
   const [q, setQ] = React10.useState("");
   const inputRef = React10.useRef(null);
@@ -1764,9 +1779,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
     };
   }, [searching]);
   React10.useEffect(() => {
-    if (!searching) {
-      return;
-    }
+    if (!searching) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
         setSearching(false);
@@ -1785,91 +1798,117 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
     inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
     outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
   };
-  return /* @__PURE__ */ jsx("div", { className: clsx18("h-[64px] border-b border-[#ededed]", className), children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? (
-    // NORMAL (title) — appears from left when closing search
-    /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        className: "flex w-full items-center justify-between",
-        initial: { opacity: 0, x: -24 },
-        animate: "inFromLeft",
-        exit: "outToLeft",
-        variants,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "text-[#2c2c2c] flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(MessageIcon, { className: "w-6 h-6" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                title: "Search",
-                onClick: () => setSearching(true),
-                className: "h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                title: "Close",
-                onClick: onClose,
-                className: "h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-6 h-6" })
-              }
-            )
-          ] })
-        ]
+  const btnStyle = {
+    height: 36,
+    width: 36,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: 64,
+        borderBottom: "1px solid #ededed",
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: 20,
+        paddingRight: 20
       },
-      "normal"
-    )
-  ) : (
-    // SEARCH — enters from right, exits to right
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "flex w-full items-center gap-3",
-        initial: { opacity: 0, x: 24 },
-        animate: "inFromRight",
-        exit: "outToRight",
-        variants,
-        children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
-            /* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
-            /* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                value: q,
-                onChange: (e) => {
-                  setQ(e.target.value);
-                  onSearchChange?.(e.target.value);
-                },
-                placeholder: "Search",
-                className: "h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C]"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            "button",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          style: { display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between" },
+          initial: { opacity: 0, x: -24 },
+          animate: "inFromLeft",
+          exit: "outToLeft",
+          variants,
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, color: "#2c2c2c" }, children: [
+              /* @__PURE__ */ jsx(MessageIcon, { className: "w-6 h-6" }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 22, fontWeight: 600 }, children: "Messenger" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx("button", { title: "Search", onClick: () => setSearching(true), style: btnStyle, children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
+              /* @__PURE__ */ jsx("button", { title: "Close", onClick: onClose, style: btnStyle, children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-6 h-6" }) })
+            ] })
+          ]
+        },
+        "normal"
+      ) : /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          style: { display: "flex", width: "100%", alignItems: "center", gap: 12 },
+          initial: { opacity: 0, x: 24 },
+          animate: "inFromRight",
+          exit: "outToRight",
+          variants,
+          children: /* @__PURE__ */ jsxs(
+            "div",
             {
-              title: "Close search",
-              onClick: () => {
-                setSearching(false);
-                setQ("");
-                onSearchChange?.("");
+              style: {
+                display: "flex",
+                flex: 1,
+                height: 40,
+                alignItems: "center",
+                borderRadius: 9999,
+                border: "1px solid #6A6A6A",
+                backgroundColor: "#fff",
+                padding: "0 4px",
+                gap: 6
               },
-              className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5",
-              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: 12 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { marginRight: 8, color: "#929292", flexShrink: 0 }, children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
+                  /* @__PURE__ */ jsx("span", { style: { marginRight: 8, height: 24, width: 1, flexShrink: 0, backgroundColor: "#e1e1e1" } }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      value: q,
+                      onChange: (e) => {
+                        setQ(e.target.value);
+                        onSearchChange?.(e.target.value);
+                      },
+                      placeholder: "Search",
+                      style: {
+                        flex: 1,
+                        height: "100%",
+                        background: "transparent",
+                        fontSize: 15,
+                        outline: "none",
+                        border: "none",
+                        color: "#2c2c2c"
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    title: "Close search",
+                    onClick: () => {
+                      setSearching(false);
+                      setQ("");
+                      onSearchChange?.("");
+                    },
+                    style: { ...btnStyle, height: 32, width: 32 },
+                    children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
+                  }
+                )
+              ]
             }
-          ) })
-        ] }) })
-      },
-      "search"
-    )
-  ) }) }) });
+          )
+        },
+        "search"
+      ) })
+    }
+  );
 };
 var ChatListHeader_default = ChatListHeader;
 var Row = ({ icon, label, value, highlight }) => {
@@ -1927,7 +1966,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "w-[340px] rounded-md bg-[#f8f8f8] p-2",
         mine ? "ml-auto" : "mr-auto",
         className
@@ -2075,7 +2114,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
           type: "button",
           "aria-label": playing ? "Pause" : "Play",
           onClick: toggle,
-          className: clsx18(
+          className: clsx16(
             "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
             mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
           ),
@@ -2146,7 +2185,7 @@ var extColor2 = (ext) => {
 var FileChip = ({ file }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
   /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor2(file.ext)) }),
+      /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor2(file.ext)) }),
       " ",
       /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
     ] }),
@@ -2261,14 +2300,14 @@ var ChatBubbleText = ({ mine, text }) => {
   const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
   const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
   const textFormatting = "whitespace-pre-wrap break-words";
-  return /* @__PURE__ */ jsx("div", { className: clsx18(base, color, corner, textFormatting), children: text });
+  return /* @__PURE__ */ jsx("div", { className: clsx16(base, color, corner, textFormatting), children: text });
 };
 var ChatBubbleText_default = ChatBubbleText;
 var ChatBusinessCard = ({ mine, card }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
         "shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
         mine ? "ml-auto" : "mr-auto"
@@ -2328,13 +2367,13 @@ var MessageHoverActions = ({
   const showTranslate = !isItemButton || isItemButton.includes("translate");
   const hasAny = showReplay || showTranslate;
   const isActive = (k) => !!activeButtons?.includes(k);
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("relative inline-flex group/message", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("relative inline-flex group/message", className), children: [
     children,
     hasAny && /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": true,
-        className: clsx18(
+        className: clsx16(
           "absolute inset-y-0 w-2",
           mine ? "right-full" : "left-full",
           "pointer-events-auto"
@@ -2344,7 +2383,7 @@ var MessageHoverActions = ({
     hasAny && /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx18(
+        className: clsx16(
           "absolute bottom-0 pointer-events-auto transition-opacity",
           sidePos,
           railNudge,
@@ -2364,7 +2403,7 @@ var MessageHoverActions = ({
                   e.stopPropagation();
                   onReply?.();
                 },
-                className: clsx18(
+                className: clsx16(
                   "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                   isActive("replay") && "bg-[#636363] text-white"
                 ),
@@ -2385,7 +2424,7 @@ var MessageHoverActions = ({
                   e.stopPropagation();
                   onTranslate?.();
                 },
-                className: clsx18(
+                className: clsx16(
                   "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                   isActive("translate") && "!bg-[#636363] text-white"
                 ),
@@ -2441,7 +2480,7 @@ var ChatMessageItem = ({
     setTranslated((v) => !v);
     onTranslate?.();
   };
-  return /* @__PURE__ */ jsx("div", { className: clsx18("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-end gap-3", mine && "justify-end"), children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx16("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-end gap-3", mine && "justify-end"), children: [
     !mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
       /* @__PURE__ */ jsx(
         "img",
@@ -2463,19 +2502,19 @@ var ChatMessageItem = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full"), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full"), children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx18(
+          className: clsx16(
             " text-xs font-light text-[#636363]",
             mine ? "text-right" : "text-left"
           ),
           children: time
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
-        /* @__PURE__ */ jsx("div", { className: clsx18("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
+      /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
+        /* @__PURE__ */ jsx("div", { className: clsx16("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
         businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
         addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
         images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
@@ -2492,7 +2531,7 @@ var ChatMessageItem = ({
             children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
           }
         ) : null,
-        showStatus && /* @__PURE__ */ jsx("div", { className: clsx18("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
+        showStatus && /* @__PURE__ */ jsx("div", { className: clsx16("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
       ] })
     ] })
   ] }) });
@@ -2501,7 +2540,7 @@ var ChatMessageItem_default = ChatMessageItem;
 var ChatScroll = ({
   top,
   children,
-  className,
+  style,
   bottomAlignWhenShort = false,
   scrollKey
 }) => {
@@ -2523,17 +2562,26 @@ var ChatScroll = ({
     {
       ref,
       "data-chat-scroll": true,
-      className: clsx18(
-        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
-        className
-      ),
+      style: {
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        backgroundColor: "#fff",
+        padding: 16,
+        // custom scrollbar — hide track for clean look
+        scrollbarWidth: "thin",
+        scrollbarColor: "#d1d5db transparent",
+        ...style
+      },
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: clsx18(
-            "min-h-full flex flex-col",
-            bottomAlignWhenShort ? "justify-end" : "justify-start"
-          ),
+          style: {
+            minHeight: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: bottomAlignWhenShort ? "flex-end" : "flex-start"
+          },
           children: [
             top,
             children
@@ -2580,7 +2628,7 @@ var ChatThreadItem = ({
     "button",
     {
       onClick,
-      className: clsx18(
+      className: clsx16(
         "relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
         active && "bg-[#f8f8f8]",
         className
@@ -2633,39 +2681,64 @@ var ChatThreadItem_default = ChatThreadItem;
 var typingdotanimation2_default = { v: "5.12.1", fr: 25, ip: 0, op: 59, w: 400, h: 100, nm: "Composizione 1", ddd: 0, assets: [{ id: "comp_0", nm: "barra", fr: 25, layers: [{ ddd: 0, ind: 1, ty: 4, nm: "barra contorni", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 0, k: 0, ix: 10 }, p: { a: 1, k: [{ i: { x: 0.541, y: 1 }, o: { x: 0.158, y: 0 }, t: 0, s: [47, 189.5, 0], to: [48.333, 0, 0], ti: [-48.333, 0, 0] }, { t: 60, s: [337, 189.5, 0] }], ix: 2, l: 2 }, a: { a: 0, k: [57.25, 4.75, 0], ix: 1, l: 2 }, s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 } }, ao: 0, shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[2.485, 0], [0, 0], [0, 2.485], [-2.485, 0], [0, 0], [0, -2.485]], o: [[0, 0], [-2.485, 0], [0, -2.485], [0, 0], [2.485, 0], [0, 2.485]], v: [[52.5, 4.5], [-52.5, 4.5], [-57, 0], [-52.5, -4.5], [52.5, -4.5], [57, 0]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 1, k: [{ i: { x: [0.833], y: [1] }, o: { x: [0.167], y: [0] }, t: 0, s: [0.058823529631, 0.800000011921, 0.807843148708, 1] }, { i: { x: [0.833], y: [0.999] }, o: { x: [0.167], y: [1e-3] }, t: 23, s: [0, 0.419607847929, 0.470588237047, 1] }, { t: 49, s: [0.376470595598, 0.435294121504, 0.482352942228, 1] }], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Riempimento 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [57.25, 4.75], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Gruppo 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 250, st: 0, ct: 1, bm: 0 }] }], layers: [{ ddd: 0, ind: 1, ty: 0, nm: "barra", refId: "comp_0", sr: 0.89999997615814, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 0, k: 0, ix: 10 }, p: { a: 0, k: [201, 50, 0], ix: 2, l: 2 }, a: { a: 0, k: [190, 190, 0], ix: 1, l: 2 }, s: { a: 0, k: [120, 120, 100], ix: 6, l: 2 } }, ao: 0, hasMask: true, masksProperties: [{ inv: false, mode: "a", pt: { a: 0, k: { i: [[2.347, 0], [0, 0], [0, -2.347], [-2.347, 0], [0, 0], [0, 2.347]], o: [[0, 0], [-2.347, 0], [0, 2.347], [0, 0], [2.347, 0], [0, -2.347]], v: [[270.25, 185], [108.75, 185], [104.5, 189.25], [108.75, 193.5], [270.25, 193.5], [274.5, 189.25]], c: true }, ix: 1 }, o: { a: 0, k: 100, ix: 3 }, x: { a: 0, k: 0, ix: 4 }, nm: "Mask 1" }], w: 380, h: 380, ip: 0, op: 59, st: 0, bm: 0 }], markers: [], props: {} };
 var Lottie2 = _Lottie.default ?? _Lottie;
 var TypingIndicator = ({
-  size = 18,
   loop = true,
   autoplay = true,
-  className,
   ariaLabel = "Typing\u2026",
-  avatarSize = 40
+  avatarSize = 40,
+  style
 }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative flex items-end gap-[6px]", className),
       role: "status",
       "aria-label": ariaLabel,
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 6,
+        ...style
+      },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative shrink-0 rounded-full border border-[#F1F1F1]",
-            style: { width: avatarSize, height: avatarSize },
+            style: {
+              position: "relative",
+              flexShrink: 0,
+              borderRadius: "50%",
+              border: "1px solid #F1F1F1",
+              width: avatarSize,
+              height: avatarSize
+            },
             children: [
               /* @__PURE__ */ jsx(
                 "img",
                 {
                   src: "/chat/img/girl_support.png",
                   alt: "avatar image",
-                  className: "h-full w-full rounded-full object-cover"
+                  style: { height: "100%", width: "100%", borderRadius: "50%", objectFit: "cover" }
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "absolute bottom-[0px] right-[0px] h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    height: 11.25,
+                    width: 11.25,
+                    borderRadius: "50%",
+                    backgroundColor: "#328545",
+                    outline: "2px solid #fff"
+                  }
+                }
+              )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "absolute bottom-[-13px] left-[30px]", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { style: { position: "absolute", bottom: -13, left: 30 }, children: /* @__PURE__ */ jsx(
           Lottie2,
           {
             animationData: typingdotanimation2_default,
@@ -2879,6 +2952,7 @@ var avatarBgByInitial = {
   B: "#F0EDEB",
   b: "#F0EDEB"
 };
+var GRADIENT_BORDER = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
 var InboxPopup = ({ adapter, uiCallbacks }) => {
   const { close, selectThread, selectedThreadId, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
@@ -2924,16 +2998,12 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
   const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
   const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
   const [showDelete, setShowDelete] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const scrollKey = `${activeId}-${messages.length}-${rev}`;
-  const prevActiveIdRef = React10.useRef(activeId);
+  const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
     if (prevActiveIdRef.current !== activeId) {
       prevActiveIdRef.current = activeId;
-      setIsLoading(true);
-      const t = setTimeout(() => setIsLoading(false), 300);
       if (activeId) adapter.threads.markRead?.(activeId);
-      return () => clearTimeout(t);
     }
   }, [activeId, adapter]);
   const toRef2 = (m) => ({
@@ -2961,13 +3031,18 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
       message: "The chat has been deleted successfully."
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
+  const filteredThreads = threads.filter((t) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
+  });
+  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
         "aria-label": "Close chat",
         onClick: close,
-        className: "fixed inset-0",
+        style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -2979,12 +3054,14 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
       {
         role: "dialog",
         "aria-modal": "true",
-        className: "relative rounded-[20px] p-[3px]",
         style: {
+          position: "relative",
           width: 800,
           height: 650,
+          borderRadius: 20,
+          padding: 3,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background: "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)"
+          background: GRADIENT_BORDER
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -2993,119 +3070,192 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative h-full w-full overflow-hidden rounded-[18px] bg-white",
-            style: { overscrollBehavior: "contain" },
+            style: {
+              position: "relative",
+              height: "100%",
+              width: "100%",
+              overflow: "hidden",
+              borderRadius: 18,
+              backgroundColor: "#fff",
+              overscrollBehavior: "contain"
+            },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" }),
-              /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
-                    ChatHeader,
-                    {
-                      left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "avatar", src: activeThread.avatarSrc, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }) : /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "initial", initial, bg: avatarBg, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }),
-                      right: uiCallbacks?.renderKebabMenu?.({
-                        pinned: Boolean(activeThread?.pinned),
-                        onPinToggle: () => {
-                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                        },
-                        onDelete: () => setShowDelete(true)
-                      }) ?? null
-                    }
-                  ) }),
-                  idValue && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-                    ChatInquiryBar_default,
-                    {
-                      id: idValue,
-                      label: idLabel,
-                      buttonLabel: idButtonLabel,
-                      onView: () => {
-                        const type = activeThread?.orderId ? "order" : "inquiry";
-                        uiCallbacks?.onNavigate?.({ type, id: idValue });
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-0", children: [
-                    /* @__PURE__ */ jsx(
-                      ChatScroll_default,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "1fr 310px",
+                    height: "100%",
+                    minHeight: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
                       {
-                        className: "h-full pb-10",
-                        bottomAlignWhenShort: false,
-                        scrollKey,
-                        children: messages.map((m, idx) => {
-                          const mine = m.author === "you";
-                          const isLast = idx === messages.length - 1;
-                          return /* @__PURE__ */ jsx(
-                            ChatMessageItem_default,
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          height: "100%",
+                          minHeight: 0,
+                          borderRight: "1px solid #9BBCCF"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                            ChatHeader,
+                            {
+                              left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(
+                                ChatIdentity_default,
+                                {
+                                  variant: "avatar",
+                                  src: activeThread.avatarSrc,
+                                  online,
+                                  title,
+                                  subtitle,
+                                  verified: isVerified,
+                                  subtitleVariant: "muted"
+                                }
+                              ) : /* @__PURE__ */ jsx(
+                                ChatIdentity_default,
+                                {
+                                  variant: "initial",
+                                  initial,
+                                  bg: avatarBg,
+                                  online,
+                                  title,
+                                  subtitle,
+                                  verified: isVerified,
+                                  subtitleVariant: "muted"
+                                }
+                              ),
+                              right: uiCallbacks?.renderKebabMenu?.({
+                                pinned: Boolean(activeThread?.pinned),
+                                onPinToggle: () => {
+                                  if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                                },
+                                onDelete: () => setShowDelete(true)
+                              }) ?? null
+                            }
+                          ) }),
+                          idValue && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                            ChatInquiryBar_default,
                             {
-                              id: m.id,
-                              mine,
-                              time: m.time ?? "",
-                              authorInitial: typeof m.author === "string" ? m.author : "U",
-                              avatarBg,
-                              text: m.text ?? m.content,
-                              businessCard: m.businessCard,
-                              addressCard: m.addressCard,
-                              images: m.images,
-                              files: m.files,
-                              audio: m.audio,
-                              replyTo: m.replyTo,
-                              showStatus: isLast,
-                              status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
-                              onReply: () => setReplyTo(toRef2(m)),
-                              initialSrc: m.avatarSrc
+                              id: idValue,
+                              label: idLabel,
+                              buttonLabel: idButtonLabel,
+                              onView: () => {
+                                const type = activeThread?.orderId ? "order" : "inquiry";
+                                uiCallbacks?.onNavigate?.({ type, id: idValue });
+                              }
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: [
+                            /* @__PURE__ */ jsx(
+                              ChatScroll_default,
+                              {
+                                className: "h-full pb-10",
+                                bottomAlignWhenShort: false,
+                                scrollKey,
+                                style: { height: "100%", overflowY: "auto" },
+                                children: messages.map((m, idx) => {
+                                  const mine = m.author === "you";
+                                  const isLast = idx === messages.length - 1;
+                                  return /* @__PURE__ */ jsx(
+                                    ChatMessageItem_default,
+                                    {
+                                      id: m.id,
+                                      mine,
+                                      time: m.time ?? "",
+                                      authorInitial: typeof m.author === "string" ? m.author : "U",
+                                      avatarBg,
+                                      text: m.text ?? m.content,
+                                      businessCard: m.businessCard,
+                                      addressCard: m.addressCard,
+                                      images: m.images,
+                                      files: m.files,
+                                      audio: m.audio,
+                                      replyTo: m.replyTo,
+                                      showStatus: isLast,
+                                      status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
+                                      onReply: () => setReplyTo(toRef2(m)),
+                                      initialSrc: m.avatarSrc
+                                    },
+                                    m.id
+                                  );
+                                })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  position: "absolute",
+                                  left: 0,
+                                  right: 0,
+                                  bottom: 0,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "flex-start",
+                                  padding: "4px 16px 8px",
+                                  background: "#fff",
+                                  pointerEvents: "none"
+                                },
+                                children: /* @__PURE__ */ jsx(TypingIndicator_default, { style: { pointerEvents: "auto" } })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                            ChatFooter_default,
+                            {
+                              replyTo,
+                              clearReply: () => setReplyTo(void 0),
+                              onAfterSend: () => setRev((v) => v + 1),
+                              onSend: (payload) => {
+                                if (activeId) adapter.messages.send(activeId, payload);
+                              }
                             },
-                            m.id
-                          );
-                        })
+                            activeId
+                          ) })
+                        ]
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-start px-4 pb-2 pt-1 bg-white", children: /* @__PURE__ */ jsx(TypingIndicator_default, { className: "pointer-events-auto" }) })
-                  ] }) }),
-                  /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-                    ChatFooter_default,
-                    {
-                      replyTo,
-                      clearReply: () => setReplyTo(void 0),
-                      onAfterSend: () => setRev((v) => v + 1),
-                      onSend: (payload) => {
-                        if (activeId) adapter.messages.send(activeId, payload);
-                      }
-                    },
-                    activeId
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0", children: [
-                  /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
-                  /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto custom-scroll", children: threads.filter((t) => {
-                    if (!searchQuery.trim()) return true;
-                    const q = searchQuery.toLowerCase();
-                    return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
-                  }).map((t) => {
-                    const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
-                    return /* @__PURE__ */ jsx(
-                      ChatThreadItem_default,
-                      {
-                        onClick: () => {
-                          setReplyTo(void 0);
-                          selectThread(t.id);
-                        },
-                        active: t.id === activeId,
-                        pinned: Boolean(t.pinned),
-                        online: t.online,
-                        verified: Boolean(t.badge),
-                        title: t.title,
-                        preview: t.last ?? "",
-                        time: t.time ?? "",
-                        status,
-                        avatarText: t.avatarText ?? "",
-                        avatarSrc: t.avatarSrc
-                      },
-                      t.id
-                    );
-                  }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(ChatConfirmModal, { open: showDelete, onClose: () => setShowDelete(false), onConfirm: handleConfirmDelete }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+                      /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
+                      /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: filteredThreads.map((t) => {
+                        const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
+                        return /* @__PURE__ */ jsx(
+                          ChatThreadItem_default,
+                          {
+                            onClick: () => {
+                              setReplyTo(void 0);
+                              selectThread(t.id);
+                            },
+                            active: t.id === activeId,
+                            pinned: Boolean(t.pinned),
+                            online: t.online,
+                            verified: Boolean(t.badge),
+                            title: t.title,
+                            preview: t.last ?? "",
+                            time: t.time ?? "",
+                            status,
+                            avatarText: t.avatarText ?? "",
+                            avatarSrc: t.avatarSrc
+                          },
+                          t.id
+                        );
+                      }) })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChatConfirmModal,
+                {
+                  open: showDelete,
+                  onClose: () => setShowDelete(false),
+                  onConfirm: handleConfirmDelete
+                }
+              ),
               /* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
             ]
           }
@@ -3115,6 +3265,7 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
   ] });
 };
 var InboxPopup_default = InboxPopup;
+var GRADIENT_BORDER2 = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
 function coalesceThreadId(reference, threads) {
   const referenceId = reference?.id;
   if (reference?.kind === "quotation") {
@@ -3167,14 +3318,13 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
     setScrollKey(Date.now());
     setReplyTo(void 0);
   }, [activeId, adapter]);
-  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
-  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
+  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
         "aria-label": "Close chat",
         onClick: close,
-        className: "fixed inset-0 cursor-auto!",
+        style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -3186,10 +3336,14 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
       {
         role: "dialog",
         "aria-modal": "true",
-        className: "relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
         style: {
+          position: "relative",
+          height: 650,
+          width: 450,
+          borderRadius: 20,
+          padding: 2,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background: "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)"
+          background: GRADIENT_BORDER2
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -3198,10 +3352,18 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white",
-            style: { overscrollBehavior: "contain" },
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+              width: "100%",
+              overflow: "hidden",
+              borderRadius: 18,
+              backgroundColor: "#fff",
+              overscrollBehavior: "contain"
+            },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
                 ChatHeader,
                 {
                   left: /* @__PURE__ */ jsx(
@@ -3221,41 +3383,61 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
                     {
                       type: "button",
                       onClick: close,
-                      className: "flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[#ff5301] cursor-pointer",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: 34,
+                        width: 34,
+                        borderRadius: "50%",
+                        backgroundColor: "#fff",
+                        color: "#000",
+                        border: "none",
+                        boxShadow: "0px 2px 4px 0px #A5A3AE4D",
+                        cursor: "pointer"
+                      },
                       children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
                     }
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(ChatScroll_default, { className: "h-full", bottomAlignWhenShort: false, scrollKey, children: [
-                messages.map((m, idx) => {
-                  const mine = m.author === "you";
-                  const isLast = idx === messages.length - 1;
-                  return /* @__PURE__ */ jsx(
-                    ChatMessageItem_default,
-                    {
-                      id: m.id,
-                      mine,
-                      time: m.time ?? "",
-                      authorInitial: typeof m.author === "string" ? m.author : "U",
-                      text: m.text ?? m.content,
-                      businessCard: m.businessCard,
-                      addressCard: m.addressCard,
-                      images: m.images,
-                      files: m.files,
-                      audio: m.audio,
-                      replyTo: m.replyTo,
-                      initialSrc: m.avatarSrc,
-                      showStatus: isLast,
-                      status: statusText,
-                      onReply: () => setReplyTo(toRef(m))
-                    },
-                    m.id
-                  );
-                }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsxs(
+                ChatScroll_default,
+                {
+                  bottomAlignWhenShort: false,
+                  scrollKey,
+                  style: { height: "100%", overflowY: "auto" },
+                  children: [
+                    messages.map((m, idx) => {
+                      const mine = m.author === "you";
+                      const isLast = idx === messages.length - 1;
+                      return /* @__PURE__ */ jsx(
+                        ChatMessageItem_default,
+                        {
+                          id: m.id,
+                          mine,
+                          time: m.time ?? "",
+                          authorInitial: typeof m.author === "string" ? m.author : "U",
+                          text: m.text ?? m.content,
+                          businessCard: m.businessCard,
+                          addressCard: m.addressCard,
+                          images: m.images,
+                          files: m.files,
+                          audio: m.audio,
+                          replyTo: m.replyTo,
+                          initialSrc: m.avatarSrc,
+                          showStatus: isLast,
+                          status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
+                          onReply: () => setReplyTo(toRef(m))
+                        },
+                        m.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
                 ChatFooter_default,
                 {
                   variant: "single",