diff --git a/services/frontend/src/features/analytics/components/ActivityChart.tsx b/services/frontend/src/features/analytics/components/ActivityChart.tsx
index 9179a00..4de4e95 100644
--- a/services/frontend/src/features/analytics/components/ActivityChart.tsx
+++ b/services/frontend/src/features/analytics/components/ActivityChart.tsx
@@ -35,7 +35,7 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
   });
 
   return (
-    <Card className="col-span-1 lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 lg:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-semibold">
           Aktivitas per Jam
@@ -46,9 +46,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
       </CardHeader>
       <CardContent>
         <div className="space-y-3">
-          <div className="grid grid-cols-4 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div className="grid grid-cols-3 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
             <span>Clean</span>
-            <span>Warned</span>
             <span>Flagged</span>
             <span>Error</span>
           </div>
@@ -56,13 +55,12 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
             {data.map((bucket) => {
               const total = Math.max(bucket.total, 1);
               const clean = bucket.clean / total;
-              const warned = bucket.warned / total;
               const flagged = bucket.flagged / total;
               const error = bucket.error / total;
               return (
                 <div
                   key={bucket.hour}
-                  className="grid gap-1 rounded-xl border border-border bg-background/50 p-3"
+                  className="grid gap-1 rounded-xl border border-sky-100 bg-white p-3"
                 >
                   <div className="flex items-center justify-between text-[11px] text-muted-foreground">
                     <span className="font-medium text-foreground">
@@ -70,21 +68,17 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
                     </span>
                     <span>{bucket.total} pesan</span>
                   </div>
-                  <div className="flex h-3 overflow-hidden rounded-full bg-muted">
+                  <div className="flex h-3 overflow-hidden rounded-full bg-sky-50">
                     <div
-                      className="bg-emerald-500/80"
+                      className="bg-gradient-to-r from-primary to-pink-300"
                       style={{ width: `${clean * 100}%` }}
                     />
                     <div
-                      className="bg-amber-500/80"
-                      style={{ width: `${warned * 100}%` }}
-                    />
-                    <div
-                      className="bg-red-500/80"
+                      className="bg-accent/70"
                       style={{ width: `${flagged * 100}%` }}
                     />
                     <div
-                      className="bg-orange-500/80"
+                      className="bg-orange-300/70"
                       style={{ width: `${error * 100}%` }}
                     />
                   </div>
@@ -100,8 +94,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
 
 function LoadingBox() {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
-      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
+      <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
       <span className="ml-2">Memuat data...</span>
     </Card>
   );
@@ -109,7 +103,7 @@ function LoadingBox() {
 
 function EmptyBox({ text }: { text: string }) {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
       {text}
     </Card>
   );
diff --git a/services/frontend/src/features/analytics/components/ControlBar.tsx b/services/frontend/src/features/analytics/components/ControlBar.tsx
index 092f5eb..fdb2a18 100644
--- a/services/frontend/src/features/analytics/components/ControlBar.tsx
+++ b/services/frontend/src/features/analytics/components/ControlBar.tsx
@@ -38,7 +38,7 @@ export function ControlBar({
     <Card>
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center gap-2 text-lg">
-          <BarChart3 className="h-5 w-5 text-muted-foreground" />
+          <BarChart3 className="h-5 w-5 text-primary" />
           Analisis Moderasi
         </CardTitle>
         <CardDescription>
@@ -46,7 +46,7 @@ export function ControlBar({
             <>
               Pantau statistik, tren topik, dan aktivitas user di seluruh
               channel{" "}
-              <span className="font-medium text-foreground">{guildName}</span>.
+              <span className="font-medium text-primary">{guildName}</span>.
             </>
           ) : (
             "Pantau statistik, tren topik, dan aktivitas user."
@@ -55,16 +55,16 @@ export function ControlBar({
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-1 rounded-md bg-muted p-0.5">
+          <div className="flex items-center gap-1 rounded-xl bg-sky-50 p-0.5 ring-1 ring-sky-200/50">
             {TIME_RANGES.map((tr) => (
               <button
                 key={tr.value}
                 type="button"
                 onClick={() => onHoursChange(tr.value)}
                 className={cn(
-                  "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
+                  "rounded-lg px-2.5 py-1 text-xs font-medium transition-all",
                   hours === tr.value
-                    ? "bg-background text-foreground shadow-sm"
+                    ? "bg-primary text-white shadow-sm"
                     : "text-muted-foreground hover:text-foreground",
                 )}
               >
@@ -77,11 +77,11 @@ export function ControlBar({
             disabled={isFetching}
             variant="outline"
             size="sm"
-            className="ml-auto shrink-0"
+            className="ml-auto shrink-0 rounded-xl border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
           >
             {isFetching ? (
               <span className="flex items-center gap-1.5">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                <span className="h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                 Memuat...
               </span>
             ) : (
diff --git a/services/frontend/src/features/analytics/components/SummaryCards.tsx b/services/frontend/src/features/analytics/components/SummaryCards.tsx
index df78e10..deecd2b 100644
--- a/services/frontend/src/features/analytics/components/SummaryCards.tsx
+++ b/services/frontend/src/features/analytics/components/SummaryCards.tsx
@@ -27,6 +27,16 @@ export function SummaryCards({
       ? Math.round((messages.flagged / messages.total) * 100)
       : 0;
 
+  const icons: Record<string, string> = {
+    "Total Pesan": "💬",
+    "Rata-rata/jam": "📊",
+    Clean: "✅",
+    Flagged: "🚩",
+    Pending: "⏳",
+    "User Aktif": "👤",
+    Channel: "📡",
+  };
+
   const cards = [
     {
       label: "Total Pesan",
@@ -41,37 +51,42 @@ export function SummaryCards({
     {
       label: "Clean",
       value: cleanPct > 0 ? `${cleanPct}%` : "—",
-      accent: "text-emerald-400",
+      accent: "text-primary",
     },
     {
       label: "Flagged",
       value: flaggedPct > 0 ? `${flaggedPct}%` : "—",
-      accent: "text-red-400",
+      accent: "text-accent",
     },
     {
       label: "Pending",
       value: formatNum(messages?.pending),
-      accent: "text-slate-400",
+      accent: "text-muted-foreground",
     },
     {
       label: "User Aktif",
       value: formatNum(activeUsersCount),
-      accent: "text-violet-400",
+      accent: "text-primary",
     },
     {
       label: "Channel",
       value: formatNum(totalChannels),
-      accent: "text-blue-400",
+      accent: "text-primary",
     },
   ];
 
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
       {cards.map((card) => (
-        <Card key={card.label} className="overflow-hidden glass border-white/5">
+        <Card key={card.label} className="overflow-hidden">
           <CardContent className="p-3">
-            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-              {card.label}
+            <div className="flex items-center gap-1.5">
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-[10px]">
+                {icons[card.label] ?? "📋"}
+              </span>
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                {card.label}
+              </div>
             </div>
             <div
               className={cn(
diff --git a/services/frontend/src/features/analytics/components/TrendChart.tsx b/services/frontend/src/features/analytics/components/TrendChart.tsx
index 448a992..2cb46e3 100644
--- a/services/frontend/src/features/analytics/components/TrendChart.tsx
+++ b/services/frontend/src/features/analytics/components/TrendChart.tsx
@@ -43,10 +43,9 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
       <CardContent>
         <div className="space-y-4">
           <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
-            <LegendDot color="bg-blue-500" label="Total" />
-            <LegendDot color="bg-emerald-500" label="Clean" />
-            <LegendDot color="bg-amber-500" label="Warned" />
-            <LegendDot color="bg-red-500" label="Flagged" />
+            <LegendDot color="bg-primary" label="Total" />
+            <LegendDot color="bg-emerald-400" label="Clean" />
+            <LegendDot color="bg-accent" label="Flagged" />
           </div>
 
           <div className="overflow-hidden rounded-2xl border border-border bg-background/50 p-4">
diff --git a/services/frontend/src/features/analytics/index.tsx b/services/frontend/src/features/analytics/index.tsx
index 168b963..e9f9d9a 100644
--- a/services/frontend/src/features/analytics/index.tsx
+++ b/services/frontend/src/features/analytics/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -8,6 +9,8 @@ import { TrendChart } from "./components/TrendChart";
 import { UserTable } from "./components/UserTable";
 import { ViolatorTable } from "./components/ViolatorTable";
 import { useAnalytics } from "./hooks/useAnalytics";
+import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
+import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AnalyticsPanelProps {
   guildId: string;
@@ -43,7 +46,7 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (error && !analyticsMessages) {
     return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-300">
+      <div className="rounded-2xl border border-red-300/40 bg-red-50/60 p-6 text-sm text-red-600 shadow-sm">
         {error}
       </div>
     );
@@ -51,46 +54,61 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (!guildId) {
     return (
-      <div className="flex min-h-[300px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8">
-        <p className="text-sm text-muted-foreground">
-          Menunggu konfigurasi guild...
-        </p>
-      </div>
+      <EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." />
     );
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <ControlBar
-        guildName={guildName}
-        hours={hours}
-        isFetching={isFetching}
-        onHoursChange={setHours}
-        onRefresh={() => {
-          refresh();
-          refreshViolators();
-        }}
-      />
-      <SummaryCards
-        messages={analyticsMessages}
-        activeUsersCount={activeUsersCount}
-        totalChannels={totalChannels}
-        loading={loading}
-      />
-      <div className="grid grid-cols-3 gap-4">
-        <ActivityChart hourly={hourly} loading={loading} />
-        <div className="col-span-1">
-          <TopicList topics={topics} loading={loading} />
+    <motion.div
+      className="flex flex-col gap-4"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      <motion.div variants={cardItem}>
+        <ControlBar
+          guildName={guildName}
+          hours={hours}
+          isFetching={isFetching}
+          onHoursChange={setHours}
+          onRefresh={() => {
+            refresh();
+            refreshViolators();
+          }}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <SummaryCards
+          messages={analyticsMessages}
+          activeUsersCount={activeUsersCount}
+          totalChannels={totalChannels}
+          loading={loading}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <ActivityChart hourly={hourly} loading={loading} />
+          <div className="col-span-1">
+            <TopicList topics={topics} loading={loading} />
+          </div>
         </div>
-      </div>
-      {hours >= 48 && <TrendChart trend={trend} loading={loading} />}
-      <div className="grid grid-cols-3 gap-4">
-        <Heatmap cells={heatmap} loading={loading} />
-        <div className="col-span-1">
-          <UserTable users={topUsers} loading={loading} />
+      </motion.div>
+      {hours >= 48 && (
+        <motion.div variants={cardItem}>
+          <TrendChart trend={trend} loading={loading} />
+        </motion.div>
+      )}
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <Heatmap cells={heatmap} loading={loading} />
+          <div className="col-span-1">
+            <UserTable users={topUsers} loading={loading} />
+          </div>
         </div>
-      </div>
-      <ViolatorTable users={violators} loading={loading} />
-    </div>
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <ViolatorTable users={violators} loading={loading} />
+      </motion.div>
+    </motion.div>
   );
 }
diff --git a/services/frontend/src/features/auth/index.tsx b/services/frontend/src/features/auth/index.tsx
index 09bc959..9ec786f 100644
--- a/services/frontend/src/features/auth/index.tsx
+++ b/services/frontend/src/features/auth/index.tsx
@@ -1,6 +1,7 @@
 import { Lock } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { login } from "../../shared/api/client";
+import { useGsapTransition } from "../../shared/hooks/useGsapTransition";
 import {
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   CardTitle,
   Input,
 } from "../../shared/ui";
+import { ChibiMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AuthOverlayProps {
   onAuthenticated: () => void;
@@ -19,6 +21,11 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const { pageRef, animateIn } = useGsapTransition("auth");
+
+  useEffect(() => {
+    animateIn();
+  }, [animateIn]);
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
@@ -36,11 +43,14 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
   };
 
   return (
-    <div className="flex items-center justify-center p-4">
-      <Card className="w-full max-w-md">
+    <div ref={pageRef} className="flex items-center justify-center p-4">
+      <Card className="w-full max-w-md border-primary/30 shadow-lg shadow-primary/10">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <Lock className="h-6 w-6" />
+          <div className="mx-auto mb-4 flex items-center justify-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Lock className="h-6 w-6" />
+            </div>
+            <ChibiMascot variant="peeking" size="sm" />
           </div>
           <CardTitle>Admin Access Required</CardTitle>
           <CardDescription>
diff --git a/services/frontend/src/features/live/components/ActiveSpeakers.tsx b/services/frontend/src/features/live/components/ActiveSpeakers.tsx
index 6af54be..6845f6a 100644
--- a/services/frontend/src/features/live/components/ActiveSpeakers.tsx
+++ b/services/frontend/src/features/live/components/ActiveSpeakers.tsx
@@ -1,5 +1,6 @@
 import type { ActiveSpeaker } from "../../../shared/api/client";
 import { Skeleton } from "../../../shared/ui";
+import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
 
 interface ActiveSpeakersProps {
   speakers: ActiveSpeaker[];
@@ -8,9 +9,7 @@ interface ActiveSpeakersProps {
 export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
   if (speakers.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
-        No active speakers.
-      </div>
+      <EmptyStateMascot variant="sleeping" message="No active speakers~" />
     );
   }
 
@@ -22,16 +21,18 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
         return (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-xl border border-border bg-background/60 p-3"
+            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
           >
             <img
               src={s.avatar}
               alt=""
-              className="h-8 w-8 rounded-full object-cover"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
             />
             <div className="min-w-0">
               <div className="truncate text-sm font-medium">{s.username}</div>
-              <div className="text-xs text-emerald-300">Speaking</div>
+              <div className="text-xs font-medium text-emerald-700">
+                Speaking
+              </div>
             </div>
           </div>
         );
diff --git a/services/frontend/src/features/live/components/AudioVisualizer.tsx b/services/frontend/src/features/live/components/AudioVisualizer.tsx
index b30b31d..8a15710 100644
--- a/services/frontend/src/features/live/components/AudioVisualizer.tsx
+++ b/services/frontend/src/features/live/components/AudioVisualizer.tsx
@@ -21,20 +21,21 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
     const barWidth = width / levels.length;
     const maxBarHeight = height * 0.85;
 
+    // Sky-blue to pink gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, "#7EC8E3");
+    gradient.addColorStop(1, "#FFB7C5");
+
     for (let i = 0; i < levels.length; i++) {
       const level = levels[i];
       const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
       const x = i * barWidth;
       const y = height - barHeight;
 
-      // Gradient color based on level
-      const hue = 199 - level * 199;
-      const saturation = 89;
-      const lightness = 48 + level * 20;
-      ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+      ctx.fillStyle = gradient;
 
-      // Rounded bar
-      const radius = barWidth * 0.3;
+      // More rounded bar
+      const radius = barWidth * 0.4;
       ctx.beginPath();
       ctx.moveTo(x + radius, y);
       ctx.lineTo(x + barWidth - radius, y);
@@ -53,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
         ref={canvasRef}
         width={512}
         height={128}
-        className="w-full rounded-xl bg-muted/30"
+        className="w-full rounded-xl bg-sky-50/30"
         style={{ height: "128px" }}
       />
     </div>
diff --git a/services/frontend/src/features/live/components/VoiceConnectionCard.tsx b/services/frontend/src/features/live/components/VoiceConnectionCard.tsx
index 6fced81..3548b61 100644
--- a/services/frontend/src/features/live/components/VoiceConnectionCard.tsx
+++ b/services/frontend/src/features/live/components/VoiceConnectionCard.tsx
@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
   onStreamingToggle,
 }: VoiceConnectionCardProps) {
   return (
-    <div className="rounded-2xl border border-border bg-card shadow-sm">
+    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
       <div className="p-6">
         <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5" /> Voice Bridge
+          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
         </h3>
         <p className="mt-1 text-sm text-muted-foreground">
           Join a Discord voice channel, listen, and transmit audio.
@@ -47,7 +47,7 @@ export function VoiceConnectionCard({
 
         <div className="mt-4 grid gap-4 md:grid-cols-2">
           <div className="space-y-2">
-            <label className="text-sm font-medium">Guild</label>
+            <label className="text-sm font-medium text-foreground">Guild</label>
             <Select
               value={selectedGuild}
               onChange={(e) => onGuildChange(e.target.value)}
@@ -56,7 +56,7 @@ export function VoiceConnectionCard({
             />
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium">Voice Channel</label>
+            <label className="text-sm font-medium text-foreground">Voice Channel</label>
             <Select
               value={selectedChannel}
               onChange={(e) => onChannelChange(e.target.value)}
@@ -73,6 +73,7 @@ export function VoiceConnectionCard({
           <Button
             disabled={!selectedGuild || !selectedChannel || voiceLoading}
             onClick={onJoin}
+            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
           >
             {status.connected ? "Reconnect" : "Join Voice"}
           </Button>
@@ -91,7 +92,7 @@ export function VoiceConnectionCard({
             {isListening ? "Stop Listening" : "Listen"}
           </Button>
           <Button
-            variant={isStreaming ? "destructive" : "default"}
+            variant={isStreaming ? "secondary" : "outline"}
             onClick={onStreamingToggle}
           >
             <Radio className="mr-1.5 h-4 w-4" />{" "}
diff --git a/services/frontend/src/features/live/index.tsx b/services/frontend/src/features/live/index.tsx
index ac71bd2..1942eb5 100644
--- a/services/frontend/src/features/live/index.tsx
+++ b/services/frontend/src/features/live/index.tsx
@@ -1,5 +1,6 @@
 // ─── Live Panel — thin composition layer ────────────────────────────────────
 
+import { motion } from "framer-motion";
 import { Mic, MonitorUp, Music2 } from "lucide-react";
 import type {
   ActiveSpeaker,
@@ -8,6 +9,7 @@ import type {
   MediaState,
   VoiceStatus,
 } from "../../shared/api/client";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
 import {
   Card,
   CardContent,
@@ -78,25 +80,35 @@ export function LivePanel({
   onVolumeChange,
 }: LivePanelProps) {
   return (
-    <div className="grid gap-6">
-      <VoiceConnectionCard
-        guilds={guilds}
-        voiceChannels={voiceChannels}
-        selectedGuild={selectedGuild}
-        selectedChannel={selectedChannel}
-        status={status}
-        voiceLoading={voiceLoading}
-        isListening={isListening}
-        isStreaming={isStreaming}
-        onGuildChange={onGuildChange}
-        onChannelChange={onChannelChange}
-        onJoin={onJoin}
-        onDisconnect={onDisconnect}
-        onListenToggle={onListenToggle}
-        onStreamingToggle={onStreamingToggle}
-      />
+    <motion.div
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+      className="grid gap-6"
+    >
+      <motion.div variants={cardItem}>
+        <VoiceConnectionCard
+          guilds={guilds}
+          voiceChannels={voiceChannels}
+          selectedGuild={selectedGuild}
+          selectedChannel={selectedChannel}
+          status={status}
+          voiceLoading={voiceLoading}
+          isListening={isListening}
+          isStreaming={isStreaming}
+          onGuildChange={onGuildChange}
+          onChannelChange={onChannelChange}
+          onJoin={onJoin}
+          onDisconnect={onDisconnect}
+          onListenToggle={onListenToggle}
+          onStreamingToggle={onStreamingToggle}
+        />
+      </motion.div>
 
-      <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+      <motion.div
+        variants={cardItem}
+        className="grid gap-6 xl:grid-cols-[1fr_320px]"
+      >
         <Card>
           <CardHeader className="pb-3">
             <CardTitle className="text-base">Live Audio</CardTitle>
@@ -113,44 +125,48 @@ export function LivePanel({
             <ActiveSpeakers speakers={activeSpeakers} />
           </CardContent>
         </Card>
-      </div>
+      </motion.div>
 
-      <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+      <motion.div variants={cardItem}>
+        <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+      </motion.div>
 
-      <Tabs defaultValue="music">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="music">
-            <Music2 className="mr-1.5 h-4 w-4" /> Music
-          </TabsTrigger>
-          <TabsTrigger value="screen">
-            <MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
-          </TabsTrigger>
-          <TabsTrigger value="recordings">
-            <Mic className="mr-1.5 h-4 w-4" /> Recordings
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="music">
-          <MusicSubPanel
-            volume={mediaState.musicVolume}
-            onVolumeChange={onVolumeChange}
-            onQueue={onQueueMusic}
-            onSkip={onSkip}
-            onStop={onStop}
-            loading={mediaLoading}
-          />
-        </TabsContent>
-        <TabsContent value="screen">
-          <ScreenSubPanel
-            onStart={onStartScreen}
-            onSkip={onSkip}
-            onStop={onStop}
-            loading={mediaLoading}
-          />
-        </TabsContent>
-        <TabsContent value="recordings">
-          <RecordingsSubPanel />
-        </TabsContent>
-      </Tabs>
-    </div>
+      <motion.div variants={cardItem}>
+        <Tabs defaultValue="music">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="music">
+              <Music2 className="mr-1.5 h-4 w-4" /> Music
+            </TabsTrigger>
+            <TabsTrigger value="screen">
+              <MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
+            </TabsTrigger>
+            <TabsTrigger value="recordings">
+              <Mic className="mr-1.5 h-4 w-4" /> Recordings
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="music">
+            <MusicSubPanel
+              volume={mediaState.musicVolume}
+              onVolumeChange={onVolumeChange}
+              onQueue={onQueueMusic}
+              onSkip={onSkip}
+              onStop={onStop}
+              loading={mediaLoading}
+            />
+          </TabsContent>
+          <TabsContent value="screen">
+            <ScreenSubPanel
+              onStart={onStartScreen}
+              onSkip={onSkip}
+              onStop={onStop}
+              loading={mediaLoading}
+            />
+          </TabsContent>
+          <TabsContent value="recordings">
+            <RecordingsSubPanel />
+          </TabsContent>
+        </Tabs>
+      </motion.div>
+    </motion.div>
   );
 }
diff --git a/services/frontend/src/widgets/mascot/ChibiMascot.tsx b/services/frontend/src/widgets/mascot/ChibiMascot.tsx
index d059b5a..77a03dc 100644
--- a/services/frontend/src/widgets/mascot/ChibiMascot.tsx
+++ b/services/frontend/src/widgets/mascot/ChibiMascot.tsx
@@ -2,7 +2,13 @@ import { cn } from "../../shared/lib/utils";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-type MascotVariant = "idle" | "waving" | "sleeping" | "thinking" | "peeking" | "crying";
+type MascotVariant =
+  | "idle"
+  | "waving"
+  | "sleeping"
+  | "thinking"
+  | "peeking"
+  | "crying";
 
 interface ChibiMascotProps {
   variant?: MascotVariant;
@@ -17,49 +23,64 @@ const sizes = { sm: 48, md: 80, lg: 120 } as const;
 // ─── Keyframes ───────────────────────────────────────────────────────────────
 
 const keyframes = `
-@keyframes chibi-bob {
+@keyframes cb-bob {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-3px); }
 }
-@keyframes chibi-wave {
+@keyframes cb-wave {
   0%, 100% { transform: rotate(0deg); }
-  25% { transform: rotate(15deg); }
-  75% { transform: rotate(-10deg); }
+  25% { transform: rotate(18deg); }
+  75% { transform: rotate(-8deg); }
 }
-@keyframes chibi-sleep {
+@keyframes cb-sleep {
   0%, 100% { transform: scaleY(1); }
-  50% { transform: scaleY(0.92); }
+  50% { transform: scaleY(0.94); }
 }
-@keyframes chibi-think {
+@keyframes cb-think {
   0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-4px) rotate(5deg); }
+  50% { transform: translateY(-3px) rotate(4deg); }
 }
-@keyframes chibi-cry {
+@keyframes cb-cry {
   0%, 100% { transform: translateY(0) scale(1); }
-  25% { transform: translateY(-2px) scale(1.02); }
-  75% { transform: translateY(1px) scale(0.98); }
+  25% { transform: translateY(-2px) scale(1.03); }
+  75% { transform: translateY(2px) scale(0.97); }
 }
-@keyframes chibi-peek {
+@keyframes cb-peek {
   0%, 100% { transform: translateX(0) rotate(0deg); }
-  50% { transform: translateX(-3px) rotate(-3deg); }
+  50% { transform: translateX(-4px) rotate(-4deg); }
 }
-@keyframes chibi-teardrop {
+@keyframes cb-teardrop {
   0% { opacity: 1; transform: translateY(0) scaleX(1); }
-  100% { opacity: 0; transform: translateY(12px) scaleX(0.5); }
+  100% { opacity: 0; transform: translateY(14px) scaleX(0.4); }
 }
-@keyframes chibi-blink {
-  0%, 90%, 100% { transform: scaleY(1); }
-  95% { transform: scaleY(0.1); }
+@keyframes cb-blink {
+  0%, 85%, 100% { transform: scaleY(1); }
+  90% { transform: scaleY(0.08); }
 }
-@keyframes chibi-zzz {
+@keyframes cb-zzz {
   0% { opacity: 0; transform: translateX(0) translateY(0); }
-  50% { opacity: 1; transform: translateX(6px) translateY(-6px); }
-  100% { opacity: 0; transform: translateX(12px) translateY(-12px); }
+  40% { opacity: 1; transform: translateX(5px) translateY(-5px); }
+  100% { opacity: 0; transform: translateX(14px) translateY(-14px); }
 }
-@keyframes chibi-dots {
-  0% { opacity: 0; }
-  50% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes cb-dots {
+  0% { opacity: 0; transform: scale(0.6); }
+  50% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(0.6); }
+}
+@keyframes cb-tear-wobble {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+}
+@keyframes cb-ear-twitch {
+  0%, 100% { transform: rotate(0deg); }
+  20% { transform: rotate(12deg); }
+  40% { transform: rotate(-6deg); }
+  60% { transform: rotate(8deg); }
+}
+@keyframes cb-arm-chin {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(6deg); }
 }
 `;
 
@@ -67,29 +88,26 @@ const keyframes = `
 
 function getAnimation(variant: MascotVariant): React.CSSProperties {
   const map: Record<MascotVariant, string> = {
-    idle: "chibi-bob 2.5s ease-in-out infinite",
-    waving: "chibi-bob 2.5s ease-in-out infinite",
-    sleeping: "chibi-sleep 3s ease-in-out infinite",
-    thinking: "chibi-think 2s ease-in-out infinite",
-    peeking: "chibi-peek 2s ease-in-out infinite",
-    crying: "chibi-cry 1.5s ease-in-out infinite",
+    idle: "cb-bob 2.5s ease-in-out infinite",
+    waving: "cb-bob 2.5s ease-in-out infinite",
+    sleeping: "cb-sleep 3.5s ease-in-out infinite",
+    thinking: "cb-think 2.2s ease-in-out infinite",
+    peeking: "cb-peek 2.4s ease-in-out infinite",
+    crying: "cb-cry 1.4s ease-in-out infinite",
   };
   return { animation: map[variant] };
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
-export function ChibiMascot({ variant = "idle", size = "md", className }: ChibiMascotProps) {
+export function ChibiMascot({
+  variant = "idle",
+  size = "md",
+  className,
+}: ChibiMascotProps) {
   const px = sizes[size];
-  const scale = px / 80; // base design is 80px
-
-  // Parts of the chibi
-  const headSize = 50 * scale;
-  const earSize = 18 * scale;
-  const eyeSize = 8 * scale;
-  const blushSize = 10 * scale;
-  const bodyHeight = 30 * scale;
-  const bodyWidth = 40 * scale;
+  // Base design dimension is 80px, we scale everything from 0-100 percentage canvas
+  const ch = (pct: number) => (pct / 100) * px;
 
   // Colors
   const skin = "#FFE4D6";
@@ -100,508 +118,17 @@ export function ChibiMascot({ variant = "idle", size = "md", className }: ChibiM
   const eyeShine = "#FFFFFF";
   const blush = "#FFB7C5";
   const outfit = "#7EC8E3";
+  const outfitDark = "#6BB5D0";
   const outline = "#E8C4C9";
 
-  const parts: React.ReactNode[] = [];
-
-  // ─── Body ───
-  const Body = (
-    <div
-      key="body"
-      style={{
-        position: "absolute",
-        bottom: 0,
-        left: "50%",
-        marginLeft: -(bodyWidth / 2),
-        width: bodyWidth,
-        height: bodyHeight,
-        background: `linear-gradient(180deg, ${outfit} 0%, #6BB5D0 100%)`,
-        borderRadius: `${bodyWidth * 0.4}px ${bodyWidth * 0.4}px ${bodyWidth * 0.2}px ${bodyWidth * 0.2}px`,
-        border: `2px solid ${outline}`,
-        zIndex: 1,
-      }}
-    />
-  );
-  parts.push(Body);
-
-  // ─── Arms (waving variant) ───
-  if (variant === "waving") {
-    const Arm = (
-      <div
-        key="arm-right"
-        style={{
-          position: "absolute",
-          bottom: bodyHeight * 0.4,
-          right: "50%",
-          marginRight: -(bodyWidth / 2) - 8 * scale,
-          width: 8 * scale,
-          height: 20 * scale,
-          background: skin,
-          borderRadius: 4 * scale,
-          border: `1.5px solid ${outline}`,
-          transformOrigin: "bottom center",
-          animation: "chibi-wave 0.6s ease-in-out infinite",
-          zIndex: 2,
-        }}
-      />
-    );
-    parts.push(Arm);
-  }
-
-  // ─── Head ───
-  const Head = (
-    <div
-      key="head"
-      style={{
-        position: "absolute",
-        top: 0,
-        left: "50%",
-        marginLeft: -(headSize / 2),
-        width: headSize,
-        height: headSize,
-        background: skin,
-        borderRadius: "50%",
-        border: `2.5px solid ${outline}`,
-        zIndex: 3,
-        overflow: "visible",
-      }}
-    />
-  );
-  parts.push(Head);
-
-  // ─── Cat ears ───
-  const earStyle: React.CSSProperties = {
-    position: "absolute",
-    top: -earSize * 0.4,
-    width: 0,
-    height: 0,
-    borderLeft: `${earSize * 0.6}px solid transparent`,
-    borderRight: `${earSize * 0.6}px solid transparent`,
-    borderBottom: `${earSize}px solid ${hair}`,
-    zIndex: 4,
-    filter: `drop-shadow(0 1px 0 ${outline})`,
-  };
-
-  parts.push(
-    <div
-      key="ear-left"
-      style={{
-        ...earStyle,
-        left: "50%",
-        marginLeft: -(headSize * 0.4) - earSize * 0.3,
-      }}
-    />,
-  );
-  parts.push(
-    <div
-      key="ear-right"
-      style={{
-        ...earStyle,
-        right: "50%",
-        marginRight: -(headSize * 0.4) - earSize * 0.3,
-      }}
-    />,
-  );
-
-  // Inner ear (pink)
-  const innerEarStyle: React.CSSProperties = {
-    position: "absolute",
-    top: -earSize * 0.2,
-    width: 0,
-    height: 0,
-    borderLeft: `${earSize * 0.35}px solid transparent`,
-    borderRight: `${earSize * 0.35}px solid transparent`,
-    borderBottom: `${earSize * 0.6}px solid ${blush}`,
-    zIndex: 5,
-  };
-
-  parts.push(
-    <div
-      key="ear-inner-left"
-      style={{
-        ...innerEarStyle,
-        left: "50%",
-        marginLeft: -(headSize * 0.4) - earSize * 0.15,
-      }}
-    />,
-  );
-  parts.push(
-    <div
-      key="ear-inner-right"
-      style={{
-        ...innerEarStyle,
-        right: "50%",
-        marginRight: -(headSize * 0.4) - earSize * 0.15,
-      }}
-    />,
-  );
-
-  // ─── Hair bang ───
-  parts.push(
-    <div
-      key="hair-bang"
-      style={{
-        position: "absolute",
-        top: -2 * scale,
-        left: "50%",
-        marginLeft: -(headSize * 0.35),
-        width: headSize * 0.7,
-        height: headSize * 0.35,
-        background: hair,
-        borderRadius: `${headSize * 0.35}px ${headSize * 0.35}px 0 0`,
-        border: `1.5px solid ${hairDark}`,
-        zIndex: 6,
-      }}
-    />,
-  );
-
-  // ─── Eyes ───
-  if (variant === "sleeping") {
-    // Closed eyes (lines)
-    parts.push(
-      <div
-        key="eye-left"
-        style={{
-          position: "absolute",
-          top: headSize * 0.4,
-          left: "50%",
-          marginLeft: -(eyeSize * 1.2) - eyeSize,
-          width: eyeSize * 1.5,
-          height: 2.5 * scale,
-          background: "#555",
-          borderRadius: 2 * scale,
-          zIndex: 7,
-          animation: "chibi-sleep 3s ease-in-out infinite",
-        }}
-      />,
-    );
-    parts.push(
-      <div
-        key="eye-right"
-        style={{
-          position: "absolute",
-          top: headSize * 0.4,
-          left: "50%",
-          marginLeft: eyeSize * 0.8,
-          width: eyeSize * 1.5,
-          height: 2.5 * scale,
-          background: "#555",
-          borderRadius: 2 * scale,
-          zIndex: 7,
-          animation: "chibi-sleep 3s ease-in-out infinite",
-        }}
-      />,
-    );
-  } else if (variant === "crying") {
-    // Squeezed eyes
-    parts.push(
-      <div
-        key="eye-left"
-        style={{
-          position: "absolute",
-          top: headSize * 0.42,
-          left: "50%",
-          marginLeft: -(eyeSize * 1.2) - eyeSize,
-          width: eyeSize * 1.5,
-          height: eyeSize * 0.6,
-          background: "#555",
-          borderRadius: "50%",
-          zIndex: 7,
-          animation: "chibi-blink 3s 2s infinite",
-        }}
-      />,
-    );
-    parts.push(
-      <div
-        key="eye-right"
-        style={{
-          position: "absolute",
-          top: headSize * 0.42,
-          left: "50%",
-          marginLeft: eyeSize * 0.8,
-          width: eyeSize * 1.5,
-          height: eyeSize * 0.6,
-          background: "#555",
-          borderRadius: "50%",
-          zIndex: 7,
-          animation: "chibi-blink 3s 2s infinite",
-        }}
-      />,
-    );
-
-    // Teardrops
-    parts.push(
-      <div
-        key="tear-left"
-        style={{
-          position: "absolute",
-          top: headSize * 0.55,
-          left: "50%",
-          marginLeft: -(eyeSize * 1.5),
-          width: 3 * scale,
-          height: 6 * scale,
-          background: "#89CFF0",
-          borderRadius: "50%",
-          animation: "chibi-teardrop 1.5s ease-in infinite",
-          zIndex: 8,
-        }}
-      />,
-    );
-    parts.push(
-      <div
-        key="tear-right"
-        style={{
-          position: "absolute",
-          top: headSize * 0.58,
-          left: "50%",
-          marginLeft: eyeSize * 1.5,
-          width: 3 * scale,
-          height: 6 * scale,
-          background: "#89CFF0",
-          borderRadius: "50%",
-          animation: "chibi-teardrop 1.5s 0.5s ease-in infinite",
-          zIndex: 8,
-        }}
-      />,
-    );
-  } else {
-    // Normal big eyes
-    const eyeStyle: React.CSSProperties = {
-      position: "absolute",
-      top: headSize * 0.38,
-      width: eyeSize,
-      height: eyeSize * 1.1,
-      background: eyeColor,
-      borderRadius: "50%",
-      border: `1.5px solid #555`,
-      zIndex: 7,
-      animation: "chibi-blink 4s 1s infinite",
-    };
-
-    parts.push(
-      <div
-        key="eye-left"
-        style={{
-          ...eyeStyle,
-          left: "50%",
-          marginLeft: -(eyeSize * 1.2) - eyeSize * 0.5,
-        }}
-      >
-        <div
-          style={{
-            position: "absolute",
-            top: 1.5 * scale,
-            left: 1.5 * scale,
-            width: eyeSize * 0.35,
-            height: eyeSize * 0.35,
-            background: eyeShine,
-            borderRadius: "50%",
-          }}
-        />
-      </div>,
-    );
-    parts.push(
-      <div
-        key="eye-right"
-        style={{
-          ...eyeStyle,
-          left: "50%",
-          marginLeft: eyeSize * 0.3,
-        }}
-      >
-        <div
-          style={{
-            position: "absolute",
-            top: 1.5 * scale,
-            left: 1.5 * scale,
-            width: eyeSize * 0.35,
-            height: eyeSize * 0.35,
-            background: eyeShine,
-            borderRadius: "50%",
-          }}
-        />
-      </div>,
-    );
-  }
-
-  // ─── Blush ───
-  const blushStyle: React.CSSProperties = {
-    position: "absolute",
-    top: headSize * 0.52,
-    width: blushSize,
-    height: blushSize * 0.6,
-    background: blush,
-    borderRadius: "50%",
-    opacity: 0.5,
-    zIndex: 7,
-  };
-
-  parts.push(
-    <div key="blush-left" style={{ ...blushStyle, left: "50%", marginLeft: -(headSize * 0.4) }} />,
-  );
-  parts.push(
-    <div
-      key="blush-right"
-      style={{ ...blushStyle, right: "50%", marginRight: -(headSize * 0.4) }}
-    />,
-  );
-
-  // ─── Mouth ───
-  if (variant === "crying") {
-    parts.push(
-      <div
-        key="mouth"
-        style={{
-          position: "absolute",
-          top: headSize * 0.6,
-          left: "50%",
-          marginLeft: -(5 * scale),
-          width: 10 * scale,
-          height: 2 * scale,
-          borderBottom: `2px solid ${outline}`,
-          borderRadius: "50%",
-          zIndex: 8,
-        }}
-      />,
-    );
-  } else {
-    parts.push(
-      <div
-        key="mouth"
-        style={{
-          position: "absolute",
-          top: headSize * 0.6,
-          left: "50%",
-          marginLeft: -(3 * scale),
-          width: 6 * scale,
-          height: 3 * scale,
-          borderBottom: `2px solid ${outline}`,
-          borderLeft: `1px solid transparent`,
-          borderRight: `1px solid transparent`,
-          borderRadius: "0 0 50% 50%",
-          zIndex: 8,
-        }}
-      />,
-    );
-  }
-
-  // ─── Variant extras ───
-
-  // Thinking dots
-  if (variant === "thinking") {
-    parts.push(
-      <div
-        key="think-dot1"
-        style={{
-          position: "absolute",
-          top: -12 * scale,
-          right: -10 * scale,
-          width: 4 * scale,
-          height: 4 * scale,
-          background: "#999",
-          borderRadius: "50%",
-          animation: "chibi-dots 1.5s ease-in-out infinite",
-          zIndex: 10,
-        }}
-      />,
-    );
-    parts.push(
-      <div
-        key="think-dot2"
-        style={{
-          position: "absolute",
-          top: -18 * scale,
-          right: -14 * scale,
-          width: 5 * scale,
-          height: 5 * scale,
-          background: "#999",
-          borderRadius: "50%",
-          animation: "chibi-dots 1.5s 0.3s ease-in-out infinite",
-          zIndex: 10,
-        }}
-      />,
-    );
-    parts.push(
-      <div
-        key="think-dot3"
-        style={{
-          position: "absolute",
-          top: -25 * scale,
-          right: -12 * scale,
-          width: 6 * scale,
-          height: 6 * scale,
-          background: "#999",
-          borderRadius: "50%",
-          animation: "chibi-dots 1.5s 0.6s ease-in-out infinite",
-          zIndex: 10,
-        }}
-      />,
-    );
-  }
-
-  // Sleeping zzz
-  if (variant === "sleeping") {
-    parts.push(
-      <div
-        key="zzz1"
-        style={{
-          position: "absolute",
-          top: -14 * scale,
-          right: -8 * scale,
-          fontSize: 9 * scale,
-          fontWeight: 700,
-          color: "#7EC8E3",
-          animation: "chibi-zzz 2.5s ease-in-out infinite",
-          zIndex: 10,
-          fontFamily: "sans-serif",
-        }}
-      >
-        z
-      </div>,
-    );
-    parts.push(
-      <div
-        key="zzz2"
-        style={{
-          position: "absolute",
-          top: -22 * scale,
-          right: -2 * scale,
-          fontSize: 11 * scale,
-          fontWeight: 700,
-          color: "#7EC8E3",
-          animation: "chibi-zzz 2.5s 0.5s ease-in-out infinite",
-          zIndex: 10,
-          fontFamily: "sans-serif",
-        }}
-      >
-        z
-      </div>,
-    );
-    parts.push(
-      <div
-        key="zzz3"
-        style={{
-          position: "absolute",
-          top: -32 * scale,
-          right: 6 * scale,
-          fontSize: 13 * scale,
-          fontWeight: 700,
-          color: "#7EC8E3",
-          animation: "chibi-zzz 2.5s 1s ease-in-out infinite",
-          zIndex: 10,
-          fontFamily: "sans-serif",
-        }}
-      >
-        Z
-      </div>,
-    );
-  }
-
   return (
     <>
       <style>{keyframes}</style>
       <div
-        className={cn("relative inline-flex items-center justify-center", className)}
+        className={cn(
+          "relative inline-flex items-center justify-center overflow-visible",
+          className,
+        )}
         style={{
           width: px,
           height: px,
@@ -610,7 +137,722 @@ export function ChibiMascot({ variant = "idle", size = "md", className }: ChibiM
         aria-label={`Chibi mascot (${variant})`}
         role="img"
       >
-        {parts}
+        {/* Inner container — everything is positioned relative to this */}
+        <div
+          style={{
+            position: "relative",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          {/* ─── PEEKING variant: a surface to peek over ─── */}
+          {variant === "peeking" && (
+            <div
+              key="peek-surface"
+              style={{
+                position: "absolute",
+                bottom: "28%",
+                left: "-10%",
+                width: "120%",
+                height: "38%",
+                background: "linear-gradient(180deg, #E0F2FE 0%, #BAE6FD 100%)",
+                borderRadius: "30% 30% 0 0",
+                border: `2px solid #7DD3FC`,
+                borderBottom: "none",
+                zIndex: 15,
+                boxShadow: "inset 0 -2px 4px rgba(0,0,0,0.06)",
+              }}
+            >
+              {/* Surface highlight */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "20%",
+                  left: "15%",
+                  width: "70%",
+                  height: "30%",
+                  background: "rgba(255,255,255,0.4)",
+                  borderRadius: "50%",
+                }}
+              />
+            </div>
+          )}
+
+          {/* ─── Body ─── */}
+          <div
+            key="body"
+            style={{
+              position: "absolute",
+              bottom: "18%",
+              left: "50%",
+              marginLeft: ch(-20),
+              width: ch(40),
+              height: ch(28),
+              background: `linear-gradient(180deg, ${outfit} 0%, ${outfitDark} 100%)`,
+              borderRadius: `${ch(8)} ${ch(8)} ${ch(5)} ${ch(5)}`,
+              border: `2px solid ${outline}`,
+              zIndex: 1,
+            }}
+          >
+            {/* dress/collar detail */}
+            <div
+              style={{
+                position: "absolute",
+                top: "0%",
+                left: "10%",
+                width: "80%",
+                height: "30%",
+                background: "rgba(255,255,255,0.15)",
+                borderRadius: "0 0 50% 50%",
+              }}
+            />
+          </div>
+
+          {/* ─── Arms ─── */}
+          {/* Left arm (always visible, resting) */}
+          <div
+            key="arm-left"
+            style={{
+              position: "absolute",
+              bottom: "24%",
+              left: "50%",
+              marginLeft: ch(-38),
+              width: ch(7),
+              height: ch(18),
+              background: `linear-gradient(180deg, ${skinShadow} 0%, ${skin} 100%)`,
+              borderRadius: ch(4),
+              border: `1.5px solid ${outline}`,
+              transformOrigin: "bottom center",
+              transform: "rotate(12deg)",
+              zIndex: 2,
+            }}
+          />
+
+          {/* Right arm — varies by variant */}
+          {variant === "waving" && (
+            <div
+              key="arm-right-waving"
+              style={{
+                position: "absolute",
+                bottom: "26%",
+                right: "50%",
+                marginRight: ch(-36),
+                width: ch(7),
+                height: ch(18),
+                background: `linear-gradient(180deg, ${skin} 0%, ${skinShadow} 100%)`,
+                borderRadius: ch(4),
+                border: `1.5px solid ${outline}`,
+                transformOrigin: "bottom center",
+                animation: "cb-wave 0.5s ease-in-out infinite",
+                zIndex: 2,
+              }}
+            />
+          )}
+
+          {variant === "thinking" && (
+            <div
+              key="arm-right-thinking"
+              style={{
+                position: "absolute",
+                bottom: "36%",
+                right: "50%",
+                marginRight: ch(-32),
+                width: ch(6),
+                height: ch(15),
+                background: `linear-gradient(180deg, ${skin} 0%, ${skinShadow} 100%)`,
+                borderRadius: ch(3),
+                border: `1.5px solid ${outline}`,
+                transformOrigin: "bottom center",
+                transform: "rotate(-20deg)",
+                animation: "cb-arm-chin 2.2s ease-in-out infinite",
+                zIndex: 2,
+              }}
+            >
+              {/* tiny hand */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: -ch(2),
+                  left: "50%",
+                  marginLeft: ch(-2.5),
+                  width: ch(5),
+                  height: ch(4),
+                  background: skin,
+                  borderRadius: "50%",
+                  border: `1px solid ${outline}`,
+                }}
+              />
+            </div>
+          )}
+
+          {variant === "crying" && (
+            <div
+              key="arm-right-crying"
+              style={{
+                position: "absolute",
+                bottom: "24%",
+                right: "50%",
+                marginRight: ch(-36),
+                width: ch(7),
+                height: ch(16),
+                background: `linear-gradient(180deg, ${skin} 0%, ${skinShadow} 100%)`,
+                borderRadius: ch(4),
+                border: `1.5px solid ${outline}`,
+                transformOrigin: "bottom center",
+                transform: "rotate(-8deg)",
+                animation: "cb-tear-wobble 1.4s ease-in-out infinite",
+                zIndex: 2,
+              }}
+            />
+          )}
+
+          {variant === "idle" ||
+          variant === "sleeping" ||
+          variant === "peeking" ? (
+            <div
+              key="arm-right-rest"
+              style={{
+                position: "absolute",
+                bottom: "24%",
+                right: "50%",
+                marginRight: ch(-36),
+                width: ch(7),
+                height: ch(16),
+                background: `linear-gradient(180deg, ${skin} 0%, ${skinShadow} 100%)`,
+                borderRadius: ch(4),
+                border: `1.5px solid ${outline}`,
+                transformOrigin: "bottom center",
+                transform: "rotate(-8deg)",
+                zIndex: 2,
+              }}
+            />
+          ) : null}
+
+          {/* ─── Head (circle) ─── */}
+          <div
+            key="head"
+            style={{
+              position: "absolute",
+              top: "10%",
+              left: "50%",
+              marginLeft: ch(-30),
+              width: ch(60),
+              height: ch(60),
+              background: skin,
+              borderRadius: "50%",
+              border: `2.5px solid ${outline}`,
+              zIndex: 3,
+              overflow: "visible",
+            }}
+          >
+            {/* ─── SKIN SHADOW (subtle) ─── */}
+            <div
+              style={{
+                position: "absolute",
+                bottom: 0,
+                left: "15%",
+                width: "70%",
+                height: "25%",
+                background: skinShadow,
+                borderRadius: "0 0 50% 50%",
+                opacity: 0.4,
+                zIndex: 0,
+              }}
+            />
+
+            {/* ─── EARS ─── */}
+            {/* Left ear */}
+            <div
+              key="ear-left"
+              style={{
+                position: "absolute",
+                top: ch(-5),
+                left: ch(-7),
+                width: 0,
+                height: 0,
+                borderLeft: `${ch(6)}px solid transparent`,
+                borderRight: `${ch(6)}px solid transparent`,
+                borderBottom: `${ch(14)}px solid ${hair}`,
+                zIndex: 4,
+                filter: `drop-shadow(0 1px 0 ${outline})`,
+                transformOrigin: "bottom center",
+                ...(variant === "waving"
+                  ? { animation: "cb-ear-twitch 1.2s ease-in-out infinite" }
+                  : {}),
+              }}
+            >
+              {/* Inner ear */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: ch(2),
+                  left: ch(-3.5),
+                  width: 0,
+                  height: 0,
+                  borderLeft: `${ch(3.5)}px solid transparent`,
+                  borderRight: `${ch(3.5)}px solid transparent`,
+                  borderBottom: `${ch(8)}px solid #FFB7C5`,
+                  zIndex: 5,
+                }}
+              />
+            </div>
+
+            {/* Right ear */}
+            <div
+              key="ear-right"
+              style={{
+                position: "absolute",
+                top: ch(-5),
+                right: ch(-7),
+                width: 0,
+                height: 0,
+                borderLeft: `${ch(6)}px solid transparent`,
+                borderRight: `${ch(6)}px solid transparent`,
+                borderBottom: `${ch(14)}px solid ${hair}`,
+                zIndex: 4,
+                filter: `drop-shadow(0 1px 0 ${outline})`,
+                transformOrigin: "bottom center",
+                ...(variant === "waving"
+                  ? {
+                      animation:
+                        "cb-ear-twitch 1.2s 0.15s ease-in-out infinite",
+                    }
+                  : {}),
+              }}
+            >
+              {/* Inner ear */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: ch(2),
+                  left: ch(-3.5),
+                  width: 0,
+                  height: 0,
+                  borderLeft: `${ch(3.5)}px solid transparent`,
+                  borderRight: `${ch(3.5)}px solid transparent`,
+                  borderBottom: `${ch(8)}px solid #FFB7C5`,
+                  zIndex: 5,
+                }}
+              />
+            </div>
+
+            {/* ─── HAIR BANG ─── */}
+            <div
+              key="hair-bang"
+              style={{
+                position: "absolute",
+                top: ch(-1),
+                left: "12%",
+                width: "76%",
+                height: "36%",
+                background: hair,
+                borderRadius: "50% 50% 20% 20%",
+                border: `1.5px solid ${hairDark}`,
+                zIndex: 6,
+                overflow: "hidden",
+              }}
+            >
+              {/* Hair shine */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "15%",
+                  left: "20%",
+                  width: "35%",
+                  height: "40%",
+                  background: "rgba(255,255,255,0.3)",
+                  borderRadius: "50%",
+                  transform: "rotate(-15deg)",
+                }}
+              />
+              {/* Side wisps */}
+              <div
+                style={{
+                  position: "absolute",
+                  bottom: "10%",
+                  left: "-5%",
+                  width: "30%",
+                  height: "50%",
+                  background: hair,
+                  borderRadius: "0 0 50% 50%",
+                  borderLeft: `1px solid ${hairDark}`,
+                }}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  bottom: "10%",
+                  right: "-5%",
+                  width: "30%",
+                  height: "50%",
+                  background: hair,
+                  borderRadius: "0 0 50% 50%",
+                  borderRight: `1px solid ${hairDark}`,
+                }}
+              />
+            </div>
+
+            {/* ─── EYES ─── */}
+            {(variant === "sleeping" || variant === "crying") && (
+              <>
+                {/* Closed / squeezed eyes */}
+                <div
+                  key="eye-left"
+                  style={{
+                    position: "absolute",
+                    top: "40%",
+                    left: "22%",
+                    width: "24%",
+                    height: variant === "sleeping" ? "4%" : "8%",
+                    background: "#555",
+                    borderRadius: variant === "sleeping" ? "2px" : "50%",
+                    zIndex: 7,
+                    animation:
+                      variant === "sleeping"
+                        ? "cb-sleep 3.5s ease-in-out infinite"
+                        : "cb-blink 3s 2s infinite",
+                  }}
+                />
+                <div
+                  key="eye-right"
+                  style={{
+                    position: "absolute",
+                    top: "40%",
+                    right: "22%",
+                    width: "24%",
+                    height: variant === "sleeping" ? "4%" : "8%",
+                    background: "#555",
+                    borderRadius: variant === "sleeping" ? "2px" : "50%",
+                    zIndex: 7,
+                    animation:
+                      variant === "sleeping"
+                        ? "cb-sleep 3.5s ease-in-out infinite"
+                        : "cb-blink 3s 2s infinite",
+                  }}
+                />
+              </>
+            )}
+
+            {variant !== "sleeping" && variant !== "crying" && (
+              <>
+                {/* Normal big eyes */}
+                <div
+                  key="eye-left"
+                  style={{
+                    position: "absolute",
+                    top: "38%",
+                    left: "20%",
+                    width: "26%",
+                    height: "34%",
+                    background: eyeColor,
+                    borderRadius: "50%",
+                    border: `1.5px solid #555`,
+                    zIndex: 7,
+                    animation: "cb-blink 4s 1s infinite",
+                    overflow: "hidden",
+                  }}
+                >
+                  {/* Pupil */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      bottom: "10%",
+                      left: "20%",
+                      width: "60%",
+                      height: "60%",
+                      background: "#5BA3C7",
+                      borderRadius: "50%",
+                    }}
+                  />
+                  {/* Highlight dot */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: "15%",
+                      left: "20%",
+                      width: "35%",
+                      height: "35%",
+                      background: eyeShine,
+                      borderRadius: "50%",
+                    }}
+                  />
+                  {/* Small secondary highlight */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      bottom: "25%",
+                      right: "15%",
+                      width: "15%",
+                      height: "15%",
+                      background: "rgba(255,255,255,0.6)",
+                      borderRadius: "50%",
+                    }}
+                  />
+                </div>
+                <div
+                  key="eye-right"
+                  style={{
+                    position: "absolute",
+                    top: "38%",
+                    right: "20%",
+                    width: "26%",
+                    height: "34%",
+                    background: eyeColor,
+                    borderRadius: "50%",
+                    border: `1.5px solid #555`,
+                    zIndex: 7,
+                    animation: "cb-blink 4s 1s infinite",
+                    overflow: "hidden",
+                  }}
+                >
+                  {/* Pupil */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      bottom: "10%",
+                      left: "20%",
+                      width: "60%",
+                      height: "60%",
+                      background: "#5BA3C7",
+                      borderRadius: "50%",
+                    }}
+                  />
+                  {/* Highlight dot */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: "15%",
+                      left: "20%",
+                      width: "35%",
+                      height: "35%",
+                      background: eyeShine,
+                      borderRadius: "50%",
+                    }}
+                  />
+                  {/* Small secondary highlight */}
+                  <div
+                    style={{
+                      position: "absolute",
+                      bottom: "25%",
+                      right: "15%",
+                      width: "15%",
+                      height: "15%",
+                      background: "rgba(255,255,255,0.6)",
+                      borderRadius: "50%",
+                    }}
+                  />
+                </div>
+              </>
+            )}
+
+            {/* ─── NOSE (pink) ─── */}
+            <div
+              key="nose"
+              style={{
+                position: "absolute",
+                top: "58%",
+                left: "50%",
+                marginLeft: ch(-1.5),
+                width: ch(3),
+                height: ch(2.2),
+                background: "#FF9EBB",
+                borderRadius: "50% 50% 50% 50% / 60% 60% 40% 40%",
+                zIndex: 9,
+              }}
+            />
+
+            {/* ─── MOUTH ─── */}
+            <div
+              key="mouth"
+              style={{
+                position: "absolute",
+                top: "64%",
+                left: "50%",
+                marginLeft: ch(-3),
+                width: ch(6),
+                height: ch(2.5),
+                borderBottom: `2px solid ${outline}`,
+                borderLeft: "1px solid transparent",
+                borderRight: "1px solid transparent",
+                borderRadius: "0 0 50% 50%",
+                zIndex: 8,
+              }}
+            />
+
+            {/* ─── BLUSH ─── */}
+            <div
+              key="blush-left"
+              style={{
+                position: "absolute",
+                top: "52%",
+                left: "6%",
+                width: "16%",
+                height: "12%",
+                background: blush,
+                borderRadius: "50%",
+                opacity: 0.45,
+                zIndex: 7,
+              }}
+            />
+            <div
+              key="blush-right"
+              style={{
+                position: "absolute",
+                top: "52%",
+                right: "6%",
+                width: "16%",
+                height: "12%",
+                background: blush,
+                borderRadius: "50%",
+                opacity: 0.45,
+                zIndex: 7,
+              }}
+            />
+
+            {/* ─── CRYING: Teardrops ─── */}
+            {variant === "crying" && (
+              <>
+                <div
+                  key="tear-left"
+                  style={{
+                    position: "absolute",
+                    top: "70%",
+                    left: "14%",
+                    width: "6%",
+                    height: "12%",
+                    background:
+                      "linear-gradient(180deg, rgba(137,207,240,0.9) 0%, rgba(137,207,240,0.3) 100%)",
+                    borderRadius: "50% 50% 50% 50% / 60% 60% 40% 40%",
+                    animation: "cb-teardrop 1.6s ease-in infinite",
+                    zIndex: 10,
+                  }}
+                />
+                <div
+                  key="tear-right"
+                  style={{
+                    position: "absolute",
+                    top: "72%",
+                    right: "14%",
+                    width: "6%",
+                    height: "12%",
+                    background:
+                      "linear-gradient(180deg, rgba(137,207,240,0.9) 0%, rgba(137,207,240,0.3) 100%)",
+                    borderRadius: "50% 50% 50% 50% / 60% 60% 40% 40%",
+                    animation: "cb-teardrop 1.6s 0.3s ease-in infinite",
+                    zIndex: 10,
+                  }}
+                />
+              </>
+            )}
+          </div>
+
+          {/* ─── VARIANT EXTRAS (outside head) ─── */}
+
+          {/* Thinking dots */}
+          {variant === "thinking" && (
+            <>
+              <div
+                key="think-dot1"
+                style={{
+                  position: "absolute",
+                  top: "4%",
+                  right: "12%",
+                  width: ch(3.5),
+                  height: ch(3.5),
+                  background: "#A0A0A0",
+                  borderRadius: "50%",
+                  animation: "cb-dots 1.6s ease-in-out infinite",
+                  zIndex: 10,
+                }}
+              />
+              <div
+                key="think-dot2"
+                style={{
+                  position: "absolute",
+                  top: "-1%",
+                  right: "6%",
+                  width: ch(4.5),
+                  height: ch(4.5),
+                  background: "#909090",
+                  borderRadius: "50%",
+                  animation: "cb-dots 1.6s 0.3s ease-in-out infinite",
+                  zIndex: 10,
+                }}
+              />
+              <div
+                key="think-dot3"
+                style={{
+                  position: "absolute",
+                  top: "-7%",
+                  right: "3%",
+                  width: ch(5.5),
+                  height: ch(5.5),
+                  background: "#808080",
+                  borderRadius: "50%",
+                  animation: "cb-dots 1.6s 0.6s ease-in-out infinite",
+                  zIndex: 10,
+                }}
+              />
+            </>
+          )}
+
+          {/* Sleeping zzz */}
+          {variant === "sleeping" && (
+            <>
+              <div
+                key="zzz1"
+                style={{
+                  position: "absolute",
+                  top: "3%",
+                  right: "6%",
+                  fontSize: ch(8),
+                  fontWeight: 700,
+                  color: "#7EC8E3",
+                  animation: "cb-zzz 2.8s ease-in-out infinite",
+                  zIndex: 10,
+                  fontFamily: "sans-serif",
+                  lineHeight: 1,
+                }}
+              >
+                z
+              </div>
+              <div
+                key="zzz2"
+                style={{
+                  position: "absolute",
+                  top: "-4%",
+                  right: "12%",
+                  fontSize: ch(10),
+                  fontWeight: 700,
+                  color: "#7EC8E3",
+                  animation: "cb-zzz 2.8s 0.5s ease-in-out infinite",
+                  zIndex: 10,
+                  fontFamily: "sans-serif",
+                  lineHeight: 1,
+                }}
+              >
+                z
+              </div>
+              <div
+                key="zzz3"
+                style={{
+                  position: "absolute",
+                  top: "-12%",
+                  right: "16%",
+                  fontSize: ch(13),
+                  fontWeight: 700,
+                  color: "#5BA3C7",
+                  animation: "cb-zzz 2.8s 1s ease-in-out infinite",
+                  zIndex: 10,
+                  fontFamily: "sans-serif",
+                  lineHeight: 1,
+                }}
+              >
+                Z
+              </div>
+            </>
+          )}
+        </div>
       </div>
     </>
   );