/**
 * 统一模态框和提示组件样式
 * 樱花主题设计 + z-index 分层管理
 */

/* ========== Z-INDEX 分层变量 ========== */
:root {
    --z-dropdown:       1000;
    --z-context-menu:   2000;
    --z-panel:          3000;
    --z-modal:          5000;
    --z-preview:        6000;
    --z-asset:          7000;
    --z-dialog:         12000;
    --z-toast:          99990;
    --z-loading:        99995;
    --z-critical:       99999;
}

/* ========== 模态框遮罩层 ========== */
.global-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(calc(8 * var(--px)));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.global-modal-overlay.active {
    opacity: 1;
}

/* ========== 模态框主体 ========== */
.global-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    min-width: calc(320 * var(--px));
    max-width: calc(450 * var(--px));
    background: linear-gradient(145deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.90) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.2);
    border-radius: calc(12 * var(--px));
    box-shadow: 0 calc(20 * var(--px)) calc(56 * var(--px)) rgba(0,0,0,0.7), 0 0 calc(32 * var(--px)) rgba(255, 133, 162, 0.1);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.global-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(1 * var(--px));
    background: linear-gradient(90deg, transparent, rgba(255, 133, 162, 0.4), transparent);
}

.global-modal.active {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ========== 模态框头部 ========== */
.global-modal-header {
    padding: calc(14 * var(--px)) calc(18 * var(--px));
    border-bottom: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.15);
    font-size: calc(15 * var(--px));
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(255, 133, 162, 0.1), transparent);
}

/* ========== 模态框内容 ========== */
.global-modal-body {
    padding: calc(18 * var(--px));
    color: #ffffff;
}

.modal-message {
    margin: 0;
    font-size: calc(13 * var(--px));
    line-height: 1.6;
    color: #e5e5e5;
}

.modal-hint {
    margin: calc(12 * var(--px)) 0 0 0;
    font-size: calc(12 * var(--px));
    color: #a0a0a0;
    padding: calc(10 * var(--px));
    background: rgba(255, 133, 162, 0.08);
    border-radius: calc(6 * var(--px));
    border-left: calc(3 * var(--px)) solid #FF85A2;
}

/* ========== 模态框底部 ========== */
.global-modal-footer {
    padding: calc(12 * var(--px)) calc(18 * var(--px));
    border-top: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.15);
    display: flex;
    justify-content: flex-end;
    gap: calc(10 * var(--px));
    background: rgba(10, 10, 10, 0.5);
}

.global-modal-footer button {
    padding: calc(8 * var(--px)) calc(18 * var(--px));
    border-radius: calc(8 * var(--px));
    font-size: calc(13 * var(--px));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.global-modal-footer .btn-cancel {
    background: rgba(10,10,10,0.65);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.2);
    color: #ffffff;
}

.global-modal-footer .btn-cancel:hover {
    background: rgba(40,30,50,0.70);
    border-color: rgba(255, 133, 162, 0.4);
}

.global-modal-footer .btn-primary {
    background: linear-gradient(135deg, #FF85A2 0%, #D4A574 100%);
    border: calc(1 * var(--px)) solid transparent;
    color: #0a0a0a;
    box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(255, 133, 162, 0.3);
}

.global-modal-footer .btn-primary:hover {
    transform: translateY(calc(-1 * var(--px)));
    box-shadow: 0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(255, 133, 162, 0.4);
}

.global-modal-footer .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: calc(1 * var(--px)) solid transparent;
    color: #fff;
}

.global-modal-footer .btn-danger:hover {
    transform: translateY(calc(-1 * var(--px)));
    box-shadow: 0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(239, 68, 68, 0.4);
}

/* ========== Toast 提示 ========== */
.global-toast {
    position: fixed;
    bottom: calc(20 * var(--px));
    left: calc(20 * var(--px));
    transform: translateX(calc(-40 * var(--px)));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--px));
    padding: calc(12 * var(--px)) calc(16 * var(--px));
    background: linear-gradient(145deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.90) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.2);
    border-radius: calc(10 * var(--px));
    box-shadow: 0 calc(8 * var(--px)) calc(32 * var(--px)) rgba(0,0,0,0.4), 0 0 calc(16 * var(--px)) rgba(255, 133, 162, 0.08);
    z-index: var(--z-toast, 9000);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: calc(380 * var(--px));
}

.global-toast.active {
    opacity: 1;
    transform: translateX(0);
}

.toast-icon {
    font-size: calc(18 * var(--px));
    flex-shrink: 0;
}

.toast-message {
    font-size: calc(13 * var(--px));
    color: #f8fafc;
    flex: 1;
    line-height: 1.5;
}

/* Toast 类型颜色（统一玫瑰金毛玻璃主题，仅左边框和图标区分类型） */
.toast-success {
    border-left: calc(3 * var(--px)) solid rgba(74, 222, 128, 0.8);
}

.toast-success .toast-icon {
    color: #4ade80;
}

.toast-error {
    border-left: calc(3 * var(--px)) solid rgba(239, 68, 68, 0.8);
}

.toast-error .toast-icon {
    color: #ef4444;
}

.toast-warning {
    border-left: calc(3 * var(--px)) solid rgba(245, 158, 11, 0.8);
}

.toast-warning .toast-icon {
    color: #f59e0b;
}

.toast-info {
    border-left: calc(3 * var(--px)) solid rgba(255, 133, 162, 0.8);
}

.toast-info .toast-icon {
    color: #FF85A2;
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
    .global-modal {
        min-width: 90vw;
        max-width: 90vw;
        border-radius: calc(12 * var(--px));
    }
    
    .global-toast {
        min-width: 85vw;
        max-width: 85vw;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(14 * var(--px));
    }
    
    .global-toast.active {
        transform: translateX(-50%);
    }
}

/* ========== 深色主题 ========== */
@media (prefers-color-scheme: dark) {
    .global-modal {
        background: linear-gradient(145deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.90) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-color: rgba(255, 133, 162, 0.2);
    }
    
    .modal-message {
        color: #e5e5e5;
    }
}

/* ========== Toast 容器 ========== */
.toast-container {
    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;
    top: auto !important;
    right: auto !important;
    z-index: var(--z-toast, 99990);
    pointer-events: none;
}