@natoe/colab 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useId, useMemo } from 'react';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useLayoutEffect, useContext, useId, useMemo } from 'react';
 import { Socket, Presence } from 'phoenix';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/components/CollabPanel.tsx
 
@@ -370,7 +371,9 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       const data = snakeToCamel(await response.json());
       orderIds.forEach((orderId) => {
         const preview = data.previews[orderId] ?? null;
-        previewCache.current.set(orderId, preview);
+        if (preview !== null) {
+          previewCache.current.set(orderId, preview);
+        }
         resolvers.get(orderId)?.forEach((resolve) => resolve(preview));
       });
     } catch (error) {
@@ -417,7 +420,8 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       if (!response.ok) {
         throw { code: "FETCH_ERROR", message: "Failed to fetch messages", status: response.status };
       }
-      return snakeToCamel(await response.json());
+      const msgs = snakeToCamel(await response.json());
+      return msgs.sort((a, b) => a.insertedAt.localeCompare(b.insertedAt));
     },
     [apiBaseUrl, authHeaders]
   );
@@ -891,8 +895,8 @@ function useConversation({
       const payload = {
         body: "Voice message",
         type: "audio",
-        mediaUrl: url,
-        mediaDuration: duration
+        media_url: url,
+        media_duration: duration
       };
       const { conv, persistedByCreate } = await ensureConversation(payload);
       if (persistedByCreate) return;
@@ -908,8 +912,8 @@ function useConversation({
       const payload = {
         body: file.name,
         type: isImage ? "image" : "file",
-        mediaUrl: url,
-        fileName: file.name
+        media_url: url,
+        file_name: file.name
       };
       const { conv, persistedByCreate } = await ensureConversation(payload);
       if (persistedByCreate) return;
@@ -1141,71 +1145,190 @@ function useDeepLinks() {
 function escapeRegex(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function DicomIcon({ 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: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "13", height: "13", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 7h13a2 2 0 0 1 2 2v11", opacity: "0.6" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9.5", r: "1.2", fill: color, stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 14l3-3 4 4 2-2 3 3" })
+      ]
+    }
+  );
+}
+function SettingsIcon({ 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: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" })
+    }
+  );
+}
+function BackIcon({ size = 22, 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: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+    }
+  );
+}
 function PatientHeader({
   patientData,
   onOpenDicom,
   onOpenSettings,
+  onBack,
   className
 }) {
   const hasDicom = !!(patientData.studyId && patientData.storageId);
+  const meta = [];
+  if (patientData.patientAge) meta.push({ label: "Age", value: String(patientData.patientAge) });
+  if (patientData.patientSex) meta.push({ label: "Sex", value: String(patientData.patientSex) });
+  if (patientData.studyType) meta.push({ label: "Modality", value: patientData.studyType });
+  if (patientData.bodyParts && patientData.bodyParts.length > 0) {
+    meta.push({ label: "Body part", value: patientData.bodyParts.join(", ") });
+  }
+  if (patientData.referringPhysician) {
+    meta.push({ label: "Ref", value: patientData.referringPhysician });
+  }
   return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
-    /* @__PURE__ */ jsx("div", { style: styles.infoRow, children: /* @__PURE__ */ jsx("div", { style: styles.patientInfo, children: /* @__PURE__ */ jsx("span", { style: styles.patientName, children: buildChannelName(patientData) }) }) }),
-    /* @__PURE__ */ jsxs("div", { style: styles.secondaryRow, children: [
-      patientData.patientAge && /* @__PURE__ */ jsxs("span", { style: styles.secondary, children: [
-        patientData.patientAge,
-        patientData.patientSex ? `/${patientData.patientSex}` : ""
-      ] }),
-      patientData.studyType && /* @__PURE__ */ jsx("span", { style: styles.secondary, children: patientData.studyType }),
-      patientData.bodyParts && patientData.bodyParts.length > 0 && /* @__PURE__ */ jsx("span", { style: styles.secondary, children: patientData.bodyParts.join(", ") }),
-      patientData.referringPhysician && /* @__PURE__ */ jsxs("span", { style: styles.secondary, children: [
-        "Ref: ",
-        patientData.referringPhysician
-      ] })
+    /* @__PURE__ */ jsxs("div", { style: styles.nameRow, children: [
+      onBack && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: styles.backButton,
+          "aria-label": "Back to conversations",
+          title: "Back to conversations",
+          children: /* @__PURE__ */ jsx(BackIcon, { size: 22, color: "#1f2937" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: styles.nameText, children: buildChannelName(patientData) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
-      hasDicom && onOpenDicom && /* @__PURE__ */ jsx("button", { onClick: onOpenDicom, style: styles.dicomButton, type: "button", children: "View DICOM" }),
-      onOpenSettings && /* @__PURE__ */ jsx("button", { onClick: onOpenSettings, style: styles.settingsButton, type: "button", children: "Settings" })
-    ] })
+    meta.length > 0 && /* @__PURE__ */ jsx("div", { style: styles.metaRow, children: meta.map((item) => /* @__PURE__ */ jsxs("span", { style: styles.metaItem, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles.metaLabel, children: [
+        item.label,
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { style: styles.metaValue, children: item.value })
+    ] }, item.label)) }),
+    hasDicom && onOpenDicom || onOpenSettings ? /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+      hasDicom && onOpenDicom && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onOpenDicom,
+          style: styles.dicomButton,
+          type: "button",
+          "aria-label": "View DICOM study",
+          children: [
+            /* @__PURE__ */ jsx(DicomIcon, { size: 18, color: "#ffffff" }),
+            /* @__PURE__ */ jsx("span", { children: "View DICOM" })
+          ]
+        }
+      ),
+      onOpenSettings && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onOpenSettings,
+          style: styles.settingsButton,
+          type: "button",
+          "aria-label": "Open channel settings",
+          children: [
+            /* @__PURE__ */ jsx(SettingsIcon, { size: 18, color: "#374151" }),
+            /* @__PURE__ */ jsx("span", { children: "Settings" })
+          ]
+        }
+      )
+    ] }) : null
   ] });
 }
 var styles = {
   container: {
-    padding: "12px 16px",
+    padding: "14px 16px",
     borderBottom: "1px solid #e5e7eb",
     backgroundColor: "#f9fafb"
   },
-  infoRow: {
+  nameRow: {
     display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    gap: "6px"
   },
-  patientInfo: {
+  backButton: {
+    width: "36px",
+    height: "36px",
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    flexWrap: "wrap"
+    justifyContent: "center",
+    marginLeft: "-8px",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    flexShrink: 0
   },
-  patientName: {
+  nameText: {
+    fontSize: "18px",
     fontWeight: 600,
-    fontSize: "17px",
-    color: "#111827"
+    color: "#111827",
+    lineHeight: 1.3,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
-  secondaryRow: {
+  metaRow: {
     display: "flex",
-    gap: "12px",
-    marginTop: "4px",
-    alignItems: "center"
+    flexWrap: "wrap",
+    columnGap: "14px",
+    rowGap: "4px",
+    marginTop: "6px"
   },
-  secondary: {
+  metaItem: {
     fontSize: "13px",
-    color: "#4b5563"
+    color: "#374151",
+    whiteSpace: "nowrap"
+  },
+  metaLabel: {
+    color: "#6b7280",
+    fontWeight: 500
+  },
+  metaValue: {
+    color: "#111827"
   },
   actions: {
     display: "flex",
     gap: "8px",
-    marginTop: "8px"
+    marginTop: "10px"
   },
   dicomButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
     minHeight: "40px",
     padding: "8px 16px",
     fontSize: "14px",
@@ -1217,6 +1340,9 @@ var styles = {
     cursor: "pointer"
   },
   settingsButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
     minHeight: "40px",
     padding: "8px 16px",
     fontSize: "14px",
@@ -1433,6 +1559,8 @@ function MoreIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+var VIEWPORT_MARGIN = 8;
+var TRIGGER_GAP = 4;
 function MessageActionsMenu({
   message,
   onReply,
@@ -1444,16 +1572,43 @@ function MessageActionsMenu({
   className
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const wrapperRef = useRef(null);
+  const [coords, setCoords] = useState(null);
   const triggerRef = useRef(null);
+  const menuRef = useRef(null);
   const isPinned = !!message.isPinned;
   const canCopy = message.type === "text" && !!message.body;
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setCoords(null);
+      return;
+    }
+    const trigger = triggerRef.current;
+    const menu2 = menuRef.current;
+    if (!trigger || !menu2) return;
+    const triggerRect = trigger.getBoundingClientRect();
+    const menuRect = menu2.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceBelow = vh - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    const placeAbove = spaceBelow < menuRect.height + TRIGGER_GAP + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
+    const top = placeAbove ? triggerRect.top - menuRect.height - TRIGGER_GAP : triggerRect.bottom + TRIGGER_GAP;
+    const preferredLeft = anchorRight ? triggerRect.right - menuRect.width : triggerRect.left;
+    const left = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(preferredLeft, vw - menuRect.width - VIEWPORT_MARGIN)
+    );
+    const clampedTop = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(top, vh - menuRect.height - VIEWPORT_MARGIN)
+    );
+    setCoords({ top: clampedTop, left });
+  }, [isOpen, anchorRight]);
   useEffect(() => {
     if (!isOpen) return;
+    const isInside = (node) => !!node && (triggerRef.current?.contains(node) === true || menuRef.current?.contains(node) === true);
     const handleClick = (e) => {
-      if (!wrapperRef.current?.contains(e.target)) {
-        setIsOpen(false);
-      }
+      if (!isInside(e.target)) setIsOpen(false);
     };
     const handleKey = (e) => {
       if (e.key === "Escape") {
@@ -1461,18 +1616,100 @@ function MessageActionsMenu({
         triggerRef.current?.focus();
       }
     };
+    const handleScroll = (e) => {
+      if (!isInside(e.target)) setIsOpen(false);
+    };
+    const handleResize = () => setIsOpen(false);
     document.addEventListener("mousedown", handleClick);
     document.addEventListener("keydown", handleKey);
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
     return () => {
       document.removeEventListener("mousedown", handleClick);
       document.removeEventListener("keydown", handleKey);
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
     };
   }, [isOpen]);
   const run = (fn) => {
     setIsOpen(false);
     fn();
   };
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className, style: styles4.wrapper, children: [
+  const menu = isOpen ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      role: "menu",
+      "aria-label": "Message actions",
+      style: {
+        ...styles4.menu,
+        // Render off-screen on first paint so we can measure before placing,
+        // then snap to computed coords on the next layout pass.
+        top: coords?.top ?? -9999,
+        left: coords?.left ?? -9999,
+        visibility: coords ? "visible" : "hidden"
+      },
+      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" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className, style: styles4.wrapper, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -1490,75 +1727,7 @@ function MessageActionsMenu({
         children: /* @__PURE__ */ jsx(MoreIcon, { size: 18, color: "#4b5563" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "menu",
-        "aria-label": "Message actions",
-        style: {
-          ...styles4.menu,
-          ...anchorRight ? styles4.menuRight : styles4.menuLeft
-        },
-        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" })
-              ]
-            }
-          )
-        ]
-      }
-    )
+    menu && typeof document !== "undefined" ? createPortal(menu, document.body) : null
   ] });
 }
 var styles4 = {
@@ -1579,22 +1748,15 @@ var styles4 = {
     color: "#4b5563"
   },
   menu: {
-    position: "absolute",
-    top: "100%",
-    marginTop: "4px",
+    position: "fixed",
     minWidth: "160px",
     backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
     borderRadius: "10px",
     boxShadow: "0 6px 18px rgba(0, 0, 0, 0.12)",
     padding: "4px",
-    zIndex: 20
-  },
-  menuLeft: {
-    left: 0
-  },
-  menuRight: {
-    right: 0
+    // Above the floating popup (z-index 9999) but below any future modal.
+    zIndex: 1e4
   },
   item: {
     display: "flex",
@@ -2247,31 +2409,34 @@ var MessageList = forwardRef(function MessageList2({
           /* @__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);
-          const showDivider = currentBucket && currentBucket !== prevBucket;
-          return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
-            showDivider && /* @__PURE__ */ jsx("div", { style: styles6.dayDivider, role: "separator", "aria-label": "Date", children: /* @__PURE__ */ jsx("span", { style: styles6.dayDividerPill, children: formatDayDivider(message.insertedAt) }) }),
-            /* @__PURE__ */ jsx("div", { "data-message-id": message.id, children: /* @__PURE__ */ jsx(
-              MessageBubble,
-              {
-                message,
-                isOwn: message.senderId === currentUserId,
-                participants,
-                currentUserId,
-                showSeenBy,
-                onDeepLinkClick,
-                onReply,
-                onPin,
-                onUnpin,
-                onCopy,
-                onRetry,
-                pinDisabled
-              }
-            ) })
-          ] }, message.id);
-        }),
+        (() => {
+          let lastValidBucket = null;
+          return messages.map((message) => {
+            const currentBucket = dayBucketKey(message.insertedAt);
+            const showDivider = !!currentBucket && currentBucket !== lastValidBucket;
+            if (currentBucket) lastValidBucket = currentBucket;
+            return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+              showDivider && /* @__PURE__ */ jsx("div", { style: styles6.dayDivider, role: "separator", "aria-label": "Date", children: /* @__PURE__ */ jsx("span", { style: styles6.dayDividerPill, children: formatDayDivider(message.insertedAt) }) }),
+              /* @__PURE__ */ jsx("div", { "data-message-id": message.id, "data-natoe-message-bubble": true, style: styles6.bubbleSlot, children: /* @__PURE__ */ jsx(
+                MessageBubble,
+                {
+                  message,
+                  isOwn: message.senderId === currentUserId,
+                  participants,
+                  currentUserId,
+                  showSeenBy,
+                  onDeepLinkClick,
+                  onReply,
+                  onPin,
+                  onUnpin,
+                  onCopy,
+                  onRetry,
+                  pinDisabled
+                }
+              ) })
+            ] }, message.id);
+          });
+        })(),
         typingUsers.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.typingIndicator, children: [
           typingUsers.map((t) => t.userName ?? "Someone").join(", "),
           typingUsers.length === 1 ? " is " : " are ",
@@ -2351,7 +2516,11 @@ var styles6 = {
   dayDivider: {
     display: "flex",
     justifyContent: "center",
-    margin: "12px 0 8px"
+    margin: "12px 0 8px",
+    position: "sticky",
+    top: "4px",
+    zIndex: 1,
+    pointerEvents: "none"
   },
   dayDividerPill: {
     display: "inline-block",
@@ -2361,7 +2530,11 @@ var styles6 = {
     color: "#334155",
     backgroundColor: "#e2e8f0",
     borderRadius: "12px",
-    letterSpacing: "0.2px"
+    letterSpacing: "0.2px",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04)"
+  },
+  bubbleSlot: {
+    animation: "natoe-colab-message-in 180ms ease-out"
   }
 };
 function ReplyPreview({ message, onCancel, className }) {
@@ -3413,11 +3586,52 @@ var styles12 = {
     letterSpacing: "0.4px"
   }
 };
+
+// src/core/styles.ts
+var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var ROOT_CLASS = "natoe-colab-root";
+var GLOBAL_STYLE_ID = "natoe-colab-global-styles";
+var GLOBAL_CSS = `
+@keyframes natoe-colab-spin { to { transform: rotate(360deg); } }
+
+@keyframes natoe-colab-message-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* High-contrast adjustments \u2014 older users on OS-level high-contrast mode
+   get heavier borders and stronger text without losing the package look. */
+@media (prefers-contrast: more) {
+  .${ROOT_CLASS} {
+    color: #000000;
+  }
+  .${ROOT_CLASS} button {
+    outline: 1px solid currentColor;
+  }
+}
+
+/* Honour reduced-motion preferences by killing entry animations. */
+@media (prefers-reduced-motion: reduce) {
+  .${ROOT_CLASS} [data-natoe-message-bubble] {
+    animation: none !important;
+  }
+}
+`;
+function ensureGlobalStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(GLOBAL_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = GLOBAL_STYLE_ID;
+  style.textContent = GLOBAL_CSS;
+  document.head.appendChild(style);
+}
+ensureGlobalStyles();
 function CollabPanel({
   orderId,
   patientData,
   participantIds,
   showSeenBy = true,
+  onBack,
   className,
   style
 }) {
@@ -3491,13 +3705,13 @@ function CollabPanel({
   };
   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: [
+    return /* @__PURE__ */ jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles.errorState, children: [
       /* @__PURE__ */ jsx("p", { style: panelStyles.errorTitle, children: "Unable to load conversation" }),
       /* @__PURE__ */ jsx("p", { style: panelStyles.errorMessage, children: error })
     ] }) });
   }
   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: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
     showSettings && conversation ? /* @__PURE__ */ jsx(
@@ -3525,7 +3739,8 @@ function CollabPanel({
           patientData,
           participants,
           onOpenDicom: handleOpenDicom,
-          onOpenSettings: () => setShowSettings(true)
+          onOpenSettings: () => setShowSettings(true),
+          onBack
         }
       ),
       pinnedMessages.length > 0 && /* @__PURE__ */ jsx(
@@ -3583,7 +3798,7 @@ var panelStyles = {
     borderRadius: "8px",
     overflow: "hidden",
     border: "1px solid #e5e7eb",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+    fontFamily: FONT_STACK
   },
   loadingState: {
     display: "flex",
@@ -3642,6 +3857,7 @@ function ExpandIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+ensureGlobalStyles();
 var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function CollabPopup({
   orderId,
@@ -3649,6 +3865,7 @@ function CollabPopup({
   participantIds,
   isOpen,
   onClose,
+  onBack,
   initialPosition,
   width = 380,
   height = 520,
@@ -3742,7 +3959,7 @@ function CollabPopup({
     "div",
     {
       ref: containerRef,
-      className,
+      className: [ROOT_CLASS, className].filter(Boolean).join(" "),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId,
@@ -3758,7 +3975,18 @@ function CollabPopup({
       onMouseDown: handleMouseDown,
       children: [
         /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles13.titleBar, children: [
-          /* @__PURE__ */ jsx("span", { id: titleId, style: styles13.titleText, children: buildChannelName(patientData) }),
+          onBack && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onBack,
+              style: styles13.titleButton,
+              "aria-label": "Go back",
+              title: "Back",
+              type: "button",
+              children: "\u2190"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { id: titleId, style: { ...styles13.titleText, flex: 1 }, children: buildChannelName(patientData) }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -3800,7 +4028,8 @@ var styles13 = {
     flexDirection: "column",
     backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
-    transition: "height 0.2s ease"
+    transition: "height 0.2s ease",
+    fontFamily: FONT_STACK
   },
   titleBar: {
     display: "flex",
@@ -4045,8 +4274,8 @@ function useInlineCollab({
         await dispatchSend({
           body: "Voice message",
           type: "audio",
-          mediaUrl: url,
-          mediaDuration: duration
+          media_url: url,
+          media_duration: duration
         });
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to send voice message");
@@ -4072,6 +4301,7 @@ function useInlineCollab({
     containerRef
   };
 }
+ensureGlobalStyles();
 function CollabInline({
   orderId,
   patientData,
@@ -4094,9 +4324,9 @@ function CollabInline({
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
   if (isLoading && !hasConversation) {
-    return /* @__PURE__ */ jsx("div", { className, style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
+    return /* @__PURE__ */ jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: { ...styles14.container, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: [ROOT_CLASS, className].filter(Boolean).join(" "), 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(
@@ -4312,7 +4542,7 @@ var styles14 = {
     backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
     borderRadius: "8px",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+    fontFamily: FONT_STACK
   },
   loadingState: {
     padding: "8px",
@@ -4942,6 +5172,8 @@ var styles16 = {
     textAlign: "center"
   }
 };
+ensureGlobalStyles();
+var COMPACT_BREAKPOINT = 720;
 function CollabInbox({
   initialConversationId,
   onSelectConversation,
@@ -4951,34 +5183,55 @@ function CollabInbox({
 }) {
   const { conversations, isLoading, error } = useConversationList();
   const [selectedId, setSelectedId] = useState(initialConversationId ?? null);
+  const [isCompact, setIsCompact] = useState(
+    () => typeof window === "undefined" ? false : window.innerWidth < COMPACT_BREAKPOINT
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(max-width: ${COMPACT_BREAKPOINT - 1}px)`);
+    const sync = () => setIsCompact(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
   const selected = conversations.find((c) => c.id === selectedId) || null;
   const handleSelect = (item) => {
     setSelectedId(item.id);
     onSelectConversation?.(item);
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles17.container, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: styles17.sidebar, children: /* @__PURE__ */ jsx(
-      ConversationList,
-      {
-        conversations,
-        selectedId,
-        isLoading,
-        error,
-        onSelect: handleSelect,
-        title
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { style: styles17.main, children: selected ? /* @__PURE__ */ jsx(
-      CollabPanel,
-      {
-        orderId: selected.orderId,
-        patientData: buildPatientData(selected),
-        showSeenBy: true,
-        style: styles17.panel
-      },
-      selected.id
-    ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
-  ] });
+  const showDetail = !isCompact || isCompact && !!selected;
+  const showList = !isCompact || isCompact && !selected;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [ROOT_CLASS, className].filter(Boolean).join(" "),
+      style: { ...styles17.container, ...style },
+      children: [
+        showList && /* @__PURE__ */ jsx("div", { style: isCompact ? styles17.sidebarCompact : styles17.sidebar, children: /* @__PURE__ */ jsx(
+          ConversationList,
+          {
+            conversations,
+            selectedId,
+            isLoading,
+            error,
+            onSelect: handleSelect,
+            title
+          }
+        ) }),
+        showDetail && /* @__PURE__ */ jsx("div", { style: isCompact ? styles17.mainCompact : styles17.main, children: selected ? /* @__PURE__ */ jsx(
+          CollabPanel,
+          {
+            orderId: selected.orderId,
+            patientData: buildPatientData(selected),
+            showSeenBy: true,
+            style: styles17.panel,
+            onBack: isCompact ? () => setSelectedId(null) : void 0
+          },
+          selected.id
+        ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
+      ]
+    }
+  );
 }
 function buildPatientData(item) {
   if (item.patientSnapshot) return item.patientSnapshot;
@@ -5000,7 +5253,7 @@ var styles17 = {
     height: "100%",
     width: "100%",
     backgroundColor: "#ffffff",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+    fontFamily: FONT_STACK
   },
   sidebar: {
     width: "320px",
@@ -5009,6 +5262,12 @@ var styles17 = {
     display: "flex",
     flexDirection: "column"
   },
+  sidebarCompact: {
+    width: "100%",
+    flex: 1,
+    display: "flex",
+    flexDirection: "column"
+  },
   main: {
     flex: 1,
     display: "flex",
@@ -5017,6 +5276,13 @@ var styles17 = {
     padding: "12px",
     backgroundColor: "#f3f4f6"
   },
+  mainCompact: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    backgroundColor: "#f3f4f6"
+  },
   panel: {
     height: "100%",
     width: "100%"