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/_components/core/app-bottom-nav.module.css

@@ -1,77 +1,65 @@
 .root {
   position: fixed;
-  bottom: calc(var(--app-safe-bottom, 0px) + 12px);
+  bottom: 0;
   left: 50%;
   z-index: 30;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
   box-sizing: border-box;
-  width: min(
-    calc(100vw - var(--app-safe-left, 0px) - var(--app-safe-right, 0px) - 28px),
-    calc(var(--app-max-width, 540px) - 28px)
+  width: min(100vw, var(--app-max-width, 540px));
+  min-height: calc(
+    var(--app-bottom-nav-height, 64px) + var(--app-safe-bottom, 0px)
   );
-  margin: 0 auto;
-  padding: 8px;
-  border: 1px solid var(--nav-border);
-  border-radius: 28px;
+  padding:
+    6px
+    calc(8px + var(--app-safe-right, 0px))
+    calc(6px + var(--app-safe-bottom, 0px))
+    calc(8px + var(--app-safe-left, 0px));
+  border: 0;
+  border-top: 1px solid var(--nav-border);
   background: var(--nav-background);
   box-shadow: var(--nav-shadow);
   transform: translateX(-50%);
-  backdrop-filter: blur(20px) saturate(1.2);
 }
 
 .warm {
-  --nav-background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 240, 230, 0.8)),
-    rgba(255, 255, 255, 0.78);
-  --nav-border: rgba(255, 116, 159, 0.18);
-  --nav-shadow:
-    0 20px 48px rgba(131, 72, 85, 0.16),
-    inset 0 1px 0 rgba(255, 255, 255, 0.92);
-  --nav-button-color: #80686f;
-  --nav-button-hover-background: rgba(255, 116, 159, 0.1);
-  --nav-button-hover-color: #2d2024;
-  --nav-active-background: linear-gradient(135deg, #fff4ec, #ffe5f0);
-  --nav-active-border: rgba(255, 116, 159, 0.26);
-  --nav-active-color: #201417;
-  --nav-active-shadow: 0 12px 26px rgba(255, 116, 159, 0.16);
+  --nav-background: #fffaf7;
+  --nav-border: rgba(70, 46, 55, 0.12);
+  --nav-shadow: 0 -6px 18px rgba(70, 46, 55, 0.08);
+  --nav-button-color: #806f75;
+  --nav-button-hover-background: rgba(246, 87, 160, 0.07);
+  --nav-button-hover-color: #4a353d;
+  --nav-active-color: #f657a0;
   --nav-focus-color: #ff5d95;
 }
 
 .dark {
-  --nav-background:
-    linear-gradient(135deg, rgba(36, 22, 39, 0.78), rgba(255, 255, 255, 0.1)),
-    rgba(23, 16, 28, 0.72);
-  --nav-border: rgba(255, 255, 255, 0.18);
-  --nav-shadow:
-    0 22px 52px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  --nav-button-color: rgba(255, 255, 255, 0.78);
-  --nav-button-hover-background: rgba(255, 255, 255, 0.12);
+  --nav-background: #17121c;
+  --nav-border: rgba(255, 255, 255, 0.14);
+  --nav-shadow: 0 -6px 20px rgba(0, 0, 0, 0.24);
+  --nav-button-color: rgba(255, 255, 255, 0.62);
+  --nav-button-hover-background: rgba(255, 255, 255, 0.07);
   --nav-button-hover-color: #ffffff;
-  --nav-active-background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 116, 159, 0.2));
-  --nav-active-border: rgba(255, 255, 255, 0.3);
-  --nav-active-color: #ffffff;
-  --nav-active-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+  --nav-active-color: #ff8fc4;
   --nav-focus-color: #ffffff;
 }
 
 .button {
   display: flex;
   min-height: 52px;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  border: 1px solid transparent;
-  border-radius: 22px;
+  gap: 3px;
+  border: 0;
+  border-radius: 10px;
   background: transparent;
   color: var(--nav-button-color);
   cursor: pointer;
   font: inherit;
-  font-size: clamp(12px, 2.963vw, 14px);
-  font-weight: 820;
+  font-size: clamp(11px, 2.407vw, 13px);
+  font-weight: 760;
+  line-height: 1.1;
   transition:
     background 0.18s ease,
     color 0.18s ease,
@@ -93,8 +81,5 @@
 }
 
 .active {
-  border-color: var(--nav-active-border);
-  background: var(--nav-active-background);
   color: var(--nav-active-color);
-  box-shadow: var(--nav-active-shadow);
 }