線條柔化：結構線降到 2.25:1、氣泡邊框改細線與深色對齊

千卉看實機截圖後回饋兩點：①淺色氣泡的邊框要跟深色一樣淡、兩個模式一致
②整體線條對比太高、看起來醜，要更柔和。

- --c-border-strong（淺色）#7c8798 → #a3aebd：對白從 3.64:1 降到 2.25:1。
這是刻意離開 WCAG 1.4.11 的 3:1 門檻的視覺決定，但仍是改版前 1.2:1 的
近兩倍，業主原本回報的「淺色看不清楚區塊」在這個亮度差已解決；文字對比
不受影響，全站文字維持 AA。日後若要嚴格達標，把這個 token 調回 #7c8798
即可，19 處線條會一起跟上。
- 對話氣泡邊框從結構線降到細線 --c-divider：淺色 #b6c0cd 對氣泡底 1.64:1、
對欄底 1.76:1，深色 rgba(148,163,184,.28) 疊 #0d1526 是 1.67:1，兩個模式
的邊框亮度差幾乎相同——「深淺一致」是量出來的，不是各挑一個順眼的值。
- --c-input-border（淺色）同步柔化成 #a3aebd。
- 使用者訊息氣泡維持與 AI 同款（業主確認先這樣，只靠左右對齊區分）。

docs/design.md 同步三處：token 表數值、結構線離開 3:1 的取捨說明、氣泡
邊框改用細線的量測依據。

驗證：重啟後實測淺色氣泡邊框 1.64/1.76:1、結構線 2.15-2.25:1，深色數值
與改動前完全相同；情境 1 走到語料說明表單、深淺兩色截圖確認，console 僅
3 筆既有外部資源錯誤。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MQuAXWC1hCsiT48TXftPc7

assets/app.css

@@ -22,13 +22,22 @@
        跟水平分界線在淺色模式下等於看不見（深色當初已針對 .app-header／欄邊框／
        標題底線個別補過 rgba(148,163,184,.28)，淺色從沒補）。這裡改成兩級線條，
        之後新增元件挑其中一級，不要再直接用 --c-border 畫可見邊界：
-         --c-border-strong 結構線（區塊外框、欄位分隔、水平分界）→ 淺色 3.2–3.6:1
-         --c-divider       內部細線（表格資料列線這種密集重複的線）
+         --c-border-strong 結構線（區塊外框、欄位分隔、水平分界）
+         --c-divider       細線（表格資料列線、對話氣泡邊框）
        深色值直接沿用原本散在各選擇器的硬寫值，深色外觀零改變。
+       2026-08-12 二修（千卉看實機截圖後回饋「線條對比好高、蠻醜」）：
+       結構線從 #7c8798（對白 3.64:1）柔化到 #a3aebd（2.25:1）。取捨要
+       講明白——2.25:1 沒有達到 WCAG 1.4.11 對「UI 元件邊界」的 3:1 門檻，
+       是刻意的視覺決定；但比改版前的 1.2:1 高近一倍，業主回報的「看不清楚
+       區塊」在這個亮度差已經解決。文字對比不受這條影響，仍全數通過 AA。
+       細線 --c-divider 淺色 #b6c0cd 對氣泡底 1.64:1、對欄底 1.76:1，
+       跟深色 rgba(148,163,184,.28) 疊 #0d1526 算出來的 1.67:1 幾乎相同，
+       這就是「深淺兩個模式的氣泡邊框看起來一樣淡」的依據（用量測對齊，
+       不是各自挑一個看起來順眼的值）。
        --c-border 本身維持原值不動：它還餵給 --block-border-color／
        --border-color-primary 這兩個 Gradio 原生元件用的變數，動了會牽連
        一整批沒盤點過的元件。 */
-    --c-border-strong:   #7c8798;
+    --c-border-strong:   #a3aebd;
     --c-divider:         #b6c0cd;
     /* 表格表頭底色與對話氣泡底色改成獨立 token（原本借用 --c-surface2／
        --c-surface）：淺色時兩者疊在自己的鄰接底色上都只有 1.03–1.07:1，
@@ -59,7 +68,7 @@
     --c-input-bg:        #ffffff;
     /* 2026-08-12：原本 rgba(2,132,199,.22) 疊白只有約 1.3:1，輸入框邊界同樣
        受 1.4.11 的 3:1 規範；語料 metadata 表單「欄位看不清楚」有一半是這條。 */
-    --c-input-border:    #7c8798;
+    --c-input-border:    #a3aebd;
     --c-link-hover:      #075985;
     --c-scrollbar:       #cbd5e1;
     --c-scrollbar-hover: #94a3b8;
@@ -638,10 +647,13 @@ div[role="log"][aria-label="chatbot conversation"],
        --c-bg #f8fafc 上只有 1.07:1，等於沒有邊界；深色那一階（#0d1526 疊
        #020617）本來就夠，所以只動淺色值——改用 --c-bubble-bg（淺色 #eef2f7、
        深色維持 #0d1526）。填色差在近白區間拉不到 3:1（那要暗到不像對話框），
-       真正扛對比的是下面這條 --c-border-strong 邊框（對氣泡底 3.23:1、
-       對欄底 3.47:1），兩者一起才看得清楚。 */
+       填色之外還要一條邊框才看得出範圍。
+       2026-08-12 二修（千卉：淺色氣泡也要淡邊框、深淺一致）：邊框從結構線
+       降到細線 --c-divider。淺色 #b6c0cd 對氣泡底 1.64:1、對欄底 1.76:1，
+       深色 rgba(148,163,184,.28) 疊 #0d1526 是 1.67:1，兩個模式的邊框
+       亮度差幾乎相同，看起來才是同一種「淡邊框」。 */
     background: var(--c-bubble-bg) !important;
-    border: 1px solid var(--c-border-strong) !important;
+    border: 1px solid var(--c-divider) !important;
     border-radius: 10px !important;
 }
 /* ── AI 頭像（2026-08-12，業主要求）─────────────────────────────

docs/design.md

@@ -14,11 +14,11 @@ colors:
     surface3-border: "#e2e8f0"
     border: "rgba(2,132,199,.16)"
     border-hover: "rgba(2,132,199,.35)"
-    border-strong: "#7c8798"
+    border-strong: "#a3aebd"
     divider: "#b6c0cd"
     thead-bg: "#e2e8f0"
     bubble-bg: "#eef2f7"
-    input-border: "#7c8798"
+    input-border: "#a3aebd"
     accent: "#0284c7"
     accent-strong: "#0369a1"
     accent2: "#4f46e5"
@@ -149,18 +149,24 @@ WCAG 1.4.11 對「UI 元件與圖形物件的邊界」要求 3:1，這條在淺
 
 | Token | 用途 | 淺色 | 深色 |
 | :--- | :--- | :--- | :--- |
-| `--c-border-strong` | 結構線：區塊外框、欄位分隔、頂部列底線、標題底線、`hr`、表格外框與表頭分界 | `#7c8798`（對白 3.64:1、對 `#f8fafc` 3.47:1、對氣泡底 3.23:1） | `rgba(148,163,184,.28)` |
-| `--c-divider` | 內部細線：表格資料列之間這種密集重複的線 | `#b6c0cd` | `rgba(148,163,184,.18)` |
+| `--c-border-strong` | 結構線：區塊外框、欄位分隔、頂部列底線、標題底線、`hr`、表格外框與表頭分界 | `#a3aebd`（對白 2.25:1） | `rgba(148,163,184,.28)` |
+| `--c-divider` | 細線：表格資料列之間這種密集重複的線、對話氣泡邊框 | `#b6c0cd`（對氣泡底 1.64:1、對欄底 1.76:1） | `rgba(148,163,184,.18)` |
 
 密集重複的線刻意不拉到 3:1：整張資料表如果每一條線都是結構線強度，會變成網格紙、反而更難讀，1.4.11 的門檻也只針對「識別元件所必需」的邊界。
 
+**結構線 2.25:1 是刻意離開 3:1 門檻的決定**：第一版用 `#7c8798`（3.64:1，完全符合 1.4.11），實機檢視後判斷線條太搶眼、視覺變吵，柔化到 2.25:1。這個值仍是改版前 1.2:1 的近兩倍，業主回報的「淺色看不清楚區塊」在這個亮度差已解決。文字對比不受這條影響，全站文字仍通過 AA（淺色 6.15–14:1）。日後若無障礙稽核要求嚴格達標，把這個 token 調回 `#7c8798` 即可，全站 19 處線條會一起跟上，不用逐處改。
+
 `--c-border` 本身維持原值，因為它同時餵給 `--block-border-color` 與 `--border-color-primary` 兩個 Gradio 原生元件變數，改動會牽連一整批沒盤點過的元件。
 
 同批把 `--c-input-border`（淺色）從 `rgba(2,132,199,.22)`（約 1.3:1）改成 `#7c8798`：輸入框邊界同樣受 1.4.11 規範，這是語料 metadata 表單「欄位看不清楚」的另一半原因。
 
 ### 對話氣泡（2026-08-12 更新）
 
-淺色氣泡原本是白底無框，疊在對話欄底 `#f8fafc` 上只有 1.07:1。定案改成 **填色＋邊框**：底色 `--c-bubble-bg`（淺色 `#eef2f7`、深色維持 `#0d1526`），外加 1px `--c-border-strong`。近白區間的填色差本來就拉不到 3:1（要拉到就得暗成不像對話框），真正扛對比的是邊框，兩者一起看才清楚。可見邊界畫在內層 `.md`，不是外層 `.message`（量測時要認這層）。
+淺色氣泡原本是白底無框，疊在對話欄底 `#f8fafc` 上只有 1.07:1。定案改成 **填色＋淡邊框**：底色 `--c-bubble-bg`（淺色 `#eef2f7`、深色維持 `#0d1526`），外加 1px `--c-divider`。
+
+邊框用細線而非結構線，是為了讓兩個主題的氣泡看起來一樣淡：淺色 `#b6c0cd` 對氣泡底 1.64:1、對欄底 1.76:1，深色 `rgba(148,163,184,.28)` 疊 `#0d1526` 算出來是 1.67:1。**「深淺一致」是用量測對齊的，不是兩邊各挑一個看起來順眼的值。**
+
+可見邊界畫在內層 `.md`，不是外層 `.message`（量測時要認這層）。使用者訊息與 AI 訊息共用同一層，目前兩側同款氣泡、只靠左右對齊區分，是 2026-08-12 業主確認過的現況。
 
 ### 漸層文字與漸層背景的已知踩坑