/**
 * 移动端侧边栏优化 - 80%宽度 + 模糊背景层叠效果
 * 针对手机端操作体验的专门优化
 */

/* 移动端侧边栏宽度优化 - 使用!important确保覆盖原有规则 */
@media (max-width: 768px) {
  .sidebar {
    width: 95vw !important; /* 使用视口宽度的95% */
    max-width: 400px !important; /* 最大宽度限制，避免平板上过宽 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* 关键修复：启用垂直滚动 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important; /* 固定高度为视口高度 */
    height: 100dvh !important; /* 动态视口高度(iOS Safari优化) */
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    /* 滚动优化 */
    -webkit-overflow-scrolling: touch !important; /* iOS流畅滚动 */
    scroll-behavior: smooth !important; /* 平滑滚动 */
    overscroll-behavior-y: contain !important; /* 防止滚动穿透 */
    /* 移除底部padding，因为sticky定位会自动处理 */
    padding-bottom: 0 !important;
  }

  /* 侧边栏打开时，主内容区层叠在下方（移除模糊效果） */
  .sidebar.open ~ .content,
  .sidebar.open ~ main {
    margin-left: 0 !important; /* 不推移内容，而是覆盖 */
    /* 移除模糊效果以改善用户体验 */
    pointer-events: none !important; /* 禁用交互 */
  }

  /* 确保侧边栏内部元素可以交互 */
  .sidebar {
    pointer-events: auto !important;
  }

  /* 确保侧边栏内的所有交互元素都可以点击 */
  .sidebar * {
    pointer-events: auto !important;
  }

  /* 特别确保所有可交互元素正常工作 */
  .sidebar .user-actions,
  .sidebar .subscribe-form-inline,
  .sidebar .subscribe-form-inline input,
  .sidebar .subscribe-form-inline button,
  .sidebar .btn-member-login,
  .sidebar .nav-list,
  .sidebar .nav-list a,
  .sidebar .group-header,
  .sidebar .sub-list a,
  .sidebar .mobile-sidebar-collapse {
    pointer-events: auto !important;
  }

  /* 防止iOS Safari的触摸延迟问题 */
  .sidebar input,
  .sidebar button,
  .sidebar a {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    touch-action: manipulation !important;
  }

  /* 增强overlay背景效果 */
  .sidebar.open ~ .overlay,
  .overlay.active {
    opacity: 0.6 !important; /* 增加背景遮罩透明度 */
    pointer-events: auto !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  /* 侧边栏关闭时恢复内容 */
  .content,
  main {
    filter: none;
    -webkit-filter: none;
    pointer-events: auto;
  }

  /* 优化侧边栏内部布局 - 允许内容自然流动 */
  .sidebar nav {
    padding-bottom: 8px !important; /* 只需要少量底部间距 */
    margin-bottom: 0 !important; /* 移除user-actions.css中设置的80px margin */
    overflow: visible !important; /* 允许内容自然溢出到父容器滚动区域 */
    height: auto !important; /* 自适应高度 */
    max-height: none !important; /* 移除最大高度限制 */
  }

  /* 确保侧边栏内容容器不限制高度和滚动 */
  .sidebar-content,
  .sidebar .nav-list,
  .sidebar .sidebar-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* 移动端登录按钮优化 - 使用sticky定位粘在底部 */
  .sidebar-bottom-actions {
    position: sticky !important; /* 使用sticky让它粘在滚动容器底部 */
    bottom: 0 !important; /* 粘在底部 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; /* 占满侧边栏宽度 */
    margin: 0 !important;
    padding: 16px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px)) !important; /* iPhone底部安全区域：基础20px + 系统安全区域 */
    border-radius: 0 !important; /* 移除圆角使其贴合底部 */
    box-shadow: 0 -4px 20px rgba(250, 140, 50, 0.2) !important; /* 改为向上的阴影 */
    z-index: 1060 !important; /* 确保在侧边栏内容之上 */
    background: linear-gradient(135deg, rgba(255, 248, 225, 0.98), rgba(255, 224, 178, 0.95)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    min-height: 200px !important; /* 进一步增加高度确保图标完整显示 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .sidebar-bottom-actions .btn-member-login {
    font-size: 15px !important;
    padding: 14px 20px !important;
    min-height: 48px !important; /* 符合移动端最小触摸目标 */
    width: 100% !important; /* 按钮占满宽度 */
    margin-bottom: 0 !important; /* 移除margin,用flex gap代替 */
    flex-shrink: 0 !important; /* 防止按钮缩小 */
  }

  /* 确保社交媒体图标显示 */
  .sidebar-bottom-actions .social-media-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 16px !important; /* 增加底部padding到16px，配合容器的底部安全区域 */
    margin-top: 16px !important;
    border-top: 1px solid rgba(250, 140, 50, 0.3) !important;
    flex-shrink: 0 !important; /* 防止图标区域缩小 */
    min-height: 68px !important; /* 增加最小高度: 16px上padding + 36px图标 + 16px下padding */
  }

  /* 确保图标链接可见 */
  .sidebar-bottom-actions .social-media-icons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* 移动端侧边栏头部专门处理 */
  .sidebar-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    height: 60px !important;
  }

  .sidebar-logo {
    width: 32px !important;
    height: 32px !important;
  }

  /* 移动端添加折叠按钮的JavaScript将会动态插入 */
  .mobile-sidebar-collapse {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 6px !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 11 !important;
  }

  .mobile-sidebar-collapse:hover {
    background: rgba(250, 140, 50, 0.1) !important;
    color: #fa8c32 !important;
  }

  /* 调整页面顶部menu-toggle按钮位置，与侧边栏logo对齐 */
  .menu-toggle {
    position: fixed !important;
    top: 10px !important; /* 调整到与sidebar-header中心对齐，优化上移位置 */
    left: 16px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    padding: 6px !important;
    background: rgba(250, 140, 50, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1100 !important;
  }

  /* 菜单组样式优化 */
  .nav-group {
    margin-bottom: 1rem;
  }

  .group-header.collapsible {
    padding: 16px 20px;
    min-height: 56px; /* 增加触摸目标 */
    border-radius: 12px;
  }

  .group-title {
    font-size: 1.1rem;
    font-weight: 700;
  }

  .toggle-icon {
    font-size: 1rem;
    width: 24px;
    height: 24px;
  }

  /* 子菜单优化 */
  .sub-list li {
    margin-bottom: 0.4rem;
  }

  .sub-list a {
    padding: 12px 16px;
    font-size: 0.95rem;
    min-height: 44px; /* 符合触摸标准 */
    display: flex;
    align-items: center;
    border-radius: 10px;
  }

  /* 三级菜单优化 */
  .sub-list .sub-list a {
    padding: 10px 14px;
    font-size: 0.9rem;
    min-height: 40px;
  }

  /* 订阅区域移动端优化 */
  .user-actions {
    margin: 16px;
    padding: 18px;
    border-radius: 16px;
    pointer-events: auto !important; /* 确保用户操作区域可交互 */
  }

  .subscribe-form-inline input {
    padding: 16px 18px;
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 48px;
    border-radius: 14px;
    pointer-events: auto !important; /* 确保输入框可点击 */
    -webkit-user-select: text !important; /* 允许文本选择 */
    user-select: text !important;
  }

  /* 确保输入框焦点状态正常 */
  .subscribe-form-inline input:focus {
    outline: 2px solid #16a34a !important;
    outline-offset: 2px !important;
  }

  .btn-subscribe-submit {
    padding: 16px 24px;
    font-size: 15px;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
  }
}

/* 超小屏幕优化 (iPhone SE等) */
@media (max-width: 375px) {
  .sidebar {
    width: 95vw; /* 小屏幕保持95%比例 */
    max-width: 380px;
  }

  .group-header.collapsible {
    padding: 14px 16px;
    min-height: 52px;
  }

  .group-title {
    font-size: 1.05rem;
  }

  .sub-list a {
    padding: 10px 14px;
    font-size: 0.92rem;
    min-height: 42px;
  }
}

/* 大屏手机优化 (iPhone Plus等) */
@media (max-width: 768px) and (min-width: 414px) {
  .sidebar {
    width: 95vw; /* 大屏手机保持95%比例 */
    max-width: 420px;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 60vw; /* 横屏时减少宽度 */
    max-width: 280px;
  }

  .sidebar nav {
    padding-bottom: 8px !important; /* 横屏时也使用少量底部间距 */
    margin-bottom: 0 !important; /* 移除margin */
  }
}

/* 高分辨率屏幕优化 */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .sidebar {
    border-right: 0.5px solid rgba(250, 140, 50, 0.3);
  }

  .group-header.collapsible {
    border: 0.5px solid rgba(250, 140, 50, 0.2);
  }
}

/* 触摸设备手势优化 */
@media (max-width: 768px) and (pointer: coarse) {
  /* 增加所有可点击元素的触摸区域 */
  .nav-list a,
  .sub-list a,
  .group-header.collapsible {
    position: relative;
  }

  .nav-list a::before,
  .sub-list a::before,
  .group-header.collapsible::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
  }
}

/* 无障碍优化 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar.open ~ .content,
  .sidebar.open ~ main,
  .overlay {
    transition: none !important;
    animation: none !important;
  }

  .content,
  main {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* 高对比度模式 */
@media (max-width: 768px) and (prefers-contrast: high) {
  .sidebar {
    background: rgba(255, 240, 200, 0.98);
    border-right: 2px solid #fa8c32;
  }

  .group-header.collapsible {
    background: rgba(250, 140, 50, 0.15);
    border: 2px solid #fa8c32;
  }

  .overlay.active {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
  }
}

/* iOS Safari优化 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .sidebar {
      /* iOS Safari的backdrop-filter优化 */
      -webkit-backdrop-filter: blur(10px);
      /* 防止iOS的橡皮筋效果 */
      overscroll-behavior-y: contain;
      /* iOS滚动优化 - 在侧边栏本身启用 */
      -webkit-overflow-scrolling: touch !important;
      scroll-behavior: smooth !important;
    }

    .sidebar nav {
      /* 确保nav不阻止滚动 */
      -webkit-overflow-scrolling: auto;
    }
  }
}