/* ============================================================================
   🔮 iOS 26 液态玻璃弹窗引擎 - 独立样式表 (toast.css)
   ============================================================================ */

/* 1. 动态自适应流体排队堆叠容器 */
.liquid-toast-container {
    position: fixed;
    top: 24px;                  /* 已经移到网页最上方 24px 处，避开主工具栏 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;            /* 确保层级绝对置顶，不被页面任何元素遮挡 */
    display: flex;
    flex-direction: column;
    gap: 10px;                  /* 多个弹窗连续出现时的水滴聚合间距 */
    pointer-events: none;       /* 允许穿透点击，不影响页面底层按钮操作 */
    perspective: 1000px;        /* 开启 3D 视界，让果冻进场动效立体感更强 */
}

/* 2. 弹窗组件基础几何模型 */
.mac-toast-component {
    position: relative;
    padding: 12px 26px;
    border-radius: 24px;        /* 极致圆润的 iOS 药丸胶囊切角 */
    font-size: 14px;
    font-weight: 600;           /* 稍微加粗，确保在强半透明滤镜下字迹清晰 */
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    color: #1a1a1e;             /* 浅色模式下的高级质感深灰字 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    
    /* 核心：高饱和度、高对比度的毛玻璃折射滤镜，强制扭曲提亮背景 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(245, 245, 250, 0.45) 100%);
    backdrop-filter: blur(20px) saturate(230%) contrast(120%);
    -webkit-backdrop-filter: blur(20px) saturate(230%) contrast(120%);
    
    /* 液体表面张力高光边框 */
    border: 1px solid rgba(255, 255, 255, 0.85);
    
    /* 核心增强：多层软流体物理阴影矩阵（浅色模式下跃然纸上的秘密） */
    box-shadow: 
        0 4px 14px rgba(120, 110, 140, 0.06),       /* 远景微弱环境光散落 */
        0 12px 28px rgba(90, 80, 105, 0.12),        /* 核心流体悬浮投影 */
        inset 0 1px 2px rgba(255, 255, 255, 0.95),  /* 顶部边缘液体反光 */
        inset 0 -1px 1px rgba(0, 0, 0, 0.02);       /* 底部暗面边缘积水 */

    /* Vue 组件风格：iOS 经典的“非线性流体果冻”出场曲线 */
    opacity: 0;
    transform: translateY(-16px) scale(0.93) rotateX(-8deg);
    transition: 
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. 组件激活显现状态 (Vue Transitions) */
.mac-toast-component.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}

/* 4. 内部三维流体反射几何层 */
.glass-fluid-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(at 10% 10%, rgba(255, 255, 255, 0.6) 0px, transparent 60%);
    pointer-events: none;
}
.mac-toast-component .toast-text {
    position: relative;
    z-index: 2;
}

/* ============================================================================
   🎨 浅色模式下的四维语义化色彩状态（透亮冰淇淋色系，拒绝暗沉）
   ============================================================================ */
.mac-toast-component.info { 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(235, 242, 255, 0.75) 100%); 
    border-color: rgba(140, 180, 255, 0.45);
}
.mac-toast-component.success { 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(225, 252, 232, 0.8) 100%); 
    border-color: rgba(85, 215, 115, 0.5);
    color: #094a1a; /* 极深墨绿字，高强对比度 */
}
.mac-toast-component.warning { 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 243, 215, 0.85) 100%); 
    border-color: rgba(255, 175, 40, 0.5);
    color: #573700; /* 深浓咖字 */
}
.mac-toast-component.error { 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 228, 230, 0.8) 100%); 
    border-color: rgba(255, 85, 100, 0.5);
    color: #5c0a11; /* 深暗红字 */
}

/* ============================================================================
   🌙 暗色模式环境自动适配（深邃钛金黑玻璃，对比强烈）
   ============================================================================ */
body.dark-mode .mac-toast-component {
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, rgba(24, 24, 28, 0.55) 0%, rgba(18, 18, 20, 0.35) 100%);
    backdrop-filter: blur(24px) saturate(180%) brightness(95%);
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(95%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.22),
        0 20px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
body.dark-mode .mac-toast-component.info { background-image: linear-gradient(135deg, rgba(30, 30, 35, 0.65) 0%, rgba(100, 150, 255, 0.08) 100%); }
body.dark-mode .mac-toast-component.success { background-image: linear-gradient(135deg, rgba(24, 35, 28, 0.65) 0%, rgba(50, 210, 110, 0.08) 100%); border-color: rgba(50, 210, 110, 0.25); }
body.dark-mode .mac-toast-component.warning { background-image: linear-gradient(135deg, rgba(35, 30, 24, 0.65) 0%, rgba(255, 165, 0, 0.08) 100%); border-color: rgba(255, 165, 0, 0.25); }
body.dark-mode .dark-mode .mac-toast-component.error { background-image: linear-gradient(135deg, rgba(35, 24, 24, 0.65) 0%, rgba(255, 70, 85, 0.08) 100%); border-color: rgba(255, 70, 85, 0.25); }