/* ============================================================
   移动端适配（P1）— 2026-08-08
   说明：本文件为增量响应式补丁，不修改原有 style.css / medical-styles.css
   逻辑，仅针对"已有 768px 响应式"未覆盖 / 失效的真实缺口做修复。
   引入位置：index.html 中置于所有其他 CSS 之后，确保覆盖优先级。
   ============================================================ */

/* ---------- 全局触控优化：禁用双击缩放 ---------- */
html {
  touch-action: manipulation;
}

/* 防止 iOS 聚焦输入框时自动放大页面（font-size >= 16px） */
input,
select,
textarea,
button {
  font-size: 16px;
}

/* ============================================================
   平板 / 大手机（<= 768px，但 > 480px）
   ============================================================ */
@media (max-width: 768px) {
  /* 手机端 header 回到正常文档流（覆盖 index.html 的 inline position:fixed），
     由 body flex column 自动排列，避免遮挡地图，也避免手动 padding 估算高度 */
  .header {
    position: relative !important;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
    padding: 6px 12px;
    gap: 6px;
  }

  /* 主菜单放到第二行，横向可滚动，不挤压 */
  .main-nav {
    order: 4;
    flex: 1 1 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    padding: 8px 12px;
    font-size: 0.82rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* 汉堡下拉菜单在滚动容器内仍可用 */
  .nav-dropdown .dropdown-menu {
    position: absolute;
  }

  /* --- 顶部按钮：横向可滚动，避免 9 个按钮在窄屏挤压溢出 --- */
  .header-right {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    scrollbar-width: none;
  }
  .header-right::-webkit-scrollbar {
    display: none;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* 搜索框在窄屏收窄 */
  .search-box {
    flex: 0 0 auto;
    max-width: 140px;
  }
  .search-box input {
    width: 110px;
    font-size: 16px; /* 防 iOS 放大 */
  }

  /* --- 视图切换器：修复 right:320px 导致在手机上移出屏幕的 bug --- */
  /* 视图切换器：手机上移到地图顶部居中，避开底部分类筛选行（避免与分类按钮重叠） */
  .view-switcher {
    top: calc(var(--header-height) + 8px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0.92);
    transform-origin: top center;
    z-index: 700;
  }
  .view-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* --- 地图容器：header 已回正常文档流，无需手动 padding --- */
  .map-container {
    padding-top: 0;
  }

  /* --- 事件列表面板：覆盖 index.html 中的 inline style --- */
  /* 原因：index.html 对 #eventPanel 写了 inline style="position:fixed;top:80px;left:20px"
     类选择器无法覆盖 inline，必须用更高特异性 + !important 才能在手机端
     将其改为底部 sheet。已确认 inline 非 JS 动态设置，故此处 !important 安全。 */
  #eventPanel.event-panel {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(100vh) !important;
  }
  /* 手机端事件面板是底部 sheet，不需要拖拽；隐藏 JS 动态添加的拖拽手柄，
     避免其(absolute top:0 height:30 z:1)遮挡面板顶部标题/关闭按钮的点击 */
  #eventPanel.event-panel .drag-handle {
    display: none !important;
  }
  #eventPanel.event-panel.open {
    transform: translateY(0) !important;
    top: auto !important;
    /* 底部上抬，给分类筛选(catFilter)留出空间，避免两者在底部重叠 */
    bottom: calc(var(--timeline-height) + 56px) !important;
    /* 限制高度，避免遮挡顶部 header 与底部时间轴/筛选 */
    max-height: calc(100vh - 200px - var(--timeline-height) - 56px) !important;
  }

  /* --- 时间轴压缩：滑块触控区放大 --- */
  .timeline {
    padding: 8px 12px;
  }
  .timeline-slider {
    height: 10px;
  }
  .timeline-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .timeline-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
  .timeline-start,
  .timeline-end {
    font-size: 0.62rem;
  }
  #timelineHint {
    font-size: 0.68rem;
  }

  /* --- 分类筛选：窄屏改为底部居中、受限宽度、横向可换行，杜绝右侧溢出 ---
     原因：index.html 对 #categoryFilter 写了 inline style="top: 80px"，类选择器无法覆盖，
     故用 #categoryFilter 高特异性 + !important 覆盖，使其手机端变为底部横向面板。 */
  #categoryFilter.category-filter {
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--timeline-height) + 12px) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    z-index: 800 !important;
    background: var(--bg-card) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow) !important;
    max-height: none !important;
  }
  #categoryFilter.category-filter .filter-btn {
    flex: 0 0 auto !important;
  }
  /* 关键修复：app.js 给 category-filter 动态加了 .drag-handle（position:absolute;top:0;height:30px;z-index:1）
     作为拖拽手柄。手机端该容器改为横排后，此手柄覆盖在按钮行顶部，拦截了所有分类按钮的点击
     （导致“只能点自然、其他无响应、不能切回全部”的功能 bug）。手机端隐藏该手柄，恢复按钮可点。 */
  #categoryFilter.category-filter .drag-handle {
    display: none !important;
  }
}

/* ============================================================
   手机竖屏（<= 480px）
   ============================================================ */
@media (max-width: 480px) {
  /* 顶部按钮进一步精简，隐藏搜索框节省空间（已有 480 规则，此处补强） */
  .search-box {
    display: none;
  }

  .logo {
    font-size: 1rem;
  }

  /* 顶部按钮间距收紧，但保持 44px 触控区 */
  .header-right {
    gap: 4px;
  }
  .btn-icon {
    min-width: 42px;
    min-height: 42px;
  }

  /* 视图切换器更紧凑 */
  .view-switcher {
    transform: translateX(-50%) scale(0.85);
  }
  .view-btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* 年份指示器缩小避免遮地图 */
  .year-indicator {
    padding: 6px 12px;
    min-width: 90px;
  }
  .year-value {
    font-size: 1.2rem;
  }

  /* 弹窗接近全屏，避免固定宽度过宽导致横向滚动 */
  .modal-content {
    width: 92% !important;
    max-width: 92% !important;
    max-height: 88vh !important;
  }
  .modal-header h2 {
    font-size: 1.15rem;
  }

  /* 事件面板 sheet 占更高比例（与 768 段一致，底部留位避免遮挡分类筛选） */
  #eventPanel.event-panel.open {
    bottom: calc(var(--timeline-height) + 56px) !important;
    max-height: calc(100vh - 200px - var(--timeline-height) - 56px) !important;
  }
}

/* ============================================================
   极窄屏（<= 360px，老款小手机）
   ============================================================ */
@media (max-width: 360px) {
  .btn-icon {
    min-width: 38px;
    min-height: 38px;
    font-size: 16px;
  }
  .nav-item {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
}