Phase 1 Foundations: onboarding profile, nav padding, backpack views, AI persona

- profileStore (MMKV) + pure profileLogic (types, options, isProfileComplete,
  buildPersona). Rich first-run onboarding (app/onboarding.tsx): name/role,
  industry, vibes (multi), goal, brand colors, social links, inspirations.
- First-launch gate in (tabs)/_layout via <Redirect> guarded by a hydration
  flag; onboarding registered in the root stack.
- Bottom tab bar made taller with safe-area bottom padding.
- Backpack (Cards tab): Grid / Showcase view toggle + add-new entry.
- Business cards skip data entry: demo.tsx prefills name/title/links from the
  profile (creative tools lead).
- Persona → AI: SceneBrief/refine_prompt gain an optional persona (role/vibe/
  colors/goal); mobile generators pass buildPersona(profile). FakeAiClient
  echoes the role. genwizard gains MultiChips.
- Tests: mobile 28 (new profileLogic), backend 121 (new refine_includes_persona).

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/(tabs)/_layout.tsx

@@ -4,7 +4,10 @@
 //   robot → work-agent cards
 //   cog → settings
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import { Redirect, Tabs } from "expo-router";
+import { StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useProfileStore } from "../../src/stores/profileStore";
 
 type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
 
@@ -15,6 +18,15 @@ function tabIcon(name: IconName) {
 }
 
 export default function TabsLayout() {
+  const insets = useSafeAreaInsets();
+  const hydrated = useProfileStore((s) => s.hydrated);
+  const onboarded = useProfileStore((s) => s.onboarded);
+
+  // Wait for MMKV to rehydrate before deciding, then send first-run users to
+  // onboarding (avoids a flash of the tabs).
+  if (!hydrated) return null;
+  if (!onboarded) return <Redirect href="/onboarding" />;
+
   return (
     <Tabs
       screenOptions={{
@@ -23,8 +35,14 @@ export default function TabsLayout() {
         tabBarInactiveTintColor: "#6b6b70",
         tabBarStyle: {
           backgroundColor: "#0e0e12",
+          borderTopWidth: StyleSheet.hairlineWidth,
           borderTopColor: "#1c1c22",
+          height: 64 + insets.bottom,
+          paddingTop: 10,
+          paddingBottom: Math.max(insets.bottom, 14),
         },
+        tabBarLabelStyle: { fontSize: 11, fontWeight: "600", marginBottom: 2 },
+        tabBarItemStyle: { paddingVertical: 4 },
       }}
     >
       <Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />