Phase 8-E：nav-col 桌面收合 icon bar + 手機漢堡抽屜

nav-col 收合成窄 icon bar（桌面，60px，localStorage 記住狀態）與
off-canvas 抽屜（手機 ≤900px，漢堡鈕開／X、背景遮罩、Esc 都能關）。
提前補上 Heroicons 風格圖示（plus/home/trending-up/document，assets/
icons/*.svg + gr.Button(icon=)；統計比較分析用 CSS ::before 掛
chart-bar，Accordion 沒有 icon 參數）——因為收合後純文字按鈕沒有圖示
會看不懂，跟千卉確認後決定把原訂「下一輪視覺打磨」的圖示需求提前
到這次一起做，範圍限縮在 nav-col 這批新按鈕。

gr.Button(icon=) 這版 Gradio 是渲染成 <img>，不是行內 svg，深色模式
用 filter 反相＋去彩處理（img 不吃 currentColor）。收合狀態下重置
按鈕若被點擊，JS 會先自動展開 nav-col 再顯示確認彈窗，避免彈窗擠在
窄欄裡；nav-col 原本 gr.Column(min_width=200) 的 inline min-width 需要
額外用 !important 覆寫才能真正收窄（min-width 優先於 max-width）。

已用 Playwright 驗證 375/768/900/1024/1440 五個斷點無跑版無橫向捲動、
淺色/深色模式圖示皆正常、桌面收合展開/手機抽屜開關四種關閉路徑
（X、背景、Esc、點導覽項目自動關）、重置流程收合狀態下正確自動展開。

app_agent.py

@@ -2473,6 +2473,146 @@ div[role="log"][aria-label="chatbot conversation"],
 .homepage-footnote { margin-top: 2rem; text-align: center; font-size: .82rem; color: var(--c-text-subtle); }
 @media (prefers-reduced-motion: reduce) { .scenario-card { transition: none; } }
 
+/* ── 5e. NAV-COL 收合／手機漢堡抽屜（Phase 8-E）────────────────── */
+/* gr.Button(icon=...) 這版 Gradio 實測是渲染成 <img src="...">，不是行內
+   <svg>，CSS currentColor 對它沒有作用（img 不會繼承文字顏色）。因此
+   assets/icons/*.svg 檔案裡直接把 stroke 寫死成淺色模式的 --c-text-muted
+   (#475569)，深色模式改用 filter 把整張圖反相＋去彩，逼近深色模式的
+   --c-text-muted (#94a3b8) 色調，這是唯一能讓「檔案路徑圖示」跟著主題
+   變色的辦法（不用另外準備一份深色版 svg 檔案）。 */
+img.button-icon { opacity: .82; }
+.dark img.button-icon {
+    filter: grayscale(1) invert(1) brightness(1.55) contrast(.85);
+}
+/* nav-col 收合／手機抽屜控制鈕：桌面收合鈕與手機關閉鈕互斥顯示，
+   預設（>900px）只顯示收合鈕；@media (max-width:900px) 那組規則會反過來
+   （見下方）。這兩顆是純 gr.HTML() 刻的按鈕，行內 SVG 用 _icon()，
+   currentColor 正常運作，不受上面 img.button-icon 的限制。 */
+.nav-collapse-row { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
+.nav-drawer-close-row { display: none; justify-content: flex-end; margin-bottom: .5rem; }
+.nav-collapse-toggle, .nav-drawer-close, .mobile-nav-toggle {
+    all: unset; box-sizing: border-box; cursor: pointer;
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 32px; height: 32px; border-radius: 8px;
+    color: var(--c-text-muted);
+    transition: background-color 150ms ease-out, color 150ms ease-out;
+}
+.nav-collapse-toggle:hover, .nav-drawer-close:hover, .mobile-nav-toggle:hover {
+    background: rgba(var(--c-accent-rgb),.08); color: var(--c-text);
+}
+.nav-collapse-toggle:focus-visible, .nav-drawer-close:focus-visible, .mobile-nav-toggle:focus-visible {
+    outline: 2px solid var(--c-accent); outline-offset: 2px;
+}
+.nav-collapse-toggle svg { transition: transform 200ms ease-out; }
+.nav-col.collapsed .nav-collapse-toggle svg { transform: rotate(180deg); }
+@media (prefers-reduced-motion: reduce) {
+    .nav-collapse-toggle svg { transition: none; }
+    .nav-col { transition: none !important; }
+}
+
+/* 桌面收合成窄 icon bar：文字用 font-size:0 隱藏（不是 display:none，
+   避免影響按鈕的 accessible name／可點擊區域），圖示尺寸另外鎖死不受
+   font-size 影響。統計比較分析的 4 個子按鈕是純文字、沒有各自圖示，
+   收合時整組 Accordion 直接隱藏（窄版 icon bar 塞不下二層選單）；重置
+   按鈕若在收合狀態被點擊，JS 會先自動展開 nav-col 再讓確認彈窗顯示
+   （見 _APP_HEAD_SCRIPT setNavCollapsed 呼叫處），避免確認彈窗擠在
+   60px 窄欄裡。這整組「收合外觀」規則只在桌面寬度生效（min-width:901px）
+   ——手機沒有「窄 icon bar」這個中間態，nav-col 在手機是 off-canvas
+   抽屜，要嘛整個滑出來、要嘛整個收在畫面外，即使 localStorage 殘留
+   collapsed=1 也不該套用這組窄化樣式（見下方 900px 媒體查詢改用
+   position:fixed 抽屜，兩者規則互斥，不需要互相 revert）。 */
+.nav-col { transition: flex-basis 200ms ease-out, max-width 200ms ease-out; }
+@media (min-width: 901px) {
+    /* gr.Column(min_width=200) 會在元件上寫死 inline style="min-width:200px"，
+       這個 inline min-width 會蓋掉外部 stylesheet 的 max-width（flexbox
+       規範：min-width 與 max-width 衝突時 min-width 優先），光設
+       max-width:60px 收合欄寬不會有效果，撐在 200px 不動——必須額外用
+       !important 覆寫 min-width 本身（stylesheet 的 !important 蓋得過
+       沒加 !important 的 inline style，這點跟蓋不過 inline !important
+       不一樣）。 */
+    .nav-col.collapsed { flex: 0 0 60px !important; max-width: 60px !important; min-width: 60px !important; }
+    .nav-col.collapsed .nav-collapse-row { justify-content: center; }
+    .nav-col.collapsed .scenario-buttons,
+    .nav-col.collapsed .result-nav-accordion,
+    .nav-col.collapsed .reset-confirm { display: none !important; }
+    .nav-col.collapsed .reset-btn,
+    .nav-col.collapsed .result-nav-btn {
+        justify-content: center !important;
+        padding: .6rem !important;
+        font-size: 0 !important;
+    }
+    .nav-col.collapsed .button-icon { width: 20px !important; height: 20px !important; }
+    .nav-col.collapsed .result-nav { padding-top: .8rem !important; }
+    .nav-col.collapsed #nav_stat_accordion { display: none !important; }
+}
+
+/* 統計比較分析 Accordion 沒有 icon= 參數，改用 CSS ::before 掛圖示
+   （data-URI，同一份 chart-bar 線稿，��值同步 assets/icons/*.svg 的
+   #475569／深色模式同樣靠 filter 反相，寫法比照上面 img.button-icon）。 */
+#nav_stat_accordion .label-wrap {
+    display: flex !important; align-items: center !important; gap: .5rem !important;
+}
+#nav_stat_accordion .label-wrap::before {
+    content: "";
+    width: 18px; height: 18px; flex: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='20' x2='20' y2='20'/%3E%3Crect x='5' y='12' width='3' height='8'/%3E%3Crect x='10.5' y='7' width='3' height='13'/%3E%3Crect x='16' y='14' width='3' height='6'/%3E%3C/svg%3E");
+    background-size: contain; background-repeat: no-repeat;
+    opacity: .82;
+}
+.dark #nav_stat_accordion .label-wrap::before {
+    filter: grayscale(1) invert(1) brightness(1.55) contrast(.85);
+}
+
+/* 手機漢堡開關（mobile_nav_toggle）與抽屜遮罩（nav_backdrop）：兩者都是
+   放在 workspace_row 外層、一開始就 visible=True 的獨立元件（理由見
+   create_app() 該處註解），CSS 預設整個不顯示，只在手機寬度且 nav-col
+   已掛載（情境已選定）時，由 _APP_HEAD_SCRIPT 的 _syncMobileHamburger()
+   切換 display，避免首頁或桌面寬度下平白多一顆浮動按鈕。 */
+.mobile-nav-toggle {
+    display: none;
+    position: fixed; top: 14px; left: 14px; z-index: 45;
+    background: var(--c-surface) !important;
+    border: 1px solid var(--c-border) !important;
+    box-shadow: 0 4px 16px rgba(15,23,42,.18);
+}
+.nav-backdrop {
+    display: none;
+    position: fixed; inset: 0; z-index: 30;
+    background: rgba(2,6,23,.5);
+    opacity: 0; pointer-events: none;
+    transition: opacity 200ms ease-out;
+}
+.nav-backdrop.visible { opacity: 1; pointer-events: auto; }
+@media (prefers-reduced-motion: reduce) { .nav-backdrop { transition: none; } }
+
+@media (max-width: 900px) {
+    /* 手機寬度：nav-col 不再跟著 chat-col/canvas-col 上下堆疊（那條規則
+       見「17. RESPONSIVE」，已把 nav-col 排除），改成 off-canvas 抽屜，
+       預設收在畫面左側外面，漢堡鈕/背景遮罩點擊才滑入。 */
+    .nav-col {
+        position: fixed !important;
+        top: 0; left: 0; bottom: 0;
+        width: 78vw !important; max-width: 300px !important;
+        flex: none !important; height: 100vh !important;
+        overflow-y: auto !important;
+        background: var(--c-surface) !important;
+        box-shadow: 4px 0 24px rgba(15,23,42,.28) !important;
+        z-index: 40;
+        transform: translateX(-100%);
+        transition: transform 220ms ease-out;
+        padding: 1.1rem 1rem !important;
+    }
+    .nav-col.mobile-open { transform: translateX(0) !important; }
+    /* 桌面收合是縮寬窄 icon bar 那組規則整段包在 @media(min-width:901px)
+       裡（見「5e」上方），手機寬度完全不會命中，這裡不需要另外
+       revert——即使 localStorage 殘留 collapsed=1，.nav-col.collapsed
+       在手機寬度就是普通展開的抽屜外觀，不會被窄化。 */
+    .nav-collapse-row { display: none !important; }
+    .nav-drawer-close-row { display: flex !important; }
+    .mobile-nav-toggle { display: inline-flex; }
+    .nav-backdrop { display: block; }
+}
+
 /* ── 6. UPLOAD AREA（醒目卡片）─────────────────────────────────── */
 /* 注意：max-width + margin auto 是舊版單欄置中版面留下的樣式，現在
    upload-zone 是右側 action-col 裡的元件，要跟同一欄的 scenario-buttons
@@ -2894,12 +3034,13 @@ a:hover { color: var(--c-link-hover); }
 
 /* ── 17. RESPONSIVE ────────────────────────────────────────────── */
 /* 三欄式工作區（nav-col／chat-col／canvas-col）僅限桌面寬度；手機或窄視窗
-   （≤900px）改回上下堆疊，且各欄不再各自獨立捲動（避免小螢幕出現多層
-   巢狀捲軸，體驗更差），改用頁面本身捲動。桌面版收合成 icon bar、手機版
-   漢堡抽屜留給 Phase 8-E 一起做 */
+   （≤900px）chat-col／canvas-col 改回上下堆疊，不再各自獨立捲動（避免
+   小螢幕出現多層巢狀捲軸），改用頁面本身捲動。nav-col 這裡刻意不列
+   進來：Phase 8-E 把它改成手機 off-canvas 抽屜（position:fixed，見
+   「5e. NAV-COL 收合／手機漢堡抽屜」區塊），跟著上下堆疊會跟抽屜的
+   fixed 定位互相打架。 */
 @media (max-width: 900px) {
     .main-layout-row { flex-direction: column !important; }
-    .main-layout-row .nav-col,
     .main-layout-row .chat-col,
     .main-layout-row .canvas-col {
         width: 100% !important;
@@ -3066,15 +3207,17 @@ _APP_HEAD_SCRIPT = """
             }
             document.addEventListener('click', function (e) {
                 if (e.target.closest('#nav_top_btn')) {
+                    closeMobileDrawerIfOpen();
                     var scrollBox = document.querySelector('.canvas-scroll');
                     if (scrollBox) scrollBox.scrollTo({ top: 0, behavior: 'smooth' });
                     return;
                 }
-                if (e.target.closest('#nav_idx_btn')) { scrollToId('canvas_idx'); return; }
-                if (e.target.closest('#nav_report_btn')) { scrollToId('canvas_report'); return; }
-                if (e.target.closest('#nav_stat_accordion .label-wrap')) { scrollToId('canvas_stat'); return; }
+                if (e.target.closest('#nav_idx_btn')) { closeMobileDrawerIfOpen(); scrollToId('canvas_idx'); return; }
+                if (e.target.closest('#nav_report_btn')) { closeMobileDrawerIfOpen(); scrollToId('canvas_report'); return; }
+                if (e.target.closest('#nav_stat_accordion .label-wrap')) { closeMobileDrawerIfOpen(); scrollToId('canvas_stat'); return; }
                 for (var i = 0; i < 4; i++) {
                     if (e.target.closest('#nav_stat_sub_' + i)) {
+                        closeMobileDrawerIfOpen();
                         scrollToId('canvas_stat');
                         /* 注意：這版 Gradio 的巢狀分頁 DOM 結構是
                            .tabs > .tab-wrapper > .tab-container（兩個，
@@ -3096,6 +3239,87 @@ _APP_HEAD_SCRIPT = """
         }
         bindResultNav();
 
+        /* Phase 8-E：桌面收合 icon bar／手機漢堡抽屜。跟 bindResultNav()
+           同一套「事件代理綁在 document」手法，理由相同——nav-col 建構時
+           在 visible=False 的 workspace_row 裡，情境選定前不存在，不能用
+           setTimeout 抓固定時間點的元素。 */
+        function setNavCollapsed(collapsed) {
+            var navCol = document.querySelector('.nav-col');
+            if (!navCol) return;
+            navCol.classList.toggle('collapsed', collapsed);
+            var toggleBtn = document.getElementById('nav_collapse_toggle');
+            if (toggleBtn) {
+                toggleBtn.setAttribute('aria-label', collapsed ? '展開導覽列' : '收合導覽列');
+                toggleBtn.setAttribute('aria-expanded', String(!collapsed));
+            }
+            /* 收合後按鈕文字用 font-size:0 隱藏（見 CSS），accessible name
+               會跟著消失，改用 aria-label 補回原始文字，展開時移除即可
+               讓瀏覽器繼續用按鈕原生文字內容當 accessible name。 */
+            ['reset_btn', 'nav_top_btn', 'nav_idx_btn', 'nav_report_btn'].forEach(function (id) {
+                /* elem_id 在 gr.Button 上這版 Gradio 是直接寫在 <button>
+                   標籤本身，不是外層 wrapper div（跟 result_nav_col 那組
+                   純 gr.HTML() 按鈕、或 nav_top_btn 用 elem_id 做 CSS
+                   選擇器點擊代理時假設的「wrapper 帶 id」不是同一種
+                   結構）——用 devtools 量過 outerHTML 才發現，兩者都要
+                   兼容。 */
+                var el = document.getElementById(id);
+                var btn = el && (el.tagName === 'BUTTON' ? el : el.querySelector('button'));
+                if (!btn) return;
+                if (collapsed) {
+                    if (!btn.dataset.navLabel) btn.dataset.navLabel = btn.textContent.trim();
+                    btn.setAttribute('aria-label', btn.dataset.navLabel);
+                } else {
+                    btn.removeAttribute('aria-label');
+                }
+            });
+            try { localStorage.setItem('spectra_nav_collapsed', collapsed ? '1' : '0'); } catch (err) {}
+        }
+        function setMobileDrawer(open) {
+            var navCol = document.querySelector('.nav-col');
+            var backdrop = document.getElementById('nav_backdrop');
+            var toggle = document.getElementById('mobile_nav_toggle');
+            if (navCol) navCol.classList.toggle('mobile-open', open);
+            if (backdrop) backdrop.classList.toggle('visible', open);
+            if (toggle) toggle.setAttribute('aria-expanded', String(open));
+        }
+        function closeMobileDrawerIfOpen() {
+            var navCol = document.querySelector('.nav-col');
+            if (navCol && navCol.classList.contains('mobile-open')) setMobileDrawer(false);
+        }
+        function bindNavControls() {
+            if (window._navControlsBound) return;
+            window._navControlsBound = true;
+            document.addEventListener('click', function (e) {
+                if (e.target.closest('#nav_collapse_toggle')) {
+                    var navCol = document.querySelector('.nav-col');
+                    setNavCollapsed(!(navCol && navCol.classList.contains('collapsed')));
+                    return;
+                }
+                if (e.target.closest('#mobile_nav_toggle')) {
+                    var navColEl = document.querySelector('.nav-col');
+                    setMobileDrawer(!(navColEl && navColEl.classList.contains('mobile-open')));
+                    return;
+                }
+                if (e.target.closest('#nav_drawer_close') || e.target.closest('#nav_backdrop')) {
+                    setMobileDrawer(false);
+                    return;
+                }
+                if (e.target.closest('#reset_btn')) {
+                    /* 收合狀態下點重置，先展開 nav-col 再讓 Gradio 原生
+                       .click() 觸發確認彈窗，避免彈窗擠在 60px 窄欄裡；
+                       這裡不 preventDefault/stopPropagation，事件照常
+                       冒泡給 Gradio。 */
+                    var navCol2 = document.querySelector('.nav-col');
+                    if (navCol2 && navCol2.classList.contains('collapsed')) setNavCollapsed(false);
+                    closeMobileDrawerIfOpen();
+                }
+            });
+            document.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape') closeMobileDrawerIfOpen();
+            });
+        }
+        bindNavControls();
+
         /* 持續監聽 DOM 變化（每次訊息更新後重設） */
         var mo = new MutationObserver(function(mutations) {
             var needsFix = mutations.some(function(m) {
@@ -3141,9 +3365,30 @@ _APP_HEAD_SCRIPT = """
            （見陷阱：內部捲動 + 頁面捲動疊在一起看起來像兩條捲軸），所以不再
            需要 el.scrollTop 這種內部捲到底部的邏輯，避免又跟使用者手動捲動
            搶主導權（同樣的教訓見對話視窗捲不到底那次的修正）。 */
+        /* Phase 8-E：mobile_nav_toggle（手機漢堡鈕）是放在 workspace_row
+           外層、頁面一開始就存在的元件，但它只有在 nav-col 真正掛載
+           （情境已選定）時才該顯示；同理，桌面收合狀態要在 nav-col 剛
+           掛載那一刻套用 localStorage 記住的值，早一步做（例如 DOMContentLoaded
+           當下）nav-col 根本還不存在，套不上。都改成搭這裡既有的
+           setInterval 一起輪詢，不額外開新計時器。 */
+        function _syncMobileHamburger() {
+            var hamburger = document.getElementById('mobile_nav_toggle');
+            if (!hamburger) return;
+            hamburger.style.display = document.querySelector('.nav-col') ? '' : 'none';
+        }
+        function _initNavCollapseIfNeeded() {
+            var navCol = document.querySelector('.nav-col');
+            if (!navCol || navCol.dataset.navInit) return;
+            navCol.dataset.navInit = '1';
+            var saved;
+            try { saved = localStorage.getItem('spectra_nav_collapsed'); } catch (err) { saved = null; }
+            if (saved === '1') setNavCollapsed(true);
+        }
         setInterval(function () {
             _watchZone('upload_zone');
             _watchZone('metadata_zone');
+            _syncMobileHamburger();
+            _initNavCollapseIfNeeded();
         }, 400);
     }
     if (document.readyState === 'loading') {
@@ -3234,11 +3479,41 @@ def create_app():
             sc_btn_4 = gr.Button("4　不同時期重譯本的歷時比較", variant="secondary",
                                  elem_id="sc_btn_4", elem_classes=["sc-bridge-btn"])
 
+        # Phase 8-E：手機漢堡開關＋抽屜背景遮罩。跟 sc_btn_1..4 同一類坑：
+        # 建構時 visible=False 的容器整段不掛載進 DOM，而這兩個元件要在
+        # nav-col（在 workspace_row 裡，情境選定前不存在）尚未掛載前就能
+        # 被點到，所以放在最外層、一開始就 visible=True 的位置；CSS 預設
+        # display:none，只在手機寬度且 workspace 啟用時由 JS 顯示（見
+        # _APP_HEAD_SCRIPT 的 _syncMobileHamburger()），桌面寬度／首頁
+        # 狀態下完全不佔版面也不可點。
+        mobile_nav_toggle_html = gr.HTML(
+            f'<button type="button" id="mobile_nav_toggle" class="mobile-nav-toggle" '
+            f'aria-label="開啟導覽選單" aria-expanded="false">{_icon("bars-3", 22)}</button>'
+        )
+        nav_backdrop_html = gr.HTML('<div id="nav_backdrop" class="nav-backdrop"></div>')
+
         # Phase 8-B：三欄式工作區——nav-col（窄，導覽/重置）＋chat-col
         # （對話視窗＋輸入框，獨立捲動）＋canvas-col（步驟列＋上傳/表單/
         # 執行紀錄，獨立捲動）。手機寬度見 CSS 的 media query 改上下堆疊。
         with gr.Row(elem_classes=["main-layout-row"], visible=False) as workspace_row:
             with gr.Column(scale=2, min_width=200, elem_classes=["nav-col"]) as nav_col:
+                # Phase 8-E：收合／抽屜控制列。兩顆按鈕互斥顯示（CSS
+                # media query 切換，見 5e 區塊）：桌面寬度顯示收合鈕
+                # （nav_collapse_toggle，縮成 icon bar）；手機寬度顯示
+                # 關閉鈕（nav_drawer_close，收起抽屜）。純畫面操作，
+                # 不���動任何後端狀態，沿用 result_nav_col 同一套「事件
+                # 代理綁在 document」手法（見 _APP_HEAD_SCRIPT）。
+                gr.HTML(
+                    '<div class="nav-collapse-row">'
+                    f'<button type="button" id="nav_collapse_toggle" class="nav-collapse-toggle" '
+                    f'aria-label="收合導覽列" aria-expanded="true">{_icon("chevron-double-left", 18)}</button>'
+                    '</div>'
+                    '<div class="nav-drawer-close-row">'
+                    f'<button type="button" id="nav_drawer_close" class="nav-drawer-close" '
+                    f'aria-label="關閉導覽選單">{_icon("x", 18)}</button>'
+                    '</div>'
+                )
+
                 # 研究情境是封閉式的固定四選一，改用可點擊按鈕取代打字輸入
                 # 數字再解析，選定後即隱藏，對話視窗回歸純輸出角色
                 # Phase 8：情境選擇按鈕已搬到 homepage_col（見上方，理由是
@@ -3252,7 +3527,10 @@ def create_app():
                 # 「開始新分析」與其確認彈窗：換情境／重新開始都走這一套共用
                 # 機制。情境是封閉式按鈕選擇，不透過對話框打字，所以「換
                 # 情境」也統一走這顆按鈕，不恢復文字解析路徑。
-                reset_btn = gr.Button("🆕 開始新分析", elem_classes=["reset-btn"], variant="secondary")
+                reset_btn = gr.Button(
+                    "開始新分析", icon=str(BASE_DIR / "assets" / "icons" / "plus.svg"),
+                    elem_id="reset_btn", elem_classes=["reset-btn"], variant="secondary",
+                )
                 with gr.Column(visible=False, elem_classes=["reset-confirm"]) as reset_confirm_row:
                     gr.Markdown("確定要開始新分析嗎？目前進度將會遺失。")
                     with gr.Row(elem_classes=["upload-actions"]):
@@ -3268,10 +3546,14 @@ def create_app():
                 # 下一輪視覺打磨（Heroicons 圖示）一起補，這次先求導覽功能
                 # 正確可用。
                 with gr.Column(visible=False, elem_id="result_nav_col", elem_classes=["result-nav"]) as result_nav_col:
-                    nav_top_btn = gr.Button("回到上傳／表單", elem_id="nav_top_btn",
-                                             elem_classes=["result-nav-btn"], variant="secondary")
-                    nav_idx_btn = gr.Button("語言指標分析", elem_id="nav_idx_btn",
-                                             elem_classes=["result-nav-btn"], variant="secondary")
+                    nav_top_btn = gr.Button(
+                        "回到上傳／表單", icon=str(BASE_DIR / "assets" / "icons" / "home.svg"),
+                        elem_id="nav_top_btn", elem_classes=["result-nav-btn"], variant="secondary",
+                    )
+                    nav_idx_btn = gr.Button(
+                        "語言指標分析", icon=str(BASE_DIR / "assets" / "icons" / "trending-up.svg"),
+                        elem_id="nav_idx_btn", elem_classes=["result-nav-btn"], variant="secondary",
+                    )
                     with gr.Accordion("統計比較分析", open=False, elem_id="nav_stat_accordion",
                                        elem_classes=["result-nav-accordion"]):
                         nav_stat_sub_0 = gr.Button("敘述統計", elem_id="nav_stat_sub_0",
@@ -3282,8 +3564,10 @@ def create_app():
                                                     elem_classes=["result-nav-subbtn"], variant="secondary")
                         nav_stat_sub_3 = gr.Button("非監督式學習", elem_id="nav_stat_sub_3",
                                                     elem_classes=["result-nav-subbtn"], variant="secondary")
-                    nav_report_btn = gr.Button("LLM輔助分析", elem_id="nav_report_btn",
-                                                elem_classes=["result-nav-btn"], variant="secondary")
+                    nav_report_btn = gr.Button(
+                        "LLM輔助分析", icon=str(BASE_DIR / "assets" / "icons" / "document.svg"),
+                        elem_id="nav_report_btn", elem_classes=["result-nav-btn"], variant="secondary",
+                    )
 
             with gr.Column(scale=4, min_width=300, elem_classes=["chat-col"]):
                 chatbot = gr.Chatbot(