refactor(mascot): replace ChibiMascot SVG with MascotImage PNG and simplify empty states

services/frontend/src/features/analytics/index.tsx

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 import { useState } from "react";
 import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
-import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
+import { EmptyStateMascot } from "../../shared/ui";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -53,12 +53,7 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
   }
 
   if (!guildId) {
-    return (
-      <EmptyStateMascot
-        variant="thinking"
-        message="Menunggu konfigurasi guild..."
-      />
-    );
+    return <EmptyStateMascot />;
   }
 
   return (

services/frontend/src/features/auth/index.tsx

@@ -10,8 +10,8 @@ import {
   CardHeader,
   CardTitle,
   Input,
+  MascotImage,
 } from "../../shared/ui";
-import { ChibiMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AuthOverlayProps {
   onAuthenticated: () => void;
@@ -50,7 +50,7 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
             <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" />
+            <MascotImage size="sm" />
           </div>
           <CardTitle>Admin Access Required</CardTitle>
           <CardDescription>

services/frontend/src/features/live/components/ActiveSpeakers.tsx

@@ -7,9 +7,7 @@ interface ActiveSpeakersProps {
 
 export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
   if (speakers.length === 0) {
-    return (
-      <EmptyStateMascot variant="sleeping" message="No active speakers~" />
-    );
+    return <EmptyStateMascot />;
   }
 
   return (

services/frontend/src/features/live/components/RecordingsSubPanel.tsx

@@ -92,7 +92,7 @@ export function RecordingsSubPanel() {
   }
 
   if (recordings.length === 0) {
-    return <EmptyStateMascot variant="sleeping" message="No recordings yet~" />;
+    return <EmptyStateMascot />;
   }
 
   return (

services/frontend/src/features/messages/components/ImageGrid.tsx

@@ -1,6 +1,6 @@
 import { parseMetadata } from "../../../entities/message/types";
 import type { MessageRecord } from "../../../shared/api/client";
-import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
+import { EmptyStateMascot } from "../../../shared/ui";
 
 interface ImageItem {
   url: string;
@@ -68,7 +68,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
   }
 
   if (images.length === 0) {
-    return <EmptyStateMascot variant="thinking" message="No images yet~" />;
+    return <EmptyStateMascot />;
   }
 
   return (

services/frontend/src/features/messages/components/MessageFeed.tsx

@@ -2,8 +2,7 @@ import { motion } from "framer-motion";
 import { useEffect, useMemo, useRef } from "react";
 import type { MessageRecord } from "../../../shared/api/client";
 import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
-import { ScrollArea } from "../../../shared/ui";
-import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
+import { ScrollArea, EmptyStateMascot } from "../../../shared/ui";
 import { MessageCard, MessageCardSkeleton } from "./MessageCard";
 
 export interface MessageFeedProps {
@@ -84,7 +83,7 @@ export function MessageFeed({
   }
 
   if (messages.length === 0) {
-    return <EmptyStateMascot variant="waving" message={emptyText} />;
+    return <EmptyStateMascot />;
   }
 
   return (