/*
 * iOS设置模态框移动端滚动修复
 * 确保在移动设备上所有iOS风格设置模态窗口可以自适应并上下滑动
 * 解决小屏幕手机上内容显示不完整的问题
 */

/* 全局强制启用模态框滚动 */
.ios-settings-modal {
  -webkit-overflow-scrolling: touch !important;
}

/* 移动设备上的模态框样式调整 */
@media (max-width: 768px) {
  /* 模态框对话框样式 */
  .ios-settings-modal .modal-dialog {
    margin: 0.5rem auto !important;
    max-width: 95% !important;
    height: auto !important;
    position: relative !important;
  }

  /* 确保模态框内容不超过视口高度并可滚动 */
  .ios-settings-modal .modal-content {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* 模态框标题固定在顶部 */
  .ios-settings-modal .modal-header {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* 深色模式下的模态框标题 */
  .dark-mode .ios-settings-modal .modal-header {
    background-color: rgba(33, 37, 41, 0.95) !important;
  }

  /* 模态框内容区域可滚动 */
  .ios-settings-modal .modal-body {
    overflow-y: auto !important; /* 使用auto而不是scroll，只在需要时显示滚动条 */
    -webkit-overflow-scrolling: touch !important; /* 提供iOS流畅滚动 */
    overscroll-behavior: contain !important; /* 防止滚动传播 */
    padding: 15px !important;
    flex: 1 !important;
    max-height: none !important; /* 移除最大高度限制，让flex布局控制 */
    height: auto !important;
    touch-action: pan-y !important; /* 允许垂直滑动 */
    position: relative !important;
    transform: translateZ(0) !important; /* 启用GPU加速 */
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important; /* 提示浏览器滚动位置将会变化，优化性能 */
    backface-visibility: hidden !important; /* 减少渲染问题 */
    -webkit-backface-visibility: hidden !important;
  }

  /* 模态框底部固定在底部 */
  .ios-settings-modal .modal-footer {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1050 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* 深色模式下的模态框底部 */
  .dark-mode .ios-settings-modal .modal-footer {
    background-color: rgba(33, 37, 41, 0.95) !important;
  }

  /* 修复Android设备上的滚动问题 */
  .android-device .ios-settings-modal .modal-body {
    -webkit-transform: translateZ(0) !important; /* 启用硬件加速 */
    transform: translateZ(0) !important;
    will-change: scroll-position !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* 确保设置组在模态框中正确显示 */
  .ios-settings-modal .ios-settings-group {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* 确保设置项在模态框中正确显示 */
  .ios-settings-modal .ios-settings-item {
    width: 100% !important;
    padding: 14px !important;
  }

  /* 确保表单控件在模态框中正确显示 */
  .ios-settings-modal .form-select,
  .ios-settings-modal .form-control,
  .ios-settings-modal .form-range {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 确保滑块控件在模态框中正确显示 */
  .ios-settings-modal .form-range {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 确保按钮在模态框中正确显示 */
  .ios-settings-modal .btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 确保模态框中的按钮有足够的间距 */
  .ios-settings-modal .modal-footer .btn {
    margin: 0 5px !important;
    flex: 1 !important;
  }

  /* 确保模态框中的设置项内容区域有足够的空间 */
  .ios-settings-modal .ios-settings-content {
    flex: 1 !important;
    padding-right: 10px !important;
  }

  /* 确保模态框中的设置项控件区域有足够的空间 */
  .ios-settings-modal .ios-settings-control {
    min-width: 80px !important;
  }

  /* 特别处理带滑块的设置项 */
  .ios-settings-modal .ios-settings-item:has(.form-range) .ios-settings-control {
    min-width: 120px !important;
  }
}