@natoe/colab 0.1.12 → 0.1.13

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';
@@ -315,6 +315,173 @@ 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"
+};
+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'
+};
+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 — not themeable, taken from Tailwind's zinc-leaning
+  // slate to match the package's existing tonal balance.
+  white: "#ffffff",
+  neutral50: "#f9fafb",
+  neutral100: "#f3f4f6",
+  neutral200: "#e5e7eb",
+  neutral300: "#d1d5db",
+  neutral400: "#9ca3af",
+  neutral500: "#6b7280",
+  neutral600: "#4b5563",
+  neutral700: "#374151",
+  neutral800: "#1f2937",
+  neutral900: "#111827",
+  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 +500,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 +718,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
         config,
         apiBaseUrl,
         totalUnread,
+        unreadCounts,
         requestPreview,
         invalidatePreview,
         fetchMessages,
@@ -725,26 +896,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;
@@ -825,7 +992,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 +1045,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);
@@ -1203,102 +1370,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);
@@ -1315,15 +1386,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 +1423,55 @@ 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__ */ jsx(
+          "button",
+          {
+            onClick: onOpenSettings,
+            style: styles.settingsIconButton,
+            type: "button",
+            "aria-label": "Open channel settings",
+            title: "Settings",
+            children: /* @__PURE__ */ jsx(SettingsIcon, { size: 18, color: COLOR.neutral600 })
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 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 +1488,90 @@ 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: {
+  // Settings is icon-only (40x40 tile) since it's a secondary action
+  // and View DICOM already carries a label.
+  settingsIconButton: {
+    width: SIZE.control,
+    height: SIZE.control,
     display: "inline-flex",
     alignItems: "center",
-    gap: SPACE.S2,
-    minHeight: SIZE.control,
-    padding: `${SPACE.S2} ${SPACE.S4}`,
-    fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.medium,
-    color: COLOR.neutral700,
+    justifyContent: "center",
     backgroundColor: COLOR.white,
-    border: `1px solid ${COLOR.neutral300}`,
-    borderRadius: RADIUS.md,
-    cursor: "pointer"
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.lg,
+    color: COLOR.neutral600,
+    cursor: "pointer",
+    flexShrink: 0
   }
 };
 function ReplyQuoteBlock({
@@ -1470,10 +1580,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 +1955,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 +2112,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 +2283,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 +2311,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 +2501,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 +2658,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 +2676,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 +2759,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 +2862,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 +3141,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 +3184,7 @@ function MessageInput({
           style: styles8.textarea
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: handleSendText,
@@ -2947,10 +3193,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 +3261,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 +3375,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,45 +3991,6 @@ var styles12 = {
     letterSpacing: "0.4px"
   }
 };
-
-// src/core/styles.ts
-var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-var ROOT_CLASS = "natoe-colab-root";
-var GLOBAL_STYLE_ID = "natoe-colab-global-styles";
-var GLOBAL_CSS = `
-@keyframes natoe-colab-spin { to { transform: rotate(360deg); } }
-
-@keyframes natoe-colab-message-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* High-contrast adjustments \u2014 older users on OS-level high-contrast mode
-   get heavier borders and stronger text without losing the package look. */
-@media (prefers-contrast: more) {
-  .${ROOT_CLASS} {
-    color: #000000;
-  }
-  .${ROOT_CLASS} button {
-    outline: 1px solid currentColor;
-  }
-}
-
-/* Honour reduced-motion preferences by killing entry animations. */
-@media (prefers-reduced-motion: reduce) {
-  .${ROOT_CLASS} [data-natoe-message-bubble] {
-    animation: none !important;
-  }
-}
-`;
-function ensureGlobalStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(GLOBAL_STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = GLOBAL_STYLE_ID;
-  style.textContent = GLOBAL_CSS;
-  document.head.appendChild(style);
-}
 ensureGlobalStyles();
 function CollabPanel({
   orderId,
@@ -4007,6 +4239,7 @@ function CollabPopup({
   isOpen,
   onClose,
   onBack,
+  onMinimize,
   initialPosition,
   width = 380,
   height = 520,
@@ -4122,35 +4355,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 +4419,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,
@@ -4521,10 +4794,14 @@ function InlineMessageRow({ message }) {
 }
 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] } });
 }
@@ -4946,6 +5223,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 +5234,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 +5262,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 +5400,191 @@ 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 [query, setQuery] = useState("");
-  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const [filter, setFilter] = useState("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 +5597,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 +5776,6 @@ var COMPACT_BREAKPOINT = 720;
 function CollabInbox({
   initialConversationId,
   onSelectConversation,
-  title,
   className,
   style
 }) {
@@ -5366,8 +5812,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 +5825,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 +5859,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 +6238,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