/* ==========================================================================
   Chat Specific Styles (chat.css) - Dark Mode Ready
   包含: 主佈局, 訊息氣泡, Markdown樣式, 輸入框, 歡迎畫面, 工具樣式
   依賴: common.css (提供變數與Sidebar基礎)
   ========================================================================== */

   /* =========================================
   Temporary Fix: Hide File Upload
   ========================================= */
/* #attachBtn {
    display: none !important;
} */

/* 1. 主頁面容器 (配合 Sidebar 伸縮) */
.chat-page-container {
    flex: 1; display: flex; flex-direction: column; height: 100vh;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
    
    background: var(--bg-primary); /* 使用變數 */
    
    position: relative;
}

body.collapsed-mode .chat-page-container {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* ==========================================================================
   ★ 終極字體清晰化 (解決深色模式字體發虛、濛濛地問題) ★
   ========================================================================== */
body, .chat-main, .suggested-questions-container {
    /* 1. 強制 macOS/iOS 使用灰階抗鋸齒，令淺色字體邊緣更銳利結實 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* 2. 提升文字渲染品質 */
    text-rendering: optimizeLegibility !important;
}

/* 3. 針對按鈕與標題，修復 Flexbox 可能導致的「半像素模糊」 */
.suggested-title, .suggested-chip, .action-btn {
    /* 強制硬體加速並對齊完整像素，防止字體因為座標出現小數點而變糊 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (max-width: 768px) {
    .chat-page-container { margin-left: 0; width: 100%; }
}

/* =========================================
   1. 修復無法 Scroll 及 佈局結構
   ========================================= */

/* 讓 Body 變成垂直排列的 Flex 容器，確保填滿 100% 高度 */
body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 佔滿視窗高度 */
    overflow: hidden; /* 防止 Body 出現雙重滾動條 */
    margin: 0;
}

/* 防止頂部通知欄和 Header 被壓縮 */
.announcement-bar,
.chat-header {
    flex-shrink: 0; /* 固定高度，不可壓縮 */
    width: 100%;
}

/* 核心修復：Chat Main 佔據剩餘空間並負責滾動 */
.chat-main {
    flex: 1; /* 自動填滿 header 和 input 之間的空間 */
    overflow-y: auto; /* 內容過長時顯示滾動條 */
    height: auto !important; /* 強制取消舊的固定高度 */
    
    /* 調整 Padding，確保內容不會被遮住 */
    padding-top: 20px; 
    padding-bottom: 100px; /* 預留底部 Input 的空間 */
    box-sizing: border-box;
    
    /* 讓滾動條平滑 */
    scroll-behavior: smooth;
}

/* 底部輸入框固定 */
.chat-input-area {
    flex-shrink: 0; /* 固定高度 */
    width: 100%;
    background: var(--bg-primary); /* 確保背景不透明 */
    z-index: 100;
}

/* =========================================
   2. 修復鈴鐺走位 (Header 對齊)
   ========================================= */

/* 確保 Header 右側是橫向排列 */
.chat-header-right {
    display: flex;
    align-items: center; /* 垂直置中 */
    gap: 15px; /* 鈴鐺和語言按鈕的間距 */
    height: 100%;
    z-index: 4002;
    margin-right: 20px;
}

/* 強制重置 Chat 頁面的鈴鐺定位 */
/* 這裡用 !important 覆蓋 common.css 可能存在的 absolute 定位 */
.chat-header .notice-bell-btn {
    position: relative !important; /* 變回相對定位，跟隨 Flex 排列 */
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    
    /* 確保顏色正確 */
    color: var(--lex-gold, #c5a059);
}

/* 確保語言切換器也不會亂跑 */
.chat-header .language-switcher {
    position: relative ;
    top: auto;
    right: auto ;
    margin: 0 ;
}

/* 2. 聊天內容滾動區 */
.chat-main {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
    align-items: center; padding: 40px 0; scroll-behavior: smooth;
    width: 100%;
}

/* 容器寬度限制 */
#conversationDisplay {
    width: 100%; max-width: 800px;
    display: flex; flex-direction: column; gap: 32px;
    padding: 0 24px;
}

/* 3. 訊息氣泡樣式 */
.user-message {
    align-self: flex-end; margin-left: auto;
    margin-top: 15px;
    background-color: var(--primary) !important; /* 使用主色 */
    color: #FFFFFF !important; /* 用戶文字永遠白色 */
    
    border-radius: 16px 16px 2px 16px; padding: 12px 20px;
    max-width: 80%; width: fit-content;
    box-shadow: 0 2px 5px var(--shadow-color);
}
.user-message .message-content { color: #FFFFFF !important; font-size: 1rem; line-height: 1.6; }

.assistant-message { align-self: flex-start; width: 100%; max-width: 100%; }
.assistant-message .message-content { 
    font-size: 1rem; line-height: 1.8; 
    color: var(--text-primary); /* 使用變數 (自動轉白) */
}

.ai-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    
    color: var(--text-secondary); /* 使用變數 */
    
    font-weight: 700; font-size: 15px;
    border-bottom: 1px solid var(--border); /* 使用變數 */
    padding-bottom: 8px;
}

/* 5. 輸入區域 (高級樣式) */
.chat-input-area {
    background: var(--bg-secondary); /* 使用變數 */
    padding: 24px 0;
    flex-shrink: 0; display: flex; justify-content: center;
    box-shadow: 0 -4px 12px var(--shadow-color);
    z-index: 100;
}
.chat-input-wrapper { width: 100%; max-width: 800px; padding: 0 24px; }

.input-container {
    padding: 16px 20px; min-height: 80px; 
    
    background: var(--bg-card); /* 使用變數 */
    border: 1px solid var(--border);
    
    border-radius: 16px;
    box-shadow: 0 4px 12px var(--shadow-color);
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all 0.3s ease;
    
    /* 確保輸入文字可見 */
    color: var(--text-primary);
}
.input-container:focus-within {
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(45, 95, 63, 0.15);
}

#mainInput {
    width: 100%; border: none; outline: none; resize: none;
    min-height: 48px; max-height: 200px; font-size: 1rem;
    background: transparent; line-height: 1.5;
    
    color: var(--text-primary); /* 使用變數 */
}

/* 工具列 (上傳按鈕、發送按鈕) */
.input-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; 
    border-top: 1px solid var(--border-sub); 
    padding-top: 8px;
}
.toolbar-left { display: flex; gap: 8px; }
.toolbar-btn {
    background: none; border: none; cursor: pointer; 
    color: var(--text-muted);
    padding: 8px; border-radius: 6px; transition: all 0.2s;
    
}

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

.submit-btn {
    background: var(--accent); border: none; color: white;
    padding: 8px 20px; border-radius: 8px; cursor: pointer;
    font-weight: 500; transition: all 0.2s;
}
.submit-btn:hover:not(:disabled) { background-color: var(--primary); transform: translateY(-1px); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; background-color: #ccc; }

/* User 訊息區塊設置相對定位 */
.user-message {
    position: relative;
}

/* 編輯按鈕樣式 */
.edit-prompt-btn {
    position: absolute;
    bottom: -25px; /* 放在氣泡下方偏右 */
    right: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    opacity: 0.6; /* 預設隱藏 */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-prompt-btn:hover {
    opacity: 1;
    color: var(--primary);
    background: var(--bg-hover);
}

/* 只有當滑鼠移到 User 訊息上時，才顯示編輯按鈕 */
/* .user-message:hover .edit-prompt-btn {
    opacity: 1;
} */

/* 手機版永遠顯示 (因為沒有 hover) */
@media (max-width: 768px) {
    .edit-prompt-btn {
        opacity: 0.8;
    }
}

 /* =========================================
   6. 歡迎畫面 (舊版經典樣式還原)
   ========================================= */

.welcome-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 強制高度與邊距邏輯 */
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 20px 10px 20px;
    width: 100%;
    animation: fadeIn 0.5s ease;
}

/* 控制顯示邏輯 */
.chat-main.show-welcome { justify-content: center; }
.chat-main.show-welcome #welcomeScreen { display: flex; }
.chat-main.show-welcome #conversationDisplay { display: none; }


.welcome-logo-container {
    margin-bottom: 30px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ★ 經典綠色裝飾線 */
.welcome-logo-container::after {
    content: '';
    display: block;
    width: 400px;
    height: 3px;
    background-color: var(--primary); /* 使用變數 */
    border-radius: 2px;
    opacity: 0.9;
    margin-top: -80px;      
    position: relative;     
    z-index: 0;
}

/* 1. 圖片通用樣式 (對應 HTML 的 class="brand-logo-img") */
.brand-logo-img {
    width: 450px;
    height: auto;
    max-width: 80vw;
    object-fit: contain;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    /* 注意：這裡不要寫 display: block，交給下面控制 */
}

/* 2. 預設狀態 (淺色模式 Light Mode) */
.logo-light {
    display: block; /* 顯示淺色 Logo */
}

.logo-dark {
    display: none;  /* 隱藏深色 Logo */
}

/* 3. 深色模式狀態 (Dark Mode) */
/* 當 html 標籤有 data-theme="dark" 時觸發 */
[data-theme="dark"] .logo-light {
    display: none;  /* 隱藏淺色 Logo */
}

[data-theme="dark"] .logo-dark {
    display: block; /* 顯示深色 Logo */
}

.welcome-title { 
    font-size: 28px; 
    font-weight: 600; 
    color: var(--primary); /* 使用變數 */
    margin-bottom: 12px; 
    margin: -20px auto 20px;
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; 
}

.welcome-subtitle { 
    font-size: 16px; 
    color: var(--text-muted); /* 使用變數 */
    max-width: 700px; 
    line-height: 1.5; 
    margin-bottom: 2rem;
}

/* Welcome Mode 下的 Input 位置調整 */
.chat-page-container.welcome-mode { justify-content: center; }

.chat-page-container.welcome-mode .chat-input-area {
    background: transparent; 
    box-shadow: none; 
    border: none; 
    padding-top: 20px;
    padding-bottom: 10vh;
}

.chat-page-container.welcome-mode .input-container {
    box-shadow: 0 8px 30px var(--shadow-color);
    border-color: transparent;
    
    background: var(--bg-card); /* 使用變數 (在深色模式下會變深) */
}

/* Header */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
}

.chat-page-container {
    display: flex; flex-direction: column; height: 100vh;
    position: relative; transition: all 0.5s ease;
}

/* Welcome Mode：調整中心點 */
.chat-page-container.welcome-mode {
    justify-content: center; align-items: center;
    padding-bottom: 25vh; gap: 20px; 
}

/* ★★★ 強制 .chat-main 收縮 ★★★ */
.chat-page-container.welcome-mode .chat-main {
    flex: 0 0 auto !important; height: auto !important;
    min-height: 0 !important; margin: 0 !important;
    width: 100%; padding: 0 !important;
}

.chat-page-container.welcome-mode .chat-header {
    position: absolute; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    background: transparent !important; 
    border-bottom: none !important; 
    z-index: 100; padding: 15px 20px;
}

/* Welcome Mode 下的輸入區域 (透明化外殼) */
.chat-page-container.welcome-mode .chat-input-area {
    position: relative; top: auto; width: 100%; max-width: 800px;
    margin-top: 0; background: transparent; border-top: none;
    box-shadow: none; padding: 0 24px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 輸入框本體 (Welcome Mode 下要有陰影) */
.chat-page-container.welcome-mode .input-container {
    box-shadow: 0 10px 40px var(--shadow-color);
    border: 1px solid var(--border);
    background: var(--bg-card); /* 使用變數 */
    transform: translateY(0);
    /* 🚨 transform 會令 .input-container 變成 stacking context，把向上彈嘅檢索設定下拉
       困喺入面；如果唔畀佢一個高 z-index，成個下拉會被置中嘅 Logo/標題層蓋住(睇到但撳唔到)。
       呢個就係「index 得、chat welcome 版成個面板都操作唔到」嘅根因。 */
    position: relative;
    z-index: 200;
}
.chat-page-container.welcome-mode .input-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px var(--shadow-color);
}

.chat-page-container:not(.welcome-mode) .chat-main {
    flex: 1; overflow-y: auto;
}


/* Feedback Button Styles */
.report-btn:hover {
    background-color: rgba(239, 68, 68, 0.1) !important; /* 紅色背景淡出 */
    color: #ef4444 !important; /* 紅色文字 */
    border-color: #ef4444 !important;
}

/* 已回饋狀態 (黃色/警告色) */
.report-btn.reported {
    border-color: #eab308 !important; /* 黃色邊框 */
    background-color: rgba(234, 179, 8, 0.1) !important;
    cursor: default; /* 鼠標變回預設，提示不可點擊 */
}

.report-btn.reported:hover {
    transform: none !important; /* 移除 hover 上浮效果 */
    background-color: rgba(234, 179, 8, 0.1) !important;
}

/* =========================================
   7. 模型選擇器 & 檔案上傳樣式 (Updated)
   ========================================= */

.model-selector-wrapper {
    position: relative; display: flex; align-items: center;
}

.model-btn {
    display: flex; align-items: center; gap: 4px; padding: 8px;
    border-radius: 8px;
    color: var(--text-muted);
    background-color: transparent; transition: background 0.2s;
}
.model-btn:hover { background-color: var(--bg-hover); }

/* 下拉選單 */
.model-dropdown {
    display: none; 
    position: absolute; bottom: 100%; left: 0;
    margin-bottom: 10px; 
    
    background: var(--bg-card); /* 使用變數 */
    border: 1px solid var(--border);
    
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--shadow-color);
    
    /* ★ 改動：加寬寬度以容納描述文字 */
    width: 280px; 
    min-width: 280px;
    z-index: 3000; overflow: hidden;
}
.model-dropdown.show { display: block; }

/* 選項樣式 */
.model-option {
    /* ★ 改動：調整 Padding 和增加分隔線 */
    padding: 12px 16px; 
    border-bottom: 1px solid var(--border-sub); /* 分隔線 */
    
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* 左右撐開 */
    transition: background 0.2s;
}
.model-option:last-child { border-bottom: none; }
.model-option:hover { background-color: var(--bg-hover); }

/* ★ 新增：文字群組 (名稱 + 描述) 垂直排列 */
.model-text-group {
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
    flex: 1; /* 佔據剩餘空間 */
    margin-right: 10px; /* 與右邊圖標保持距離 */
}

/* ★ 新增：模型名稱樣式 */
.model-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ★ 新增：描述文字樣式 (細字、淺灰) */
.model-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* --- 狀態控制 --- */

/* Active 狀態 */
.model-option.active { 
    background-color: var(--bg-secondary); 
}

/* 選中時，名稱變色加粗 */
.model-option.active .model-name {
    color: var(--accent);
    font-weight: 700;
}

/* 勾號圖標 (預設隱藏) */
.model-option .check-icon { 
    display: none; 
    color: var(--accent); /* 跟隨強調色 */
    width: 18px; 
    height: 18px;
    flex-shrink: 0; /* 防止被擠壓 */
}

/* 只有 Active 時顯示勾號 */
.model-option.active .check-icon { 
    display: block !important; 
}

/* Locked 狀態 */
.model-option.locked {
    background-color: rgba(0,0,0,0.02); /* 極淡灰背景 */
    cursor: not-allowed;
}
/* 深色模式下的 locked 背景微調 */
[data-theme="dark"] .model-option.locked {
    background-color: rgba(255,255,255,0.02);
}

.model-option.locked .model-name {
    color: var(--text-muted);
}

.model-option.locked:hover {
    background-color: var(--bg-hover);
}

/* 鎖頭圖標 */
.lock-icon {
    color: var(--text-muted);
    width: 16px;
    height: 16px;
}

.pro-badge {
    margin-left: 6px;
    flex-shrink: 0;
}

/* 檔案預覽區 (保持不變) */
.file-preview-area {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.file-chip {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    background-color: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--primary);
    border-radius: 8px; font-size: 12px;
}
.file-chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-remove-btn {
    cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center;
}
.file-remove-btn:hover { color: #d32f2f; }

/* ============================================================
   AequiLex: 閒聊模式對話氣泡 (Casual Chat Bubble)
   ============================================================ */
/* 針對 AI 閒聊的氣泡設計 */
.assistant-message .message-content.casual-bubble {
    background-color: var(--bg-active); /* 純白底色，與背景做對分 */
    border: 1px solid var(--border-sub, #e2e8f0);
    border-radius: 4px 16px 16px 16px; /* 左上角直角，其他圓角，模仿對話氣泡 */
    padding: 14px 20px;
    max-width: 85%; /* 不要太寬，保持對話感 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-top: 6px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* 確保氣泡內的文字行距舒適，並重置 formatter 預設的邊距 */
.assistant-message .message-content.casual-bubble .legal-answer-body {
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary, #1e293b);
}

/* 調整操作按鈕 (複製/分享) 讓它貼近氣泡下方 */
.assistant-message:has(.casual-bubble) .answer-actions {
    margin-top: 8px;
    justify-content: flex-start;
    padding-left: 4px;
}


/* =========================================
   10. 底部輸入區域 (高身 + Drag & Drop)
   ========================================= */

.input-container {
    padding: 24px 24px 16px 24px; min-height: 200px;
    
    background: var(--bg-card); /* 使用變數 */
    
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--shadow-color);
    border: 2px solid transparent;  
    transition: all 0.2s ease;
    
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
}

.input-container.drag-over {
    border-color: var(--accent) !important;
    background-color: var(--bg-hover) !important; /* 使用變數 */
    transform: scale(1.01);
}

.input-container * { pointer-events: none; }
.input-container textarea,
.input-container button,
.input-container input,
.input-container label, /* 🌟 解鎖：放行所有 Label (包括一般模式、律師體、檢索來源) */
.input-container .input-actions,
.input-container .file-preview-area,
.input-container .file-chip,
.input-container .model-dropdown,
.input-container .model-option,
.input-container .filter-dropdown, /* 🌟 解鎖：放行成個檢索設定面板 */
.input-container .filter-dropdown *, /* 🌟 解鎖：放行面板入面所有字同選項 */
.input-container svg,
.input-container path {
    pointer-events: auto;
}

#mainInput {
    min-height: 60px; max-height: 250px; width: 100%;
    border: none; outline: none; resize: none;
    background: transparent; font-size: 1rem; line-height: 1.6;
    
    color: var(--text-primary); /* 使用變數 */
    
    align-self: flex-start;
}

.input-actions {
    margin-top: 10px; display: flex; justify-content: space-between; align-items: center;
}

/* =========================================
   11. 語言切換按鈕樣式
   ========================================= */
.language-switcher { display: flex; align-items: center; gap: 5px; }

.lang-btn {
    background: none; border: 1px solid transparent;
    
    color: var(--text-muted); /* 使用變數 */
    
    padding: 2px 8px; border-radius: 4px; cursor: pointer;
    font-size: 13px; font-weight: 600; transition: all 0.2s;
}

.lang-divider {
    color: var(--border);
    font-size: 12px;
}

.lang-btn:hover { color: var(--primary); }

.lang-btn.active {
    background-color: var(--primary);
    color: #FFFFFF; /* 保持白字 */
    border-color: var(--primary);
}

/* 8. 其他 UI 元件 */
.typing-indicator {
    padding: 15px 20px; 
    background: var(--bg-secondary); /* 使用變數 */
    border-radius: 16px;
    display: inline-flex; gap: 5px; width: fit-content; margin-bottom: 20px;
}
.typing-indicator span {
    width: 6px; height: 6px; background: var(--text-muted);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* 自定義滾動條 (Dark Mode 兼容) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: var(--border); 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.answer-actions { display: flex; gap: 10px; margin-top: 10px; }
.action-btn {
    background: var(--bg-card) !important; 
    border: 1px solid var(--border) !important;
    color: var(--accent) !important; 
    padding: 4px 12px; border-radius: 16px;
    cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 4px;
}
.action-btn:hover { background: var(--bg-hover) !important; }

/* Share Modal 修復 */
.share-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 20000;
    align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.share-modal.active { display: flex; }
.share-modal-content { 
    background: var(--bg-card); 
    padding: 2rem; border-radius: 20px; max-width: 400px; width: 90%; 
    color: var(--text-primary);
}
.share-modal-header { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.share-options { display: flex; flex-direction: column; gap: 10px; }
.share-option { 
    display: flex; align-items: center; gap: 10px; padding: 10px; 
    background: var(--bg-secondary); 
    border-radius: 10px; cursor: pointer; 
}
.share-option:hover { background: var(--bg-hover); }
.share-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; }
/* Share Modal 品牌顏色 */
.share-icon.facebook  { background: #1877F2; } /* FB 藍 */
.share-icon.instagram { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
} /* IG 漸層 */
.share-icon.threads   { background: #000000; } /* Threads 黑 */
.share-icon.tiktok    { background: #000000; } /* TikTok 黑 */
.share-icon.link      { background: #64748b; } /* 灰色 */

/* 確保圖標在深色模式下清晰 */
.share-icon svg {
    color: #FFFFFF;
}

/* 深色模式下的黑色圖標調整 (Threads/TikTok) */
[data-theme="dark"] .share-icon.threads,
[data-theme="dark"] .share-icon.tiktok {
    background: #ffffff;
}
[data-theme="dark"] .share-icon.threads svg,
[data-theme="dark"] .share-icon.tiktok svg {
    color: #000000;
}
.share-modal-close { 
    border: none; background: none; font-size: 20px; cursor: pointer; 
    color: var(--text-muted);
}

/* chat.css */

.share-scope-selector {
    display: flex;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.scope-option {
    flex: 1;
    position: relative;
    cursor: pointer;
    text-align: center;
}

.scope-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.scope-label {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.2s;
    font-weight: 500;
}

/* 選中狀態 */
.scope-option input:checked + .scope-label {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-weight: 600;
}

/* ==========================================
   ★ 檢索設定小選單 (Quick Filters Popover - 放大優化版)
   ========================================== */
.filter-selector-wrapper {
    position: relative; display: flex; align-items: center;
    /* 🚨 抬高成個 wrapper 嘅 stacking，令向上彈嘅檢索設定下拉(包括最底「輸出風格」)
       穩妥蓋過輸入框 textarea，唔會被佢搶走 click(症狀：輸出風格揀唔到) */
    z-index: 3001;
}

.filter-btn {
    display: flex; align-items: center; gap: 4px; padding: 8px;
    border-radius: 8px; color: var(--text-muted);
    background-color: transparent; transition: all 0.2s;
    position: relative;
}
.filter-btn:hover { background-color: var(--bg-hover); color: var(--primary); }
.filter-btn.active { color: var(--primary); background-color: var(--bg-hover); }

/* 紅色提示點 */
.filter-dot {
    position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%;
    background-color: #ef4444; border: 1px solid var(--bg-card);
}
.filter-dot.hidden {
    display: none !important;
}

/* 🆕 工具列「NEW」提示膠囊：貼喺檢索設定掣右上角，唔使揭開都見到有新功能 */
.filter-new-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #fff;
    background: #10b981;
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid var(--bg-card);
    pointer-events: none;
    animation: filterNewPulse 1.6s ease-in-out infinite;
}
.filter-new-badge.hidden { display: none !important; }
@keyframes filterNewPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.filter-dropdown {
    display: none; 
    position: absolute; bottom: 100%; left: 0;
    margin-bottom: 16px; 
    width: 340px; /* ★ 寬度加大：原本 280px -> 340px */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px; /* ★ 圓角加大 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.25); /* ★ 陰影加深，更有懸浮感 */
    z-index: 3000; overflow: hidden;
    padding: 24px; /* ★ 內距加大：原本 12px -> 24px */
}
.filter-dropdown.show { display: block; animation: slideUpFade 0.2s ease; }

.filter-header {
    font-size: 14px; /* ★ 字體加大 */
    font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-sub);
}

.filter-section { margin-bottom: 28px; /* ★ 區塊間距加大 */ }
.filter-section:last-child { margin-bottom: 4px; }
.filter-title { 
    font-size: 15px; /* ★ 標題加大 */
    font-weight: 600; color: var(--text-primary); 
    margin-bottom: 14px; 
}

/* 來源 Chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; /* ★ 按鈕間距加大 */ }
.filter-chip {
    font-size: 13px; /* ★ 字體加大 */
    padding: 8px 16px; /* ★ 按鈕變大 */
    border-radius: 20px;
    background: var(--bg-hover); color: var(--text-secondary);
    cursor: pointer; transition: all 0.2s; border: 1px solid transparent;
    display: flex; align-items: center; position: relative;
}
.filter-chip input { display: none; }
.filter-chip:has(input:checked) {
    background: rgba(197, 160, 89, 0.1); /* 配合深色模式金色的微高亮底色 */
    color: var(--primary);
    border-color: var(--primary); 
    font-weight: 600;
}

/* 灰掉的預告選項 (Disabled) */
.filter-chip.disabled-chip {
    background: rgba(0,0,0,0.02);
    color: var(--text-muted);
    cursor: not-allowed;
    border: 1px dashed var(--border-sub);
    opacity: 0.7;
}
[data-theme="dark"] .filter-chip.disabled-chip {
    background: rgba(255,255,255,0.02);
}

/* 輸出風格：獨立樣式(刻意唔用 .model-option，避免撞到 checkAndUnlockModels() 嘅
   全站 .model-option 掃描，錯誤幫呢兩張卡加埋 BASIC/PRO/ELITE 會員徽章) */
.output-style-options {
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    overflow: hidden;
}
.output-style-option {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}
.output-style-option:last-child { border-bottom: none; }
.output-style-option:hover { background-color: var(--bg-hover); }
.output-style-text-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    margin-right: 10px;
}
.output-style-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.output-style-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}
/* 收埋原生 radio（靠 label 包住整張卡做點擊）*/
.output-style-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* 選中態：同時支援 .active(JS) 同 :has(原生 radio) —— 就算 JS 未 load，
   原生 radio 一 check，:has() 就即刻著色，選擇一定睇得到 */
.output-style-option.active,
.output-style-option:has(.output-style-radio:checked) {
    background-color: var(--bg-secondary);
}
.output-style-option.active .output-style-name,
.output-style-option:has(.output-style-radio:checked) .output-style-name {
    color: var(--accent);
    font-weight: 700;
}
.output-style-check {
    display: none;
    color: var(--accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.output-style-option.active .output-style-check,
.output-style-option:has(.output-style-radio:checked) .output-style-check {
    display: block !important;
}

/* ==========================================
   🔒 輸出風格：等級名牌 + 鎖定態
   精確模式需要 Pro 級模型先有效（AQ-Core 個 prompt 根本冇 output_style），
   所以同 AQ-Pro 用同一條解鎖線。
   ========================================== */
.os-tier-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    flex-shrink: 0;
    background: #E6F4EA;
    color: #1a3d2e;
}
.output-style-lock {
    display: none;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    margin-left: 6px;
}
.output-style-option.locked {
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.02);
}
.output-style-option.locked:hover { background-color: rgba(0, 0, 0, 0.03); }
.output-style-option.locked .output-style-name,
.output-style-option.locked .output-style-desc { color: var(--text-muted); }
.output-style-option.locked .output-style-lock { display: block; }
/* 鎖住嗰陣，就算 radio 意外 checked 都唔可以顯示剔號／高亮 */
.output-style-option.locked .output-style-check { display: none !important; }
.output-style-option.locked.active,
.output-style-option.locked:has(.output-style-radio:checked) { background-color: rgba(0, 0, 0, 0.02); }
.output-style-option.locked.active .output-style-name,
.output-style-option.locked:has(.output-style-radio:checked) .output-style-name {
    color: var(--text-muted);
    font-weight: 500;
}

/* 「新功能」提示徽章：撳開一次過後永久隱藏 */
.new-feature-badge {
    font-size: 10px;
    background: #10b981;
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    font-weight: bold;
    vertical-align: middle;
}
.new-feature-badge.hidden { display: none !important; }

/* 即將推出 Badge */
.coming-soon-badge {
    font-size: 10px; /* ★ 字體加大 */
    background: var(--primary-light); 
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* 雙向拉桿 (放大版) */
.quick-slider-wrapper { padding: 0 8px; margin-top: 10px; }
.quick-slider-values {
    display: flex; justify-content: space-between;
    font-size: 14px; /* ★ 數字加大 */
    color: var(--primary); font-weight: 600;
    margin-bottom: 16px; font-family: 'JetBrains Mono', monospace;
}
.quick-slider-track {
    position: relative; width: 100%; height: 6px; /* ★ 軌道加粗 */
    background: var(--border-sub); border-radius: 3px;
}
.quick-slider-fill {
    position: absolute; height: 100%; background: var(--primary);
    border-radius: 3px; z-index: 1;
}
.quick-slider-track input[type="range"] {
    position: absolute; width: 100%; height: 6px; top: 0;
    -webkit-appearance: none; background: transparent;
    pointer-events: none; outline: none; margin: 0; z-index: 5;
}
.quick-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; /* ★ 圓點推鈕加大 */
    border-radius: 50%; background: #fff; border: 3px solid var(--primary);
    cursor: pointer; pointer-events: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.quick-slider-track input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%; background: #fff; border: 3px solid var(--primary);
    cursor: pointer; pointer-events: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.quick-slider-track input[type="range"]::-webkit-slider-thumb:hover,
.quick-slider-track input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}

/* =========================================
   Mobile Welcome Mode Fix (Chat Page)
   ========================================= */
@media (max-width: 768px) {

    /* 1. 調整主容器 (確保不被 Sidebar 推擠) */
    .chat-page-container {
        margin-left: 0 !important;
        width: 100% !important;
        /* 確保高度適應手機瀏覽器 (處理網址列) */
        height: 100dvh; 
    }

    /* 2. Welcome Mode 下的佈局調整 */
    .chat-page-container.welcome-mode {
        justify-content: flex-start !important; /* 改為從頂部開始，避免被鍵盤頂上去 */
        padding-top: 80px !important; /* 留出 Header 空間 */
        padding-bottom: 0 !important;
        gap: 10px;
    }

    /* 3. Welcome 內容 (Logo & Title) */
    .welcome-screen {
        padding: 0 20px !important;
        flex: 0 0 auto !important; /* 不要伸縮 */
        margin-bottom: 20px !important;
    }

    /* 縮小 Logo */
    .brand-logo-img {
        width: 280px !important; /* 手機版縮小 */
        max-width: 70vw !important;
    }
    
    /* 縮短裝飾線 */
    .welcome-logo-container::after {
        width: 240px !important;
        margin-top: -50px !important;
    }

    /* 縮小標題字體 */
    .welcome-title {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }
    
    .welcome-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }

    /* 4. 輸入框區域 (固定在底部或跟隨內容) */
    .chat-page-container.welcome-mode .chat-input-area {
        position: relative !important;
        padding: 0 16px !important;
        margin-top: 10px !important;
        background: transparent !important;
    }

    /* 輸入框本體 */
    .chat-page-container.welcome-mode .input-container {
        min-height: 100px !important;
        padding: 16px !important;
        box-shadow: 0 4px 15px var(--shadow-color) !important;
    }

    /* 5. 確保 Header 不會蓋住內容 */
    .chat-page-container.welcome-mode .chat-header {
        position: absolute !important;
        top: 0; left: 0;
        background: transparent !important;
        padding: 10px 15px !important;
    }
}

/* --- n8n 引用來源區塊樣式 --- */
.legal-source-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.9em;
    background-color: rgba(248, 250, 252, 0.5); /* 極淡的背景 */
    border-radius: 8px;
    padding: 15px;
}

.source-header {
    font-weight: 700;
    color: #1a3d2e; /* 配合你的主題色 */
    margin-bottom: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.source-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.source-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.source-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.source-title {
    font-weight: 600;
    color: #334155;
}

.source-para {
    font-family: monospace;
    color: #64748b;
    font-size: 0.85em;
    background: #f1f5f9;
    padding: 1px 4px;
    border-radius: 3px;
}

.source-quote {
    font-size: 0.85em;
    color: #64748b;
    font-style: italic;
    border-left: 2px solid #cbd5e1;
    padding-left: 8px;
    margin: 4px 0;
}

.source-link {
    font-size: 0.8em;
    color: #2D5F3F;
    text-decoration: none;
    font-weight: 500;
    align-self: flex-start;
}

.source-link:hover {
    text-decoration: underline;
}

/* =================================================================
   AequiLex v30 - 分離式樣式 (Body vs Footer)
   ================================================================= */

/* 1. 內文區域 (Main Text) - 保持大字體，易讀 */
.legal-answer-body {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 24px; /* 與 Footer 拉開距離 */
}

/* 2. 權威案例列表 (List of Authorities) - 風格差異化 */
.legal-authorities-footer {
    background-color: rgba(0, 0, 0, 0.03); /* 極淡的灰色背景 */
    border-top: 2px solid var(--accent);   /* 頂部加一條強調色線 */
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 10px;
    font-size: 0.9rem; /* ★ 字體稍微縮小 */
}

/* 深色模式下的 Footer 背景 */
[data-theme="dark"] .legal-authorities-footer {
    background-color: rgba(255, 255, 255, 0.05); /* 深色模式下的淡白底 */
}

/* =================================================================
   Fix: Details & Summary in New Footer (避免雙重框線)
   ================================================================= */

/* 1. 讓 Footer 負責外框與背景 */
.legal-authorities-footer {
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 2px solid var(--accent);
    border-radius: 8px;
    padding: 0; /* 讓內部的 details 填滿 */
    margin-top: 10px;
    overflow: hidden; /* 圓角修飾 */
}

/* 2. 讓內部的 Details 變透明，去掉多餘的 margin/padding */
.legal-authorities-footer details {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 12px 16px !important; /* 統一內距 */
}

/* 3. 恢復你喜歡的 Summary 樣式 (就是你記得的那個) */
.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;
}

/* Footer 內的標題 (###) */
.legal-authorities-footer h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer 內的列表樣式 */
.legal-authorities-footer ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.legal-authorities-footer li {
    margin-bottom: 6px;
}

/* Footer 內的粗體 Case Name */
.legal-authorities-footer strong {
    color: var(--text-primary); /* 在 Footer 裡，Case Name 可以用一般文字色，不用太搶眼 */
    font-weight: 700;
    font-size: 0.95em !important;
}

/* Footer 內的按鈕 (Citation Badge) - 可以做得更緊湊 */
.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);
}


/* =========================================
   ★ AequiLex v7.0: 3D 雙核引擎 (Cross-Fade Morph)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

.ai-thinking-dashboard {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 500px; 
    min-height: 180px;
    cursor: default;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    margin: 12px 0 24px 0;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    margin-bottom: 20px;
    
    /* 讓陰影更深，突出懸浮感 */
    box-shadow: 0 15px 40px -10px var(--shadow-color);
    
    min-height: 180px;
    display: flex;
    flex-direction: column;
    
    /* 背景使用變數 */
    background: var(--bg-card); 
    overflow: hidden;
    animation: slideUpFade 0.4s ease-out;
}

/* ==========================================
   AI 引導式追問按鈕 (垂直排列 + 整體靠右)
   ========================================== */
.suggested-questions-container {
    display: flex;
    flex-direction: column;     /* ★ 關鍵：改回垂直排列 (上下排) */
    align-items: flex-end;      /* ★ 關鍵：讓裡面每一個元素 (包含標題和按鈕) 都向右貼齊 */
    gap: 8px;                   /* 按鈕之間的上下間距 */
    margin-top: 15px;
    padding-top: 15px;
    width: 100%;
}

/* 引導標題樣式 */
.suggested-title {
    text-align: right;          /* 文字靠右 */
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 600;
}

/* 按鈕樣式 */
.suggested-chip {
    background-color: var(--bg-card, #ffffff);
    color: var(--text-primary);
    border: 1px solid var(--border-sub, #e2e8f0);
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    max-width: 90%;             /* 避免按鈕過長超出邊界 */
    text-align: left;           /* 按鈕內的文字保持靠左閱讀 */
    margin: 0;
}

.suggested-chip:hover {
    background-color: var(--primary, #1a3d2e);
    color: #ffffff;
    border-color: var(--primary, #1a3d2e);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* === 收縮狀態 (Collapsed State) === */
.ai-thinking-dashboard.is-collapsed {
    min-height: 48px; /* 收縮後的高度 */
    max-height: 48px;
    
    /* 收縮時的背景色與邊框 */
    background: var(--bg-secondary);
    border-left-color: var(--accent); /* 收起時變色提示 */
    cursor: pointer; /* 提示可點擊 */
    box-shadow: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px; /* 收縮時減少 margin */

}

.ai-thinking-dashboard.is-collapsed:hover {
    background: var(--bg-hover);
}

/* 當收縮時，隱藏內部的豪華內容 */
.ai-thinking-dashboard.is-collapsed .warp-container,
.ai-thinking-dashboard.is-collapsed .dashboard-content {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

/* === 摘要條 (Summary Bar) - 收縮時才顯示 === */
.thinking-summary-bar {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.3s ease 0.1s; /* 延遲顯示 */
    z-index: 10;
}

/* 收縮時顯示摘要條 */
.ai-thinking-dashboard.is-collapsed .thinking-summary-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.summary-left { 
    display: flex; align-items: center; gap: 10px; 
    font-size: 13px; font-weight: 600; color: var(--text-primary); 
}
.summary-icon { 
    color: var(--accent); width: 18px; height: 18px; 
}
.summary-time { 
    font-size: 11px; color: var(--text-muted); 
    background: var(--bg-card); padding: 2px 6px; 
    border-radius: 4px; border: 1px solid var(--border); 
}
.summary-arrow { 
    color: var(--text-muted); transition: transform 0.3s; 
}

/* 展開時箭頭旋轉 (如果是在非收縮狀態) */
.ai-thinking-dashboard:not(.is-collapsed) .summary-arrow { 
    transform: rotate(180deg); 
}

/* ====================
   1. 背景層：超級流星雨 (保留你喜歡的效果)
   ==================== */
.warp-container {
    position: absolute;
    top: 50%; left: 50%;
    width: 1px; height: 1px;
    z-index: 0;
    pointer-events: none;
    perspective: 500px;
}
.star-layer {
    position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0;
}
.star-layer.far {
    width: 1px; height: 1px; background: var(--text-muted);
    box-shadow: -200px -100px var(--primary), 200px 100px var(--text-muted), -100px 200px var(--primary);
    animation: warp-move 4s linear infinite;
}
.star-layer.mid {
    width: 2px; height: 2px; background: var(--primary);
    box-shadow: 150px -150px var(--accent), -150px 150px var(--primary);
    animation: warp-move 2.5s linear infinite; animation-delay: 0.5s;
}
.star-layer.near {
    width: 3px; height: 3px; background: var(--accent);
    box-shadow: -100px 100px var(--accent), 100px -100px #fff;
    animation: warp-move 1.5s linear infinite; animation-delay: 1s;
}

@keyframes warp-move {
    0% { transform: translateZ(-200px) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateZ(400px) rotate(90deg); opacity: 0; }
}

/* ====================
   2. 3D 圖標與切換區
   ==================== */
.dashboard-content {
    position: relative; z-index: 2; padding: 24px;
    display: flex; flex-direction: column; height: 100%;
    background: rgba(var(--bg-card-rgb), 0.1); 
    backdrop-filter: blur(1px);
}

.dashboard-header {
    display: flex; align-items: center; gap: 24px; margin-bottom: 20px;
}

/* 圖標容器：固定大小 */
.icon-container-3d {
    width: 64px; height: 64px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}

/* 兩個圖標重疊放置 */
.icon-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    /* 關鍵：淡入淡出動畫 */
    animation: cross-fade 6s infinite ease-in-out;
}

/* 大腦層 (時間軸前半) */
.layer-brain {
    animation-delay: 0s;
}

/* 晶片層 (時間軸後半，稍微錯開) */
.layer-chip {
    animation-delay: -3s; /* 讓它跟大腦交替出現 */
}

/* 淡入淡出動畫關鍵影格 */
@keyframes cross-fade {
    0%, 40% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    45%, 95% { opacity: 0; transform: scale(0.8) translateY(5px); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ★ SVG 3D 質感設定 ★ */
.svg-3d {
    width: 56px; height: 56px;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 投影：營造懸浮感 */
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}
/* 修改 Log Icon 樣式，適配 SVG */
.log-icon-svg {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent); /* 讓圖標變成強調色 */
    flex-shrink: 0; /* 防止被擠壓 */
}

/* 讓 SVG 充滿容器 */
.log-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* 正在執行的行，圖標可以亮一點 */
.log-row.active .log-icon-svg {
    color: var(--primary); /* 或者保持 Accent，看你喜歡 */
    filter: drop-shadow(0 0 5px var(--accent)); /* 增加發光感 */
}

/* 大腦：主色調 */
.svg-brain {
    stroke: var(--primary);
}
/* 晶片：強調色 */
.svg-chip {
    stroke: var(--accent);
}

/* 內部微動畫：讓線條動起來 */
.inner-pulse { animation: path-glow 2s infinite alternate; }
@keyframes path-glow { 0% { opacity: 0.4; } 100% { opacity: 1; } }


/* ====================
   3. 資訊面板
   ==================== */
.header-text { flex: 1; }
.main-status {
    font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
}
.sub-status { font-size: 0.85rem; color: var(--text-muted); }
.thinking-progress-track {
    height: 3px; 
    width: 100%; 
    background: var(--border);
    margin-bottom: 16px; 
    border-radius: 2px; 
    overflow: hidden;
}

.thinking-progress-fill {
    height: 100%; 
    background: var(--accent); 
    width: 0%;
    box-shadow: 0 0 10px var(--accent); 
    transition: width 0.3s ease;
}

/* 修改 Log 列表容器 */
.log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    
    /* ★ 新增：限制高度並開啟滾動 ★ */
    max-height: 140px; /* 約顯示 5-6 行，超過就 Scroll */
    overflow-y: auto;  /* 開啟垂直滾動 */
    padding-right: 6px; /* 避免文字貼到 Scrollbar */
    
    /* Firefox Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* ★ 新增：Webkit (Chrome/Safari) Scrollbar 美化 - 配合 Cyberpunk 風格 ★ */
.log-list::-webkit-scrollbar {
    width: 4px; /* 極細 */
}

.log-list::-webkit-scrollbar-track {
    background: transparent; /* 軌道透明 */
}

.log-list::-webkit-scrollbar-thumb {
    background-color: var(--accent); /* 使用你的強調色 (綠色) */
    border-radius: 4px;
    opacity: 0.5;
}

.log-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary); /* Hover 變色 */
}
.log-list { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.log-row { display: flex; align-items: center; gap: 12px; color: var(--text-muted); opacity: 0.5; transition: all 0.3s; }
.log-row.active { opacity: 1; color: var(--text-primary); font-weight: 600; transform: translateX(6px); }

.tag-area { margin-left: 28px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.info-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--primary);
    animation: popIn 0.3s;
}
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   ★ 對話時間軸導航 (Timeline Minimap - 終極破解結界版)
   ============================================================ */
.chat-timeline {
    position: absolute;
    right: 15px; 
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 全部向右靠齊 */
    gap: 8px;
    z-index: 100;
    pointer-events: none;
}

/* 頂部/底部導航按鈕 */
.timeline-nav-btn {
    width: 22px;
    height: 22px;
    margin-right: 4px; /* 完美中軸線 = 4 + (22/2) = 15px */
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    font-size: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 2;
}

.timeline-nav-btn:hover {
    color: var(--primary, #1a3d2e);
    border-color: var(--primary, #1a3d2e);
    transform: scale(1.15);
}

/* 🌟 核心防斬魔法：給予 500px 的「隱形結界」空間 */
.timeline-dots-wrapper {
    padding-left: 500px; /* 👈 留足 500px 空間，確保多長嘅字都唔會被切 */
    margin-left: 0px; /* 👈 抵銷 padding，唔會阻住其他排版 */
    
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding-top: 30px;
    padding-bottom: 30px;
    
    max-height: 50vh;
    overflow-y: auto; 
    overflow-x: hidden; /* 這個會切斷超出 padding-box 的內容 */
    pointer-events: none;
    position: relative;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.timeline-dots-wrapper::-webkit-scrollbar {
    display: none;
}

/* 貫穿點點的垂直線 */
.timeline-dots-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14px; /* 完美中軸線 = 14 + (2/2) = 15px */
    width: 2px;
    background: var(--border-sub, #e2e8f0);
    z-index: 0;
}

/* 點點樣式 */
.timeline-dot {
    width: 12px;
    height: 12px;
    margin-right: 9px; /* 完美中軸線 = 9 + (12/2) = 15px */
    border-radius: 50%;
    background-color: var(--border, #cbd5e1);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 0 0 3px var(--bg-primary, #0b0f1a); 
    z-index: 1;
}

.timeline-dot:hover {
    background-color: var(--primary, #1a3d2e);
    transform: scale(1.4);
}

/* Hover 時彈出的對話預覽文字 */
.timeline-dot::before, .timeline-nav-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 25px; 
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1e293b);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--border-sub, #e2e8f0);
    pointer-events: none;
    z-index: 10;
    max-width: 280px; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-dot:hover::before, .timeline-nav-btn:hover::before {
    opacity: 1;
    visibility: visible;
    right: 20px; 
}

/* 飛去該對話時的閃動提示 */
@keyframes flash-highlight {
    0% { box-shadow: 0 0 0 0 rgba(45, 95, 63, 0.4); background-color: rgba(45, 95, 63, 0.05); }
    70% { box-shadow: 0 0 0 10px rgba(45, 95, 63, 0); background-color: transparent; }
    100% { box-shadow: 0 0 0 0 rgba(45, 95, 63, 0); background-color: transparent; }
}

.flash-nav-target {
    animation: flash-highlight 1.5s ease-out;
    border-radius: 8px;
}

/* ==========================================
   📱 手機版時間軸優化
   ========================================== */
@media screen and (max-width: 768px) {
    .chat-timeline { 
        display: flex !important; /* 🌟 解封！ */
        transform: translateY(-50%) scale(0.85); /* 稍微縮細到 85%，唔好太霸道 */
        transform-origin: right center;
        opacity: 0.6; /* 預設半透明，降低視覺干擾 */
        transition: opacity 0.3s ease;
    }
    /* 當手指掂到時間軸時，恢復全清晰 */
    .chat-timeline:active {
        opacity: 1;
    }
    /* 手機無 Hover，直接隱藏預覽文字框，保持畫面乾淨 */
    .timeline-dot::before, .timeline-nav-btn::before { 
        display: none !important; 
    }
}

/* ==========================================================================
   📱 手機版輸入框防擠壓 (Out of screen 終極修復)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 減少外層與內層的超大 Padding，釋放超過 40px 的橫向螢幕空間 */
    .chat-input-wrapper {
        padding: 0 10px !important;
    }
    
    .input-container {
        padding: 12px 14px 10px 14px !important; /* 左右減到 14px */
    }

    /* 2. 允許工具列自動換行 (Flex Wrap 絕對防線) */
    /* 如果真係唔夠位，按鈕或 Tokens 咪錶會自動跌落下一行，保證唔會飛出界 */
    .input-actions, .input-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .toolbar-left {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* 3. (選用) 將的士咪錶嘅「Tokens」字眼喺手機版收埋，進一步慳位 */
    /* 咁樣只會見到「🚖 302,770」，夠晒簡潔 */
    .meter-unit {
        display: none !important;
    }
}

/* Contract-inspired legal Q&A surface; message and citation markup stays unchanged. */
#conversationDisplay,
.chat-input-wrapper { max-width: 920px; }

.chat-main { background: transparent; }

.chat-page-container { background: transparent !important; }

.ai-header {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--lex-gold);
    border-radius: 3px 3px 0 0;
    background: var(--letterhead-bg);
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--letterhead-bg) 94%, transparent),
        color-mix(in srgb, var(--letterhead-bg) 82%, transparent) 62%,
        color-mix(in srgb, var(--letterhead-bg) 85%, var(--lex-gold)));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-on-dark) 18%, transparent),
        0 4px 14px color-mix(in srgb, var(--shadow-color) 45%, transparent);
    flex-wrap: wrap;
    box-sizing: border-box;
    color: var(--text-on-dark);
    font-family: 'Noto Serif TC', 'PMingLiU', Georgia, serif;
}
.ai-header svg { color: var(--lex-gold); }

.user-message {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: fit-content;
    max-width: 80%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}
.user-message .message-content { color: var(--text-primary) !important; }
.user-message .message-content.user-message-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--aq-glass-line);
    border-radius: 4px 4px 0 4px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bg-active) 40%, var(--aq-glass-surface)) 0%,
        var(--aq-glass-surface) 58%,
        color-mix(in srgb, var(--bg-primary) 18%, var(--aq-glass-surface)) 100%) !important;
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(125%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(125%);
    box-shadow: 0 4px 16px var(--shadow-color);
}
.user-message .user-message-bubble a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.user-message .user-message-bubble a:focus-visible {
    outline: 2px solid var(--lex-gold);
    outline-offset: 3px;
}
.user-message-meta {
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.assistant-message > .message-content:not(.casual-bubble) > .answer-body {
    margin: 0;
    padding: 20px clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(315deg,
        color-mix(in srgb, var(--bg-active) 40%, var(--aq-glass-surface)) 0%,
        var(--aq-glass-surface) 58%,
        color-mix(in srgb, var(--bg-primary) 18%, var(--aq-glass-surface)) 100%);
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    box-shadow: 0 8px 24px var(--shadow-color);
    color: var(--text-primary);
}
.assistant-message > .message-content:not(.casual-bubble) > .answer-body > .legal-answer-body {
    margin-bottom: 14px;
    line-height: 1.82;
}
.assistant-message .message-content.casual-bubble {
    border-radius: 3px 8px 8px 8px;
    background: linear-gradient(315deg,
        color-mix(in srgb, var(--bg-active) 40%, var(--aq-glass-surface)) 0%,
        var(--aq-glass-surface) 58%,
        color-mix(in srgb, var(--bg-primary) 18%, var(--aq-glass-surface)) 100%);
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    box-shadow: 0 3px 12px var(--shadow-color);
}

.ai-thinking-dashboard {
    border-color: var(--aq-glass-line);
    border-left-color: var(--lex-gold);
    border-radius: 3px;
    background: var(--aq-glass-surface);
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    box-shadow: 0 5px 18px var(--shadow-color);
}
.ai-thinking-dashboard.is-collapsed {
    min-height: 42px;
    max-height: 42px;
    margin: 0 0 8px;
    border: 1px solid var(--aq-glass-line);
    border-left: 3px solid var(--lex-gold);
    background: var(--aq-glass-surface);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.ai-thinking-dashboard.is-collapsed .thinking-summary-bar { height:42px; padding:0 12px; }
.thinking-summary-bar { display:flex; opacity:1; pointer-events:auto; transform:none; }
.summary-time { background:color-mix(in srgb,var(--bg-card) 55%,transparent); }

.chat-input-area {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.chat-page-container:not(.welcome-mode) > .chat-main {
    min-height: 0;
    padding-bottom: 44px;
    -webkit-mask-image: linear-gradient(to bottom, var(--text-primary) calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, var(--text-primary) calc(100% - 28px), transparent 100%);
    mask-mode: alpha;
}
.chat-page-container:not(.welcome-mode) > .chat-input-area {
    padding-top: 16px;
}
.chat-page-container.welcome-mode .chat-input-area {
    background: transparent !important;
    background-image: none !important;
    border-top: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.chat-page-container.welcome-mode .input-container,
.chat-page-container.welcome-mode .input-container:focus-within {
    background: var(--aq-glass-surface) !important;
    background-color: var(--aq-glass-surface) !important;
    border-color: var(--aq-glass-line) !important;
    -webkit-backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--aq-glass-blur)) saturate(150%);
}
.input-container {
    min-height: 112px;
    padding: 14px 16px 12px;
    border-radius: 4px;
    background: 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%);
    box-shadow: 0 5px 18px var(--shadow-color);
}

@media (max-width: 768px) {
    .assistant-message > .message-content:not(.casual-bubble) > .answer-body {
        padding: 16px 14px;
    }
    .user-message { max-width: 90%; }
}