排版重構 Phase 1：四邊留白／三欄比例／輸入框多行／頂部列精簡

千卉用參考圖比對現況後逐項定案的版面調整（大範圍改動的第一階段，
先做低風險、互相獨立的項目）：

- 四邊留白：真因不是原本猜測的 .contain wrapper padding（devtools 逐層
量測後排除，那層 padding 早就是 0），是 Gradio 的 .app 元素被設了
max-width:1280px + auto 置中 margin，改成 max-width:100% + margin 歸零
- 三欄比例 nav:chat:canvas 從 2:4:7 改成 2:3:7
- 對話輸入框 lines=3 變成真正多行 textarea；對話視窗跟輸入框改用
flex-grow（6:1）依可用高度動態分配，不寫死 px，實測比例約 5.4:1
- 頂部列（app-header）從三行大標題+額外進度條精簡成單行產品名+步驟列，
拿掉進度條（跟步驟列的已完成/進行中/失敗三態是重複資訊）

A/B/D 三欄頂端對齊問題：實測 devtools 確認三欄 DOM 頂端本來就是像素級
對齊（皆 top:73px），不是 CSS bug，是 nav-col 第一個項目沒有卡片邊框
（收合按鈕裸露），視覺上比相鄰有邊框卡片的欄位「感覺」低，留給下一階段
nav-col 視覺重做時一併處理。

已用 Playwright 驗證：三欄邊界貼齊、輸入框可打多行且高度比例正確、
頂部列精簡且無進度條、reset 流程正常回首頁無殘留，首頁本身不受
.app 這個全域選擇器改動影響。

app_agent.py

@@ -1394,9 +1394,10 @@ _STEPS = [
 def _build_header_html(done_steps: list = None, current_step: int = None,
                         failed_step: int = None) -> str:
     """
-    產生完整標題區塊 HTML（標題＋動態步驟列＋進度條），確定性、不依賴 LLM。
-    取代原本寫死不會變的步驟列，以及原本另外放在右欄、跟這裡資訊重複的
-    「執行進度」面板——進度資訊現在只在這裡出現一次。
+    產生完整標題區塊 HTML（精簡單行產品名＋動態步驟列），確定性、不依賴 LLM。
+    2026-07-23 千卉回報原本三行大標題＋額外進度條佔比過高，改成單行精簡
+    產品名、拿掉進度條（進度資訊本來就已經完整表達在步驟列的已完成/進行中
+    /失敗三種狀態上，進度條是重複資訊）。
     done_steps: 已完成步驟（1-based list）
     current_step: 目前執行步驟（1-based int）
     failed_step: 執行失敗時卡住的步驟（1-based int），失敗時該步驟改用失敗樣式，
@@ -1427,15 +1428,10 @@ def _build_header_html(done_steps: list = None, current_step: int = None,
                 f'<span class="step-num">{num}</span>{name}</span>'
             )
 
-    pct = int(len(done_steps) / len(_STEPS) * 100)
-
     return (
         '<div class="app-header">'
-        '  <h1>譯彩紛呈：重譯文本分析系統</h1>'
-        '  <p class="subtitle">TransPrism: An Analytical Framework for Retranslation</p>'
-        '  <p class="subtitle-3">II 分析引擎 SpectraEngine</p>'
+        '  <p class="title-line">譯彩紛呈 <span class="en">SpectraEngine</span></p>'
         f'  <div class="steps">{"".join(pills)}</div>'
-        f'  <div class="step-progress-track"><div class="step-progress-fill" style="width:{pct}%"></div></div>'
         '</div>'
     )
 
@@ -1849,12 +1845,19 @@ _CUSTOM_CSS = """
     padding: 0 0 1.5rem !important;
 }
 /* .gradio-container 內部還包了一層 Gradio 自己的 .app（class="main fillable app"）
-   wrapper，本身固定帶 32px 左右 padding（非我們設定，Gradio 內建），這才是
-   拿掉 .gradio-container 左右 padding 後畫面仍貼不到邊界的真正原因（已用
-   devtools 逐層量到）。一併歸零 */
+   wrapper。原本以為是它的左右 padding 造成貼不到邊界，歸零後留白仍在；
+   千卉 2026-07-23 截圖回報四邊仍有留白，重新用 devtools 沿著
+   .main-layout-row 往上逐層量 computed style 才找到真因：.app 被 Gradio
+   設了 `max-width:1280px` 搭配 auto 置中的 margin-left（量到 77.5px =
+   (1435-1280)/2，抓包抓得很準），是 margin 不是 padding。真正修法是拿掉
+   max-width 限制、margin 歸零，padding 那條規則留著無害但其實沒解決過
+   問題。 */
 .app {
     padding-left: 0 !important;
     padding-right: 0 !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
 }
 *, *::before, *::after { box-sizing: border-box; }
 /* 全域安全網（陷阱 13 第 3 點）：Gradio 的 markdown 渲染統一包在
@@ -1864,10 +1867,14 @@ _CUSTOM_CSS = """
    字級仍留給各自的選擇器決定，這裡不覆寫 font-size。 */
 .md { display: block !important; }
 
-/* ── 2. HEADER（卡片化）─────────────────────────────────────────── */
+/* ── 2. HEADER（卡片化，2026-07-23 精簡成單行）───────────────────── */
 .app-header {
-    text-align: center;
-    padding: 1.6rem 1.5rem 1.25rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .9rem;
+    text-align: left;
+    padding: .85rem 1.25rem;
     position: relative;
     margin: 1rem 0 1.25rem;
     border: 1px solid var(--c-border);
@@ -1892,41 +1899,22 @@ _CUSTOM_CSS = """
    `background-image: linear-gradient(...) !important;` 這個子屬性本身，
    跳過簡寫展開的解析路徑——已用瀏覽器 devtools 即時修改驗證過，改長寫法
    後漸層立即正常顯示。*/
-.app-header h1 {
+.app-header .title-line {
     font-family: 'Crimson Pro', 'Noto Serif TC', Georgia, serif !important;
-    font-size: 2.1rem !important;
+    font-size: 1.3rem !important;
     font-weight: 700 !important;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    margin: 0 0 .5rem !important;
+    margin: 0 !important;
     letter-spacing: -.01em;
     line-height: 1.2 !important;
+    white-space: nowrap;
+    flex: none;
 }
-.app-header .subtitle {
-    font-size: 1.1rem !important;
-    line-height: 1.5 !important;
-    margin: 0 0 .25rem !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    color: transparent !important;
-}
-/* 第三排：字型比第二排大、比主標題小 */
-.app-header .subtitle-3 {
-    font-size: 1.5rem !important;
-    font-weight: 700 !important;
-    line-height: 1.4 !important;
-    margin: 0 !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    color: transparent !important;
-}
-.app-header .subtitle strong {
-    -webkit-text-fill-color: transparent !important;
-    color: transparent !important;
-    font-weight: 600;
+.app-header .title-line .en {
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
 }
 .badge {
     display: inline-flex; align-items: center; gap: 4px;
@@ -1948,10 +1936,12 @@ _CUSTOM_CSS = """
     color: var(--c-accent2-strong);
     border: 1px solid rgba(var(--c-accent2-rgb),.30);
 }
-/* step indicators */
+/* step indicators：2026-07-23 header 改單行版面後，steps 改成跟標題
+   同一行左右排列（flex-wrap 讓視窗窄時自動換行），不再置中、不再需要
+   靠 margin-top 跟上方大標題拉開距離（間距已交給 .app-header 的 gap） */
 .app-header .steps {
-    display: flex; justify-content: center; flex-wrap: wrap;
-    gap: 4px; margin-top: 1rem;
+    display: flex; justify-content: flex-start; flex-wrap: wrap;
+    gap: 4px; margin: 0; flex: 1 1 auto; min-width: 0;
 }
 .step-pill {
     display: inline-flex; align-items: center; gap: 6px;
@@ -2018,21 +2008,6 @@ _CUSTOM_CSS = """
     background: #dc2626;
     color: #fff;
 }
-/* 步驟列下方的整體進度條，取代原本另外放在右欄、跟步驟列資訊重複的執行進度面板 */
-.step-progress-track {
-    height: 4px;
-    background: var(--c-border);
-    border-radius: 2px;
-    margin-top: .75rem;
-    overflow: hidden;
-}
-.step-progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--c-accent-strong), var(--c-accent2));
-    border-radius: 2px;
-    transition: width .3s ease;
-}
-
 /* ── 3. TABS ───────────────────────────────────────────────────── */
 /* 注意：這裡原本用 backdrop-filter 做毛玻璃效果，搭配 position: sticky
    會讓瀏覽器每個捲動影格都要重新計算模糊，頁面一長（大表格、多張圖）就會
@@ -2117,6 +2092,17 @@ _CUSTOM_CSS = """
     overflow-y: auto !important;
     overflow-x: hidden !important;
 }
+/* 2026-07-23：.main-chat 外層改用 flex-grow 決定高度（見「5b. COLUMN
+   LAYOUT」區塊的 5:1 比例設定），中間這層 wrapper 也要跟著撐滿，
+   高度才會一路傳到 bubble-wrap，捲動區域才會是「剩下的全部空間」
+   而不是「內容多高就多高」。 */
+.main-chat > div,
+.main-chat [class*="wrapper"] {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
 
 /* 訊息從頂部開始排列，消除空白 */
 div[role="log"].bubble-wrap,
@@ -2344,12 +2330,25 @@ div[role="log"][aria-label="chatbot conversation"],
     display: flex !important;
     flex-direction: column !important;
     flex-wrap: nowrap !important;
-    gap: 0 !important;
+    gap: 1rem !important;
     height: calc(100vh - 150px) !important;
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
+    overflow: hidden !important;
     min-width: 0 !important;
 }
+/* 對話視窗：輸入框高度比例 5:1（千卉要求，2026-07-23）。用 flex-grow
+   依 chat-col 當下的可用高度分配，不寫死 px，縮放視窗時比例仍會維持；
+   chatbot 元件不再用 Gradio 原生 height= 參數（那是寫死 px），改讓外層
+   wrapper 高度完全交給 flex 決定。訊息列表本身的捲動仍是 Gradio 原生
+   行為（.bubble-wrap 內部自己有捲軸），外層 wrapper 用 overflow:hidden
+   避免出現雙捲軸。 */
+.main-chat {
+    flex: 6 1 0 !important;
+    min-height: 0 !important;
+    height: auto !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
 /* canvas-col 本身「不」捲動——它只負責把步驟列（固定）跟 canvas-scroll
    （捲動）疊在一起、限制在同一個總高度內。踩坑記錄：原本想讓步驟列用
    position:sticky 貼在 canvas-col 頂端，但 sticky 元素只能在「自己最近的
@@ -2425,7 +2424,7 @@ div[role="log"][aria-label="chatbot conversation"],
 }
 .homepage-hero h1 {
     margin: 1rem 0 .6rem; font-size: 2.1rem; line-height: 1.3; font-weight: 700;
-    /* 同 .app-header h1 的漸層文字踩坑（見 _DARK_MODE_HEAD_CSS 上方註解）：
+    /* 同 .app-header .title-line 的漸層文字踩坑（見 _DARK_MODE_HEAD_CSS 上方註解）：
        background 簡寫在瀏覽器展開成子屬性時 background-image 會解析成
        空值，改直接寫 background-image 這個子屬性本身即可 */
     background-image: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent2) 90%);
@@ -2654,11 +2653,19 @@ img.button-icon { opacity: .82; }
     margin: .6rem 0 0 !important;
     width: 100% !important;
 }
-/* chat-col 是 gap:0 的 flex 欄，上傳卡片搬到「對話視窗＋技術執行紀錄」
-   這組下方後，要用明顯留白跟上面那組分開，不能只靠卡片自己 .6rem 的
-   預設頂距（那個距離是設計給同張卡片內部元件用的，太窄） */
+/* 2026-07-23：chat-col 改成 gap:1rem 的 flex 欄，跟 chatbot 之間的留白
+   已經由 gap 統一處理，這裡不用再疊加 margin-top（舊註解提到的「技術
+   執行紀錄」分組已在 Phase 8-B 搬去 canvas-col，跟這裡無關，是過期
+   說明）。改成跟 .main-chat 同一套 5:1 flex-grow 比例分配高度。 */
 #chat_upload_zone {
-    margin-top: 1.6rem !important;
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+#chat_upload_zone .multimodal-textbox,
+#chat_upload_zone textarea {
+    height: 100% !important;
 }
 /* 格式要求直接寫在上傳卡片裡，跟卡片本身有明顯區隔但仍在同一張卡片內，
    使用者不用往上捲回對話視窗找 AI 說過的規則 */
@@ -3052,7 +3059,7 @@ a:hover { color: var(--c-link-hover); }
     .canvas-scroll { overflow-y: visible !important; min-height: 0 !important; }
 }
 @media (max-width: 768px) {
-    .app-header h1 { font-size: 1.6rem !important; }
+    .app-header .title-line { font-size: 1.1rem !important; }
     .tabitem { padding: 1rem .75rem !important; }
     .app-header .steps { gap: 3px; }
     .step-pill { font-size: 0.62rem; padding: 2px 7px; }
@@ -3079,9 +3086,7 @@ a:hover { color: var(--c-link-hover); }
 # 同一批修掉（見 _CUSTOM_CSS 對應區塊）。
 _DARK_MODE_HEAD_CSS = """
 <style>
-.app-header h1,
-.app-header .subtitle,
-.app-header .subtitle-3 {
+.app-header .title-line {
     background-image: linear-gradient(130deg, var(--c-accent-strong) 0%, var(--c-accent2) 55%, var(--c-accent3) 100%) !important;
     -webkit-background-clip: text !important;
     background-clip: text !important;
@@ -3569,10 +3574,12 @@ def create_app():
                         elem_id="nav_report_btn", elem_classes=["result-nav-btn"], variant="secondary",
                     )
 
-            with gr.Column(scale=4, min_width=300, elem_classes=["chat-col"]):
+            with gr.Column(scale=3, min_width=280, elem_classes=["chat-col"]):
+                # 高度不再寫死 px，改用 CSS flex-grow 讓對話視窗跟輸入框依
+                # chat-col 當下的可用高度按 5:1 比例分配（見 .main-chat／
+                # #chat_upload_zone 的 flex 設定），視窗縮放時比例仍會維持。
                 chatbot = gr.Chatbot(
                     show_label=False,
-                    height=400,
                     elem_classes=["main-chat"],
                 )
                 # Phase 8（千卉實測後回頭調整）：對話輸入框改回「常駐顯示、
@@ -3589,6 +3596,7 @@ def create_app():
                         sources=[],
                         placeholder="對話輸入框（功能開發中）",
                         show_label=False,
+                        lines=3,
                     )
 
             with gr.Column(scale=7, min_width=380, elem_classes=["canvas-col"]):