/* ========================================================================== */
/* 🪟 全局弹窗系统 - Pure White (毛玻璃已移除) */
/* ========================================================================== */
/* 设计原则：
   1. 全局弹窗（.modal-* / .popup / .dialog / .glass-panel / .sheet 等）一律纯色背景，无毛玻璃
   2. 各 app 的特色弹窗保留独立样式（千面 .ps-modal、treasure-*、gift、call、paofu 等）
   3. echo 的侧栏 / @提及 / 导演台 仍属于 app 特色，毛玻璃保留 */

/* === 1. 日间模式玻璃变量（已在 index-styles.css 定义，这里仅作备份）=== */
:root {
    --glass-bg: rgba(255, 255, 255, 0.85); /* 纯白高透 */
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-text: #333333;
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* === 2. 夜间模式玻璃变量（已在 dark-mode.css 定义，这里仅作备份）=== */
body.dark-mode {
    --glass-bg: #1A1A1A; /* 深邃黑透 */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-text: #ffffff;
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* === 3. 强制应用到所有弹窗遮罩（去毛玻璃，仅暗化）=== */
.modal-mask,
.modal-overlay,
.overlay,
.backdrop,
.popup-mask,
.sidebar-mask,
.avatar-menu-overlay,
.avatar-source-menu .avatar-menu-overlay,
.all-characters-modal-overlay,
.group-chat-selector-overlay,
.list-menu-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* === 4. 强制应用到所有弹窗容器（去毛玻璃，纯色背景）=== */
.modal-body,
.modal-box,
.modal-content,
.glass-panel,
.popup,
.dialog,
.contact-menu-content,
.avatar-menu-content,
.character-modal .modal-content,
.panel-drawer,
.drawer,
.sheet,
.bottom-sheet {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--glass-text) !important;
}

/* === 5. 确保弹窗内文字颜色正确 === */
.modal-body *:not(button):not(.btn),
.modal-box *:not(button):not(.btn),
.modal-content *:not(button):not(.btn),
.glass-panel *:not(button):not(.btn),
.popup *:not(button):not(.btn) {
    color: var(--glass-text) !important;
}

/* === 6. 弹窗标题 === */
.modal-title,
.dialog-title,
.popup-title,
.sheet-title {
    color: var(--glass-text) !important;
    font-weight: 700;
}

/* === 7. 弹窗消息内容 === */
.modal-message,
.dialog-message,
.popup-message {
    color: var(--glass-text) !important;
    opacity: 0.85;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* === 8. 弹窗输入框 === */
.modal-input,
.modal-textarea,
.dialog-input,
.popup-input {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid var(--glass-border) !important;
    color: var(--glass-text) !important;
}

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

.modal-input:focus,
.modal-textarea:focus,
.dialog-input:focus,
.popup-input:focus {
    border-color: #667eea !important;
}

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

.modal-input::placeholder,
.modal-textarea::placeholder {
    color: var(--glass-text) !important;
    opacity: 0.5;
}

/* === 9. 按钮样式 === */
.modal-btn-secondary,
.dialog-btn-cancel,
.popup-btn-cancel {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--glass-text) !important;
    opacity: 0.8;
}

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

/* === 10. ModalSystem 专用样式增强 === */
/* 注意：红包弹窗的 position 由 force-red-packet-sandbox.css 和 index_v2.html 的内联样式统一管理 */
.modal-overlay {
    /* position: absolute 由其他规则强制应用 (使用 !important) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box.glass-panel {
    border-radius: 20px;
    padding: 24px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* === 11. 确保日间模式没有灰色背景 === */
body:not(.dark-mode) .modal-body,
body:not(.dark-mode) .modal-box,
body:not(.dark-mode) .glass-panel {
    /* 严格禁止灰色背景 */
    background: rgba(255, 255, 255, 0.85) !important;
}

/* 双重保险：覆盖任何可能的灰色 */
body:not(.dark-mode) .modal-body,
body:not(.dark-mode) .modal-box,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .glass-panel,
body:not(.dark-mode) .popup {
    background: var(--glass-bg) !important;
    /* 如果 var 失效，使用回退值 */
    background: rgba(255, 255, 255, 0.85) !important;
}

/* === 12. 夜间模式确保深色透明 === */
body.dark-mode .modal-body,
body.dark-mode .modal-box,
body.dark-mode .glass-panel,
body.dark-mode .popup {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* === 13. 特殊弹窗类型（保留毛玻璃：app 特色面板）=== */

/* 侧边栏 - app 特色面板，保留毛玻璃 */
.sidebar,
#echo-sidebar {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

body.dark-mode .sidebar,
body.dark-mode #echo-sidebar {
    background: #1A1A1A !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* @ 弹出面板 - echo 特色，保留毛玻璃 */
.at-popup,
.mention-popup {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

body.dark-mode .at-popup,
body.dark-mode .mention-popup {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* @ 提及标签 */
.mention-tag {
    color: #4A9EFF;
    font-weight: 500;
}

body.dark-mode .mention-tag {
    color: #6BB5FF;
}

/* 导演台面板 - echo 特色，保留毛玻璃 */
.director-panel {
    background: var(--glass-bg) !important;
    border-top: 1px solid var(--glass-border) !important;
}

body.dark-mode .director-panel {
    background: #1A1A1A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* === 14. 调试模式（可选）=== */
/* 取消下面的注释可以看到所有应用了玻璃效果的元素 */
/*
.modal-body,
.modal-box,
.glass-panel {
    outline: 2px solid red;
}
*/

/* ========================================================================== */
/* 🌙 弹窗按钮 - 夜间冰蓝色卡标准 */
/* ========================================================================== */

/* 确认/主要按钮 → 冰蓝 */
body.dark-mode .modal-btn-primary,
body.dark-mode .modal-btn-confirm,
body.dark-mode .dialog-btn-confirm,
body.dark-mode .popup-btn-confirm,
body.dark-mode .modal-box .btn-primary,
body.dark-mode .modal-content .btn-primary,
body.night .modal-btn-primary,
body.night .modal-btn-confirm,
body.night .dialog-btn-confirm,
body.night .popup-btn-confirm,
body.night .modal-box .btn-primary,
body.night .modal-content .btn-primary {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.3) !important;
    color: var(--dm-accent) !important;
    box-shadow: none !important;
}
body.dark-mode .modal-btn-primary:hover,
body.dark-mode .modal-btn-confirm:hover,
body.night .modal-btn-primary:hover,
body.night .modal-btn-confirm:hover {
    background: rgba(var(--dm-accent-rgb), 0.25) !important;
}

/* 取消/次要按钮 → 暗色 */
body.dark-mode .modal-btn-secondary,
body.dark-mode .modal-btn-cancel,
body.dark-mode .dialog-btn-cancel,
body.dark-mode .popup-btn-cancel,
body.dark-mode .modal-box .btn-secondary,
body.night .modal-btn-secondary,
body.night .modal-btn-cancel,
body.night .dialog-btn-cancel,
body.night .popup-btn-cancel,
body.night .modal-box .btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
body.dark-mode .modal-btn-secondary:hover,
body.dark-mode .modal-btn-cancel:hover,
body.night .modal-btn-secondary:hover,
body.night .modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 危险按钮 → 红色 */
body.dark-mode .modal-btn-danger,
body.dark-mode .dialog-btn-danger,
body.night .modal-btn-danger,
body.night .dialog-btn-danger {
    background: rgba(239, 83, 80, 0.15) !important;
    border: 1px solid rgba(239, 83, 80, 0.3) !important;
    color: #ef5350 !important;
    box-shadow: none !important;
}

/* 弹窗内分割线 */
body.dark-mode .modal-divider,
body.dark-mode .modal-box hr,
body.dark-mode .modal-content hr,
body.night .modal-divider,
body.night .modal-box hr,
body.night .modal-content hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* input focus 冰蓝 */
body.dark-mode .modal-input:focus,
body.dark-mode .modal-textarea:focus,
body.night .modal-input:focus,
body.night .modal-textarea:focus {
    border-color: rgba(var(--dm-accent-rgb), 0.4) !important;
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.1) !important;
}

/* 弹窗标题提亮 */
body.dark-mode .modal-title,
body.dark-mode .dialog-title,
body.dark-mode .popup-title,
body.night .modal-title,
body.night .dialog-title,
body.night .popup-title {
    color: #e2e8f0 !important;
}

/* 弹窗消息文字 */
body.dark-mode .modal-message,
body.dark-mode .dialog-message,
body.night .modal-message,
body.night .dialog-message {
    color: #94a3b8 !important;
}

/* ========================================================================== */
/* 🌙 全局弹窗 - 终极夜间适配 (色卡标准) */
/* ========================================================================== */

/* 1. 弹窗遮罩 */
body.dark-mode .modal-mask, body.night .modal-mask,
body.dark-mode .modal-overlay, body.night .modal-overlay,
body.dark-mode .overlay, body.night .overlay,
body.dark-mode .backdrop, body.night .backdrop,
body.dark-mode .popup-mask, body.night .popup-mask {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* 2. 弹窗主体 */
body.dark-mode .modal-body, body.night .modal-body,
body.dark-mode .modal-box, body.night .modal-box,
body.dark-mode .modal-content, body.night .modal-content,
body.dark-mode .glass-panel, body.night .glass-panel,
body.dark-mode .popup, body.night .popup,
body.dark-mode .dialog, body.night .dialog,
body.dark-mode .sheet, body.night .sheet,
body.dark-mode .bottom-sheet, body.night .bottom-sheet {
    background: #1a1d24 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* 3. 文字 */
body.dark-mode .modal-title, body.night .modal-title,
body.dark-mode .dialog-title, body.night .dialog-title,
body.dark-mode .modal-body h3, body.night .modal-body h3 {
    color: #e2e8f0 !important;
}
body.dark-mode .modal-message, body.night .modal-message,
body.dark-mode .dialog-message, body.night .dialog-message,
body.dark-mode .modal-body p, body.night .modal-body p {
    color: #94a3b8 !important;
}

/* 4. 输入框 */
body.dark-mode .modal-input, body.night .modal-input,
body.dark-mode .modal-textarea, body.night .modal-textarea,
body.dark-mode .dialog-input, body.night .dialog-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
body.dark-mode .modal-input:focus, body.night .modal-input:focus,
body.dark-mode .modal-textarea:focus, body.night .modal-textarea:focus {
    border-color: rgba(var(--dm-accent-rgb), 0.4) !important;
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.1) !important;
}
body.dark-mode .modal-input::placeholder, body.night .modal-input::placeholder,
body.dark-mode .modal-textarea::placeholder, body.night .modal-textarea::placeholder {
    color: #64748b !important;
}

/* 5. 主按钮 → 冰蓝 */
body.dark-mode .modal-btn-primary, body.night .modal-btn-primary,
body.dark-mode .modal-btn-primary:hover, body.night .modal-btn-primary:hover {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.3) !important;
    box-shadow: none !important;
}

/* 次要按钮 */
body.dark-mode .modal-btn-secondary, body.night .modal-btn-secondary,
body.dark-mode .dialog-btn-cancel, body.night .dialog-btn-cancel {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
body.dark-mode .modal-btn-secondary:hover, body.night .modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 单按钮弹窗：唯一按钮用冰蓝 */
body.dark-mode .modal-buttons .modal-btn:only-child,
body.dark-mode .modal-btn-secondary:only-child,
body.night .modal-buttons .modal-btn:only-child,
body.night .modal-btn-secondary:only-child {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.3) !important;
    box-shadow: none !important;
}

/* 危险按钮 */
body.dark-mode .modal-btn-danger, body.night .modal-btn-danger {
    background: rgba(239, 83, 80, 0.15) !important;
    border: 1px solid rgba(239, 83, 80, 0.3) !important;
    color: #ef5350 !important;
    box-shadow: none !important;
}

/* 6. 侧边栏 - 保留毛玻璃（app 特色） */
body.dark-mode .sidebar, body.night .sidebar,
body.dark-mode #echo-sidebar, body.night #echo-sidebar,
body.dark-mode .director-panel, body.night .director-panel {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* 7. 分割线 */
body.dark-mode .modal-divider, body.night .modal-divider,
body.dark-mode .modal-box hr, body.night .modal-box hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}