/* filepath: /Users/user/Documents/CODE/demo/css/style.css */

/* --- 字体引入 --- */
/* 真实字体源引入 */
@font-face {
    font-family: 'HanQiZaiMinTi';
    src: url('https://cdn.jsdelivr.net/gh/Warren2060/HanQi-ZaiMinTi@main/fonts/HanQiZaiMinTi-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JiangXiZhuoKai';
    src: url('https://cdn.jsdelivr.net/gh/lxgw/LxgwWenKai@latest/fonts/LXGWWenKai-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HanQiZaiMinTi-Real';
    src: url('https://cdn.jsdelivr.net/gh/chinese-fonts-web/chinese-fonts@latest/packages/hanqi-zaimin/dist/HanQiZaiMinTi-Regular.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/zhimangxing/v11/f0Xw0eqj68ppQV9KBLmAoUiB.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ShangTuDongGuanTi';
    src: url('https://cdn.jsdelivr.net/gh/lxgw/LxgwWenKai@latest/fonts/LXGWWenKaiMono-Regular.woff2') format('woff2'),
         url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono+SC:wght@400&display=swap') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- 1. 基础样式 --- */
:root {
    /* 基础颜色 */
    --bg-color: #ffffff;
    --text-color: #1f2937;
    --title-color: #111827;
    --subtle-text-color: #6b7280;
    --section-bg-color: #f9fafb;
    --border-color: #e5e7eb;
    --button-bg-color: #f3f4f6;
    --button-text-color: #1f2937;
    --highlight-color: rgba(250, 204, 21, 0.3);
    --original-font-size: 1.35rem;
    
    /* 组件样式 */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --border-radius: 4px;
    --spacing-unit: 8px;
    --transition-speed: 0.3s;
    
    /* 布局尺寸 */
    --content-width: 800px;
    --sidebar-width: 280px;
    --header-height: 60px;
    --footer-height: 60px;
    
    /* z-index层级 */
    --z-index-header: 1000;
    --z-index-sidebar: 900;
    --z-index-modal: 1100;
    --z-index-dropdown: 1050;
    --z-index-tooltip: 1200;
    
    /* 过渡变量 */
    --parallax-transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* 阴影变量 */
    --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 间距变量 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* 字体变量 */
    --primary-font: 'Noto Serif SC', serif;
    --secondary-font: 'Noto Sans SC', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

/* 暗色主题变量 */
html.dark, [data-theme="dark"] {
    --bg-color: #141519;
    --text-color: #d1d5db;
    --title-color: #f9fafb;
    --subtle-text-color: #9ca3af;
    --section-bg-color: #1f2937;
    --border-color: #374151;
    --button-bg-color: #374151;
    --button-text-color: #f9fafb;
    --highlight-color: rgba(250, 204, 21, 0.2);
    --hover-bg-color: #333;
    --active-bg-color: #444;
}

html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--bg-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: 1.5; transition: background-color 0.3s, color 0.3s; }

/* --- 2. 布局 --- */
.container { 
    max-width: 80rem; 
    margin: auto; 
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 2); 
}

.chapter-grid { 
    display: flex; 
    flex-direction: column; 
}

.original-column { 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
}

@media (min-width: 768px) {
    .chapter-grid { 
        flex-direction: row; 
        gap: calc(var(--spacing-unit) * 4); 
    }
    
    .original-column, .translation-column { 
        width: 50%; 
        transition: width var(--transition-speed) ease-in-out; 
    }
    
    .translation-column { 
        padding-left: calc(var(--spacing-unit) * 4); 
        border-left: 1px solid var(--border-color); 
        transition: border-color var(--transition-speed), 
                    opacity var(--transition-speed), 
                    width var(--transition-speed); 
    }
    
    body.hide-translation .translation-column { 
        display: none; 
    }
    
    body.hide-translation .original-column { 
        width: 100%; 
    }
    
    body.hide-translation .chapter-grid { 
        justify-content: center; 
    }
    
    html.dark .translation-column {
        border-left-color: var(--dark-mode-border);
    }
}

@media (max-width: 767px) {
    .translation-column { 
        border-left: none; 
        padding-left: 0; 
        margin-top: calc(var(--spacing-unit) * 4); 
        padding-top: calc(var(--spacing-unit) * 4); 
        border-top: 1px solid var(--border-color); 
        transition: opacity var(--transition-speed), 
                    height var(--transition-speed),
                    border-color var(--transition-speed); 
    }
    
    body.hide-translation .translation-column { 
        display: none; 
    }
    
    html.dark .translation-column {
        border-top-color: var(--dark-mode-border);
    }
}

/* --- 3. 元素 --- */
header { 
    text-align: center; 
    margin-bottom: calc(var(--spacing-unit) * 6); 
}

header h1 { 
    font-size: 2.25rem; 
    font-weight: 700; 
    color: var(--title-color); 
    transition: color var(--transition-speed);
}

section { 
    margin-bottom: calc(var(--spacing-unit) * 8); 
    padding: calc(var(--spacing-unit) * 3); 
    background-color: var(--section-bg-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow); 
    transition: background-color var(--transition-speed), 
                border-color var(--transition-speed), 
                box-shadow var(--transition-speed); 
    border: 2px solid transparent; 
}

section.highlight { 
    border-color: var(--highlight-color); 
    box-shadow: 0 0 15px var(--highlight-color); 
}

.chapter-title-wrapper { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: calc(var(--spacing-unit) * 2); 
    border-bottom: 1px solid var(--border-color); 
    margin-bottom: calc(var(--spacing-unit) * 3); 
    padding-bottom: calc(var(--spacing-unit) * 2); 
    transition: border-color var(--transition-speed); 
}

section h3 { 
    font-size: 1.5rem; 
    font-weight: 400; 
    margin: 0; 
    color: var(--subtle-text-color); 
    transition: color var(--transition-speed);
}

.play-button { 
    background: none; 
    border: none; 
    cursor: pointer; 
    color: var(--subtle-text-color); 
    padding: calc(var(--spacing-unit) * 1); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.play-button:hover { 
    background-color: var(--button-bg-color); 
}

.play-button svg { 
    width: 24px; 
    height: 24px; 
}

.translation-text { 
    font-size: 1rem; 
    color: var(--text-color); 
    transition: color var(--transition-speed);
}

.translation-text p { 
    margin-top: 0; 
    margin-bottom: calc(var(--spacing-unit) * 1); 
}

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

/* 暗色主题通用样式 */
html.dark header h1,
html.dark section h3,
html.dark .translation-text,
html.dark .original-text {
    color: var(--text-color);
}

html.dark .play-button {
    color: var(--subtle-text-color);
}

html.dark .play-button:hover {
    background-color: var(--hover-bg-color);
}

/* --- 4. 原文样式 (字体和版式切换) --- */
.original-text { 
    font-size: var(--original-font-size); 
    color: var(--title-color); 
    transition: all var(--transition-speed); 
    font-weight: 400; /* 默认字重 */
}


/* 字体分类 */
/* 篆书类字体 */
body.font-yishan .original-text { 
    font-family: 'ZCOOL XiaoWei', 'STXihei', serif; 
    letter-spacing: 0.03em; 
}

body.font-zhuanshu .original-text { 
    font-family: 'ZCOOL QingKe HuangYou', 'STXihei', serif; 
    letter-spacing: 0.025em; 
}

/* 楷书类字体 */
body.font-jiangxi .original-text { 
    font-family: 'JiangXiZhuoKai', 'STKaiti', 'KaiTi', serif; 
    letter-spacing: 0.005em; 
}

body.font-chengrongguang .original-text { 
    font-family: 'Long Cang', 'STKaiti', serif; 
    letter-spacing: 0.01em; 
}

/* 宋体类字体 */
body.font-noto-serif .original-text { 
    font-family: 'Noto Serif SC', serif; 
}

body.font-siyuan-screen .original-text { 
    font-family: 'Noto Serif SC', serif; 
    font-weight: 700; 
    letter-spacing: 0.01em; 
}

body.font-zhuque .original-text { 
    font-family: 'FangSong', 'STFangsong', 'Noto Serif SC', serif; 
    letter-spacing: 0.008em; 
}

body.font-cactus .original-text { 
    font-family: 'Cactus Classical Serif', serif; 
}

/* 行书类字体 */
body.font-zhi-mang .original-text { 
    font-family: 'Zhi Mang Xing', cursive; 
}

body.font-huiwen .original-text { 
    font-family: '汇文明朝体', 'HuiWen-mincho', 'STSong', 'SimSun', 'FangSong', serif; 
    letter-spacing: 0.01em; 
}

body.font-hanqi .original-text { 
    font-family: 'HanQiZaiMinTi-Real', 'HanQiZaiMinTi', 'STKaiti', 'KaiTi', serif; 
    letter-spacing: 0.008em; 
}

/* 草书类字体 */
body.font-liu-jian .original-text { 
    font-family: 'Liu Jian Mao Cao', cursive; 
}

/* 现代字体 */
body.font-alibaba .original-text { 
    font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif; 
    letter-spacing: 0.01em; 
}

body.font-youshe .original-text { 
    font-family: 'YouSheBiaoTiHei', 'SimHei', 'Microsoft YaHei', sans-serif; 
    font-weight: 500; 
    letter-spacing: 0.02em; 
}

body.font-yufan .original-text { 
    font-family: 'ZCOOL KuaiLe', 'Microsoft YaHei', sans-serif; 
    letter-spacing: 0.015em; 
}

body.font-xiawu-black .original-text { 
    font-family: 'LXGW WenKai', 'LXGW WenKai TC', serif; 
    letter-spacing: 0.01em; 
}

body.font-shangtudong .original-text { 
    font-family: 'ShangTuDongGuanTi', 'LXGW WenKai Mono', 'STKaiti', monospace; 
    letter-spacing: 0.02em; 
}

/* 系统默认 */
body.font-system .original-text { 
    font-family: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'SimSun', serif; 
}
body.layout-vertical .original-text { writing-mode: vertical-rl; text-orientation: mixed; height: 500px; overflow-y: auto; padding: 0 1rem; line-height: 1.5; letter-spacing: 0.1em; }
body.layout-vertical .original-text p { margin-bottom: 0; margin-right: 0.6rem; margin-left: 0.4rem; margin-top: 0.1rem;}
body.layout-horizontal .original-text { writing-mode: horizontal-tb; height: auto; overflow-y: visible; line-height: 1.5; }
body.layout-horizontal .original-text p { margin-bottom: 0.5rem; 	margin-top: 0.1rem;}
@media (max-width: 767px) { body.layout-vertical .original-text { height: 400px; width: 100%; } }

/* --- 5. 功能按钮与面板 --- */

/* 底部导航栏 */
.bottom-controls {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
    z-index: var(--z-index-header);
    border-top: 1px solid var(--border-color);
}

html.dark .bottom-controls {
    background: rgba(20,20,20,0.95);
    border-top-color: var(--border-color);
}

.bottom-control-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    min-width: 48px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.bottom-control-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--button-bg-color);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 12px;
}

.bottom-control-button .control-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    z-index: 1;
    transition: transform 0.2s ease;
}

.bottom-control-button span {
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.bottom-control-button:hover::before {
    opacity: 1;
}

.bottom-control-button:hover .control-icon {
    transform: scale(1.1);
}

.bottom-control-button:active {
    transform: scale(0.95);
}

.bottom-control-button:active::before {
    opacity: 0.8;
}

html.dark .bottom-control-button::before {
    background: rgba(255,255,255,0.1);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .bottom-controls {
        padding: 10px 8px;
        gap: 2px;
    }
    
    .bottom-control-button {
        height: 52px;
        min-width: 52px;
        padding: 8px 6px;
        gap: 3px;
    }
    
    .bottom-control-button .control-icon {
        width: 24px;
        height: 24px;
    }
    
    .bottom-control-button span {
        font-size: 9px;
        max-width: 50px;
    }
}

@media (max-width: 480px) {
    .bottom-controls {
        padding: 12px 6px;
        gap: 1px;
    }
    
    .bottom-control-button {
        height: 56px;
        min-width: 56px;
        padding: 10px 4px;
        gap: 2px;
        border-radius: 14px;
    }
    
    .bottom-control-button .control-icon {
        width: 26px;
        height: 26px;
    }
    
    .bottom-control-button span {
        font-size: 8px;
        max-width: 45px;
    }
}

/* 安全区域适配（iPhone X及以上） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-controls {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    
    @media (max-width: 768px) {
        .bottom-controls {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
    }
    
    @media (max-width: 480px) {
        .bottom-controls {
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }
    }
}

/* 为底部按钮栏预留空间 */
main.container {
    padding-bottom: calc(var(--footer-height) + 72px);
}

.controls { 
    position: fixed; 
    top: 20rem; 
    right: 5px; 
    z-index: var(--z-index-dropdown); 
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--spacing-unit) * 0.75); 
}

.control-button { 
    width: 3rem; 
    height: 3rem; 
    background-color: var(--button-bg-color); 
    color: var(--button-text-color); 
    border-radius: 9999px; 
    box-shadow: var(--box-shadow); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none; 
    cursor: pointer; 
    font-size: 1.125rem; 
    font-weight: 700; 
    transition: opacity var(--transition-speed), 
                background-color var(--transition-speed), 
                color var(--transition-speed); 
    opacity: 0.4; 
}

.control-button:hover, 
.control-button:active, 
.control-button:focus {
    opacity: 1;
}

.control-button:focus { 
    outline: none; 
}

html.dark .control-button {
    background-color: var(--button-bg-color);
    color: var(--text-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html.dark .control-button:hover {
    background-color: var(--dark-mode-hover);
}

.control-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.bottom-sheet-panel { 
    visibility: hidden; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: var(--section-bg-color); 
    border-top: 1px solid var(--border-color); 
    border-top-left-radius: 1rem; 
    border-top-right-radius: 1rem; 
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1); 
    padding: calc(var(--spacing-unit) * 3); 
    z-index: var(--z-index-modal); 
    transform: translateY(100%); 
    transition: transform var(--transition-speed) ease-out, 
                visibility var(--transition-speed),
                background-color var(--transition-speed),
                border-color var(--transition-speed);
}

.bottom-sheet-panel.show { 
    visibility: visible; 
    transform: translateY(0); 
}

/* Unified close button for all bottom-sheet panels */
.bottom-sheet-panel .panel-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    z-index: 10;
}
.bottom-sheet-panel .panel-close-btn:hover {
    background-color: var(--button-bg-color);
}
html.dark .bottom-sheet-panel .panel-close-btn {
    color: var(--text-color);
}
html.dark .bottom-sheet-panel .panel-close-btn:hover {
    background-color: var(--hover-bg-color);
}

/* Dark theme: invert icons for better contrast without duplicating SVGs */
html.dark img.control-icon,
html.dark .bottom-control-button .control-icon,
html.dark .action-btn img,
html.dark .panel-close-btn img,
html.dark .voice-list .voice-item-btn img {
    filter: invert(1) brightness(1.1) contrast(1.05);
}

/* Fonts panel: 3-column grid and unified button layout */
#settings-menu #accordion-fonts .panel-section {
  display: flex;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 8px;
}

/* Ensure font buttons fill grid cells and align visually */
#settings-menu #accordion-fonts .font-option-btn {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Mobile: 2-column grid for fonts */
@media (max-width: 767px) {
  #settings-menu #accordion-fonts .panel-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 6px;
  }
}

/* 以道解惑面板关闭按钮样式 */
#close-gemini-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    z-index: 10;
}

#close-gemini-panel:hover {
    background-color: var(--button-bg-color);
}

html.dark #close-gemini-panel {
    color: var(--text-color);
}

html.dark #close-gemini-panel:hover {
    background-color: var(--hover-bg-color);
}

.panel-content-grid { 
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--spacing-unit) * 2); 
}

.panel-section { 
    display: flex; 
    gap: calc(var(--spacing-unit) * 0.5); 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    align-items: stretch;
}

html.dark .bottom-sheet-panel {
    background-color: var(--section-bg-color);
    border-color: var(--border-color);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
}

.font-option-btn, .setting-option-btn { 
    background-color: var(--button-bg-color); 
    border: none; 
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit); 
    color: var(--text-color); 
    cursor: pointer; 
    border-radius: var(--border-radius); 
    text-align: center; 
    font-size: 0.9rem; 
    transition: background-color var(--transition-speed), 
                transform var(--transition-speed),
                color var(--transition-speed); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: calc(var(--spacing-unit) * 0.5);
    /* 流式布局：统一大小 */
    flex: 0 0 calc(33.333% - 0.5rem);
    min-height: 3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .font-option-btn,
html.dark .setting-option-btn {
    background-color: var(--button-bg-color);
    color: var(--text-color);
}

html.dark .font-option-btn:hover,
html.dark .setting-option-btn:hover {
    background-color: var(--dark-mode-hover);
}

.font-option-btn:hover, .setting-option-btn:hover { 
    background-color: var(--border-color); 
}

.font-size-controls { 
    display: flex; 
    align-items: center; 
    justify-content: space-around; 
}

.panel-divider { 
    height: 1px; 
    background-color: var(--border-color); 
    margin: 0.5rem 0; 
}

.font-size-btn { 
    background-color: transparent; 
    border: 1px solid var(--border-color); 
    width: 2.5rem; 
    height: 2.5rem; 
    border-radius: 50%; 
    color: var(--text-color); 
    cursor: pointer; 
    font-size: 1.5rem; 
    line-height: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

#font-size-display { 
    font-size: 1rem; 
    color: var(--subtle-text-color); 
}

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 55; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s; 
}

.overlay.show { 
    opacity: 1; 
    visibility: visible; z-index: 1001;
}

#gemini-panel { 
    max-height: 90vh; 
    overflow-y: auto; 
}

#gemini-panel .panel-content-grid { 
    max-width: 700px; 
    margin: 0 auto; 
}

#gemini-panel h4 { 
    margin: 0; 
    font-size: 1.25rem; 
    color: var(--title-color); 
    text-align: center; 
    margin-bottom: 0.5rem; 
}

/* 对话历史区域 */
.chat-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.chat-history::-webkit-scrollbar {
    width: 6px;
}

.chat-history::-webkit-scrollbar-track {
    background: transparent;
}

.chat-history::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.chat-message {
    padding: 0.75rem;
    border-radius: 0.5rem;
    max-width: 90%;
    animation: fadeIn 0.3s ease-out;
}

.user-message {
    align-self: flex-end;
    background-color: #3b82f6;
    color: white;
    border-bottom-right-radius: 0;
}

.ai-message {
    align-self: flex-start;
    background-color: var(--button-bg-color);
    color: var(--text-color);
    border-bottom-left-radius: 0;
    white-space: pre-wrap;
    line-height: 1.7;
}

.message-time {
    font-size: 0.7rem;
    color: var(--subtle-text-color);
    margin-top: 0.25rem;
    text-align: right;
}

.ai-message .message-time {
    text-align: left;
}

.message-model {
    font-size: 0.7rem;
    color: var(--subtle-text-color);
    margin-top: 0.25rem;
    font-style: italic;
}

/* 输入区域 */
.input-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#user-question { 
    width: 100%; 
    box-sizing: border-box; 
    height: 80px; 
    padding: 0.75rem; 
    border-radius: 0.5rem; 
    border: 1px solid var(--border-color); 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    resize: vertical; 
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

#user-question:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.submit-row { 
    display: flex; 
    align-items: stretch; 
    width: 100%; 
}

.model-selection { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 60%; 
}

.model-selection label { 
    font-size: 0.9rem; 
    color: var(--subtle-text-color); 
    white-space: nowrap; 
    text-align: left; 
    margin-bottom: 0.25rem; 
}

.model-selection select { 
    padding: 0.5rem; 
    border-radius: 0.5rem; 
    border: 1px solid var(--border-color); 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    font-size: 0.9rem; 
    width: 70%; 
}

#submit-question-btn { 
    width: 30%; 
    margin-left: 10%; 
    padding: 0.75rem 0; 
    border-radius: 0.5rem; 
    border: none; 
    background-color: #3b82f6; 
    color: white; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    white-space: nowrap; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    overflow: hidden;
}

#submit-question-btn:hover {
    background-color: #2563eb;
}

#submit-question-btn:disabled { 
    background-color: #9ca3af; 
    cursor: not-allowed; 
}

.btn-text {
    transition: opacity 0.3s;
}

.btn-loader {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

#submit-question-btn.loading .btn-text {
    opacity: 0;
}

#submit-question-btn.loading .btn-loader {
    opacity: 1;
}

/* 功能按钮区 */
.chat-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.action-btn {
    background-color: var(--button-bg-color);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background-color: var(--border-color);
}

.action-btn img {
    width: 20px;
    height: 20px;
    transition: filter 0.2s;
}

/* 动画定义 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}