UI改版 Phase 1：字級統一、Metadata標題拿掉跳號、footer精簡、對話框視覺調整

- 全站字級收斂為 --font-size-base token；Metadata表單標題拿掉數字編號；
footer 移除 Gradio 品牌連結；Metadata略過文案定稿
- 對話氣泡改回貼合文字內容、加大四邊留白、移除色條邊線改用淺灰底色，
並修正 Gradio Chatbot 元件內建的 message-row margin/max-width 限制，
讓 AI／使用者訊息都能貼近對話視窗邊緣

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.gitignore

@@ -23,6 +23,7 @@ LLM_Analysis-*.txt
 
 # Pics / design assets
 00pic/
+docs/design/
 
 # Spec workflow
 .spec-workflow/

app_agent.py

@@ -1683,6 +1683,8 @@ _CUSTOM_CSS = """
     --c-scrollbar:       #cbd5e1;
     --c-scrollbar-hover: #94a3b8;
 
+    --font-size-base: 0.875rem;
+
     --body-background-fill:      var(--c-bg) !important;
     --background-fill-primary:   var(--c-surface) !important;
     --background-fill-secondary: #eef2f7 !important;
@@ -2024,15 +2026,27 @@ div[role="log"][aria-label="chatbot conversation"],
 }
 
 /* ── 通用訊息氣泡 ── */
-/* 訊息改成無底色、只用左／右色條標記起訖後，不同時間產生的訊息之間如果
-   間距太小，色條會看起來像連在一起、分不出是好幾則獨立訊息還是同一則。
-   拉大訊息列間距，讓每則訊息之間有清楚的留白斷開 */
-.main-chat .message-row { margin-bottom: 1.1rem !important; }
+/* 不同時間產生的訊息之間如果間距太小，會分不出是好幾則獨立訊息還是同一則，
+   拉大訊息列間距讓每則訊息之間有清楚的留白斷開 */
+/* Gradio 預設給每個 message-row 左右各留 20px margin（原本應是保留給頭像用的
+   空間，本專案沒有用頭像），導致 AI 訊息離左邊、使用者訊息離右邊都比預期遠，
+   這裡歸零讓氣泡貼近對話視窗邊緣。另外 Gradio 還設了 max-width: calc(100% - 60px)，
+   AI 訊息貼左邊不受影響，但使用者訊息靠 margin-left:auto 貼右邊，這 60px
+   缺口會整個落在最右側，一併覆寫掉 */
+.main-chat .message-row {
+    margin-bottom: 1.1rem !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+}
 .main-chat .message-row .message {
     border-radius: 10px !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     line-height: 1.7 !important;
-    padding: .6rem .95rem !important;
+    padding: 0.75rem 1rem !important;
+    width: fit-content !important;
     max-width: 90% !important;
     transition: box-shadow .2s !important;
 }
@@ -2046,45 +2060,42 @@ div[role="log"][aria-label="chatbot conversation"],
     max-width: 100% !important;
 }
 
-/* 使用者訊息：不用底色跟橢圓外框，比照 AI 訊息只用一條色條標記起訖，
-   改在右邊、用綠色跟 AI 的左邊藍色做區分 */
+/* 使用者訊息：淺灰底色跟白色頁面背景錯開，不用外框線，靠右對齊與置左的
+   AI 訊息做區分 */
 /* Gradio 實際輸出的內層元素同時帶 user/bot 與 message 兩個 class（非巢狀父子），
    用複合選擇器只命中該元素本身，避免命中內層 panel-full-width 造成雙重框線 */
 .main-chat .message-row.user .message,
 .main-chat .message-row.user-row .user.message {
     background: transparent !important;
     border: none !important;
-    border-right: 3px solid var(--c-success) !important;
     border-radius: 0 !important;
     color: var(--c-text) !important;
     margin-left: auto !important;
     font-weight: 500 !important;
     box-shadow: none !important;
-    padding: .4rem .8rem !important;
-    width: fit-content !important;
     max-width: 80% !important;
+    text-align: right !important;
 }
 .main-chat .message-row.user,
 .main-chat .message-row.user-row { margin-bottom: 1.1rem !important; }
 
-/* AI 訊息（主對話視窗）：不用卡片框線與底色，只靠左邊色條標記訊息起訖，
-   視覺上更簡潔，融入對話視窗本身的背景 */
+/* AI 訊息（主對話視窗）：淺灰底色跟白色頁面背景錯開，不用外框線 */
 .main-chat .message-row.bot .message,
 .main-chat .message-row.bot-row .bot.message {
     background: transparent !important;
     border: none !important;
-    border-left: 3px solid var(--c-accent-strong) !important;
     border-radius: 0 !important;
     color: var(--c-text) !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     line-height: 1.7 !important;
     box-shadow: none !important;
+    text-align: left !important;
 }
 /* Gradio 產生的 <p> 段落本身有自己的 font-size（實測為固定 16px），
    不會沿用上面設在外層容器的字級，且段落間距預設高達 16px，
    視覺上偏大又有明顯空行，這裡直接命中 <p> 覆寫 */
 .main-chat .message-row .message p {
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     line-height: 1.6 !important;
     margin: 0 0 .5rem !important;
 }
@@ -2095,8 +2106,11 @@ div[role="log"][aria-label="chatbot conversation"],
    改成 block 並統一字級後，這段隱形空隙就會消失 */
 .main-chat .message-row .message .md {
     display: block !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     line-height: 1.6 !important;
+    padding: 0.9rem 1.1rem !important;
+    background: var(--c-surface2) !important;
+    border-radius: 10px !important;
 }
 .main-chat .message-row.bot .message strong,
 .main-chat .message-row.bot .message b,
@@ -2134,7 +2148,7 @@ div[role="log"][aria-label="chatbot conversation"],
 }
 #exec_log_accordion .label-wrap {
     color: var(--c-text-muted) !important;
-    font-size: 0.78rem !important;
+    font-size: var(--font-size-base) !important;
 }
 
 /* 執行視窗（簡易訊息顯示欄，非對話氣泡） */
@@ -2150,7 +2164,7 @@ div[role="log"][aria-label="chatbot conversation"],
     margin-top: 0 !important;
 }
 .exec-log p {
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     line-height: 1.5 !important;
     margin: 0 0 .3rem !important;
     padding: 0 !important;
@@ -2164,13 +2178,13 @@ div[role="log"][aria-label="chatbot conversation"],
     background: none !important;
     color: var(--c-accent-strong) !important;
     padding: 0 .15rem 0 0 !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
 }
 /* 跟對話視窗一樣：包住段落的 <span class="md"> 預設 inline 卻裝 block 的
    <p>，會在最前面產生依自己字級算出的隱形空隙，這裡一併改成 block 並統一字級 */
 .exec-log .md {
     display: block !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
 }
 
 /* ── 5b. COLUMN LAYOUT ─────────────────────────────────────────── */
@@ -2230,15 +2244,15 @@ div[role="log"][aria-label="chatbot conversation"],
     border-bottom: 1px solid rgba(var(--c-accent-rgb),.16) !important;
     padding: 0 0 .9rem !important;
     margin-bottom: .9rem !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
 }
-.upload-hint p, .upload-hint li { font-size: 0.80rem !important; color: var(--c-text-soft) !important; }
+.upload-hint p, .upload-hint li { font-size: var(--font-size-base) !important; color: var(--c-text-soft) !important; }
 .upload-hint strong { color: var(--c-accent-strong) !important; }
 /* 同陷阱 13 第 3 點：<span class="md"> 預設 inline 卻裝 block 的 <p>，
    會在最前面產生依自己字級算出的隱形空隙，這裡一併修正 */
 .upload-hint .md {
     display: block !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
 }
 .upload-actions {
     margin-top: 1rem !important;
@@ -2303,7 +2317,7 @@ button.primary, button[data-testid="submit"] {
     border: none !important;
     border-radius: 9px !important;
     font-weight: 700 !important;
-    font-size: 0.84rem !important;
+    font-size: var(--font-size-base) !important;
     color: #fff !important;
     box-shadow: 0 2px 12px rgba(2,132,199,.28) !important;
     transition: transform .18s ease, box-shadow .18s ease, opacity .18s !important;
@@ -2319,7 +2333,7 @@ button.secondary {
     color: var(--c-accent-strong) !important;
     border-radius: 9px !important;
     font-weight: 600 !important;
-    font-size: 0.84rem !important;
+    font-size: var(--font-size-base) !important;
     cursor: pointer !important;
     transition: background .18s ease, border-color .18s ease !important;
 }
@@ -2365,7 +2379,7 @@ table thead th {
 table tbody td {
     background: var(--c-surface) !important;
     color: var(--c-text-soft) !important;
-    font-size: 0.80rem !important;
+    font-size: var(--font-size-base) !important;
     border-color: rgba(var(--c-accent-rgb),.06) !important;
     font-family: 'JetBrains Mono', monospace !important;
     padding: 7px 12px !important;
@@ -2512,7 +2526,7 @@ a:hover { color: var(--c-link-hover); }
 }
 .legend-item {
     display: inline-flex; align-items: center; gap: .5rem;
-    font-size: 0.78rem;
+    font-size: var(--font-size-base);
     color: var(--c-text-subtle);
 }
 .legend-item .dot {
@@ -2773,7 +2787,7 @@ def create_app():
                 with gr.Column(visible=False, elem_id="metadata_zone", elem_classes=["metadata-zone"]) as metadata_row:
                     gr.Markdown("### 📑 語料 Metadata 說明\n請於正式分析前說明語料來源、範圍與比較結構，將寫入研究報告。")
 
-                    gr.Markdown("**一、原文資訊**")
+                    gr.Markdown("**原文資訊**")
                     with gr.Row():
                         meta_title   = gr.Textbox(label="原文標題", scale=2)
                         meta_author  = gr.Textbox(label="作者", scale=2)
@@ -2784,7 +2798,7 @@ def create_app():
 
                     # 比較結構（僅情境 3、4 需要；情境 1、2 固定二群）
                     with gr.Group(visible=False) as meta_compare_group:
-                        gr.Markdown("**二、比較結構**")
+                        gr.Markdown("**比較結構**")
                         with gr.Row():
                             meta_ngroups = gr.Radio(
                                 ["二群", "三群"], label="群組數量", value="二群", scale=1,
@@ -2794,7 +2808,7 @@ def create_app():
                                 value="群組間比較", scale=1,
                             )
 
-                    gr.Markdown("**三、群組層資訊**（共通屬性）")
+                    gr.Markdown("**群組層資訊**（共通屬性）")
                     meta_group_df = gr.Dataframe(
                         headers=["群組標籤", "翻譯類型", "翻譯方向", "譯者背景", "目標讀者"],
                         datatype=["str"] * 5,
@@ -2804,7 +2818,7 @@ def create_app():
                         label="群組層",
                     )
 
-                    gr.Markdown("**四、個體層資訊**（每個譯本／檔案）")
+                    gr.Markdown("**個體層資訊**（每個譯本／檔案）")
                     meta_indiv_df = gr.Dataframe(
                         headers=["檔案", "譯者／系統名稱", "出版年", "譯者母語", "後編輯程度", "重譯序位"],
                         datatype=["str"] * 6,
@@ -2814,6 +2828,10 @@ def create_app():
                         label="個體層",
                     )
 
+                    gr.Markdown(
+                        "以下資訊會寫入報告開頭，您也可以先略過（略過後這次分析將不會用到這些補充說明）",
+                        elem_classes=["upload-hint"],
+                    )
                     with gr.Row(elem_classes=["upload-actions"]):
                         meta_cancel_btn  = gr.Button("略過", scale=1, variant="secondary")
                         meta_confirm_btn = gr.Button("確認並開始分析", scale=2, variant="primary")
@@ -3245,24 +3263,24 @@ def create_app():
                               ngroups, method, group_df, indiv_df):
             sc = state.get("scenario", "")
             L = ["## 語料 Metadata", "",
-                 "### 一、原文資訊",
+                 "### 原文資訊",
                  f"- 原文標題：{title or '（未填）'}",
                  f"- 作者：{author or '（未填）'}",
                  f"- 語言：{lang or '（未填）'}",
                  f"- 出版年：{pubyear or '（未填）'}",
                  f"- 版本：{version or '（未填）'}", ""]
             if sc in ("3", "4"):
-                L += ["### 二、比較結構",
+                L += ["### 比較結構",
                       f"- 群組數量：{ngroups}",
                       f"- 比較方式：{method}", ""]
             gh = ["群組標籤", "翻譯類型", "翻譯方向", "譯者背景", "目標讀者"]
-            L += ["### 三、群組層資訊"]
+            L += ["### 群組層資訊"]
             for r in _df_rows(group_df):
                 if not any(str(c).strip() for c in r):
                     continue
                 L.append("- " + "；".join(f"{h}：{str(v).strip()}" for h, v in zip(gh, r) if str(v).strip()))
             ih = ["檔案", "譯者／系統名稱", "出版年", "譯者母語", "後編輯程度", "重譯序位"]
-            L += ["", "### 四、個體層資訊"]
+            L += ["", "### 個體層資訊"]
             for r in _df_rows(indiv_df):
                 if not any(str(c).strip() for c in r):
                     continue
@@ -3408,4 +3426,5 @@ if __name__ == "__main__":
         inbrowser=False,
         allowed_paths=[str(SESSIONS_DIR)],
         head=_APP_HEAD,
+        footer_links=["api", "settings"],
     )