/* 移动端专用样式修复 - 仅在手机上显示 */

@media (max-width: 768px) {
  /* 隐藏移动端的导航栏 */
  .app-nav {
    display: none !important;
  }

  /* 封面页优化 - 显示完整的内容 */
  .cyber-cover-container {
    min-height: 100vh !important;
    height: auto !important;
    padding: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cover-main-content {
    padding: 30px 15px !important;
    margin: 10px !important;
    border-radius: 15px !important;
  }

  .cover-main-content h1 {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
  }

  .cover-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  .cover-links {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cover-link {
    width: 100% !important;
    padding: 10px 15px !important;
    font-size: 0.85rem !important;
  }

  /* 确保不遮挡"开始阅读"按钮 */
  .cover-link.primary {
    display: block !important;
    min-height: 44px !important;
    line-height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* GitHub角标样式 - 移动端调整 */
  .github-corner {
    position: fixed !important;
    z-index: 999 !important;
    top: 12px !important;
    right: 12px !important;
  }
  
  .github-corner img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  /* 侧边栏样式优化 */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background-color: #fff !important;
    border-right: 1px solid rgba(0, 0, 0, .07) !important;
    overflow-y: auto !important;     /* 确保可以滚动 */
    overflow-x: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease-out !important;
    z-index: 200 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;  /* 侧边栏本身可以接收点击 */
  }

  /* 侧边栏显示状态 */
  .sidebar.show {
    transform: translateX(0) !important;
  }

  /* 确保侧边栏中的所有元素都可互动 */
  .sidebar * {
    pointer-events: auto !important;
  }
  
  /* 确保侧边栏不被遮罩层阻挡 */
  .sidebar {
    pointer-events: auto !important;  /* 侧边栏一定要可以接收点击 */
  }
    
  /* 遮罩层时，侧边栏区域的点击不被阻挡 */
  .sidebar-overlay.show + .sidebar,
  .sidebar-overlay.show ~ .sidebar {
    pointer-events: auto !important;
  }

  /* 确保侧边栏链接可点击 */
  .sidebar ul li a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 201 !important;
    display: block !important;
    padding: 8px 16px !important;
  }
  
  /* 侧边栏菜单里的强体文本 */
  .sidebar ul li strong {
    pointer-events: none !important;
    display: block !important;
  }

  /* 侧边栏切换按鑵 */
  .sidebar-toggle {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 201 !important;
    background-color: #42b983 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .sidebar-toggle:hover {
    background-color: #3a9970 !important;
  }

  /* 遮罩层样式 */
  .sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 199 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .3s ease, visibility .3s ease !important;
    pointer-events: none !important;  /* 默认不拦挡点击 */
  }

  /* 遮罩层显示状态 */
  .sidebar-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;  /* 只在是指截意园内的点击 */
    /* 但是一定要是上面的侧边栏可以接收点击 */
  }
  
  /* 修复：遮罩层仅次于侧边栏 */
  .sidebar {
    z-index: 200 !important;  /* 确保侧边栏在遮罩层上方 */
  }

  /* 不需要盻模布局调整 */
  .content {
    left: 0 !important;
    padding-top: 20px !important;
    position: static !important;
    max-width: 100vw !important;
  }

  /* 确保主容器正常显示 */
  main {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .sidebar {
    width: 250px !important;
  }

  .sidebar-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    font-size: 18px !important;
  }

  .github-corner img {
    width: 32px !important;
    height: 32px !important;
  }
}