/**
 * 巡礼助手设置模态框滚动修复
 * 专门解决助手设置模态框滚动不稳定的问题
 * 使用最高优先级样式确保滚动正常工作
 */

/* 助手设置模态框特殊标识 */
#assistant-settings-modal {
  /* 确保模态框本身支持滚动 */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* 助手设置模态框内容区域滚动修复 */
#assistant-settings-modal .modal-content {
  /* 桌面端样式 */
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#assistant-settings-modal .modal-header {
  /* 固定头部，不参与滚动 */
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

#assistant-settings-modal .modal-body {
  /* 核心滚动区域样式 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  
  /* 布局样式 */
  flex: 1 !important;
  min-height: 0 !important;
  position: relative !important;
  
  /* 性能优化 */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: scroll-position !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  
  /* 确保有足够的内边距 */
  padding: 24px !important;
}

#assistant-settings-modal .modal-footer {
  /* 固定底部，不参与滚动 */
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 移动端特殊优化 */
@media (max-width: 768px) {
  #assistant-settings-modal .modal-dialog {
    margin: 0.5rem auto !important;
    max-width: 95% !important;
    height: auto !important;
  }
  
  #assistant-settings-modal .modal-content {
    max-height: 90vh !important;
    border-radius: 16px !important;
  }
  
  #assistant-settings-modal .modal-header {
    padding: 16px 20px !important;
  }
  
  #assistant-settings-modal .modal-body {
    padding: 20px !important;
    /* 移动端确保滚动区域有明确的最大高度 */
    max-height: calc(90vh - 120px) !important;
  }
  
  #assistant-settings-modal .modal-footer {
    padding: 16px 20px !important;
  }
}

/* 小屏幕设备额外优化 */
@media (max-width: 480px) {
  #assistant-settings-modal .modal-dialog {
    margin: 0.25rem auto !important;
    max-width: 98% !important;
  }
  
  #assistant-settings-modal .modal-content {
    max-height: 95vh !important;
  }
  
  #assistant-settings-modal .modal-body {
    padding: 16px !important;
    max-height: calc(95vh - 110px) !important;
  }
}

/* 确保设置组在滚动时正常显示 */
#assistant-settings-modal .ios-settings-group {
  margin-bottom: 24px !important;
  position: relative !important;
}

#assistant-settings-modal .ios-settings-item {
  position: relative !important;
  /* 确保设置项在滚动时不会出现渲染问题 */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* 表单控件在滚动时的优化 */
#assistant-settings-modal .form-select,
#assistant-settings-modal .form-control {
  /* 确保表单控件在滚动时保持正常状态 */
  position: relative !important;
  z-index: 1 !important;
}

/* 滚动条样式优化 */
#assistant-settings-modal .modal-body::-webkit-scrollbar {
  width: 6px !important;
}

#assistant-settings-modal .modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 3px !important;
}

#assistant-settings-modal .modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
  border-radius: 3px !important;
}

#assistant-settings-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important;
}

/* 深色模式下的滚动条 */
.dark-mode #assistant-settings-modal .modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 滚动指示器样式 */
.assistant-scroll-indicator {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: var(--primary-color) !important;
  font-size: 20px !important;
  opacity: 0.7 !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

/* 防止其他样式覆盖 */
#assistant-settings-modal .modal-body {
  /* 重要：确保这些样式不会被其他CSS文件覆盖 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 修复可能的iOS Safari问题 */
@supports (-webkit-touch-callout: none) {
  #assistant-settings-modal .modal-body {
    /* iOS Safari特殊处理 */
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 200px !important;
  }
}

/* 修复可能的Android Chrome问题 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #assistant-settings-modal .modal-body {
    /* Android Chrome特殊处理 */
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
}

/* 确保在所有情况下都能滚动 */
#assistant-settings-modal.show .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 动画关键帧 */
@keyframes assistantBounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateX(-50%) translateY(0); 
  }
  40% { 
    transform: translateX(-50%) translateY(-10px); 
  }
  60% { 
    transform: translateX(-50%) translateY(-5px); 
  }
}

/* 确保模态框显示时立即应用滚动样式 */
#assistant-settings-modal[aria-hidden="false"] .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}