style(frontend): redesign with Miuix HyperOS design language

- Color system: Miuix dark tokens (primary #277AF7, bg #242424, surface #000)
- Components: rounded-full buttons, squircle cards (18px), glass header
- Messages: blue user bubbles, dark AI bubbles with typing animation
- Admin dashboard: stat cards with real-time service status
- Login: centered logo with gradient shadow, HyperOS input fields
- Smooth transitions and scale-on-press interactions

frontend/web/src/components/chat/ChatContainer.tsx

@@ -23,8 +23,11 @@ export default function ChatContainer() {
     addMessage(userMsg)
     setStreaming(true)
 
-    // Add placeholder for assistant response
-    addMessage({ id: crypto.randomUUID(), session_id: currentSessionId, role: 'assistant', content: '', created_at: new Date().toISOString() })
+    // Placeholder for assistant
+    addMessage({
+      id: crypto.randomUUID(), session_id: currentSessionId,
+      role: 'assistant' as const, content: '', created_at: new Date().toISOString(),
+    })
 
     send({ type: 'message', content: inputText, session_id: currentSessionId, timestamp: Date.now() })
     setInput('')
@@ -32,16 +35,29 @@ export default function ChatContainer() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-auto px-4 py-4">
-        <MessageList messages={messages} />
-        <div ref={bottomRef} />
+      {/* Chat area */}
+      <div className="flex-1 overflow-auto">
+        <div className="max-w-2xl mx-auto px-4 py-6">
+          {messages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center space-y-2 pt-32">
+              <div className="w-16 h-16 rounded-[20px] bg-[#277AF7] flex items-center justify-center shadow-lg shadow-[#277AF7]/20 mb-2">
+                <span className="text-2xl font-bold text-white">C</span>
+              </div>
+              <p className="text-white/50 text-sm">开始新对话吧~</p>
+            </div>
+          ) : (
+            <MessageList messages={messages} />
+          )}
+          <div ref={bottomRef} />
+        </div>
+      </div>
+
+      {/* Input bar */}
+      <div className="shrink-0 border-t border-[#393939] bg-[#000]">
+        <div className="max-w-2xl mx-auto px-4 py-3">
+          <ChatInput value={inputText} onChange={setInput} onSend={handleSend} disabled={isStreaming} />
+        </div>
       </div>
-      <ChatInput
-        value={inputText}
-        onChange={setInput}
-        onSend={handleSend}
-        disabled={isStreaming}
-      />
     </div>
   )
 }