feat(ui): refine home and private room navigation

Replace the floating bottom navigation with a full-width tab bar. Add splash press feedback and a neutral private room background.

src/app/splash/components/__tests__/tailwind-components.test.tsx

@@ -70,6 +70,9 @@ describe("splash Tailwind components", () => {
     expect(readyHtml).toContain("z-2");
     expect(readyHtml).toContain("max-w-120");
     expect(readyHtml).toContain("bg-[linear-gradient(to_right");
+    expect(readyHtml).toContain("active:enabled:scale-96");
+    expect(readyHtml).toContain("active:enabled:brightness-90");
+    expect(readyHtml).toContain("touch-manipulation");
     expect(readyHtml).toContain("Start Chatting");
     expect(loadingHtml).toContain("disabled");
     expect(loadingHtml).toContain("animate-spin");

src/app/splash/components/splash-button.tsx

@@ -19,7 +19,7 @@ export function SplashButton({ onStartChat }: SplashButtonProps) {
         type="button"
         onClick={onStartChat}
         disabled={isLoading}
-        className="inline-flex min-h-(--responsive-control-height,48px) w-full max-w-120 flex-auto cursor-pointer items-center justify-center rounded-(--radius-full,999px) border-0 bg-[linear-gradient(to_right,var(--color-button-gradient-start),var(--color-button-gradient-end))] px-[clamp(var(--spacing-lg,16px),5.556vw,30px)] font-bold italic text-white shadow-[0_0_10px_rgba(248,89,168,0.3)] disabled:cursor-not-allowed disabled:opacity-70"
+        className="inline-flex min-h-(--responsive-control-height,48px) w-full max-w-120 touch-manipulation flex-auto cursor-pointer items-center justify-center rounded-(--radius-full,999px) border-0 bg-[linear-gradient(to_right,var(--color-button-gradient-start),var(--color-button-gradient-end))] px-[clamp(var(--spacing-lg,16px),5.556vw,30px)] font-bold italic text-white shadow-[0_0_10px_rgba(248,89,168,0.3)] transition-[filter,box-shadow,transform] duration-150 ease-out [-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white enabled:hover:-translate-y-px enabled:hover:brightness-105 enabled:hover:shadow-[0_8px_22px_rgba(248,89,168,0.42)] active:enabled:translate-y-0.5 active:enabled:scale-96 active:enabled:brightness-90 active:enabled:shadow-[0_2px_6px_rgba(248,89,168,0.24)] motion-reduce:transition-none motion-reduce:active:enabled:transform-none disabled:cursor-not-allowed disabled:opacity-70"
       >
         {isLoading ? (
           <LoadingIndicator color="#ffffff" />

src/app/splash/components/splash-latest-message.module.css

@@ -14,16 +14,19 @@
   color: #ffffff;
   cursor: pointer;
   font: inherit;
+  -webkit-tap-highlight-color: transparent;
   text-align: left;
+  touch-action: manipulation;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.18),
     0 18px 42px rgba(46, 22, 38, 0.18);
   backdrop-filter: blur(18px);
-  animation: messageFloatIn 0.5s ease 0.08s both;
+  animation: messageFloatIn 0.5s ease 0.08s backwards;
   transition:
     border-color 0.18s ease,
+    filter 0.14s ease,
     box-shadow 0.18s ease,
-    transform 0.18s ease;
+    transform 0.14s ease;
 }
 
 .card:hover {
@@ -35,7 +38,12 @@
 }
 
 .card:active {
-  transform: translateY(1px) scale(0.995);
+  border-color: rgba(255, 255, 255, 0.48);
+  filter: brightness(0.9);
+  box-shadow:
+    inset 0 2px 8px rgba(22, 10, 20, 0.28),
+    0 6px 16px rgba(28, 12, 24, 0.18);
+  transform: translateY(2px) scale(0.97);
 }
 
 .card:focus-visible {
@@ -53,6 +61,11 @@
   background: linear-gradient(145deg, #ffb36d, #ff5d95);
   box-shadow: 0 10px 24px rgba(255, 95, 128, 0.24);
   overflow: hidden;
+  transition: transform 0.14s ease;
+}
+
+.card:active .avatarWrap {
+  transform: scale(0.94);
 }
 
 .avatar {
@@ -122,3 +135,19 @@
     background-position: 0 0;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .avatarWrap {
+    transition-duration: 0.01ms;
+  }
+
+  .card {
+    animation: none;
+  }
+
+  .card:active,
+  .card:active .avatarWrap {
+    transform: none;
+  }
+}

src/app/splash/components/splash-screen.module.css

@@ -31,7 +31,10 @@
   padding:
     calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
     calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
-    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) + 86px)
+    calc(
+      var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) +
+        var(--app-bottom-nav-height, 64px)
+    )
     calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }
 

src/app/splash/splash-screen.tsx

@@ -40,6 +40,10 @@ export function SplashScreen() {
     navigator.push(ROUTES.privateRoom, { scroll: false });
   };
 
+  const handleOpenSplash = () => {
+    navigator.push(ROUTES.splash, { scroll: false });
+  };
+
   useEffect(() => {
     pwaUtil.prepareInstallPrompt();
   }, []);
@@ -69,9 +73,9 @@ export function SplashScreen() {
           </p>
         </div>
         <AppBottomNav
-          activeItem={null}
+          activeItem="chat"
           variant="dark"
-          onChatClick={handleStartChat}
+          onChatClick={handleOpenSplash}
           onPrivateRoomClick={handleOpenPrivateRoom}
         />
       </div>