/**
 * 全局模态窗口移动端优化
 * 确保所有窗口（天气窗口、交互窗口、设置窗口、弹窗和各种模态窗）在手机版本上的显示效果良好
 * 解决窗口太高或太低导致超出屏幕的问题，实现完美自适应
 */

/* 全局模态框基础样式优化 */
.modal {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

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

  /* 确保模态框内容不超过视口高度并可滚动 */
  .modal .modal-content {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  }

  /* 模态框标题固定在顶部 */
  .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 .modal .modal-header {
    background-color: rgba(33, 37, 41, 0.95) !important;
  }

  /* 模态框内容区域可滚动 */
  .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;
  }

  /* 模态框底部固定在底部 */
  .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 .modal .modal-footer {
    background-color: rgba(33, 37, 41, 0.95) !important;
  }

  /* 修复Android设备上的滚动问题 */
  .android-device .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;
  }

  /* 确保模态框中的按钮有足够的间距和触摸区域 */
  .modal .modal-footer .btn {
    margin: 0 5px !important;
    flex: 1 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 确保模态框中的表单元素有足够的触摸区域 */
  .modal .form-check,
  .modal .form-select,
  .modal .form-control,
  .modal .form-range {
    margin-bottom: 15px !important;
    min-height: 44px !important;
  }

  /* 确保模态框中的列表项有足够的触摸区域 */
  .modal .list-group-item {
    padding: 12px 15px !important;
    min-height: 44px !important;
  }

  /* 确保模态框中的可点击元素有足够的触摸区域 */
  .modal [role="button"],
  .modal .clickable {
    min-height: 44px !important;
    padding: 10px !important;
  }

  /* 移除模态框中的蓝色触摸高亮效果 */
  .modal * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 自定义滚动条样式 */
  .modal .modal-body::-webkit-scrollbar {
    width: 4px !important;
  }

  .modal .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
  }

  .dark-mode .modal .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }

  .modal .modal-body::-webkit-scrollbar-track {
    background: transparent !important;
  }
}

/* 天气窗口特殊优化 */
@media (max-width: 768px) {
  .weather-popup {
    max-height: 70vh !important; /* 降低最大高度，防止超出屏幕 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    top: auto !important; /* 确保不使用top定位 */
    bottom: 155px !important; /* 确保天气窗口不会被底部导航栏遮挡 */
    transform-origin: bottom right !important; /* 设置变换原点为右下角 */
  }

  /* 天气窗口滚动优化 */
  .weather-popup-content {
    touch-action: pan-y !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* 优化天气窗口标题和内容，使其更紧凑 */
  .weather-popup-header {
    margin-bottom: 10px !important;
  }

  .weather-popup-title {
    font-size: 20px !important;
  }

  .weather-current {
    margin-bottom: 10px !important;
  }

  .weather-temp {
    font-size: 50px !important;
  }

  .weather-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .weather-icon i {
    font-size: 50px !important;
  }

  /* 确保天气窗口在小屏幕设备上不会太宽 */
  .weather-popup {
    width: calc(100% - 20px) !important;
    max-width: 320px !important;
    padding: 15px !important;
  }
}

/* 语言设置模态框特殊优化 */
@media (max-width: 768px) {
  /* 确保语言选项容器可以滚动 */
  .language-options-container {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: auto !important;
  }

  /* 确保语言选项可点击 */
  .language-option {
    padding: 12px 16px !important;
    margin-bottom: 2px !important;
    border-radius: 8px !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 移除语言选项的蓝色触摸高亮效果 */
  .language-option .ripple-effect,
  .language-option::after,
  .language-option::before {
    display: none !important;
    opacity: 0 !important;
    background-color: transparent !important;
  }

  /* 自定义语言选项的触摸反馈效果 */
  .language-option:active {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  .dark-mode .language-option:active {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
}

/* 图片查看器模态框特殊优化 */
@media (max-width: 768px) {
  .image-viewer-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
  }

  .image-viewer-modal .modal-content {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: none !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
  }

  .image-viewer-modal .modal-body {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .image-viewer-modal img {
    max-width: 100% !important;
    max-height: 90vh !important;
    object-fit: contain !important;
  }
}

/* 确保所有模态窗口在深色模式下有正确的样式 */
.dark-mode .modal .modal-content {
  background-color: var(--background-color, #343a40) !important;
  color: var(--primary-text, #e9ecef) !important;
}

.dark-mode .modal .modal-header {
  border-bottom-color: var(--divider-color, #495057) !important;
}

.dark-mode .modal .modal-footer {
  border-top-color: var(--divider-color, #495057) !important;
}