diff --git a/.gitignore b/.gitignore
index b2313c9645..d0afa73df2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -70,6 +70,7 @@ next-env.d.ts
 # agent/QA artifacts
 .codex-screenshots/
 /worktrees/
+.worktrees/
 /docs/mockups/
 # design/UX review scratch dumps (favourites-review, tools-page-review, etc.) — never commit
 artifacts/
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index a0c6575a84..002dcf7dbf 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -337,7 +337,7 @@ export function MasterSearchHeader({
   const modeButtonRef = useRef<HTMLButtonElement | null>(null);
   const modeOptionRefs = useRef<Array<HTMLButtonElement | null>>([]);
   const scopePopoverRef = useRef<HTMLDivElement | null>(null);
-  const scopeSummaryRef = useRef<HTMLButtonElement | null>(null);
+  const actionMenuTriggerRef = useRef<HTMLButtonElement | null>(null);
   const scopeFilterInputRef = useRef<HTMLInputElement | null>(null);
   const selectedDocumentIdSet = useMemo(() => new Set(selectedDocumentIds), [selectedDocumentIds]);
   const documentById = useMemo(() => new Map(documents.map((document) => [document.id, document])), [documents]);
@@ -643,12 +643,12 @@ export function MasterSearchHeader({
 
   const closeScope = useCallback((restoreFocus = false) => {
     setScopeOpen(false);
-    if (restoreFocus) scopeSummaryRef.current?.focus();
+    if (restoreFocus) actionMenuTriggerRef.current?.focus();
   }, []);
 
   const closeScopeSheet = useCallback(() => {
     setScopeSheetOpen(false);
-    window.requestAnimationFrame(() => scopeSummaryRef.current?.focus());
+    window.requestAnimationFrame(() => actionMenuTriggerRef.current?.focus());
   }, []);
 
   useEffect(() => {
@@ -750,8 +750,8 @@ export function MasterSearchHeader({
 
   useDismissableLayer({
     enabled: scopeOpen,
-    refs: [scopePopoverRef, scopeSummaryRef],
-    restoreFocusRef: scopeSummaryRef,
+    refs: [scopePopoverRef, actionMenuTriggerRef],
+    restoreFocusRef: actionMenuTriggerRef,
     onDismiss: dismissScope,
   });
 
@@ -1052,7 +1052,7 @@ export function MasterSearchHeader({
     const usesSendAffordance = searchMode === "answer" || usesFooterChipLayout;
     const usesModeIdentityAffordance = usesBottomComposerPlacement && !usesSendAffordance;
     const ModeIdentityIcon = appModeIcons[searchMode];
-    const hasScopeFooterChip = searchMode === "answer" || searchMode === "documents" || searchMode === "forms";
+    const supportsDocumentScope = searchMode === "answer" || searchMode === "documents" || searchMode === "forms";
     const composerPlaceholder =
       usesMobileBottomStyle && searchMode === "differentials" ? "Search a presentation" : queryPlaceholder;
 
@@ -1077,18 +1077,12 @@ export function MasterSearchHeader({
               : usesMobileBottomStyle
                 ? cn(
                     "document-mobile-search-edge universal-top-search-edge fixed z-40 mx-auto max-w-3xl sm:z-20 sm:w-full sm:px-4 sm:py-3 lg:max-w-4xl",
-                    // Hero-placement mode-homes (services/forms) portal the composer into
-                    // the hero from sm up. Hide the default (non-portaled) composer at sm+
-                    // so it never briefly flashes as an overlapping float over the hero
-                    // before the portal activates; the mobile fixed-bottom slot still shows
-                    // below sm. Other homes keep a sticky bar until the portal lifts it.
                     isHeroDesktopComposer ? "sm:hidden" : "sm:sticky sm:top-[calc(4.75rem+env(safe-area-inset-top))]",
                   )
                 : "universal-top-search-edge sticky top-[calc(4.75rem+env(safe-area-inset-top))] z-20 mx-auto box-border w-full px-3 py-3 sm:px-4",
           usesBottomComposerPlacement && "answer-footer-search-edge",
           usesPhoneFooterDock && "answer-footer-search-dock",
           usesCompactMobileBottomStyle && "document-mobile-search-compact",
-          usesFooterChipLayout && "flex flex-col items-center gap-2.5",
           shouldHideBottomOnScroll &&
             "max-sm:transition-transform max-sm:duration-200 max-sm:ease-out motion-reduce:transition-none",
         )}
@@ -1177,8 +1171,10 @@ export function MasterSearchHeader({
               onModeSelect={selectAppModeById}
               onPlacementChange={setActionMenuPlacement}
               triggerClassName="answer-footer-search-action"
-              triggerRef={scopeSummaryRef}
+              triggerRef={actionMenuTriggerRef}
               integrated={usesFooterChipLayout}
+              integratedChipRow={false}
+              dismissIgnoreRefs={[modeMenuRef]}
             />
 
             {/* The clear button is a flex sibling (not absolutely positioned): the
@@ -1243,7 +1239,7 @@ export function MasterSearchHeader({
         </UniversalSearchCommandSurface>
         {/* Scope popover is a form sibling so the "+" menu's "Set scope" action can
             open it even when the footer chip row is not shown. */}
-        {hasScopeFooterChip && !usesScopeSheet && scopeOpen ? (
+        {supportsDocumentScope && !usesScopeSheet && scopeOpen ? (
           <div
             ref={scopePopoverRef}
             data-testid="scope-command-popover"
@@ -1262,6 +1258,7 @@ export function MasterSearchHeader({
           description="Choose documents and filters for the next search."
           closeLabel="Close document scope"
           initialFocusRef={scopeFilterInputRef}
+          returnFocusRef={actionMenuTriggerRef}
           headerLeading={
             <span className="grid h-10 w-10 place-items-center rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
               <Filter className="h-5 w-5" aria-hidden="true" />
@@ -1374,7 +1371,7 @@ export function MasterSearchHeader({
 
           <div
             ref={modeMenuRef}
-            className={cn("relative z-40 min-w-0", isWorkflowHeader ? "justify-self-start" : "justify-self-center")}
+            className={cn("relative z-[60] min-w-0", isWorkflowHeader ? "justify-self-start" : "justify-self-center")}
           >
             <button
               ref={modeButtonRef}
diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx
index 9dd64da107..6f9a2c5adf 100644
--- a/src/components/clinical-dashboard/mode-action-popup.tsx
+++ b/src/components/clinical-dashboard/mode-action-popup.tsx
@@ -9,7 +9,9 @@ import {
   type CSSProperties,
   type KeyboardEvent as ReactKeyboardEvent,
   type Ref,
+  type RefObject,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   BadgeCheck,
   Check,
@@ -39,6 +41,30 @@ import { cn, chatComposerIconButton } from "@/components/ui-primitives";
 export type ModeActionSetId = "answer" | "documents" | "services" | "favourites" | "tools" | "differentials";
 export type ModeActionPlacement = "up" | "down";
 
+type IntegratedSurfaceLayout = {
+  placement: ModeActionPlacement;
+  left: number;
+  width: number;
+  top?: number;
+  bottom?: number;
+};
+
+function integratedActionGridColumns(itemCount: number) {
+  if (itemCount >= 6) return 2;
+  if (itemCount >= 3) return 2;
+  return 2;
+}
+
+function estimateIntegratedMenuHeights(itemCount: number, integrated: boolean) {
+  const rows = Math.ceil(itemCount / integratedActionGridColumns(itemCount));
+  const rowHeight = 74;
+  const rowGap = 8;
+  const bodyPadding = integrated ? 24 : 20;
+  const minBodyHeight = rows * rowHeight + Math.max(0, rows - 1) * rowGap + bodyPadding;
+  const headerHeight = 92;
+  return { minBodyHeight, minSurfaceHeight: minBodyHeight + headerHeight, headerHeight };
+}
+
 export type ModeActionModeOption = {
   id: string;
   label: string;
@@ -270,8 +296,10 @@ export function ModeActionPopup({
   onModeSelect,
   onPlacementChange,
   triggerClassName,
-  triggerRef,
   integrated = false,
+  integratedChipRow = true,
+  triggerRef,
+  dismissIgnoreRefs,
 }: {
   open: boolean;
   title: string;
@@ -289,6 +317,10 @@ export function ModeActionPopup({
   triggerClassName?: string;
   triggerRef?: Ref<HTMLButtonElement>;
   integrated?: boolean;
+  /** When false, the integrated menu skips the footer chip-row clearance offset. */
+  integratedChipRow?: boolean;
+  /** Header-owned controls (e.g. app mode trigger) that must stay clickable above the portaled menu. */
+  dismissIgnoreRefs?: readonly RefObject<HTMLElement | null>[];
 }) {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -299,6 +331,7 @@ export function ModeActionPopup({
   const [placement, setPlacement] = useState<ModeActionPlacement>("up");
   const [surfaceMaxHeight, setSurfaceMaxHeight] = useState<number | null>(null);
   const [bodyMaxHeight, setBodyMaxHeight] = useState<number | null>(null);
+  const [integratedSurfaceLayout, setIntegratedSurfaceLayout] = useState<IntegratedSurfaceLayout | null>(null);
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
   const canSwitchMode = Boolean(modeOptions?.length && onModeSelect);
   const selectedModeOption = modeOptions?.find((mode) => mode.id === selectedModeId);
@@ -311,7 +344,7 @@ export function ModeActionPopup({
 
   useDismissableLayer({
     enabled: open,
-    refs: [rootRef, surfaceRef],
+    refs: [rootRef, surfaceRef, ...(dismissIgnoreRefs ?? [])],
     restoreFocusRef: buttonRef,
     onDismiss: () => {
       setModeSelectorOpen(false);
@@ -326,7 +359,7 @@ export function ModeActionPopup({
 
   const updatePlacement = useCallback(() => {
     if (typeof window === "undefined") return;
-    const anchor = surfaceRef.current?.parentElement ?? rootRef.current?.parentElement ?? rootRef.current;
+    const anchor = buttonRef.current ?? rootRef.current?.parentElement ?? rootRef.current;
     if (!anchor) return;
 
     const viewport = window.visualViewport;
@@ -337,20 +370,53 @@ export function ModeActionPopup({
     const edgePadding = 12;
     const availableAbove = Math.max(0, rect.top - viewportTop - edgePadding);
     const availableBelow = Math.max(0, viewportBottom - rect.bottom - edgePadding);
-    const nextPlacement: ModeActionPlacement = availableBelow > availableAbove + 40 ? "down" : "up";
+    const { minBodyHeight, minSurfaceHeight, headerHeight } = estimateIntegratedMenuHeights(items.length, integrated);
     const detachedUpOffset = 16;
-    const detachedDownOffset = integrated ? 72 : 14;
-    const available =
-      nextPlacement === "up"
-        ? Math.max(0, availableAbove - detachedUpOffset)
-        : Math.max(0, availableBelow - detachedDownOffset);
+    const integratedDownOffset = integratedChipRow ? 58 : 14;
+    const detachedDownOffset = integrated ? integratedDownOffset : 14;
+    const spaceAbove = Math.max(0, availableAbove - detachedUpOffset);
+    const spaceBelow = Math.max(0, availableBelow - detachedDownOffset);
+
+    let nextPlacement: ModeActionPlacement;
+    if (integrated) {
+      const canFitAbove = spaceAbove >= minSurfaceHeight;
+      const canFitBelow = spaceBelow >= minSurfaceHeight;
+      if (canFitAbove && !canFitBelow) {
+        nextPlacement = "up";
+      } else if (canFitBelow && !canFitAbove) {
+        nextPlacement = "down";
+      } else {
+        // In-flow hero composers sit above page content; opening upward avoids
+        // clipping inside scroll containers and the dead space below centred homes.
+        nextPlacement = spaceBelow > spaceAbove + 80 ? "down" : "up";
+      }
+    } else {
+      nextPlacement = availableBelow > availableAbove + 40 ? "down" : "up";
+    }
+
+    const available = nextPlacement === "up" ? spaceAbove : spaceBelow;
     const nextSurfaceMaxHeight = Math.max(220, Math.floor(Math.min(available, viewportHeight - edgePadding * 2)));
-    const nextBodyMaxHeight = Math.max(156, nextSurfaceMaxHeight - 92);
+    const nextBodyMaxHeight = Math.max(156, nextSurfaceMaxHeight - headerHeight);
 
     setPlacement((current) => (current === nextPlacement ? current : nextPlacement));
     setSurfaceMaxHeight((current) => (current === nextSurfaceMaxHeight ? current : nextSurfaceMaxHeight));
     setBodyMaxHeight((current) => (current === nextBodyMaxHeight ? current : nextBodyMaxHeight));
-  }, [integrated]);
+
+    if (integrated) {
+      const maxSurfaceWidth = Math.min(window.innerWidth - edgePadding * 2, 400);
+      const surfaceLeft = Math.max(edgePadding, Math.min(rect.left, window.innerWidth - maxSurfaceWidth - edgePadding));
+      setIntegratedSurfaceLayout({
+        placement: nextPlacement,
+        left: surfaceLeft,
+        width: maxSurfaceWidth,
+        ...(nextPlacement === "up"
+          ? { bottom: window.innerHeight - rect.top + 14 }
+          : { top: rect.bottom + integratedDownOffset }),
+      });
+    } else {
+      setIntegratedSurfaceLayout(null);
+    }
+  }, [integrated, integratedChipRow, items.length]);
 
   function openWithFocus(index: number) {
     onBeforeOpen?.();
@@ -469,6 +535,11 @@ export function ModeActionPopup({
     updatePlacement();
   }, [items.length, open, title, updatePlacement]);
 
+  useEffect(() => {
+    if (open) return;
+    queueMicrotask(() => setIntegratedSurfaceLayout(null));
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     onPlacementChange?.(placement);
@@ -493,164 +564,181 @@ export function ModeActionPopup({
   const surfaceStyle = {
     "--mode-action-max-height": surfaceMaxHeight ? `${surfaceMaxHeight}px` : undefined,
     "--mode-action-body-max-height": bodyMaxHeight ? `${bodyMaxHeight}px` : undefined,
+    ...(integrated && integratedSurfaceLayout
+      ? {
+          left: `${integratedSurfaceLayout.left}px`,
+          width: `${integratedSurfaceLayout.width}px`,
+          ...(integratedSurfaceLayout.top !== undefined ? { top: `${integratedSurfaceLayout.top}px` } : {}),
+          ...(integratedSurfaceLayout.bottom !== undefined ? { bottom: `${integratedSurfaceLayout.bottom}px` } : {}),
+        }
+      : {}),
   } as CSSProperties;
 
-  return (
-    <>
-      {open ? (
-        <div
-          ref={surfaceRef}
-          data-placement={placement}
-          style={surfaceStyle}
-          className={cn(
-            "mode-action-surface absolute z-50 text-[color:var(--text)]",
-            integrated ? "inset-x-0" : "inset-x-0 sm:inset-x-auto sm:left-0",
-            placement === "up"
-              ? "bottom-[calc(100%+0.875rem)]"
-              : integrated
-                ? "top-[calc(100%+3.65rem)]"
-                : "top-[calc(100%+0.875rem)]",
-            !integrated && (items.length <= 4 ? "sm:w-[min(22rem,100%)]" : "sm:w-[min(24rem,100%)]"),
-          )}
-        >
-          <div
-            className={cn(
-              "mode-action-panel overflow-hidden border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] shadow-[0_18px_42px_rgb(15_37_48_/_16%)] ring-1 ring-white/45 dark:ring-white/10",
-              integrated ? "rounded-[1.35rem] shadow-[0_20px_48px_rgb(15_37_48_/_18%)]" : "rounded-[1rem]",
-            )}
-          >
-            <div className="mode-action-header border-b border-white/15">
-              <div className="mode-action-selector-shell">
-                <button
-                  type="button"
-                  ref={modeButtonRef}
-                  disabled={!canSwitchMode}
-                  aria-haspopup={canSwitchMode ? "menu" : undefined}
-                  aria-expanded={canSwitchMode ? modeSelectorOpen : undefined}
-                  aria-controls={modeSelectorOpen ? "mode-action-mode-menu" : undefined}
-                  onKeyDown={handleModeButtonKeyDown}
-                  onClick={() => canSwitchMode && setModeSelectorOpen((current) => !current)}
-                  className="mode-action-mode-button"
-                >
-                  <span className="mode-action-mode-icon">
-                    <TitleIcon className="h-4.5 w-4.5" />
-                  </span>
-                  <span className="min-w-0 truncate">{title}</span>
-                  {canSwitchMode ? (
-                    <ChevronDown
-                      className={cn("h-4.5 w-4.5 shrink-0 transition", modeSelectorOpen && "rotate-180")}
-                      aria-hidden="true"
-                    />
-                  ) : null}
-                </button>
-                {modeSelectorOpen && modeOptions?.length ? (
-                  <div
-                    id="mode-action-mode-menu"
-                    role="menu"
-                    aria-label="Choose search mode"
-                    className="mode-action-mode-menu polished-scroll"
-                  >
-                    {modeOptions.map((mode, index) => {
-                      const Icon = mode.icon;
-                      const active = mode.id === selectedModeId;
-                      return (
-                        <button
-                          key={mode.id}
-                          ref={(element) => {
-                            modeOptionRefs.current[index] = element;
-                          }}
-                          type="button"
-                          role="menuitemradio"
-                          aria-checked={active}
-                          disabled={mode.disabled}
-                          onKeyDown={(event) => handleModeOptionKeyDown(event, index)}
-                          onClick={() => selectMode(mode)}
-                          className={cn("mode-action-mode-option", active && "mode-action-mode-option-active")}
-                        >
-                          <span className="mode-action-mode-option-icon">
-                            <Icon className="h-4 w-4" />
-                          </span>
-                          <span className="min-w-0">
-                            <span className="block truncate text-sm font-extrabold">{mode.label}</span>
-                            {mode.description ? (
-                              <span className="block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
-                                {mode.description}
-                              </span>
-                            ) : null}
-                          </span>
-                          {active ? <Check className="h-4 w-4 text-[color:var(--clinical-accent)]" /> : null}
-                        </button>
-                      );
-                    })}
-                  </div>
-                ) : null}
-              </div>
-              <div className="mode-action-header-summary">
-                <span aria-hidden="true" className="mode-action-header-divider" />
-                <span className="min-w-0 truncate">{headerSubtitle}</span>
-              </div>
-              <button
-                type="button"
-                onClick={closeAndRestoreFocus}
-                className="mode-action-close"
-                aria-label={`Close ${title.toLowerCase()} options`}
-              >
-                <BadgeCheck className="h-4.5 w-4.5" />
-              </button>
-            </div>
-            <div
-              id="daily-actions-sheet"
-              data-testid="daily-actions-menu"
-              role="menu"
-              aria-label={title}
-              className={cn("mode-action-body polished-scroll p-2.5", integrated && "p-3 sm:p-3.5")}
+  const integratedDownOffsetClass = integratedChipRow ? "top-[calc(100%+3.65rem)]" : "top-[calc(100%+0.875rem)]";
+
+  const actionSurface = open ? (
+    <div
+      ref={surfaceRef}
+      data-placement={placement}
+      style={surfaceStyle}
+      className={cn(
+        "mode-action-surface z-50 text-[color:var(--text)]",
+        integrated && integratedSurfaceLayout ? "fixed" : "absolute",
+        integrated && integratedSurfaceLayout ? null : integrated ? "inset-x-0" : "inset-x-0 sm:inset-x-auto sm:left-0",
+        !integrated || !integratedSurfaceLayout
+          ? placement === "up"
+            ? "bottom-[calc(100%+0.875rem)]"
+            : integrated
+              ? integratedDownOffsetClass
+              : "top-[calc(100%+0.875rem)]"
+          : null,
+        !integrated && (items.length <= 4 ? "sm:w-[min(22rem,100%)]" : "sm:w-[min(24rem,100%)]"),
+      )}
+    >
+      <div
+        className={cn(
+          "mode-action-panel overflow-hidden border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] shadow-[0_18px_42px_rgb(15_37_48_/_16%)] ring-1 ring-white/45 dark:ring-white/10",
+          integrated ? "rounded-[1.35rem] shadow-[0_20px_48px_rgb(15_37_48_/_18%)]" : "rounded-[1rem]",
+        )}
+      >
+        <div className="mode-action-header border-b border-white/15">
+          <div className="mode-action-selector-shell">
+            <button
+              type="button"
+              ref={modeButtonRef}
+              disabled={!canSwitchMode}
+              aria-haspopup={canSwitchMode ? "menu" : undefined}
+              aria-expanded={canSwitchMode ? modeSelectorOpen : undefined}
+              aria-controls={modeSelectorOpen ? "mode-action-mode-menu" : undefined}
+              onKeyDown={handleModeButtonKeyDown}
+              onClick={() => canSwitchMode && setModeSelectorOpen((current) => !current)}
+              className="mode-action-mode-button"
             >
-              <div className={cn("grid gap-2", actionGridClass)}>
-                {items.map((item, index) => {
-                  const Icon = item.icon;
+              <span className="mode-action-mode-icon">
+                <TitleIcon className="h-4.5 w-4.5" />
+              </span>
+              <span className="min-w-0 truncate">{title}</span>
+              {canSwitchMode ? (
+                <ChevronDown
+                  className={cn("h-4.5 w-4.5 shrink-0 transition", modeSelectorOpen && "rotate-180")}
+                  aria-hidden="true"
+                />
+              ) : null}
+            </button>
+            {modeSelectorOpen && modeOptions?.length ? (
+              <div
+                id="mode-action-mode-menu"
+                role="menu"
+                aria-label="Choose search mode"
+                className="mode-action-mode-menu polished-scroll"
+              >
+                {modeOptions.map((mode, index) => {
+                  const Icon = mode.icon;
+                  const active = mode.id === selectedModeId;
                   return (
                     <button
-                      key={item.id}
-                      ref={(element) => assignActionRef(element, index)}
+                      key={mode.id}
+                      ref={(element) => {
+                        modeOptionRefs.current[index] = element;
+                      }}
                       type="button"
-                      role="menuitem"
-                      onKeyDown={(event) => handleItemKeyDown(event, index)}
-                      onClick={() => runActionAndClose(item.id)}
-                      className={cn(
-                        "group grid min-h-[4.6rem] place-items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-2 text-center shadow-[var(--shadow-inset)] transition motion-safe:duration-150 sm:min-h-[4.85rem]",
-                        "hover:border-[color:var(--clinical-accent)]/32 hover:bg-[color:var(--clinical-accent-soft)]/24 active:scale-[0.985]",
-                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
-                      )}
+                      role="menuitemradio"
+                      aria-checked={active}
+                      disabled={mode.disabled}
+                      onKeyDown={(event) => handleModeOptionKeyDown(event, index)}
+                      onClick={() => selectMode(mode)}
+                      className={cn("mode-action-mode-option", active && "mode-action-mode-option-active")}
                     >
-                      <span className="grid h-9 w-9 place-items-center rounded-lg text-[color:var(--text-heading)] transition group-hover:text-[color:var(--clinical-accent)]">
-                        <Icon className="h-5 w-5" />
+                      <span className="mode-action-mode-option-icon">
+                        <Icon className="h-4 w-4" />
                       </span>
-                      <span className="max-w-full text-balance text-xs font-bold leading-4 text-[color:var(--text-heading)]">
-                        {item.shortLabel ?? item.label}
+                      <span className="min-w-0">
+                        <span className="block truncate text-sm font-extrabold">{mode.label}</span>
+                        {mode.description ? (
+                          <span className="block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
+                            {mode.description}
+                          </span>
+                        ) : null}
                       </span>
+                      {active ? <Check className="h-4 w-4 text-[color:var(--clinical-accent)]" /> : null}
                     </button>
                   );
                 })}
               </div>
-            </div>
+            ) : null}
+          </div>
+          <div className="mode-action-header-summary">
+            <span aria-hidden="true" className="mode-action-header-divider" />
+            <span className="min-w-0 truncate">{headerSubtitle}</span>
+          </div>
+          <button
+            type="button"
+            onClick={closeAndRestoreFocus}
+            className="mode-action-close"
+            aria-label={`Close ${title.toLowerCase()} options`}
+          >
+            <BadgeCheck className="h-4.5 w-4.5" />
+          </button>
+        </div>
+        <div
+          id="daily-actions-sheet"
+          data-testid="daily-actions-menu"
+          role="menu"
+          aria-label={title}
+          className={cn("mode-action-body polished-scroll p-2.5", integrated && "p-3 sm:p-3.5")}
+        >
+          <div className={cn("grid gap-2", actionGridClass)}>
+            {items.map((item, index) => {
+              const Icon = item.icon;
+              return (
+                <button
+                  key={item.id}
+                  ref={(element) => assignActionRef(element, index)}
+                  type="button"
+                  role="menuitem"
+                  onKeyDown={(event) => handleItemKeyDown(event, index)}
+                  onClick={() => runActionAndClose(item.id)}
+                  className={cn(
+                    "group grid min-h-[4.6rem] place-items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-2 text-center shadow-[var(--shadow-inset)] transition motion-safe:duration-150 sm:min-h-[4.85rem]",
+                    "hover:border-[color:var(--clinical-accent)]/32 hover:bg-[color:var(--clinical-accent-soft)]/24 active:scale-[0.985]",
+                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
+                  )}
+                >
+                  <span className="grid h-9 w-9 place-items-center rounded-lg text-[color:var(--text-heading)] transition group-hover:text-[color:var(--clinical-accent)]">
+                    <Icon className="h-5 w-5" />
+                  </span>
+                  <span className="max-w-full text-balance text-xs font-bold leading-4 text-[color:var(--text-heading)]">
+                    {item.shortLabel ?? item.label}
+                  </span>
+                </button>
+              );
+            })}
           </div>
-          {!integrated ? (
-            <>
-              {placement === "up" ? (
-                <span
-                  aria-hidden="true"
-                  className="pointer-events-none absolute -bottom-[6px] left-8 h-3 w-3 rotate-45 border-b border-r border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[4px_4px_10px_rgb(15_37_48_/_5%)]"
-                />
-              ) : (
-                <span
-                  aria-hidden="true"
-                  className="pointer-events-none absolute -top-[6px] left-8 h-3 w-3 rotate-45 border-l border-t border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[-4px_-4px_10px_rgb(15_37_48_/_5%)]"
-                />
-              )}
-            </>
-          ) : null}
         </div>
+      </div>
+      {!integrated ? (
+        <>
+          {placement === "up" ? (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute -bottom-[6px] left-8 h-3 w-3 rotate-45 border-b border-r border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[4px_4px_10px_rgb(15_37_48_/_5%)]"
+            />
+          ) : (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute -top-[6px] left-8 h-3 w-3 rotate-45 border-l border-t border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[-4px_-4px_10px_rgb(15_37_48_/_5%)]"
+            />
+          )}
+        </>
       ) : null}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {integrated && open && typeof document !== "undefined"
+        ? createPortal(actionSurface, document.body)
+        : actionSurface}
 
       <div ref={rootRef} className="relative shrink-0">
         <button
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index 02e77c13d5..0593c8ba90 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -708,8 +708,14 @@ async function openUploadDrawer(page: Page) {
   return uploadDrawer;
 }
 
-async function openDailyActions(page: Page) {
-  const trigger = page.getByRole("button", { name: /^Open .+ options$/ });
+async function dismissOverlayByHeaderClick(page: Page) {
+  // Portaled integrated action menus cover the hero composer; avoid fixed viewport
+  // coordinates that can hit menu tiles (e.g. Clinical tools -> tools mode).
+  await page.locator("#search").click({ position: { x: 120, y: 28 } });
+}
+
+async function openDailyActions(page: Page, triggerName: string | RegExp = /^Open .+ options$/) {
+  const trigger = page.getByRole("button", { name: triggerName });
   const menu = page.getByTestId("daily-actions-menu");
 
   await expect(trigger).toBeVisible();
@@ -1048,18 +1054,13 @@ test.describe("Clinical KB UI smoke coverage", () => {
     await expect(dailyActionsMenu).toHaveCount(0);
 
     // First open — use robust retry helper to handle async state update timing.
-    await openDailyActions(page);
-    await expect(async () => {
-      if (await dailyActionsMenu.isVisible().catch(() => false)) {
-        // Top-left avoids integrated menu panels that can intercept center clicks in CI.
-        await page.mouse.click(8, 8);
-      }
-      await expect(dailyActionsMenu).toHaveCount(0);
-      await expect(dailyActionsTrigger).toHaveAttribute("aria-expanded", "false");
-    }).toPass({ timeout: 10_000 });
+    await openDailyActions(page, "Open answer options");
+    await dismissOverlayByHeaderClick(page);
+    await expect(dailyActionsMenu).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Mode Answer" })).toBeVisible();
 
     // Second open - verify opening the mode menu closes the daily actions surface.
-    await openDailyActions(page);
+    await openDailyActions(page, "Open answer options");
     await appModeTrigger.click();
 
     await expect(dailyActionsMenu).toHaveCount(0);
@@ -1310,7 +1311,7 @@ test.describe("Clinical KB UI smoke coverage", () => {
     expect(popoverMetrics.height).toBeLessThanOrEqual(Math.ceil(popoverMetrics.viewportHeight * 0.72));
     await page.keyboard.press("Escape");
     await expect(scopePopover).toBeHidden();
-    await expect(page.getByTestId("global-search-input")).toBeFocused();
+    await expect(page.getByRole("button", { name: "Open answer options" })).toBeFocused();
     await expectNoPageHorizontalOverflow(page);
   });