feat(ui): complete layout redesign — three-panel desk layout

Replaced the hero + scrollable grid with a fixed-height three-column
workspace:
- Left (fixed 288px): Kira avatar + compact chat + text input
- Center (flex): Large focus timer + notes
- Right (fixed 256px): Music, white noise, wardrobe, pets

Thin top bar: scene selector dots + clock
Thin bottom bar: status + connection indicator

No cards, no scrollable grid, no wasted space. Clean, modern,
everything visible at once. Avatar fills full sidebar height.

frontend/src/components/ChatBubble.tsx

@@ -22,7 +22,7 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
   }, [messages]);
 
   return (
-    <div className="p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
+    <div className="p-3 flex flex-col" style={{ maxHeight: 160 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>💬</span> Conversation
         <span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />