@natoe/colab 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useMemo } from 'react';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useId, useMemo } from 'react';
 import { Socket, Presence } from 'phoenix';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -828,6 +828,7 @@ function useConversation({
         body,
         type: "text",
         insertedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "sending",
         ...replyTo ? {
           replyToId: replyTo.id,
           replyToSnapshot: {
@@ -843,7 +844,9 @@ function useConversation({
       try {
         await socket.sendMessage(conv.id, payload);
       } catch (err) {
-        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        setMessages(
+          (prev) => prev.map((m) => m.id === optimistic.id ? { ...m, status: "failed" } : m)
+        );
         config.onError?.({
           code: "SEND_FAILED",
           message: "Failed to send message",
@@ -853,6 +856,34 @@ function useConversation({
     },
     [ensureConversation, socket, replyTo, config]
   );
+  const retryMessage = useCallback(
+    async (messageId) => {
+      if (!conversation) return;
+      const target = messages.find((m) => m.id === messageId);
+      if (!target || target.status !== "failed" || target.type !== "text") return;
+      setMessages(
+        (prev) => prev.map((m) => m.id === messageId ? { ...m, status: "sending" } : m)
+      );
+      const payload = {
+        body: target.body,
+        type: "text",
+        ...target.replyToId ? { replyToId: target.replyToId } : {}
+      };
+      try {
+        await socket.sendMessage(conversation.id, payload);
+      } catch (err) {
+        setMessages(
+          (prev) => prev.map((m) => m.id === messageId ? { ...m, status: "failed" } : m)
+        );
+        config.onError?.({
+          code: "SEND_FAILED",
+          message: "Failed to send message",
+          details: err
+        });
+      }
+    },
+    [conversation, messages, socket, config]
+  );
   const sendAudioMessage = useCallback(
     async (audioBlob, duration) => {
       if (!config.onUploadFile) return;
@@ -945,6 +976,7 @@ function useConversation({
           message: "Failed to pin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, pinMessageApi, config]
@@ -960,6 +992,7 @@ function useConversation({
           message: "Failed to unpin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, unpinMessageApi, config]
@@ -977,6 +1010,7 @@ function useConversation({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendDeepLink,
@@ -1339,91 +1373,247 @@ var styles3 = {
     textDecoration: "underline"
   }
 };
+function ReplyIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" })
+    }
+  );
+}
+function PinIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
+    }
+  );
+}
+function CopyIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" })
+    }
+  );
+}
+function MoreIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2" })
+      ]
+    }
+  );
+}
 function MessageActionsMenu({
   message,
   onReply,
   onPin,
   onUnpin,
   onCopy,
-  visible,
   pinDisabled = false,
+  anchorRight = false,
   className
 }) {
-  if (!visible) return null;
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
   const isPinned = !!message.isPinned;
   const canCopy = message.type === "text" && !!message.body;
-  const handleCopy = () => {
-    if (!onCopy) return;
-    onCopy(message.body);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (!wrapperRef.current?.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen]);
+  const run = (fn) => {
+    setIsOpen(false);
+    fn();
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: styles4.container, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className, style: styles4.wrapper, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => onReply(message),
-        style: styles4.button,
-        title: "Reply",
+        ref: triggerRef,
         type: "button",
-        children: "\u21A9"
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen((v) => !v);
+        },
+        "aria-label": "Message actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen ? "true" : "false",
+        title: "Message actions",
+        style: styles4.trigger,
+        children: /* @__PURE__ */ jsx(MoreIcon, { size: 18, color: "#4b5563" })
       }
     ),
-    isPinned ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onUnpin(message.id),
-        style: styles4.button,
-        title: "Unpin",
-        type: "button",
-        children: "\u{1F4CC}"
-      }
-    ) : /* @__PURE__ */ jsx(
-      "button",
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
       {
-        onClick: () => onPin(message.id),
+        role: "menu",
+        "aria-label": "Message actions",
         style: {
-          ...styles4.button,
-          opacity: pinDisabled ? 0.4 : 1,
-          cursor: pinDisabled ? "not-allowed" : "pointer"
+          ...styles4.menu,
+          ...anchorRight ? styles4.menuRight : styles4.menuLeft
         },
-        disabled: pinDisabled,
-        title: pinDisabled ? "Pin limit reached (max 3)" : "Pin",
-        type: "button",
-        children: "\u{1F4CC}"
-      }
-    ),
-    canCopy && onCopy && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleCopy,
-        style: styles4.button,
-        title: "Copy text",
-        type: "button",
-        children: "\u2398"
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onReply(message)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(ReplyIcon, { size: 18, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Reply" })
+              ]
+            }
+          ),
+          isPinned ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onUnpin(message.id)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(PinIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Unpin" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onPin(message.id)),
+              disabled: pinDisabled,
+              style: {
+                ...styles4.item,
+                ...pinDisabled ? styles4.itemDisabled : {}
+              },
+              title: pinDisabled ? "Pin limit reached (max 3)" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(PinIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: pinDisabled ? "Pin (limit reached)" : "Pin" })
+              ]
+            }
+          ),
+          canCopy && onCopy && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onCopy(message.body)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(CopyIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Copy text" })
+              ]
+            }
+          )
+        ]
       }
     )
   ] });
 }
 var styles4 = {
-  container: {
+  wrapper: {
+    position: "relative",
+    display: "inline-block"
+  },
+  trigger: {
+    width: "36px",
+    height: "36px",
     display: "flex",
-    gap: "2px",
-    padding: "2px",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    color: "#4b5563"
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    marginTop: "4px",
+    minWidth: "160px",
     backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
-    borderRadius: "20px",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
+    borderRadius: "10px",
+    boxShadow: "0 6px 18px rgba(0, 0, 0, 0.12)",
+    padding: "4px",
+    zIndex: 20
   },
-  button: {
-    width: "24px",
-    height: "24px",
+  menuLeft: {
+    left: 0
+  },
+  menuRight: {
+    right: 0
+  },
+  item: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    fontSize: "12px",
+    gap: "10px",
+    width: "100%",
+    minHeight: "40px",
+    padding: "8px 12px",
+    fontSize: "14px",
+    color: "#111827",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "50%",
-    cursor: "pointer"
+    borderRadius: "6px",
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  itemDisabled: {
+    color: "#9ca3af",
+    cursor: "not-allowed"
   }
 };
 function FileIcon({ size = 18, color = "currentColor" }) {
@@ -1440,7 +1630,7 @@ function FileIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function PinIcon({ size = 14, color = "currentColor" }) {
+function AlertIcon({ size = 14, color = "currentColor" }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -1450,10 +1640,38 @@ function PinIcon({ size = 14, color = "currentColor" }) {
       viewBox: "0 0 24 24",
       fill: color,
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
+      children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
     }
   );
 }
+function Spinner({ size = 16, color = "#6b7280", thickness = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      style: {
+        display: "inline-block",
+        width: size,
+        height: size,
+        border: `${thickness}px solid ${color}33`,
+        borderTopColor: color,
+        borderRadius: "50%",
+        animation: "natoe-colab-spin 800ms linear infinite",
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+if (typeof document !== "undefined") {
+  const existing = document.getElementById("natoe-colab-spin-keyframes");
+  if (!existing) {
+    const style = document.createElement("style");
+    style.id = "natoe-colab-spin-keyframes";
+    style.textContent = `@keyframes natoe-colab-spin { to { transform: rotate(360deg); } }`;
+    document.head.appendChild(style);
+  }
+}
 var ROLE_LABELS = {
   radiologist: "Radiologist",
   lab: "Imaging Center",
@@ -1472,15 +1690,30 @@ function MessageBubble({
   onUnpin,
   onCopy,
   onReplyJumpTo,
+  onRetry,
   pinDisabled = false,
   className
 }) {
-  const [isHovered, setIsHovered] = useState(false);
   if (message.type === "system") {
     return /* @__PURE__ */ jsx(SystemBubble, { message });
   }
   const hasActions = !!(onReply || onPin || onUnpin || onCopy);
-  return /* @__PURE__ */ jsx(
+  const actionsSlot = hasActions ? /* @__PURE__ */ jsx("div", { style: styles5.actionsSlot, children: /* @__PURE__ */ jsx(
+    MessageActionsMenu,
+    {
+      message,
+      onReply: onReply ?? (() => {
+      }),
+      onPin: onPin ?? (() => {
+      }),
+      onUnpin: onUnpin ?? (() => {
+      }),
+      onCopy,
+      pinDisabled,
+      anchorRight: !isOwn
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className,
@@ -1488,10 +1721,9 @@ function MessageBubble({
         ...styles5.wrapper,
         justifyContent: isOwn ? "flex-end" : "flex-start"
       },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ jsxs("div", { style: styles5.bubbleWrapper, children: [
-        /* @__PURE__ */ jsxs(
+      children: [
+        isOwn && actionsSlot,
+        /* @__PURE__ */ jsx("div", { style: styles5.bubbleWrapper, children: /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -1521,7 +1753,25 @@ function MessageBubble({
               message.type === "file" && /* @__PURE__ */ jsx(FileContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
               message.type === "deep_link" && /* @__PURE__ */ jsx(DeepLinkContent, { body: message.body, metadata: message.metadata, onDeepLinkClick }),
               /* @__PURE__ */ jsx("div", { style: styles5.timestamp, children: formatTime(message.insertedAt) }),
-              showSeenBy && isOwn && /* @__PURE__ */ jsx(
+              isOwn && message.status === "sending" && /* @__PURE__ */ jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsx(Spinner, { size: 12, color: "rgba(255,255,255,0.85)" }),
+                /* @__PURE__ */ jsx("span", { style: styles5.statusText, children: "Sending\u2026" })
+              ] }),
+              isOwn && message.status === "failed" && /* @__PURE__ */ jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsx(AlertIcon, { size: 12, color: "#fecaca" }),
+                /* @__PURE__ */ jsx("span", { style: styles5.statusText, children: "Not sent" }),
+                onRetry && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRetry(message.id),
+                    style: styles5.retryButton,
+                    "aria-label": "Retry sending message",
+                    children: "Retry"
+                  }
+                )
+              ] }),
+              showSeenBy && isOwn && !message.status && /* @__PURE__ */ jsx(
                 SeenByIndicator,
                 {
                   readBy: message.readBy ?? [],
@@ -1532,33 +1782,9 @@ function MessageBubble({
               )
             ]
           }
-        ),
-        hasActions && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              ...styles5.actionsWrapper,
-              [isOwn ? "right" : "left"]: "100%",
-              [isOwn ? "marginRight" : "marginLeft"]: "6px"
-            },
-            children: /* @__PURE__ */ jsx(
-              MessageActionsMenu,
-              {
-                message,
-                onReply: onReply ?? (() => {
-                }),
-                onPin: onPin ?? (() => {
-                }),
-                onUnpin: onUnpin ?? (() => {
-                }),
-                onCopy,
-                visible: isHovered,
-                pinDisabled
-              }
-            )
-          }
-        )
-      ] })
+        ) }),
+        !isOwn && actionsSlot
+      ]
     }
   );
 }
@@ -1655,6 +1881,8 @@ function escapeRegex2(string) {
 var styles5 = {
   wrapper: {
     display: "flex",
+    alignItems: "flex-end",
+    gap: "4px",
     marginBottom: "8px",
     paddingLeft: "16px",
     paddingRight: "16px"
@@ -1663,6 +1891,10 @@ var styles5 = {
     position: "relative",
     maxWidth: "75%"
   },
+  actionsSlot: {
+    flexShrink: 0,
+    alignSelf: "flex-end"
+  },
   bubble: {
     padding: "10px 14px",
     borderRadius: "12px",
@@ -1716,11 +1948,27 @@ var styles5 = {
     marginTop: "4px",
     textAlign: "right"
   },
-  actionsWrapper: {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 10
+  statusRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginTop: "4px",
+    fontSize: "12px",
+    justifyContent: "flex-end",
+    color: "rgba(255, 255, 255, 0.9)"
+  },
+  statusText: {
+    opacity: 0.9
+  },
+  retryButton: {
+    background: "transparent",
+    border: "none",
+    color: "#ffffff",
+    fontWeight: 600,
+    fontSize: "12px",
+    textDecoration: "underline",
+    cursor: "pointer",
+    padding: "0 2px"
   },
   audioContainer: {
     display: "flex",
@@ -1794,6 +2042,44 @@ var styles5 = {
     color: "#9ca3af"
   }
 };
+function ChatIllustration({ size = 96 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 120 120",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "60", cy: "60", r: "56", fill: "#eff6ff" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M28 44a10 10 0 0 1 10-10h28a10 10 0 0 1 10 10v18a10 10 0 0 1-10 10H46l-10 8v-8h2a10 10 0 0 1-10-10V44Z",
+            fill: "#ffffff",
+            stroke: "#2563eb",
+            strokeWidth: "2.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M52 60a8 8 0 0 1 8-8h26a8 8 0 0 1 8 8v14a8 8 0 0 1-8 8H72l8 8v-8h6a8 8 0 0 0 0-30Z",
+            fill: "#dbeafe",
+            stroke: "#2563eb",
+            strokeWidth: "2.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "48", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "58", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "68", cy: "68", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsx("circle", { cx: "78", cy: "68", r: "2.5", fill: "#2563eb" })
+      ]
+    }
+  );
+}
 
 // src/core/dateLabels.ts
 var SHORT_MONTHS = [
@@ -1885,6 +2171,7 @@ var MessageList = forwardRef(function MessageList2({
   onPin,
   onUnpin,
   onCopy,
+  onRetry,
   pinDisabled,
   className
 }, ref) {
@@ -1949,12 +2236,17 @@ var MessageList = forwardRef(function MessageList2({
       style: styles6.container,
       onScroll: handleScroll,
       children: [
-        isLoading && /* @__PURE__ */ jsx("div", { style: styles6.loadingMore, children: "Loading earlier messages..." }),
+        isLoading && messages.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.loadingMore, children: [
+          /* @__PURE__ */ jsx(Spinner, { size: 14 }),
+          /* @__PURE__ */ jsx("span", { children: "Loading earlier messages\u2026" })
+        ] }),
         hasMore && !isLoading && messages.length > 0 && /* @__PURE__ */ jsx("button", { onClick: onLoadMore, style: styles6.loadMoreButton, type: "button", children: "Load earlier messages" }),
         messages.length === 0 && !isLoading && /* @__PURE__ */ jsxs("div", { style: styles6.empty, children: [
+          /* @__PURE__ */ jsx(ChatIllustration, { size: 104 }),
           /* @__PURE__ */ jsx("p", { style: styles6.emptyTitle, children: "No messages yet" }),
-          /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
+          /* @__PURE__ */ jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation \u2014 everyone on this case will see what you write." })
         ] }),
+        messages.length === 0 && isLoading && /* @__PURE__ */ jsx("div", { style: styles6.firstLoad, children: /* @__PURE__ */ jsx(Spinner, { size: 20 }) }),
         messages.map((message, index) => {
           const currentBucket = dayBucketKey(message.insertedAt);
           const prevBucket = index === 0 ? null : dayBucketKey(messages[index - 1].insertedAt);
@@ -1974,6 +2266,7 @@ var MessageList = forwardRef(function MessageList2({
                 onPin,
                 onUnpin,
                 onCopy,
+                onRetry,
                 pinDisabled
               }
             ) })
@@ -2002,11 +2295,20 @@ var styles6 = {
     paddingBottom: "8px"
   },
   loadingMore: {
-    textAlign: "center",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
     padding: "12px",
     fontSize: "14px",
     color: "#6b7280"
   },
+  firstLoad: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 16px"
+  },
   loadMoreButton: {
     display: "block",
     margin: "0 auto 12px",
@@ -2031,11 +2333,14 @@ var styles6 = {
     fontSize: "16px",
     fontWeight: 600,
     color: "#374151",
-    margin: "0 0 4px"
+    margin: "14px 0 4px"
   },
   emptySubtitle: {
     fontSize: "14px",
-    margin: 0
+    margin: 0,
+    maxWidth: "280px",
+    lineHeight: 1.45,
+    textAlign: "center"
   },
   typingIndicator: {
     padding: "4px 16px 8px",
@@ -2314,7 +2619,18 @@ function MessageInput({
           type: "file",
           onChange: handleFileSelect,
           style: { display: "none" },
-          accept: [...SUPPORTED_IMAGE_TYPES, "application/pdf", ".doc", ".docx"].join(",")
+          accept: [
+            ...SUPPORTED_IMAGE_TYPES,
+            "application/pdf",
+            ".doc",
+            ".docx",
+            ".xls",
+            ".xlsx",
+            ".csv",
+            ".txt",
+            ".heic",
+            ".heif"
+          ].join(",")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3039,6 +3355,64 @@ var styles11 = {
     flexShrink: 0
   }
 };
+function Toast({ toast, onDismiss, durationMs = 4e3 }) {
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(onDismiss, durationMs);
+    return () => clearTimeout(timer);
+  }, [toast, onDismiss, durationMs]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsxs("div", { style: styles12.container, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("span", { style: styles12.message, children: toast.message }),
+    toast.actionLabel && toast.onAction && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          toast.onAction?.();
+          onDismiss();
+        },
+        style: styles12.action,
+        children: toast.actionLabel
+      }
+    )
+  ] });
+}
+var styles12 = {
+  container: {
+    position: "absolute",
+    bottom: "76px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "10px 14px",
+    backgroundColor: "#1e293b",
+    color: "#ffffff",
+    borderRadius: "8px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.18)",
+    fontSize: "14px",
+    maxWidth: "90%",
+    zIndex: 20
+  },
+  message: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  action: {
+    background: "transparent",
+    border: "none",
+    color: "#93c5fd",
+    fontWeight: 600,
+    fontSize: "14px",
+    cursor: "pointer",
+    padding: "4px 6px",
+    textTransform: "uppercase",
+    letterSpacing: "0.4px"
+  }
+};
 function CollabPanel({
   orderId,
   patientData,
@@ -3049,6 +3423,7 @@ function CollabPanel({
 }) {
   const { config } = useCollab();
   const [showSettings, setShowSettings] = useState(false);
+  const [toast, setToast] = useState(null);
   const messageListRef = useRef(null);
   const {
     conversation,
@@ -3062,6 +3437,7 @@ function CollabPanel({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendTyping,
@@ -3086,10 +3462,33 @@ function CollabPanel({
     try {
       if (navigator.clipboard) {
         await navigator.clipboard.writeText(text);
+        setToast({ message: "Copied to clipboard" });
       }
     } catch {
     }
   };
+  const handlePin = async (messageId) => {
+    try {
+      await pinMessage(messageId);
+      setToast({
+        message: "Pinned",
+        actionLabel: "Undo",
+        onAction: () => {
+          void unpinMessage(messageId);
+        }
+      });
+    } catch {
+      setToast({ message: "Could not pin message" });
+    }
+  };
+  const handleUnpin = async (messageId) => {
+    try {
+      await unpinMessage(messageId);
+      setToast({ message: "Unpinned" });
+    } catch {
+      setToast({ message: "Could not unpin message" });
+    }
+  };
   const pinDisabled = pinnedMessages.length >= MAX_PINNED_MESSAGES;
   if (error) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles.errorState, children: [
@@ -3100,78 +3499,83 @@ function CollabPanel({
   if (isLoading && !conversation) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
-  return /* @__PURE__ */ jsx("div", { className, style: { ...panelStyles.container, ...style }, children: showSettings && conversation ? /* @__PURE__ */ jsx(
-    ChannelSettings,
-    {
-      conversationId: conversation.id,
-      channelName: conversation.name,
-      channelPicture: conversation.picture,
-      participants,
-      currentUserId: config.userId,
-      isAdmin: channelSettings.isAdmin,
-      isUpdating: channelSettings.isUpdating,
-      error: channelSettings.error,
-      onUpdateChannel: channelSettings.updateChannel,
-      onInviteUser: channelSettings.inviteUser,
-      onRemoveUser: channelSettings.removeUser,
-      onLeaveChannel: channelSettings.leaveChannel,
-      onDeleteChannel: channelSettings.deleteChannel,
-      onClose: () => setShowSettings(false)
-    }
-  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      PatientHeader,
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
+    showSettings && conversation ? /* @__PURE__ */ jsx(
+      ChannelSettings,
       {
-        patientData,
+        conversationId: conversation.id,
+        channelName: conversation.name,
+        channelPicture: conversation.picture,
         participants,
-        onOpenDicom: handleOpenDicom,
-        onOpenSettings: () => setShowSettings(true)
-      }
-    ),
-    pinnedMessages.length > 0 && /* @__PURE__ */ jsx(
-      PinnedMessagesBar,
-      {
-        pinnedMessages,
-        onJumpTo: handleJumpToMessage,
-        onUnpin: unpinMessage
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      MessageList,
-      {
-        ref: messageListRef,
-        messages,
         currentUserId: config.userId,
-        participants,
-        showSeenBy,
-        typingUsers,
-        hasMore,
-        isLoading,
-        onLoadMore: loadMoreMessages,
-        onDeepLinkClick: handleDeepLink,
-        onMessageVisible: markAsRead,
-        onReply: setReplyTo,
-        onPin: pinMessage,
-        onUnpin: unpinMessage,
-        onCopy: handleCopy,
-        pinDisabled
+        isAdmin: channelSettings.isAdmin,
+        isUpdating: channelSettings.isUpdating,
+        error: channelSettings.error,
+        onUpdateChannel: channelSettings.updateChannel,
+        onInviteUser: channelSettings.inviteUser,
+        onRemoveUser: channelSettings.removeUser,
+        onLeaveChannel: channelSettings.leaveChannel,
+        onDeleteChannel: channelSettings.deleteChannel,
+        onClose: () => setShowSettings(false)
       }
-    ),
-    /* @__PURE__ */ jsx(
-      MessageInput,
-      {
-        onSendText: sendMessage,
-        onSendAudio: sendAudioMessage,
-        onSendFile: sendFileMessage,
-        onTyping: sendTyping,
-        replyTo,
-        onCancelReply: () => setReplyTo(null)
-      }
-    )
-  ] }) });
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PatientHeader,
+        {
+          patientData,
+          participants,
+          onOpenDicom: handleOpenDicom,
+          onOpenSettings: () => setShowSettings(true)
+        }
+      ),
+      pinnedMessages.length > 0 && /* @__PURE__ */ jsx(
+        PinnedMessagesBar,
+        {
+          pinnedMessages,
+          onJumpTo: handleJumpToMessage,
+          onUnpin: handleUnpin
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageList,
+        {
+          ref: messageListRef,
+          messages,
+          currentUserId: config.userId,
+          participants,
+          showSeenBy,
+          typingUsers,
+          hasMore,
+          isLoading,
+          onLoadMore: loadMoreMessages,
+          onDeepLinkClick: handleDeepLink,
+          onMessageVisible: markAsRead,
+          onReply: setReplyTo,
+          onPin: handlePin,
+          onUnpin: handleUnpin,
+          onCopy: handleCopy,
+          onRetry: retryMessage,
+          pinDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageInput,
+        {
+          onSendText: sendMessage,
+          onSendAudio: sendAudioMessage,
+          onSendFile: sendFileMessage,
+          onTyping: sendTyping,
+          replyTo,
+          onCancelReply: () => setReplyTo(null)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Toast, { toast, onDismiss: () => setToast(null) })
+  ] });
 }
 var panelStyles = {
   container: {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -3238,6 +3642,7 @@ function ExpandIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function CollabPopup({
   orderId,
   patientData,
@@ -3259,6 +3664,8 @@ function CollabPopup({
   const [isMinimized, setIsMinimized] = useState(false);
   const dragOffset = useRef({ x: 0, y: 0 });
   const containerRef = useRef(null);
+  const previouslyFocused = useRef(null);
+  const titleId = useId();
   const handleMouseDown = useCallback(
     (e) => {
       if (!e.target.closest("[data-drag-handle]")) return;
@@ -3273,13 +3680,44 @@ function CollabPopup({
   );
   useEffect(() => {
     if (!isOpen) return;
+    previouslyFocused.current = document.activeElement;
+    const focusFirst = () => {
+      const root = containerRef.current;
+      if (!root) return;
+      const first = root.querySelector(FOCUSABLE_SELECTOR);
+      (first ?? root).focus();
+    };
+    const raf = requestAnimationFrame(focusFirst);
     const handleKey = (e) => {
       if (e.key === "Escape") {
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = containerRef.current;
+      if (!root) return;
+      const focusables = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+      if (focusables.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
       }
     };
     window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("keydown", handleKey);
+      previouslyFocused.current?.focus?.();
+    };
   }, [isOpen, onClose]);
   useEffect(() => {
     if (!isDragging) return;
@@ -3305,8 +3743,12 @@ function CollabPopup({
     {
       ref: containerRef,
       className,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
       style: {
-        ...styles12.container,
+        ...styles13.container,
         left: position.x,
         top: position.y,
         width,
@@ -3315,14 +3757,14 @@ function CollabPopup({
       },
       onMouseDown: handleMouseDown,
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles12.titleBar, children: [
-          /* @__PURE__ */ jsx("span", { style: styles12.titleText, children: buildChannelName(patientData) }),
-          /* @__PURE__ */ jsxs("div", { style: styles12.titleActions, children: [
+        /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles13.titleBar, children: [
+          /* @__PURE__ */ jsx("span", { id: titleId, style: styles13.titleText, children: buildChannelName(patientData) }),
+          /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => setIsMinimized(!isMinimized),
-                style: styles12.titleButton,
+                style: styles13.titleButton,
                 "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
@@ -3333,7 +3775,7 @@ function CollabPopup({
               "button",
               {
                 onClick: onClose,
-                style: styles12.titleButton,
+                style: styles13.titleButton,
                 "aria-label": "Close chat",
                 title: "Close",
                 type: "button",
@@ -3342,12 +3784,12 @@ function CollabPopup({
             )
           ] })
         ] }),
-        !isMinimized && /* @__PURE__ */ jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsx(CollabPanel, { orderId, patientData, participantIds }) })
+        !isMinimized && /* @__PURE__ */ jsx("div", { style: styles13.panelWrapper, children: /* @__PURE__ */ jsx(CollabPanel, { orderId, patientData, participantIds }) })
       ]
     }
   );
 }
-var styles12 = {
+var styles13 = {
   container: {
     position: "fixed",
     zIndex: 9999,
@@ -3652,11 +4094,11 @@ function CollabInline({
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
   if (isLoading && !hasConversation) {
-    return /* @__PURE__ */ jsx("div", { className, style: { ...styles13.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles13.loadingState, children: "Loading..." }) });
+    return /* @__PURE__ */ jsx("div", { className, style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: { ...styles13.container, ...style }, children: [
-    hasConversation && messages.length > 0 && /* @__PURE__ */ jsx("div", { style: styles13.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsx(InlineMessageRow, { message }, message.id)) }),
-    error && /* @__PURE__ */ jsx("div", { style: styles13.error, children: error }),
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: { ...styles14.container, ...style }, children: [
+    hasConversation && messages.length > 0 && /* @__PURE__ */ jsx("div", { style: styles14.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsx(InlineMessageRow, { message }, message.id)) }),
+    error && /* @__PURE__ */ jsx("div", { style: styles14.error, children: error }),
     /* @__PURE__ */ jsx(
       InlineInputBar,
       {
@@ -3673,12 +4115,12 @@ function CollabInline({
 }
 function InlineMessageRow({ message }) {
   if (message.type === "system") {
-    return /* @__PURE__ */ jsx("div", { style: styles13.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles13.systemText, children: message.body }) });
+    return /* @__PURE__ */ jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles14.systemText, children: message.body }) });
   }
   if (message.type === "audio" && message.mediaUrl) {
-    return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+    return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
       /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-      /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
         message.senderName,
         ":"
       ] }),
@@ -3686,13 +4128,13 @@ function InlineMessageRow({ message }) {
     ] });
   }
   const preview = renderMessagePreview(message);
-  return /* @__PURE__ */ jsxs("div", { style: styles13.messageRow, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
     /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-    /* @__PURE__ */ jsxs("span", { style: styles13.senderName, children: [
+    /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
       message.senderName,
       ":"
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles13.messageText, children: preview })
+    /* @__PURE__ */ jsx("span", { style: styles14.messageText, children: preview })
   ] });
 }
 function RoleDot({ role }) {
@@ -3702,7 +4144,7 @@ function RoleDot({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsx("span", { style: { ...styles13.roleDot, backgroundColor: colors[role] } });
+  return /* @__PURE__ */ jsx("span", { style: { ...styles14.roleDot, backgroundColor: colors[role] } });
 }
 function InlineAudioPlayer({ url, duration }) {
   const audioRef = useRef(null);
@@ -3746,27 +4188,27 @@ function InlineAudioPlayer({ url, duration }) {
   const total = duration ?? 0;
   const remaining = Math.max(0, total - Math.floor(currentTime));
   const displayTime = isPlaying ? remaining : total;
-  return /* @__PURE__ */ jsxs("span", { style: styles13.audioPlayer, children: [
+  return /* @__PURE__ */ jsxs("span", { style: styles14.audioPlayer, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         onClick: toggle,
-        style: styles13.audioButton,
+        style: styles14.audioButton,
         title: isPlaying ? "Pause" : "Play",
         type: "button",
         children: isPlaying ? "\u23F8" : "\u25B6"
       }
     ),
-    /* @__PURE__ */ jsxs("span", { style: styles13.audioWaveform, children: [
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "40%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "80%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "60%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "90%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "50%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "70%" } }),
-      /* @__PURE__ */ jsx("span", { style: { ...styles13.waveBar, height: "40%" } })
+    /* @__PURE__ */ jsxs("span", { style: styles14.audioWaveform, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "80%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "60%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "90%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "50%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "70%" } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%" } })
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles13.audioDuration, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsx("span", { style: styles14.audioDuration, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -3822,7 +4264,7 @@ function InlineInputBar({
     },
     [handleSend]
   );
-  return /* @__PURE__ */ jsxs("div", { style: styles13.inputBar, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles14.inputBar, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -3833,17 +4275,17 @@ function InlineInputBar({
         onKeyDown: handleKeyDown,
         placeholder,
         disabled: isSending,
-        style: styles13.input
+        style: styles14.input
       }
     ),
-    unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: styles13.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
-    isLive && /* @__PURE__ */ jsx("span", { style: styles13.liveDot, title: "Live updates active" }),
+    unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
+    isLive && /* @__PURE__ */ jsx("span", { style: styles14.liveDot, title: "Live updates active" }),
     text.trim() && /* @__PURE__ */ jsx(
       "button",
       {
         onClick: handleSend,
         disabled: isSending,
-        style: styles13.sendButton,
+        style: styles14.sendButton,
         title: "Send message",
         type: "button",
         children: "\u27A4"
@@ -3853,7 +4295,7 @@ function InlineInputBar({
       "button",
       {
         onClick: onExpand,
-        style: styles13.expandButton,
+        style: styles14.expandButton,
         title: "Expand to full chat",
         type: "button",
         children: "\u26F6"
@@ -3861,7 +4303,7 @@ function InlineInputBar({
     )
   ] });
 }
-var styles13 = {
+var styles14 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -4128,24 +4570,24 @@ function ConversationListItem({
       className,
       onClick,
       style: {
-        ...styles14.container,
-        ...isSelected ? styles14.selected : {},
-        ...hasUnread ? styles14.unread : {}
+        ...styles15.container,
+        ...isSelected ? styles15.selected : {},
+        ...hasUnread ? styles15.unread : {}
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsxs("div", { style: styles14.avatarWrapper, children: [
-          item.picture ? /* @__PURE__ */ jsx("img", { src: item.picture, alt: "", style: styles14.avatar }) : /* @__PURE__ */ jsx("div", { style: styles14.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
-          hasUnread && /* @__PURE__ */ jsx("span", { style: styles14.unreadDot })
+        /* @__PURE__ */ jsxs("div", { style: styles15.avatarWrapper, children: [
+          item.picture ? /* @__PURE__ */ jsx("img", { src: item.picture, alt: "", style: styles15.avatar }) : /* @__PURE__ */ jsx("div", { style: styles15.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
+          hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.unreadDot })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: styles14.content, children: [
-          /* @__PURE__ */ jsxs("div", { style: styles14.topRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles15.content, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles15.topRow, children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
-                  ...styles14.name,
-                  ...hasUnread ? styles14.nameUnread : {}
+                  ...styles15.name,
+                  ...hasUnread ? styles15.nameUnread : {}
                 },
                 children: displayName
               }
@@ -4154,25 +4596,25 @@ function ConversationListItem({
               "span",
               {
                 style: {
-                  ...styles14.time,
-                  ...hasUnread ? styles14.timeUnread : {}
+                  ...styles15.time,
+                  ...hasUnread ? styles15.timeUnread : {}
                 },
                 children: formatInboxTimestamp(item.lastActivityAt)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: styles14.bottomRow, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles15.bottomRow, children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
-                  ...styles14.preview,
-                  ...hasUnread ? styles14.previewUnread : {}
+                  ...styles15.preview,
+                  ...hasUnread ? styles15.previewUnread : {}
                 },
                 children: renderLastMessagePreview(item.lastMessage)
               }
             ),
-            hasUnread && /* @__PURE__ */ jsx("span", { style: styles14.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
+            hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
           ] })
         ] })
       ]
@@ -4200,7 +4642,7 @@ function renderLastMessagePreview(message) {
     }
   }
 }
-var styles14 = {
+var styles15 = {
   container: {
     display: "flex",
     alignItems: "center",
@@ -4347,30 +4789,30 @@ function ConversationList({
     return result;
   }, [conversations, query, showUnreadOnly]);
   const totalUnread = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
-  return /* @__PURE__ */ jsxs("div", { className, style: styles15.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles15.header, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles15.titleRow, children: [
-        /* @__PURE__ */ jsx("h3", { style: styles15.title, children: title }),
-        totalUnread > 0 && /* @__PURE__ */ jsx("span", { style: styles15.totalBadge, children: totalUnread })
+  return /* @__PURE__ */ jsxs("div", { className, style: styles16.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles16.header, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles16.titleRow, children: [
+        /* @__PURE__ */ jsx("h3", { style: styles16.title, children: title }),
+        totalUnread > 0 && /* @__PURE__ */ jsx("span", { style: styles16.totalBadge, children: totalUnread })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles15.searchRow, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: styles16.searchRow, children: /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder: "Search patients or channels...",
-          style: styles15.searchInput
+          style: styles16.searchInput
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { style: styles15.filterRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles16.filterRow, children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setShowUnreadOnly(false),
             style: {
-              ...styles15.filterButton,
-              ...!showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...!showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: "All"
@@ -4381,8 +4823,8 @@ function ConversationList({
           {
             onClick: () => setShowUnreadOnly(true),
             style: {
-              ...styles15.filterButton,
-              ...showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: [
@@ -4393,10 +4835,10 @@ function ConversationList({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles15.list, children: [
-      isLoading && /* @__PURE__ */ jsx("div", { style: styles15.state, children: "Loading conversations..." }),
-      error && /* @__PURE__ */ jsx("div", { style: styles15.errorState, children: error }),
-      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: styles15.state, children: query ? "No matching conversations" : "No conversations yet" }),
+    /* @__PURE__ */ jsxs("div", { style: styles16.list, children: [
+      isLoading && /* @__PURE__ */ jsx("div", { style: styles16.state, children: "Loading conversations..." }),
+      error && /* @__PURE__ */ jsx("div", { style: styles16.errorState, children: error }),
+      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: styles16.state, children: query ? "No matching conversations" : "No conversations yet" }),
       filtered.map((item) => /* @__PURE__ */ jsx(
         ConversationListItem,
         {
@@ -4409,7 +4851,7 @@ function ConversationList({
     ] })
   ] });
 }
-var styles15 = {
+var styles16 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -4514,8 +4956,8 @@ function CollabInbox({
     setSelectedId(item.id);
     onSelectConversation?.(item);
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles16.container, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: styles16.sidebar, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles17.container, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: styles17.sidebar, children: /* @__PURE__ */ jsx(
       ConversationList,
       {
         conversations,
@@ -4526,13 +4968,13 @@ function CollabInbox({
         title
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { style: styles16.main, children: selected ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: styles17.main, children: selected ? /* @__PURE__ */ jsx(
       CollabPanel,
       {
         orderId: selected.orderId,
         patientData: buildPatientData(selected),
         showSeenBy: true,
-        style: styles16.panel
+        style: styles17.panel
       },
       selected.id
     ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
@@ -4546,13 +4988,13 @@ function buildPatientData(item) {
   };
 }
 function EmptyState({ hasAny }) {
-  return /* @__PURE__ */ jsxs("div", { style: styles16.empty, children: [
-    /* @__PURE__ */ jsx("div", { style: styles16.emptyIcon, children: "\u{1F4AC}" }),
-    /* @__PURE__ */ jsx("h3", { style: styles16.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
-    /* @__PURE__ */ jsx("p", { style: styles16.emptySubtitle, children: hasAny ? "Pick a patient from the list to start collaborating" : "Conversations appear here once you start messaging about a case" })
+  return /* @__PURE__ */ jsxs("div", { style: styles17.empty, children: [
+    /* @__PURE__ */ jsx("div", { style: styles17.emptyIcon, children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsx("h3", { style: styles17.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
+    /* @__PURE__ */ jsx("p", { style: styles17.emptySubtitle, children: hasAny ? "Pick a patient from the list to start collaborating" : "Conversations appear here once you start messaging about a case" })
   ] });
 }
-var styles16 = {
+var styles17 = {
   container: {
     display: "flex",
     height: "100%",