/* ========================================================================== */
/* 🪟 全局弹窗毛玻璃质感 - Modal Glass System */
/* ========================================================================== */

/* === 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: 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);
}

/* === 3. 强制应用到所有弹窗遮罩 === */
.modal-mask,
.modal-overlay,
.overlay,
.backdrop,
.popup-mask,
.sidebar-mask,
.contact-menu-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.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* === 4. 强制应用到所有弹窗容器 === */
.modal-body,
.modal-box,
.modal-content,
.glass-panel,
.popup,
.dialog,
.sidebar,
.contact-menu-content,
.avatar-menu-content,
.character-modal .modal-content,
.panel-drawer,
.drawer,
.sheet,
.bottom-sheet {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !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;
}

/* === 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: rgba(30, 30, 30, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* === 13. 特殊弹窗类型 === */

/* 侧边栏 */
.sidebar,
#echo-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !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;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* @ 弹出面板 */
.at-popup,
.mention-popup {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !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: 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;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 导演台面板 */
.director-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-top: 1px solid var(--glass-border) !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;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

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