修收合圖示被擠成8px、輸入框留白與可輸入、exec對齊標題、深色分界線

收合導覽圖示看不見（真因是尺寸不是顏色）：實測圖示在收合狀態只渲染成 8px。
60px 欄寬扣 nav 的 16px 左右內距剩 28px，再扣按鈕 .6rem 內距（19.2px），
留給圖示僅 ~9px，而 img 是 flex 子項預設可壓縮，就一路縮到 8px。修法三件：
收合時欄內距縮 8px（展開仍 16px）、按鈕內距 .6→.45rem、圖示 flex:none
不可壓縮；尺寸 20→22px、opacity .82→1。實測四類圖示皆 22px、清晰可辨。

對話輸入框（#15）：
- 下方 61px 空縫：輸入框原本 flex:1 佔 1/7 欄高（153px）但內容只佔一小塊。
改 flex:0 0 auto 縮到內容高度、對話視窗改 flex:1 1 auto 吃掉剩餘，縫隙歸零
- 左右不對稱（左14/右18）：Gradio 內層 full-container 12px + input-wrapper
右 4px。統一 full-container 對稱 10px 12px、input-wrapper 歸零 → 左右各 14
- 改 interactive=True：可打字（雖然目前不接任何作用），實測輸入正常

技術執行紀錄對齊標題（#16）：.exec-log 水平 padding 歸零——canvas-result 已提供
1.25rem 讓內容與標題齊平，這裡再加 .75rem 會把文字推遠 12px。實測標題與
log 文字皆 256px 對齊

深色模式分界線看不清（#17）：.app-header 底線在深色是 --c-border
rgba(14,165,233,.11)，疊在深色底幾乎不可見。深色改 rgba(148,163,184,.28)，
.dark class 與系統深色媒體查詢兩條路都覆蓋

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app_agent.py

@@ -2079,9 +2079,17 @@ footer {
     position: relative;
     margin: 0 0 1.25rem;
     border: none;
+    /* 頂部標題與內容的分界線。--c-border 在深色是 rgba(14,165,233,.11)，
+       疊在深色底上幾乎看不見（#17）；深色模式改用較亮的中性灰讓分界清楚。
+       兩種深色觸發都要蓋：.dark class（切換鈕強制）與系統深色（媒體查詢，
+       且未被 .light 覆蓋）。 */
     border-bottom: 1px solid var(--c-border);
     background: none;
 }
+.dark .app-header { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+@media (prefers-color-scheme: dark) {
+    :root:not(.light) .app-header { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+}
 /* 注意：這三個選擇器的漸層文字底色（background-image: linear-gradient(...var()...)）
    改在 launch(head=...) 注入的 <style> 裡設定（見 _DARK_MODE_HEAD_CSS）——
    這裡只保留其餘不受影響的樣式（字型、間距等）。
@@ -2451,10 +2459,13 @@ div[role="log"][aria-label="chatbot conversation"],
    本身也會捲動，兩個捲動容器疊在一起、捲軸位置又離得很近，看起來像「兩條
    捲軸」造成混亂——拿掉內部捲動限制，讓內容自然撐開高度，只用頁面本身的
    捲軸，維持單一捲動體驗 */
+/* 2026-07-24（#16）：水平 padding 歸零——canvas-result 已提供 1.25rem 左內距
+   讓內容跟標題（都在 96px）齊平，這裡原本再加 .75rem(12px) 會把 log 文字推到
+   108px、比標題與其他結果頁多縮 12px。只留上下間距。 */
 .exec-log {
     background: transparent !important;
     border: none !important;
-    padding: .55rem .75rem !important;
+    padding: .55rem 0 !important;
     margin-top: 0 !important;
 }
 .exec-log p {
@@ -2549,7 +2560,7 @@ div[role="log"][aria-label="chatbot conversation"],
    行為（.bubble-wrap 內部自己有捲軸），外層 wrapper 用 overflow:hidden
    避免出現雙捲軸。 */
 .main-chat {
-    flex: 6 1 0 !important;
+    flex: 1 1 auto !important;   /* 2026-07-24：吃掉輸入框以外的全部高度（見 #chat_upload_zone） */
     min-height: 0 !important;
     height: auto !important;
     overflow: hidden !important;
@@ -2852,14 +2863,22 @@ img.button-icon { opacity: .82; }
     .nav-col.collapsed .reset-btn,
     .nav-col.collapsed #result_nav_col .result-nav-btn {
         justify-content: center !important;
-        padding: .6rem !important;
+        padding: .45rem !important;   /* 2026-07-24 收窄：原本 .6rem 把圖示擠到 8px（見下方註解） */
         font-size: 0 !important;
     }
-    /* 收合成 icon bar 時只剩圖示、沒有文字陪襯，img.button-icon 預設的
-       opacity:.82 會讓圖示偏淡不好認（千卉回報「看不見 icon」）。收合狀態
-       拉到 1 讓啟用項目清楚；disabled 項目的淡化來自按鈕本身的 opacity:.38
-       （父層），不受這條影響，仍維持「還不能點」的灰階。 */
-    .nav-col.collapsed .button-icon { width: 20px !important; height: 20px !important; opacity: 1 !important; }
+    /* 千卉回報「收合後看不見 icon」的真因（2026-07-24 量出來才發現）：不是顏色
+       太淡，是圖示被擠成 8px。60px 欄寬扣掉 nav 的 16px 左右內距只剩 28px，再扣
+       按鈕自己的 .6rem 左右內距（19.2px），留給圖示的空間只剩 ~9px，而 img 是
+       flex 子項、預設可被壓縮，就一路縮到 8px。
+       修法三件：①收合時欄內距縮到 8px（展開仍維持 16px）②按鈕內距縮到 .45rem
+       ③圖示 flex:none 明確不可壓縮。可用寬 = 60-16-14.4 ≈ 29.6px > 22px。
+       另外 opacity 拉到 1（預設 .82 沒有文字陪襯時偏淡）；disabled 的淡化來自
+       按鈕本身 opacity:.38（父層），不受影響。 */
+    .nav-col.collapsed { padding-left: 8px !important; padding-right: 8px !important; }
+    .nav-col.collapsed .button-icon {
+        width: 22px !important; height: 22px !important;
+        flex: none !important; opacity: 1 !important;
+    }
     .nav-col.collapsed .result-nav { padding-top: .8rem !important; }
 }
 
@@ -2982,16 +3001,21 @@ img.button-icon { opacity: .82; }
    已經由 gap 統一處理，這裡不用再疊加 margin-top（舊註解提到的「技術
    執行紀錄」分組已在 Phase 8-B 搬去 canvas-col，跟這裡無關，是過期
    說明）。改成跟 .main-chat 同一套 5:1 flex-grow 比例分配高度。 */
+/* 2026-07-24（#15）：輸入框改「自然高度、貼齊底部」，不再用 flex:1 佔 1/7
+   欄高——原本被撐成 153px 但內容只佔一小塊，底下留 61px 空縫（千卉標的
+   下方縫隙）。對話視窗改 flex:1 1 auto 吃掉剩餘全部高度，輸入框 flex:0 0 auto
+   縮到內容高度。 */
 #chat_upload_zone {
-    flex: 1 1 0 !important;
+    flex: 0 0 auto !important;
     min-height: 0 !important;
     display: flex !important;
     flex-direction: column !important;
 }
-#chat_upload_zone .multimodal-textbox,
-#chat_upload_zone textarea {
-    height: 100% !important;
-}
+/* Gradio MultimodalTextbox 的內層 padding 左右不對稱（full-container 12px、
+   input-wrapper 右 4px、textarea 0）造成左 14／右 18 不一致（#15）。統一：
+   full-container 對稱 12px、input-wrapper 歸零，textarea 左右緣一致。 */
+#chat_upload_zone .full-container { padding: 10px 12px !important; }
+#chat_upload_zone .input-wrapper { padding: 0 !important; }
 /* 格式要求直接寫在上傳卡片裡，跟卡片本身有明顯區隔但仍在同一張卡片內，
    使用者不用往上捲回對話視窗找 AI 說過的規則 */
 /* 已經在 upload-zone 卡片裡了，卡片本身就有外框，這裡不再加第二層框線／底色。
@@ -4404,7 +4428,8 @@ def create_app():
                         placeholder="對話輸入框（功能開發中）",
                         show_label=False,
                         lines=3,
-                        submit_btn=False,   # 2026-07-24 千卉：拿掉送出鈕
+                        submit_btn=False,     # 2026-07-24 千卉：拿掉送出鈕
+                        interactive=True,     # 2026-07-24 千卉：要可打字（雖然目前不接任何作用）
                     )
 
             with gr.Column(scale=7, min_width=380, elem_classes=["canvas-col"]):