/* ==========================================================================
   AequiLex Message Formatter Styles (message-formatter.css)
   專門處理 AI 回覆的 Markdown 渲染、表格、引用徽章、翻譯按鈕及 Mermaid 圖表
   ========================================================================== */

/* =========================================
   1. Markdown 基礎排版 (Typography)
   ========================================= */
/* H1 主標題：最大、主色、實線底線 */
.message-content h1 {
    font-size: 1.5em;
    font-weight: 700; 
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 8px;
    margin-top: 32px;
    margin-bottom: 16px;
}

/* H2 中標題：次要顏色、虛線底線 */
.message-content h2 {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--primary-light);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 6px;
    margin-top: 24px;
    margin-bottom: 12px;
}

/* H3 小標題：加條左邊飾線，似小段落重點 */
.message-content h3 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--accent);
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--border-sub); /* 👈 加上呢行，視覺層次即刻出晒嚟 */
}

/* H5 系統聲明專用：灰色、斜體、縮細 */
.message-content h5 {
    font-size: 0.9em;
    font-weight: normal;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border-left: 3px solid var(--border-sub);
}
[data-theme="dark"] .message-content h5 { background: rgba(255, 255, 255, 0.02); }
.message-content p { margin-bottom: 16px; font-size: 0.9em;}
.message-content ul, 
.message-content ol { margin-bottom: 16px; padding-left: 24px; }
.message-content li { margin-bottom: 6px; }

/* 列表圓點跟隨主色調 */
.message-content li::marker {
    color: var(--primary); 
    font-weight: 600; 
    font-size: 1em;
}
[data-theme="dark"] .message-content li::marker { color: var(--primary-light); }

/* 粗體字體 (案件名稱高亮) */
.legal-answer-body strong,
.message-content strong,
.message-content b {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important; 
    background: transparent !important; 
    padding: 0 3px; 
    border-radius: 3px; 
    letter-spacing: 0.3px;
}
[data-theme="dark"] .legal-answer-body strong,
[data-theme="dark"] .message-content strong,
[data-theme="dark"] .message-content b { color: var(--accent) !important; }

.legal-answer-body em { color: var(--text-primary); font-style: italic; }

/* 代碼塊 */
.message-content pre {
    background: #1e1e1e; color: #d4d4d4; padding: 16px;
    border-radius: 8px; overflow-x: auto; margin: 16px 0;
    font-family: 'Fira Code', monospace; font-size: 0.9em;
    border: 1px solid rgba(255,255,255,0.1);
}
.message-content code {
    background: var(--bg-hover); padding: 2px 6px;
    border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 0.9em;
    color: var(--primary); border: 1px solid rgba(45, 95, 63, 0.2);
}
[data-theme="dark"] .message-content code {
    background: var(--bg-hover); color: var(--accent);
    border-color: rgba(52, 211, 153, 0.3);
}
.message-content pre code { background: transparent; padding: 0; color: inherit; border-radius: 0; border: none; }

/* 引用塊 (Blockquote) */
.message-content blockquote {
    border-left: 4px solid var(--accent); margin: 16px 0; padding: 10px 20px;
    background-color: var(--bg-hover); color: var(--text-secondary);
    border-radius: 0 8px 8px 0;
}

/* =========================================
   ★ 案例卡片框樣式 (Legal Case Card)
   ========================================= */
.message-content .legal-case-card {
    background-color: rgba(0, 0, 0, 0.02); /* 極淡嘅灰色底色，增加層次感 */
    border: 1px solid var(--border-sub, rgba(0,0,0,0.08)); /* 淡淡嘅框線 */
    border-radius: 3px;
    padding: 20px; /* 框內預留空間 */
    margin-bottom: 25px; /* 卡片同卡片之間嘅距離 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔和嘅陰影，令卡片浮出嚟 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 增加 Hover 效果 */
}

/* 深色模式 (Dark Mode) 適配 */
[data-theme="dark"] .message-content .legal-case-card {
    background-color: rgba(255, 255, 255, 0.03); 
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 微調卡片內嘅標題與列表 */
.legal-case-card h3 {
    margin-top: 0 !important; /* 清除標題上方嘅多餘空間，令其 flush with top */
    padding-left: 0 !important; /* 卡片內標題不需要左飾線 */
    border-left: none !important;
    /* 🚨 終極微調：將原本巨型的 H3 字體大幅縮細到只比正文大少少 */
    font-size: 1.1em; 
    font-weight: 700;
    color: var(--accent);
    line-height: 1.4;
}
.legal-case-card ul {
    margin-bottom: 0 !important; /* 清除列表下方空間 */
    margin-top: 10px; /* 標題同列表之間嘅距離 */
}
.legal-case-card li {
    font-size: 0.95em; /* 框內文字稍微細少少，更精緻 */
}

/* =========================================
   ★ 內文案例連結樣式 (之前的大Bulk藍色按鈕大縮水)
   ========================================= */
/* 定義一個 class 俾 JS 用，用普通 Linked Text 代替 bulky Button */
.message-content a.case-content-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline; /* 加上底線，確保 User 識撳 */
    text-underline-offset: 3px;
    transition: color 0.1s ease;
    white-space: nowrap; /* 禁止引用段落換行爆開 */
    margin: 0 2px;
}
.message-content a.case-content-link:hover {
    color: var(--primary-dark);
    background: rgba(45, 95, 63, 0.04); /* 加上極淡嘅 hover 底色 */
    border-radius: 4px;
}
[data-theme="dark"] .message-content a.case-content-link {
    color: var(--accent);
}
[data-theme="dark"] .message-content a.case-content-link:hover {
    background: rgba(255, 255, 255, 0.04);
}


/* =========================================
   2. 全局 Safari & Mobile 表格優化
   ========================================= */
.message-content table {
    display: block !important; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; 
    border-collapse: collapse; margin-bottom: 1.5em; border-radius: 8px;
    border: 1px solid var(--border); box-shadow: none; font-size: 0.95em;
}
.message-content th, .message-content td {
    padding: 12px 15px; min-width: 120px; border: 1px solid var(--border);
    word-break: break-word; white-space: normal; vertical-align: top;
}
.message-content th {
    background-color: var(--bg-secondary); font-weight: 600; text-align: left; white-space: nowrap;
}
[data-theme="dark"] .message-content th { background-color: #2d2d2d; }
.message-content tr:nth-of-type(even) { background-color: var(--bg-secondary); }
.message-content tr:last-of-type td { border-bottom: 2px solid var(--primary); }
.message-content table::-webkit-scrollbar { height: 6px; }
.message-content table::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; }
.message-content table::-webkit-scrollbar-track { background-color: transparent; }

/* =========================================
   3. 引用徽章樣式 (Citation Badge)
   ========================================= */
.citation-badge {
    display: inline-flex; align-items: center; background-color: var(--bg-active); 
    border: 1px solid var(--border-sub); border-radius: 6px; padding: 2px 8px; 
    color: var(--primary-light); font-weight: 600; margin: 4px 6px 4px 0;;
    text-decoration: none !important; transition: all 0.2s ease;
    cursor: pointer; vertical-align: middle; white-space: nowrap; font-size: 0.80em;
}
[data-theme="dark"] .citation-badge { color: var(--accent); }
.citation-badge:hover {
    background-color: rgba(45, 95, 63, 0.15); border-color: var(--primary-light);
    color: var(--primary); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(45, 95, 63, 0.1);
}
.citation-badge:active { transform: translateY(0); background-color: rgba(45, 95, 63, 0.25); }

/* =========================================
   4. 內文翻譯按鈕 (Inline Translation) - 完美並列版
   ========================================= */
/* 魔法 A：隱藏 Markdown 自動生成的換行符，拉近與 Badge 的距離 */
.inline-translation-container + br { 
    display: none; 
}

.inline-translation-container { 
    display: contents; /* 解除外層限制 */
}

.inline-trans-btn {
    float: right; /* 將按鈕推向最右側 */
    margin-top: 4px; /* 垂直微調，與 Badge 完美對齊 */
    margin-left: 12px;
    margin-bottom: 8px;
    
    font-size: 12px; padding: 4px 10px; border: 1px solid var(--border-sub); 
    border-radius: 4px; background: var(--bg-card); cursor: pointer; 
    display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); 
    transition: all 0.2s;
}

.inline-trans-btn:hover { 
    background: var(--bg-hover); color: var(--primary); 
}

.inline-translation-box {
    clear: both; /* 魔法 B：保證翻譯框展開時，必定跌落於所有按鈕之下，不會破壞排版 */
    display: none; 
    margin-top: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-body); 
    border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; 
    font-size: 0.9em; color: var(--text-primary); animation: fadeIn 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

/* 防止 Float 元素導致父層高度塌陷 */
.message-content blockquote::after,
.message-content p::after {
    content: "";
    display: table;
    clear: both;
}

/* ★ 確保 SVG 圖標完美置中 */
a.neutral-citation.linked-citation svg {
    vertical-align: -1.5px; /* 微調高度，確保跟 monospace 文字對齊 */
    margin-right: 4px;
}

/* =========================================
   ★ 中性案件編號 (Neutral Citation) - 全域樣式 (化妝)
   ========================================= */
.neutral-citation {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.85em; /* 收細格數 */
    font-weight: 500;
    /* 預設顏色：變成灰色muted樣，唔好搶 Case Name 鏡 */
    color: var(--text-muted); 
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-sub);
    padding: 1px 6px; /* 緊致 Padding */
    border-radius: 4px;
    margin-left: 8px; 
    letter-spacing: 0.5px;
    white-space: nowrap; /* 絕對禁止換行 */
    transition: all 0.2s ease;
}

[data-theme="dark"] .neutral-citation {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================
   ★ 可點擊的案件編號 (Linked Citation) - 交互樣式
   ========================================= */
a.neutral-citation.linked-citation {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--text-muted); /* 預設保持灰色，高貴 */
}

/* 當滑鼠移過去嗰陣，先至變色浮起，突顯連結感 */
a.neutral-citation.linked-citation:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary);
    color: var(--primary); /* Hover 時變成主色藍 */
    transform: translateY(-1.5px); /* 微調上浮高度 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] a.neutral-citation.linked-citation:hover {
    background-color: rgba(45, 95, 63, 0.25);
    border-color: var(--accent);
    color: var(--primary-light);
}

/* =========================================
   ⚖️ 權威訊號段落 (Authority Signal callout)
   ----------------------------------------
   設計前提：一份報告可以出十幾段，所以「唔嘈」比「搶眼」重要 ——
   淡底 + 左色條 + 細標籤，重複出現有節奏感而唔會蓋過正文。
   ⚠️ 顏色同 .cit-* 引稱上色一致（綠/黃/紅），兩處唔可以唔同色。
   ========================================= */
.aq-auth-note {
    position: relative;
    margin: 14px 0;
    padding: 12px 16px 12px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-sub, rgba(0,0,0,0.08));
    border-left-width: 3px;
    font-size: 0.95em;
    line-height: 1.75;
}
/* 連續兩段之間收窄，十幾段排落嚟先唔會拖到成頁都係 */
.aq-auth-note + .aq-auth-note { margin-top: 8px; }

.aq-auth-note > :first-child { margin-top: 0; }
.aq-auth-note > :last-child  { margin-bottom: 0; }

/* ---- 頂部：案名 + 兩個掣 ---- */
.aq-auth-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px dashed var(--border-sub, rgba(0,0,0,0.12));
}
.aq-auth-case {
    flex: 1; min-width: 160px;
    font-weight: 700; font-size: 0.95em; line-height: 1.4;
    color: var(--text-primary, #222);
}
.aq-auth-actions { display: flex; gap: 6px; flex-shrink: 0; }
.aq-auth-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.8em; font-weight: 600; white-space: nowrap;
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
    text-decoration: none !important;
    border: 1px solid var(--border, #ccc);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #555);
    transition: all 0.18s ease;
}
.aq-auth-btn:hover {
    border-color: var(--lex-gold, #b8860b);
    color: var(--text-primary, #222);
    transform: translateY(-1px);
}
.aq-auth-btn-primary { border-color: rgba(184,134,11,0.5); color: var(--lex-gold, #b8860b); }

/* 🎁 鎖住嘅卡：免費試看掣要顯眼（佢係第一次接觸嘅入口），升級掣要收斂
   （一份報告可以出十幾張卡，每張都嗌畀錢就變成滋擾）。 */
.aq-auth-btn-free {
    border-color: var(--lex-gold, #b8860b);
    color: var(--lex-gold, #b8860b);
    background: rgba(184,134,11,0.10);
}
.aq-auth-btn-free:hover { background: var(--lex-gold, #b8860b); color: #fff; }
[data-theme="dark"] .aq-auth-btn-free {
    border-color: #d4a017; color: #e8c15a; background: rgba(212,160,23,0.16);
}
[data-theme="dark"] .aq-auth-btn-free:hover { background: #d4a017; color: #1a1a1a; }
[data-theme="dark"] .aq-auth-btn-up:hover {
    background: rgba(212,160,23,0.22); border-color: #d4a017; color: #e8c15a;
}
/* 鎖住嘅卡冇數字，一行就講完 —— 唔好留返「有數字」嗰陣嘅行距，否則張卡半空 */
.aq-auth-note[data-aq-gated] .aq-auth-stats { margin-bottom: 0; }
.aq-auth-note[data-aq-gated] .aq-auth-stats p { margin: 0; }

/* =========================================
   🪟 解鎖確認彈窗
   ----------------------------------------
   ⚠️ z-index 要企喺 SubscriptionManager 個 modal 之上 —— 用戶撳「升級」
      會由呢個彈窗跳去嗰個，兩者短暫共存嗰陣唔可以被蓋住。
   ========================================= */
.aq-cf-back {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); padding: 20px;
    backdrop-filter: blur(2px);
}
.aq-cf-box {
    width: 100%; max-width: 420px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e2e2);
    border-radius: 12px; padding: 22px 24px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    color: var(--text-primary, #222);
}
.aq-cf-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.aq-cf-body { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary, #555); }
.aq-cf-foot {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--border-sub, rgba(0,0,0,0.12));
    font-size: 0.82rem; font-style: italic; opacity: 0.75;
}
.aq-cf-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.aq-cf-btn {
    font-size: 0.88rem; font-weight: 600; padding: 8px 18px;
    border-radius: 7px; cursor: pointer; transition: all 0.16s ease;
    border: 1px solid var(--border, #ccc);
    background: transparent; color: var(--text-secondary, #555);
}
.aq-cf-btn:hover { border-color: var(--lex-gold, #b8860b); color: var(--text-primary, #222); }
.aq-cf-yes {
    background: var(--lex-gold, #b8860b); border-color: var(--lex-gold, #b8860b); color: #fff;
}
.aq-cf-yes:hover { filter: brightness(1.08); color: #fff; }
[data-theme="dark"] .aq-cf-btn { color: var(--text-muted, #bbb); border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .aq-cf-yes { background: #d4a017; border-color: #d4a017; color: #1a1a1a; }

/* ---- 卡片入面嘅引文（一體化之後由正文搬入嚟）---- */
/*   同卡片其他部分用同一套虛線分隔，睇落係一件嘢而唔係硬砌埋一齊 */
.aq-auth-quote {
    margin: 0 0 10px; padding-bottom: 9px;
    border-bottom: 1px dashed var(--border-sub, rgba(0,0,0,0.12));
}
.aq-auth-quote blockquote {
    margin: 0 0 6px; padding: 8px 14px;
    border-left: 3px solid var(--border-sub, rgba(0,0,0,0.18));
    background: rgba(128,128,128,0.06); border-radius: 0 6px 6px 0;
    font-size: 0.95em;
}
.aq-auth-quote blockquote:last-child {
    /* 來源行（淨係得引稱掣）唔使底色，唔好搶引文注意力 */
    background: none; border-left-color: transparent;
    padding: 0 0 0 14px; margin-bottom: 0;
}
.aq-auth-quote blockquote p { margin: 0; }
[data-theme="dark"] .aq-auth-quote { border-color: rgba(255,255,255,0.16); }
[data-theme="dark"] .aq-auth-quote blockquote { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .aq-auth-quote blockquote:last-child { background: none; }

/* ---- 分段：統計事實 vs 警示判斷 ---- */
/*   兩者性質唔同（客觀數字 vs 實務影響），擠成一嚿散文會逼律師逐隻字揀重點 */
.aq-auth-stats > :first-child,
.aq-auth-caution > :first-child { margin-top: 0; }
.aq-auth-stats > :last-child,
.aq-auth-caution > :last-child { margin-bottom: 0; }

.aq-auth-caution {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border-sub, rgba(0,0,0,0.12));
    font-size: 0.96em;
}

/* ---- 孤兒卡：數據來自 citator 而唔係 AI 寫出嚟 ---- */
/*   要同 AI 撰寫嘅卡有分別 —— 律師要知邊句係報告作者講、邊句係索引補返， */
/*   所以用虛線邊框 + 一句出處，唔可以扮到一模一樣。 */
.aq-auth-orphan { border-style: dashed; border-left-style: solid; }
.aq-auth-src {
    display: block; margin-top: 2px;
    font-size: 0.82em; font-style: italic; opacity: 0.72;
}
.aq-auth-danger .aq-auth-caution { font-weight: 500; }

/* ---- 逐條原則嘅對待情況 ---- */
/*   一單案通常 1-5 條，所以要好緊湊：一行一條，左邊色籤定性、右邊數字定量 */
.aq-auth-principles:empty { display: none; }
.aq-auth-principles {
    margin-top: 10px; padding-top: 9px;
    border-top: 1px dashed var(--border-sub, rgba(0,0,0,0.12));
}
.aq-pr-head {
    font-size: 0.78em; font-weight: 700; letter-spacing: 0.4px;
    color: var(--text-muted, #888); margin-bottom: 7px;
}
.aq-pr-list { list-style: none; margin: 0; padding: 0; }
.aq-pr-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 0; font-size: 0.9em; line-height: 1.55;
    border-top: 1px solid var(--border-sub, rgba(0,0,0,0.06));
}
.aq-pr-item:first-child { border-top: none; }

/* 色籤：定性一眼睇晒，唔使讀完成句先知係咪有伏 */
.aq-pr-tag {
    flex-shrink: 0; font-size: 0.78em; font-weight: 700; white-space: nowrap;
    padding: 2px 7px; border-radius: 4px; border: 1px solid transparent;
}
.aq-pr-txt { flex: 1; min-width: 0; color: var(--text-primary, #222); }
.aq-pr-n {
    flex-shrink: 0; font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8em; color: var(--text-muted, #888); white-space: nowrap;
}

.aq-pr-ok      .aq-pr-tag { color: #047857; background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.35); }
.aq-pr-warn    .aq-pr-tag { color: #b45309; background: rgba(245,158,11,0.14);  border-color: rgba(245,158,11,0.38); }
.aq-pr-danger  .aq-pr-tag { color: #b91c1c; background: rgba(239,68,68,0.14);   border-color: rgba(239,68,68,0.38); }
.aq-pr-neutral .aq-pr-tag { color: #64748b; background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.35); }

/* 🎨 【條文本身】跟判定變色 —— 唔係靠邊個小籤。
   點解：律師掃嘅係原則內容，唔係掃色籤。條文一變色，眼球即刻停喺對應嗰條。
   紅／黃加粗，綠色唔加粗 —— 有伏嗰啲要跳出嚟，安全嗰啲識得就得。
   「僅提及」維持灰淡：佢本身就係冇實質對待，唔應該同有判定嘅平起平坐。 */
.aq-pr-danger .aq-pr-txt { color: #b91c1c; font-weight: 600; }
.aq-pr-warn   .aq-pr-txt { color: #b45309; font-weight: 600; }
.aq-pr-ok     .aq-pr-txt { color: #047857; }
.aq-pr-danger .aq-pr-n   { color: #b91c1c; }
.aq-pr-warn   .aq-pr-n   { color: #b45309; }
.aq-pr-ok     .aq-pr-n   { color: #047857; }

/* 混合群明細：「推翻 1 · 應用 9」—— 唔講清楚，律師會以為十宗都推翻咗 */
.aq-pr-mix {
    display: inline-block; margin-left: 8px; padding: 1px 7px;
    border-radius: 4px; font-size: 0.78em; font-weight: 600; white-space: nowrap;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    background: rgba(128,128,128,0.14); color: var(--text-muted, #6b7280);
    vertical-align: 1px;
}
[data-theme="dark"] .aq-pr-mix { background: rgba(255,255,255,0.12); }

/* 「另有 N 條本案原則」展開掣 —— 預設收埋，唔好逼律師睇晒佢冇問過嘅嘢 */
.aq-pr-more {
    margin-top: 7px; padding: 3px 10px; cursor: pointer;
    font-size: 0.78em; color: var(--text-muted, #888);
    background: none; border: 1px dashed var(--border, #ccc); border-radius: 5px;
}
.aq-pr-more:hover { border-color: var(--lex-gold, #b8860b); color: var(--text-primary, #222); }
.aq-pr-rest { display: none; margin-top: 6px; opacity: 0.92; }

[data-theme="dark"] .aq-pr-more { border-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .aq-auth-principles { border-color: rgba(255,255,255,0.16); }
[data-theme="dark"] .aq-pr-item { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .aq-pr-ok      .aq-pr-tag { color: #6ee7b7; background: rgba(16,185,129,0.20); }
[data-theme="dark"] .aq-pr-warn    .aq-pr-tag { color: #fcd34d; background: rgba(245,158,11,0.22); }
[data-theme="dark"] .aq-pr-danger  .aq-pr-tag { color: #fca5a5; background: rgba(239,68,68,0.22); }
[data-theme="dark"] .aq-pr-neutral .aq-pr-tag { color: #cbd5e1; background: rgba(148,163,184,0.20); }
/* 深底上 #b91c1c 會糊到睇唔清，要轉淺色系 */
[data-theme="dark"] .aq-pr-danger .aq-pr-txt,
[data-theme="dark"] .aq-pr-danger .aq-pr-n { color: #fca5a5; }
[data-theme="dark"] .aq-pr-warn   .aq-pr-txt,
[data-theme="dark"] .aq-pr-warn   .aq-pr-n { color: #fcd34d; }
[data-theme="dark"] .aq-pr-ok     .aq-pr-txt,
[data-theme="dark"] .aq-pr-ok     .aq-pr-n { color: #6ee7b7; }

@media (max-width: 768px) {
    .aq-pr-item { flex-wrap: wrap; gap: 4px 8px; }
    .aq-pr-txt { flex: 1 1 100%; order: 3; }
}

/* 🔢 統計數字：等寬 + 加粗，律師掃數字唔使逐隻字讀 */
.aq-auth-num {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.02em;
    padding: 0 2px;
    letter-spacing: 0.3px;
}

/* ---- 淺色模式 ---- */
.aq-auth-danger { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.055); }
.aq-auth-warn   { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.055); }
.aq-auth-ok     { border-left-color: #10b981; background: rgba(16, 185, 129, 0.045); }

/* 🎨 數字按【佢代表咩】上色，唔係按成張卡嘅嚴重程度。
   「被引」保持中性字色 —— 佢淨係講知名度，唔講好壞；
   染咗色反而會同「應用／區分／推翻」三個真正嘅風險訊號爭注意力。 */
.aq-num-cited   { color: var(--text-primary, #222); }
.aq-num-applied { color: #047857; }
.aq-num-dist    { color: #b45309; }
.aq-num-over    { color: #b91c1c; }
.aq-auth-extra  { white-space: nowrap; }

/* 🚩 曾被推翻嘅，段落起首補一條窄警示條 —— 掃版面時唔使讀字都知有伏 */
.aq-auth-danger::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, #ef4444, rgba(239, 68, 68, 0));
}

/* ---- 深色模式 ---- */
/*   底色要提亮（深底上 0.05 幾乎睇唔到），文字色要調淺（#b91c1c 喺深底會糊） */
[data-theme="dark"] .aq-auth-note   { border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .aq-auth-danger { background: rgba(239, 68, 68, 0.13); }
[data-theme="dark"] .aq-auth-warn   { background: rgba(245, 158, 11, 0.13); }
[data-theme="dark"] .aq-auth-ok     { background: rgba(16, 185, 129, 0.11); }

[data-theme="dark"] .aq-num-cited   { color: var(--text-primary, #e5e7eb); }
[data-theme="dark"] .aq-num-applied { color: #6ee7b7; }
[data-theme="dark"] .aq-num-dist    { color: #fcd34d; }
[data-theme="dark"] .aq-num-over    { color: #fca5a5; }

[data-theme="dark"] .aq-auth-head,
[data-theme="dark"] .aq-auth-caution { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .aq-auth-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-muted, #bbb);
}
[data-theme="dark"] .aq-auth-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* 手機：收窄 padding，唔好逼到啲字得幾個字一行 */
@media (max-width: 768px) {
    .aq-auth-note { padding: 10px 12px 10px 14px; font-size: 0.92em; }
}

/* =========================================
   📌 引文來源行狀態帶 (Quote Source Strip)
   ----------------------------------------
   貼喺「> [案名, para X](…)」來源行下面，一行講晒呢單案信唔信得過。
   ⚠️ 一份報告可以引同一單案十幾次 → 必須極窄、極淡，
      唔可以同權威訊號 callout 爭注意力（嗰個先係詳細版）。
   ========================================= */
.aq-qs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: -6px 0 14px 0; padding: 5px 10px;
    border-radius: 0 6px 6px 0;
    border-left: 2px solid transparent;
    font-size: 0.8em; line-height: 1.5;
    color: var(--text-muted, #6b7280);
}
.aq-qs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.aq-qs-nums {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.2px; white-space: nowrap;
}
.aq-qs-note { flex: 1; min-width: 120px; }
.aq-qs-btn {
    margin-left: auto; flex-shrink: 0; cursor: pointer;
    border: 1px solid var(--border, #ccc); background: var(--bg-card, #fff);
    color: var(--text-muted, #888); border-radius: 5px;
    padding: 1px 7px; font-size: 1.05em; line-height: 1.4;
    transition: all 0.15s ease;
}
.aq-qs-btn:hover { border-color: var(--lex-gold, #b8860b); color: var(--lex-gold, #b8860b); }

/* 🎁 免費試看 / 升級 掣
   ⚠️ 字掣唔可以照跟 .aq-qs-btn 嘅 1.05em —— 嗰個尺寸係為咗個 ⚖️ emoji 而設，
      套落文字會撐爆條窄帶。所以呢兩個掣覆寫返細一級。
   ⚠️ 兩個掣都有 margin-left:auto（繼承自 .aq-qs-btn）：第一個食晒剩餘空間，
      第二個就會貼實佢，天然靠右埋堆，唔使另外開 wrapper。 */
.aq-qs-free, .aq-qs-up {
    font-size: 0.95em; padding: 1px 9px; font-weight: 600; white-space: nowrap;
}
/* 金色 = 「呢度有嘢睇」。試看掣要顯眼過 ⚖️，佢先係第一次接觸嘅入口。 */
.aq-qs-free {
    border-color: var(--lex-gold, #b8860b);
    color: var(--lex-gold, #b8860b);
    background: rgba(184,134,11,0.08);
}
.aq-qs-free:hover { background: var(--lex-gold, #b8860b); color: #fff; }
/* 額度用完之後嗰個升級掣反而要收斂 —— 唔好變成成篇報告都喺度嗌畀錢 */
.aq-qs-up:hover { background: rgba(184,134,11,0.10); }
/* ⚠️ 呢句唔可以淨係靠繼承 .aq-qs 嘅 var(--text-muted) —— 淺色主題嗰個 token
   係 #7BA888（綠），一句「免費試看 · 仲剩 2 次」出綠色，喺紅底嘅「被推翻」
   狀態帶上面會讀成一個正面訊號，同條帶想講嘅嘢啱啱相反。所以寫死中性灰。 */
.aq-qs-free-note {
    font-size: 0.9em; white-space: nowrap; color: #8a8f98; font-weight: 500;
}
[data-theme="dark"] .aq-qs-free {
    border-color: #d4a017; color: #e8c15a; background: rgba(212,160,23,0.14);
}
[data-theme="dark"] .aq-qs-free:hover { background: #d4a017; color: #1a1a1a; }
/* 深色底落 rgba(184,134,11,0.10) 等於乜都冇 —— hover 要見到先算 hover */
[data-theme="dark"] .aq-qs-up:hover {
    background: rgba(212,160,23,0.22); border-color: #d4a017; color: #e8c15a;
}
[data-theme="dark"] .aq-qs-free-note { color: #9aa1ab; }

.aq-qs-overruled     { border-left-color: #ef4444; background: rgba(239,68,68,0.06); }
.aq-qs-distinguished { border-left-color: #f59e0b; background: rgba(245,158,11,0.06); }
.aq-qs-applied       { border-left-color: #10b981; background: rgba(16,185,129,0.05); }
.aq-qs-cited         { border-left-color: #94a3b8; background: rgba(148,163,184,0.05); }

.aq-qs-overruled     .aq-qs-dot { background: #ef4444; }
.aq-qs-distinguished .aq-qs-dot { background: #f59e0b; }
.aq-qs-applied       .aq-qs-dot { background: #10b981; }
.aq-qs-cited         .aq-qs-dot { background: #94a3b8; }

/* 有伏嗰句先加重，其餘保持灰淡 —— 唔好每行都嗌 */
.aq-qs-overruled     .aq-qs-note { color: #b91c1c; font-weight: 600; }
.aq-qs-distinguished .aq-qs-note { color: #b45309; }

[data-theme="dark"] .aq-qs-overruled     { background: rgba(239,68,68,0.14); }
[data-theme="dark"] .aq-qs-distinguished { background: rgba(245,158,11,0.14); }
[data-theme="dark"] .aq-qs-applied       { background: rgba(16,185,129,0.11); }
[data-theme="dark"] .aq-qs-cited         { background: rgba(148,163,184,0.10); }
[data-theme="dark"] .aq-qs-overruled     .aq-qs-note { color: #fca5a5; }
[data-theme="dark"] .aq-qs-distinguished .aq-qs-note { color: #fcd34d; }
[data-theme="dark"] .aq-qs-btn {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: var(--text-muted,#bbb);
}

@media (max-width: 768px) {
    .aq-qs { font-size: 0.76em; gap: 6px; }
    .aq-qs-note { flex: 1 1 100%; order: 3; }
}

/* =========================================
   ⚖️ 內文引稱權威上色 (Citator Treatment)
   ----------------------------------------
   顏色同 citator 頁面 js/network.js 嘅 VERDICT_COLORS 一致 ——
   兩邊唔可以唔同色，否則同一單案喺兩個畫面會讀出唔同意思。
       綠 #10b981 = 被應用      黃 #f59e0b = 曾被區分
       紅 #ef4444 = 被質疑/推翻  灰 = 有人引過但冇明確處理
   設計：只落底色 + 左邊色邊，唔改字體大小，避免打斷內文閱讀節奏。
   ========================================= */
.cit-treat {
    border-radius: 3px;
    padding: 0 3px;
    border-left: 2.5px solid transparent;
    cursor: help;
    transition: background-color 0.2s ease;
}
.cit-applied       { border-left-color: #10b981; background-color: rgba(16, 185, 129, 0.10); }
.cit-distinguished { border-left-color: #f59e0b; background-color: rgba(245, 158, 11, 0.12); }
.cit-overruled     { border-left-color: #ef4444; background-color: rgba(239, 68, 68, 0.13); font-weight: 600; }
.cit-cited         { border-left-color: #94a3b8; background-color: rgba(148, 163, 184, 0.10); }

.cit-applied:hover       { background-color: rgba(16, 185, 129, 0.20); }
.cit-distinguished:hover { background-color: rgba(245, 158, 11, 0.24); }
.cit-overruled:hover     { background-color: rgba(239, 68, 68, 0.26); }
.cit-cited:hover         { background-color: rgba(148, 163, 184, 0.20); }

/* 🖍️ 案名 + 引稱要睇落係【一整段】，中間唔可以有白罅或者兩條左邊線。
   做法：左邊線同左圓角歸案名，右圓角歸引稱，中間嗰截拉平。 */
.cit-name {
    border-radius: 3px 0 0 3px;
    padding: 0 0 0 3px;
    border-left: 2.5px solid transparent;
    cursor: help;
    transition: background-color 0.2s ease;
}
/* 內文案名同引稱要有穩定字色；狀態淺底唔應該令字跟住外層連結變淡。 */
.cit-name,
.cit-treat:not(.neutral-citation) {
    color: var(--text-primary);
}
.cit-name + .cit-treat {
    border-left: none;
    border-radius: 0 3px 3px 0;
    padding-left: 0;
}
/* ⚠ 只可以出一次，而且要喺成段最尾 —— 案名度再出一個就變咗兩個警號 */
.cit-name::after { content: none !important; }

/* ⚖️ 撳得開 Citator 嗰啲（2026-09-16）
   ----------------------------------------
   ⚠️ 一定要蓋過上面 .cit-treat / .cit-name 嘅 `cursor: help` ——
      兩條規則同分，後者贏，所以呢段【必須】排喺佢哋之後。
   設計刻意保守：唔加底線、唔轉色。內文引稱已經有底色同左邊色邊做警示，
   再加一層裝飾就會同「被推翻」嗰個紅色警號爭注意力。
   只改游標 + hover 加深少少，夠講到「撳得」就夠。 */
.cit-clickable,
.cit-name.cit-clickable { cursor: pointer; }

/* hover 時整段（案名＋引稱）一齊反應，唔可以淨係反應撳住嗰半截 ——
   否則睇落似兩個獨立標記，同上面特登接埋佢哋嘅做法自相矛盾。 */
.cit-clickable:hover { filter: brightness(0.97); }

/* ♿ 鍵盤焦點一定要睇得到。role=button + tabindex=0 但冇 focus 樣式，
   等於得個殼 —— 用 Tab 行嘅人根本唔知自己停咗喺邊。 */
.cit-clickable:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .cit-clickable { transition: none; }
}

/* 🚩 被推翻嘅案要喺內文一眼睇到，唔可以淨係靠底色 —— 律師掃字嗰陣好易走漏 */
.cit-overruled::after {
    content: "⚠";
    font-size: 0.85em;
    margin-left: 3px;
    opacity: 0.85;
}

/* 深色模式：底色要提亮，否則喺深底上面幾乎睇唔到 */
[data-theme="dark"] .cit-applied       { background-color: rgba(16, 185, 129, 0.18); }
[data-theme="dark"] .cit-distinguished { background-color: rgba(245, 158, 11, 0.20); }
[data-theme="dark"] .cit-overruled     { background-color: rgba(239, 68, 68, 0.22); }
[data-theme="dark"] .cit-cited         { background-color: rgba(148, 163, 184, 0.16); }

/* 標題／footer 嗰啲本身已經係 .neutral-citation 嘅膠囊：
   淨係換邊色同底色，唔好郁佢原有嘅 padding／字體，否則排版會跳。 */
.neutral-citation.cit-applied       { border-color: #10b981; }
.neutral-citation.cit-distinguished { border-color: #f59e0b; }
.neutral-citation.cit-overruled     { border-color: #ef4444; }

/* =========================================
   5. 權威案例列表 (List of Authorities Footer)
   ========================================= */
.legal-answer-body { font-size: 1rem; line-height: 1.8; margin-bottom: 24px; }
.legal-authorities-footer {
    background-color: rgba(0, 0, 0, 0.03); border-top: 2px solid var(--accent);
    border-radius: 8px; padding: 0; margin-top: 10px; overflow: hidden; font-size: 0.9rem;
}
[data-theme="dark"] .legal-authorities-footer { background: var(--aq-glass-surface); }

.legal-authorities-footer details { background-color: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 12px 16px !important; }
.legal-authorities-footer summary {
    cursor: pointer; font-weight: 600; color: var(--primary); list-style: none;
    display: flex; align-items: center; gap: 8px; outline: none; font-size: 1rem;
}
.legal-authorities-footer summary::before { content: '▶'; font-size: 0.8em; transition: transform 0.2s; color: var(--accent); display: inline-block; }
.legal-authorities-footer details[open] summary::before { transform: rotate(90deg); }
.legal-authorities-footer summary::-webkit-details-marker { display: none; }

/* 📋 「複製列表（連結）」—— 展開權威列表之後先見到。
   刻意細同低調：佢係一個輔助動作，唔應該同上面嗰行標題爭注意力。 */
.aq-copy-row { padding: 8px 16px 0; }
.aq-copy-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78em; font-weight: 600; white-space: nowrap;
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border, #ccc);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #555);
    transition: all 0.18s ease;
}
.aq-copy-btn:hover {
    border-color: var(--lex-gold, #b8860b);
    color: var(--text-primary, #222);
}
.aq-copy-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
[data-theme="dark"] .aq-copy-btn {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.72);
}
.legal-authorities-footer h3 { margin-top: 0; font-size: 1.2rem; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.legal-authorities-footer ul { margin-bottom: 0; padding-left: 20px; }
.legal-authorities-footer li { margin-bottom: 6px; }
.legal-authorities-footer strong { color: var(--text-primary); font-weight: 700; font-size: 0.95em !important; }
.legal-authorities-footer .citation-badge { padding: 1px 6px; font-size: 1em; background-color: transparent; border: 1px solid var(--border); }
.legal-authorities-footer .citation-badge:hover { background-color: var(--bg-hover); border-color: var(--accent); }

/* =========================================
   ★ 中性案件編號 (Neutral Citation) 專屬樣式
   ========================================= */
.legal-authorities-footer .neutral-citation {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* 換成打字機/代碼字體，凸顯編號感 */
    font-size: 0.8em; /* 縮細大概兩格 */
    font-weight: 500;
    color: var(--text-primary); /* 轉用次要灰色，避免搶走大標題焦點 */
    background-color: var(--bg-active); /* 加一層極淡嘅底色 */
    border: 1px solid var(--border-sub); /* 加個淡淡嘅框線，似個 Label */
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* 同前面個案件名拉開少少距離 */
    vertical-align: middle; /* 確保同大字體垂直置中對齊 */
    letter-spacing: 0.5px; /* 字距稍微拉闊，提升可讀性 */
}

.legal-authorities-footer {
    background:var(--aq-glass-surface);
    border:1px solid var(--aq-glass-line);
    border-top:2px solid var(--lex-gold);
    border-radius:3px;
    -webkit-backdrop-filter:blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--aq-glass-blur)) saturate(150%);
}
.message-content .legal-case-card,
.message-content blockquote,
.message-content details:not(.legal-authorities-footer details) {
    background-color:var(--aq-glass-surface);
    border-color:var(--aq-glass-line);
    -webkit-backdrop-filter:blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--aq-glass-blur)) saturate(150%);
}

/* 深色模式 (Dark Mode) 適配 */
[data-theme="dark"] .legal-authorities-footer .neutral-citation {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-muted); 
    border-color: rgba(255, 255, 255, 0.1);
}

/* Keep generated authority lists in the same restrained paper treatment. */
.legal-authorities-footer {
    background: var(--aq-glass-surface);
    border: 1px solid var(--aq-glass-line);
    border-top: 2px solid var(--lex-gold);
    border-radius: 3px;
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
}
.legal-authorities-footer summary,
.legal-authorities-footer h3 { color: var(--text-primary); }
.legal-authorities-footer .citation-badge { border-radius: 3px; }
.message-content blockquote { border-left-color: var(--lex-gold); border-radius: 0 3px 3px 0; }
.message-content details:not(.legal-authorities-footer details) { border-radius: 3px; }

/* 收縮容器 (內文一般的 details) */
.message-content details:not(.legal-authorities-footer details) {
    background-color: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; margin-top: 16px; transition: all 0.2s ease;
}
.message-content details[open]:not(.legal-authorities-footer details) {
    background-color: var(--bg-card); box-shadow: 0 4px 12px var(--shadow-color); padding-bottom: 16px;
}
.message-content summary:not(.legal-authorities-footer summary) {
    cursor: pointer; font-weight: 600; color: var(--primary); list-style: none;
    display: flex; align-items: center; gap: 8px; user-select: none; outline: none;
}
.message-content summary:not(.legal-authorities-footer summary)::before { content: '▶'; font-size: 0.8em; transition: transform 0.2s; color: var(--accent); }
.message-content details[open] summary:not(.legal-authorities-footer summary)::before { transform: rotate(90deg); }
.message-content summary::-webkit-details-marker { display: none; }
.message-content details p, .message-content details ul { margin-top: 12px; margin-bottom: 0; color: var(--text-primary); }

/* =========================================
   6. Mermaid 圖表完美自適應修復
   ========================================= */
.mermaid-graph-wrapper {
    display: block; text-align: center; max-height: 550px; overflow-x: auto; overflow-y: auto; 
    cursor: zoom-in; transition: box-shadow 0.2s ease; background: rgba(0,0,0,0.1); 
    border-radius: 8px; padding: 20px 10px; margin: 20px 0; border: 1px solid var(--border-sub);
}
.mermaid-graph-wrapper:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }
.mermaid-graph-wrapper svg { max-width: none !important; width: auto !important; height: auto !important; max-height: 480px !important; margin: 0 auto; display: block; }
.mermaid-graph-wrapper foreignObject { overflow: visible !important; }
.mermaid-graph-wrapper .node .label { line-height: 1.4 !important; }
.mermaid-graph-wrapper .label div { display: block !important; padding: 2px !important; }
.mermaid-graph-wrapper .edgeLabel, .mermaid-graph-wrapper .edgeLabel rect { background-color: transparent !important; fill: var(--bg-card) !important; color: var(--text-primary) !important; }
.mermaid-graph-wrapper span.edgeLabel { background-color: transparent !important; }

/* 點擊放大的燈箱樣式 */
.mermaid-lightbox {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); z-index: 999999; align-items: center; justify-content: center; 
    padding: 20px; cursor: zoom-out; opacity: 0; transition: opacity 0.3s ease;
}
.mermaid-lightbox.active { display: flex; opacity: 1; }
.mermaid-lightbox-content {
    background: var(--bg-body); padding: 30px; border-radius: 12px;
    max-width: 95vw; max-height: 95vh; overflow: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    position: relative; cursor: default;
}
.mermaid-lightbox-content svg { max-width: none !important; max-height: none !important; width: auto; height: auto; min-width: 800px; }
.mermaid-lightbox-close {
    position: absolute; top: 10px; right: 15px; font-size: 28px; color: #64748b; 
    cursor: pointer; background: none; border: none; padding: 5px;
}
.mermaid-lightbox-close:hover { color: #0f172a; }
/* ============================================================
   🏷️ precise 權威層級色標
   ------------------------------------------------------------
   由 workflow 個 reply_signal 機械補喺每個內文引用後面，
   再由 message-formatter 第 7.5 步轉成 <span class="aq-authtag">。
   2026-09-13 用戶回報：原本行 <code> 預設樣式（程式碼用嘅紅字灰底），
   擺喺法律引用後面又嘈又睇唔出意思。

   ⚠️ 設計目標同 6.8 權威訊號 callout 一致：
      【重複出現都唔覺嘈、掃一眼就分到輕重】。
      一份報告可以引十幾次，所以一定要細、要淡、唔可以搶過引稱本身。
   ⚠️ 顏色跟【法院層級】唔跟喜好：終院 → 上訴 → 原訟 → 區院，
      由深到淺。條文同非本港各自一個中性色。
   ============================================================ */
.aq-authtag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    vertical-align: 1px;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* 終審法院 —— 最高權威，用金色（同全站 --lex-gold 一脈） */
.aq-authtag-cfa    { background: #FBF0D9; color: #7A5A12; border-color: #E8D9A8; }
/* 上訴法庭 */
.aq-authtag-ca     { background: #EAF0FB; color: #2B4A82; border-color: #CBD9F0; }
/* 原訟法庭 */
.aq-authtag-cfi    { background: #E9F3EC; color: #1F5233; border-color: #C9E0D2; }
/* 區域法院／家事／土地／裁判 —— 同一檔，最淡 */
.aq-authtag-dc     { background: #F1F2F3; color: #4A5257; border-color: #DCDFE1; }
/* 法定條文 */
.aq-authtag-stat   { background: #F5EFE6; color: #6B4C25; border-color: #E3D6C2; }
/* 非本港判例 —— 只具說服力，要睇得出同本港唔同 */
.aq-authtag-foreign{ background: #F7EFF4; color: #6E3157; border-color: #E7D3DF; }
/* ratio / obiter / 未能判斷 —— 中性，唔應該搶過層級 */
.aq-authtag-note   { background: transparent; color: var(--text-muted, #7B8A82);
                     border-color: var(--border, #E0E4E2); font-weight: 600; }

/* 🌙 深色模式：唔可以照用淺底 —— 喺深背景上會變成一排發光方塊，
   比冇標籤更嘈。改為透明底 + 彩色邊框同文字。 */
[data-theme="dark"] .aq-authtag { background: transparent; }
[data-theme="dark"] .aq-authtag-cfa    { color: #E3C46A; border-color: #6B5520; }
[data-theme="dark"] .aq-authtag-ca     { color: #8FB1E8; border-color: #34496E; }
[data-theme="dark"] .aq-authtag-cfi    { color: #7FC49B; border-color: #2C5540; }
[data-theme="dark"] .aq-authtag-dc     { color: #9AA5AB; border-color: #414A4F; }
[data-theme="dark"] .aq-authtag-stat   { color: #C9A97C; border-color: #5B462C; }
[data-theme="dark"] .aq-authtag-foreign{ color: #C58FB2; border-color: #5C3A4E; }
[data-theme="dark"] .aq-authtag-note   { color: var(--text-muted, #8A9690); }

/* 📱 窄螢幕：標籤照留（佢就係價值所在），但再細啲、唔好逼到換行太散 */
@media (max-width: 520px) {
    .aq-authtag { font-size: 10px; padding: 0 5px; margin-left: 3px; }
}

/* ==========================================================================
   ⚖️ 「建議搵律師」卡（市民版 <lawyer_referral>）
   --------------------------------------------------------------------------
   故意做得平實 —— 佢係一個【判斷】唔係一個廣告。
   色調跟金色權威系，但唔用實底，免得比答案本身仲要眼。
   ========================================================================== */
.aq-lawyer-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin: 16px 0; padding: 12px 14px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    border-left: 3px solid #c5a059;
    border-radius: 10px;
    background: rgba(197, 160, 89, 0.06);
}
.aq-lawyer-txt { flex: 1 1 220px; font-size: 13px; line-height: 1.6; color: var(--text-secondary, #4b5563); }
.aq-lawyer-txt b { color: var(--text-primary, #111); }
.aq-lawyer-btn {
    flex: 0 0 auto; border: 0; border-radius: 8px; padding: 8px 15px;
    background: #c5a059; color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; font-family: inherit;
}
.aq-lawyer-btn:hover { filter: brightness(1.07); }
.aq-lawyer-btn:active { transform: scale(0.98); }
.aq-lawyer-btn:focus-visible { outline: 2px solid #c5a059; outline-offset: 2px; }

[data-theme="dark"] .aq-lawyer-cta { background: rgba(197, 160, 89, 0.10); }
[data-theme="dark"] .aq-lawyer-txt { color: var(--text-muted, #8A9690); }

@media (max-width: 520px) {
    .aq-lawyer-cta { gap: 10px; padding: 11px 12px; }
    .aq-lawyer-btn { width: 100%; }
}