/*
 * 抽屉抖动修复样式
 * 用于解决移动端抽屉在加载更多番剧时上部抖动的问题
 */

/* 修复抽屉过渡效果 */
.mobile-drawer {
  /* 使用更简单的过渡效果，但允许拖拽时覆盖 */
  /* 动画时间由drawer-animation-settings.js控制 */
  transition: transform 0.2s ease-out;

  /* 移除可能导致抖动的样式，但保留性能优化 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 确保抽屉有正确的定位 */
  position: fixed;
  bottom: 50px; /* 底部导航栏高度 */
  left: 0;
  width: 100%;

  /* 确保抽屉有正确的层叠顺序 */
  z-index: 1050;
}

/* 低性能设备上的动画设置 */
.low-performance .mobile-drawer {
  transition: transform 0.15s ease-out;
}

/* 确保抽屉展开状态的样式正确，但允许拖拽时覆盖 */
.mobile-drawer.expanded:not(.dragging) {
  transform: translateY(0);
}

/* 确保抽屉收起状态的样式正确，但允许拖拽时覆盖 */
.mobile-drawer:not(.expanded):not(.dragging) {
  transform: translateY(calc(100% - 60px));
}

/* 确保抽屉内容区域有正确的滚动行为 */
.mobile-drawer-content {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important; /* 改为auto，避免smooth导致的性能问题 */
}

/* 修复加载更多按钮样式 */
.expand-anime-btn {
  margin: 15px auto !important;
  display: block !important;
  width: 80% !important;
  padding: 8px !important;
  border-radius: 20px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-size: 14px !important;

  /* 移除可能导致抖动的变换效果 */
  transform: none !important;
}

.expand-anime-btn:hover,
.expand-anime-btn:active {
  background-color: var(--primary-color) !important;
  color: white !important;

  /* 移除可能导致抖动的变换效果 */
  transform: none !important;
  box-shadow: none !important;
}

/* 修复加载指示器样式 */
#mobile-loading-more {
  margin: 15px auto !important;
  text-align: center !important;
  padding: 10px !important;

  /* 移除可能导致抖动的动画效果 */
  animation: none !important;
}