feat(app-bottom-nav): update styles and add variant support; integrate dark variant in SplashScreen

src/app/_components/core/app-bottom-nav.module.css

@@ -1,36 +1,73 @@
 .root {
   position: fixed;
-  right: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
+  bottom: calc(var(--app-safe-bottom, 0px) + 12px);
-  bottom: 0;
+  left: 50%;
-  left: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
   z-index: 30;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  gap: 8px;
   box-sizing: border-box;
-  width: min(100vw, var(--app-max-width, 540px));
+  width: min(
+    calc(100vw - var(--app-safe-left, 0px) - var(--app-safe-right, 0px) - 28px),
+    calc(var(--app-max-width, 540px) - 28px)
+  );
   margin: 0 auto;
-  padding:
+  padding: 8px;
-    10px
+  border: 1px solid var(--nav-border);
-    calc(var(--app-safe-right, 0px) + 14px)
+  border-radius: 28px;
-    calc(var(--app-safe-bottom, 0px) + 10px)
+  background: var(--nav-background);
-    calc(var(--app-safe-left, 0px) + 14px);
+  box-shadow: var(--nav-shadow);
-  border-top: 1px solid rgba(44, 29, 34, 0.08);
+  transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(20px) saturate(1.2);
-  box-shadow: 0 -18px 48px rgba(53, 34, 40, 0.09);
+}
-  backdrop-filter: blur(18px);
+
+.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-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-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-focus-color: #ffffff;
 }
 
 .button {
   display: flex;
-  min-height: 54px;
+  min-height: 52px;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1px solid transparent;
-  border-radius: 18px;
+  border-radius: 22px;
   background: transparent;
-  color: #8d777e;
+  color: var(--nav-button-color);
   cursor: pointer;
   font: inherit;
   font-size: clamp(12px, 2.963vw, 14px);
@@ -42,8 +79,8 @@
 }
 
 .button:hover {
-  background: rgba(255, 116, 159, 0.08);
+  background: var(--nav-button-hover-background);
-  color: #2d2024;
+  color: var(--nav-button-hover-color);
 }
 
 .button:active {
@@ -51,13 +88,13 @@
 }
 
 .button:focus-visible {
-  outline: 2px solid #ff5d95;
+  outline: 2px solid var(--nav-focus-color);
   outline-offset: 3px;
 }
 
 .active {
-  border-color: rgba(255, 116, 159, 0.2);
+  border-color: var(--nav-active-border);
-  background: linear-gradient(135deg, rgba(255, 244, 236, 0.98), rgba(255, 232, 241, 0.96));
+  background: var(--nav-active-background);
-  color: #201417;
+  color: var(--nav-active-color);
-  box-shadow: 0 10px 24px rgba(255, 116, 159, 0.12);
+  box-shadow: var(--nav-active-shadow);
 }

src/app/_components/core/app-bottom-nav.tsx

@@ -5,20 +5,23 @@ import { Camera, MessageCircle } from "lucide-react";
 import styles from "./app-bottom-nav.module.css";
 
 export type AppBottomNavItem = "chat" | "privateRoom";
+export type AppBottomNavVariant = "warm" | "dark";
 
 export interface AppBottomNavProps {
   activeItem?: AppBottomNavItem | null;
+  variant?: AppBottomNavVariant;
   onChatClick: () => void;
   onPrivateRoomClick: () => void;
 }
 
 export function AppBottomNav({
   activeItem = null,
+  variant = "warm",
   onChatClick,
   onPrivateRoomClick,
 }: AppBottomNavProps) {
   return (
-    <nav className={styles.root} aria-label="Primary navigation">
+    <nav className={getRootClass(variant)} aria-label="Primary navigation">
       <button
         type="button"
         className={getButtonClass(activeItem === "chat")}
@@ -41,6 +44,10 @@ export function AppBottomNav({
   );
 }
 
+function getRootClass(variant: AppBottomNavVariant): string {
+  return [styles.root, styles[variant]].filter(Boolean).join(" ");
+}
+
 function getButtonClass(active: boolean): string {
   return [styles.button, active ? styles.active : ""].filter(Boolean).join(" ");
 }

src/app/splash/splash-screen.tsx

@@ -58,6 +58,7 @@ export function SplashScreen() {
         </div>
         <AppBottomNav
           activeItem={null}
+          variant="dark"
           onChatClick={handleStartChat}
           onPrivateRoomClick={handleOpenPrivateRoom}
         />