Refactor layout components to improve responsiveness and accessibility; integrate appShell classes for consistent styling across DesktopAIShell and BottomNav. Update SelectPage to enhance option selection UI with image support and language filtering logic in SystemPage for better localization handling.

client/src/components/BottomNav.tsx

@@ -22,6 +22,7 @@ import {
 } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useMemo } from "react";
+import { appShellColumnClass, appShellGutterClass } from "@/lib/appShell";
 
 type BottomNavLocale = NonNullable<(typeof localeZh)["bottomNav"]>;
 
@@ -56,16 +57,19 @@ export default function BottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50 lg:left-1/2 lg:right-auto lg:w-[min(1180px,calc(100vw-3rem))] lg:-translate-x-1/2"
-      style={{
-        background: "rgba(10, 10, 12, 0.96)",
-        backdropFilter: "blur(40px) saturate(200%)",
-        WebkitBackdropFilter: "blur(40px) saturate(200%)",
-        borderTop: "0.5px solid rgba(255,255,255,0.1)",
-        boxShadow: "0 -1px 0 rgba(0,255,246,0.05)",
-        paddingBottom: "env(safe-area-inset-bottom, 8px)",
-      }}
+      className={`fixed inset-x-0 bottom-0 z-50 flex justify-center pointer-events-none ${appShellGutterClass}`}
     >
+      <div
+        className={`pointer-events-auto ${appShellColumnClass}`}
+        style={{
+          background: "rgba(10, 10, 12, 0.96)",
+          backdropFilter: "blur(40px) saturate(200%)",
+          WebkitBackdropFilter: "blur(40px) saturate(200%)",
+          borderTop: "0.5px solid rgba(255,255,255,0.1)",
+          boxShadow: "0 -1px 0 rgba(0,255,246,0.05)",
+          paddingBottom: "env(safe-area-inset-bottom, 8px)",
+        }}
+      >
       <div className="flex items-stretch justify-around">
         {NAV_ITEMS.map((item) => {
           const isActive =
@@ -192,6 +196,7 @@ export default function BottomNav() {
           );
         })}
       </div>
+      </div>
     </nav>
   );
 }

client/src/components/DesktopAIShell.tsx

@@ -92,7 +92,9 @@ export default function DesktopAIShell({ children }: { children: ReactNode }) {
           "min-w-0",
           showSplit
             ? "h-full min-h-0 overflow-y-auto overflow-x-hidden"
-            : "min-h-dvh max-h-dvh overflow-x-hidden overflow-y-auto overscroll-y-contain [touch-action:pan-y]",
+            : isLgUp
+              ? "min-h-dvh overflow-x-hidden"
+              : "min-h-dvh max-h-dvh overflow-x-hidden overflow-y-auto overscroll-y-contain [touch-action:pan-y]",
         )}
         style={
           showSplit