feat: Optimize UI/UX

app.py

@@ -36,9 +36,9 @@ class LifeFlowAI:
 
     def _check_api_status(self, session_data):
         session = UserSession.from_dict(session_data)
-        has_gemini = bool(session.custom_settings.get("gemini_api_key"))
+        has_model_api = bool(session.custom_settings.get("model_api"))
         has_google = bool(session.custom_settings.get("google_maps_api_key"))
-        msg = "✅ System Ready" if (has_gemini and has_google) else "⚠️ Missing API Keys"
+        msg = "✅ System Ready" if (has_model_api and has_google) else "⚠️ Missing API Keys"
         return msg
 
     def _get_gradio_chat_history(self, session):
@@ -50,6 +50,7 @@ class LifeFlowAI:
     # ================= Event Wrappers =================
 
     def analyze_wrapper(self, user_input, auto_loc, lat, lon, session_data):
+
         session = UserSession.from_dict(session_data)
         iterator = self.service.run_step1_analysis(user_input, auto_loc, lat, lon, session)
         for event in iterator:
@@ -215,6 +216,7 @@ class LifeFlowAI:
 
             with gr.Column(elem_classes="step-container"):
                 home_btn, theme_btn, settings_btn, doc_btn = create_header()
+
                 stepper = create_progress_stepper(1)
                 status_bar = gr.Markdown("Ready", visible=False)
 
@@ -283,7 +285,9 @@ class LifeFlowAI:
                         map_view = gr.Plot(label="Route Map", show_label=False)
 
             # Modals & Events
-            (settings_modal, g_key, w_key, gem_key, model_sel, close_set, save_set, set_stat) = create_settings_modal()
+            (settings_modal, g_key, w_key, llm_provider,
+             model_key, model_sel, close_set, save_set, set_stat) = create_settings_modal()
+
             doc_modal, close_doc_btn = create_doc_modal()
 
             settings_btn.click(fn=lambda: gr.update(visible=True), outputs=[settings_modal])
@@ -335,21 +339,34 @@ class LifeFlowAI:
             home_btn.click(fn=reset_all, inputs=[session_state], outputs=[step1_container, step2_container, step3_container, step4_container, stepper, session_state, user_input])
             back_btn.click(fn=reset_all, inputs=[session_state], outputs=[step1_container, step2_container, step3_container, step4_container, stepper, session_state, user_input])
 
-            save_set.click(fn=self.save_settings, inputs=[g_key, w_key, gem_key, model_sel, session_state], outputs=[set_stat, session_state, status_bar])
+            save_set.click(fn=self.save_settings,
+                           inputs=[g_key, w_key, llm_provider, model_key, model_sel, session_state],
+                           outputs=[set_stat, session_state, status_bar]
+                           ).then(fn=lambda: gr.update(visible=False), outputs=[settings_modal])
+
             auto_loc.change(fn=toggle_location_inputs, inputs=auto_loc, outputs=loc_group)
             demo.load(fn=self._check_api_status, inputs=[session_state], outputs=[status_bar])
 
         return demo
 
-    def save_settings(self, g, w, gem, m, s_data):
+    # 接收參數中加入了 prov (對應 UI 上的 llm_provider)
+    def save_settings(self, g, w, prov, model_api, m, s_data):
         sess = UserSession.from_dict(s_data)
-        sess.custom_settings.update({'google_maps_api_key': g, 'openweather_api_key': w, 'gemini_api_key': gem, 'model': m})
-        return "✅ Saved", sess.to_dict(), "Settings Updated"
+
+        # 更新設定字典，加入 provider
+        sess.custom_settings.update({
+            'google_maps_api_key': g,
+            'openweather_api_key': w,
+            'llm_provider': prov,  # ✅ 新增這行：儲存供應商
+            'model_api_key': model_api,
+            'model': m
+        })
+        return gr.update(visible=False), sess.to_dict(), "✅ Settings Updated"
 
 def main():
     app = LifeFlowAI()
     demo = app.build_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=True, show_error=True)
+    demo.launch(server_name="0.0.0.0", server_port=8080, share=True, show_error=True)
 
 if __name__ == "__main__":
     main()

services/planner_service.py

@@ -170,22 +170,25 @@ class PlannerService:
             return session
 
         # 1. API Key 檢查
-        gemini_key = session.custom_settings.get("gemini_api_key")
         google_key = session.custom_settings.get("google_maps_api_key")
         weather_key = session.custom_settings.get("openweather_api_key")
 
+        provider = session.custom_settings.get("llm_provider")
+        model_api_key = session.custom_settings.get("model_api_key")
+
         import os
-        if not gemini_key: gemini_key = os.getenv("GEMINI_API_KEY", "")
-        if not google_key: google_key = os.getenv("GOOGLE_MAPS_API_KEY", "")
-        if not weather_key: weather_key = os.getenv("OPENWEATHER_API_KEY", "")
+        if not google_key:
+            google_key = os.getenv("GOOGLE_MAPS_API_KEY", "")
+        if not weather_key:
+            weather_key = os.getenv("OPENWEATHER_API_KEY", "")
 
-        if not gemini_key:
+        if not model_api_key:
             raise ValueError("🔑 Missing Gemini API Key. Please configure Settings.")
 
-        # 2. 準備 Models
-        planner_model = Gemini(id='gemini-2.5-flash', thinking_budget=2048, api_key=gemini_key)
-        main_model = Gemini(id='gemini-2.5-flash', thinking_budget=1024, api_key=gemini_key)
-        lite_model = Gemini(id="gemini-2.5-flash-lite", api_key=gemini_key)
+        if provider.lower() == "gemini":
+            planner_model = Gemini(id='gemini-2.5-flash', thinking_budget=1024, api_key=model_api_key)
+            main_model = Gemini(id='gemini-2.5-flash', thinking_budget=1024, api_key=model_api_key)
+            lite_model = Gemini(id="gemini-2.5-flash-lite", api_key=model_api_key)
 
         models_dict = {
             "team": main_model, "scout": main_model, "optimizer": lite_model,
@@ -318,10 +321,13 @@ class PlannerService:
 
             try:
                 task_list_data = json.loads(json_data)
+                if task_list_data["global_info"]["start_location"].lower() == "user location":
+                    logger.info("Using detected location for start_location")
+                    task_list_data["global_info"]["start_location"] = {"lat": lat, "lng": lon}
+
                 session.task_list = self._convert_task_list_to_ui_format(task_list_data)
             except Exception as e:
                 logger.error(f"Failed to parse task_list: {e}")
-                print(json_data)
                 session.task_list = []
 
             # 🛡️ 檢查 2: Planner 是否回傳空列表

ui/components/header.py

@@ -8,13 +8,13 @@ import gradio as gr
 def create_header():
     """
     創建優化後的 Header：
-    - 使用 Row/Column 佈局避免 fixed positioning 問題
-    - 響應式設計友好
-    - 按鈕水平排列
+    - Logo 區塊保留在原有容器中
+    - 按鈕區塊移出 app-header-container，避免被父級的 backdrop-filter 捕獲
     """
+    # 1. Header 容器 (只放 Logo)
     with gr.Row(elem_classes="app-header-container"):
-        # 左側：Logo 和標題
-        with gr.Column(scale=4, min_width=300):
+        # 左側：Logo 和標題 (佔滿寬度，因為按鈕已經飛出去了)
+        with gr.Column(scale=1):
             gr.HTML("""
             <div class="app-header-left">
                 <h1 style="margin: 0; font-size: 2rem; font-weight: 800; 
@@ -29,12 +29,12 @@ def create_header():
             </div>
             """)
 
-        # 右側：功能按鈕
-        with gr.Column(scale=1, min_width=200):
-            with gr.Row(elem_classes="header-controls"):
-                home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
-                theme_btn = gr.Button("🌓", size="sm", elem_classes="header-btn")
-                settings_btn = gr.Button("⚙️", size="sm", elem_classes="header-btn")
-                doc_btn = gr.Button("📖", size="sm", elem_classes="header-btn")
+    # 2. 功能按鈕 (移出上面的 Row，獨立存在)
+    # 因為 CSS 設定了 position: fixed，它們會自動飛到右上角，不受文檔流影響
+    with gr.Row(elem_classes="header-controls"):
+        home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
+        theme_btn = gr.Button("🌓", size="sm", elem_classes="header-btn")
+        settings_btn = gr.Button("⚙️", size="sm", elem_classes="header-btn")
+        doc_btn = gr.Button("📖", size="sm", elem_classes="header-btn")
 
     return home_btn, theme_btn, settings_btn, doc_btn

ui/components/input_form.py

@@ -1,58 +1,117 @@
-"""
-LifeFlow AI - Input Form Component (Fixed Layout)
-✅ 強制將 AI 狀態欄位移至按鈕上方
-"""
 import gradio as gr
 
+
 def create_input_form(agent_stream_html):
-    """創建優化後的輸入表單"""
+    """創建優化後的輸入表單 - 放棄 gr.Examples，改用純按鈕"""
 
     with gr.Group(elem_classes="glass-card") as input_area:
         gr.Markdown("### 📝 What's your plan today?")
 
-
-        # 這裡的 HTML 元件會顯示串流文字
-        agent_stream_output = gr.HTML(
-            value=agent_stream_html,
-            label="Agent Status",
-            elem_classes="agent-stream-box-step1",
-            visible=True  # 確保預設可見（即使是空的），佔據空間
-        )
-
-        gr.Markdown("---")
-
         # 1. 主要輸入區
         user_input = gr.Textbox(
             label="Describe your tasks",
-            placeholder="e.g., I need to visit the dentist at 10am, then buy groceries from Costco, and pick up a package...",
+            placeholder="e.g., I need to visit the dentist at 10am...",
             lines=3,
             elem_id="main-input"
         )
 
-        # 2. 位置設定
-        with gr.Accordion("📍 Location Settings", open=False):
-            auto_location = gr.Checkbox(label="Auto-detect my location (Simulated)", value=False)
+        # 2. 位置設定 (保持不變)
+        with gr.Accordion("📍 Location Settings", open=True):
+            auto_location = gr.Checkbox(label="Auto-detect my location", value=False)
             with gr.Group(visible=True) as location_inputs:
                 with gr.Row():
                     lat_input = gr.Number(label="Latitude", value=25.033, precision=6, scale=1)
                     lon_input = gr.Number(label="Longitude", value=121.565, precision=6, scale=1)
 
-        # 3. 快速範例
-        gr.Examples(
-            examples=[
-                ["Plan a trip to visit Taipei 101, then have lunch at Din Tai Fung."],
-                ["Errands run: Post office, bank, and supermarket. Start at 10 AM, finish by 1 PM."]
-            ],
-            inputs=user_input,
-            label="Quick Start Examples"
-        )
+        # 3. 快速範例 (⭐⭐ 重製版：使用 Button 取代 Examples ⭐⭐)
+        gr.Markdown("##### ⚡ Quick Start Examples")
+
+        # 定義範例文字
+        ex_text_1 = "Plan a trip to visit Taipei 101, then have lunch at Din Tai Fung."
+        ex_text_2 = "Errands run: Post office, bank, and supermarket. Start at 10 AM, finish by 1 PM."
 
+        with gr.Column(elem_classes="example-container"):
+            # 這是真的按鈕，絕對會垂直排列，絕對不會被壓縮
+            btn_ex1 = gr.Button(ex_text_1, size="sm", variant="secondary", elem_classes="example-btn")
+            btn_ex2 = gr.Button(ex_text_2, size="sm", variant="secondary", elem_classes="example-btn")
 
-        # 5. 主按鈕
+        # 4. 主按鈕
         analyze_btn = gr.Button("🚀 Analyze & Plan Trip", variant="primary", size="lg")
 
+        # 5. Agent 狀態區
+        gr.Markdown("---")
+        gr.Markdown("### 🤖 Agent Status")
+        agent_stream_output = gr.HTML(
+            value=agent_stream_html,
+            elem_classes="agent-stream-box-step1",
+            visible=True
+        )
+
+        geo_js = """
+                (is_auto, curr_lat, curr_lon) => {
+                    if (!is_auto) {
+                        // 如果是「取消勾選」，保持原值不變
+                        return [curr_lat, curr_lon];
+                    }
+
+                    // 如果是「勾選」，開始定位
+                    return new Promise((resolve) => {
+                        if (!navigator.geolocation) {
+                            alert("Geolocation is not supported by your browser.");
+                            resolve([curr_lat, curr_lon]); // 失敗回傳原值
+                            return;
+                        }
+
+                        // 顯示讀取中的狀態 (可選)
+                        // document.body.style.cursor = 'wait';
+
+                        navigator.geolocation.getCurrentPosition(
+                            (position) => {
+                                // document.body.style.cursor = 'default';
+                                // 成功！回傳經緯度
+                                resolve([position.coords.latitude, position.coords.longitude]);
+                            },
+                            (error) => {
+                                // document.body.style.cursor = 'default';
+                                let msg = "Unknown error";
+                                switch(error.code) {
+                                    case 1: msg = "Permission denied. Please allow location access."; break;
+                                    case 2: msg = "Position unavailable."; break;
+                                    case 3: msg = "Timeout."; break;
+                                }
+                                alert("📍 Location Error: " + msg);
+                                resolve([curr_lat, curr_lon]); // 失敗回傳原值
+                            },
+                            { enableHighAccuracy: true, timeout: 8000 }
+                        );
+                    });
+                }
+                """
+
+        # 綁定事件 1: 控制輸入框顯示/隱藏 (Python 邏輯)
+        auto_location.change(
+            fn=lambda x: gr.update(visible=not x),
+            inputs=[auto_location],
+            outputs=[location_inputs]
+        )
+
+        # 綁定事件 2: 執行 JS 定位 (JS 邏輯)
+        # 注意 inputs 包含了 lat/lon，這樣 JS 才能在失敗/取消時把原值傳回來
+        auto_location.change(
+            fn=None,
+            inputs=[auto_location, lat_input, lon_input],
+            outputs=[lat_input, lon_input],
+            js=geo_js
+        )
+
+        # ⭐⭐ 綁定點擊事件 ⭐⭐
+        # 點擊按鈕 -> 把按鈕文字填入 user_input
+        btn_ex1.click(lambda: ex_text_1, outputs=user_input)
+        btn_ex2.click(lambda: ex_text_2, outputs=user_input)
+
     return (input_area, agent_stream_output, user_input, auto_location,
             location_inputs, lat_input, lon_input, analyze_btn)
 
+
 def toggle_location_inputs(auto_loc):
     return gr.update(visible=not auto_loc)

ui/components/modals.py

@@ -1,35 +1,69 @@
-"""
-LifeFlow AI - Settings & Documentation Modals
-"""
+import gradio as gr
 
 import gradio as gr
-from config import MODEL_CHOICES
 
 
 def create_settings_modal():
-    """創建設定模態框"""
-    with gr.Group(visible=False) as settings_modal:
-        gr.Markdown("## ⚙️ Settings")
-        gr.Markdown("### 🔑 API Keys")
-        google_maps_key = gr.Textbox(label="Google Maps API Key", type="password")
-        openweather_key = gr.Textbox(label="OpenWeather API Key", type="password")
-        gemini_api_key = gr.Textbox(label="Gemini API Key", type="password")
-
-        gr.Markdown("### 🤖 Model")
-        model_choice = gr.Dropdown(
-            choices=MODEL_CHOICES,
-            value=MODEL_CHOICES[0],
-            label="Select Model"
-        )
-
-        with gr.Row():
-            close_settings_btn = gr.Button("❌ Close", scale=1)
-            save_settings_btn = gr.Button("💾 Save", variant="primary", scale=2)
-
-        settings_status = gr.Textbox(label="Status", value="")
-
-    return (settings_modal, google_maps_key, openweather_key, gemini_api_key,
-            model_choice, close_settings_btn, save_settings_btn, settings_status)
+    """
+    創建設定彈窗 (Modal) - 雙欄佈局優化版
+    回傳 9 個元件 (新增了 llm_provider)
+    """
+    with gr.Group(visible=False, elem_classes="modal-overlay", elem_id="settings-modal") as modal:
+        with gr.Group(elem_classes="modal-box"):
+            with gr.Row(elem_classes="modal-header"):
+                gr.Markdown("### ⚙️ System Configuration", elem_classes="modal-title")
+
+            with gr.Column(elem_classes="modal-content"):
+                with gr.Tabs():
+                    # === 分頁 1: API Keys ===
+                    with gr.TabItem("🔑 API Keys"):
+                        gr.Markdown("Configure your service credentials below.", elem_classes="tab-desc")
+
+                        g_key = gr.Textbox(label="Google Maps Platform Key", placeholder="AIza...", type="password")
+                        w_key = gr.Textbox(label="OpenWeatherMap Key", placeholder="Enter key...",
+                                           type="password")
+
+                        # ⭐ 修改開始：將原本單獨的 gem_key 改為左右佈局 ⭐
+                        with gr.Row(equal_height=True):  # 確保高度對齊
+                            # 左側：供應商選擇 (短)
+                            with gr.Column(scale=1, min_width=100):
+                                llm_provider = gr.Dropdown(
+                                    choices=["Gemini"], #, "OpenAI", "Anthropic"
+                                    value="Gemini",
+                                    label="Provider",
+                                    interactive=True,
+                                    elem_id="provider-dropdown"  # 方便 CSS 微調
+                                )
+
+                            # 右側：API Key 輸入 (長)
+                            with gr.Column(scale=3):
+                                gem_key = gr.Textbox(
+                                    label="Model API Key",
+                                    placeholder="sk-...",
+                                    type="password"
+                                )
+                        # ⭐ 修改結束 ⭐
+
+                    # === 分頁 2: Model Settings ===
+                    with gr.TabItem("🤖 Model Settings"):
+                        gr.Markdown("Select the AI model engine for trip planning.", elem_classes="tab-desc")
+                        model_sel = gr.Dropdown(
+                            choices=["gemini-2.5-flash"], #, "gemini-1.5-flash", "gpt-4o"
+                            value="gemini-2.5-flash",
+                            label="AI Model",
+                            interactive=True,
+                            info="Only support 2.5-flash"
+                            # "Only models supported by your selected provider will be shown."
+                        )
+
+                set_stat = gr.Markdown(value="", visible=True)
+
+            with gr.Row(elem_classes="modal-footer"):
+                close_btn = gr.Button("Cancel", variant="secondary")
+                save_btn = gr.Button("💾 Save Configuration", variant="primary")
+
+    # 🔥 重要：這裡現在回傳 9 個變數 (新增了 llm_provider)
+    return modal, g_key, w_key, llm_provider, gem_key, model_sel, close_btn, save_btn, set_stat
 
 
 def create_doc_modal():

ui/theme.py

@@ -53,11 +53,26 @@ def get_enhanced_css() -> str:
     }
 
     .header-controls {
+        position: fixed !important;       /* 關鍵：脫離文檔流，固定在視窗 */
+        top: 25px !important;             /* 距離視窗頂部 25px */
+        right: 25px !important;           /* 距離視窗右側 25px */
+        z-index: 99999 !important;        /* 關鍵：設得夠大，確保浮在所有內容最上面 */
+        
         display: flex !important;
-        gap: 8px !important;
-        justify-content: flex-end !important;
+        flex-direction: row !important;
+        gap: 10px !important;
         align-items: center !important;
-        width: 100%;
+        
+        /* 視覺優化：半透明毛玻璃膠囊背景 */
+        background: rgba(255, 255, 255, 0.85) !important;
+        backdrop-filter: blur(12px) !important; /* 背景模糊效果 */
+        padding: 8px 16px !important;
+        border-radius: 99px !important;   /* 圓形膠囊狀 */
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+        
+        width: auto !important;           /* 讓寬度隨按鈕數量自動縮放，不要佔滿整行 */
+        min-width: 0 !important;
     }
 
     .header-btn {
@@ -89,7 +104,7 @@ def get_enhanced_css() -> str:
     .header-btn:active {
         transform: translateY(0) !important;
     }
-
+    
     /* ============= 2. Animations & Agent Cards (保留 Backup 樣式) ============= */
     @keyframes breathing-glow {
         0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6), 0 0 20px rgba(99, 102, 241, 0.3); border-color: #6366f1; }
@@ -350,5 +365,183 @@ def get_enhanced_css() -> str:
         min-height: 60px; max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 0.9rem;
         margin-bottom: 16px; margin-top: 10px;
     }
+
+    /* ============= 新版 Quick Start Buttons ============= */
+    
+    /* 容器稍微給點間距 */
+    .example-container {
+        gap: 8px !important;
+        margin-bottom: 16px !important;
+    }
+
+    /* 把按鈕偽裝成卡片列表 */
+    .example-btn {
+        text-align: left !important;        /* 文字靠左 */
+        justify-content: flex-start !important; /* Flex 內容靠左 */
+        height: auto !important;            /* 高度自動 */
+        white-space: normal !important;     /* ⭐ 允許換行 */
+        word-break: break-word !important;  /* 長字換行 */
+        padding: 12px 16px !important;
+        background: #f8fafc !important;
+        border: 1px solid #e2e8f0 !important;
+        color: #475569 !important;
+        font-weight: 400 !important;        /* 字體不要太粗 */
+    }
+
+    .example-btn:hover {
+        background: white !important;
+        border-color: var(--primary-color) !important;
+        color: var(--primary-color) !important;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
+        transform: translateY(-1px);
+    }
+    
+    /* ============= 設定彈窗 (Settings Modal) ============= */
+
+    /* 1. 全螢幕遮罩層 (Overlay) */
+    .modal-overlay {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        background: rgba(0, 0, 0, 0.6) !important; /* 半透明黑色背景 */
+        backdrop-filter: blur(4px) !important;      /* 背景模糊效果 */
+        z-index: 100000 !important;                 /* 必須比 Header 的 99999 還大 */
+        display: flex !important;
+        align-items: center !important;             /* 垂直置中 */
+        justify-content: center !important;         /* 水平置中 */
+        padding: 20px !important;
+    }
+
+    /* 2. 彈窗本體 (Modal Box) */
+    .modal-box {
+        background: white !important;
+        width: 100% !important;
+        max-width: 500px !important;    /* 限制最大寬度 */
+        border-radius: 16px !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        overflow: hidden !important;
+        padding: 0 !important;          /* 移除 Gradio 預設內距 */
+        position: relative !important;
+        animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+    }
+
+    /* 3. 彈窗內部佈局微調 */
+    .modal-header {
+        padding: 20px 24px 0 24px !important;
+        background: white !important;
+    }
+    
+    .modal-title h3 {
+        margin: 0 !important;
+        font-size: 1.5rem !important;
+        color: #1e293b !important;
+    }
+
+    .modal-content {
+        padding: 0 24px 10px 24px !important;
+        max-height: 60vh !important;
+        overflow-y: auto !important; /* 內容太長時可捲動 */
+    }
+
+    .modal-footer {
+        padding: 16px 24px 24px 24px !important;
+        background: #f8fafc !important;
+        border-top: 1px solid #e2e8f0 !important;
+        display: flex !important;
+        justify-content: flex-end !important;
+        gap: 10px !important;
+    }
+
+    /* 彈出動畫 */
+    @keyframes modal-pop {
+        0% { transform: scale(0.95) translateY(10px); opacity: 0; }
+        100% { transform: scale(1) translateY(0); opacity: 1; }
+    }
+    
+    /* ============= API Key 佈局優化 ============= */
+    
+    /* 1. 縮小左右欄位的間距 (原本約 20px -> 改為 6px) */
+    .api-row {
+        gap: 6px !important;
+    }
+
+    /* 2. 修正 Dropdown 在窄欄位時文字被切斷的問題 */
+    #provider-dropdown .wrap-inner {
+        padding-right: 25px !important; /* 預留空間給箭頭 */
+    }
+    
+    #provider-dropdown input {
+        text-overflow: ellipsis !important;
+        min-width: 0 !important;
+    }
+    
+    /* 讓 Dropdown 的選單箭頭不要擠到文字 */
+    #provider-dropdown svg {
+        margin-right: -5px !important;
+    }
+    .agent-war-room {
+        background: white !important;           /* 強制純白不透明 */
+        border: 1px solid #cbd5e1 !important;   /* 加深邊框顏色 */
+        border-radius: 16px !important;
+        padding: 24px !important;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; /* 加強陰影 */
+        opacity: 1 !important;
+    }
+
+    /* 2. Agent 小卡片：確保它是獨立的實體 */
+    .agent-card-inner {
+        background: #f8fafc !important;         /* 淺灰底色，區分層次 */
+        border: 1px solid #cbd5e1 !important;   /* 明顯的邊框 */
+        border-radius: 12px !important;
+        opacity: 1 !important;                  /* 拒絕透明 */
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+        transition: all 0.2s !important;
+    }
+
+    /* 3. 正在工作的卡片：亮起來 */
+    .agent-card-wrap.working .agent-card-inner {
+        background: white !important;
+        border-color: #6366f1 !important;       /* 亮紫色邊框 */
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important; /* 發光效果 */
+    }
+
+    /* 4. ⭐ 關鍵：文字顏色強制矯正 ⭐ */
+    /* 不管外面主題怎麼變，這裡的字一定要是深色的 */
+    .agent-name { 
+        color: #0f172a !important;   /* 深黑藍色 */
+        font-weight: 700 !important;
+        font-size: 0.85rem !important;
+        opacity: 1 !important;
+    }
+
+    .agent-role { 
+        color: #475569 !important;   /* 深灰色 */
+        font-weight: 600 !important;
+        opacity: 1 !important;
+    }
+
+    .status-badge {
+        color: #334155 !important;
+        background: #e2e8f0 !important;
+        border: 1px solid #cbd5e1 !important;
+        font-weight: 600 !important;
+        opacity: 1 !important;
+    }
+
+    /* 工作的狀態標籤 */
+    .agent-card-wrap.working .status-badge {
+        background: #e0e7ff !important;
+        color: #4338ca !important;
+        border-color: #818cf8 !important;
+    }
+
+    /* 連接線也要加深，不然看不到 */
+    .connector-line, .connector-horizontal {
+        background: #94a3b8 !important; /* 加深灰色 */
+        opacity: 0.6 !important;
+    }
     </style>
     """