/* ========================================
   移动端UX修复 - 世界级标准
   基于: iOS HIG, Material Design, WCAG 2.1
   ======================================== */

@media (max-width: 768px) {
  
  /* ===== 1. 触摸交互优化 ===== */
  
  /* 恢复触摸反馈，但更精致 */
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05) !important;
  }
  
  /* 按钮触摸反馈 */
  button, .nav-item, .back-btn, .sidebar-toggle {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1) !important;
    transition: all 0.15s ease !important;
  }
  
  /* 触摸时的微妙缩放反馈 */
  button:active, .nav-item:active, .back-btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* ===== 2. 可访问性增强 ===== */
  
  /* 恢复Focus状态，但美化 */
  *:focus {
    outline: 2px solid rgba(59, 130, 246, 0.6) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
  }
  
  /* 键盘导航支持 */
  .mobile-bottom-nav .nav-item:focus {
    background: rgba(59, 130, 246, 0.1) !important;
    outline: 2px solid #3b82f6 !important;
  }
  
  /* Skip链接 */
  .skip-to-main {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    z-index: 9999 !important;
    padding: 1rem !important;
    background: #3b82f6 !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 0 0 8px 0 !important;
  }
  
  .skip-to-main:focus {
    left: 0 !important;
  }
  
  /* ===== 3. 触摸目标优化 ===== */
  
  /* 确保所有触摸目标至少44x44px (Apple标准) */
  .mobile-bottom-nav .nav-item {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 0.5rem !important;
  }
  
  .sidebar-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  .back-btn {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
  }
  
  /* ===== 4. 滚动体验优化 ===== */
  
  /* iOS风格的弹性滚动 */
  body, .main, .detail-page {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  
  /* 防止过度滚动 */
  .mobile-bottom-nav {
    overscroll-behavior: none !important;
  }
  
  /* ===== 5. 加载状态优化 ===== */
  
  /* 骨架屏动画 */
  @keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
  }
  
  .skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200px 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
  }
  
  /* 图片懒加载占位符 */
  img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200px 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
  }
  
  img[loading="lazy"].loaded {
    animation: none !important;
    background: none !important;
  }
  
  /* ===== 6. 错误状态处理 ===== */
  
  /* 网络错误提示 */
  .network-error {
    position: fixed !important;
    top: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    background: #ef4444 !important;
    color: white !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
    text-align: center !important;
    transform: translateY(-100px) !important;
    transition: transform 0.3s ease !important;
  }
  
  .network-error.show {
    transform: translateY(0) !important;
  }
  
  /* ===== 7. 手势支持 ===== */
  
  /* 侧滑返回手势区域 */
  .swipe-back-area {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 20px !important;
    height: 100vh !important;
    z-index: 999 !important;
    pointer-events: auto !important;
  }
  
  /* 详情页侧滑指示器 */
  .detail-page::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 4px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 4px 4px 0 !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }
  
  /* ===== 8. 性能优化 ===== */
  
  /* GPU加速关键元素 */
  .mobile-bottom-nav,
  .sidebar-toggle,
  .hero-slides,
  .detail-page {
    transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  /* 减少重绘 */
  .mobile-bottom-nav .nav-item {
    contain: layout style paint !important;
  }
  
  /* ===== 9. 深色模式支持 ===== */
  
  @media (prefers-color-scheme: dark) {
    .skeleton-loading {
      background: linear-gradient(90deg, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%) !important;
    }
    
    .network-error {
      background: #dc2626 !important;
    }
  }
  
  /* ===== 10. 减少动画偏好支持 ===== */
  
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    
    .skeleton-loading {
      animation: none !important;
    }
  }
}

/* ===== 横屏优化 ===== */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-bottom-nav {
    height: 60px !important;
    padding: 0.5rem 0.5rem !important;
  }
  
  .mobile-bottom-nav .nav-item span {
    font-size: 0.6rem !important;
  }
  
  .hero-section {
    height: 50vh !important;
    min-height: 300px !important;
  }
}