diff --git a/client/src/components/Nav/Settings/registry.tsx b/client/src/components/Nav/Settings/registry.tsx
index 0d6ef12b58..081959157d 100644
--- a/client/src/components/Nav/Settings/registry.tsx
+++ b/client/src/components/Nav/Settings/registry.tsx
@@ -121,6 +121,19 @@ export const registry: SettingEntry[] = [
       switchId: 'showScrollButton',
     }),
   },
+  {
+    id: 'mobileDrawerStrip',
+    tab: GENERAL,
+    section: 'layout',
+    labelKey: 'com_nav_mobile_drawer_strip',
+    keywords: ['mobile', 'sidebar', 'drawer', 'swipe'],
+    Component: toggleControl({
+      stateAtom: store.mobileDrawerStrip,
+      localizationKey: 'com_nav_mobile_drawer_strip',
+      hoverCardText: 'com_nav_mobile_drawer_strip_info',
+      switchId: 'mobileDrawerStrip',
+    }),
+  },
   {
     id: 'chatTitleInTab',
     tab: GENERAL,
diff --git a/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx b/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx
index dc0647b5e4..7495e14051 100644
--- a/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx
+++ b/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState, useEffect, useRef, memo } from 'react';
 import { useForm } from 'react-hook-form';
+import { useMediaQuery } from '@librechat/client';
 import { useLocation, useNavigate } from 'react-router-dom';
 import type { ReactNode } from 'react';
 import type { ChatFormValues } from '~/common';
@@ -8,9 +9,10 @@ import {
   EXPANDED_MIN,
   TRANSITION_MS,
   EASING,
-  SIDEBAR_TRANSITION,
+  MOBILE_DRAWER_TRANSITION,
   DRAWER_Z_INDEX,
   MOBILE_DRAWER_ID,
+  MOBILE_DRAWER_WIDTH,
 } from './constants';
 import { ChatContext, ChatFormProvider, ActivePanelProvider } from '~/Providers';
 import { MobileHeader, MobileBottomBar, MobileShortcutTargets } from './mobile';
@@ -49,6 +51,7 @@ function UnifiedSidebar() {
   const navigate = useNavigate();
   const { isSmallScreen, expanded } = useSidebarState();
   const { setSidebarOpen } = useSidebarToggle();
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   const [sidebarWidth, setSidebarWidth] = useState(getInitialWidth);
   const [viewportWidth, setViewportWidth] = useState(() => window.innerWidth);
   const [isResizing, setIsResizing] = useState(false);
@@ -188,10 +191,17 @@ function UnifiedSidebar() {
           /** The close swipe reads horizontal touches here (the drawer holds no
            * horizontal scrollers), while pinch-zoom stays with the browser —
            * this full-viewport surface must not disable zooming entirely. */
-          'fixed inset-y-0 left-0 flex w-full touch-pan-y touch-pinch-zoom flex-col bg-surface-primary-alt',
+          'fixed inset-y-0 left-0 flex touch-pan-y touch-pinch-zoom flex-col bg-surface-primary-alt',
           expanded ? 'translate-x-0' : '-translate-x-full',
         )}
-        style={{ transition: SIDEBAR_TRANSITION, zIndex: DRAWER_Z_INDEX }}
+        style={{
+          width: MOBILE_DRAWER_WIDTH,
+          /** The strip setting changes the width without passing through the
+           *  snap path, so the preference has to reach the declarative style
+           *  too or that one change still animates. */
+          transition: prefersReducedMotion ? undefined : MOBILE_DRAWER_TRANSITION,
+          zIndex: DRAWER_Z_INDEX,
+        }}
         inert={!expanded ? '' : undefined}
       >
         <SidebarChatProvider>
diff --git a/client/src/components/UnifiedSidebar/constants.ts b/client/src/components/UnifiedSidebar/constants.ts
index ba26af57bc..8953123590 100644
--- a/client/src/components/UnifiedSidebar/constants.ts
+++ b/client/src/components/UnifiedSidebar/constants.ts
@@ -1,7 +1,32 @@
 export const COLLAPSED_WIDTH = 52;
 export const EXPANDED_MIN = 360;
+
+/**
+ * How much of the viewport the mobile drawer covers.
+ *
+ * Full width by default, where the drawer reads as its own screen and the
+ * swipe closes it. Opting into the strip stops it short of the edge so a slice
+ * of the conversation stays visible, which keeps the drawer reading as a layer
+ * over the conversation and gives the close gesture a target to tap.
+ *
+ * Both the drawer and the pane read the one custom property, so their travel
+ * cannot drift apart (see SIDEBAR_TRANSITION) and the setting can change at
+ * runtime without threading a number through either. The fallback is the
+ * default, so anything rendered outside the property's scope still agrees.
+ */
+export const MOBILE_DRAWER_WIDTH_VAR = '--mobile-drawer-width';
+export const MOBILE_DRAWER_FULL_WIDTH = '100%';
+export const MOBILE_DRAWER_STRIP_WIDTH = '80%';
+export const MOBILE_DRAWER_WIDTH = `var(${MOBILE_DRAWER_WIDTH_VAR}, ${MOBILE_DRAWER_FULL_WIDTH})`;
+export const MOBILE_PANE_SHIFT = `translateX(${MOBILE_DRAWER_WIDTH})`;
 export const TRANSITION_MS = 300;
-export const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+/**
+ * Decelerating, but it settles rather than crawls. The previous
+ * cubic-bezier(0.2, 0, 0, 1) spent its last third of time on a few percent of
+ * distance, which reads as the drawer sticking just before it lands — most
+ * obvious on close, where the tail is the part you watch.
+ */
+export const EASING = 'cubic-bezier(0.32, 0.72, 0, 1)';
 
 /**
  * The drawer and the chat pane move as one object, so they must stay
@@ -9,6 +34,16 @@ export const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
  */
 export const SIDEBAR_TRANSITION = `transform ${TRANSITION_MS}ms ${EASING}`;
 
+/**
+ * The drawer also transitions its width, because that is the one property the
+ * pane tracks through its own transform. Changing the strip setting while the
+ * drawer is open would otherwise jump the width in a frame while the pane
+ * eased across 300ms, leaving the newly exposed slice with no conversation
+ * under it. Only the drawer needs this: the pane's width is flex-driven and
+ * animating it would reach the desktop sidebar's collapse as well.
+ */
+export const MOBILE_DRAWER_TRANSITION = `${SIDEBAR_TRANSITION}, width ${TRANSITION_MS}ms ${EASING}`;
+
 /**
  * The mobile drawer is opaque and full-screen, so it sits above the chat.
  *
@@ -26,3 +61,9 @@ export const DRAWER_Z_INDEX = 110;
  * the drawer element without threading a ref across sibling trees.
  */
 export const MOBILE_DRAWER_ID = 'mobile-drawer';
+
+/**
+ * Lets a kicked toggle start the scrim fade with the drawer, rather than
+ * waiting for the deferred Recoil commit that a large conversation stalls.
+ */
+export const MOBILE_SCRIM_ID = 'mobile-drawer-scrim';
diff --git a/client/src/components/UnifiedSidebar/mobile/Scrim.tsx b/client/src/components/UnifiedSidebar/mobile/Scrim.tsx
new file mode 100644
index 0000000000..a11167cfed
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/mobile/Scrim.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@librechat/client';
+import type { MouseEvent } from 'react';
+import { DRAWER_Z_INDEX, MOBILE_SCRIM_ID, TRANSITION_MS, EASING } from '../constants';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+/**
+ * Covers the strip of conversation the drawer leaves visible, and dismisses it
+ * when tapped. Rendered as a sibling of the chat pane rather than inside it,
+ * because the pane is inert while the drawer is open and would swallow the
+ * click.
+ *
+ * The shared button carries the focus treatment; `variant`/`size` are cleared
+ * because a full-bleed surface wants none of the chrome, not a different set
+ * of it.
+ */
+export default function Scrim({
+  expanded,
+  isSliding,
+  prefersReducedMotion,
+  onClick,
+}: {
+  expanded: boolean;
+  /** Both surfaces keep travelling outside the committed state, and a tap in
+   *  that window would otherwise reach a control on the pane sliding past. */
+  isSliding: boolean;
+  prefersReducedMotion: boolean;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+}) {
+  const localize = useLocalize();
+
+  return (
+    <Button
+      id={MOBILE_SCRIM_ID}
+      variant={null}
+      size={null}
+      aria-label={localize('com_nav_close_sidebar')}
+      onClick={onClick}
+      tabIndex={expanded ? 0 : -1}
+      aria-hidden={!expanded || undefined}
+      className={cn(
+        'absolute inset-0 rounded-none bg-surface-overlay/50',
+        /** Inset: the shell is overflow-hidden, and the shared ring's offset
+         *  puts it 2px outside the box, which the shell would clip. */
+        'focus-visible:ring-inset focus-visible:ring-offset-0',
+        !expanded && !isSliding && 'pointer-events-none',
+      )}
+      style={{
+        zIndex: DRAWER_Z_INDEX - 1,
+        /** Style rather than a class so a kicked fade (inline opacity written
+         *  at animation start) is not interrupted when Recoil commits the
+         *  matching value three frames later. */
+        opacity: expanded ? 1 : 0,
+        transition: prefersReducedMotion ? undefined : `opacity ${TRANSITION_MS}ms ${EASING}`,
+      }}
+    />
+  );
+}
diff --git a/client/src/components/UnifiedSidebar/mobile/__tests__/Scrim.spec.tsx b/client/src/components/UnifiedSidebar/mobile/__tests__/Scrim.spec.tsx
new file mode 100644
index 0000000000..51d38c968f
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/mobile/__tests__/Scrim.spec.tsx
@@ -0,0 +1,90 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import Scrim from '../Scrim';
+
+jest.mock('~/hooks', () => ({
+  useLocalize: () => (key: string) => key,
+}));
+
+function setup({
+  expanded,
+  isSliding = false,
+  prefersReducedMotion = false,
+}: {
+  expanded: boolean;
+  isSliding?: boolean;
+  prefersReducedMotion?: boolean;
+}) {
+  const onClick = jest.fn();
+  render(
+    <Scrim
+      expanded={expanded}
+      isSliding={isSliding}
+      prefersReducedMotion={prefersReducedMotion}
+      onClick={onClick}
+    />,
+  );
+  return { scrim: screen.getByRole('button', { hidden: true }), onClick };
+}
+
+describe('mobile drawer Scrim', () => {
+  it('is a reachable dismiss target while the drawer is open', () => {
+    const { scrim } = setup({ expanded: true });
+
+    expect(scrim).toHaveAttribute('tabindex', '0');
+    expect(scrim).not.toHaveAttribute('aria-hidden');
+    expect(scrim.style.opacity).toBe('1');
+    expect(scrim).not.toHaveClass('pointer-events-none');
+  });
+
+  it('leaves the tab order and the accessibility tree once closed', () => {
+    const { scrim } = setup({ expanded: false });
+
+    expect(scrim).toHaveAttribute('tabindex', '-1');
+    expect(scrim).toHaveAttribute('aria-hidden', 'true');
+    expect(scrim.style.opacity).toBe('0');
+    expect(scrim).toHaveClass('pointer-events-none');
+  });
+
+  /**
+   * The parent shell is overflow-hidden and the global :focus-visible outline
+   * sits 2px outside the box, so an inset ring is the only indicator that
+   * actually paints.
+   */
+  it('keeps the focus ring inside the overflow-hidden shell', () => {
+    const { scrim } = setup({ expanded: true });
+
+    expect(scrim).toHaveClass(
+      'focus-visible:outline-none',
+      'focus-visible:ring-2',
+      'focus-visible:ring-inset',
+      'focus-visible:ring-text-primary',
+    );
+  });
+
+  /**
+   * The state commits before the drawer and pane finish moving, so releasing
+   * the pointer target early lets a tap through to a control sliding by
+   * underneath.
+   */
+  it('stays the pointer target while the close is still animating', () => {
+    const { scrim } = setup({ expanded: false, isSliding: true });
+
+    expect(scrim).not.toHaveClass('pointer-events-none');
+  });
+
+  it('drops the fade under reduced motion, where both surfaces snap', () => {
+    const { scrim } = setup({ expanded: true, prefersReducedMotion: true });
+
+    expect(scrim.style.transition).toBe('');
+  });
+
+  it('reports taps to its owner', async () => {
+    const user = userEvent.setup();
+    const { scrim, onClick } = setup({ expanded: true });
+
+    await user.click(scrim);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/client/src/components/UnifiedSidebar/mobile/index.ts b/client/src/components/UnifiedSidebar/mobile/index.ts
index c3eda66c43..2df1fb9843 100644
--- a/client/src/components/UnifiedSidebar/mobile/index.ts
+++ b/client/src/components/UnifiedSidebar/mobile/index.ts
@@ -2,3 +2,4 @@ export { default as MobileHeader } from './Header';
 export { default as MobileBottomBar } from './BottomBar';
 export { default as MobilePanelSwitcher } from './Switcher';
 export { default as MobileShortcutTargets } from './ShortcutTargets';
+export { default as MobileDrawerScrim } from './Scrim';
diff --git a/client/src/hooks/Nav/__tests__/useDrawerDismiss.spec.tsx b/client/src/hooks/Nav/__tests__/useDrawerDismiss.spec.tsx
new file mode 100644
index 0000000000..40439d63d0
--- /dev/null
+++ b/client/src/hooks/Nav/__tests__/useDrawerDismiss.spec.tsx
@@ -0,0 +1,519 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+  MOBILE_DRAWER_ID,
+  MOBILE_DRAWER_TRANSITION,
+  SIDEBAR_TRANSITION,
+  TRANSITION_MS,
+} from '~/components/UnifiedSidebar/constants';
+import { markDrawerAnimationStart, notifyDrawerSlide } from '../useDrawerSwipe';
+import { OPEN_SIDEBAR_ID } from '~/components/Chat/Menus/OpenSidebar';
+import useDrawerDismiss from '../useDrawerDismiss';
+
+type Props = {
+  expanded: boolean;
+  isSmallScreen: boolean;
+  prefersReducedMotion: boolean;
+};
+
+/**
+ * Defaults to a pane the close is animating, which is the shape the pointer
+ * guard exists for. Pass `none` to model the reveal close, where the pane is
+ * repositioned instantly and never moves under the user.
+ */
+function setup({
+  expanded,
+  isSmallScreen,
+  prefersReducedMotion = false,
+  paneTransition = SIDEBAR_TRANSITION,
+  drawerTransition = MOBILE_DRAWER_TRANSITION,
+}: Omit<Props, 'prefersReducedMotion'> & {
+  prefersReducedMotion?: boolean;
+  paneTransition?: string;
+  drawerTransition?: string;
+}) {
+  const pane = document.createElement('div');
+  pane.tabIndex = -1;
+  pane.style.transition = paneTransition;
+  const drawer = document.createElement('div');
+  drawer.id = MOBILE_DRAWER_ID;
+  drawer.style.transition = drawerTransition;
+  document.body.append(pane, drawer);
+  const paneRef: React.RefObject<HTMLElement> = { current: pane };
+  const setOpen = jest.fn();
+
+  const view = renderHook((props: Props) => useDrawerDismiss({ ...props, paneRef, setOpen }), {
+    initialProps: { expanded, isSmallScreen, prefersReducedMotion },
+  });
+
+  return { ...view, pane, setOpen };
+}
+
+function addOpener() {
+  const opener = document.createElement('button');
+  opener.id = OPEN_SIDEBAR_ID;
+  document.body.appendChild(opener);
+  return opener;
+}
+
+function clickScrim(onScrimClick: (event: React.MouseEvent<HTMLElement>) => void) {
+  const scrim = document.createElement('button');
+  document.body.appendChild(scrim);
+  scrim.focus();
+  act(() => {
+    onScrimClick({ currentTarget: scrim } as unknown as React.MouseEvent<HTMLElement>);
+  });
+  return scrim;
+}
+
+describe('useDrawerDismiss', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    markDrawerAnimationStart(null);
+    jest.restoreAllMocks();
+    jest.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  describe('the pointer guard', () => {
+    it('holds the scrim through the close transition', () => {
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+      expect(result.current.isSliding).toBe(false);
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /**
+     * Crossing to mobile derives the drawer closed with nothing to animate, so
+     * arming here would leave a transparent full-screen scrim over the whole
+     * viewport, swallowing every tap for the length of the guard.
+     */
+    it('does not arm when an expanded desktop sidebar crosses into mobile', () => {
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: false });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /**
+     * The reveal close repositions the pane instantly, but the drawer is still
+     * sliding away. Dropping inert on the pane at the Recoil commit would let
+     * a second tap hit a conversation control as it uncovers.
+     */
+    it('arms through a reveal close while the drawer is still sliding', () => {
+      const { result, rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        paneTransition: 'none',
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(true);
+    });
+
+    it('does not arm when neither surface is transitioning', () => {
+      const { result, rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        paneTransition: 'none',
+        drawerTransition: 'none',
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /**
+     * The slide started at kick time; a delayed Recoil commit must not add a
+     * fresh 300ms of pointer-blocking after the surfaces have already settled.
+     */
+    it('holds the guard only for the time left on the animation deadline', () => {
+      markDrawerAnimationStart(0);
+      jest.spyOn(performance, 'now').mockReturnValue(200);
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    it('does not arm when the animation deadline has already passed', () => {
+      markDrawerAnimationStart(0);
+      jest.spyOn(performance, 'now').mockReturnValue(TRANSITION_MS + 50);
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /**
+     * A swipe animates the pane at any drawer width, so reading the width
+     * instead of the pane left the default configuration unguarded through the
+     * one close path that does move it.
+     */
+    it('arms for a close that animates the pane behind a full-width drawer', () => {
+      const { result, rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        paneTransition: SIDEBAR_TRANSITION,
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(true);
+    });
+
+    it('does not arm under reduced motion, where both surfaces snap', () => {
+      const { result, rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        prefersReducedMotion: true,
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: true });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    it('releases the guard when the viewport crosses to desktop mid-close', () => {
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+
+      rerender({ expanded: false, isSmallScreen: false, prefersReducedMotion: false });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+  });
+
+  describe('focus after the close', () => {
+    it('hands focus to the opener when the close dropped it', () => {
+      const opener = addOpener();
+      const { rerender } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /**
+     * The guard puts `inert` back on the pane for its duration, and both the
+     * opener and the pane itself sit inside it, so a handoff made at the commit
+     * would be ejected to the body with nothing left to run it again.
+     */
+    it('waits for the close guard to release before handing focus over', () => {
+      const opener = addOpener();
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+      expect(document.activeElement).toBe(document.body);
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(result.current.isSliding).toBe(false);
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /** Every close path goes through the committed state, not just the scrim. */
+    it('restores focus under reduced motion too', () => {
+      const opener = addOpener();
+      const { rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        prefersReducedMotion: true,
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: true });
+
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /**
+     * A route that returns a loading or error state before its header renders
+     * has no opener, while the shortcut and the pane swipe still open the
+     * drawer.
+     */
+    it('falls back to the pane when the route renders no opener', () => {
+      const { rerender, pane } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(document.activeElement).toBe(pane);
+    });
+
+    it('leaves focus alone when something else took it deliberately', () => {
+      addOpener();
+      const composer = document.createElement('textarea');
+      document.body.appendChild(composer);
+      const { rerender } = setup({ expanded: true, isSmallScreen: true });
+      composer.focus();
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(document.activeElement).toBe(composer);
+    });
+
+    /**
+     * The drawer's own Escape handler closes it without going through the
+     * scrim, so a keyboard user who tabbed to the scrim keeps focus on it as it
+     * becomes aria-hidden and untabbable.
+     */
+    it('reclaims focus from the scrim when Escape closed the drawer', () => {
+      const opener = addOpener();
+      const scrim = document.createElement('button');
+      document.body.appendChild(scrim);
+      const { rerender } = setup({ expanded: true, isSmallScreen: true });
+      scrim.focus();
+      scrim.setAttribute('aria-hidden', 'true');
+      scrim.tabIndex = -1;
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /**
+     * The expanded desktop sidebar is replaced by the closed mobile drawer, so
+     * focus inside it is dropped. The guard is right to stay disarmed there,
+     * since nothing animates, but the focus handoff still has to run.
+     */
+    it('restores focus when an expanded desktop sidebar crosses into mobile', () => {
+      const opener = addOpener();
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: false });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      expect(document.activeElement).toBe(opener);
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    it('restores focus on a close that snaps under reduced motion', () => {
+      const opener = addOpener();
+      const { rerender } = setup({
+        expanded: true,
+        isSmallScreen: true,
+        prefersReducedMotion: true,
+      });
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: true });
+
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /**
+     * Leaving mobile unmounts the drawer and the scrim, so focus sitting on
+     * either goes with them. The opener stays mounted across breakpoints but is
+     * hidden on desktop, where focusing it does nothing, so the pane takes it.
+     */
+    it('hands focus to the pane when the viewport leaves mobile', () => {
+      const opener = addOpener();
+      /** Hidden the way the header hides it at this breakpoint. */
+      opener.focus = () => undefined;
+      const { rerender, pane } = setup({ expanded: true, isSmallScreen: true });
+
+      rerender({ expanded: true, isSmallScreen: false, prefersReducedMotion: false });
+
+      expect(document.activeElement).toBe(pane);
+    });
+
+    /**
+     * A dependency change cancels the guard and takes its timer, and with it
+     * the handoff, before the replacement run can see the close: its
+     * `wasExpanded` is already false. The debt has to survive that.
+     */
+    it('hands focus over when a motion-preference change cancels the guard', () => {
+      const opener = addOpener();
+      const { result, rerender } = setup({ expanded: true, isSmallScreen: true });
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: true });
+
+      expect(result.current.isSliding).toBe(false);
+      expect(document.activeElement).toBe(opener);
+    });
+
+    it('reclaims focus stranded inside the drawer once it goes inert', () => {
+      const opener = addOpener();
+      const drawer = document.createElement('div');
+      drawer.setAttribute('inert', '');
+      const close = document.createElement('button');
+      drawer.appendChild(close);
+      document.body.appendChild(drawer);
+      const { rerender } = setup({ expanded: true, isSmallScreen: true });
+      close.focus();
+
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(document.activeElement).toBe(opener);
+    });
+  });
+
+  describe('a slide the committed state never reports', () => {
+    /**
+     * A second toggle inside the deferred flip retargets the slide without
+     * `expanded` ever having flipped, and an open drag that falls short snaps
+     * both surfaces back the same way. The pane moves either way, so the guard
+     * has to cover it.
+     */
+    it('arms for a close slide that never committed an open', () => {
+      const { result } = setup({ expanded: false, isSmallScreen: true });
+
+      act(() => {
+        notifyDrawerSlide(false);
+      });
+
+      expect(result.current.isSliding).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    it('hands focus over when that guard releases', () => {
+      const opener = addOpener();
+      const { result } = setup({ expanded: false, isSmallScreen: true });
+
+      act(() => {
+        notifyDrawerSlide(false);
+      });
+      expect(document.activeElement).toBe(document.body);
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(result.current.isSliding).toBe(false);
+      expect(document.activeElement).toBe(opener);
+    });
+
+    /** The committed close arms above, for what is LEFT of the motion. */
+    it('leaves a committed close to the state transition', () => {
+      const { result } = setup({ expanded: true, isSmallScreen: true });
+
+      act(() => {
+        notifyDrawerSlide(false);
+      });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /**
+     * The deferred flip leaves the opening frames outside the committed state
+     * too, and without the strip nothing else covers the pane while the drawer
+     * travels over it.
+     */
+    it('arms for an opening slide the flip has not committed', () => {
+      const { result } = setup({ expanded: false, isSmallScreen: true });
+
+      act(() => {
+        notifyDrawerSlide(true);
+      });
+
+      expect(result.current.isSliding).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+      expect(result.current.isSliding).toBe(false);
+    });
+
+    /** Only a close strands focus; the drawer's header takes it on an open. */
+    it('does not reclaim focus when an opening slide releases', () => {
+      const opener = addOpener();
+      const { result } = setup({ expanded: false, isSmallScreen: true });
+
+      act(() => {
+        notifyDrawerSlide(true);
+      });
+      act(() => {
+        jest.advanceTimersByTime(TRANSITION_MS);
+      });
+
+      expect(result.current.isSliding).toBe(false);
+      expect(document.activeElement).not.toBe(opener);
+    });
+
+    it('does not arm under reduced motion, where the slide snaps', () => {
+      const { result } = setup({
+        expanded: false,
+        isSmallScreen: true,
+        prefersReducedMotion: true,
+      });
+
+      act(() => {
+        notifyDrawerSlide(false);
+      });
+
+      expect(result.current.isSliding).toBe(false);
+    });
+  });
+
+  describe('the scrim itself', () => {
+    it('closes the drawer and gives up its own focus', () => {
+      const { result, setOpen } = setup({ expanded: true, isSmallScreen: true });
+
+      const scrim = clickScrim(result.current.onScrimClick);
+
+      expect(setOpen).toHaveBeenCalledWith(false);
+      expect(document.activeElement).not.toBe(scrim);
+    });
+
+    /**
+     * The scrim stays the pointer target through the guard, where the state has
+     * already committed. Closing again would be a no-op that never reaches the
+     * focus handoff, so the tap has to be swallowed outright.
+     */
+    it('swallows a tap landing after the close has committed', () => {
+      const { result, rerender, setOpen } = setup({ expanded: true, isSmallScreen: true });
+      rerender({ expanded: false, isSmallScreen: true, prefersReducedMotion: false });
+      expect(result.current.isSliding).toBe(true);
+      setOpen.mockClear();
+
+      const scrim = clickScrim(result.current.onScrimClick);
+
+      expect(setOpen).not.toHaveBeenCalled();
+      expect(document.activeElement).not.toBe(scrim);
+    });
+  });
+});
diff --git a/client/src/hooks/Nav/__tests__/useDrawerSwipe.spec.tsx b/client/src/hooks/Nav/__tests__/useDrawerSwipe.spec.tsx
index a62375def7..7c4f5b01c6 100644
--- a/client/src/hooks/Nav/__tests__/useDrawerSwipe.spec.tsx
+++ b/client/src/hooks/Nav/__tests__/useDrawerSwipe.spec.tsx
@@ -3,8 +3,13 @@ import useDrawerSwipe, {
   findHorizontalScrollBlocker,
   getPendingDrawerFlip,
   kickDrawerAnimation,
+  setDrawerSlideListener,
 } from '../useDrawerSwipe';
-import { MOBILE_DRAWER_ID } from '~/components/UnifiedSidebar/constants';
+import {
+  MOBILE_DRAWER_ID,
+  MOBILE_PANE_SHIFT,
+  MOBILE_SCRIM_ID,
+} from '~/components/UnifiedSidebar/constants';
 
 const DRAWER_WIDTH = 375;
 
@@ -39,11 +44,14 @@ type Harness = {
   unmount: () => void;
 };
 
-const setup = (open: boolean, reducedMotion = false): Harness => {
+/** Default: the drawer covers the viewport, which is the shipped default. Pass
+ *  a wider viewport to model the strip setting, where it does not. */
+const setup = (open: boolean, reducedMotion = false, viewportWidth = DRAWER_WIDTH): Harness => {
   const pane = document.createElement('div');
   const drawer = document.createElement('div');
   drawer.id = MOBILE_DRAWER_ID;
   Object.defineProperty(drawer, 'clientWidth', { value: DRAWER_WIDTH, configurable: true });
+  Object.defineProperty(window, 'innerWidth', { value: viewportWidth, configurable: true });
   document.body.append(pane, drawer);
 
   jest.spyOn(window, 'matchMedia').mockReturnValue({
@@ -94,8 +102,17 @@ const setup = (open: boolean, reducedMotion = false): Harness => {
   };
 };
 
+function attachScrim(opacity: string) {
+  const scrim = document.createElement('button');
+  scrim.id = MOBILE_SCRIM_ID;
+  scrim.style.opacity = opacity;
+  document.body.append(scrim);
+  return scrim;
+}
+
 afterEach(() => {
   document.getElementById(MOBILE_DRAWER_ID)?.remove();
+  document.getElementById(MOBILE_SCRIM_ID)?.remove();
 });
 
 describe('useDrawerSwipe — opening from the chat pane', () => {
@@ -120,7 +137,7 @@ describe('useDrawerSwipe — opening from the chat pane', () => {
 
     expect(harness.onOpenChange).toHaveBeenCalledWith(true);
     expect(harness.drawer.style.transform).toBe('translate3d(0, 0, 0)');
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     harness.unmount();
   });
 
@@ -234,6 +251,27 @@ describe('useDrawerSwipe — opening from the chat pane', () => {
     harness.unmount();
   });
 
+  /**
+   * Nor once the flip settles: the strip setting changes the drawer's width
+   * without passing through any of these paths, so a transition handed back
+   * here would leave that change animating for a user who asked for none.
+   */
+  it('leaves no transition behind after a snap settles', () => {
+    jest.useFakeTimers();
+    const harness = setup(false, true);
+    harness.swipe(harness.pane, [
+      { x: 20, y: 100, t: 0 },
+      { x: 240, y: 100, t: 50 },
+    ]);
+
+    jest.runAllTimers();
+
+    expect(harness.drawer.style.transition).toBe('none');
+    expect(harness.pane.style.transition).toBe('none');
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
   it('reverts cleanly when the browser cancels the touch', () => {
     const harness = setup(false);
     harness.swipe(
@@ -267,6 +305,20 @@ describe('useDrawerSwipe — closing from the drawer', () => {
     harness.unmount();
   });
 
+  it('starts the scrim fade when a swipe commits the close', () => {
+    const harness = setup(true, false, Math.round(DRAWER_WIDTH / 0.8));
+    const scrim = attachScrim('1');
+    harness.swipe(harness.drawer, [
+      { x: 350, y: 100, t: 0 },
+      { x: 250, y: 100, t: 50 },
+      { x: 150, y: 100, t: 100 },
+    ]);
+
+    expect(scrim.style.opacity).toBe('0');
+    expect(harness.onOpenChange).toHaveBeenCalledWith(false);
+    harness.unmount();
+  });
+
   it('ignores a rightward swipe while already open', () => {
     const harness = setup(true);
     harness.swipe(harness.drawer, [
@@ -288,7 +340,7 @@ describe('useDrawerSwipe — interruptions and re-arming', () => {
       { x: 220, y: 100, t: 50 },
     ]);
     expect(harness.onOpenChange).toHaveBeenCalledWith(true);
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
 
     harness.rerender({ open: true, enabled: true });
     harness.rerender({ open: false, enabled: true });
@@ -313,7 +365,7 @@ describe('useDrawerSwipe — interruptions and re-arming', () => {
     expect(harness.drawer.style.transform).toBe('translate3d(0, 0, 0)');
 
     jest.runAllTimers();
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     expect(harness.drawer.style.transform).toBe('');
     jest.useRealTimers();
     harness.unmount();
@@ -358,7 +410,7 @@ describe('useDrawerSwipe — interruptions and re-arming', () => {
     expect(harness.drawer.style.transition).not.toBe('none');
     /** React committed the open pane transform before this cleanup and will
      * not re-assert it — the release must restore it, not clear it. */
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     harness.unmount();
   });
 
@@ -448,7 +500,7 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     });
 
     expect(transformAtApply).toEqual(['translate3d(0, 0, 0)']);
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     expect(harness.drawer.style.willChange).toBe('transform');
     expect(harness.onOpenChange).not.toHaveBeenCalled();
 
@@ -458,7 +510,7 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     jest.runAllTimers();
     expect(harness.drawer.style.transform).toBe('');
     expect(harness.drawer.style.willChange).toBe('');
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     jest.useRealTimers();
     harness.unmount();
   });
@@ -494,6 +546,7 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     kickDrawerAnimation(false, jest.fn());
 
     expect(harness.drawer.style.transform).toBe('translate3d(-100%, 0, 0)');
+    /** Retargeting to a close takes the reveal, since this drawer covers. */
     expect(harness.pane.style.transform).toBe('none');
 
     harness.rerender({ open: false, enabled: true });
@@ -537,7 +590,13 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     harness.unmount();
   });
 
-  it('snaps without a transition under reduced motion', () => {
+  /**
+   * The transition is not handed back after the snap either. The strip setting
+   * changes the drawer's width without passing through this path, so a restored
+   * transition would leave that one change animating for a user who asked for
+   * no motion.
+   */
+  it('snaps under reduced motion and leaves no transition behind', () => {
     jest.useFakeTimers();
     const harness = setup(false, true);
 
@@ -548,7 +607,23 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
 
     harness.rerender({ open: true, enabled: true });
     jest.runAllTimers();
-    expect(harness.drawer.style.transition).not.toBe('none');
+    expect(harness.drawer.style.transition).toBe('none');
+    expect(harness.pane.style.transition).toBe('none');
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /** The counterpart: with motion allowed, the surfaces do get them back. */
+  it('hands the transitions back once a slide settles', () => {
+    jest.useFakeTimers();
+    const harness = setup(false);
+
+    kickDrawerAnimation(true, jest.fn());
+    harness.rerender({ open: true, enabled: true });
+    jest.runAllTimers();
+
+    expect(harness.drawer.style.transition).toContain('transform');
+    expect(harness.pane.style.transition).toContain('transform');
     jest.useRealTimers();
     harness.unmount();
   });
@@ -604,25 +679,23 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     queued.shift()?.(0);
 
     expect(harness.drawer.style.transform).toBe('translate3d(0, 0, 0)');
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
 
     harness.rerender({ open: true, enabled: true });
     jest.advanceTimersByTime(400);
     expect(harness.drawer.style.transform).toBe('');
-    expect(harness.pane.style.transform).toBe('translateX(100%)');
+    expect(harness.pane.style.transform).toBe(MOBILE_PANE_SHIFT);
     jest.useRealTimers();
     harness.unmount();
   });
 
   /**
-   * A programmatic close is a REVEAL: the pane repositions instantly under
-   * the opaque drawer's cover and only the drawer animates away. Animating
-   * the pane in from the right made every tap-to-navigate close visibly
-   * shift the chat leftward while the new conversation committed into the
-   * moving layer mid-slide. The gesture keeps the paired motion — a finger
-   * drags both — via `settle`, which this does not touch.
+   * A reveal while the drawer covers the pane: repositioning instantly under an
+   * opaque full-width layer is invisible, and animating the pane in from the
+   * right instead makes every tap-to-navigate close visibly shift the chat
+   * while the new conversation commits into the moving layer.
    */
-  it('reveals on a programmatic close: pane snaps under cover, only the drawer slides', () => {
+  it('reveals rather than animating when the drawer covers the pane', () => {
     jest.useFakeTimers();
     const harness = setup(true);
 
@@ -633,6 +706,49 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     expect(harness.pane.style.transform).toBe('none');
     expect(harness.pane.style.transition).toBe('none');
 
+    harness.rerender({ open: false, enabled: true });
+    jest.runAllTimers();
+    expect(harness.drawer.style.transform).toBe('');
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * With the strip enabled the drawer stops short of the edge, so that instant
+   * reposition would land in the visible slice. Both surfaces animate together
+   * instead, matching what a finger drag already produces.
+   */
+  /**
+   * The pane tracks the drawer's width through its own transform, so a runtime
+   * width change has to move on the same curve or the newly exposed slice has
+   * no conversation under it for the length of the transition.
+   */
+  it('transitions the drawer width alongside its transform', () => {
+    jest.useFakeTimers();
+    const harness = setup(true, false, Math.round(DRAWER_WIDTH / 0.8));
+
+    kickDrawerAnimation(false, jest.fn());
+
+    expect(harness.drawer.style.transition).toContain('width');
+    expect(harness.drawer.style.transition).toContain('transform');
+    /** Flex-driven, and animating it would reach the desktop collapse too. */
+    expect(harness.pane.style.transition).toContain('transform');
+    expect(harness.pane.style.transition).not.toContain('width');
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  it('animates both surfaces when a strip of chat is left visible', () => {
+    jest.useFakeTimers();
+    const harness = setup(true, false, Math.round(DRAWER_WIDTH / 0.8));
+
+    kickDrawerAnimation(false, jest.fn());
+
+    expect(harness.drawer.style.transform).toBe('translate3d(-100%, 0, 0)');
+    expect(harness.drawer.style.transition).not.toBe('none');
+    expect(harness.pane.style.transform).toBe('translate3d(0, 0, 0)');
+    expect(harness.pane.style.transition).not.toBe('none');
+
     harness.rerender({ open: false, enabled: true });
     jest.runAllTimers();
     expect(harness.pane.style.transition).not.toBe('none');
@@ -706,6 +822,157 @@ describe('useDrawerSwipe — kickDrawerAnimation (button toggles)', () => {
     jest.useRealTimers();
     harness.unmount();
   });
+
+  /**
+   * The drawer slide starts in the kick's frame; Recoil commits three frames
+   * later (longer on a large conversation). Driving the scrim from expanded
+   * would leave it opaque over a drawer that has already gone, then fade it
+   * for another 300ms.
+   */
+  it('starts the scrim fade with the drawer slide, before the state flip', () => {
+    jest.useFakeTimers();
+    const harness = setup(true, false, Math.round(DRAWER_WIDTH / 0.8));
+    const scrim = attachScrim('1');
+    const opacityAtApply: string[] = [];
+    kickDrawerAnimation(false, () => {
+      opacityAtApply.push(scrim.style.opacity);
+    });
+
+    expect(opacityAtApply).toEqual(['0']);
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  it('starts the scrim fade-in with the open slide', () => {
+    jest.useFakeTimers();
+    const harness = setup(false, false, Math.round(DRAWER_WIDTH / 0.8));
+    const scrim = attachScrim('0');
+    const opacityAtApply: string[] = [];
+    kickDrawerAnimation(true, () => {
+      opacityAtApply.push(scrim.style.opacity);
+    });
+
+    expect(opacityAtApply).toEqual(['1']);
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * Recoil still has expanded=false for those three frames, so the class
+   * pointer-events-none would leave the fading-in scrim click-through: a tap
+   * on the exposed strip would hit a conversation control instead of dismiss.
+   */
+  it('captures pointer events on the scrim as soon as the open slide starts', () => {
+    jest.useFakeTimers();
+    const harness = setup(false, false, Math.round(DRAWER_WIDTH / 0.8));
+    const scrim = attachScrim('0');
+    scrim.style.pointerEvents = 'none';
+    const pointerAtApply: string[] = [];
+    kickDrawerAnimation(true, () => {
+      pointerAtApply.push(scrim.style.pointerEvents);
+    });
+
+    expect(pointerAtApply).toEqual(['auto']);
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * A dismiss inside the opening settle window leaves that slide's override in
+   * place, and inline styles beat the closed pointer-events-none class. The
+   * guard expires at the animation deadline but the release runs a buffer
+   * later, so the invisible scrim would keep swallowing taps in between.
+   */
+  it('releases the pointer override when the close slide starts', () => {
+    jest.useFakeTimers();
+    const harness = setup(true, false, Math.round(DRAWER_WIDTH / 0.8));
+    const scrim = attachScrim('1');
+    scrim.style.pointerEvents = 'auto';
+    const pointerAtApply: string[] = [];
+    kickDrawerAnimation(false, () => {
+      pointerAtApply.push(scrim.style.pointerEvents);
+    });
+
+    expect(pointerAtApply).toEqual(['']);
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * Two toggles inside the three-frame flip window leave expanded false
+   * throughout, so the dismiss guard sees no state transition to arm from. The
+   * slide has to report itself or nothing covers the pane as it uncovers.
+   */
+  it('reports a close slide that cancels an uncommitted open', () => {
+    jest.useFakeTimers();
+    const harness = setup(false, false, Math.round(DRAWER_WIDTH / 0.8));
+    const slides: boolean[] = [];
+    setDrawerSlideListener((next) => slides.push(next));
+    const frames: FrameRequestCallback[] = [];
+    (window.requestAnimationFrame as unknown as jest.Mock).mockImplementation(
+      (callback: FrameRequestCallback) => {
+        frames.push(callback);
+        return 0;
+      },
+    );
+    const applyState = jest.fn();
+
+    kickDrawerAnimation(true, applyState);
+    frames.shift()?.(0);
+    /** The deferred flip never reaches its third frame: the second kick lands
+     *  first, which is the whole point of this path. */
+    frames.length = 0;
+
+    kickDrawerAnimation(false, applyState);
+    frames.shift()?.(0);
+
+    expect(applyState).not.toHaveBeenCalled();
+    expect(slides).toEqual([true, false]);
+    setDrawerSlideListener(null);
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * The strip setting and a rotation both restart the drawer's width
+   * transition, which then runs on its own clock. Driving the drawer's edge
+   * from that clock and the pane's from the close would open a gap between
+   * the two surfaces for the rest of the slide.
+   */
+  it('pins the drawer width to the close slide and hands it back on open', () => {
+    jest.useFakeTimers();
+    const viewportWidth = Math.round(DRAWER_WIDTH / 0.8);
+    const harness = setup(true, false, viewportWidth);
+
+    kickDrawerAnimation(false, jest.fn());
+    expect(harness.drawer.style.width).toBe(`${viewportWidth}px`);
+
+    kickDrawerAnimation(true, jest.fn());
+    expect(harness.drawer.style.width).not.toBe(`${viewportWidth}px`);
+
+    jest.useRealTimers();
+    harness.unmount();
+  });
+
+  /**
+   * Dropping the transition on claim lands a width still easing toward the
+   * strip target on that target in the same frame, so the touchstart snapshot
+   * is stale. Both surfaces read it, so the stale value holds a gap open
+   * between the drawer's edge and the pane for the rest of the drag.
+   */
+  it('remeasures the drawer width when a gesture claims mid width transition', () => {
+    const harness = setup(false);
+    Object.defineProperty(harness.drawer, 'clientWidth', { value: 340, configurable: true });
+    harness.pane.dispatchEvent(touchEvent('touchstart', [createTouch(0, 0)], 0));
+    Object.defineProperty(harness.drawer, 'clientWidth', { value: 300, configurable: true });
+
+    harness.pane.dispatchEvent(touchEvent('touchmove', [createTouch(20, 0)], 16));
+    harness.pane.dispatchEvent(touchEvent('touchmove', [createTouch(60, 0)], 32));
+
+    expect(harness.drawer.style.transform).toBe('translate3d(-240px, 0, 0)');
+    expect(harness.pane.style.transform).toBe('translate3d(60px, 0, 0)');
+    harness.unmount();
+  });
 });
 
 describe('findHorizontalScrollBlocker', () => {
diff --git a/client/src/hooks/Nav/useDrawerDismiss.ts b/client/src/hooks/Nav/useDrawerDismiss.ts
new file mode 100644
index 0000000000..7292f40eb5
--- /dev/null
+++ b/client/src/hooks/Nav/useDrawerDismiss.ts
@@ -0,0 +1,236 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { MouseEvent, RefObject } from 'react';
+import { MOBILE_DRAWER_ID, TRANSITION_MS } from '~/components/UnifiedSidebar/constants';
+import { getDrawerAnimationStartedAt, setDrawerSlideListener } from './useDrawerSwipe';
+import { OPEN_SIDEBAR_ID } from '~/components/Chat/Menus/OpenSidebar';
+
+/**
+ * Every path that closes the mobile drawer leaves the same two problems, so
+ * they are answered once here rather than per control: the surfaces the user
+ * acted on stop being focusable, and the drawer and pane keep moving after the
+ * state has already committed.
+ */
+export default function useDrawerDismiss({
+  expanded,
+  isSmallScreen,
+  prefersReducedMotion,
+  paneRef,
+  setOpen,
+}: {
+  expanded: boolean;
+  isSmallScreen: boolean;
+  prefersReducedMotion: boolean;
+  paneRef: RefObject<HTMLElement>;
+  setOpen: (open: boolean) => void;
+}): {
+  isSliding: boolean;
+  onScrimClick: (event: MouseEvent<HTMLElement>) => void;
+} {
+  /** Whether either surface is still travelling. Recoil's flip is deferred
+   *  past the first frames and the transition outlives it at the other end, so
+   *  the committed state brackets the wrong window; a tap outside it reaches a
+   *  control on the pane sliding underneath. The scrim holds the pointer and
+   *  the pane stays inert for exactly this. */
+  const [isSliding, setIsSliding] = useState(false);
+  const wasExpandedRef = useRef(expanded);
+  const wasSmallScreenRef = useRef(isSmallScreen);
+  /** The guard puts `inert` back on the pane, and both the opener and the pane
+   *  itself sit inside it, so a handoff made while it is armed would only be
+   *  dropped to the body. An armed close records the debt here and the release
+   *  below pays it, whether the release comes from the timer or from a
+   *  dependency change cancelling the guard. */
+  const handoffPendingRef = useRef(false);
+  const guardTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  /** Read from the slide listener below, which fires outside React's render. */
+  const expandedRef = useRef(expanded);
+  expandedRef.current = expanded;
+
+  const armGuard = useCallback((duration: number, handoff: boolean) => {
+    if (guardTimerRef.current != null) {
+      clearTimeout(guardTimerRef.current);
+    }
+    handoffPendingRef.current = handoffPendingRef.current || handoff;
+    setIsSliding(true);
+    guardTimerRef.current = setTimeout(() => {
+      guardTimerRef.current = null;
+      setIsSliding(false);
+    }, duration);
+  }, []);
+
+  const disarmGuard = useCallback(() => {
+    if (guardTimerRef.current != null) {
+      clearTimeout(guardTimerRef.current);
+      guardTimerRef.current = null;
+    }
+    setIsSliding(false);
+  }, []);
+
+  /** Layout rather than passive: the guard below has to be armed in the frame
+   *  the close commits. A passive effect runs after paint, leaving one frame
+   *  where the pane has dropped `inert` and the scrim has not yet taken the
+   *  pointer back, which is a tap reaching a control still sliding past. */
+  useLayoutEffect(() => {
+    const wasExpanded = wasExpandedRef.current;
+    const wasSmallScreen = wasSmallScreenRef.current;
+    wasExpandedRef.current = expanded;
+    wasSmallScreenRef.current = isSmallScreen;
+
+    /** Leaving mobile unmounts the drawer and the scrim, so focus sitting on
+     *  either goes with them, exactly as it does on a close. */
+    if (wasSmallScreen && !isSmallScreen) {
+      restoreDrawerFocus(paneRef.current);
+      return;
+    }
+
+    if (!isSmallScreen || !wasExpanded || expanded) {
+      return;
+    }
+
+    const remaining = closeGuardDuration({
+      wasSmallScreen,
+      prefersReducedMotion,
+      pane: paneRef.current,
+    });
+
+    /** Nothing is still moving, so the pane never takes `inert` back and the
+     *  handoff can land in this frame. Runs for a breakpoint crossing too: the
+     *  expanded desktop sidebar is replaced by the closed mobile drawer, so
+     *  focus inside it is dropped just as surely as by a deliberate close. */
+    if (remaining == null) {
+      restoreDrawerFocus(paneRef.current);
+      return;
+    }
+
+    /** Timer rather than transitionend: the scrim unmounts when the viewport
+     *  crosses to desktop, and a handler that never fires would strand the
+     *  guard on. */
+    armGuard(remaining, true);
+    return disarmGuard;
+  }, [expanded, isSmallScreen, prefersReducedMotion, paneRef, armGuard, disarmGuard]);
+
+  /** Every slide that starts while the committed state is closed: an open,
+   *  before its deferred flip lands, and a close whose open never committed at
+   *  all (a second toggle retargeting inside that window, or an open drag that
+   *  falls short). Neither reaches the effect above, and on the default
+   *  configuration nothing else covers the pane while the drawer travels over
+   *  it. A committed close still arms above, where the deadline is what is
+   *  left of the motion rather than all of it. */
+  useEffect(() => {
+    if (!isSmallScreen || prefersReducedMotion) {
+      return;
+    }
+    setDrawerSlideListener((next) => {
+      if (expandedRef.current) {
+        return;
+      }
+      /** Only a close strands focus: an open hands it to the drawer's header. */
+      armGuard(TRANSITION_MS, !next);
+    });
+    return () => {
+      setDrawerSlideListener(null);
+      disarmGuard();
+    };
+  }, [isSmallScreen, prefersReducedMotion, armGuard, disarmGuard]);
+
+  /** Keyed off the release rather than the close, so a guard cancelled by a
+   *  dependency change hands focus over too: its timer is gone, and the effect
+   *  above has already recorded the close it will never rerun for. */
+  useLayoutEffect(() => {
+    if (isSliding || !handoffPendingRef.current) {
+      return;
+    }
+    handoffPendingRef.current = false;
+    restoreDrawerFocus(paneRef.current);
+  }, [isSliding, paneRef]);
+
+  const onScrimClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      /** The scrim goes aria-hidden on close, so focus cannot stay here; the
+       *  effect above hands it on once the pane has shed `inert`. */
+      event.currentTarget.blur();
+      /** Still the pointer target through the guard, where closing again would
+       *  be a no-op that never reaches that effect. */
+      if (!expanded) {
+        return;
+      }
+      setOpen(false);
+    },
+    [expanded, setOpen],
+  );
+
+  return { isSliding, onScrimClick };
+}
+
+/**
+ * How much of the close is still moving, or null when nothing is. Crossing the
+ * breakpoint derives the drawer closed with nothing to animate, and both
+ * surfaces snap under reduced motion; arming anyway would leave a transparent
+ * full-screen scrim swallowing taps for the length of the guard.
+ */
+function closeGuardDuration({
+  wasSmallScreen,
+  prefersReducedMotion,
+  pane,
+}: {
+  wasSmallScreen: boolean;
+  prefersReducedMotion: boolean;
+  pane: HTMLElement | null;
+}): number | null {
+  if (!wasSmallScreen || prefersReducedMotion) {
+    return null;
+  }
+
+  /** The guard exists to cover anything still moving. The reveal close
+   *  repositions the pane instantly (`transition: none`) while the drawer keeps
+   *  sliding, and a swipe animates the pane at any width, so asking only one
+   *  surface misses a path. */
+  const paneTransition = pane?.style.transition ?? '';
+  const drawerTransition = document.getElementById(MOBILE_DRAWER_ID)?.style.transition ?? '';
+  const stillMoving = (transition: string) => transition !== '' && transition !== 'none';
+  if (!stillMoving(paneTransition) && !stillMoving(drawerTransition)) {
+    return null;
+  }
+
+  /** The slide started at kick time. A delayed Recoil commit must not add a
+   *  fresh TRANSITION_MS after the compositor has already settled. */
+  const startedAt = getDrawerAnimationStartedAt();
+  const remaining =
+    startedAt == null
+      ? TRANSITION_MS
+      : Math.max(0, TRANSITION_MS - (performance.now() - startedAt));
+  return remaining === 0 ? null : remaining;
+}
+
+/**
+ * The drawer goes `inert` and the scrim `aria-hidden`, so whichever control
+ * closed the drawer stops being focusable. Inert drops focus to the body on its
+ * own; `aria-hidden` does not, which is what Escape on a focused scrim leaves
+ * behind. Anything that took focus deliberately, a composer autofocused after
+ * picking a conversation, keeps it.
+ */
+function restoreDrawerFocus(pane: HTMLElement | null): void {
+  const active = document.activeElement;
+  const lost =
+    !(active instanceof HTMLElement) ||
+    active === document.body ||
+    active.closest('[inert]') != null ||
+    active.closest('[aria-hidden="true"]') != null;
+  if (!lost) {
+    return;
+  }
+
+  const opener = document.getElementById(OPEN_SIDEBAR_ID);
+  if (opener != null) {
+    opener.focus();
+    /** It stays mounted across breakpoints but is hidden on desktop, where the
+     *  focus simply does not take, so confirm it rather than assume it. */
+    if (document.activeElement === opener) {
+      return;
+    }
+  }
+
+  /** Routes that return a loading or error state before rendering their header
+   *  have no opener, while the shortcut and the pane swipe still open the
+   *  drawer, so fall back to the pane rather than leaving focus on the body. */
+  pane?.focus();
+}
diff --git a/client/src/hooks/Nav/useDrawerSwipe.ts b/client/src/hooks/Nav/useDrawerSwipe.ts
index f5c042297e..9d9c91a7c5 100644
--- a/client/src/hooks/Nav/useDrawerSwipe.ts
+++ b/client/src/hooks/Nav/useDrawerSwipe.ts
@@ -2,6 +2,10 @@ import { useEffect, useRef } from 'react';
 import {
   TRANSITION_MS,
   MOBILE_DRAWER_ID,
+  MOBILE_DRAWER_WIDTH,
+  MOBILE_DRAWER_TRANSITION,
+  MOBILE_PANE_SHIFT,
+  MOBILE_SCRIM_ID,
   SIDEBAR_TRANSITION,
 } from '~/components/UnifiedSidebar/constants';
 
@@ -20,6 +24,47 @@ const VELOCITY_HOLD_MS = 100;
 /** Inline styles are cleared this long after TRANSITION_MS, then classes own the state. */
 const SETTLE_BUFFER_MS = 80;
 
+/**
+ * Whether the drawer hides the pane entirely, which is what makes repositioning
+ * the pane instantly invisible. A geometric fact rather than a reading of the
+ * setting: the reveal is safe exactly when there is nothing uncovered to see it
+ * in, however the width was arrived at.
+ */
+const drawerCoversPane = (drawer: HTMLElement): boolean =>
+  (drawer.clientWidth || window.innerWidth) >= window.innerWidth;
+
+/** Same kick as the drawer/pane transforms: the scrim must not wait for the
+ *  Recoil commit, which a large conversation can delay past the slide. */
+const setScrimOpacity = (open: boolean) => {
+  const scrim = document.getElementById(MOBILE_SCRIM_ID);
+  if (scrim == null) {
+    return;
+  }
+  scrim.style.opacity = open ? '1' : '0';
+  /** Recoil still has expanded=false during an open kick, so the class
+   *  pointer-events-none would leave the fading-in scrim click-through. Every
+   *  close hands capture back to the expanded/isSliding classes, which hold it
+   *  for exactly the slide; keeping the override would outlive them by the
+   *  settle buffer and swallow taps on the strip. */
+  scrim.style.pointerEvents = open ? 'auto' : '';
+};
+
+/**
+ * A close whose open never committed — a second toggle retargets the slide
+ * inside the deferred flip, or an open drag falls short and snaps back — moves
+ * the pane without `expanded` ever changing, so the dismiss guard has no state
+ * transition to arm from. The slide reports itself here instead.
+ */
+let slideListener: ((next: boolean) => void) | null = null;
+
+export function setDrawerSlideListener(listener: ((next: boolean) => void) | null): void {
+  slideListener = listener;
+}
+
+export function notifyDrawerSlide(next: boolean): void {
+  slideListener?.(next);
+}
+
 /** Surfaces where a horizontal drag means selection or caret work, never navigation. */
 const TEXT_SURFACE_SELECTOR = 'textarea, input, select, [contenteditable="true"]';
 
@@ -39,6 +84,18 @@ export function getPendingDrawerFlip(): boolean | null {
   return pendingFlipTarget;
 }
 
+/** Compositor clock for the in-flight slide, so the close guard can expire
+ *  at the animation deadline rather than TRANSITION_MS after a delayed commit. */
+let animationStartedAt: number | null = null;
+
+export function markDrawerAnimationStart(at: number | null = performance.now()): void {
+  animationStartedAt = at;
+}
+
+export function getDrawerAnimationStartedAt(): number | null {
+  return animationStartedAt;
+}
+
 /**
  * Starts the drawer/pane slide imperatively and owns WHEN the caller's state
  * flip runs. Wrapping the flip in `startTransition` is not enough: Recoil
@@ -165,17 +222,38 @@ type Gesture = {
   rafScheduled: boolean;
 };
 
+/**
+ * What the two surfaces settle back to. Nothing under reduced motion, where
+ * every drawer move snaps: handing an animating value back would leave the
+ * element ready to ease the next change, and the strip setting changes the
+ * drawer's width without passing through the snap path at all.
+ */
+const settledTransitions = (): { drawer: string; pane: string } =>
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? { drawer: 'none', pane: 'none' }
+    : { drawer: MOBILE_DRAWER_TRANSITION, pane: SIDEBAR_TRANSITION };
+
 /** Returns every transient inline property to what React/classes render for
  * `paneOpen`. The drawer's transform is class-driven so clearing suffices, but
  * the pane's is a React style prop React will NOT re-assert while its value is
  * unchanged — an open pane must get its committed transform back explicitly. */
 const releaseInlineStyles = (drawer: HTMLElement, pane: HTMLElement, paneOpen: boolean) => {
+  const settled = settledTransitions();
   drawer.style.transform = '';
   drawer.style.willChange = '';
-  drawer.style.transition = SIDEBAR_TRANSITION;
-  pane.style.transform = paneOpen ? 'translateX(100%)' : '';
+  /** The close pins a measured width, and clearing would drop the declarative
+   * value with it: React will not re-assert a style prop whose value it has
+   * not changed. */
+  drawer.style.width = MOBILE_DRAWER_WIDTH;
+  drawer.style.transition = settled.drawer;
+  pane.style.transform = paneOpen ? MOBILE_PANE_SHIFT : '';
   pane.style.willChange = '';
-  pane.style.transition = SIDEBAR_TRANSITION;
+  pane.style.transition = settled.pane;
+  markDrawerAnimationStart(null);
+  const scrim = document.getElementById(MOBILE_SCRIM_ID);
+  if (scrim != null) {
+    scrim.style.pointerEvents = '';
+  }
 };
 
 const dragTransforms = (gesture: Gesture): { drawer: string; pane: string } => {
@@ -290,18 +368,22 @@ export default function useDrawerSwipe({
           onOpenChangeRef.current(next);
           const id = setTimeout(() => {
             settleRef.current = null;
-            gesture.drawer.style.transition = SIDEBAR_TRANSITION;
-            gesture.pane.style.transition = SIDEBAR_TRANSITION;
+            const settled = settledTransitions();
+            gesture.drawer.style.transition = settled.drawer;
+            gesture.pane.style.transition = settled.pane;
           }, SETTLE_BUFFER_MS);
           settleRef.current = { id, target: next, drawer: gesture.drawer, pane: gesture.pane };
         }
         return;
       }
       const { drawer: drawerEl, pane: paneEl } = gesture;
-      drawerEl.style.transition = SIDEBAR_TRANSITION;
+      drawerEl.style.transition = MOBILE_DRAWER_TRANSITION;
       paneEl.style.transition = SIDEBAR_TRANSITION;
       drawerEl.style.transform = next ? 'translate3d(0, 0, 0)' : 'translate3d(-100%, 0, 0)';
-      paneEl.style.transform = next ? 'translateX(100%)' : 'translate3d(0, 0, 0)';
+      paneEl.style.transform = next ? MOBILE_PANE_SHIFT : 'translate3d(0, 0, 0)';
+      markDrawerAnimationStart();
+      notifyDrawerSlide(next);
+      setScrimOpacity(next);
       if (next !== open) {
         onOpenChangeRef.current(next);
       }
@@ -336,8 +418,9 @@ export default function useDrawerSwipe({
         pane.style.transition = 'none';
         const id = setTimeout(() => {
           settleRef.current = null;
-          drawer.style.transition = SIDEBAR_TRANSITION;
-          pane.style.transition = SIDEBAR_TRANSITION;
+          const settled = settledTransitions();
+          drawer.style.transition = settled.drawer;
+          pane.style.transition = settled.pane;
         }, SETTLE_BUFFER_MS);
         settleRef.current = { id, target: next, drawer, pane };
         return;
@@ -367,22 +450,37 @@ export default function useDrawerSwipe({
         if (armed == null || armed.target !== next || armed.id != null) {
           return;
         }
-        drawer.style.transition = SIDEBAR_TRANSITION;
+        drawer.style.transition = MOBILE_DRAWER_TRANSITION;
+        /** A width transition still in flight (the strip setting changing, or
+         * a rotation re-resolving the percentage) runs on its own clock, so
+         * the drawer's edge and the pane's would separate for the rest of it.
+         * Pinning the measured width settles the drawer onto this slide's
+         * clock; the opening kick hands the property back. */
+        drawer.style.width = next
+          ? MOBILE_DRAWER_WIDTH
+          : `${drawer.getBoundingClientRect().width || window.innerWidth}px`;
         drawer.style.transform = next ? 'translate3d(0, 0, 0)' : 'translate3d(-100%, 0, 0)';
+        markDrawerAnimationStart();
+        notifyDrawerSlide(next);
+        setScrimOpacity(next);
         if (next) {
           pane.style.transition = SIDEBAR_TRANSITION;
-          pane.style.transform = 'translateX(100%)';
-        } else {
-          /** A programmatic close is a REVEAL: the pane repositions
-           * instantly beneath the opaque drawer's cover and only the
-           * drawer slides away, uncovering content already in place.
-           * Animating the pane in from the right made every
-           * tap-to-navigate close visibly shift the chat leftward while
-           * the new conversation committed into the moving layer
-           * mid-slide. The gesture keeps the paired both-move motion in
-           * `settle` — there a finger drags both surfaces. */
+          pane.style.transform = MOBILE_PANE_SHIFT;
+        } else if (drawerCoversPane(drawer)) {
+          /** A programmatic close is a REVEAL while the drawer is full width:
+           * the pane repositions instantly beneath the opaque cover and only
+           * the drawer slides away, uncovering content already in place.
+           * Animating the pane in from the right makes every tap-to-navigate
+           * close visibly shift the chat leftward while the new conversation
+           * commits into the moving layer mid-slide. */
           pane.style.transition = 'none';
           pane.style.transform = 'none';
+        } else {
+          /** With the strip enabled that jump would land in the visible slice,
+           * so both surfaces animate together, which is the motion the drag
+           * path already produces in `settle`. */
+          pane.style.transition = SIDEBAR_TRANSITION;
+          pane.style.transform = 'translate3d(0, 0, 0)';
         }
         void drawer.getBoundingClientRect();
         armed.id = setTimeout(() => {
@@ -473,6 +571,12 @@ export default function useDrawerSwipe({
             gesture.pane.style.transition = 'none';
             gesture.drawer.style.willChange = 'transform';
             gesture.pane.style.willChange = 'transform';
+            /** Dropping the transition lands a width still easing toward the
+             *  strip target on that target in this frame, so the touchstart
+             *  snapshot is now stale — and the paired transforms below read it
+             *  for both surfaces, which would hold a gap open for the whole
+             *  drag. */
+            gesture.width = gesture.drawer.clientWidth || window.innerWidth;
           }
         } else if (Math.abs(dy) >= ACTIVATION_DISTANCE) {
           gesture.phase = 'dead';
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 4840932437..bba7c4fd50 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -2410,5 +2410,7 @@
   "com_insights_start_date": "Start date",
   "com_insights_end_date": "End date",
   "com_insights_invalid_date_range": "Choose an end date after the start date, within {{days}} days.",
-  "com_insights_sparkline_accessibility": "{{label}} over time"
+  "com_insights_sparkline_accessibility": "{{label}} over time",
+  "com_nav_mobile_drawer_strip": "Show chat beside the sidebar on mobile",
+  "com_nav_mobile_drawer_strip_info": "The sidebar stops short of the edge so a strip of the conversation stays visible. Tapping it closes the sidebar."
 }
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
index 65cca1564d..274cfd29d2 100644
--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@@ -1,5 +1,15 @@
 import { useState, useEffect, useRef, useCallback, startTransition } from 'react';
+import { useRecoilValue } from 'recoil';
 import { Outlet } from 'react-router-dom';
+import { useMediaQuery } from '@librechat/client';
+import {
+  UnifiedSidebar,
+  SIDEBAR_TRANSITION,
+  MOBILE_DRAWER_WIDTH_VAR,
+  MOBILE_DRAWER_STRIP_WIDTH,
+  MOBILE_DRAWER_FULL_WIDTH,
+  MOBILE_PANE_SHIFT,
+} from '~/components/UnifiedSidebar';
 import {
   PromptGroupsProvider,
   AssistantsMapContext,
@@ -15,16 +25,19 @@ import {
   useAgentsMap,
   useFileMap,
 } from '~/hooks';
-import { UnifiedSidebar, SIDEBAR_TRANSITION } from '~/components/UnifiedSidebar';
 import KeyboardShortcutsDialog from '~/components/Nav/KeyboardShortcutsDialog';
 import KeyboardDeleteDialog from '~/components/Nav/KeyboardDeleteDialog';
 import { useUserTermsQuery, useGetStartupConfig } from '~/data-provider';
+import { MobileDrawerScrim } from '~/components/UnifiedSidebar/mobile';
 import useKeyboardShortcuts from '~/hooks/useKeyboardShortcuts';
+import useDrawerDismiss from '~/hooks/Nav/useDrawerDismiss';
+import useSidebarToggle from '~/hooks/Nav/useSidebarToggle';
 import useSidebarState from '~/hooks/Nav/useSidebarState';
 import { TermsAndConditionsModal } from '~/components/ui';
 import useDrawerSwipe from '~/hooks/Nav/useDrawerSwipe';
 import { useHealthCheck } from '~/data-provider';
 import { Banner } from '~/components/Banners';
+import store from '~/store';
 
 /** Isolates keyboard shortcut listeners so they only mount after auth. */
 function KeyboardShortcutsProvider() {
@@ -46,7 +59,26 @@ export default function Root() {
     expanded: sidebarExpanded,
     setExpanded: setSidebarExpanded,
   } = useSidebarState();
+  /** The one path drawer mutations take: it kicks the slide imperatively and
+   *  defers the Recoil flip, so a large conversation cannot stall first motion. */
+  const { setSidebarOpen } = useSidebarToggle();
+  /** The drawer and pane snap under reduced motion (see kickDrawerAnimation),
+   *  so the scrim must not keep fading on its own. */
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  /** Off by default, matching the drawer that covers the screen and closes by
+   *  swipe. Opting in narrows it and gives the strip a dismiss target. */
+  const drawerStrip = useRecoilValue(store.mobileDrawerStrip);
   const paneRef = useRef<HTMLDivElement>(null);
+  /** Keyed off the committed state rather than the scrim's own click, because
+   *  the header button, Escape, conversation selection and the bottom bar all
+   *  close the drawer too. */
+  const { isSliding, onScrimClick } = useDrawerDismiss({
+    expanded: sidebarExpanded,
+    isSmallScreen,
+    prefersReducedMotion,
+    paneRef,
+    setOpen: setSidebarOpen,
+  });
   /** Focus handoff lives in the drawer header's own expanded-effect — the
    * commit drives it, so every opener (button, swipe) is covered without a
    * timer racing the deferred state flip. */
@@ -112,20 +144,54 @@ export default function Root() {
             <PromptGroupsProvider>
               <Banner onHeightChange={setBannerHeight} />
               <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
-                <div className="relative z-0 flex h-full w-full overflow-hidden">
+                <div
+                  className="relative z-0 flex h-full w-full overflow-hidden"
+                  /** The drawer and the pane both read this, so their travel
+                   *  cannot disagree about how far the drawer opens. */
+                  style={
+                    {
+                      [MOBILE_DRAWER_WIDTH_VAR]: drawerStrip
+                        ? MOBILE_DRAWER_STRIP_WIDTH
+                        : MOBILE_DRAWER_FULL_WIDTH,
+                    } as React.CSSProperties
+                  }
+                >
                   <UnifiedSidebar />
                   <div
                     ref={paneRef}
-                    className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden"
+                    /** Focus target of last resort when the drawer closes on a
+                     *  route that renders no opener. Not in the tab order. */
+                    tabIndex={-1}
+                    className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden focus:outline-none"
                     style={{
-                      /** Self-referential, so it needs no width literal and survives rotation. */
-                      transform: isSmallScreen && sidebarExpanded ? 'translateX(100%)' : 'none',
-                      transition: SIDEBAR_TRANSITION,
+                      /** A percentage of the pane's own width, so it tracks the
+                       *  drawer without a literal and survives rotation. */
+                      transform: isSmallScreen && sidebarExpanded ? MOBILE_PANE_SHIFT : 'none',
+                      transition: prefersReducedMotion ? undefined : SIDEBAR_TRANSITION,
                     }}
-                    inert={isSmallScreen && sidebarExpanded ? '' : undefined}
+                    /** Recoil's flip is deferred past the opening frames and
+                     *  the closing transition outlives it at the other end, so
+                     *  `isSliding` covers the travel `sidebarExpanded` brackets
+                     *  too late and drops too early. */
+                    inert={isSmallScreen && (sidebarExpanded || isSliding) ? '' : undefined}
                   >
                     <Outlet />
                   </div>
+                  {/* Without the strip the scrim exists only for the travel:
+                      through a close that began while the strip was still on
+                      (disabling it unmounts the scrim at once, but the drawer
+                      needs the whole transition to widen), and through an open
+                      the deferred flip has not committed yet. Once expanded
+                      lands, a full-width drawer covers it, so keeping it
+                      mounted would only expose a duplicate dismiss control. */}
+                  {isSmallScreen && (drawerStrip || (isSliding && !sidebarExpanded)) && (
+                    <MobileDrawerScrim
+                      expanded={sidebarExpanded}
+                      isSliding={isSliding}
+                      prefersReducedMotion={prefersReducedMotion}
+                      onClick={onScrimClick}
+                    />
+                  )}
                 </div>
               </div>
             </PromptGroupsProvider>
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 4680e0dcbc..c0bb927128 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -102,6 +102,12 @@ const localStorageAtoms = {
   modularChat: atomWithLocalStorage('modularChat', true),
   LaTeXParsing: atomWithLocalStorage('LaTeXParsing', true),
   centerFormOnLanding: atomWithLocalStorage('centerFormOnLanding', true),
+  /**
+   * Whether the mobile drawer stops short of the edge, leaving a strip of the
+   * conversation visible that also closes it when tapped. Off by default: the
+   * drawer covers the screen and the swipe closes it.
+   */
+  mobileDrawerStrip: atomWithLocalStorage('mobileDrawerStrip', false),
   showFooter: atomWithLocalStorage('showFooter', true),
 
   // Commands settings