@natoe/colab 0.1.12 → 0.1.14

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useLayoutEffect, useContext, useId, useMemo } from 'react';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useLayoutEffect, useEffect, useCallback, useState, useContext, useId, useMemo } from 'react';
 import { Socket, Presence } from 'phoenix';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -60,6 +60,13 @@ function toCamelKey(key) {
 var CollabSocket = class {
   constructor() {
     this.socket = null;
+    /**
+     * Conversation channels keyed by id. Each entry is reference-counted so
+     * multiple surfaces (e.g. inline chat + expanded panel mounted at once
+     * for the same conversation) can coexist without one's `leaveConversation`
+     * tearing the channel out from under the other. See `joinConversation`
+     * and the returned `ChannelSubscription.release`.
+     */
     this.channels = /* @__PURE__ */ new Map();
     this.presences = /* @__PURE__ */ new Map();
     this.userChannel = null;
@@ -130,59 +137,85 @@ var CollabSocket = class {
   onUnreadCountUpdate(callback) {
     this.onUnreadUpdate = callback;
   }
-  /** Join a conversation channel and subscribe to events */
+  /**
+   * Join a conversation channel and subscribe to events.
+   *
+   * Reference-counted: multiple callers can join the same conversation
+   * (e.g. inline preview + expanded panel mounted side-by-side). Each
+   * call binds its own listeners and gets back a `ChannelSubscription`.
+   * The underlying channel only `.leave()`s the server when the LAST
+   * subscriber calls `release()`.
+   */
   joinConversation(conversationId, callbacks) {
     if (!this.socket) return null;
-    if (this.channels.has(conversationId)) {
-      return this.channels.get(conversationId);
+    let entry = this.channels.get(conversationId);
+    if (!entry) {
+      const channel2 = this.socket.channel(`conversation:${conversationId}`, {});
+      channel2.join().receive("ok", () => {
+      }).receive("error", (reason) => {
+        this.config?.onError?.({
+          code: "CHANNEL_JOIN_ERROR",
+          message: `Failed to join conversation ${conversationId}`,
+          details: reason
+        });
+      });
+      entry = { channel: channel2, subscribers: 0, presence: null };
+      this.channels.set(conversationId, entry);
     }
-    const channel = this.socket.channel(`conversation:${conversationId}`, {});
+    const channel = entry.channel;
+    const refs = [];
+    const bind = (event, fn) => {
+      const ref = channel.on(event, fn);
+      refs.push({ event, ref });
+    };
     if (callbacks.onMessage) {
-      channel.on(EVENTS.MESSAGE_NEW, (payload) => {
+      bind(EVENTS.MESSAGE_NEW, (payload) => {
         callbacks.onMessage(snakeToCamel(payload));
       });
     }
     if (callbacks.onTyping) {
-      channel.on(EVENTS.USER_TYPING, (payload) => {
+      bind(EVENTS.USER_TYPING, (payload) => {
         callbacks.onTyping(snakeToCamel(payload));
       });
     }
     if (callbacks.onUserJoined) {
-      channel.on(EVENTS.USER_JOINED, (payload) => {
+      bind(EVENTS.USER_JOINED, (payload) => {
         callbacks.onUserJoined(snakeToCamel(payload));
       });
     }
     if (callbacks.onUserLeft) {
-      channel.on(EVENTS.USER_LEFT, (payload) => {
+      bind(EVENTS.USER_LEFT, (payload) => {
         callbacks.onUserLeft(snakeToCamel(payload));
       });
     }
     if (callbacks.onChannelUpdated) {
-      channel.on(EVENTS.CHANNEL_UPDATED, (payload) => {
+      bind(EVENTS.CHANNEL_UPDATED, (payload) => {
         callbacks.onChannelUpdated(snakeToCamel(payload));
       });
     }
     if (callbacks.onChannelDeleted) {
-      channel.on(EVENTS.CHANNEL_DELETED, () => {
+      bind(EVENTS.CHANNEL_DELETED, () => {
         callbacks.onChannelDeleted();
       });
     }
     if (callbacks.onMessageRead) {
-      channel.on(EVENTS.MESSAGE_READ, (payload) => {
-        callbacks.onMessageRead(snakeToCamel(payload));
+      bind(EVENTS.MESSAGE_READ, (payload) => {
+        callbacks.onMessageRead(
+          snakeToCamel(payload)
+        );
       });
     }
     if (callbacks.onMessagePinned) {
-      channel.on(EVENTS.MESSAGE_PINNED, (payload) => {
+      bind(EVENTS.MESSAGE_PINNED, (payload) => {
         callbacks.onMessagePinned(snakeToCamel(payload));
       });
     }
     if (callbacks.onMessageUnpinned) {
-      channel.on(EVENTS.MESSAGE_UNPINNED, (payload) => {
+      bind(EVENTS.MESSAGE_UNPINNED, (payload) => {
         callbacks.onMessageUnpinned(snakeToCamel(payload));
       });
     }
-    if (callbacks.onPresence) {
+    if (callbacks.onPresence && !entry.presence) {
       const presence = new Presence(channel);
       presence.onSync(() => {
         const online = {};
@@ -191,27 +224,45 @@ var CollabSocket = class {
         });
         callbacks.onPresence(online);
       });
+      entry.presence = presence;
       this.presences.set(conversationId, presence);
     }
-    channel.join().receive("ok", () => {
-    }).receive("error", (reason) => {
-      this.config?.onError?.({
-        code: "CHANNEL_JOIN_ERROR",
-        message: `Failed to join conversation ${conversationId}`,
-        details: reason
-      });
-    });
-    this.channels.set(conversationId, channel);
-    return channel;
+    entry.subscribers += 1;
+    let released = false;
+    const release = () => {
+      if (released) return;
+      released = true;
+      const current = this.channels.get(conversationId);
+      if (!current) return;
+      for (const { event, ref } of refs) {
+        current.channel.off(event, ref);
+      }
+      current.subscribers -= 1;
+      if (current.subscribers <= 0) {
+        current.channel.leave();
+        this.channels.delete(conversationId);
+        this.presences.delete(conversationId);
+      }
+    };
+    return { channel, release };
   }
-  /** Leave a conversation channel */
-  leaveConversation(conversationId) {
-    const channel = this.channels.get(conversationId);
-    if (channel) {
-      channel.leave();
-      this.channels.delete(conversationId);
-      this.presences.delete(conversationId);
-    }
+  /**
+   * @deprecated Use the `release()` method returned by `joinConversation()`.
+   * Kept as a no-op so older callers don't throw — but it cannot identify
+   * which subscriber should leave, so it silently does nothing. Any code
+   * still calling this will leak listeners and prevent the channel from
+   * ever being torn down. Migrate to the subscription handle.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  leaveConversation(_conversationId) {
+  }
+  /**
+   * Look up the underlying Phoenix Channel for a conversation, if any
+   * subscriber is still holding it. All send/push paths go through this
+   * helper so the refcounted entry shape is contained to joinConversation.
+   */
+  getChannel(conversationId) {
+    return this.channels.get(conversationId)?.channel ?? null;
   }
   /** Send a message to a conversation.
    *
@@ -223,7 +274,7 @@ var CollabSocket = class {
    */
   sendMessage(conversationId, payload) {
     return new Promise((resolve, reject) => {
-      const channel = this.channels.get(conversationId);
+      const channel = this.getChannel(conversationId);
       if (!channel) {
         reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
         return;
@@ -246,7 +297,7 @@ var CollabSocket = class {
   }
   /** Broadcast typing indicator */
   sendTyping(conversationId, isTyping) {
-    const channel = this.channels.get(conversationId);
+    const channel = this.getChannel(conversationId);
     channel?.push(EVENTS.USER_TYPING, {
       userId: this.config?.userId,
       userName: this.config?.userName,
@@ -255,7 +306,7 @@ var CollabSocket = class {
   }
   /** Mark messages as read */
   markAsRead(conversationId, messageId) {
-    const channel = this.channels.get(conversationId);
+    const channel = this.getChannel(conversationId);
     channel?.push(EVENTS.MESSAGE_READ, {
       messageId,
       userId: this.config?.userId
@@ -289,7 +340,7 @@ var CollabSocket = class {
   /** Generic push with promise wrapper */
   channelPush(conversationId, event, payload) {
     return new Promise((resolve, reject) => {
-      const channel = this.channels.get(conversationId);
+      const channel = this.getChannel(conversationId);
       if (!channel) {
         reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
         return;
@@ -306,7 +357,7 @@ var CollabSocket = class {
   }
   /** Disconnect socket and leave all channels */
   disconnect() {
-    this.channels.forEach((channel) => channel.leave());
+    this.channels.forEach((entry) => entry.channel.leave());
     this.channels.clear();
     this.presences.clear();
     this.userChannel?.leave();
@@ -315,6 +366,203 @@ var CollabSocket = class {
     this.config = null;
   }
 };
+
+// src/core/theme.ts
+var FONT_SIZE = {
+  xs: "12px",
+  sm: "13px",
+  md: "15px",
+  lg: "17px",
+  xxl: "28px"
+};
+var FONT_WEIGHT = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var LINE_HEIGHT = {
+  tight: 1.3,
+  normal: 1.45};
+var SPACE = {
+  S1: "4px",
+  S2: "8px",
+  S3: "12px",
+  S4: "16px",
+  S5: "20px",
+  S6: "24px",
+  S12: "48px"
+};
+var RADIUS = {
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  pill: "9999px",
+  full: "50%"
+};
+var THEME_VAR = {
+  primary: "--natoe-colab-primary",
+  primaryHover: "--natoe-colab-primary-hover",
+  primaryBg: "--natoe-colab-primary-bg",
+  primaryFg: "--natoe-colab-primary-fg",
+  success: "--natoe-colab-success",
+  warning: "--natoe-colab-warning",
+  danger: "--natoe-colab-danger",
+  dangerBg: "--natoe-colab-danger-bg",
+  dangerBorder: "--natoe-colab-danger-border",
+  dangerFg: "--natoe-colab-danger-fg",
+  fontStack: "--natoe-colab-font-stack",
+  // Neutral surface palette — promoted to CSS vars so consumers (e.g.
+  // CollabPanel themeMode='dark') can flip the whole grayscale at a subtree
+  // level without re-themeing every component.
+  white: "--natoe-colab-white",
+  neutral50: "--natoe-colab-neutral-50",
+  neutral100: "--natoe-colab-neutral-100",
+  neutral200: "--natoe-colab-neutral-200",
+  neutral300: "--natoe-colab-neutral-300",
+  neutral400: "--natoe-colab-neutral-400",
+  neutral500: "--natoe-colab-neutral-500",
+  neutral600: "--natoe-colab-neutral-600",
+  neutral700: "--natoe-colab-neutral-700",
+  neutral800: "--natoe-colab-neutral-800",
+  neutral900: "--natoe-colab-neutral-900"
+};
+var THEME_DEFAULTS = {
+  primary: "#2563eb",
+  primaryHover: "#1d4ed8",
+  primaryBg: "#dbeafe",
+  primaryFg: "#1d4ed8",
+  success: "#059669",
+  warning: "#d97706",
+  danger: "#dc2626",
+  dangerBg: "#fef2f2",
+  dangerBorder: "#fecaca",
+  dangerFg: "#b91c1c",
+  fontStack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  // Neutral grayscale — these defaults are the same hex literals the
+  // package shipped with; they're now overridable per-subtree.
+  white: "#ffffff",
+  neutral50: "#f9fafb",
+  neutral100: "#f3f4f6",
+  neutral200: "#e5e7eb",
+  neutral300: "#d1d5db",
+  neutral400: "#9ca3af",
+  neutral500: "#6b7280",
+  neutral600: "#4b5563",
+  neutral700: "#374151",
+  neutral800: "#1f2937",
+  neutral900: "#111827"
+};
+var cssVar = (name, fallback) => `var(${name}, ${fallback})`;
+var COLOR = {
+  // Brand — themeable
+  primary: cssVar(THEME_VAR.primary, THEME_DEFAULTS.primary),
+  primaryHover: cssVar(THEME_VAR.primaryHover, THEME_DEFAULTS.primaryHover),
+  /** Tinted surface for chips/cards on brand-coloured states. */
+  primaryBg: cssVar(THEME_VAR.primaryBg, THEME_DEFAULTS.primaryBg),
+  primaryFg: cssVar(THEME_VAR.primaryFg, THEME_DEFAULTS.primaryFg),
+  // Neutral grayscale — themeable via CSS variables. Light-mode defaults
+  // taken from Tailwind's zinc-leaning slate to match the package's
+  // existing tonal balance; a host can override the entire palette by
+  // setting --natoe-colab-* values on any ancestor element (used by
+  // CollabPanel themeMode='dark' for the viewer's left-panel surface).
+  white: cssVar(THEME_VAR.white, THEME_DEFAULTS.white),
+  neutral50: cssVar(THEME_VAR.neutral50, THEME_DEFAULTS.neutral50),
+  neutral100: cssVar(THEME_VAR.neutral100, THEME_DEFAULTS.neutral100),
+  neutral200: cssVar(THEME_VAR.neutral200, THEME_DEFAULTS.neutral200),
+  neutral300: cssVar(THEME_VAR.neutral300, THEME_DEFAULTS.neutral300),
+  neutral400: cssVar(THEME_VAR.neutral400, THEME_DEFAULTS.neutral400),
+  neutral500: cssVar(THEME_VAR.neutral500, THEME_DEFAULTS.neutral500),
+  neutral600: cssVar(THEME_VAR.neutral600, THEME_DEFAULTS.neutral600),
+  neutral700: cssVar(THEME_VAR.neutral700, THEME_DEFAULTS.neutral700),
+  neutral800: cssVar(THEME_VAR.neutral800, THEME_DEFAULTS.neutral800),
+  neutral900: cssVar(THEME_VAR.neutral900, THEME_DEFAULTS.neutral900),
+  slate800: "#1e293b",
+  // Semantic — themeable
+  success: cssVar(THEME_VAR.success, THEME_DEFAULTS.success),
+  warning: cssVar(THEME_VAR.warning, THEME_DEFAULTS.warning),
+  danger: cssVar(THEME_VAR.danger, THEME_DEFAULTS.danger),
+  dangerBg: cssVar(THEME_VAR.dangerBg, THEME_DEFAULTS.dangerBg),
+  dangerBorder: cssVar(THEME_VAR.dangerBorder, THEME_DEFAULTS.dangerBorder),
+  dangerFg: cssVar(THEME_VAR.dangerFg, THEME_DEFAULTS.dangerFg)
+};
+var SIZE = {
+  /** Default interactive height (text buttons, list rows). */
+  control: "40px",
+  /** Square icon-only buttons inside chrome (popup title, menu trigger). */
+  controlIcon: "36px"};
+var SHADOW = {
+  /** Cards / floating popovers (message-actions menu). */
+  popover: "0 6px 18px rgba(0, 0, 0, 0.12)",
+  toast: "0 4px 12px rgba(0, 0, 0, 0.18)"
+};
+var Z_INDEX = {
+  /** Sticky day divider — above bubbles, below interactive popovers. */
+  sticky: 1,
+  /** Toasts inside a panel. */
+  toast: 20,
+  /** Floating CollabPopup dialog. */
+  dialog: 9999,
+  /** Portaled message-actions menu — must sit above the dialog. */
+  menu: 1e4
+};
+
+// src/core/styles.ts
+var FONT_STACK = `var(${THEME_VAR.fontStack}, ${THEME_DEFAULTS.fontStack})`;
+var ROOT_CLASS = "natoe-colab-root";
+var GLOBAL_STYLE_ID = "natoe-colab-global-styles";
+var ROOT_DEFAULTS_BLOCK = Object.keys(THEME_DEFAULTS).map((key) => `  ${THEME_VAR[key]}: ${THEME_DEFAULTS[key]};`).join("\n");
+var GLOBAL_CSS = `
+:root {
+${ROOT_DEFAULTS_BLOCK}
+}
+
+@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);
+}
+function applyThemeOverrides(theme) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  Object.keys(THEME_VAR).forEach((key) => {
+    const value = theme?.[key];
+    if (value) {
+      root.style.setProperty(THEME_VAR[key], value);
+    } else {
+      root.style.removeProperty(THEME_VAR[key]);
+    }
+  });
+}
 var CollabContext = createContext(null);
 function useCollab() {
   const context = useContext(CollabContext);
@@ -333,6 +581,9 @@ function CollabProvider({ config, apiBaseUrl, children }) {
   const pendingResolvers = useRef(/* @__PURE__ */ new Map());
   const previewCache = useRef(/* @__PURE__ */ new Map());
   const batchScheduled = useRef(false);
+  useEffect(() => {
+    applyThemeOverrides(config.theme);
+  }, [config.theme]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     let s = socket;
@@ -548,6 +799,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
         config,
         apiBaseUrl,
         totalUnread,
+        unreadCounts,
         requestPreview,
         invalidatePreview,
         fetchMessages,
@@ -604,6 +856,7 @@ function useConversation({
   const [isConnected, setIsConnected] = useState(false);
   const [replyTo, setReplyTo] = useState(null);
   const joinedConversationId = useRef(null);
+  const channelSubscription = useRef(null);
   const typingTimers = useRef(/* @__PURE__ */ new Map());
   const ensureConversationInFlight = useRef(null);
   const markedReadIdsRef = useRef(/* @__PURE__ */ new Set());
@@ -617,7 +870,9 @@ function useConversation({
   const joinChannel = useCallback(
     (conv) => {
       if (joinedConversationId.current === conv.id) return;
-      socket.joinConversation(conv.id, {
+      channelSubscription.current?.release();
+      channelSubscription.current = null;
+      const subscription = socket.joinConversation(conv.id, {
         // Dedupe by id so an optimistic message (added client-side on send)
         // doesn't double up when the server's broadcast arrives.
         onMessage: (msg) => setMessages((prev) => {
@@ -667,6 +922,8 @@ function useConversation({
         onChannelDeleted: () => {
           setConversation(null);
           setMessages([]);
+          channelSubscription.current?.release();
+          channelSubscription.current = null;
           joinedConversationId.current = null;
           setIsConnected(false);
         },
@@ -692,6 +949,7 @@ function useConversation({
           );
         }
       });
+      channelSubscription.current = subscription;
       joinedConversationId.current = conv.id;
       setIsConnected(true);
     },
@@ -725,26 +983,22 @@ function useConversation({
         setConversation(existingConv);
         setParticipants(preview.participants);
         joinChannel(existingConv);
-        setMessages(preview.lastMessages);
-        setHasMore(preview.messageCount > preview.lastMessages.length);
-        setPinnedMessages(preview.lastMessages.filter((m) => m.isPinned));
-        setIsLoading(false);
         if (loadHistory) {
           fetchMessages(preview.conversationId).then((history) => {
             if (cancelled) return;
-            setMessages((prev) => {
-              const seen = new Set(prev.map((m) => m.id));
-              const older = history.filter((m) => !seen.has(m.id));
-              return [...older, ...prev];
-            });
-            setHasMore(history.length > 0);
-            setPinnedMessages((prev) => {
-              const fromHistory = history.filter((m) => m.isPinned);
-              const seen = new Set(prev.map((m) => m.id));
-              return [...fromHistory.filter((m) => !seen.has(m.id)), ...prev];
-            });
+            setMessages(history);
+            setHasMore(history.length >= MESSAGES_PAGE_SIZE);
+            setPinnedMessages(history.filter((m) => m.isPinned));
+            setIsLoading(false);
           }).catch(() => {
+            if (cancelled) return;
+            setIsLoading(false);
           });
+        } else {
+          setMessages([]);
+          setHasMore(false);
+          setPinnedMessages([]);
+          setIsLoading(false);
         }
       } catch (err) {
         if (cancelled) return;
@@ -756,10 +1010,9 @@ function useConversation({
     init();
     return () => {
       cancelled = true;
-      if (joinedConversationId.current) {
-        socket.leaveConversation(joinedConversationId.current);
-        joinedConversationId.current = null;
-      }
+      channelSubscription.current?.release();
+      channelSubscription.current = null;
+      joinedConversationId.current = null;
       typingTimers.current.forEach((timer) => clearTimeout(timer));
       typingTimers.current.clear();
       markedReadIdsRef.current.clear();
@@ -825,7 +1078,7 @@ function useConversation({
       const payload = {
         body,
         type: "text",
-        ...replyTo ? { replyToId: replyTo.id } : {}
+        ...replyTo ? { reply_to_id: replyTo.id } : {}
       };
       const { conv, persistedByCreate } = await ensureConversation(payload);
       setReplyTo(null);
@@ -878,7 +1131,7 @@ function useConversation({
       const payload = {
         body: target.body,
         type: "text",
-        ...target.replyToId ? { replyToId: target.replyToId } : {}
+        ...target.replyToId ? { reply_to_id: target.replyToId } : {}
       };
       try {
         await socket.sendMessage(conversation.id, payload);
@@ -1175,17 +1428,26 @@ function DicomIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function SettingsIcon({ size = 18, color = "currentColor" }) {
-  return /* @__PURE__ */ jsx(
+function PeopleIcon({ 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,
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       "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" })
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+      ]
     }
   );
 }
@@ -1203,102 +1465,6 @@ function BackIcon({ size = 22, color = "currentColor" }) {
     }
   );
 }
-
-// src/core/theme.ts
-var FONT_SIZE = {
-  xs: "12px",
-  sm: "13px",
-  md: "15px",
-  lg: "17px",
-  xxl: "28px"
-};
-var FONT_WEIGHT = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-var LINE_HEIGHT = {
-  tight: 1.3,
-  normal: 1.45};
-var SPACE = {
-  S1: "4px",
-  S2: "8px",
-  S3: "12px",
-  S4: "16px",
-  S5: "20px",
-  S6: "24px",
-  S12: "48px"
-};
-var RADIUS = {
-  sm: "4px",
-  md: "8px",
-  lg: "12px",
-  pill: "9999px",
-  full: "50%"
-};
-var COLOR = {
-  // Brand
-  primary: "#2563eb",
-  /** Tinted surface for chips/cards on brand-coloured states. */
-  primaryBg: "#dbeafe",
-  primaryFg: "#1d4ed8",
-  // Neutral grayscale — taken from Tailwind's zinc-leaning slate, the
-  // existing dominant family in the package.
-  white: "#ffffff",
-  neutral50: "#f9fafb",
-  neutral100: "#f3f4f6",
-  neutral200: "#e5e7eb",
-  neutral300: "#d1d5db",
-  neutral400: "#9ca3af",
-  neutral500: "#6b7280",
-  neutral600: "#4b5563",
-  neutral700: "#374151",
-  neutral800: "#1f2937",
-  neutral900: "#111827",
-  // Slate (used by day dividers + dialog title bar)
-  slate200: "#e2e8f0",
-  slate700: "#334155",
-  slate800: "#1e293b",
-  // Semantic
-  success: "#059669",
-  warning: "#d97706",
-  danger: "#dc2626",
-  dangerBg: "#fef2f2",
-  dangerBorder: "#fecaca",
-  dangerFg: "#b91c1c"
-};
-var SIZE = {
-  /** Default interactive height (text buttons, list rows). */
-  control: "40px",
-  /** Square icon-only buttons inside chrome (popup title, menu trigger). */
-  controlIcon: "36px",
-  /** Primary input controls (textarea send/attach). 44px = WCAG min. */
-  controlPrimary: "44px",
-  /** Avatar in the inbox row. */
-  avatar: "40px",
-  /** Unread dot. */
-  dot: "10px"
-};
-var SHADOW = {
-  /** Cards / floating popovers (message-actions menu). */
-  popover: "0 6px 18px rgba(0, 0, 0, 0.12)",
-  /** Dialog (CollabPopup). */
-  dialog: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
-  /** Subtle separator shadow (sticky day divider, toast). */
-  subtle: "0 1px 2px rgba(0, 0, 0, 0.04)",
-  toast: "0 4px 12px rgba(0, 0, 0, 0.18)"
-};
-var Z_INDEX = {
-  /** Sticky day divider — above bubbles, below interactive popovers. */
-  sticky: 1,
-  /** Toasts inside a panel. */
-  toast: 20,
-  /** Floating CollabPopup dialog. */
-  dialog: 9999,
-  /** Portaled message-actions menu — must sit above the dialog. */
-  menu: 1e4
-};
 function resolveDisplayName(patientData, displayName) {
   const localComplete = !!patientData.labName && !!patientData.displayOrderId;
   if (localComplete) return buildChannelName(patientData);
@@ -1306,6 +1472,7 @@ function resolveDisplayName(patientData, displayName) {
 }
 function PatientHeader({
   patientData,
+  participants,
   onOpenDicom,
   onOpenSettings,
   onBack,
@@ -1315,15 +1482,28 @@ function PatientHeader({
 }) {
   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.patientAge && patientData.patientSex) {
+    meta.push({
+      key: "ageSex",
+      label: "Age / Sex",
+      value: `${patientData.patientAge} \xB7 ${patientData.patientSex}`
+    });
+  } else if (patientData.patientAge) {
+    meta.push({ key: "age", label: "Age", value: String(patientData.patientAge) });
+  } else if (patientData.patientSex) {
+    meta.push({ key: "sex", label: "Sex", value: String(patientData.patientSex) });
+  }
+  if (patientData.studyType) {
+    meta.push({ key: "modality", label: "Modality", value: patientData.studyType });
   }
-  if (patientData.referringPhysician) {
-    meta.push({ label: "Ref", value: patientData.referringPhysician });
+  if (patientData.bodyParts && patientData.bodyParts.length > 0) {
+    meta.push({
+      key: "body",
+      label: "Body part",
+      value: patientData.bodyParts.join(", ")
+    });
   }
+  const hasActions = hasDicom && onOpenDicom || onOpenSettings;
   return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
     !hideName && /* @__PURE__ */ jsxs("div", { style: styles.nameRow, children: [
       onBack && /* @__PURE__ */ jsx(
@@ -1339,54 +1519,58 @@ function PatientHeader({
       ),
       /* @__PURE__ */ jsx("span", { style: styles.nameText, children: resolveDisplayName(patientData, displayName) })
     ] }),
-    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: COLOR.white }),
-            /* @__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: COLOR.neutral700 }),
-            /* @__PURE__ */ jsx("span", { children: "Settings" })
-          ]
-        }
-      )
-    ] }) : null
+    /* @__PURE__ */ jsxs("div", { style: styles.caseCard, children: [
+      meta.length > 0 && /* @__PURE__ */ jsx("div", { style: styles.metaRow, children: meta.map((item) => /* @__PURE__ */ jsxs("div", { style: styles.metaCol, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.metaLabel, children: item.label }),
+        /* @__PURE__ */ jsx("span", { style: styles.metaValue, children: item.value })
+      ] }, item.key)) }),
+      hasActions && /* @__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: COLOR.primary }),
+              /* @__PURE__ */ jsx("span", { children: "View DICOM" })
+            ]
+          }
+        ),
+        onOpenSettings && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onOpenSettings,
+            style: styles.settingsIconButton,
+            type: "button",
+            "aria-label": `Open channel settings (${participants.length} participants)`,
+            title: "Channel participants",
+            children: [
+              /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+              /* @__PURE__ */ jsx("span", { style: styles.participantCount, children: participants.length })
+            ]
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 var styles = {
   container: {
-    padding: `${SPACE.S3} ${SPACE.S4}`,
-    borderBottom: `1px solid ${COLOR.neutral200}`,
-    backgroundColor: COLOR.neutral50
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: COLOR.primaryBg,
+    borderBottom: `1px solid ${COLOR.neutral200}`
   },
+  // Optional name row, only when `hideName` is false (compact-inbox path)
   nameRow: {
     display: "flex",
     alignItems: "center",
-    gap: SPACE.S2
+    gap: SPACE.S2,
+    padding: `${SPACE.S3} ${SPACE.S4} ${SPACE.S2}`,
+    borderBottom: `1px solid ${COLOR.neutral200}`,
+    backgroundColor: COLOR.white
   },
   backButton: {
     width: SIZE.controlIcon,
@@ -1403,65 +1587,98 @@ var styles = {
   },
   nameText: {
     fontSize: FONT_SIZE.lg,
-    fontWeight: FONT_WEIGHT.semibold,
+    fontWeight: FONT_WEIGHT.bold,
     color: COLOR.neutral900,
     lineHeight: LINE_HEIGHT.tight,
+    letterSpacing: "-0.01em",
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  // Case card: meta columns flowing in a wrap-row, actions stacked
+  // below. Each meta column is a small label-above-value pair so the
+  // user can scan field names quickly without a legend.
+  caseCard: {
+    display: "flex",
+    flexDirection: "column",
+    gap: SPACE.S3,
+    padding: `${SPACE.S3} ${SPACE.S5}`
+  },
+  // Wrap-row of stacked label/value columns. Compact column gap keeps
+  // the row dense without crowding; row gap kicks in when columns
+  // wrap to a second line on narrow popups.
   metaRow: {
     display: "flex",
     flexWrap: "wrap",
-    columnGap: SPACE.S3,
-    rowGap: SPACE.S1,
-    marginTop: SPACE.S1
+    columnGap: SPACE.S5,
+    rowGap: SPACE.S2,
+    minWidth: 0
   },
-  metaItem: {
-    fontSize: FONT_SIZE.sm,
-    color: COLOR.neutral700,
-    whiteSpace: "nowrap"
+  metaCol: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0
   },
   metaLabel: {
+    fontSize: "11px",
+    fontWeight: FONT_WEIGHT.bold,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase",
     color: COLOR.neutral500,
-    fontWeight: FONT_WEIGHT.medium
+    whiteSpace: "nowrap"
   },
   metaValue: {
-    color: COLOR.neutral900
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral900,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "180px"
   },
   actions: {
     display: "flex",
     gap: SPACE.S2,
-    marginTop: SPACE.S3
+    flexShrink: 0
   },
   dicomButton: {
     display: "inline-flex",
     alignItems: "center",
     gap: SPACE.S2,
     minHeight: SIZE.control,
-    padding: `${SPACE.S2} ${SPACE.S4}`,
+    padding: `${SPACE.S2} 14px`,
     fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.medium,
-    color: COLOR.white,
-    backgroundColor: COLOR.primary,
-    border: "none",
-    borderRadius: RADIUS.md,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.primary,
+    backgroundColor: COLOR.white,
+    border: `1.5px solid ${COLOR.primary}`,
+    borderRadius: RADIUS.lg,
     cursor: "pointer"
   },
-  settingsButton: {
+  // Channel-info button: people icon + participant count. Click opens the
+  // channel settings overlay (kept on the same handler as before so hosts
+  // don't have to re-wire — the affordance just looks like a "members"
+  // pill now instead of a gear).
+  settingsIconButton: {
+    minHeight: SIZE.control,
     display: "inline-flex",
     alignItems: "center",
     gap: SPACE.S2,
-    minHeight: SIZE.control,
-    padding: `${SPACE.S2} ${SPACE.S4}`,
+    padding: `0 ${SPACE.S3}`,
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.lg,
+    color: COLOR.neutral600,
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  participantCount: {
     fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.medium,
+    fontWeight: FONT_WEIGHT.semibold,
     color: COLOR.neutral700,
-    backgroundColor: COLOR.white,
-    border: `1px solid ${COLOR.neutral300}`,
-    borderRadius: RADIUS.md,
-    cursor: "pointer"
+    fontVariantNumeric: "tabular-nums"
   }
 };
 function ReplyQuoteBlock({
@@ -1470,10 +1687,10 @@ function ReplyQuoteBlock({
   onClick,
   className
 }) {
-  const baseBg = inOwnBubble ? "rgba(255,255,255,0.18)" : COLOR.neutral100;
+  const baseBg = inOwnBubble ? "rgba(255,255,255,0.22)" : COLOR.white;
   const barColor = inOwnBubble ? COLOR.white : COLOR.primary;
   const nameColor = inOwnBubble ? COLOR.white : COLOR.primary;
-  const bodyColor = inOwnBubble ? "rgba(255,255,255,0.85)" : COLOR.neutral600;
+  const bodyColor = inOwnBubble ? "rgba(255,255,255,0.9)" : COLOR.neutral700;
   const preview = renderSnapshotPreview(snapshot);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1845,43 +2062,50 @@ var styles4 = {
     position: "relative",
     display: "inline-block"
   },
+  // Pill-shaped trigger matching the prototype's `.nc-msg-act` style —
+  // always visible (touch-friendly) rather than hover-only.
   trigger: {
-    width: SIZE.controlIcon,
-    height: SIZE.controlIcon,
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "transparent",
-    border: "none",
-    borderRadius: RADIUS.full,
+    width: "32px",
+    height: "32px",
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: "999px",
     cursor: "pointer",
-    color: COLOR.neutral600
+    color: COLOR.neutral600,
+    transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
   },
   menu: {
     position: "fixed",
-    minWidth: "160px",
+    minWidth: "200px",
     backgroundColor: COLOR.white,
-    border: `1px solid ${COLOR.neutral200}`,
-    borderRadius: RADIUS.md,
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.lg,
     boxShadow: SHADOW.popover,
-    padding: SPACE.S1,
+    padding: "6px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
     // Above the floating popup (z-index dialog) but below any future modal.
     zIndex: Z_INDEX.menu
   },
   item: {
     display: "flex",
     alignItems: "center",
-    gap: SPACE.S3,
+    gap: SPACE.S2,
     width: "100%",
     minHeight: SIZE.control,
-    padding: `${SPACE.S2} ${SPACE.S3}`,
+    padding: `10px ${SPACE.S3}`,
     fontSize: FONT_SIZE.sm,
-    color: COLOR.neutral900,
+    color: COLOR.neutral700,
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: RADIUS.sm,
+    borderRadius: RADIUS.md,
     cursor: "pointer",
-    textAlign: "left"
+    textAlign: "left",
+    fontFamily: "inherit"
   },
   itemDisabled: {
     color: COLOR.neutral400,
@@ -1995,71 +2219,116 @@ function MessageBubble({
       },
       children: [
         isOwn && actionsSlot,
-        /* @__PURE__ */ jsx("div", { style: styles5.bubbleWrapper, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              ...styles5.bubble,
-              ...isOwn ? styles5.ownBubble : styles5.otherBubble
-            },
-            children: [
-              message.isPinned && /* @__PURE__ */ jsxs("div", { style: styles5.pinnedBadge, children: [
-                /* @__PURE__ */ jsx(PinIcon, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: "Pinned" })
-              ] }),
-              message.replyToSnapshot && /* @__PURE__ */ jsx(
-                ReplyQuoteBlock,
-                {
-                  snapshot: message.replyToSnapshot,
-                  inOwnBubble: isOwn,
-                  onClick: onReplyJumpTo
-                }
-              ),
-              !isOwn && /* @__PURE__ */ jsxs("div", { style: styles5.senderRow, children: [
-                /* @__PURE__ */ jsx("span", { style: styles5.senderName, children: message.senderName }),
-                /* @__PURE__ */ jsx(RoleBadge, { role: message.senderRole })
-              ] }),
-              message.type === "text" && /* @__PURE__ */ jsx(TextContent, { body: message.body, onDeepLinkClick }),
-              message.type === "audio" && /* @__PURE__ */ jsx(AudioContent, { mediaUrl: message.mediaUrl, duration: message.mediaDuration }),
-              message.type === "image" && /* @__PURE__ */ jsx(ImageContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
-              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) }),
-              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",
+        /* @__PURE__ */ jsxs("div", { style: styles5.bubbleWrapper, children: [
+          !isOwn && /* @__PURE__ */ jsxs("div", { style: styles5.authorRow, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  ...styles5.authorAvatar,
+                  backgroundColor: roleColor(message.senderRole)
+                },
+                "aria-hidden": "true",
+                children: computeInitials(message.senderName)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: styles5.authorName, children: message.senderName }),
+            /* @__PURE__ */ jsx(RoleBadge, { role: message.senderRole })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                ...styles5.bubble,
+                ...isOwn ? styles5.ownBubble : styles5.otherBubble
+              },
+              children: [
+                message.isPinned && /* @__PURE__ */ jsxs(
+                  "div",
                   {
-                    type: "button",
-                    onClick: () => onRetry(message.id),
-                    style: styles5.retryButton,
-                    "aria-label": "Retry sending message",
-                    children: "Retry"
+                    style: {
+                      ...styles5.pinnedBadge,
+                      ...isOwn ? styles5.pinnedBadgeOwn : styles5.pinnedBadgeOther
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(PinIcon, { size: 12 }),
+                      /* @__PURE__ */ jsx("span", { children: "Pinned" })
+                    ]
                   }
-                )
-              ] }),
-              showSeenBy && isOwn && !message.status && /* @__PURE__ */ jsx(
-                SeenByIndicator,
-                {
-                  readBy: message.readBy ?? [],
-                  participants,
-                  currentUserId,
-                  senderId: message.senderId
-                }
-              )
-            ]
-          }
-        ) }),
+                ),
+                message.replyToSnapshot && /* @__PURE__ */ jsx(
+                  ReplyQuoteBlock,
+                  {
+                    snapshot: message.replyToSnapshot,
+                    inOwnBubble: isOwn,
+                    onClick: onReplyJumpTo
+                  }
+                ),
+                message.type === "text" && /* @__PURE__ */ jsx(TextContent, { body: message.body, onDeepLinkClick }),
+                message.type === "audio" && /* @__PURE__ */ jsx(AudioContent, { mediaUrl: message.mediaUrl, duration: message.mediaDuration }),
+                message.type === "image" && /* @__PURE__ */ jsx(ImageContent, { mediaUrl: message.mediaUrl, fileName: message.fileName }),
+                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__ */ jsxs("div", { style: styles5.bubbleFoot, children: [
+                  /* @__PURE__ */ jsx("span", { style: styles5.timestamp, children: formatTime(message.insertedAt) }),
+                  isOwn && message.status === "sending" && /* @__PURE__ */ jsxs("span", { style: styles5.footStatus, children: [
+                    /* @__PURE__ */ jsx(Spinner, { size: 11, color: "rgba(255,255,255,0.85)" }),
+                    /* @__PURE__ */ jsx("span", { children: "Sending\u2026" })
+                  ] }),
+                  isOwn && message.status === "failed" && /* @__PURE__ */ jsxs("span", { style: styles5.footStatusFailed, children: [
+                    /* @__PURE__ */ jsx(AlertIcon, { size: 11, color: "#fecaca" }),
+                    /* @__PURE__ */ jsx("span", { 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 ?? [],
+                      participants,
+                      currentUserId,
+                      senderId: message.senderId
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
         !isOwn && actionsSlot
       ]
     }
   );
 }
+function computeInitials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
+}
+function roleColor(role) {
+  switch (role) {
+    case "radiologist":
+      return "#4f46e5";
+    // indigo (blue-leaning)
+    case "lab":
+      return "#2563eb";
+    // brand blue
+    case "physician":
+      return "#0284c7";
+    // sky
+    case "admin":
+      return "#64748b";
+    // slate (muted)
+    default:
+      return "#6b7280";
+  }
+}
 function TextContent({ body, onDeepLinkClick }) {
   if (body.includes(DEEP_LINK_PREFIX)) {
     const parts = body.split(new RegExp(`(${escapeRegex2(DEEP_LINK_PREFIX)}[\\w/.-]+)`, "g"));
@@ -2121,19 +2390,13 @@ function DeepLinkContent({
   );
 }
 function SystemBubble({ message }) {
-  return /* @__PURE__ */ jsxs("div", { style: styles5.systemMessage, children: [
+  return /* @__PURE__ */ jsx("div", { style: styles5.systemWrapper, children: /* @__PURE__ */ jsxs("span", { style: styles5.systemPill, children: [
     /* @__PURE__ */ jsx("span", { children: message.body }),
     /* @__PURE__ */ jsx("span", { style: styles5.systemTime, children: formatTime(message.insertedAt) })
-  ] });
+  ] }) });
 }
 function RoleBadge({ role }) {
-  const colors = {
-    radiologist: "#7c3aed",
-    lab: "#2563eb",
-    physician: "#059669",
-    admin: "#dc2626"
-  };
-  return /* @__PURE__ */ jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: ROLE_LABELS[role] ?? role });
+  return /* @__PURE__ */ jsx("span", { style: { ...styles5.roleBadge, backgroundColor: roleColor(role) }, children: ROLE_LABELS[role] ?? role });
 }
 function formatTime(iso) {
   try {
@@ -2155,89 +2418,134 @@ var styles5 = {
     display: "flex",
     alignItems: "flex-end",
     gap: SPACE.S1,
-    marginBottom: SPACE.S2,
+    marginBottom: SPACE.S3,
     paddingLeft: SPACE.S4,
     paddingRight: SPACE.S4
   },
   bubbleWrapper: {
     position: "relative",
-    maxWidth: "75%"
+    maxWidth: "78%",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
   },
   actionsSlot: {
     flexShrink: 0,
     alignSelf: "flex-end"
   },
+  // Author row above the bubble — only rendered for others' messages.
+  authorRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: SPACE.S2
+  },
+  authorAvatar: {
+    width: "36px",
+    height: "36px",
+    borderRadius: "50%",
+    color: COLOR.white,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.bold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    letterSpacing: "0.02em"
+  },
+  authorName: {
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  },
   bubble: {
     padding: `${SPACE.S3} ${SPACE.S4}`,
-    borderRadius: RADIUS.lg,
-    wordBreak: "break-word"
+    borderRadius: "18px",
+    wordBreak: "break-word",
+    border: "1px solid transparent"
   },
   ownBubble: {
     backgroundColor: COLOR.primary,
     color: COLOR.white,
-    borderBottomRightRadius: RADIUS.sm
+    borderColor: COLOR.primary,
+    borderBottomRightRadius: "6px"
   },
   otherBubble: {
     backgroundColor: COLOR.neutral100,
     color: COLOR.neutral900,
-    borderBottomLeftRadius: RADIUS.sm
+    borderColor: COLOR.neutral200,
+    borderBottomLeftRadius: "6px"
   },
   pinnedBadge: {
     display: "inline-flex",
     alignItems: "center",
-    gap: SPACE.S1,
-    fontSize: FONT_SIZE.xs,
-    fontWeight: FONT_WEIGHT.semibold,
-    marginBottom: SPACE.S1,
-    color: COLOR.neutral500
+    gap: "4px",
+    fontSize: "11px",
+    fontWeight: FONT_WEIGHT.bold,
+    marginBottom: SPACE.S2,
+    padding: `2px ${SPACE.S2}`,
+    borderRadius: "999px",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
   },
-  senderRow: {
-    display: "flex",
-    alignItems: "center",
-    gap: SPACE.S2,
-    marginBottom: SPACE.S1
+  pinnedBadgeOther: {
+    color: "#b8680f",
+    backgroundColor: "#fff7e0"
   },
-  senderName: {
-    fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.neutral700
+  pinnedBadgeOwn: {
+    color: "#fff4d6",
+    backgroundColor: "rgba(255, 255, 255, 0.2)"
   },
   roleBadge: {
-    fontSize: FONT_SIZE.xs,
-    fontWeight: FONT_WEIGHT.semibold,
-    padding: `2px ${SPACE.S2}`,
-    borderRadius: RADIUS.sm
+    fontSize: "10px",
+    fontWeight: FONT_WEIGHT.bold,
+    padding: "2px 7px",
+    borderRadius: RADIUS.sm,
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    color: COLOR.white,
+    flexShrink: 0
   },
   textBody: {
     margin: 0,
     fontSize: FONT_SIZE.md,
-    lineHeight: LINE_HEIGHT.normal
+    lineHeight: 1.5
+  },
+  bubbleFoot: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: SPACE.S2,
+    marginTop: SPACE.S2,
+    fontSize: "11px",
+    opacity: 0.85
   },
   timestamp: {
-    fontSize: FONT_SIZE.xs,
+    fontSize: "11px",
     color: "inherit",
-    opacity: 0.8,
-    marginTop: SPACE.S1,
-    textAlign: "right"
+    fontVariantNumeric: "tabular-nums"
   },
-  statusRow: {
-    display: "flex",
+  footStatus: {
+    display: "inline-flex",
     alignItems: "center",
-    gap: SPACE.S2,
-    marginTop: SPACE.S1,
-    fontSize: FONT_SIZE.xs,
-    justifyContent: "flex-end",
-    color: "rgba(255, 255, 255, 0.9)"
+    gap: "4px",
+    fontSize: "11px"
   },
-  statusText: {
-    opacity: 0.9
+  footStatusFailed: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "11px"
   },
   retryButton: {
     background: "transparent",
     border: "none",
     color: COLOR.white,
     fontWeight: FONT_WEIGHT.semibold,
-    fontSize: FONT_SIZE.xs,
+    fontSize: "11px",
     textDecoration: "underline",
     cursor: "pointer",
     padding: `0 ${SPACE.S1}`
@@ -2300,18 +2608,25 @@ var styles5 = {
     color: COLOR.neutral500,
     fontFamily: "monospace"
   },
-  systemMessage: {
+  systemWrapper: {
     display: "flex",
     justifyContent: "center",
+    margin: `${SPACE.S2} 0`
+  },
+  systemPill: {
+    display: "inline-flex",
     alignItems: "center",
     gap: SPACE.S2,
-    padding: `${SPACE.S1} ${SPACE.S4}`,
-    fontSize: FONT_SIZE.sm,
+    padding: `5px ${SPACE.S3}`,
+    backgroundColor: COLOR.neutral100,
+    borderRadius: "999px",
+    fontSize: FONT_SIZE.xs,
     color: COLOR.neutral500
   },
   systemTime: {
-    fontSize: FONT_SIZE.xs,
-    color: COLOR.neutral400
+    fontSize: "11px",
+    color: COLOR.neutral400,
+    fontVariantNumeric: "tabular-nums"
   }
 };
 function ChatIllustration({ size = 96 }) {
@@ -2450,6 +2765,7 @@ var MessageList = forwardRef(function MessageList2({
   const containerRef = useRef(null);
   const bottomRef = useRef(null);
   const prevMessageCount = useRef(messages.length);
+  const hasInitiallyScrolledRef = useRef(false);
   useImperativeHandle(
     ref,
     () => ({
@@ -2467,7 +2783,31 @@ var MessageList = forwardRef(function MessageList2({
     }),
     []
   );
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || messages.length === 0) return;
+    if (hasInitiallyScrolledRef.current) return;
+    hasInitiallyScrolledRef.current = true;
+    prevMessageCount.current = messages.length;
+    const firstUnread = messages.find(
+      (m) => m.type !== "system" && m.senderId !== currentUserId && !(m.readBy ?? []).includes(currentUserId)
+    );
+    if (firstUnread) {
+      const el = container.querySelector(
+        `[data-message-id="${firstUnread.id}"]`
+      );
+      if (el) {
+        const containerRect = container.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const offset = elRect.top - containerRect.top + container.scrollTop;
+        container.scrollTop = Math.max(0, offset - 16);
+        return;
+      }
+    }
+    container.scrollTop = container.scrollHeight;
+  }, [messages, currentUserId]);
   useEffect(() => {
+    if (!hasInitiallyScrolledRef.current) return;
     if (messages.length > prevMessageCount.current) {
       const lastMessage = messages[messages.length - 1];
       const isOwnMessage = lastMessage?.senderId === currentUserId;
@@ -2526,7 +2866,11 @@ var MessageList = forwardRef(function MessageList2({
             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) }) }),
+              showDivider && /* @__PURE__ */ jsxs("div", { style: styles6.dayDivider, role: "separator", "aria-label": "Date", children: [
+                /* @__PURE__ */ jsx("span", { style: styles6.dayHr, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { style: styles6.dayLabel, children: formatDayDivider(message.insertedAt) }),
+                /* @__PURE__ */ jsx("span", { style: styles6.dayHr, "aria-hidden": "true" })
+              ] }),
               /* @__PURE__ */ jsx("div", { "data-message-id": message.id, "data-natoe-message-bubble": true, style: styles6.bubbleSlot, children: /* @__PURE__ */ jsx(
                 MessageBubble,
                 {
@@ -2625,23 +2969,32 @@ var styles6 = {
   },
   dayDivider: {
     display: "flex",
-    justifyContent: "center",
-    margin: `${SPACE.S3} 0 ${SPACE.S2}`,
+    alignItems: "center",
+    gap: SPACE.S3,
+    margin: `${SPACE.S4} 0 ${SPACE.S3}`,
     position: "sticky",
     top: SPACE.S1,
     zIndex: Z_INDEX.sticky,
     pointerEvents: "none"
   },
-  dayDividerPill: {
-    display: "inline-block",
-    padding: `${SPACE.S1} ${SPACE.S3}`,
-    fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.medium,
-    color: COLOR.slate700,
-    backgroundColor: COLOR.slate200,
-    borderRadius: RADIUS.lg,
-    letterSpacing: "0.2px",
-    boxShadow: SHADOW.subtle
+  dayHr: {
+    flex: 1,
+    height: "1px",
+    backgroundColor: COLOR.neutral200
+  },
+  dayLabel: {
+    flexShrink: 0,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral500,
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    // Subtle pill background so the label is readable when it overlays
+    // bubbles passing under it during sticky scroll. Without this the
+    // hairlines visually run through the text on tinted backgrounds.
+    padding: `2px ${SPACE.S2}`,
+    backgroundColor: COLOR.white,
+    borderRadius: RADIUS.sm
   },
   bubbleSlot: {
     animation: "natoe-colab-message-in 180ms ease-out"
@@ -2895,11 +3248,11 @@ function MessageInput({
         {
           onClick: () => fileInputRef.current?.click(),
           disabled: disabled || isSending,
-          style: styles8.iconButton,
+          style: styles8.attachButton,
           "aria-label": "Attach file",
           title: "Attach file",
           type: "button",
-          children: /* @__PURE__ */ jsx(AttachIcon, { size: 22, color: "#374151" })
+          children: /* @__PURE__ */ jsx(AttachIcon, { size: 22, color: COLOR.neutral700 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2938,7 +3291,7 @@ function MessageInput({
           style: styles8.textarea
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: handleSendText,
@@ -2947,10 +3300,13 @@ function MessageInput({
           title: "Send message",
           style: {
             ...styles8.sendButton,
-            opacity: text.trim() ? 1 : 0.4
+            opacity: text.trim() ? 1 : 0.5
           },
           type: "button",
-          children: /* @__PURE__ */ jsx(SendIcon, { size: 20, color: COLOR.white })
+          children: [
+            /* @__PURE__ */ jsx(SendIcon, { size: 20, color: COLOR.white }),
+            /* @__PURE__ */ jsx("span", { style: styles8.sendLabel, children: "Send" })
+          ]
         }
       )
     ] })
@@ -3012,46 +3368,64 @@ var styles8 = {
   inputBar: {
     display: "flex",
     alignItems: "flex-end",
-    gap: SPACE.S2,
-    padding: `${SPACE.S3} ${SPACE.S3}`
-  },
-  iconButton: {
-    width: SIZE.controlPrimary,
-    height: SIZE.controlPrimary,
+    gap: "10px",
+    padding: `${SPACE.S3} ${SPACE.S4} 14px`
+  },
+  // 48px square tile with a 14px corner radius — visually grounds the
+  // attach affordance as part of the composer chrome rather than a stray
+  // round icon button.
+  attachButton: {
+    width: "48px",
+    height: "48px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "transparent",
-    border: "none",
-    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.neutral100,
+    border: `1.5px solid ${COLOR.neutral200}`,
+    borderRadius: "14px",
     cursor: "pointer",
-    flexShrink: 0
+    flexShrink: 0,
+    color: COLOR.neutral700,
+    transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
   },
   textarea: {
     flex: 1,
-    padding: `${SPACE.S3} ${SPACE.S4}`,
+    minHeight: "48px",
+    maxHeight: "140px",
+    padding: "13px 16px",
     fontSize: FONT_SIZE.md,
     lineHeight: LINE_HEIGHT.normal,
-    border: `1px solid ${COLOR.neutral300}`,
-    borderRadius: RADIUS.pill,
+    color: COLOR.neutral900,
+    backgroundColor: COLOR.neutral100,
+    border: `1.5px solid ${COLOR.neutral200}`,
+    borderRadius: "14px",
     resize: "none",
     outline: "none",
     fontFamily: "inherit",
-    maxHeight: "120px",
-    minHeight: SIZE.controlPrimary
+    transition: "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease"
   },
+  // Pill-shaped send: icon + "Send" label. Always labelled (never icon-
+  // only) so the affordance is obvious to first-time users.
   sendButton: {
-    width: SIZE.controlPrimary,
-    height: SIZE.controlPrimary,
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
-    justifyContent: "center",
+    gap: "6px",
+    minWidth: "48px",
+    height: "48px",
+    padding: `0 ${SPACE.S4}`,
     backgroundColor: COLOR.primary,
     color: COLOR.white,
     border: "none",
-    borderRadius: RADIUS.full,
+    borderRadius: "14px",
     cursor: "pointer",
-    flexShrink: 0
+    flexShrink: 0,
+    fontFamily: "inherit",
+    fontSize: "15px",
+    fontWeight: FONT_WEIGHT.semibold,
+    transition: "opacity 120ms ease, background-color 120ms ease"
+  },
+  sendLabel: {
+    lineHeight: 1
   }};
 function ParticipantsList({
   participants,
@@ -3108,10 +3482,14 @@ function fallbackName(role) {
 }
 function RoleBadge2({ role }) {
   const colors = {
-    radiologist: { bg: "#f5f3ff", text: "#7c3aed" },
+    radiologist: { bg: "#eef2ff", text: "#4f46e5" },
+    // indigo
     lab: { bg: "#eff6ff", text: "#2563eb" },
-    physician: { bg: "#ecfdf5", text: "#059669" },
-    admin: { bg: "#fef2f2", text: "#dc2626" }
+    // brand blue
+    physician: { bg: "#e0f2fe", text: "#0284c7" },
+    // sky
+    admin: { bg: "#f1f5f9", text: "#64748b" }
+    // slate
   };
   const color = colors[role];
   return /* @__PURE__ */ jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: role });
@@ -3720,46 +4098,21 @@ 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();
+var DARK_THEME_OVERRIDES = {
+  ["--natoe-colab-white"]: "#0b0b0c",
+  ["--natoe-colab-neutral-50"]: "#18181c",
+  ["--natoe-colab-neutral-100"]: "#1f1f23",
+  ["--natoe-colab-neutral-200"]: "#2a2a2e",
+  ["--natoe-colab-neutral-300"]: "#3f3f44",
+  ["--natoe-colab-neutral-400"]: "#6b7280",
+  ["--natoe-colab-neutral-500"]: "#9ca3af",
+  ["--natoe-colab-neutral-600"]: "#cbd5e1",
+  ["--natoe-colab-neutral-700"]: "#e5e7eb",
+  ["--natoe-colab-neutral-800"]: "#f3f4f6",
+  ["--natoe-colab-neutral-900"]: "#ffffff",
+  ["--natoe-colab-primary-bg"]: "rgba(37, 99, 235, 0.18)"
+};
 function CollabPanel({
   orderId,
   patientData,
@@ -3768,6 +4121,7 @@ function CollabPanel({
   onBack,
   hidePatientName = false,
   onConversationChange,
+  themeMode = "light",
   className,
   style
 }) {
@@ -3843,16 +4197,21 @@ function CollabPanel({
     }
   };
   const pinDisabled = pinnedMessages.length >= MAX_PINNED_MESSAGES;
+  const containerStyle = {
+    ...panelStyles.container,
+    ...themeMode === "dark" ? DARK_THEME_OVERRIDES : {},
+    ...style
+  };
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles.errorState, children: [
+    return /* @__PURE__ */ jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, 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: [ROOT_CLASS, className].filter(Boolean).join(" "), 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: containerStyle, children: /* @__PURE__ */ jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: [
     showSettings && conversation ? /* @__PURE__ */ jsx(
       ChannelSettings,
       {
@@ -4007,6 +4366,7 @@ function CollabPopup({
   isOpen,
   onClose,
   onBack,
+  onMinimize,
   initialPosition,
   width = 380,
   height = 520,
@@ -4122,35 +4482,48 @@ function CollabPopup({
             "button",
             {
               onClick: onBack,
-              style: styles13.titleButton,
-              "aria-label": "Go back",
+              style: styles13.titleSquare,
+              "aria-label": "Back to messages",
               title: "Back",
               type: "button",
-              children: "\u2190"
+              children: /* @__PURE__ */ jsx(BackIcon, { size: 18, color: COLOR.neutral700 })
             }
           ),
-          /* @__PURE__ */ jsx("span", { id: titleId, style: { ...styles13.titleText, flex: 1 }, children: titleText }),
+          /* @__PURE__ */ jsxs("div", { style: styles13.titleCenter, children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, style: styles13.patientName, children: patientData.patientName || titleText }),
+            (patientData.labName || patientData.displayOrderId) && /* @__PURE__ */ jsxs("div", { style: styles13.subRow, children: [
+              patientData.labName && /* @__PURE__ */ jsx("span", { children: patientData.labName }),
+              patientData.labName && patientData.displayOrderId && /* @__PURE__ */ jsx("span", { style: styles13.subDot, "aria-hidden": "true", children: "\xB7" }),
+              patientData.displayOrderId && /* @__PURE__ */ jsxs("span", { style: styles13.mono, children: [
+                "#",
+                patientData.displayOrderId.slice(-4)
+              ] })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => setIsMinimized(!isMinimized),
-                style: styles13.titleButton,
-                "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
-                title: isMinimized ? "Expand" : "Minimize",
+                onClick: () => {
+                  if (onMinimize) onMinimize();
+                  else setIsMinimized(!isMinimized);
+                },
+                style: styles13.titleSquare,
+                "aria-label": onMinimize ? "Minimize chat" : isMinimized ? "Expand chat" : "Minimize chat",
+                title: onMinimize ? "Minimize" : isMinimized ? "Expand" : "Minimize",
                 type: "button",
-                children: isMinimized ? /* @__PURE__ */ jsx(ExpandIcon, { size: 16, color: COLOR.slate200 }) : /* @__PURE__ */ jsx(MinimizeIcon, { size: 16, color: COLOR.slate200 })
+                children: onMinimize || !isMinimized ? /* @__PURE__ */ jsx(MinimizeIcon, { size: 18, color: COLOR.neutral700 }) : /* @__PURE__ */ jsx(ExpandIcon, { size: 18, color: COLOR.neutral700 })
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: onClose,
-                style: styles13.titleButton,
+                style: styles13.titleSquare,
                 "aria-label": "Close chat",
                 title: "Close",
                 type: "button",
-                children: /* @__PURE__ */ jsx(CloseIcon, { size: 16, color: COLOR.slate200 })
+                children: /* @__PURE__ */ jsx(CloseIcon, { size: 18, color: COLOR.neutral700 })
               }
             )
           ] })
@@ -4173,51 +4546,78 @@ var styles13 = {
   container: {
     position: "fixed",
     zIndex: Z_INDEX.dialog,
-    borderRadius: RADIUS.lg,
-    boxShadow: SHADOW.dialog,
+    borderRadius: "20px",
+    boxShadow: "0 20px 48px rgba(20, 21, 28, 0.16), 0 6px 16px rgba(20, 21, 28, 0.08)",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     backgroundColor: COLOR.white,
-    border: `1px solid ${COLOR.neutral200}`,
+    border: `1px solid ${COLOR.neutral300}`,
     transition: "height 0.2s ease",
     fontFamily: FONT_STACK
   },
   titleBar: {
     display: "flex",
-    justifyContent: "space-between",
     alignItems: "center",
-    padding: `0 ${SPACE.S2} 0 ${SPACE.S4}`,
-    height: "52px",
-    backgroundColor: COLOR.slate800,
+    gap: SPACE.S2,
+    padding: `10px ${SPACE.S3}`,
+    backgroundColor: COLOR.white,
+    borderBottom: `1px solid ${COLOR.neutral200}`,
     cursor: "grab",
     userSelect: "none",
     flexShrink: 0
   },
-  titleText: {
-    fontSize: FONT_SIZE.md,
-    fontWeight: FONT_WEIGHT.medium,
-    color: COLOR.white,
+  titleCenter: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px"
+  },
+  patientName: {
+    margin: 0,
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.bold,
+    letterSpacing: "-0.01em",
+    color: COLOR.neutral900,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
+  subRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  subDot: {
+    color: COLOR.neutral400
+  },
+  mono: {
+    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    fontVariantNumeric: "tabular-nums"
+  },
   titleActions: {
     display: "flex",
     gap: SPACE.S1,
     flexShrink: 0
   },
-  titleButton: {
-    width: SIZE.control,
-    height: SIZE.control,
+  titleSquare: {
+    width: "36px",
+    height: "36px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "transparent",
-    border: "none",
+    backgroundColor: COLOR.neutral100,
+    border: `1px solid ${COLOR.neutral200}`,
     borderRadius: RADIUS.md,
     cursor: "pointer",
-    color: COLOR.slate200
+    color: COLOR.neutral700,
+    flexShrink: 0
   },
   panelWrapper: {
     flex: 1,
@@ -4247,6 +4647,7 @@ function useInlineCollab({
   const elementRef = useRef(null);
   const observerRef = useRef(null);
   const subscribedConversationIdRef = useRef(null);
+  const channelSubscriptionRef = useRef(null);
   const trimToLimit = useCallback(
     (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
     [messageLimit]
@@ -4284,7 +4685,9 @@ function useInlineCollab({
   const subscribe = useCallback(
     (conversationId) => {
       if (subscribedConversationIdRef.current === conversationId) return;
-      socket.joinConversation(conversationId, {
+      channelSubscriptionRef.current?.release();
+      channelSubscriptionRef.current = null;
+      const subscription = socket.joinConversation(conversationId, {
         onMessage: (msg) => {
           setMessages((prev) => trimToLimit([...prev, msg]));
           if (msg.senderId !== config.userId) {
@@ -4300,19 +4703,18 @@ function useInlineCollab({
           setParticipants((prev) => prev.filter((p) => p.userId !== participant.userId));
         }
       });
+      channelSubscriptionRef.current = subscription;
       subscribedConversationIdRef.current = conversationId;
       setIsSubscribed(true);
     },
     [socket, trimToLimit, config.userId]
   );
   const unsubscribe = useCallback(() => {
-    const convId = subscribedConversationIdRef.current;
-    if (convId) {
-      socket.leaveConversation(convId);
-      subscribedConversationIdRef.current = null;
-      setIsSubscribed(false);
-    }
-  }, [socket]);
+    channelSubscriptionRef.current?.release();
+    channelSubscriptionRef.current = null;
+    subscribedConversationIdRef.current = null;
+    setIsSubscribed(false);
+  }, []);
   const containerRef = useCallback(
     (element) => {
       if (observerRef.current) {
@@ -4454,16 +4856,52 @@ function useInlineCollab({
   };
 }
 ensureGlobalStyles();
+function palette(mode) {
+  if (mode === "dark") {
+    return {
+      bg: "transparent",
+      border: "transparent",
+      previewBorder: "#1f1f23",
+      senderName: "#f3f4f6",
+      messageText: "#cbd5e1",
+      systemText: "#6b7280",
+      inputBg: "#18181c",
+      inputBorder: "#2a2a2e",
+      inputText: "#e5e7eb",
+      audioBg: "rgba(37, 99, 235, 0.18)",
+      audioFg: "#93c5fd",
+      expandBorder: "#2a2a2e",
+      expandColor: "#9ca3af"
+    };
+  }
+  return {
+    bg: COLOR.white,
+    border: COLOR.neutral200,
+    previewBorder: COLOR.neutral100,
+    senderName: COLOR.neutral700,
+    messageText: COLOR.neutral600,
+    systemText: COLOR.neutral400,
+    inputBg: "transparent",
+    inputBorder: COLOR.neutral200,
+    inputText: COLOR.neutral900,
+    audioBg: COLOR.primaryBg,
+    audioFg: COLOR.primary,
+    expandBorder: COLOR.neutral200,
+    expandColor: COLOR.neutral500
+  };
+}
 function CollabInline({
   orderId,
   patientData,
   participantIds,
   onExpand,
-  messageLimit = 5,
+  messageLimit = 1,
   placeholder = "Type a message about this case...",
+  mode = "light",
   className,
   style
 }) {
+  const pal = palette(mode);
   const {
     hasConversation,
     messages,
@@ -4475,11 +4913,17 @@ function CollabInline({
     sendAudioMessage,
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
+  const containerStyle = {
+    ...styles14.container,
+    backgroundColor: pal.bg,
+    borderColor: pal.border,
+    ...style
+  };
   if (isLoading && !hasConversation) {
-    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__ */ jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: /* @__PURE__ */ jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  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)) }),
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: [
+    hasConversation && messages.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles14.preview, borderBottomColor: pal.previewBorder }, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsx(InlineMessageRow, { message, pal }, message.id)) }),
     error && /* @__PURE__ */ jsx("div", { style: styles14.error, children: error }),
     /* @__PURE__ */ jsx(
       InlineInputBar,
@@ -4490,45 +4934,54 @@ function CollabInline({
         unreadCount: hasConversation ? unreadCount : 0,
         isLive: isSubscribed,
         showExpand: hasConversation && !!onExpand,
-        onExpand
+        onExpand,
+        pal
       }
     )
   ] });
 }
-function InlineMessageRow({ message }) {
+function InlineMessageRow({ message, pal }) {
   if (message.type === "system") {
-    return /* @__PURE__ */ jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsx("span", { style: styles14.systemText, children: message.body }) });
+    return /* @__PURE__ */ jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsx("span", { style: { ...styles14.systemText, color: pal.systemText }, children: message.body }) });
   }
   if (message.type === "audio" && message.mediaUrl) {
     return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
       /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-      /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
+      /* @__PURE__ */ jsxs("span", { style: { ...styles14.senderName, color: pal.senderName }, children: [
         message.senderName,
         ":"
       ] }),
-      /* @__PURE__ */ jsx(InlineAudioPlayer, { url: message.mediaUrl, duration: message.mediaDuration })
+      /* @__PURE__ */ jsx(InlineAudioPlayer, { url: message.mediaUrl, duration: message.mediaDuration, pal })
     ] });
   }
   const preview = renderMessagePreview(message);
   return /* @__PURE__ */ jsxs("div", { style: styles14.messageRow, children: [
     /* @__PURE__ */ jsx(RoleDot, { role: message.senderRole }),
-    /* @__PURE__ */ jsxs("span", { style: styles14.senderName, children: [
+    /* @__PURE__ */ jsxs("span", { style: { ...styles14.senderName, color: pal.senderName }, children: [
       message.senderName,
       ":"
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles14.messageText, children: preview })
+    /* @__PURE__ */ jsx("span", { style: { ...styles14.messageText, color: pal.messageText }, children: preview })
   ] });
 }
 function RoleDot({ role }) {
   const colors = {
-    radiologist: "#7c3aed",
+    radiologist: "#4f46e5",
+    // indigo
     lab: "#2563eb",
-    physician: "#059669",
-    admin: "#dc2626"
+    // brand blue
+    physician: "#0284c7",
+    // sky
+    admin: "#64748b"
+    // slate
   };
   return /* @__PURE__ */ jsx("span", { style: { ...styles14.roleDot, backgroundColor: colors[role] } });
 }
-function InlineAudioPlayer({ url, duration }) {
+function InlineAudioPlayer({
+  url,
+  duration,
+  pal
+}) {
   const audioRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
@@ -4570,7 +5023,7 @@ 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: styles14.audioPlayer, children: [
+  return /* @__PURE__ */ jsxs("span", { style: { ...styles14.audioPlayer, backgroundColor: pal.audioBg, borderColor: pal.audioBg }, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -4582,15 +5035,15 @@ function InlineAudioPlayer({ url, duration }) {
       }
     ),
     /* @__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: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "80%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "60%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "90%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "50%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "70%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } })
     ] }),
-    /* @__PURE__ */ jsx("span", { style: styles14.audioDuration, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -4620,7 +5073,8 @@ function InlineInputBar({
   unreadCount,
   isLive,
   showExpand,
-  onExpand
+  onExpand,
+  pal
 }) {
   const [text, setText] = useState("");
   const [isSending, setIsSending] = useState(false);
@@ -4657,7 +5111,12 @@ function InlineInputBar({
         onKeyDown: handleKeyDown,
         placeholder,
         disabled: isSending,
-        style: styles14.input
+        style: {
+          ...styles14.input,
+          backgroundColor: pal.inputBg,
+          borderColor: pal.inputBorder,
+          color: pal.inputText
+        }
       }
     ),
     unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
@@ -4677,7 +5136,11 @@ function InlineInputBar({
       "button",
       {
         onClick: onExpand,
-        style: styles14.expandButton,
+        style: {
+          ...styles14.expandButton,
+          borderColor: pal.expandBorder,
+          color: pal.expandColor
+        },
         title: "Expand to full chat",
         type: "button",
         children: "\u26F6"
@@ -4946,6 +5409,10 @@ function ConversationListItem({
 }) {
   const hasUnread = item.unreadCount > 0;
   const displayName = item.name || item.patientSnapshot?.patientName || "Unknown";
+  const studyType = item.patientSnapshot?.studyType;
+  const patientId = item.patientSnapshot?.patientId;
+  const showStudyRow = !!(studyType || patientId);
+  const initials = computeInitials2(item.patientSnapshot?.patientName || displayName);
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -4953,15 +5420,11 @@ function ConversationListItem({
       onClick,
       style: {
         ...styles15.container,
-        ...isSelected ? styles15.selected : {},
-        ...hasUnread ? styles15.unread : {}
+        ...isSelected ? styles15.selected : {}
       },
       type: "button",
       children: [
-        /* @__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__ */ jsx("div", { style: styles15.avatarWrapper, children: item.picture ? /* @__PURE__ */ jsx("img", { src: item.picture, alt: "", style: styles15.avatarImg }) : /* @__PURE__ */ jsx("div", { style: styles15.avatarTile, "aria-hidden": "true", children: initials }) }),
         /* @__PURE__ */ jsxs("div", { style: styles15.content, children: [
           /* @__PURE__ */ jsxs("div", { style: styles15.topRow, children: [
             /* @__PURE__ */ jsx(
@@ -4985,101 +5448,120 @@ function ConversationListItem({
               }
             )
           ] }),
+          showStudyRow && /* @__PURE__ */ jsxs("div", { style: styles15.studyRow, children: [
+            studyType && /* @__PURE__ */ jsx("span", { style: styles15.studyType, children: studyType }),
+            studyType && patientId && /* @__PURE__ */ jsx("span", { style: styles15.studyDivider, children: "\xB7" }),
+            patientId && /* @__PURE__ */ jsxs("span", { style: styles15.studyId, children: [
+              "MRN ",
+              patientId
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("div", { style: styles15.bottomRow, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  ...styles15.preview,
-                  ...hasUnread ? styles15.previewUnread : {}
-                },
-                children: renderLastMessagePreview(item.lastMessage)
-              }
-            ),
-            hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.badge, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
+            /* @__PURE__ */ jsx(PreviewLine, { message: item.lastMessage, hasUnread }),
+            hasUnread && /* @__PURE__ */ jsx("span", { style: styles15.badge, "aria-label": `${item.unreadCount} unread`, children: item.unreadCount > 99 ? "99+" : item.unreadCount })
           ] })
         ] })
       ]
     }
   );
 }
-function renderLastMessagePreview(message) {
-  if (!message) return "No messages yet";
-  const prefix = message.senderName ? `${message.senderName}: ` : "";
+function PreviewLine({ message, hasUnread }) {
+  if (!message) {
+    return /* @__PURE__ */ jsx("span", { style: styles15.preview, children: "No messages yet" });
+  }
+  if (message.type === "system") {
+    return /* @__PURE__ */ jsx("span", { style: styles15.preview, children: message.body });
+  }
+  const text = previewText(message);
+  const sender = message.senderName ? `${message.senderName.split(" ")[0]}:` : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        ...styles15.preview,
+        ...hasUnread ? styles15.previewUnread : {}
+      },
+      children: [
+        sender && /* @__PURE__ */ jsxs("span", { style: styles15.previewSender, children: [
+          sender,
+          " "
+        ] }),
+        text
+      ]
+    }
+  );
+}
+function previewText(message) {
   switch (message.type) {
     case "audio":
-      return `${prefix}\u{1F3A4} Voice message`;
+      return "Voice message";
     case "image":
-      return `${prefix}\u{1F4F7} ${message.fileName || "Image"}`;
+      return message.fileName || "Image";
     case "file":
-      return `${prefix}\u{1F4CE} ${message.fileName || "File"}`;
+      return message.fileName || "File";
     case "deep_link":
-      return `${prefix}\u{1F517} ${message.body}`;
-    case "system":
-      return message.body;
+      return message.body || "Shared link";
     default: {
       const body = message.body || "";
-      const preview = body.length > 60 ? `${body.slice(0, 60)}\u2026` : body;
-      return `${prefix}${preview}`;
+      return body.length > 60 ? `${body.slice(0, 60)}\u2026` : body;
     }
   }
 }
+function computeInitials2(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") || "?";
+}
 var styles15 = {
   container: {
     display: "flex",
-    alignItems: "center",
-    gap: SPACE.S3,
-    padding: `${SPACE.S3} ${SPACE.S3}`,
+    alignItems: "flex-start",
+    gap: "14px",
     width: "100%",
+    padding: `14px ${SPACE.S5}`,
+    minHeight: "84px",
     backgroundColor: "transparent",
     border: "none",
-    borderBottom: `1px solid ${COLOR.neutral100}`,
+    borderLeft: "4px solid transparent",
     cursor: "pointer",
-    textAlign: "left"
+    textAlign: "left",
+    color: "inherit",
+    fontFamily: "inherit",
+    transition: "background-color 120ms ease"
   },
   selected: {
-    backgroundColor: COLOR.primaryBg
+    backgroundColor: COLOR.primaryBg,
+    borderLeftColor: COLOR.primary
   },
-  unread: {},
   avatarWrapper: {
-    position: "relative",
-    width: SIZE.avatar,
-    height: SIZE.avatar,
+    width: "52px",
+    height: "52px",
     flexShrink: 0
   },
-  avatar: {
-    width: SIZE.avatar,
-    height: SIZE.avatar,
-    borderRadius: RADIUS.full,
-    objectFit: "cover"
+  avatarImg: {
+    width: "52px",
+    height: "52px",
+    borderRadius: RADIUS.xl,
+    objectFit: "cover",
+    boxShadow: "inset 0 -2px 0 rgba(0, 0, 0, 0.08)"
   },
-  avatarFallback: {
-    width: SIZE.avatar,
-    height: SIZE.avatar,
-    borderRadius: RADIUS.full,
-    backgroundColor: COLOR.neutral200,
+  avatarTile: {
+    width: "52px",
+    height: "52px",
+    borderRadius: RADIUS.xl,
+    backgroundColor: COLOR.primary,
+    color: COLOR.white,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: FONT_SIZE.md,
-    fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.neutral500
-  },
-  unreadDot: {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: SIZE.dot,
-    height: SIZE.dot,
-    borderRadius: RADIUS.full,
-    backgroundColor: COLOR.primary,
-    border: `2px solid ${COLOR.white}`
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.bold,
+    letterSpacing: "0.02em",
+    boxShadow: "inset 0 -2px 0 rgba(0, 0, 0, 0.08)"
   },
   content: {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    gap: "2px",
+    gap: "3px",
     minWidth: 0
   },
   topRow: {
@@ -5104,123 +5586,194 @@ var styles15 = {
   time: {
     fontSize: FONT_SIZE.xs,
     color: COLOR.neutral500,
+    fontVariantNumeric: "tabular-nums",
     flexShrink: 0
   },
   timeUnread: {
     color: COLOR.primary,
     fontWeight: FONT_WEIGHT.semibold
   },
+  studyRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    minWidth: 0
+  },
+  studyType: {
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  studyDivider: {
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral400,
+    flexShrink: 0
+  },
+  studyId: {
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    fontVariantNumeric: "tabular-nums",
+    flexShrink: 0
+  },
   bottomRow: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: SPACE.S2
+    gap: SPACE.S2,
+    marginTop: "2px"
   },
   preview: {
     fontSize: FONT_SIZE.sm,
-    color: COLOR.neutral600,
+    color: COLOR.neutral500,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     flex: 1,
     minWidth: 0
   },
+  previewSender: {
+    color: COLOR.neutral700,
+    fontWeight: FONT_WEIGHT.semibold
+  },
   previewUnread: {
     color: COLOR.neutral900,
     fontWeight: FONT_WEIGHT.medium
   },
   badge: {
-    minWidth: "20px",
-    height: "20px",
-    padding: `0 ${SPACE.S2}`,
+    minWidth: "22px",
+    height: "22px",
+    padding: "0 9px",
     fontSize: FONT_SIZE.xs,
-    fontWeight: FONT_WEIGHT.semibold,
+    fontWeight: FONT_WEIGHT.bold,
     color: COLOR.white,
-    backgroundColor: COLOR.primary,
+    backgroundColor: COLOR.danger,
     borderRadius: RADIUS.pill,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    fontVariantNumeric: "tabular-nums",
     flexShrink: 0
   }
 };
+function SearchIcon({ size = 20, 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("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 20l-4-4" })
+      ]
+    }
+  );
+}
 function ConversationList({
   conversations,
   selectedId,
   isLoading,
   error,
   onSelect,
-  title = "Conversations",
   className
 }) {
+  const { totalUnread } = useCollab();
   const [query, setQuery] = useState("");
-  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const [filter, setFilter] = useState(
+    () => totalUnread > 0 ? "unread" : "all"
+  );
+  const [searchFocused, setSearchFocused] = useState(false);
+  const unreadCount = useMemo(
+    () => conversations.filter((c) => c.unreadCount > 0).length,
+    [conversations]
+  );
+  const autoDefaultedRef = useRef(false);
+  useEffect(() => {
+    if (autoDefaultedRef.current) return;
+    if (conversations.length === 0) return;
+    autoDefaultedRef.current = true;
+    if (unreadCount > 0) setFilter("unread");
+  }, [conversations.length, unreadCount]);
   const filtered = useMemo(() => {
     let result = conversations;
-    if (showUnreadOnly) {
+    if (filter === "unread") {
       result = result.filter((c) => c.unreadCount > 0);
     }
     const q = query.trim().toLowerCase();
     if (q) {
       result = result.filter((c) => {
-        const patient = c.patientSnapshot?.patientName?.toLowerCase() || "";
         const name = c.name.toLowerCase();
-        return name.includes(q) || patient.includes(q);
+        const patient = c.patientSnapshot?.patientName?.toLowerCase() || "";
+        const studyType = c.patientSnapshot?.studyType?.toLowerCase() || "";
+        const patientId = c.patientSnapshot?.patientId?.toLowerCase() || "";
+        return name.includes(q) || patient.includes(q) || studyType.includes(q) || patientId.includes(q);
       });
     }
     return result;
-  }, [conversations, query, showUnreadOnly]);
-  const totalUnread = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
+  }, [conversations, query, filter]);
   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: styles16.searchRow, children: /* @__PURE__ */ jsx(
-        "input",
+    /* @__PURE__ */ jsxs("div", { style: styles16.tabs, children: [
+      /* @__PURE__ */ jsx(
+        TabButton,
         {
-          type: "text",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          placeholder: "Search patients or channels...",
-          style: styles16.searchInput
+          label: "Unread",
+          count: unreadCount,
+          isActive: filter === "unread",
+          onClick: () => setFilter("unread")
         }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { style: styles16.filterRow, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setShowUnreadOnly(false),
-            style: {
-              ...styles16.filterButton,
-              ...!showUnreadOnly ? styles16.filterButtonActive : {}
-            },
-            type: "button",
-            children: "All"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setShowUnreadOnly(true),
-            style: {
-              ...styles16.filterButton,
-              ...showUnreadOnly ? styles16.filterButtonActive : {}
-            },
-            type: "button",
-            children: [
-              "Unread ",
-              totalUnread > 0 && `(${totalUnread})`
-            ]
-          }
-        )
-      ] })
+      ),
+      /* @__PURE__ */ jsx(
+        TabButton,
+        {
+          label: "All",
+          count: conversations.length,
+          isActive: filter === "all",
+          onClick: () => setFilter("all")
+        }
+      )
     ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...styles16.search,
+          ...searchFocused ? styles16.searchFocused : {}
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: styles16.searchIcon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchIcon, { size: 20, color: COLOR.neutral500 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onFocus: () => setSearchFocused(true),
+              onBlur: () => setSearchFocused(false),
+              placeholder: "Search by patient name or MRN",
+              "aria-label": "Search conversations",
+              style: styles16.searchInput
+            }
+          )
+        ]
+      }
+    ),
     /* @__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" }),
+      isLoading && /* @__PURE__ */ jsxs("div", { style: styles16.loading, children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: "Loading conversations\u2026" })
+      ] }),
+      error && !isLoading && /* @__PURE__ */ jsx("div", { style: styles16.errorState, children: error }),
+      !isLoading && !error && filtered.length === 0 && /* @__PURE__ */ jsx(EmptyState, { filter, hasQuery: query.trim().length > 0 }),
       filtered.map((item) => /* @__PURE__ */ jsx(
         ConversationListItem,
         {
@@ -5233,95 +5786,178 @@ function ConversationList({
     ] })
   ] });
 }
+function TabButton({
+  label,
+  count,
+  isActive,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: {
+        ...styles16.tab,
+        ...isActive ? styles16.tabActive : {}
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              ...styles16.tabCount,
+              ...isActive ? styles16.tabCountActive : {}
+            },
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+function EmptyState({ filter, hasQuery }) {
+  let title = "No conversations yet";
+  let subtitle = "New chats will show up here as cases come in.";
+  if (filter === "unread") {
+    title = "No unread messages";
+    subtitle = "You're all caught up.";
+  } else if (hasQuery) {
+    title = "No conversations match";
+    subtitle = "Try a different search.";
+  }
+  return /* @__PURE__ */ jsxs("div", { style: styles16.empty, children: [
+    /* @__PURE__ */ jsx(ChatIllustration, { size: 88 }),
+    /* @__PURE__ */ jsx("p", { style: styles16.emptyTitle, children: title }),
+    /* @__PURE__ */ jsx("p", { style: styles16.emptySubtitle, children: subtitle })
+  ] });
+}
 var styles16 = {
   container: {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    backgroundColor: COLOR.white,
-    borderRight: `1px solid ${COLOR.neutral200}`
+    backgroundColor: COLOR.white
   },
-  header: {
-    padding: SPACE.S3,
+  // Tabs sit at the top of the panel now (header section removed).
+  // A bit more top padding so they don't crowd the top edge.
+  tabs: {
+    display: "flex",
+    gap: SPACE.S2,
+    padding: `${SPACE.S5} ${SPACE.S5} ${SPACE.S2}`,
     borderBottom: `1px solid ${COLOR.neutral200}`,
-    backgroundColor: COLOR.neutral50,
     flexShrink: 0
   },
-  titleRow: {
-    display: "flex",
+  tab: {
+    display: "inline-flex",
     alignItems: "center",
     gap: SPACE.S2,
-    marginBottom: SPACE.S2
-  },
-  title: {
-    margin: 0,
-    fontSize: FONT_SIZE.md,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: RADIUS.lg,
+    cursor: "pointer",
+    color: COLOR.neutral500,
+    fontFamily: "inherit",
+    fontSize: FONT_SIZE.sm,
     fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.neutral900
+    transition: "background-color 120ms ease, color 120ms ease"
   },
-  totalBadge: {
-    minWidth: "20px",
-    height: "20px",
-    padding: `0 ${SPACE.S2}`,
+  tabActive: {
+    backgroundColor: COLOR.primaryBg,
+    color: COLOR.primary
+  },
+  tabCount: {
     fontSize: FONT_SIZE.xs,
-    fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.white,
-    backgroundColor: COLOR.primary,
+    fontVariantNumeric: "tabular-nums",
+    padding: "1px 8px",
     borderRadius: RADIUS.pill,
+    backgroundColor: COLOR.neutral200,
+    color: COLOR.neutral500,
+    fontWeight: FONT_WEIGHT.semibold
+  },
+  tabCountActive: {
+    backgroundColor: COLOR.primary,
+    color: COLOR.white
+  },
+  search: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
-  },
-  searchRow: {
-    marginBottom: SPACE.S2
+    gap: SPACE.S2,
+    margin: `14px ${SPACE.S5} ${SPACE.S3}`,
+    padding: `${SPACE.S3} 14px`,
+    backgroundColor: COLOR.neutral100,
+    border: `1.5px solid ${COLOR.neutral200}`,
+    borderRadius: "14px",
+    transition: "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease"
   },
-  searchInput: {
-    width: "100%",
-    padding: `${SPACE.S2} ${SPACE.S3}`,
-    fontSize: FONT_SIZE.sm,
-    border: `1px solid ${COLOR.neutral200}`,
-    borderRadius: RADIUS.md,
-    outline: "none",
-    fontFamily: "inherit"
+  searchFocused: {
+    backgroundColor: COLOR.white,
+    borderColor: COLOR.primary,
+    boxShadow: `0 0 0 3px ${COLOR.primaryBg}`
   },
-  filterRow: {
+  searchIcon: {
     display: "flex",
-    gap: SPACE.S1
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
   },
-  filterButton: {
+  searchInput: {
     flex: 1,
-    padding: `${SPACE.S1} ${SPACE.S2}`,
-    fontSize: FONT_SIZE.xs,
-    color: COLOR.neutral500,
-    backgroundColor: COLOR.white,
-    border: `1px solid ${COLOR.neutral200}`,
-    borderRadius: RADIUS.md,
-    cursor: "pointer"
-  },
-  filterButtonActive: {
-    color: COLOR.white,
-    backgroundColor: COLOR.primary,
-    borderColor: COLOR.primary,
-    fontWeight: FONT_WEIGHT.medium
+    minWidth: 0,
+    border: "none",
+    background: "transparent",
+    outline: "none",
+    fontFamily: "inherit",
+    fontSize: FONT_SIZE.md,
+    color: COLOR.neutral900
   },
   list: {
     flex: 1,
-    overflowY: "auto"
+    overflowY: "auto",
+    padding: "4px 0 12px"
   },
-  state: {
-    padding: `${SPACE.S6} ${SPACE.S4}`,
+  loading: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.S2,
+    padding: `44px ${SPACE.S5}`,
     fontSize: FONT_SIZE.sm,
-    color: COLOR.neutral500,
-    textAlign: "center"
+    color: COLOR.neutral500
   },
   errorState: {
     padding: SPACE.S4,
+    margin: SPACE.S3,
     fontSize: FONT_SIZE.sm,
     color: COLOR.danger,
     backgroundColor: COLOR.dangerBg,
-    margin: SPACE.S3,
+    border: `1px solid ${COLOR.dangerBorder}`,
     borderRadius: RADIUS.md,
     textAlign: "center"
+  },
+  empty: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "44px 24px",
+    textAlign: "center",
+    color: COLOR.neutral500
+  },
+  emptyTitle: {
+    margin: "12px 0 4px",
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700
+  },
+  emptySubtitle: {
+    margin: 0,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    maxWidth: "280px",
+    lineHeight: LINE_HEIGHT.normal
   }
 };
 ensureGlobalStyles();
@@ -5329,7 +5965,6 @@ var COMPACT_BREAKPOINT = 720;
 function CollabInbox({
   initialConversationId,
   onSelectConversation,
-  title,
   className,
   style
 }) {
@@ -5366,8 +6001,7 @@ function CollabInbox({
             selectedId,
             isLoading,
             error,
-            onSelect: handleSelect,
-            title
+            onSelect: handleSelect
           }
         ) }),
         showDetail && /* @__PURE__ */ jsx("div", { style: isCompact ? styles17.mainCompact : styles17.main, children: selected ? /* @__PURE__ */ jsx(
@@ -5380,7 +6014,7 @@ function CollabInbox({
             onBack: isCompact ? () => setSelectedId(null) : void 0
           },
           selected.id
-        ) : /* @__PURE__ */ jsx(EmptyState, { hasAny: conversations.length > 0 }) })
+        ) : /* @__PURE__ */ jsx(EmptyState2, { hasAny: conversations.length > 0 }) })
       ]
     }
   );
@@ -5414,7 +6048,7 @@ function parseChannelName(name, orderId) {
     orderId
   };
 }
-function EmptyState({ hasAny }) {
+function EmptyState2({ hasAny }) {
   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" }),
@@ -5793,6 +6427,6 @@ function usePinnedMessages({
   };
 }
 
-export { AUDIO_MIME_TYPE, ChannelSettings, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, ConversationList, ConversationListItem, DEEP_LINK_PREFIX, EVENTS, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, MessageActionsMenu, MessageBubble, MessageInput, MessageList, ParticipantsList, PatientHeader, PinnedMessagesBar, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, TYPING_DEBOUNCE_MS, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
+export { AUDIO_MIME_TYPE, ChannelSettings, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, ConversationList, ConversationListItem, DEEP_LINK_PREFIX, EVENTS, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, MessageActionsMenu, MessageBubble, MessageInput, MessageList, ParticipantsList, PatientHeader, PinnedMessagesBar, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, applyThemeOverrides, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map