Fix header opacity by layering fixed backing below content area

Lowers the fixed backing layer to z-index 1 and adds z-10 to
the main content area. When at the top of the page, the backing
provides the 85% opacity behind the header. When scrolled, the
content area (z-10) occludes the backing (z-1), so only one
layer of 85% is ever behind the header — matching the tab bar.

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">

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">