/* 巡礼点卡片滚动修复 */

/* 确保信息卡片可以滚动 */
.info-card {
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 确保评论区域可以滚动 */
.comments-container {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.02);
}

/* 移动端特殊处理 */
@media (max-width: 768px) {
  /* 确保信息卡片在移动端可以滚动 */
  .info-card {
    max-height: 70vh;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  /* 确保评论区域在移动端可以滚动 */
  .comments-container {
    max-height: 200px;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  /* 防止滚动冲突 */
  .info-card .card-body {
    overflow-y: visible !important;
  }
  
  /* 确保图片不会过大 */
  .info-card img {
    max-width: 100%;
    height: auto;
  }
  
  /* 确保按钮区域不会被遮挡 */
  .info-card .map-links {
    margin-bottom: 10px;
  }
  
  /* 确保评论区域有足够的内边距 */
  .comments-container {
    padding: 10px;
    margin-top: 15px;
  }
  
  /* 修复Android设备上的滚动问题 */
  .android-device .info-card,
  .android-device .comments-container {
    transform: translateZ(0);
    will-change: scroll-position;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* 确保滚动条样式美观 */
.info-card::-webkit-scrollbar,
.comments-container::-webkit-scrollbar {
  width: 4px;
}

.info-card::-webkit-scrollbar-thumb,
.comments-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* 确保滚动区域有明显的视觉提示 */
.comments-container {
  position: relative;
}

.comments-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
  pointer-events: none;
}

.comments-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
  pointer-events: none;
}

/* 修复触摸事件处理 */
.info-card,
.comments-container {
  touch-action: pan-y;
}

/* 确保卡片内的内容可以正常点击 */
.info-card * {
  pointer-events: auto;
}

/* 修复移动端抽屉中的巡礼点卡片滚动问题 */
#mobile-anime-list .point-item {
  position: relative;
  z-index: 5;
}

/* 修复移动端抽屉中的评论区域滚动问题 */
#mobile-anime-list .comments-container {
  max-height: 150px;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 确保移动端抽屉内容区域可以滚动 */
.mobile-drawer-content {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 修复移动端抽屉中的滚动冲突 */
.mobile-drawer-content > * {
  touch-action: pan-y;
}

/* 修复移动端抽屉中的滑动菜单冲突 */
.swipe-container {
  touch-action: pan-y;
}

/* 确保滑动菜单内容可以正常滚动 */
.swipe-content {
  touch-action: pan-y;
}

/* 修复Android设备上的滚动问题 */
.android-device .mobile-drawer-content,
.android-device .swipe-container,
.android-device .swipe-content {
  transform: translateZ(0);
  will-change: scroll-position;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}