diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 4df33aad..75cb8b5d 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -88,7 +88,7 @@ function MainLayoutInner() {
 
         {/* Main content + right sidebar: inside Suspense so the left sidebar persists while lazy pages load */}
         <Suspense fallback={<PageSkeleton />}>
-          <div className={cn("relative flex-1 min-w-0 sidebar:border-l sidebar:border-r border-border bg-background/85", !noMaxWidth && "sidebar:max-w-[600px]", !noOverscroll && "pb-overscroll")}>
+          <div className={cn("relative z-10 flex-1 min-w-0 sidebar:border-l sidebar:border-r border-border bg-background/85", !noMaxWidth && "sidebar:max-w-[600px]", !noOverscroll && "pb-overscroll")}>
             <Outlet />
             {showFAB && (
               <div className="sticky bottom-fab sidebar:bottom-6 z-30 pointer-events-none flex justify-end pr-6">
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 290d1f59..83896968 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -21,7 +21,7 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
     <>
     {/* Fixed backing layer behind the header — stays at viewport top so the header
         has the same double-opacity look as the tab bar sitting over the content area */}
-    <div className="fixed top-0 left-0 right-0 bg-background/85 sidebar:hidden safe-area-top" style={{ zIndex: 19 }}>
+    <div className="fixed top-0 left-0 right-0 bg-background/85 sidebar:hidden safe-area-top" style={{ zIndex: 1 }}>
       <div className="h-12" />
     </div>
     <header className="sticky top-0 z-20 bg-background/80 sidebar:hidden safe-area-top">