/* Chrome特定兼容性修复 */

/* 修复Chrome中可能的flexbox布局问题 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* 强制Chrome使用标准盒模型 */
    *, *::before, *::after {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    /* 修复导航栏背景模糊效果 */
    .navbar {
        -webkit-backdrop-filter: blur(10px) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* 修复手机模拟器背景模糊 */
    .mockup-placeholder {
        -webkit-backdrop-filter: blur(10px) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* 修复按钮悬停效果 */
    .btn:hover {
        -webkit-transform: translateY(-2px) !important;
        transform: translateY(-2px) !important;
    }

    /* 修复卡片悬停效果 */
    .feature-card:hover,
    .gallery-item:hover {
        -webkit-transform: translateY(-5px) !important;
        transform: translateY(-5px) !important;
    }

    /* 修复下载按钮悬停效果 */
    .download-btn:hover {
        -webkit-transform: translateY(-2px) !important;
        transform: translateY(-2px) !important;
    }

    /* 修复flexbox gap兼容性 */
    .hero-buttons {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
    }

    /* 确保网格布局在Chrome中正确显示 */
    .features-grid,
    .gallery-grid,
    .footer-content {
        display: -ms-grid !important;
        display: grid !important;
    }

    /* 修复动画效果 */
    .fade-in-up {
        -webkit-animation: fadeInUp 0.6s ease-out !important;
        animation: fadeInUp 0.6s ease-out !important;
    }
}

/* Chrome版本检测和特定修复 */
@supports (-webkit-appearance: none) {
    /* 仅Chrome支持的属性 */
    .navbar {
        background: #040404 !important;
    }

    /* 修复可能的z-index问题 */
    .navbar {
        z-index: 1000 !important;
    }

    /* 确保文本渲染正确 */
    body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* 针对Chrome 80+的额外修复 */
@supports (backdrop-filter: blur(10px)) {
    .navbar,
    .mockup-placeholder {
        backdrop-filter: blur(10px) !important;
    }
}

/* 修复Chrome中的滚动条样式问题 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}