/* 导游学霸 · 手机操作系统性优化(阶段 5)
   集中处理清单阶段 5 的 15 条手机端体验要求,不散改现有 CSS。
   覆盖:触摸区、文字可读、刘海/圆角/底部安全区、横屏、单手操作、滚动抖动、弹窗锁背景等。
   作用域:仅在小屏(max-width:768px)生效,不影响桌面端。 */

/* ============================================================
   1. 核心按钮触摸区域 ≥ 44×44px(清单:触摸区不小于约 44px)
   ============================================================ */
@media (max-width: 768px) {
  button,
  [role="button"],
  .btn,
  .nav-btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;   /* 消除 300ms 点击延迟 */
  }

  /* 做题选项区也保证可单手点选(清单:做题选项单手操作) */
  .quiz-opt,
  [class*="opt"],
  .answer-option {
    min-height: 44px;
    padding: 12px 14px;
  }

  /* ============================================================
     2. 文字无需双指放大即可阅读(清单:文字可读,禁双指缩放已由 viewport 控制)
     ============================================================ */
  body {
    -webkit-text-size-adjust: 100%;   /* iOS 横屏不放大 */
    text-size-adjust: 100%;
    font-size: 16px;                  /* 最小 16px 防 iOS 聚焦放大 */
  }
  /* 小字也保证 ≥ 14px 可读 */
  small, .small { font-size: 14px; }

  /* ============================================================
     3. 刘海屏/圆角屏/底部手势区安全区(清单:适配刘海屏/圆角/底部手势)
     ============================================================ */
  /* 固定定位元素加安全区内边距 */
  .topbar,
  header[role="banner"],
  #jx-sync-indicator,
  #jx-install-btn,
  #jx-wechat-tip {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* 底部固定元素(同步指示器/安装按钮/导航)留出底部手势区 */
  #jx-sync-indicator,
  #jx-install-btn,
  #jx-install-close,
  #jx-ios-guide,
  footer[role="contentinfo"],
  .bottom-nav,
  .mobile-tabbar {
    margin-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* 全局安全区撑开(可选,容器用) */
  .safe-top { padding-top: env(safe-area-inset-top, 0px); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ============================================================
     4. 底部导航滚动时不抖动(清单:页面滚动时底部导航不抖动)
     ============================================================ */
  .bottom-nav,
  .mobile-tabbar,
  [class*="bottom-bar"] {
    position: fixed;            /* 固定定位避免随内容回流抖动 */
    transform: translateZ(0);   /* GPU 层,消除滚动时重绘抖动 */
    will-change: transform;
    backface-visibility: hidden;
  }

  /* ============================================================
     5. 单手操作:核心交互元素落在拇指可达区域(底部)
     ============================================================ */
  /* 做题的"提交/下一题"按钮放大并靠下(清单:提交/下一题单手操作) */
  .quiz-submit,
  .quiz-next,
  [class*="submit-btn"],
  [class*="next-btn"] {
    min-height: 48px;
    font-size: 16px;
    margin-bottom: 8px;
  }

  /* ============================================================
     6. 弹窗打开后背景不能继续滚动(清单:弹窗背景锁滚动)
     通过 JS 给 body 加 .modal-open 实现,这里定义锁定的样式
     ============================================================ */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* 记住滚动位置由 JS 处理,这里只锁定 */
  }
  /* 弹窗自身可滚动,且不透传到背景 */
  dialog,
  [role="dialog"],
  .modal,
  [class*="overlay"],
  [class*="popup"] {
    overscroll-behavior: contain;   /* 滚动不穿透到背景 */
  }

  /* ============================================================
     7. 地图页可缩放/点击(清单:地图手机可缩放/点击/返回)
     ============================================================ */
  .jxmap,
  [class*="map-container"],
  #map,
  .amap-container,
  .BMap_mask {
    touch-action: pan-x pan-y pinch-zoom;   /* 允许双指缩放,不拦截页面滚动 */
  }

  /* ============================================================
     8. 图片按屏幕大小加载(清单:图片按屏幕加载,省流量)
     ============================================================ */
  img {
    max-width: 100%;
    height: auto;
  }
  /* 大背景图在小屏降级(配合 JS 懒加载) */
  img[loading] { content-visibility: auto; }
}

/* ============================================================
   9. 横屏不严重错位(清单:横屏不严重错位)
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 480px) {
  /* 矮横屏(如手机横放):关键内容收紧,避免溢出 */
  body { font-size: 15px; }
  .topbar,
  header[role="banner"] {
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* 登录弹窗横屏可滚动,不被键盘遮挡 */
  [role="dialog"],
  dialog {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ============================================================
   10. 加载状态/骨架屏(清单:首次打开有加载状态,慢网显示骨架)
   ============================================================ */
/* 首屏加载占位(避免白屏) */
.jx-boot-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0D596C);
  color: #fff;
  font-family: system-ui, sans-serif;
  z-index: 99999;
  transition: opacity .3s;
}
.jx-boot-loading.hidden { opacity: 0; pointer-events: none; }

/* 骨架屏 shimmer(慢网加载占位) */
.jx-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.14) 37%,
    rgba(255,255,255,.06) 63%);
  background-size: 400% 100%;
  animation: jx-shimmer 1.4s ease infinite;
  border-radius: 6px;
  min-height: 20px;
}
@keyframes jx-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ============================================================
   11. 颜色对比度增强(清单:检查对比度)
   ============================================================ */
@media (max-width: 768px) {
  /* 小屏文字对比度提升 */
  .small, small { opacity: 0.85; }
  /* 焦点可见性(键盘操作/无障碍) */
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #2B9AA5;
    outline-offset: 2px;
  }
}

/* ============================================================
   12. prefers-reduced-motion 尊重(无障碍)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .jx-skeleton { animation: none; }
}