/* ========================================================================== */
/* 🌙 夜间模式全局重构 - 深色液态玻璃 (Dark Liquid Glass) */
/* ========================================================================== */

/* === 1. 全局变量定义 === */
:root {
    /* 🌟 高级光感玻璃标准 - 升级版 */
    --dark-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    --dark-glass-blur: blur(24px); /* 增强模糊度 */
    --dark-glass-border: 1px solid rgba(255, 255, 255, 0.2); /* 强化边缘高光 */
    --dark-glass-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15); /* 内发光 */
    
    /* 文字颜色 */
    --dark-text-primary: #f0f0f0;
    --dark-text-secondary: #cccccc;
    --dark-text-tertiary: #999999;
    
    /* 背景渐变 */
    --dark-bg-gradient: linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
    --dark-bg-gradient-alt: linear-gradient(180deg, #2a2a3e 0%, #1f1f2e 100%);
}

/* === 🌙 夜间模式毛玻璃变量覆盖 === */
body.dark-mode {
    --glass-bg: rgba(30, 30, 30, 0.85); /* 深邃黑透 */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-text: #ffffff;
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    
    /* 自定义弹窗变量 */
    --bg-main: #1e1e2e;
    --bg-secondary: #2a2a3e;
    --text-main: #f0f0f0;
    --text-body: #cccccc;
    --text-sub: #999999;
    --border-color: rgba(255, 255, 255, 0.1);
}

/* === 2. 全局容器背景 === */
body.dark-mode {
    background: var(--dark-bg-gradient) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .phone-container {
    background: linear-gradient(135deg, #16213e 0%, #0f1419 100%) !important;
}

body.dark-mode .phone-frame {
    background: var(--dark-bg-gradient) !important;
}

/* === 3. 所有页面容器 === */
body.dark-mode .page,
body.dark-mode .screen,
body.dark-mode #home,
body.dark-mode #persons,
body.dark-mode #contact,
body.dark-mode #beings,
body.dark-mode #echo,
body.dark-mode #genesis {
    background: var(--dark-bg-gradient) !important;
    color: var(--dark-text-primary) !important;
}

/* 焕彩界面专用 */
body.dark-mode #screen-settings {
    background: var(--dark-bg-gradient-alt) !important;
}

/* Taro主屏幕背景 */
body.dark-mode .taro-home {
    background: var(--dark-bg-gradient) !important;
}

/* === 4. 统一卡片样式 - 高级光感玻璃 === */
body.dark-mode .card,
body.dark-mode .taro-card,
body.dark-mode .taro-setting-card,
body.dark-mode .taro-bento-item,
body.dark-mode .settings-group,
body.dark-mode .contact-card,
body.dark-mode .persona-card,
body.dark-mode .being-card,
body.dark-mode .swiper-slide,
body.dark-mode .swipe-card,
body.dark-mode .list-item,
body.dark-mode .grid-card {
    /* 🌟 微光渐变背景 - 左上亮，右下暗 */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(40, 40, 50, 0.6) 50%,
        rgba(0, 0, 0, 0.3) 100%) !important;
    
    /* 强化模糊 */
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    
    /* 边缘高光 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    /* 立体光感阴影 + 内发光 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important;
    
    color: var(--dark-text-primary) !important;
    
    /* 增强立体感 */
    position: relative;
}

/* === 5. 消息列表卡片 - 简洁透明设计 === */
body.dark-mode .chat-list-item,
body.dark-mode .chat-item {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

body.dark-mode .chat-list-item:hover,
body.dark-mode .chat-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .chat-item:active {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 消息列表文字 */
body.dark-mode .chat-list-name,
body.dark-mode .chat-name,
body.dark-mode .chat-list-preview,
body.dark-mode .chat-msg {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-list-meta span,
body.dark-mode .chat-time {
    color: var(--dark-text-secondary) !important;
}

/* === 6. 头部导航栏 - 高级光感 === */
body.dark-mode .header,
body.dark-mode .app-header,
body.dark-mode .taro-nav-bar,
body.dark-mode #echo .header {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(26, 26, 46, 0.85) 100%) !important;
    
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    box-shadow: 
        0 2px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
    
    color: var(--dark-text-primary) !important;
}

/* 头部标题 */
body.dark-mode .header-title,
body.dark-mode .taro-page-title,
body.dark-mode .app-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--dark-text-primary) !important;
}

/* === 7. 底部导航栏 - 高级光感玻璃 === */
body.dark-mode .taro-dock-container,
body.dark-mode .dock,
body.dark-mode .dock-glass,
body.dark-mode #echo .nav-island {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(40, 40, 50, 0.7) 50%,
        rgba(0, 0, 0, 0.4) 100%) !important;
    
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    
    box-shadow: 
        0 -4px 24px rgba(0, 0, 0, 0.3),
        0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* Dock图标盒子 - 胶囊玻璃按钮 */
body.dark-mode .taro-dock-icon-box,
body.dark-mode .icon-wrapper,
body.dark-mode .icon-box {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(60, 60, 80, 0.7) 100%) !important;
    
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
    
    color: var(--dark-text-primary) !important;
}

/* Dock标签 */
body.dark-mode .taro-dock-label,
body.dark-mode .icon-label,
body.dark-mode .app-name {
    color: var(--dark-text-primary) !important;
}

/* === 8. 悬浮音乐卡片 - 高级光感 === */
body.dark-mode .taro-float-music {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(40, 40, 50, 0.65) 50%,
        rgba(0, 0, 0, 0.35) 100%) !important;
    
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    
    box-shadow: 
        0 6px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.18) !important;
}

/* === 9. 所有文字颜色统一 === */
body.dark-mode,
body.dark-mode p,
body.dark-mode span:not(.badge):not(.taro-bi-text):not(.tag),
body.dark-mode div:not(.btn):not(.button):not(.taro-dock-icon-box):not(.badge),
body.dark-mode label,
body.dark-mode .taro-pc-name,
body.dark-mode .taro-pc-role,
body.dark-mode .persona-name,
body.dark-mode .contact-name,
body.dark-mode .being-name,
body.dark-mode .li-title,
body.dark-mode .li-sub,
body.dark-mode .gc-name,
body.dark-mode .gc-role,
body.dark-mode .sc-name,
body.dark-mode .sc-badge,
body.dark-mode .header-title,
body.dark-mode .taro-card-title,
body.dark-mode .taro-section-header,
body.dark-mode .taro-wp-label,
body.dark-mode .taro-font-item,
body.dark-mode .taro-app-name,
body.dark-mode .section-title,
body.dark-mode .char-label,
body.dark-mode .user-tag,
body.dark-mode .row-switch span {
    color: var(--dark-text-primary) !important;
}

/* 次要文字 */
body.dark-mode .li-sub,
body.dark-mode .gc-role,
body.dark-mode .chat-time,
body.dark-mode .chat-list-preview,
body.dark-mode .text-sub,
body.dark-mode .moment-time,
body.dark-mode .feed-meta span,
body.dark-mode .comment-time {
    color: var(--dark-text-secondary) !important;
}

/* Bento标签 */
body.dark-mode .taro-bi-text {
    color: var(--dark-text-primary) !important;
    opacity: 0.9;
}

/* 日期和状态栏 */
body.dark-mode .taro-date-big,
body.dark-mode .taro-status-header,
body.dark-mode #taro-clock {
    color: var(--dark-text-primary) !important;
}

/* 强制所有卡片内的文字为白色 */
body.dark-mode .card *:not(.badge):not(.tag),
body.dark-mode .taro-card *:not(.badge):not(.tag),
body.dark-mode .list-item *:not(.badge):not(.tag),
body.dark-mode .grid-card *:not(.badge):not(.tag),
body.dark-mode .swipe-card *:not(.badge):not(.tag) {
    color: inherit !important;
}

/* 特殊保留：徽章和标签保持原色 */
body.dark-mode .badge,
body.dark-mode .tag,
body.dark-mode .chat-list-badge,
body.dark-mode .nav-dot {
    color: #fff !important;
}

/* 确保输入框 placeholder 可见 */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7;
}

/* 图标颜色（除了特殊主题色图标）*/
body.dark-mode i:not(.taro-icon-cocoa):not(.taro-icon-taro):not(.taro-icon-pink):not(.taro-icon-blue):not(.ri-voiceprint-fill) {
    color: var(--dark-text-primary) !important;
}

/* 保持主题色图标原色 */
body.dark-mode .taro-icon-cocoa,
body.dark-mode .taro-icon-taro,
body.dark-mode .taro-icon-pink,
body.dark-mode .taro-icon-blue {
    /* 保持原有颜色 */
}

/* 确保 Echo 消息气泡内文字可见 */
body.dark-mode #echo .bubble,
body.dark-mode #echo .bubble * {
    color: inherit !important;
}

/* 聊天列表名称和消息 */
body.dark-mode .chat-name,
body.dark-mode .chat-list-name,
body.dark-mode .chat-msg {
    color: var(--dark-text-primary) !important;
}

/* 动态和朋友圈文字 */
body.dark-mode .feed-text,
body.dark-mode .moment-text,
body.dark-mode .comment-text,
body.dark-mode .feed-meta h4,
body.dark-mode .moment-author-name {
    color: var(--dark-text-primary) !important;
}

/* === 10. 输入框和表单 === */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search-input,
body.dark-mode .input-box,
body.dark-mode .taro-code-area {
    background: rgba(30, 30, 45, 0.8) !important;
    color: var(--dark-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-secondary) !important;
}

/* === 11. 按钮 - 玻璃胶囊按钮 === */
body.dark-mode button:not(.btn-primary):not([class*="primary"]):not(.taro-save-btn),
body.dark-mode .circle-btn {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(60, 60, 80, 0.8) 100%) !important;
    
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
    
    color: var(--dark-text-primary) !important;
}

body.dark-mode button:hover:not(.btn-primary):not([class*="primary"]):not(.taro-save-btn),
body.dark-mode .circle-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(70, 70, 90, 0.85) 100%) !important;
    
    border-color: rgba(255, 255, 255, 0.3) !important;
    
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}

/* === 12. Echo聊天气泡 === */
body.dark-mode #echo .bubble.ai,
body.dark-mode .message-bubble {
    background: rgba(50, 50, 70, 0.8) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #echo .bubble.user,
body.dark-mode .message-bubble.me {
    background: rgba(90, 90, 140, 0.8) !important;
    color: #fff !important;
}

/* === 13. 底部输入栏 === */
body.dark-mode #echo .bottom-bar,
body.dark-mode .chat-footer {
    background: rgba(26, 26, 46, 0.9) !important;
    backdrop-filter: var(--dark-glass-blur) !important;
    border-top: var(--dark-glass-border) !important;
}

body.dark-mode #echo .input-box {
    background: rgba(40, 40, 60, 0.6) !important;
    color: var(--dark-text-primary) !important;
}

/* === 14. 编辑页面 === */
body.dark-mode .full-screen-edit-page {
    background: var(--dark-bg-gradient) !important;
}

body.dark-mode .save-bar,
body.dark-mode .taro-save-bar {
    background: rgba(26, 26, 46, 0.95) !important;
    backdrop-filter: var(--dark-glass-blur) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 保存按钮保持原色 */
body.dark-mode .taro-save-btn {
    background: var(--color-cocoa-dark, #8d6e63) !important;
    color: #fff !important;
}

/* === 15. 模态窗口和弹窗 === */
body.dark-mode .modal-mask,
body.dark-mode .modal,
body.dark-mode .sidebar-mask,
body.dark-mode .contact-menu-mask,
body.dark-mode .avatar-menu-overlay,
body.dark-mode .avatar-source-menu .avatar-menu-overlay,
body.dark-mode .all-characters-modal-overlay,
body.dark-mode .group-chat-selector-overlay,
body.dark-mode .list-menu-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.dark-mode .modal-content,
body.dark-mode .modal-body,
body.dark-mode .sidebar,
body.dark-mode .contact-menu-content,
body.dark-mode .avatar-menu-content,
body.dark-mode .character-modal .modal-content {
    background: linear-gradient(135deg, 
        rgba(40, 40, 60, 0.98) 0%, 
        rgba(26, 26, 46, 0.95) 100%) !important;
    
    backdrop-filter: blur(35px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.3) !important;
    
    color: var(--dark-text-primary) !important;
}

/* 模态窗口标题和文字 */
body.dark-mode .modal-title h3,
body.dark-mode .modal-title p,
body.dark-mode .modal-body h3,
body.dark-mode .sidebar-header,
body.dark-mode .contact-menu-title,
body.dark-mode .avatar-menu-title {
    color: var(--dark-text-primary) !important;
}

/* 发布朋友圈模态框专用样式 */
body.dark-mode #moment-text-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .publish-image-area {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .add-img-btn {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .add-img-btn i {
    color: var(--dark-text-secondary) !important;
}

/* 设置卡片（侧边栏）- 高级光感 */
body.dark-mode .setting-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(40, 40, 60, 0.65) 100%) !important;
    
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .card-label,
body.dark-mode .setting-label,
body.dark-mode .setting-title {
    color: var(--dark-text-secondary) !important;
}

/* ========== 📖 单选按钮组 - 暗色模式 ========== */
body.dark-mode .radio-option {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(108, 92, 231, 0.3) !important;
}

body.dark-mode .radio-option:hover {
    background: rgba(108, 92, 231, 0.1) !important;
    border-color: rgba(108, 92, 231, 0.5) !important;
}

body.dark-mode .radio-option.active {
    background: rgba(108, 92, 231, 0.2) !important;
    border-color: #8b7ae7 !important;
    box-shadow: 0 2px 12px rgba(108, 92, 231, 0.4) !important;
}

body.dark-mode .radio-circle {
    border-color: #95a5a6 !important;
}

body.dark-mode .radio-option.active .radio-circle {
    border-color: #8b7ae7 !important;
    background: #8b7ae7 !important;
}

body.dark-mode .radio-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .radio-option.active .radio-title {
    color: #a8a0f7 !important;
}

body.dark-mode .radio-desc {
    color: var(--dark-text-secondary) !important;
}

/* 按钮 - 玻璃胶囊 */
body.dark-mode .setting-btn,
body.dark-mode .contact-menu-btn,
body.dark-mode .avatar-menu-btn {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(60, 60, 80, 0.8) 100%) !important;
    
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
    
    color: var(--dark-text-primary) !important;
}

body.dark-mode .setting-btn:hover,
body.dark-mode .contact-menu-btn:hover,
body.dark-mode .avatar-menu-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.18) 0%, 
        rgba(70, 70, 90, 0.9) 100%) !important;
    
    border-color: rgba(255, 255, 255, 0.3) !important;
    
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* 弹出菜单 - 高级光感 */
body.dark-mode #echo .menu-popover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(35, 35, 50, 0.75) 100%) !important;
    
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode #echo .menu-popover::after {
    border-color: rgba(40, 40, 55, 0.75) transparent transparent transparent !important;
}

body.dark-mode #echo .menu-option {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #echo .menu-option:active {
    background: rgba(50, 50, 70, 0.6) !important;
}

body.dark-mode #echo .menu-icon-box {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(50, 50, 70, 0.7) 100%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
    
    color: var(--dark-text-primary) !important;
}

/* === 16. 图标颜色 === */
body.dark-mode i:not(.taro-icon-cocoa):not(.taro-icon-taro):not(.taro-icon-pink):not(.taro-icon-blue) {
    color: var(--dark-text-primary) !important;
}

/* === 17. 过滤栏 === */
body.dark-mode .filter-bar {
    background: rgba(26, 26, 46, 0.9) !important;
}

/* === 18. 壁纸预览 === */
body.dark-mode .taro-wp-preview {
    opacity: 0.8;
}

/* === 19. 模式切换按钮高亮 === */
body.dark-mode .taro-mode-option.active {
    background: rgba(100, 100, 140, 0.8) !important;
    border-color: var(--color-taro-dark, #9575cd) !important;
}

/* === 20. 空状态 === */
body.dark-mode .empty-state,
body.dark-mode .chat-list-empty,
body.dark-mode .contact-empty-state {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .empty-state i,
body.dark-mode .chat-list-empty-icon,
body.dark-mode .contact-empty-icon {
    color: var(--dark-text-tertiary) !important;
}

/* === 21. 确保卡片内所有元素可见 === */
body.dark-mode .card *,
body.dark-mode .taro-card *,
body.dark-mode .list-item *,
body.dark-mode .grid-card * {
    color: inherit !important;
}

/* 特殊保留：徽章和标签保持原色 */
body.dark-mode .badge,
body.dark-mode .tag,
body.dark-mode .chat-list-badge {
    color: #fff !important;
}

/* === 22. 头像和图片边框 === */
body.dark-mode .contact-avatar,
body.dark-mode .chat-avatar,
body.dark-mode .taro-avatar-placeholder,
body.dark-mode .sc-avatar,
body.dark-mode .li-avatar,
body.dark-mode .gc-avatar {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* === 23. 朋友圈和动态卡片 - 高级光感 === */
body.dark-mode .feed-card,
body.dark-mode .moment-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(40, 40, 50, 0.6) 50%,
        rgba(0, 0, 0, 0.3) 100%) !important;
    
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    box-shadow: 
        0 6px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .feed-text,
body.dark-mode .moment-text {
    color: var(--dark-text-primary) !important;
}

/* === 朋友圈 Feed 流夜间模式增强 - 液态质感 === */
body.dark-mode .feed-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .feed-main {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .feed-avt,
body.dark-mode .feed-comment-avatar {
    border: 2px solid rgba(26, 26, 46, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .feed-name {
    color: #7db3ff !important;
}

body.dark-mode .feed-text {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .feed-time {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .feed-action-btn {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.2),
        inset 1px 1px 2px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .feed-action-btn:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.dark-mode .feed-action-btn.active {
    background: linear-gradient(135deg,
        rgba(255, 107, 107, 0.25) 0%,
        rgba(255, 107, 107, 0.15) 100%) !important;
    border-color: rgba(255, 107, 107, 0.3) !important;
    color: #ff6b6b !important;
    box-shadow: 
        0 0 12px rgba(255, 107, 107, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .feed-comments {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .feed-comment-author {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .feed-comment-text {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .feed-comment-time {
    color: var(--dark-text-tertiary) !important;
}

/* ========== 情感仪表盘夜间模式 ========== */
body.dark-mode .affection-dashboard {
    background: linear-gradient(135deg,
        rgba(255, 107, 129, 0.15) 0%,
        rgba(232, 67, 147, 0.1) 100%) !important;
    border: 1px solid rgba(255, 107, 129, 0.2);
}

body.dark-mode .affection-label {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .affection-value {
    color: #ff8fab !important;
}

body.dark-mode .affection-desc {
    color: #ff8fab !important;
}

body.dark-mode .affection-bar-container {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ========== 模态框夜间模式 ========== */
body.dark-mode .modal-box {
    background: linear-gradient(135deg,
        rgba(40, 40, 60, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .modal-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-message {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .modal-input,
body.dark-mode .modal-textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-input:focus,
body.dark-mode .modal-textarea:focus {
    border-color: #667eea !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text-primary) !important;
}

/* ========== 好感度滑块样式 ========== */
.affection-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b81 0%, #e84393 100%);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 107, 129, 0.5);
    transition: all 0.2s ease;
}

.affection-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(255, 107, 129, 0.7);
}

.affection-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b81 0%, #e84393 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 107, 129, 0.5);
}

body.dark-mode .affection-slider {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 107, 129, 0.3) 50%, 
        rgba(232, 67, 147, 0.5) 100%) !important;
}

body.dark-mode .moments-user-float-name {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9) !important;
}

body.dark-mode .moments-empty-state {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .moments-empty-state i {
    color: var(--dark-text-tertiary) !important;
}

body.dark-mode .feed-delete-btn {
    color: var(--dark-text-tertiary) !important;
}

body.dark-mode .feed-delete-btn:hover {
    color: #ff6b6b !important;
}

/* === 应用页面整体背景 === */
body.dark-mode .page:not(#home):not(#screen-settings) {
    background: linear-gradient(180deg,
        #1a1a2e 0%,
        #16213e 50%,
        #0f1419 100%) !important;
}

/* === 朋友圈页面整体背景 === */
body.dark-mode .moments-page {
    background: linear-gradient(180deg,
        #1a1a2e 0%,
        #16213e 100%) !important;
}

body.dark-mode .moments-page .header {
    background: transparent !important;
}

body.dark-mode .moments-page .header-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .moments-page .content-area {
    background: transparent !important;
}

body.dark-mode .moments-page .circle-btn {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        2px 2px 10px rgba(0, 0, 0, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .moments-page .circle-btn i {
    color: var(--dark-text-primary) !important;
}

/* 封面图片在夜间模式下的遮罩 */
body.dark-mode .moments-cover-img {
    opacity: 0.7;
    filter: brightness(0.8) contrast(1.1);
}

/* === 24. Echo 应用完整夜间模式 - 液态毛玻璃质感 === */

/* Echo 应用整体背景 */
body.dark-mode #app-echo,
body.dark-mode #echo {
    background-color: #1a1a2e !important;
}

/* Echo 消息容器背景 */
body.dark-mode #msg-container,
body.dark-mode #echo-chat-area {
    background: transparent !important;
}

/* Echo 顶部导航栏 - 液态毛玻璃 */
body.dark-mode .echo-navbar {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.95) 0%,
        rgba(26, 26, 46, 0.85) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .nav-title,
body.dark-mode .chat-header-name {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .nav-icon {
    color: var(--dark-text-primary) !important;
}

/* Echo 消息气泡 */
body.dark-mode .msg-bubble {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* ========== 🎬 沉浸式渲染：暗色模式 ========== */
/* 对白气泡 - 暗色模式 */
body.dark-mode .speech-bubble,
body.dark-mode .msg-row.other .speech-bubble {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    box-shadow: 
        5px 5px 20px rgba(0, 0, 0, 0.4),
        inset 2px 2px 8px rgba(255, 255, 255, 0.08),
        inset -1px -1px 4px rgba(0, 0, 0, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

/* 动作描写 - 暗色模式 */
body.dark-mode .action-text {
    color: #aaa !important;
    opacity: 0.75 !important;
}

/* ========== 🎬 归档消息 - 暗色模式 ========== */
body.dark-mode .msg-row.archived {
    opacity: 0.6 !important;
}

body.dark-mode .archived-bubble,
body.dark-mode .archived-content {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .archived-content .speech-bubble {
    color: var(--dark-text-secondary) !important;
}

/* ========== 💖 好感度反馈 - 暗色模式 ========== */
body.dark-mode .affection-feedback {
    background: rgba(40, 40, 60, 0.95) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

/* AI 消息气泡（对方）- 液态毛玻璃 */
body.dark-mode .msg-row.other .msg-bubble {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    box-shadow: 
        5px 5px 20px rgba(0, 0, 0, 0.4),
        inset 2px 2px 8px rgba(255, 255, 255, 0.08),
        inset -1px -1px 4px rgba(0, 0, 0, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

/* 用户消息气泡（我方）- 液态蓝色毛玻璃 */
body.dark-mode .msg-row.me .msg-bubble {
    background: linear-gradient(135deg, 
        rgba(100, 181, 246, 0.35) 0%, 
        rgba(66, 165, 245, 0.20) 50%,
        rgba(33, 150, 243, 0.15) 100%) !important;
    border: 1px solid rgba(144, 202, 249, 0.4) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    box-shadow: 
        4px 8px 25px rgba(33, 150, 243, 0.25),
        inset 3px 3px 8px rgba(255, 255, 255, 0.1),
        inset -1px -1px 4px rgba(33, 150, 243, 0.3) !important;
    color: #e3f2fd !important;
}

/* 名字标签 */
body.dark-mode .name-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .msg-row.me .name-tag {
    background: rgba(100, 181, 246, 0.15) !important;
    color: #90caf9 !important;
}

/* Echo 底部 Dock - 液态毛玻璃 */
body.dark-mode .echo-dock {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 -2px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 圆形按钮 - 液态质感 */
body.dark-mode .btn-round {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        3px 3px 12px rgba(0, 0, 0, 0.4),
        inset 1px 1px 3px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-round:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.10) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .btn-round:active {
    transform: scale(0.95);
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(0, 0, 0, 0.3) !important;
}

/* 发送按钮特殊样式（覆盖内联样式） */
body.dark-mode #echo-send-icon {
    background: linear-gradient(135deg, 
        rgba(100, 181, 246, 0.4) 0%, 
        rgba(66, 165, 245, 0.25) 100%) !important;
    border: 1px solid rgba(144, 202, 249, 0.3) !important;
    box-shadow: 
        4px 8px 20px rgba(33, 150, 243, 0.2),
        inset 3px 3px 8px rgba(255, 255, 255, 0.1),
        0 0 15px rgba(100, 181, 246, 0.15) !important;
}

body.dark-mode #echo-send-icon i {
    color: #90caf9 !important;
}

/* 输入框容器 - 液态凹陷效果 */
body.dark-mode .input-pill {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        inset 2px 2px 8px rgba(0, 0, 0, 0.5),
        inset -1px -1px 4px rgba(255, 255, 255, 0.05),
        1px 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #chat-input {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #chat-input::placeholder {
    color: var(--dark-text-tertiary) !important;
}

/* @ 按钮 */
body.dark-mode .btn-at {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .btn-at:hover {
    color: var(--dark-text-primary) !important;
}

/* AI 魔法棒 */
body.dark-mode .btn-ai {
    color: #90caf9 !important;
}

/* @ 弹出面板 - 液态毛玻璃 */
body.dark-mode .at-popup {
    background: linear-gradient(135deg,
        rgba(40, 40, 60, 0.95) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .at-member {
    color: var(--dark-text-primary) !important;
    background: transparent !important;
}

body.dark-mode .at-member:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 导演台面板 - 液态毛玻璃 */
body.dark-mode .director-panel {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 -2px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .director-role-item {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .director-role-item.active {
    background: linear-gradient(135deg,
        rgba(100, 181, 246, 0.35) 0%,
        rgba(66, 165, 245, 0.20) 100%) !important;
    border-color: rgba(144, 202, 249, 0.5) !important;
    box-shadow: 
        0 0 15px rgba(100, 181, 246, 0.4),
        inset 1px 1px 3px rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .director-role-name {
    color: var(--dark-text-primary) !important;
}

/* [已删除旧的 panel-drawer 暗黑样式] */

body.dark-mode .macaron-card,
body.dark-mode .macaron-item {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .macaron-card:hover,
body.dark-mode .macaron-item:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 
        2px 4px 12px rgba(0, 0, 0, 0.4),
        inset 1px 1px 3px rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .macaron-label,
body.dark-mode .grid-label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .macaron-icon i,
body.dark-mode .grid-icon-box i {
    color: inherit !important;
}

/* 侧边栏 - 液态毛玻璃 */
body.dark-mode .sidebar,
body.dark-mode #echo-sidebar {
    background: linear-gradient(270deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        -5px 0 30px rgba(0, 0, 0, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .sidebar-mask {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* 聊天列表 - 液态毛玻璃 */
body.dark-mode .chat-list-header {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.95) 0%,
        rgba(26, 26, 46, 0.90) 100%) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 2px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .story-rail {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.6) 0%,
        rgba(26, 26, 46, 0.5) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .story-avatar-wrap {
    background: linear-gradient(135deg, #4a9eff, #00c6ff) !important;
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3) !important;
}

body.dark-mode .story-avatar-wrap.seen {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .story-img {
    border-color: rgba(26, 26, 46, 0.8) !important;
}

body.dark-mode .chat-list-items {
    background: transparent !important;
}

body.dark-mode .chat-list-container {
    background: transparent !important;
}

body.dark-mode #view-chats {
    background: transparent !important;
}

/* 聊天列表卡片头像 */
body.dark-mode .chat-avatar,
body.dark-mode .avatar-container img {
    border: 2px solid rgba(26, 26, 46, 0.8) !important;
}

/* 未读红点在夜间模式下的显示 */
body.dark-mode .unread-badge {
    background-color: #ff3b30 !important;
    border-color: rgba(26, 26, 46, 0.8) !important;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.5) !important;
}

/* 聊天列表背景（确保在深色背景下白色背景变透明） */
body.dark-mode .chat-list {
    background: transparent !important;
}

body.dark-mode .chat-list-header h2 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .chat-list-header .back-btn,
body.dark-mode .chat-list-header .menu-btn {
    color: var(--dark-text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* AI 交互键图标在夜间模式下的显示 */
body.dark-mode #top-interaction-btn img {
    filter: brightness(1.2) contrast(1.1) !important;
    opacity: 0.85 !important;
}

body.dark-mode #top-interaction-btn:hover img {
    opacity: 1 !important;
    filter: brightness(1.3) contrast(1.15) drop-shadow(0 0 8px rgba(100, 181, 246, 0.5)) !important;
}

/* 晃动效果增强 */
body.dark-mode .interact-key.shaking img {
    animation: shake 0.5s infinite, glow-pulse 1s infinite alternate !important;
}

@keyframes glow-pulse {
    from {
        filter: brightness(1.2) drop-shadow(0 0 4px rgba(100, 181, 246, 0.3));
    }
    to {
        filter: brightness(1.4) drop-shadow(0 0 12px rgba(100, 181, 246, 0.6));
    }
}

body.dark-mode .story-name {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .sender-highlight {
    color: #64b5f6 !important;
}

body.dark-mode .typing-status {
    color: var(--dark-text-tertiary) !important;
}

body.dark-mode .group-stack .stack-img {
    border-color: rgba(26, 26, 46, 0.8) !important;
}

/* Tab导航栏 - 液态毛玻璃（Echo 和 Moments 共用）*/
body.dark-mode .echo-tabs,
body.dark-mode .tab-bar,
body.dark-mode .moments-page .echo-tabs {
    background: linear-gradient(180deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 -2px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .tab-btn,
body.dark-mode .nav-tab,
body.dark-mode .tab-item {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .tab-btn.active,
body.dark-mode .nav-tab.active,
body.dark-mode .tab-item.active {
    color: #64b5f6 !important;
}

body.dark-mode .tab-btn.active i,
body.dark-mode .tab-item.active i {
    filter: drop-shadow(0 0 8px rgba(100, 181, 246, 0.5));
}

/* === 26. 图标容器 - 水晶玻璃质感 === */
/* 🔷 针对所有带有实色背景的图标容器（如星汇 Community） */

/* 星汇的浅蓝色图标容器 */
body.dark-mode .taro-bento-item [style*="background:#e3f2fd"],
body.dark-mode .taro-app-icon-box[style*="background:#e3f2fd"] {
    /* 🌟 极淡半透明白色 - 去白透光 */
    background: rgba(255, 255, 255, 0.08) !important;
    
    /* 微光质感 - 毛玻璃模糊 */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 细描边 - 水晶边缘 */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    
    /* 内发光 - 小水晶块质感 */
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* 确保图标本身保持亮色 */
body.dark-mode .taro-bento-item [style*="background:#e3f2fd"] i,
body.dark-mode .taro-app-icon-box[style*="background:#e3f2fd"] i {
    color: #90caf9 !important; /* 保持明亮的蓝色 */
    filter: brightness(1.2) drop-shadow(0 0 4px rgba(144, 202, 249, 0.3)); /* 微微发光 */
}

/* 回响的渐变图标容器 */
body.dark-mode .taro-app-icon-box[style*="linear-gradient"] {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* 通用规则：所有 taro-bento-item 内的有背景色的 div 容器 */
body.dark-mode .taro-bento-item > div[style*="background"] {
    /* 只要不是渐变或已处理的，统一应用水晶质感 */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* 确保内部图标保持高亮 */
body.dark-mode .taro-bento-item > div[style*="background"] i {
    filter: brightness(1.3) drop-shadow(0 0 6px currentColor);
    opacity: 0.95;
}

/* === 27. 山河卷 (Worldbook) 夜间模式适配 === */
/* 🐚 深色模式下保持仙气但适配暗色背景 */

body.dark-mode #worldbook {
    /* 深色版配色 */
    --wb-bg-top: #1a2332;
    --wb-bg-bot: #243142;
    
    /* 深色玻璃材质 */
    --wb-glass-card: rgba(255, 255, 255, 0.08);
    --wb-glass-border: rgba(255, 255, 255, 0.15);
    --wb-glass-highlight: rgba(255, 255, 255, 0.12);
    
    /* 深色文字 */
    --wb-text-main: #e0e0e0;
    --wb-text-sub: #b0b0b0;
    --wb-accent: #64b5f6;
}

/* 深色模式下的背景渐变 */
body.dark-mode #worldbook {
    background: linear-gradient(180deg, var(--wb-bg-top) 0%, var(--wb-bg-bot) 100%);
}

/* 贝壳在深色模式下的调整 */
body.dark-mode #worldbook .wb-shell-body {
    background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.15), rgba(129, 212, 250, 0.1));
    box-shadow: 0 5px 15px rgba(100, 181, 246, 0.2), inset 0 0 10px rgba(255,255,255,0.1);
}

body.dark-mode #worldbook .wb-center-pearl {
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(236, 239, 241, 0.7));
}

/* 列表层深色适配 */
body.dark-mode #worldbook .wb-list-layer {
    background: rgba(30, 30, 35, 0.8);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode #worldbook .wb-list-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 条目深色玻璃质感 */
body.dark-mode #worldbook .wb-entry-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

body.dark-mode #worldbook .wb-entry-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
    box-shadow: 0 5px 15px rgba(100, 181, 246, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

/* 底部栏深色 */
body.dark-mode #worldbook .wb-bottom-bar {
    background: rgba(20, 20, 25, 0.6);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* 新建按钮深色发光 */
body.dark-mode #worldbook .wb-add-btn {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.3), rgba(129, 212, 250, 0.2));
    color: #64b5f6;
    border: 1px solid rgba(100, 181, 246, 0.3);
    box-shadow: 0 5px 15px rgba(100, 181, 246, 0.2);
}

/* 编辑页深色 */
body.dark-mode #worldbook .wb-editor-layer {
    background: #1e1e23;
}

body.dark-mode #worldbook .wb-editor-nav {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode #worldbook .wb-clean-input {
    background: rgba(40, 40, 45, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e0e0e0;
}

body.dark-mode #worldbook .wb-clean-textarea {
    background: rgba(40, 40, 45, 0.8);
    color: #e0e0e0;
}

body.dark-mode #worldbook .wb-toggle-btn {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(50, 50, 55, 0.5);
}

body.dark-mode #worldbook .wb-toggle-btn.wb-active {
    background: rgba(100, 181, 246, 0.2);
    color: #64b5f6;
    border-color: rgba(100, 181, 246, 0.3);
}

/* ========================================================================== */
/* 🎨 iOS 风格确认框 - 暗色模式适配 */
/* ========================================================================== */
body.dark-mode .custom-confirm-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .custom-confirm-box {
    background: rgba(30, 30, 40, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .cc-content {
    color: var(--dark-text-primary, #f0f0f0) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .cc-btn {
    color: var(--dark-text-secondary, #ccc) !important;
}

body.dark-mode .cc-btn.cancel {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .cc-btn.confirm {
    color: #0a84ff !important; /* iOS 暗色模式蓝色 */
}

body.dark-mode .cc-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================================================== */
/* 🎮 新增功能夜间模式适配 */
/* ========================================================================== */

/* === 🧧 红包弹窗 === */
body.dark-mode .packet-modal-mask {
    background: rgba(0, 0, 0, 0.85) !important;
}

body.dark-mode .red-envelope-card {
    background: linear-gradient(135deg, rgba(211, 84, 0, 0.9) 0%, rgba(192, 57, 43, 0.9) 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .red-envelope-card .card-content {
    color: #fff !important;
}

body.dark-mode .red-envelope-card .card-wish {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .open-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #c0392b !important;
}

/* === 🧧 红包详情页 === */
body.dark-mode .details-page {
    background: var(--dark-bg-gradient) !important;
}

body.dark-mode .details-header {
    background: rgba(40, 40, 50, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .back-link {
    color: #0a84ff !important;
}

body.dark-mode .big-amount {
    color: #ff6b6b !important;
}

/* === 🎬 视频播放器 === */
body.dark-mode .player-modal {
    background: rgba(20, 20, 30, 0.98) !important;
}

body.dark-mode .pm-header {
    background: rgba(30, 30, 40, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-mode .pm-footer {
    background: rgba(30, 30, 40, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .pm-input {
    background: rgba(60, 60, 70, 0.8) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .pm-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .dm-msg {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* === 📖 阅读器 === */
body.dark-mode .reader-overlay {
    background: rgba(20, 20, 30, 0.98) !important;
}

body.dark-mode .reader-header {
    background: rgba(30, 30, 40, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-mode .reader-content {
    background: rgba(30, 30, 40, 0.6) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .comment-bubble {
    background: rgba(100, 100, 120, 0.9) !important;
    color: #fff !important;
}

/* === 📍 位置面板 === */
body.dark-mode .loc-panel {
    background: var(--dark-bg-gradient) !important;
}

body.dark-mode .loc-header {
    background: rgba(30, 30, 40, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .loc-back {
    color: #0a84ff !important;
}

body.dark-mode .btn-send-loc {
    background: #0a84ff !important;
    color: #fff !important;
}

body.dark-mode .loc-map {
    background: rgba(40, 40, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .loc-input-group input {
    background: rgba(40, 40, 50, 0.8) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .loc-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* === 🎲 骰子 === */
body.dark-mode .cyber-dice {
    background: rgba(40, 40, 60, 0.9) !important;
    border: 2px solid rgba(100, 100, 255, 0.5) !important;
    box-shadow: 
        0 0 20px rgba(100, 100, 255, 0.3),
        inset 0 0 20px rgba(100, 100, 255, 0.1) !important;
}

body.dark-mode .cyber-dice i {
    background: rgba(100, 100, 255, 0.8) !important;
    box-shadow: 0 0 10px rgba(100, 100, 255, 0.6) !important;
}

/* === 💳 转账卡片 === */
body.dark-mode .gold-card {
    background: linear-gradient(135deg, rgba(40, 40, 50, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

body.dark-mode .gold-card .gc-header {
    color: #ffd700 !important;
}

body.dark-mode .gold-card .gc-amount {
    color: #fff !important;
}

body.dark-mode .gold-card .gc-note {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .gold-card.received {
    background: linear-gradient(135deg, rgba(40, 80, 40, 0.95) 0%, rgba(20, 60, 20, 0.95) 100%) !important;
    border-color: rgba(0, 255, 0, 0.3) !important;
}

body.dark-mode .gold-card.refunded {
    background: linear-gradient(135deg, rgba(60, 60, 80, 0.95) 0%, rgba(40, 40, 60, 0.95) 100%) !important;
    border-color: rgba(150, 150, 200, 0.3) !important;
}

body.dark-mode .gold-card.expired {
    background: linear-gradient(135deg, rgba(60, 40, 40, 0.95) 0%, rgba(40, 20, 20, 0.95) 100%) !important;
    border-color: rgba(255, 100, 100, 0.3) !important;
}

/* === 🧧 红包气泡 === */
body.dark-mode .hb-bubble {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.3) 0%, rgba(255, 160, 180, 0.3) 100%) !important;
    border: 2px solid rgba(255, 100, 150, 0.5) !important;
}

body.dark-mode .hb-bubble .text-main {
    color: #ffb6c1 !important;
}

body.dark-mode .hb-bubble .text-sub {
    color: rgba(255, 182, 193, 0.8) !important;
}

body.dark-mode .hb-bubble.opened {
    background: rgba(60, 60, 70, 0.6) !important;
    border-color: rgba(150, 150, 150, 0.3) !important;
}

/* === 📍 位置卡片 === */
body.dark-mode .loc-card-bubble {
    background: rgba(40, 40, 50, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .loc-map {
    background: rgba(30, 30, 40, 0.8) !important;
}

body.dark-mode .loc-info .loc-title {
    color: #fff !important;
}

body.dark-mode .loc-info .loc-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .loc-info .loc-dist {
    color: rgba(100, 150, 255, 0.9) !important;
}

/* === 🎨 剧情卡片夜间模式优化 === */
/* 由于剧情卡片使用内联样式，我们需要确保它们在夜间模式下也清晰可见 */
/* 这里添加一些全局优化 */
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background: #fff"] {
    /* 不强制覆盖，因为剧情卡片有自己的颜色设计 */
    /* 但确保文字可读性 */
}

/* 确保剧情卡片中的深色文字在夜间模式下可见 */
body.dark-mode .msg-bubble div[style*="color:#333"],
body.dark-mode .msg-bubble div[style*="color: #333"] {
    color: #e0e0e0 !important;
}

body.dark-mode .msg-bubble div[style*="color:#555"],
body.dark-mode .msg-bubble div[style*="color: #555"] {
    color: #d0d0d0 !important;
}

body.dark-mode .msg-bubble div[style*="color:#666"],
body.dark-mode .msg-bubble div[style*="color: #666"] {
    color: #c0c0c0 !important;
}

/* ========================================================================== */
/* 🔔 Toast 提示夜间模式 - 极光幻紫珍珠水滴样式 */
/* ========================================================================== */
body.dark-mode .sayoo-toast-aurora,
body[data-theme="dark"] .sayoo-toast-aurora {
    background: linear-gradient(110deg, rgba(45, 45, 60, 0.95), rgba(55, 45, 65, 0.9), rgba(40, 50, 70, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.1), 
        inset 0 -1px 2px rgba(0, 0, 0, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 夜间模式珍珠球 */
body.dark-mode .sayoo-toast-aurora > div:first-child,
body[data-theme="dark"] .sayoo-toast-aurora > div:first-child,
body.dark-mode .sayoo-toast-aurora [style*="radial-gradient"],
body[data-theme="dark"] .sayoo-toast-aurora [style*="radial-gradient"] {
    background: radial-gradient(circle at 30% 30%, rgba(180, 180, 200, 0.9) 0%, rgba(120, 110, 140, 0.8) 30%, rgba(80, 70, 100, 0.9) 80%, rgba(50, 45, 70, 1) 100%) !important;
    box-shadow: 
        inset -3px -3px 6px rgba(0, 0, 0, 0.3), 
        inset 2px 2px 4px rgba(255, 255, 255, 0.2), 
        0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* 夜间模式文字渐变 */
body.dark-mode .sayoo-toast-aurora span,
body[data-theme="dark"] .sayoo-toast-aurora span {
    background: linear-gradient(90deg, #c0c5d8, #d4b8d8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 通话界面 toast 夜间模式 */
body.dark-mode #call-view .toast,
body[data-theme="dark"] #call-view .toast {
    background: linear-gradient(110deg, rgba(45, 45, 60, 0.95), rgba(55, 45, 65, 0.9), rgba(40, 50, 70, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.1), 
        inset 0 -1px 2px rgba(0, 0, 0, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.4) !important;
    color: #c0c5d8 !important;
}

body.dark-mode #call-view .toast::before,
body[data-theme="dark"] #call-view .toast::before {
    background: radial-gradient(circle at 30% 30%, rgba(180, 180, 200, 0.9) 0%, rgba(120, 110, 140, 0.8) 30%, rgba(80, 70, 100, 0.9) 80%, rgba(50, 45, 70, 1) 100%) !important;
}

/* 设置页面 toast 夜间模式 */
body.dark-mode .settings-toast,
body[data-theme="dark"] .settings-toast {
    background: linear-gradient(110deg, rgba(45, 45, 60, 0.95), rgba(55, 45, 65, 0.9), rgba(40, 50, 70, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .settings-toast::before,
body[data-theme="dark"] .settings-toast::before {
    background: radial-gradient(circle at 30% 30%, rgba(180, 180, 200, 0.9) 0%, rgba(120, 110, 140, 0.8) 30%, rgba(80, 70, 100, 0.9) 80%, rgba(50, 45, 70, 1) 100%) !important;
}