拆分對話區塊與內容區塊，逐項對照程式碼校正 4.1-4.5

原「右欄（對話畫面）」把對話區塊與內容區塊混為一段，且版面圖畫成
單欄。實際結構是：AI 對話頁為三欄（導覽＋對話＋內容），其他結果頁
為二欄（對話區塊收起，由 JS 在 .main-layout-row 記 data-nav、CSS
據此控制顯隱）。拆成兩個小節分別說明，各自附版面圖與元件對照。

內容區塊補充步驟列與捲動區分兩層的原因（步驟列自己 position:sticky
會被 Gradio 自動包的 .block wrapper 框住而跟著捲走，已實測）。

結果分頁排版表改為逐頁列出實際元件順序，並補上監督式學習表格與圖
的 1:2 寬度比、非監督式學習兩張圖等寬並排等細節。

空狀態補上 _EMPTY_HINT 的實際文案與行號；無顯著指標的情況補上
tab_box_img 預設 visible=False、該處確實一片空白的說明。

新增兩處「已知待修正」：
- 下載鈕命名不一致：四個統計子頁用具名標籤，但語言指標分析是
「下載檔案」、LLM 輔助分析是「下載報告」
- _EMPTY_HINT 文案「請先於「主頁」完成分析流程」是舊版導覽用語，
現行導覽列沒有「主頁」項目，對應的是「AI 對話」

4.3 語料 Metadata 表單經對照確認與程式碼一致，未修改。

docs/UIUX優化成果與技術說明.md

@@ -303,26 +303,35 @@ commit `d928c91`
 - **手機版**：漢堡選單／抽屜收合（`mobile_nav_toggle`／`nav_drawer_close`／`nav_backdrop`），預設只顯示對話主畫面，點擊展開側欄
 - 「讀取進度」不在左側導覽，改放首頁下方（目前為佔位連結）
 
-#### 右欄（對話畫面）
+#### 欄數會依所在頁面變動
+
+| 所在頁面 | 欄數 | 組成 |
+|---|---|---|
+| AI 對話 | 三欄 | 導覽區塊 ＋ **對話區塊** ＋ 內容區塊 |
+| 其他所有結果頁 | 二欄 | 導覽區塊 ＋ 內容區塊（對話區塊收起）|
+
+切換由 JavaScript 在 `.main-layout-row` 上記錄 `data-nav` 屬性、再由 CSS 據此控制對話區塊的顯隱。內容區塊是唯一橫跨全流程都在的區域。
+
+#### 對話區塊（`chat-col`，`scale=3`／`min_width=280`）
 
 ```
-┌──────────────────────────────────────────┐
-│ ① 研究選擇 ② 文本上傳 ③ 語料說明 ④ 分析運算      │ ← 頂部步驟列(4步)
-├──────────────────────────────────────────┤
-│   對話串（AI訊息左側／使用者訊息右側）              │
-│   [Metadata 步驟 → 內容區插入獨立表單卡片，       │
-│    不套用聊天泡泡左右分欄邏輯，佔滿全欄寬，          │
-│    同頁面往下捲動、非彈出視窗]                    │
-├──────────────────────────────────────────┤
-│  [ 對話輸入框 ]                              │ ← 已實作，目前隱藏
-└──────────────────────────────────────────┘
+┌────────────────────────────┐
+│  對話串                      │
+│    AI 訊息靠左／使用者訊息靠右    │
+│                            │
+│                            │
+├────────────────────────────┤
+│  [ 對話輸入框 ]               │ ← 已實作，目前隱藏
+└────────────────────────────┘
 ```
 
-**對話輸入框已實作但目前隱藏，依業主要求先不對使用者開放。**
+**對話氣泡視窗**：`chatbot`（`gr.Chatbot`，`elem_classes=["main-chat"]`，app_agent.py:2868）。AI 訊息與使用者訊息左右分欄呈現。
+
+**對話輸入框：已實作但目前隱藏，依業主要求先不對使用者開放。**
 
-原規劃是把對話與上傳合併成單一輸入框（`gr.MultimodalTextbox`），解決舊版「對話框在上、上傳欄在下要往下滾動、使用者常找不到」的問題。元件已建置完成（`chat_upload`，app_agent.py:2891），但外層 `chat_upload_col` 設為 `visible=False`（app_agent.py:2890），畫面上看不到。
+原規劃是把對話與上傳合併成單一輸入框（`gr.MultimodalTextbox`），解決舊版「對話框在上、上傳欄在下要往下滾動、使用者常找不到」的問題。元件已建置完成（`chat_upload`，app_agent.py:2891），但外層 `chat_upload_col` 設為 `visible=False`（app_agent.py:2890），畫面上看不到。這裡用 `visible=False` 而不是整個拿掉，是為了讓元件仍存在於畫面樹中，日後啟用只需改一個參數。
 
-目前的實作狀態：
+目前的參數狀態：
 
 - `sources=[]`：不掛附加檔案功能，避免顯示迴紋針圖示卻按了沒作用
 - `submit_btn=False`：不顯示送出鈕
@@ -331,20 +340,47 @@ commit `d928c91`
 
 原本的轉接函式 `on_chat_upload_submit` 已於 2026-07-24 當作死碼移除。日後要啟用時，把 `chat_upload_col` 改為 `visible=True` 並重新接上 `.submit()` 事件即可，程式碼中該處留有註解說明。
 
-檔案上傳目前走獨立的上傳卡片（`file_input`，app_agent.py:2946），不受此影響。
+檔案上傳目前走內容區塊裡的獨立上傳卡片（`file_input`，app_agent.py:2946），不受此影響。
+
+#### 內容區塊（`canvas-col`，`scale=7`／`min_width=380`）
+
+```
+┌──────────────────────────────────────────┐
+│ ① 研究選擇 ② 文本上傳 ③ 語料說明 ④ 分析運算      │ ← 步驟列（固定不捲動，
+├──────────────────────────────────────────┤     只在 AI 對話頁顯示）
+│                                          │
+│   依目前步驟顯示對應內容（此區可捲動）：           │
+│     ・研究選擇 → 四張情境卡片                  │
+│     ・文本上傳 → 上傳卡片＋格式說明＋進度         │
+│     ・語料說明 → Metadata 表單卡片             │
+│     ・分析運算 → 三子階段進度與摘要              │
+│   分析完成後，改顯示左側導覽點選的結果內容          │
+│                                          │
+└──────────────────────────────────────────┘
+```
+
+**步驟列與捲動區是分開的兩層**：步驟列（`app_header_html`，app_agent.py:2918）直接放在 `canvas-col` 下，捲動內容另外包一層 `canvas-scroll`。這樣步驟列才會真正固定在內容區頂端不動。先前嘗試讓步驟列自己 `position:sticky` 失敗，原因是 Gradio 自動包的 `.block` wrapper 高度只比內容高一點點，sticky 的可移動範圍被那層 wrapper 框住，捲動一小段後就整個跟著捲走。
+
+**語料 Metadata 表單在此區呈現**：不套用聊天泡泡的左右分欄邏輯，佔滿內容區全寬，與上方內容是同頁面往下捲動的關係，**非 dialog／彈出視窗**（已實機截圖驗證）。設計理由見 4.3。
 
 #### 結果分頁排版
 
-| 分頁 | 內容 | 排版決策 |
+六個結果頁是三個互斥可見性的區塊（`canvas_idx_col`／`canvas_stat_col`／`canvas_report_col`），取代舊版的整頁分頁切換。各頁由上而下的實際元件順序：
+
+| 分頁 | 由上而下的元件順序 | 排版決策 |
 |---|---|---|
-| 語言指標分析 | 說明文字＋75 項指標數值表格＋下載 | 下載按鈕移到頁面頂部，不放表格後面 |
-| 統計-1 敘述統計 | 說明＋表格＋下載 | 沿用現有排版 |
-| 統計-2 差異性分析 | 表格＋箱形圖＋下載 | 圖表在上、表格在下，先看圖抓重點 |
-| 統計-3 監督式學習 | 特徵重要性表格＋圖（左右並排）| 沿用；側欄縮窄後放不下則改上下堆疊 |
-| 統計-4 非監督式學習 | 樹狀圖＋Elbow 並排／PCA 全寬／分群表格 | 沿用現有配置 |
-| LLM 輔助分析 | 報告文字＋下載 | 舒適閱讀排版（適中行寬、寬鬆行高）|
+| 語言指標分析 | 下載鈕 → 指標計算結果表格 | **下載鈕放在表格之前**（表格有 75 項指標，放後面要捲很久才看得到）|
+| 統計-1 敘述統計 | 敘述性統計表格 → 下載鈕 | 沿用原排版 |
+| 統計-2 差異性分析 | 顯著指標箱形圖 → 差異性分析表格 → 下載鈕 | **圖在上、表格在下**，先看圖抓重點 |
+| 統計-3 監督式學習 | 〔特徵重要性 Top 20 表格 ｜ 特徵重要性圖〕左右並排 → 下載鈕 | 表格與圖的寬度比為 1:2，讓圖有足夠寬度 |
+| 統計-4 非監督式學習 | 〔層次分群樹狀圖 ｜ K-means Elbow Curve〕左右等寬並排 → PCA 2D 分群圖（全寬）→ 分群結果表格 → 下載鈕 | 沿用原配置 |
+| LLM 輔助分析 | 報告文字 → 下載鈕 | 舒適閱讀排版（適中行寬、寬鬆行高）|
 | 技術執行紀錄 | 逐行執行 log | 弱化字級 |
 
+所有圖表元件預設 `visible=False`，待對應結果產出後才顯示。
+
+> **已知待修正**：下載鈕的命名風格不一致。四個統計子頁用具名標籤（「下載敘述統計」「下載差異性分析」「下載監督式學習」「下載非監督式學習」），但語言指標分析那顆是「下載檔案」、LLM 輔助分析那顆是「下載報告」。建議統一為具名形式（「下載語言指標」「下載 LLM 報告」），使用者在不同頁面間切換時才不會困惑。
+
 ### 4.3 語料 Metadata 說明表單設計
 
 - **四種情境都會出現此表單**：只要格式驗證通過即跳出，不因情境而整段略過。差異只在表單「內容」而非「是否顯示」：情境 1、2 固定二群，不會出現「比較結構」（群組數量／比較方式）欄位；情境 3、4 可能二群或三群，才會多出這段。「略過」整份表單的選項四種情境皆可使用
@@ -393,17 +429,19 @@ commit `d928c91`
 | 情境 | 設計 |
 |---|---|
 | 首頁初訪 | 單欄置中：品牌介紹＋「開始研究分析」單一入口＋讀取進度佔位連結（見 4.1）|
-| 結果分頁在分析尚未開始時 | 沿用現有 `_EMPTY_HINT` 元件（置中圖示＋提示文字），適配新版面位置 |
+| 結果分頁在分析尚未開始時 | 沿用 `_EMPTY_HINT` 元件（app_agent.py:1826）：置中的圖示方塊＋兩行文字「尚未產生資料／請先於「主頁」完成分析流程」，適配新版面位置。**文案待修正**，見下方說明 |
 | 左側結果導覽在分析未開始前 | 整段不顯示 |
 | 讀取進度但尚無任何存檔可讀 | 待設計（功能未實作，見 5.2）。設計時須說明這是「上傳先前下載的存檔」，不是「系統幫你保存的雲端紀錄」|
 
+> **已知待修正**：`_EMPTY_HINT` 的文案「請先於**「主頁」**完成分析流程」是舊版導覽的用語。目前左側導覽列上沒有任何叫「主頁」的項目，對應的是「AI 對話」。使用者照著這句話找不到入口。建議改為「請先於『AI 對話』完成分析流程」。
+
 #### 極限狀態
 
 | 情境 | 設計 |
 |---|---|
 | 上傳檔案數量極多（20–30 個群組）| 維持 Dataframe 元件（已內建全螢幕展開編輯），見 4.3 |
 | 上傳檔案數量過少、或某組缺漏 | 已於格式驗證階段攔截，見 2.1 ⑥ |
-| 完全沒有顯著指標（`sig_count=0`）| 現有邏輯 `if len(sig_df) > 0` 才產生箱形圖，無顯著指標時不產生圖片。需有對應提示（例如「本次分析未發現統計顯著的指標差異」），避免畫面留白讓使用者以為系統壞掉 |
+| 完全沒有顯著指標 | 現有邏輯 `if len(sig_df) > 0`（app_agent.py:946）才產生箱形圖，無顯著指標時不產生圖片，而 `tab_box_img` 預設 `visible=False`，該處就是一片空白。**尚未實作對應提示**，建議補上「本次分析未發現統計顯著的指標差異」之類的說明，避免使用者以為系統壞掉 |
 | 報告內容極長 | 舒適閱讀排版＋下載按鈕固定定位，見 4.2 |
 | 情境卡片標題／說明文字過長 | 卡片版型保留彈性，避免長文案破版 |