/**
 * 浏览器兼容性样式
 * 文件: browser-compatibility.css
 * 作者: AI魔方开发团队
 * 创建时间: 2025-01-26
 * 描述: 提供跨浏览器兼容性支持，特别是CSS模糊效果的降级处理
 */

/* ==================== 模糊效果兼容性处理 ==================== */

/* 检测backdrop-filter支持情况 */
@supports (backdrop-filter: blur(1px)) {
    /* 支持backdrop-filter的现代浏览器 */
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px); /* Safari支持 */
    }
    
    .modal-backdrop.blur.enhanced {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

@supports not (backdrop-filter: blur(1px)) {
    /* 不支持backdrop-filter的旧版浏览器降级处理 */
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.4);
        /* 使用更深的背景色替代模糊效果 */
    }
    
    .modal-backdrop.blur.enhanced {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* ==================== 浏览器特定修复 ==================== */

/* Internet Explorer 11 兼容性 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        filter: none; /* IE不支持backdrop-filter */
    }
    
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* Edge Legacy (EdgeHTML) 兼容性 */
@supports (-ms-ime-align: auto) {
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: none;
    }
}

/* Firefox 兼容性优化 */
@-moz-document url-prefix() {
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(2px);
    }
}

/* Safari 特定优化 */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .modal-backdrop.blur {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
    }
}

/* Chrome/Chromium 优化 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .modal-backdrop.blur {
        backdrop-filter: blur(2px);
    }
}

/* ==================== 性能优化 ==================== */

/* 减少动画模式下的性能优化 */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop {
        transition: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

/* 低端设备性能优化 */
@media (max-width: 768px) and (max-height: 1024px) {
    .modal-backdrop.blur {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

/* ==================== 高对比度模式支持 ==================== */

@media (prefers-contrast: high) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.9);
    }
}

/* ==================== 暗色主题支持 ==================== */

@media (prefers-color-scheme: dark) {
    .modal-backdrop.transparent {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    .modal-backdrop.blur {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

/* ==================== 调试和开发辅助 ==================== */

/* 开发模式下的视觉调试 */
.debug-mode .modal-backdrop {
    border: 2px dashed #ff0000;
    opacity: 0.8 !important;
}

.debug-mode .modal-backdrop::before {
    content: 'backdrop-filter: ' attr(data-filter-support);
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 9999;
}

/* ==================== 响应式断点优化 ==================== */

/* 超小屏幕设备 */
@media (max-width: 480px) {
    .modal-backdrop.blur {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1024px) {
    .modal-backdrop.blur {
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }
}

/* 桌面设备 */
@media (min-width: 1025px) {
    .modal-backdrop.blur {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}