排版重構：修正頂部列/底部連結沒有真正置頂置底

千卉實機在 localhost 玩過之後回報：頂部列（D）沒有真正固定在頂端、
底部「透過API使用/設定」連結也沒有固定在底部。

實測用 devtools 沿著 <footer> 往上逐層量 computed style 找到真因：
Gradio 原生把 gradio-app／.gradio-container／.app／.wrap 這四層全部
設成 display:flex; flex-direction:column，.wrap 底下正好是「主內容
（.contain）＋footer」兩個 flex 子項——結構本來就對，問題是這條鏈
的高度全部是 auto（依內容撐高），不是鎖定 100vh。內容只要比視窗高
一點點，整個外層文件就會跟著捲動，把「該固定」的頂部列/底部連結一起
拖走。

修法：把這條 Gradio 原生就是 flex column 的鏈路鎖死在 100vh，
.contain（真正裝 gr.Blocks 內容那層）變成唯一會捲動的區域，footer
用 flex-shrink:0 釘住。完全不用 position:sticky/fixed——8-B 已經踩過
sticky 在 Gradio 自動包的 wrapper 裡貼不住的坑，這次延續「結構性
分離，不依賴 sticky」的既有原則，只是這次分離的是整個頁面殼，不只
單一元件。連帶讓 nav-col 也比照 chat-col/canvas-col 鎖定高度＋自己
捲動，避免手風琴展開等情況把 nav-col 撐高、間接逼 .contain 整層捲動。

已用 Playwright 驗證：桌面/短視窗(550px,手風琴展開強制觸發溢出)/
手機375px 三種情境下 document.documentElement.scrollHeight 都精確
等於視窗高度，完全無外層捲動；nav-col 在短視窗下正確改成自己內部
捲動；首頁/設定面板/reset流程皆不受影響；console 0 error。

app_agent.py

@@ -1859,6 +1859,50 @@ _CUSTOM_CSS = """
     margin-left: 0 !important;
     margin-right: 0 !important;
 }
+/* 2026-07-23：千卉回報頂部列（D）沒有真正固定置頂、底部「透過API使用／
+   設定」（G）也沒有固定置底。實測用 devtools 沿著 <footer> 往上量整條
+   祖先鏈才發現：Gradio 原生把 gradio-app／.gradio-container／.app／
+   .wrap 這四層全部設成 display:flex; flex-direction:column，.wrap 底下
+   剛好就是「主內容（.contain）＋footer」兩個 flex 子項——結構本來就是
+   對的，問題是這條鏈的高度全部用 auto（依內容撐高），不是真正鎖定
+   100vh。內容只要比視窗高一點點（哪怕只多15px），整個外層文件就會
+   跟著捲動，把「理論上該固定」的頂部列/底部連結一起拖走——這才是
+   「沒有真正置頂/置底」的根本原因，不是 sticky/fixed 沒設對。
+   修法：把這條 Gradio 原生就是 flex column 的鏈路鎖死在 100vh，讓
+   .contain（真正裝我們 gr.Blocks 內容的那層）變成唯一會捲動的區域，
+   footer 用 flex-shrink:0 釘在最底。這樣完全不用碰 position:sticky/
+   fixed（8-B 已經踩過 sticky 在 Gradio wrapper 裡貼不住的坑），延續
+   這個檔案「結構性分離，不依賴 sticky」的既有原則，只是這次分離的
+   層級是整個頁面殼，不只是單一元件。 */
+html, body {
+    height: 100% !important;
+    margin: 0 !important;
+}
+gradio-app {
+    display: block !important;
+    height: 100vh !important;
+    overflow: hidden !important;
+}
+.gradio-container {
+    height: 100vh !important;
+    overflow: hidden !important;
+}
+.app {
+    height: 100% !important;
+    overflow: hidden !important;
+}
+.wrap {
+    height: 100% !important;
+    overflow: hidden !important;
+}
+.contain {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+}
+footer {
+    flex-shrink: 0 !important;
+}
 *, *::before, *::after { box-sizing: border-box; }
 /* 全域安全網（陷阱 13 第 3 點）：Gradio 的 markdown 渲染統一包在
    <span class="md ...">，預設是 inline 卻常常裝 block 層級的 <p>/<ul> 等，
@@ -2302,12 +2346,22 @@ div[role="log"][aria-label="chatbot conversation"],
 /* Phase 8-B：三欄式工作區。nav-col 窄、固定寬度不隨視窗縮放；chat-col／
    canvas-col 各自獨立捲動（各自的內容不會因為對方變長而互相影響），高度
    統一扣掉頁面上方 Tab 列與外距抓一個概略值，之後看實際渲染再微調 */
+/* 2026-07-23：跟 chat-col/canvas-col 一樣鎖定高度＋自己捲動，理由是
+   頁殼改成真 100vh 鎖死之後（見上方 .contain 那組規則），nav-col 如果
+   內容比這個高度多（手風琴展開＋8個導覽項目在矮視窗上有可能發生），
+   沒有自己的 overflow 就會撐開 .main-layout-row，逼 .contain 整層捲動
+   ——雖然不會再拖走頂部列/footer了（那兩個已經在 .contain 外面），但
+   chat-col/canvas-col 會跟著被迫一起捲動，體驗還是不對。讓三欄各自
+   獨立捲動，互不影響。 */
 .nav-col {
     flex: 0 0 220px !important;
     max-width: 220px !important;
     display: flex !important;
     flex-direction: column !important;
     gap: .6rem !important;
+    height: calc(100vh - 150px) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
 }
 /* 真因排查記錄：Gradio 的 .column 預設會帶 flex-wrap:wrap。平常沒設高度時
    不會有事，但這裡額外設了固定 height 讓內容用捲動取代撐高，一旦內容總高