/**
 * 🍎 Apple Safari移动端特殊优化系统
 * 专门针对iPhone、iPad Safari浏览器的深度优化
 * 
 * 特性：
 * - iOS Safari特有功能支持
 * - 完美的viewport处理
 * - 安全区域适配
 * - Touch Bar和3D Touch集成
 * - WebKit专门优化
 * - 原生iOS体验模拟
 */

/* ===== iOS Safari基础优化 ===== */

/* 检测iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari特有的CSS变量 */
    :root {
        /* iOS安全区域变量 */
        --ios-safe-area-inset-top: env(safe-area-inset-top);
        --ios-safe-area-inset-right: env(safe-area-inset-right);
        --ios-safe-area-inset-bottom: env(safe-area-inset-bottom);
        --ios-safe-area-inset-left: env(safe-area-inset-left);
        
        /* iOS状态栏高度 */
        --ios-status-bar-height: 44px;
        --ios-home-indicator-height: 34px;
        
        /* iOS动画时间 */
        --ios-animation-duration: 0.35s;
        --ios-spring-duration: 0.55s;
        
        /* iOS毛玻璃参数 */
        --ios-blur-light: blur(20px) saturate(1.8) brightness(1.1);
        --ios-blur-dark: blur(25px) saturate(1.6) brightness(0.8);
    }
}

/* ===== iOS Safari专用类标识 ===== */

.ios-safari {
    /* 启用iOS Safari专门优化 */
    -webkit-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
    -webkit-backface-visibility: hidden !important;
    
    /* iOS弹性滚动 */
    -webkit-overflow-scrolling: touch !important;
    
    /* iOS触摸优化 */
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

/* ===== 安全区域适配 ===== */

/* iPhone X及以上机型的安全区域处理 */
@supports (padding: env(safe-area-inset-top)) {
    .ios-safari {
        padding-left: var(--ios-safe-area-inset-left) !important;
        padding-right: var(--ios-safe-area-inset-right) !important;
    }
    
    .ios-safari .navbar {
        padding-top: calc(var(--ios-safe-area-inset-top) + 10px) !important;
        height: calc(var(--navbar-base-height) + var(--ios-safe-area-inset-top)) !important;
    }
    
    .ios-safari .tools-section {
        padding-top: calc(var(--navbar-total-offset) + var(--ios-safe-area-inset-top) + 20px) !important;
        padding-bottom: calc(100px + var(--ios-safe-area-inset-bottom)) !important;
    }
    
    /* 模态框适配安全区域 */
    .ios-safari .tool-modal-content,
    .ios-safari .apple-modal__container {
        margin-top: var(--ios-safe-area-inset-top) !important;
        margin-bottom: var(--ios-safe-area-inset-bottom) !important;
        max-height: calc(100vh - var(--ios-safe-area-inset-top) - var(--ios-safe-area-inset-bottom) - 40px) !important;
    }
    
    /* 底部按钮区域适配 */
    .ios-safari .modal-footer,
    .ios-safari .tool-modal-footer {
        padding-bottom: calc(20px + var(--ios-safe-area-inset-bottom)) !important;
    }
}

/* ===== iOS特有的毛玻璃效果增强 ===== */

.ios-safari .tool-card {
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: var(--ios-blur-light) !important;
    backdrop-filter: var(--ios-blur-light) !important;
    
    /* iOS风格边框 */
    border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
    
    /* iOS阴影系统 */
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.08),
        0 4px 15px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.4) !important;
}

.ios-safari .tool-card:hover {
    -webkit-backdrop-filter: blur(30px) saturate(2.0) brightness(1.15) !important;
    backdrop-filter: blur(30px) saturate(2.0) brightness(1.15) !important;
    
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.04),
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* iOS深色模式毛玻璃效果 */
@media (prefers-color-scheme: dark) {
    .ios-safari .tool-card {
        background: rgba(28, 28, 30, 0.7) !important;
        -webkit-backdrop-filter: var(--ios-blur-dark) !important;
        backdrop-filter: var(--ios-blur-dark) !important;
        border-color: rgba(99, 99, 102, 0.3) !important;
        
        box-shadow: 
            0 8px 30px rgba(0, 0, 0, 0.4),
            0 4px 15px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.05) !important;
    }
    
    .ios-safari .tool-card:hover {
        -webkit-backdrop-filter: blur(35px) saturate(1.8) brightness(0.9) !important;
        backdrop-filter: blur(35px) saturate(1.8) brightness(0.9) !important;
        
        box-shadow: 
            0 16px 40px rgba(0, 0, 0, 0.5),
            0 8px 20px rgba(0, 0, 0, 0.4),
            0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.15),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }
}

/* ===== iOS导航栏优化 ===== */

.ios-safari .navbar {
    background: rgba(248, 248, 248, 0.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    
    /* iOS风格的细边框 */
    border-bottom: 0.33px solid rgba(0, 0, 0, 0.1) !important;
    
    /* iOS风格的导航栏阴影 */
    box-shadow: 
        0 1px 0 0 rgba(255, 255, 255, 0.8),
        0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

@media (prefers-color-scheme: dark) {
    .ios-safari .navbar {
        background: rgba(44, 44, 46, 0.8) !important;
        border-bottom-color: rgba(84, 84, 88, 0.3) !important;
        
        box-shadow: 
            0 1px 0 0 rgba(255, 255, 255, 0.1),
            0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    }
}

/* ===== iOS模态框系统优化 ===== */

.ios-safari .tool-modal,
.ios-safari .apple-modal {
    /* iOS风格的模态框背景 */
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

.ios-safari .tool-modal-overlay,
.ios-safari .apple-modal__backdrop {
    background: rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.2) !important;
    backdrop-filter: blur(15px) saturate(1.2) !important;
}

.ios-safari .tool-modal-content,
.ios-safari .apple-modal__container {
    background: rgba(248, 248, 248, 0.75) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
    backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
    
    /* iOS风格的圆角 */
    border-radius: 20px !important;
    
    /* iOS高级阴影系统 */
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.12),
        0 16px 32px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
}

@media (prefers-color-scheme: dark) {
    .ios-safari .tool-modal-content,
    .ios-safari .apple-modal__container {
        background: rgba(28, 28, 30, 0.75) !important;
        -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(0.8) !important;
        backdrop-filter: blur(40px) saturate(1.6) brightness(0.8) !important;
        
        box-shadow: 
            0 32px 64px rgba(0, 0, 0, 0.6),
            0 16px 32px rgba(0, 0, 0, 0.4),
            0 8px 16px rgba(0, 0, 0, 0.3),
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }
}

/* ===== iOS触摸和手势优化 ===== */

.ios-safari .tool-card,
.ios-safari .btn-use-tool,
.ios-safari .btn-primary {
    /* 增大触摸区域 */
    min-height: 44px !important;
    min-width: 44px !important;
    
    /* iOS触摸反馈 */
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1) !important;
    
    /* 禁用长按菜单 */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

/* iOS滚动优化 */
.ios-safari .tool-modal-body,
.ios-safari .apple-modal__body {
    /* iOS弹性滚动 */
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
    
    /* iOS滚动条样式 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ios-safari .tool-modal-body::-webkit-scrollbar,
.ios-safari .apple-modal__body::-webkit-scrollbar {
    display: none !important;
}

/* ===== iOS动画优化 ===== */

.ios-safari .tool-card {
    /* iOS风格的动画时间 */
    transition: all var(--ios-animation-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ios-safari .tool-card:hover {
    /* iOS弹簧效果 */
    transition: all var(--ios-spring-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* iOS按钮按压动画 */
.ios-safari .btn-use-tool:active,
.ios-safari .tool-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* iOS模态框动画 */
.ios-safari .tool-modal-content,
.ios-safari .apple-modal__container {
    animation: iosModalSlideIn var(--ios-spring-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

@keyframes iosModalSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(50px);
        filter: blur(10px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02) translateY(-5px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

/* ===== iOS PWA支持 ===== */

/* 检测PWA模式（添加到主屏幕后） */
@media (display-mode: standalone) {
    .ios-safari {
        /* PWA模式下的状态栏处理 */
        padding-top: var(--ios-status-bar-height) !important;
    }
    
    .ios-safari .navbar {
        top: var(--ios-status-bar-height) !important;
        height: calc(var(--navbar-base-height) + var(--ios-status-bar-height)) !important;
    }
    
    .ios-safari .tools-section {
        padding-top: calc(var(--navbar-total-offset) + var(--ios-status-bar-height) + 20px) !important;
    }
}

/* iOS全屏模式支持 */
.ios-safari.fullscreen {
    padding: 0 !important;
}

.ios-safari.fullscreen .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* ===== iOS Safari特殊功能支持 ===== */

/* 3D Touch / Force Touch支持 */
.ios-safari.has-force-touch .tool-card {
    /* 为支持Force Touch的设备添加特殊样式 */
    cursor: pointer !important;
}

.ios-safari.has-force-touch .tool-card.force-pressed {
    transform: scale(1.05) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.95) !important;
    
    -webkit-backdrop-filter: blur(35px) saturate(2.2) brightness(1.2) !important;
    backdrop-filter: blur(35px) saturate(2.2) brightness(1.2) !important;
}

/* Touch Bar支持 */
.ios-safari.has-touch-bar {
    /* 为支持Touch Bar的Mac设备添加标识 */
}

.ios-safari.has-touch-bar .tool-card[data-touch-bar-key] {
    position: relative !important;
}

.ios-safari.has-touch-bar .tool-card[data-touch-bar-key]::after {
    content: attr(data-touch-bar-key) !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.5) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* ===== iOS Safari性能优化 ===== */

.ios-safari {
    /* WebKit渲染优化 */
    -webkit-perspective: 1000px !important;
    -webkit-transform-style: preserve-3d !important;
    
    /* GPU加速 */
    -webkit-transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    
    /* 字体渲染优化 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* 内存优化 */
    contain: layout style paint !important;
}

/* iOS低内存设备优化 */
@media (max-device-memory: 2) {
    .ios-safari .tool-card {
        -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
        backdrop-filter: blur(10px) saturate(1.4) !important;
    }
    
    .ios-safari .tool-modal-content {
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
    }
}

/* ===== iOS键盘适配 ===== */

/* 虚拟键盘弹出时的适配 */
.ios-safari.keyboard-open {
    height: 100vh !important;
    overflow: hidden !important;
}

.ios-safari.keyboard-open .tool-modal-content {
    max-height: 50vh !important;
    margin-top: 10vh !important;
}

.ios-safari.keyboard-open .tool-modal-body {
    max-height: 30vh !important;
    overflow-y: auto !important;
}

/* ===== iOS网络状态适配 ===== */

/* 慢网络连接优化 */
@media (max-bandwidth: 1mb) {
    .ios-safari .tool-card {
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }
    
    .ios-safari * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
}

/* ===== iOS电池优化 ===== */

/* 低电量模式适配 */
@media (prefers-reduced-motion: reduce) {
    .ios-safari * {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        transition: opacity 0.1s ease !important;
    }
    
    .ios-safari .tool-card:hover {
        transform: none !important;
    }
}

/* ===== iOS调试和开发支持 ===== */

/* Safari Web Inspector样式 */
.ios-safari.debug {
    outline: 2px dashed rgba(255, 0, 0, 0.5) !important;
}

.ios-safari.debug .tool-card {
    outline: 1px solid rgba(0, 255, 0, 0.5) !important;
}

/* iOS模拟器检测 */
@media (hover: none) and (pointer: coarse) and (-webkit-touch-callout: none) {
    .ios-safari {
        /* iOS设备特有样式 */
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* ===== 响应式断点优化（iOS设备尺寸） ===== */

/* iPhone SE (375px) */
@media (max-width: 375px) and (-webkit-touch-callout: none) {
    .ios-safari .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }
    
    .ios-safari .tool-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }
}

/* iPhone 12/13/14 (390px) */
@media (max-width: 390px) and (-webkit-touch-callout: none) {
    .ios-safari .tool-card h3 {
        font-size: 1.125rem !important;
    }
}

/* iPhone 12/13/14 Pro Max (428px) */
@media (max-width: 428px) and (-webkit-touch-callout: none) {
    .ios-safari .tools-grid {
        gap: 18px !important;
    }
}

/* iPad Mini (768px) */
@media (min-width: 768px) and (max-width: 834px) and (-webkit-touch-callout: none) {
    .ios-safari .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* iPad Pro (1024px+) */
@media (min-width: 1024px) and (-webkit-touch-callout: none) {
    .ios-safari .tools-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 1200px !important;
    }
}

/* ===== iOS Safari性能监控 ===== */

.ios-safari.performance-mode {
    /* 性能模式下的降级样式 */
    --ios-blur-light: blur(8px) saturate(1.2) !important;
    --ios-blur-dark: blur(10px) saturate(1.1) !important;
}

.ios-safari.performance-mode .tool-card {
    -webkit-backdrop-filter: var(--ios-blur-light) !important;
    backdrop-filter: var(--ios-blur-light) !important;
    
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.ios-safari.performance-mode * {
    animation-duration: 0.15s !important;
    transition-duration: 0.15s !important;
}