Improvements to the UI

components/avatar/avatar-customize-layout.tsx

@@ -1,5 +1,4 @@
 import { AppPageHeader } from "@/components/layout/app-page-header";
-import { AppTopBar } from "@/components/layout/app-top-bar";
 
 type AvatarCustomizeLayoutProps = {
   eyebrow?: string;
@@ -15,9 +14,7 @@ export function AvatarCustomizeLayout({
   children,
 }: AvatarCustomizeLayoutProps) {
   return (
-    <div className="relative min-h-dvh bg-background pt-topbar">
-      <AppTopBar />
-
+    <div className="relative min-h-dvh flex-1 bg-background">
       <main className="mx-auto max-w-lg px-4 py-6 lg:max-w-6xl lg:px-5">
         <AppPageHeader
           eyebrow={eyebrow}

components/avatar/avatar-page-content.tsx

@@ -41,7 +41,7 @@ export function AvatarPageContent() {
 
   if (!customization) {
     return (
-      <p className="text-xs text-muted-foreground">Loading your pet...</p>
+      <p className="text-xs text-muted-foreground">Loading your bit...</p>
     );
   }
 

components/avatar/avatar-status-card.tsx

@@ -61,7 +61,7 @@ export function AvatarStatusCard({ customization }: AvatarStatusCardProps) {
       <Card>
         <CardContent className="pt-6">
           <p className="text-center text-sm text-muted-foreground">
-            Loading your pet...
+            Loading your bit...
           </p>
         </CardContent>
       </Card>
@@ -100,11 +100,11 @@ export function AvatarStatusCard({ customization }: AvatarStatusCardProps) {
         <p className="text-center text-sm text-muted-foreground">
           {hasCheckedInToday
             ? completedTaskCount > 0
-              ? `Your pet reacts to today's quiz and ${completedTaskCount} completed task${completedTaskCount === 1 ? "" : "s"}. Meals, hydration, sleep, and relaxing habits boost health and mood.`
-              : "Your pet is reacting to today's wellness check-in. Complete habits to boost mood, energy, and health."
+              ? `Your bit reacts to today's quiz and ${completedTaskCount} completed task${completedTaskCount === 1 ? "" : "s"}. Meals, hydration, sleep, and relaxing habits boost health and mood.`
+              : "Your bit is reacting to today's wellness check-in. Complete habits to boost mood, energy, and health."
             : completedTaskCount > 0
-              ? "Complete today's quiz for a full wellness read, then keep completing habits to boost your pet."
-              : "Complete today's quiz to update your pet's mood, energy, and health."}
+              ? "Complete today's quiz for a full wellness read, then keep completing habits to boost your bit."
+              : "Complete today's quiz to update your bit's mood, energy, and health."}
         </p>
         {!hasCheckedInToday ? (
           <Button asChild className="w-full">

components/avatar/customize-page-content.tsx

@@ -26,6 +26,7 @@ export function CustomizePageContent() {
   const [shopItems, setShopItems] = useState<ShopItemRecord[]>([]);
   const [coins, setCoins] = useState<number | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [editorKey, setEditorKey] = useState(0);
 
   const loadCustomization = useCallback(async () => {
     try {
@@ -46,6 +47,7 @@ export function CustomizePageContent() {
       setEquippedItems(inventory.equippedItems);
       setShopItems(inventory.items);
       setCoins(inventory.coins);
+      setEditorKey((current) => current + 1);
     } catch (error) {
       setLoadError(
         error instanceof Error ? error.message : "Could not load your avatar.",
@@ -93,7 +95,7 @@ export function CustomizePageContent() {
 
   return (
     <CharacterCreator
-      key={`${customization.variants.head}-${customization.variants.torso}-${customization.colors.skin.l}-${customization.roomBackground}-${avatarName}-${ownedVariantIds.join(",")}`}
+      key={editorKey}
       initialCustomization={{
         ...customization,
         name: avatarName,

components/avatar/pixel-avatar.tsx

@@ -29,7 +29,7 @@ export function PixelAvatar({
   return (
     <div
       className={cn("flex flex-col items-center gap-3", className)}
-      aria-label={`Pixel pet avatar, mood ${mood}`}
+      aria-label={`Bit avatar, mood ${mood}`}
     >
       <div
         className={cn(