/**
 * AI 對話式學習平台 - 無障礙樣式表
 * 
 * WCAG 2.2 AA/AAA 標準遵循：
 * - 1.4.3 Contrast (Minimum) - 文字對比度至少 4.5:1
 * - 1.4.6 Contrast (Enhanced) - AAA 目標 7:1
 * - 2.4.7 Focus Visible - 可見的焦點指示器
 * - 1.4.11 Non-text Contrast - 非文字對比度（按鈕邊框等）
 */

/* ============================================================
   CSS Custom Properties (設計系統變數)
   ============================================================ */
:root {
     /* 色彩系統：AAA 等級高對比 - 預設暗色模式 */
     --color-bg-primary: #1E1E1E;
     --color-bg-secondary: #252526;
     --color-bg-tertiary: #333333;
     
     --color-text-primary: #F0F0F0;       /* 對比度 ~15:1 */
     --color-text-secondary: #D0D0D0;     /* 對比度 ~11:1 */
     --color-text-muted: #B0B0B0;         /* 對比度 ~8.5:1 (AAA) */
     
     --color-accent-primary: #4DA3FF;     /* 主色（按鈕/連結）*/
     --color-accent-hover: #7AB7FF;       /* 懸停亮色 */
     --color-accent-active: #AAD1FF;      /* 按下最亮色 */
     
     --color-success: #66BB6A;            /* 成功綠色（高對比） */
     --color-warning: #FFCA28;            /* 警告橘色 */
     --color-error: #EF5350;              /* 錯誤紅色 */
     
     /* 邊框與分隔線（vector.css / admin.css 使用） */
     --color-border: #555555;             /* 一般邊框色 */
     --color-border-light: #444444;       /* 淺色邊框 */
     --color-primary: #4DA3FF;            /* 主色別名（vector.css 使用） */
     --color-primary-dark: #3A8FEF;       /* 主色深色變體 */
     --color-primary-10: rgba(77, 163, 255, 0.1); /* 主色 10% 透明度 */
     
     /* 焦點指示器：WCAG 2.4.7 Focus Visible */
     --focus-outline-color: #4DA3FF;
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
    
    /* 間距系統 */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-xxl: 3rem;     /* 48px */
    
    /* 字體系統：避免過小字體，最小 16px */
    --font-family-base: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --font-size-sm: 0.875rem;   /* 14px（僅用於次要說明） */
    --font-size-base: 1rem;     /* 16px 標準字體 */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-xxl: 2rem;      /* 32px */
    
    /* 邊框與圓角 */
    --border-width: 2px;       /* WCAG 1.4.11 - 可見邊框 */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    
    /* 過渡動畫（減少動畫偏好支援） */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

/* ============================================================
   Reset & Base Styles
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%; /* 尊重使用者瀏覽器預設字體大小 */
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    min-height: 100vh;
    height: 100%;
}

/* ============================================================
   Skip Links：WCAG 2.4.1 Bypass Blocks
   預設隱藏，取得焦點時顯示
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    z-index: 1000;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-accent-primary);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: var(--focus-outline-width) solid #FFFFFF;
outline-offset: calc(-1 * var(--focus-outline-width));
}

/* ============================================================
   Visually Hidden（視覺隱藏但螢幕閱讀器可見）
   WCAG 1.3.1 Info and Relationships
   ============================================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Focus Styles：WCAG 2.4.7 Focus Visible
   所有可互動元素都有明顯的焦點指示器
   ============================================================ */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* 移除預設 focus ring（Chrome），改用自訂 */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none; /* 先移除 */
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* ============================================================
   Page Layout
   使用 [hidden] attribute 控制頁面顯示/隱藏
   .active class 作為輔助狀態標記
   ============================================================ */
.page {
    display: none;
    min-height: 100vh;
    height: 100%;
}

.page.active {
    display: flex;
    flex-direction: column;
}

/* 強制 [hidden] 屬性優先級高於 .active */
.page[hidden] {
    display: none !important;
}

/* ============================================================
   Auth Page (登入 / 註冊)
   ============================================================ */
#auth-page {
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.auth-container {
    width: 100%;
    max-width: 480px;
    background-color: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-text-muted);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xxl);
}

.auth-container h1 {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
}

.auth-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
}

/* 狀態訊息 */
.status-message {
    min-height: 1.5em;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    text-align: center;
}

.status-message.error {
    background-color: #FFEBEE;
    color: var(--color-error);
    border: var(--border-width) solid var(--color-error);
}

.status-message.success {
    background-color: #E8F5E9;
    color: var(--color-success);
    border: var(--border-width) solid var(--color-success);
}

.status-message.warning {
    background-color: #FFF8E1;
    color: var(--color-warning);
    border: var(--border-width) solid var(--color-warning);
}

/* 表單樣式 */
.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-accent-primary);
    padding-bottom: var(--spacing-sm);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-text-muted);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast);
}

.form-group input:focus {
    border-color: var(--color-accent-primary);
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.auth-switch {
    text-align: center;
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
}

.auth-switch a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

.auth-switch a:hover {
    color: var(--color-accent-hover);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: bold;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), 
                color var(--transition-fast),
                border-color var(--transition-fast);
    min-height: 48px; /* WCAG 2.5.8 Target Size - 最小點擊區域 */
    min-width: 48px;
}

.btn-primary {
    background-color: var(--color-accent-primary);
    color: #FFFFFF;
    border-color: var(--color-accent-primary);
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--color-accent-active);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-tertiary);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    min-height: 36px;
    min-width: 36px;
}

/* 圖示按鈕 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    font-size: var(--font-size-lg);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    background-color: transparent;
    min-height: 48px;
    min-width: 48px;
    transition: background-color var(--transition-fast);
}

.btn-icon:hover {
    background-color: var(--color-bg-tertiary);
}

/* btn-primary + btn-icon 組合（如送出按鈕）使用藍色背景 */
.btn-primary.btn-icon {
    background-color: var(--color-accent-primary);
    color: #FFFFFF;
    border-color: var(--color-accent-primary);
}

.btn-primary.btn-icon:hover:not(:disabled) {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-primary.btn-icon:active:not(:disabled) {
    background-color: var(--color-accent-active);
}

/* ============================================================
   Chat Page（主對話畫面）
   使用 flexbox 垂直佈局：header → chat-container → footer
   ============================================================ */
#chat-page.active {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header - 頂部導航列 */
header[role="banner"] {
    background-color: var(--color-bg-primary);
    border-bottom: var(--border-width) solid var(--color-text-muted);
    padding: var(--spacing-md) var(--spacing-lg);
    flex-shrink: 0;
    z-index: 10;
}

.header-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

#site-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-greeting {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* Chat Container - 主對話區域（預設包含側邊欄的橫向佈局） */
.chat-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    max-width: none;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    min-height: 0; /* 允許 flex 子元素縮小 */
    overflow: hidden;
}

/* 當側邊欄關閉時的純對話佈局（目前不使用，保留給未來擴展） */
.chat-container.without-sidebar {
    flex-direction: column;
    max-width: 900px;
    padding: var(--spacing-md);
}

/* Messages Area - 訊息列表區域 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
    background-color: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-text-muted);
    border-bottom: none;
    min-height: 0; /* 允許 flex 子元素縮小 */
}

/* Message Bubbles - 訊息氣泡 */
.message {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    line-height: 1.6;
    max-width: 85%;
    word-wrap: break-word;
}

.message p {
    margin: 0 0 var(--spacing-xs) 0;
}

.message p:last-child {
    margin-bottom: 0;
}

/* 使用者訊息 - 靠左顯示 */
.user-message {
    background-color: #1A3A5C;     /* 暗色模式使用深藍色背景 */
    color: var(--color-text-primary);
    border-left: 4px solid var(--color-accent-primary);
    margin-left: 0;
    margin-right: auto;
}

/* AI 訊息 - 靠右顯示 */
.ai-message {
    background-color: #1A3D26;     /* 暗色模式使用深綠色背景 */
    color: var(--color-text-primary);
    border-left: 4px solid var(--color-success);
    margin-right: 0;
    margin-left: auto;
}

/* 系統訊息 - 置中顯示 */
.system-message {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    background-color: transparent;
    border: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Input Area - 輸入區域 */
.input-container {
    background-color: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-text-muted);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    flex-shrink: 0;
}

/* Chat Form */
#chat-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Input Row - 輸入列（textarea + 按鈕） */
.input-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

#chat-input {
    flex: 1;
    min-height: 48px;
    max-height: 150px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    line-height: 1.5;
    border: var(--border-width) solid var(--color-text-muted);
    border-radius: var(--border-radius-sm);
    resize: none;
    overflow-y: auto;
}

#chat-input:focus {
    border-color: var(--color-accent-primary);
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* 輸入列按鈕 */
.input-row .btn-icon,
.input-row .btn-primary.btn-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* TTS Controls - 語音朗讀控制 */
.tts-controls {
    display: flex;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-bg-tertiary);
    flex-wrap: wrap;
}

/* Voice Status - 語音狀態指示器 */
.voice-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    min-height: 1.5em;
}

.voice-status.voice-ready {
    color: var(--color-success);
}

.voice-status.voice-listening {
    color: var(--color-accent-primary);
    animation: voice-pulse 1.5s ease-in-out infinite;
}

.voice-status.voice-error {
    color: var(--color-error);
}

.voice-status.voice-retrying {
    color: var(--color-warning);
}

@keyframes voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Footer - 底部狀態列 */
footer[role="contentinfo"] {
    padding: var(--spacing-xs) var(--spacing-md);
    text-align: center;
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-bg-tertiary);
    flex-shrink: 0;
}

.system-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    min-height: 1.2em;
}

/* ============================================================
   History Sidebar - 對話紀錄側邊欄（預設顯示）
   ============================================================ */
.history-sidebar {
    width: 280px;
    min-width: 280px;
    background-color: var(--color-bg-primary);
    border-right: var(--border-width) solid var(--color-text-muted);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* 保留 [hidden] 規則給未來擴展使用 */
.history-sidebar[hidden] {
    display: none !important;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-bg-tertiary);
    flex-shrink: 0;
}

#sidebar-title {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0;
}

#new-chat-btn {
    width: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
    min-height: 0;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border: 1px solid transparent;
}

.history-item:hover {
    background-color: var(--color-bg-secondary);
}

.history-item:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.history-item.active {
    background-color: #1A3A5C;     /* 暗色模式使用深藍色背景 */
    border-color: var(--color-accent-primary);
}

/* 刪除按鈕保持錯誤紅色 */
.history-item.active .history-item-delete {
    color: var(--color-error);
}

.history-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.history-item-title {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.history-item-delete {
    padding: var(--spacing-xs);
    min-width: 32px;
    min-height: 32px;
    color: var(--color-error);       /* 錯誤紅色，與深色背景高對比 */
    opacity: 0.85;                   /* 提高透明度，確保可見度 */
    transition: opacity var(--transition-fast), 
                color var(--transition-fast);
}

.history-item-delete:hover {
    opacity: 1;
    color: #FF8A80;                  /* 懸停時更亮的紅色 */
}

.history-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-muted);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--spacing-md);
}

/* ============================================================
   Responsive Design - 響應式設計
   斷點設定：
   - 手機：max-width 768px
   - 平板：max-width 1024px（針對橫向平板）
   - 小螢幕手機：max-width 480px
   ============================================================ */

/* ---- 側邊欄切換按鈕（僅在手機上顯示）---- */
#sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 100;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--color-accent-primary);
    color: #FFFFFF;
    border: var(--border-width) solid var(--color-accent-primary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-lg);
    cursor: pointer;
}

#sidebar-toggle-btn:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* ---- 側邊欄遮罩（手機模式）---- */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 49;
}

.sidebar-overlay.active {
    display: block;
}

/* ---- 平板斷點（max-width: 1024px）---- */
@media (max-width: 1024px) {
    /* 側邊欄寬度縮小 */
    .history-sidebar {
        width: 240px;
        min-width: 240px;
    }

    /* Header 標題稍微縮小 */
    #site-title {
        font-size: var(--font-size-base);
    }

    /* 使用者問好在平板上縮小字體 */
    .user-greeting {
        font-size: var(--font-size-sm);
    }
}

/* ---- 手機斷點（max-width: 768px）---- */
@media (max-width: 768px) {
    :root {
        --spacing-xxl: 2rem;
    }

    /* 顯示側邊欄切換按鈕 */
    #sidebar-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Header 增加左邊距以避開切換按鈕 */
    header[role="banner"] {
        padding-left: var(--spacing-xl);
    }

    .header-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    /* 側邊欄改為抽屜式（預設隱藏） */
    .history-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        min-width: 280px;
        height: 100vh;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        box-shadow: none;
    }

    /* 側邊欄展開狀態 */
    .history-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    }

    /* 主內容區域佔滿全寬 */
    .chat-container {
        flex-direction: column;
    }

    .chat-main {
        padding: var(--spacing-sm);
    }

    /* 訊息氣泡在手機上佔滿更多空間 */
    .message {
        max-width: 95%;
    }

    /* 登入頁面容器調整 */
    #auth-page {
        padding: var(--spacing-md);
    }

    .auth-container {
        padding: var(--spacing-lg);
    }

    .auth-container h1 {
        font-size: var(--font-size-lg);
    }

    /* TTS 控制按鈕調整 */
    .tts-controls {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .tts-controls .btn-secondary {
        width: 100%;
    }

    /* 輸入區域調整 */
    .input-container {
        padding: var(--spacing-sm);
    }

    /* Footer 調整 */
    footer[role="contentinfo"] {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ---- 小螢幕手機斷點（max-width: 480px）---- */
@media (max-width: 480px) {
    :root {
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
    }

    /* Header 調整 */
    header[role="banner"] {
        padding-left: var(--spacing-lg);
        padding-top: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }

    #site-title {
        font-size: var(--font-size-base);
    }

    .header-actions {
        gap: var(--spacing-xs);
    }

    .user-greeting {
        display: none; /* 小螢幕隱藏使用者問候 */
    }

    /* 側邊欄更窄 */
    .history-sidebar {
        width: 260px;
        min-width: 260px;
    }

    /* 登入頁面進一步調整 */
    #auth-page {
        padding: var(--spacing-sm);
    }

    .auth-container {
        padding: var(--spacing-md);
        border-radius: var(--border-radius-sm);
    }

    .auth-container h1 {
        font-size: var(--font-size-base);
    }

    .auth-subtitle {
        font-size: var(--font-size-sm);
    }

    .auth-form h2 {
        font-size: var(--font-size-base);
    }

    /* 表單元素調整 */
    .form-group input[type="text"],
    .form-group input[type="password"] {
        padding: var(--spacing-sm);
        font-size: var(--font-size-base); /* 保持字體不小於16px，避免iOS自動縮放 */
    }

    /* 按鈕調整 */
    .btn-primary,
    .btn-secondary {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-base);
    }

    .btn-small {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* 圖示按鈕調整 */
    .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .input-row .btn-icon,
    .input-row .btn-primary.btn-icon {
        width: 44px;
        height: 44px;
    }

    /* 輸入框調整 */
    #chat-input {
        min-height: 44px;
        padding: var(--spacing-sm);
    }

    /* 訊息氣泡進一步調整 */
    .message {
        max-width: 100%;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* TTS 控制按鈕 */
    .tts-controls .btn-small {
        font-size: var(--font-size-sm);
        min-height: 36px;
    }

    /* 側邊欄標題和按鈕 */
    .sidebar-header {
        padding: var(--spacing-sm);
    }

    #sidebar-title {
        font-size: var(--font-size-sm);
    }

    #new-chat-btn {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-xs);
    }

    /* 對話紀錄項目 */
    .history-item {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .history-item-title {
        font-size: var(--font-size-sm);
    }

    .history-item-delete {
        min-width: 28px;
        min-height: 28px;
    }
}

/* ---- 橫向手機模式（landscape）---- */
@media (max-width: 768px) and (orientation: landscape) {
    /* 橫向模式下側邊欄切換按鈕位置調整 */
    #sidebar-toggle-btn {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        width: 40px;
        height: 40px;
    }

    /* Header 在橫向模式下更緊湊 */
    header[role="banner"] {
        padding-left: var(--spacing-lg);
        padding-top: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
    }

    /* 對話訊息區域調整 */
    .chat-messages {
        padding: var(--spacing-sm);
    }

    /* 輸入區域在橫向模式下更緊湊 */
    .input-container {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    #chat-input {
        min-height: 40px;
    }
}

/* ---- 針對觸控裝置的優化---- */
@media (hover: none) and (pointer: coarse) {
    /* 增加按鈕的最小點擊區域 */
    .btn-primary,
    .btn-secondary {
        min-height: 48px;
        min-width: 48px;
    }

    .btn-small {
        min-height: 44px;
        min-width: 44px;
    }

    /* 對話紀錄項目的點擊區域 */
    .history-item {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 48px;
    }

    .history-item-delete {
        min-width: 44px;
        min-height: 44px;
    }

    /* 輸入列按鈕 */
    .input-row .btn-icon,
    .input-row .btn-primary.btn-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }

    /* TTS 控制按鈕 */
    #tts-toggle-btn,
    #auto-send-toggle-btn {
        min-height: 48px;
    }

    /* 登出按鈕 */
    #logout-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
    }
}

/* ---- 偏好減少動畫的使用者---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .history-sidebar {
        transition: none;
    }
}

/* ---- 高對比模式支援---- */
@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-text-secondary: #1A1A1A;
        --color-text-muted: #333333;
        --border-width: 3px;
    }

    .message {
        border-width: 3px;
    }

    .user-message {
        background-color: #CCE5FF;
    }

    .ai-message {
        background-color: #CCFFCC;
    }
}

/* ============================================================
    Light Mode（亮色模式）
    使用 [data-theme="light"] attribute 切換
    保持 WCAG 2.2 AA/AAA 對比度標準
    ============================================================ */
[data-theme="light"] {
     /* 背景色彩 - 亮色系 */
     --color-bg-primary: #FFFFFF;
     --color-bg-secondary: #F5F5F5;
     --color-bg-tertiary: #E8E8E8;
     
     /* 文字色彩 - 深色系，確保高對比度 */
     --color-text-primary: #1A1A1A;       /* 對比度 ~16:1 */
     --color-text-secondary: #333333;     /* 對比度 ~12:1 */
     --color-text-muted: #555555;         /* 對比度 ~7.5:1 (AAA) */
     
     /* 強調色 - 藍色系 */
     --color-accent-primary: #0056B3;     /* 主色（按鈕/連結）*/
     --color-accent-hover: #003D82;       /* 懸停深色 */
     --color-accent-active: #002A5C;      /* 按下最深色 */
     
     /* 狀態色 */
     --color-success: #1B7A26;            /* 成功綠色（高對比） */
     --color-warning: #8C6900;            /* 警告橘色 */
     --color-error: #C62828;              /* 錯誤紅色 */
     
     /* 焦點指示器 */
     --focus-outline-color: #0056B3;
}

/* 亮色模式下的特殊樣式覆蓋 */
[data-theme="light"] .auth-container {
    border-color: var(--color-text-muted);
}

[data-theme="light"] .status-message.error {
    background-color: #FFEBEE;
    color: var(--color-error);
    border-color: var(--color-error);
}

[data-theme="light"] .status-message.success {
    background-color: #E8F5E9;
    color: var(--color-success);
    border-color: var(--color-success);
}

[data-theme="light"] .status-message.warning {
    background-color: #FFF8E1;
    color: var(--color-warning);
    border-color: var(--color-warning);
}

[data-theme="light"] .form-group input[type="text"],
[data-theme="light"] .form-group input[type="password"] {
    border-color: var(--color-text-muted);
}

[data-theme="light"] .auth-form h2 {
    border-color: var(--color-accent-primary);
}

[data-theme="light"] .user-message {
    background-color: #E3F2FD;
    border-left-color: var(--color-accent-primary);
}

[data-theme="light"] .ai-message {
    background-color: #E8F5E9;
    border-left-color: var(--color-success);
}

[data-theme="light"] .history-item:hover {
    background-color: var(--color-bg-secondary);
}

[data-theme="light"] .history-item.active {
    background-color: #E3F2FD;
    border-color: var(--color-accent-primary);
}

[data-theme="light"] .sidebar-header {
    border-bottom-color: var(--color-bg-tertiary);
}

[data-theme="light"] .tts-controls {
    border-top-color: var(--color-bg-tertiary);
}

[data-theme="light"] footer[role="contentinfo"] {
    border-top-color: var(--color-bg-tertiary);
}

[data-theme="light"] .btn-secondary {
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
}

[data-theme="light"] .btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-tertiary);
}

[data-theme="light"] .btn-icon:hover {
    background-color: var(--color-bg-tertiary);
}

/* 主題切換按鈕樣式 */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-lg);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    background-color: transparent;
    min-height: 40px;
    min-width: 40px;
    transition: background-color var(--transition-fast);
}

.theme-toggle-btn:hover {
    background-color: var(--color-bg-tertiary);
}

/* 系統暗色模式偏好支援 */
@media (prefers-color-scheme: light) {
    /* 當使用者系統設定為亮色模式時，若未手動選擇主題則仍可自動套用亮色 */
    :root:not([data-theme]) {
        /* 預設已為暗色模式，不強制覆蓋
           若想自動偵測系統偏好可解註以下區塊 */
        /* --color-bg-primary: #FFFFFF;
        --color-bg-secondary: #F5F5F5; */
    }
}

/* ============================================================
   Stream 模式 - 打字動畫樣式
   ============================================================ */

/* AI 訊息的 streaming 狀態 */
.message.ai-message.streaming {
    border-left: 3px solid var(--color-accent-primary, #4A90D9);
}

/* 打字指示器容器 */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: var(--color-bg-secondary, #2D3748);
    border-radius: var(--border-radius-md, 8px);
}

/* 打字圓點 */
.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent-primary, #4A90D9);
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

/* 三個圓點的動畫延遲 */
.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* 打字圓點跳動動畫 */
@keyframes typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* 當有內容時隱藏 typing indicator */
.message.ai-message.streaming .message-content:not(:empty) ~ .typing-indicator {
    display: none;
}

/* ============================================================
   音量等級指示條（STT 語音辨識收音視覺回饋）
   ============================================================ */

/* 音量條容器 */
.audio-level-bar {
    width: 100%;
    height: 6px;
    background-color: var(--color-bg-tertiary, #444);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}

/* 音量條填充 */
.audio-level-fill {
    height: 100%;
    border-radius: 3px;
    background-color: var(--color-success, #66BB6A);
    transition: width 0.1s linear, background-color 0.3s ease;
    /* 低音量時由 JS 動態設定顏色類別 */
}

/* 低音量 (< 20%) - 紅色警示 */
.audio-level-fill.level-low {
    background-color: var(--color-error, #EF5350);
}

/* 中音量 (20% ~ 60%) - 黃色注意 */
.audio-level-fill.level-medium {
    background-color: var(--color-warning, #FFCA28);
}

/* 高音量 (> 60%) - 綠色正常 */
.audio-level-fill.level-high {
    background-color: var(--color-success, #66BB6A);
}