@natoe/colab 0.1.2 → 0.1.4

package/dist/index.js

@@ -834,6 +834,7 @@ function useConversation({
         body,
         type: "text",
         insertedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "sending",
         ...replyTo ? {
           replyToId: replyTo.id,
           replyToSnapshot: {
@@ -849,7 +850,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",
@@ -859,6 +862,34 @@ function useConversation({
     },
     [ensureConversation, socket, replyTo, config]
   );
+  const retryMessage = React4.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 = React4.useCallback(
     async (audioBlob, duration) => {
       if (!config.onUploadFile) return;
@@ -951,6 +982,7 @@ function useConversation({
           message: "Failed to pin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, pinMessageApi, config]
@@ -966,6 +998,7 @@ function useConversation({
           message: "Failed to unpin message",
           details: err
         });
+        throw err;
       }
     },
     [conversation, unpinMessageApi, config]
@@ -983,6 +1016,7 @@ function useConversation({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendDeepLink,
@@ -1159,7 +1193,7 @@ var styles = {
   },
   patientName: {
     fontWeight: 600,
-    fontSize: "15px",
+    fontSize: "17px",
     color: "#111827"
   },
   secondaryRow: {
@@ -1169,8 +1203,8 @@ var styles = {
     alignItems: "center"
   },
   secondary: {
-    fontSize: "12px",
-    color: "#6b7280"
+    fontSize: "13px",
+    color: "#4b5563"
   },
   actions: {
     display: "flex",
@@ -1178,8 +1212,9 @@ var styles = {
     marginTop: "8px"
   },
   dicomButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#ffffff",
     backgroundColor: "#2563eb",
@@ -1188,8 +1223,9 @@ var styles = {
     cursor: "pointer"
   },
   settingsButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#374151",
     backgroundColor: "#ffffff",
@@ -1430,6 +1466,82 @@ var styles4 = {
     cursor: "pointer"
   }
 };
+function FileIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" })
+    }
+  );
+}
+function PinIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 AlertIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
+    }
+  );
+}
+function Spinner({ size = 16, color = "#6b7280", thickness = 2 }) {
+  return /* @__PURE__ */ jsxRuntime.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",
+  physician: "Physician",
+  admin: "Admin"
+};
 function MessageBubble({
   message,
   isOwn,
@@ -1442,6 +1554,7 @@ function MessageBubble({
   onUnpin,
   onCopy,
   onReplyJumpTo,
+  onRetry,
   pinDisabled = false,
   className
 }) {
@@ -1469,7 +1582,10 @@ function MessageBubble({
               ...isOwn ? styles5.ownBubble : styles5.otherBubble
             },
             children: [
-              message.isPinned && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.pinnedBadge, children: "\u{1F4CC} Pinned" }),
+              message.isPinned && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.pinnedBadge, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 12 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pinned" })
+              ] }),
               message.replyToSnapshot && /* @__PURE__ */ jsxRuntime.jsx(
                 ReplyQuoteBlock,
                 {
@@ -1488,7 +1604,25 @@ function MessageBubble({
               message.type === "file" && /* @__PURE__ */ jsxRuntime.jsx(FileContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
               message.type === "deep_link" && /* @__PURE__ */ jsxRuntime.jsx(DeepLinkContent, { body: message.body, metadata: message.metadata, onDeepLinkClick }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.timestamp, children: formatTime(message.insertedAt) }),
-              showSeenBy && isOwn && /* @__PURE__ */ jsxRuntime.jsx(
+              isOwn && message.status === "sending" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 12, color: "rgba(255,255,255,0.85)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.statusText, children: "Sending\u2026" })
+              ] }),
+              isOwn && message.status === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.statusRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { size: 12, color: "#fecaca" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.statusText, children: "Not sent" }),
+                onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRetry(message.id),
+                    style: styles5.retryButton,
+                    "aria-label": "Retry sending message",
+                    children: "Retry"
+                  }
+                )
+              ] }),
+              showSeenBy && isOwn && !message.status && /* @__PURE__ */ jsxRuntime.jsx(
                 SeenByIndicator,
                 {
                   readBy: message.readBy ?? [],
@@ -1564,7 +1698,7 @@ function ImageContent({ mediaUrl, fileName }) {
 function FileContent({ mediaUrl, fileName }) {
   if (!mediaUrl) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", style: styles5.fileLink, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileIcon, children: "\u{1F4C4}" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { size: 20 }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileName, children: fileName || "Download file" })
   ] });
 }
@@ -1602,7 +1736,7 @@ function RoleBadge({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: role });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: ROLE_LABELS[role] ?? role });
 }
 function formatTime(iso) {
   try {
@@ -1631,7 +1765,7 @@ var styles5 = {
     maxWidth: "75%"
   },
   bubble: {
-    padding: "8px 12px",
+    padding: "10px 14px",
     borderRadius: "12px",
     wordBreak: "break-word"
   },
@@ -1646,11 +1780,13 @@ var styles5 = {
     borderBottomLeftRadius: "4px"
   },
   pinnedBadge: {
-    display: "inline-block",
-    fontSize: "10px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "12px",
     fontWeight: 600,
     marginBottom: "4px",
-    opacity: 0.7
+    color: "#6b7280"
   },
   senderRow: {
     display: "flex",
@@ -1659,27 +1795,50 @@ var styles5 = {
     marginBottom: "4px"
   },
   senderName: {
-    fontSize: "12px",
+    fontSize: "13px",
     fontWeight: 600,
     color: "#374151"
   },
   roleBadge: {
-    fontSize: "10px",
-    fontWeight: 500,
-    padding: "1px 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    padding: "2px 8px",
     borderRadius: "4px"
   },
   textBody: {
     margin: 0,
-    fontSize: "14px",
-    lineHeight: "1.4"
+    fontSize: "15px",
+    lineHeight: "1.45"
   },
   timestamp: {
-    fontSize: "10px",
-    opacity: 0.7,
+    fontSize: "12px",
+    color: "inherit",
+    opacity: 0.8,
     marginTop: "4px",
     textAlign: "right"
   },
+  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"
+  },
   actionsWrapper: {
     position: "absolute",
     top: "50%",
@@ -1715,9 +1874,6 @@ var styles5 = {
     color: "inherit",
     padding: "6px 0"
   },
-  fileIcon: {
-    fontSize: "18px"
-  },
   fileName: {
     fontSize: "13px",
     textDecoration: "underline"
@@ -1752,15 +1908,53 @@ var styles5 = {
     justifyContent: "center",
     alignItems: "center",
     gap: "8px",
-    padding: "4px 16px",
-    fontSize: "12px",
-    color: "#9ca3af"
+    padding: "6px 16px",
+    fontSize: "13px",
+    color: "#6b7280"
   },
   systemTime: {
-    fontSize: "10px",
-    color: "#d1d5db"
+    fontSize: "12px",
+    color: "#9ca3af"
   }
 };
+function ChatIllustration({ size = 96 }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "60", cy: "60", r: "56", fill: "#eff6ff" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "48", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "58", cy: "53", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "68", cy: "68", r: "2.5", fill: "#2563eb" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "78", cy: "68", r: "2.5", fill: "#2563eb" })
+      ]
+    }
+  );
+}
 
 // src/core/dateLabels.ts
 var SHORT_MONTHS = [
@@ -1852,6 +2046,7 @@ var MessageList = React4.forwardRef(function MessageList2({
   onPin,
   onUnpin,
   onCopy,
+  onRetry,
   pinDisabled,
   className
 }, ref) {
@@ -1916,12 +2111,17 @@ var MessageList = React4.forwardRef(function MessageList2({
       style: styles6.container,
       onScroll: handleScroll,
       children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles6.loadingMore, children: "Loading earlier messages..." }),
+        isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles6.loadingMore, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading earlier messages\u2026" })
+        ] }),
         hasMore && !isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onLoadMore, style: styles6.loadMoreButton, type: "button", children: "Load earlier messages" }),
         messages.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles6.empty, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ChatIllustration, { size: 104 }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles6.emptyTitle, children: "No messages yet" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation about this study" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles6.emptySubtitle, children: "Start the conversation \u2014 everyone on this case will see what you write." })
         ] }),
+        messages.length === 0 && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles6.firstLoad, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 20 }) }),
         messages.map((message, index) => {
           const currentBucket = dayBucketKey(message.insertedAt);
           const prevBucket = index === 0 ? null : dayBucketKey(messages[index - 1].insertedAt);
@@ -1941,6 +2141,7 @@ var MessageList = React4.forwardRef(function MessageList2({
                 onPin,
                 onUnpin,
                 onCopy,
+                onRetry,
                 pinDisabled
               }
             ) })
@@ -1969,20 +2170,30 @@ var styles6 = {
     paddingBottom: "8px"
   },
   loadingMore: {
-    textAlign: "center",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
     padding: "12px",
-    fontSize: "13px",
-    color: "#9ca3af"
+    fontSize: "14px",
+    color: "#6b7280"
+  },
+  firstLoad: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 16px"
   },
   loadMoreButton: {
     display: "block",
     margin: "0 auto 12px",
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#6b7280",
+    minHeight: "36px",
+    padding: "8px 18px",
+    fontSize: "13px",
+    color: "#374151",
     backgroundColor: "transparent",
-    border: "1px solid #e5e7eb",
-    borderRadius: "16px",
+    border: "1px solid #d1d5db",
+    borderRadius: "18px",
     cursor: "pointer"
   },
   empty: {
@@ -1991,21 +2202,25 @@ var styles6 = {
     alignItems: "center",
     justifyContent: "center",
     padding: "48px 16px",
-    color: "#9ca3af"
+    color: "#6b7280"
   },
   emptyTitle: {
-    fontSize: "15px",
-    fontWeight: 500,
-    margin: "0 0 4px"
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#374151",
+    margin: "14px 0 4px"
   },
   emptySubtitle: {
-    fontSize: "13px",
-    margin: 0
+    fontSize: "14px",
+    margin: 0,
+    maxWidth: "280px",
+    lineHeight: 1.45,
+    textAlign: "center"
   },
   typingIndicator: {
     padding: "4px 16px 8px",
-    fontSize: "12px",
-    color: "#9ca3af",
+    fontSize: "13px",
+    color: "#6b7280",
     fontStyle: "italic"
   },
   dayDivider: {
@@ -2015,12 +2230,11 @@ var styles6 = {
   },
   dayDividerPill: {
     display: "inline-block",
-    padding: "4px 12px",
-    fontSize: "12px",
+    padding: "5px 14px",
+    fontSize: "13px",
     fontWeight: 500,
-    color: "#475569",
-    backgroundColor: "#f1f5f9",
-    border: "1px solid #e2e8f0",
+    color: "#334155",
+    backgroundColor: "#e2e8f0",
     borderRadius: "12px",
     letterSpacing: "0.2px"
   }
@@ -2117,6 +2331,48 @@ var styles7 = {
     flexShrink: 0
   }
 };
+function AttachIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" })
+    }
+  );
+}
+function SendIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+    }
+  );
+}
+function CloseIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
 function MessageInput({
   onSendText,
   // MIC DISABLED — onSendAudio still accepted but unused.
@@ -2205,7 +2461,19 @@ function MessageInput({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles8.container, children: [
     replyTo && onCancelReply && /* @__PURE__ */ jsxRuntime.jsx(ReplyPreview, { message: replyTo, onCancel: onCancelReply }),
-    fileError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, children: fileError }),
+    fileError && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.error, role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles8.errorText, children: fileError }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setFileError(null),
+          "aria-label": "Dismiss error",
+          style: styles8.errorDismiss,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16 })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -2213,9 +2481,10 @@ function MessageInput({
           onClick: () => fileInputRef.current?.click(),
           disabled: disabled || isSending,
           style: styles8.iconButton,
+          "aria-label": "Attach file",
           title: "Attach file",
           type: "button",
-          children: "\u{1F4CE}"
+          children: /* @__PURE__ */ jsxRuntime.jsx(AttachIcon, { size: 22, color: "#374151" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2248,12 +2517,14 @@ function MessageInput({
         {
           onClick: handleSendText,
           disabled: disabled || isSending || !text.trim(),
+          "aria-label": "Send message",
+          title: "Send message",
           style: {
             ...styles8.sendButton,
             opacity: text.trim() ? 1 : 0.4
           },
           type: "button",
-          children: "\u27A4"
+          children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { size: 20, color: "#ffffff" })
         }
       )
     ] })
@@ -2265,24 +2536,45 @@ var styles8 = {
     backgroundColor: "#ffffff"
   },
   error: {
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "8px 12px 8px 16px",
+    fontSize: "13px",
+    color: "#b91c1c",
+    backgroundColor: "#fef2f2",
+    borderTop: "1px solid #fecaca"
+  },
+  errorText: {
+    flex: 1,
+    minWidth: 0
+  },
+  errorDismiss: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    color: "#b91c1c",
+    borderRadius: "4px",
+    cursor: "pointer",
+    flexShrink: 0
   },
   inputBar: {
     display: "flex",
     alignItems: "flex-end",
-    gap: "4px",
-    padding: "8px 12px"
+    gap: "6px",
+    padding: "10px 12px"
   },
   iconButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "transparent",
     border: "none",
     borderRadius: "50%",
@@ -2291,23 +2583,23 @@ var styles8 = {
   },
   textarea: {
     flex: 1,
-    padding: "8px 12px",
-    fontSize: "14px",
-    lineHeight: "1.4",
-    border: "1px solid #e5e7eb",
-    borderRadius: "20px",
+    padding: "10px 14px",
+    fontSize: "15px",
+    lineHeight: "1.45",
+    border: "1px solid #d1d5db",
+    borderRadius: "22px",
     resize: "none",
     outline: "none",
     fontFamily: "inherit",
-    maxHeight: "120px"
+    maxHeight: "120px",
+    minHeight: "44px"
   },
   sendButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "#2563eb",
     color: "#ffffff",
     border: "none",
@@ -2927,6 +3219,64 @@ var styles11 = {
     flexShrink: 0
   }
 };
+function Toast({ toast, onDismiss, durationMs = 4e3 }) {
+  React4.useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(onDismiss, durationMs);
+    return () => clearTimeout(timer);
+  }, [toast, onDismiss, durationMs]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles12.container, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles12.message, children: toast.message }),
+    toast.actionLabel && toast.onAction && /* @__PURE__ */ jsxRuntime.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,
@@ -2937,6 +3287,7 @@ function CollabPanel({
 }) {
   const { config } = useCollab();
   const [showSettings, setShowSettings] = React4.useState(false);
+  const [toast, setToast] = React4.useState(null);
   const messageListRef = React4.useRef(null);
   const {
     conversation,
@@ -2950,6 +3301,7 @@ function CollabPanel({
     replyTo,
     setReplyTo,
     sendMessage,
+    retryMessage,
     sendAudioMessage,
     sendFileMessage,
     sendTyping,
@@ -2974,10 +3326,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__ */ jsxRuntime.jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelStyles.errorState, children: [
@@ -2988,78 +3363,83 @@ function CollabPanel({
   if (isLoading && !conversation) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...panelStyles.container, ...style }, children: showSettings && conversation ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PatientHeader,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
+    showSettings && conversation ? /* @__PURE__ */ jsxRuntime.jsx(
+      ChannelSettings,
       {
-        patientData,
+        conversationId: conversation.id,
+        channelName: conversation.name,
+        channelPicture: conversation.picture,
         participants,
-        onOpenDicom: handleOpenDicom,
-        onOpenSettings: () => setShowSettings(true)
-      }
-    ),
-    pinnedMessages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      PinnedMessagesBar,
-      {
-        pinnedMessages,
-        onJumpTo: handleJumpToMessage,
-        onUnpin: unpinMessage
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      MessageInput,
-      {
-        onSendText: sendMessage,
-        onSendAudio: sendAudioMessage,
-        onSendFile: sendFileMessage,
-        onTyping: sendTyping,
-        replyTo,
-        onCancelReply: () => setReplyTo(null)
+        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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PatientHeader,
+        {
+          patientData,
+          participants,
+          onOpenDicom: handleOpenDicom,
+          onOpenSettings: () => setShowSettings(true)
+        }
+      ),
+      pinnedMessages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        PinnedMessagesBar,
+        {
+          pinnedMessages,
+          onJumpTo: handleJumpToMessage,
+          onUnpin: handleUnpin
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        MessageInput,
+        {
+          onSendText: sendMessage,
+          onSendAudio: sendAudioMessage,
+          onSendFile: sendFileMessage,
+          onTyping: sendTyping,
+          replyTo,
+          onCancelReply: () => setReplyTo(null)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Toast, { toast, onDismiss: () => setToast(null) })
+  ] });
 }
 var panelStyles = {
   container: {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -3098,6 +3478,34 @@ var panelStyles = {
     margin: 0
   }
 };
+function MinimizeIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M6 19h12v2H6z" })
+    }
+  );
+}
+function ExpandIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M4 4h16v16H4V4zm2 4v10h12V8H6z" })
+    }
+  );
+}
 function CollabPopup({
   orderId,
   patientData,
@@ -3146,7 +3554,7 @@ function CollabPopup({
     const handleMouseMove = (e) => {
       setPosition({
         x: Math.max(0, Math.min(e.clientX - dragOffset.current.x, window.innerWidth - width)),
-        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 48 : height)))
+        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 52 : height)))
       });
     };
     const handleMouseUp = () => {
@@ -3166,37 +3574,48 @@ function CollabPopup({
       ref: containerRef,
       className,
       style: {
-        ...styles12.container,
+        ...styles13.container,
         left: position.x,
         top: position.y,
         width,
-        height: isMinimized ? 48 : height,
+        height: isMinimized ? 52 : height,
         cursor: isDragging ? "grabbing" : "default"
       },
       onMouseDown: handleMouseDown,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-drag-handle": true, style: styles12.titleBar, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles12.titleText, children: buildChannelName(patientData) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles12.titleActions, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-drag-handle": true, style: styles13.titleBar, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.titleText, children: buildChannelName(patientData) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => setIsMinimized(!isMinimized),
-                style: styles12.titleButton,
+                style: styles13.titleButton,
+                "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
-                children: isMinimized ? "\u25A2" : "\u2014"
+                children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { size: 16, color: "#cbd5e1" }) : /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, { size: 16, color: "#cbd5e1" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: styles12.titleButton, title: "Close", type: "button", children: "\u2715" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onClose,
+                style: styles13.titleButton,
+                "aria-label": "Close chat",
+                title: "Close",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: "#cbd5e1" })
+              }
+            )
           ] })
         ] }),
-        !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds }) })
+        !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds }) })
       ]
     }
   );
 }
-var styles12 = {
+var styles13 = {
   container: {
     position: "fixed",
     zIndex: 9999,
@@ -3213,15 +3632,15 @@ var styles12 = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "0 12px",
-    height: "48px",
+    padding: "0 8px 0 14px",
+    height: "52px",
     backgroundColor: "#1e293b",
     cursor: "grab",
     userSelect: "none",
     flexShrink: 0
   },
   titleText: {
-    fontSize: "13px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#ffffff",
     overflow: "hidden",
@@ -3234,17 +3653,16 @@ var styles12 = {
     flexShrink: 0
   },
   titleButton: {
-    width: "28px",
-    height: "28px",
+    width: "40px",
+    height: "40px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: "6px",
     cursor: "pointer",
-    fontSize: "13px",
-    color: "#94a3b8"
+    color: "#cbd5e1"
   },
   panelWrapper: {
     flex: 1,
@@ -3502,11 +3920,11 @@ function CollabInline({
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
   if (isLoading && !hasConversation) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles13.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.loadingState, children: "Loading..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className, style: { ...styles13.container, ...style }, children: [
-    hasConversation && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsxRuntime.jsx(InlineMessageRow, { message }, message.id)) }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.error, children: error }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className, style: { ...styles14.container, ...style }, children: [
+    hasConversation && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsxRuntime.jsx(InlineMessageRow, { message }, message.id)) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.error, children: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InlineInputBar,
       {
@@ -3523,12 +3941,12 @@ function CollabInline({
 }
 function InlineMessageRow({ message }) {
   if (message.type === "system") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.systemRow, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.systemText, children: message.body }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.systemText, children: message.body }) });
   }
   if (message.type === "audio" && message.mediaUrl) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.messageRow, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.messageRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(RoleDot, { role: message.senderRole }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles13.senderName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.senderName, children: [
         message.senderName,
         ":"
       ] }),
@@ -3536,13 +3954,13 @@ function InlineMessageRow({ message }) {
     ] });
   }
   const preview = renderMessagePreview(message);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.messageRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.messageRow, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RoleDot, { role: message.senderRole }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles13.senderName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.senderName, children: [
       message.senderName,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.messageText, children: preview })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.messageText, children: preview })
   ] });
 }
 function RoleDot({ role }) {
@@ -3552,7 +3970,7 @@ function RoleDot({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.roleDot, backgroundColor: colors[role] } });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.roleDot, backgroundColor: colors[role] } });
 }
 function InlineAudioPlayer({ url, duration }) {
   const audioRef = React4.useRef(null);
@@ -3596,27 +4014,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__ */ jsxRuntime.jsxs("span", { style: styles13.audioPlayer, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.audioPlayer, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: toggle,
-        style: styles13.audioButton,
+        style: styles14.audioButton,
         title: isPlaying ? "Pause" : "Play",
         type: "button",
         children: isPlaying ? "\u23F8" : "\u25B6"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles13.audioWaveform, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "40%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "80%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "60%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "90%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "50%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "70%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "40%" } })
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.audioWaveform, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "80%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "60%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "90%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "50%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "70%" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%" } })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.audioDuration, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.audioDuration, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -3672,7 +4090,7 @@ function InlineInputBar({
     },
     [handleSend]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.inputBar, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.inputBar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -3683,17 +4101,17 @@ function InlineInputBar({
         onKeyDown: handleKeyDown,
         placeholder,
         disabled: isSending,
-        style: styles13.input
+        style: styles14.input
       }
     ),
-    unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
-    isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.liveDot, title: "Live updates active" }),
+    unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
+    isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.liveDot, title: "Live updates active" }),
     text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: handleSend,
         disabled: isSending,
-        style: styles13.sendButton,
+        style: styles14.sendButton,
         title: "Send message",
         type: "button",
         children: "\u27A4"
@@ -3703,7 +4121,7 @@ function InlineInputBar({
       "button",
       {
         onClick: onExpand,
-        style: styles13.expandButton,
+        style: styles14.expandButton,
         title: "Expand to full chat",
         type: "button",
         children: "\u26F6"
@@ -3711,7 +4129,7 @@ function InlineInputBar({
     )
   ] });
 }
-var styles13 = {
+var styles14 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -3978,24 +4396,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__ */ jsxRuntime.jsxs("div", { style: styles14.avatarWrapper, children: [
-          item.picture ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.picture, alt: "", style: styles14.avatar }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
-          hasUnread && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.unreadDot })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.avatarWrapper, children: [
+          item.picture ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.picture, alt: "", style: styles15.avatar }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles15.avatarFallback, children: (displayName).charAt(0).toUpperCase() }),
+          hasUnread && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles15.unreadDot })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.content, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.topRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.content, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.topRow, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 style: {
-                  ...styles14.name,
-                  ...hasUnread ? styles14.nameUnread : {}
+                  ...styles15.name,
+                  ...hasUnread ? styles15.nameUnread : {}
                 },
                 children: displayName
               }
@@ -4004,25 +4422,25 @@ function ConversationListItem({
               "span",
               {
                 style: {
-                  ...styles14.time,
-                  ...hasUnread ? styles14.timeUnread : {}
+                  ...styles15.time,
+                  ...hasUnread ? styles15.timeUnread : {}
                 },
                 children: formatInboxTimestamp(item.lastActivityAt)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.bottomRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.bottomRow, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 style: {
-                  ...styles14.preview,
-                  ...hasUnread ? styles14.previewUnread : {}
+                  ...styles15.preview,
+                  ...hasUnread ? styles15.previewUnread : {}
                 },
                 children: renderLastMessagePreview(item.lastMessage)
               }
             ),
-            hasUnread && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
+            hasUnread && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles15.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
           ] })
         ] })
       ]
@@ -4050,7 +4468,7 @@ function renderLastMessagePreview(message) {
     }
   }
 }
-var styles14 = {
+var styles15 = {
   container: {
     display: "flex",
     alignItems: "center",
@@ -4115,7 +4533,7 @@ var styles14 = {
     gap: "8px"
   },
   name: {
-    fontSize: "14px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#111827",
     overflow: "hidden",
@@ -4128,8 +4546,8 @@ var styles14 = {
     fontWeight: 700
   },
   time: {
-    fontSize: "11px",
-    color: "#9ca3af",
+    fontSize: "12px",
+    color: "#6b7280",
     flexShrink: 0
   },
   timeUnread: {
@@ -4143,8 +4561,8 @@ var styles14 = {
     gap: "8px"
   },
   preview: {
-    fontSize: "13px",
-    color: "#6b7280",
+    fontSize: "14px",
+    color: "#4b5563",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -4197,30 +4615,30 @@ function ConversationList({
     return result;
   }, [conversations, query, showUnreadOnly]);
   const totalUnread = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles15.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.titleRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles15.title, children: title }),
-        totalUnread > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles15.totalBadge, children: totalUnread })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles16.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles16.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles16.titleRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles16.title, children: title }),
+        totalUnread > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles16.totalBadge, children: totalUnread })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles15.searchRow, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.searchRow, children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "text",
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder: "Search patients or channels...",
-          style: styles15.searchInput
+          style: styles16.searchInput
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.filterRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles16.filterRow, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => setShowUnreadOnly(false),
             style: {
-              ...styles15.filterButton,
-              ...!showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...!showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: "All"
@@ -4231,8 +4649,8 @@ function ConversationList({
           {
             onClick: () => setShowUnreadOnly(true),
             style: {
-              ...styles15.filterButton,
-              ...showUnreadOnly ? styles15.filterButtonActive : {}
+              ...styles16.filterButton,
+              ...showUnreadOnly ? styles16.filterButtonActive : {}
             },
             type: "button",
             children: [
@@ -4243,10 +4661,10 @@ function ConversationList({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles15.list, children: [
-      isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles15.state, children: "Loading conversations..." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles15.errorState, children: error }),
-      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles15.state, children: query ? "No matching conversations" : "No conversations yet" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles16.list, children: [
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.state, children: "Loading conversations..." }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.errorState, children: error }),
+      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.state, children: query ? "No matching conversations" : "No conversations yet" }),
       filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
         ConversationListItem,
         {
@@ -4259,7 +4677,7 @@ function ConversationList({
     ] })
   ] });
 }
-var styles15 = {
+var styles16 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -4364,8 +4782,8 @@ function CollabInbox({
     setSelectedId(item.id);
     onSelectConversation?.(item);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles16.container, ...style }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.sidebar, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles17.container, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles17.sidebar, children: /* @__PURE__ */ jsxRuntime.jsx(
       ConversationList,
       {
         conversations,
@@ -4376,13 +4794,13 @@ function CollabInbox({
         title
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.main, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles17.main, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(
       CollabPanel,
       {
         orderId: selected.orderId,
         patientData: buildPatientData(selected),
         showSeenBy: true,
-        style: styles16.panel
+        style: styles17.panel
       },
       selected.id
     ) : /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { hasAny: conversations.length > 0 }) })
@@ -4396,13 +4814,13 @@ function buildPatientData(item) {
   };
 }
 function EmptyState({ hasAny }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles16.empty, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles16.emptyIcon, children: "\u{1F4AC}" }),
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles16.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: styles17.empty, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles17.emptyIcon, children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles17.emptyTitle, children: hasAny ? "Select a conversation" : "No conversations yet" }),
+    /* @__PURE__ */ jsxRuntime.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%",