/* 移动端响应式基座
 * 一套 DOM + CSS 媒体查询，不做 UA 判断、不引入第二套 rem 体系。
 * 断点：<= 900px 平板 / 大屏手机，<= 600px 手机。
 * 组件级适配写在各自 <style scoped> 内，这里只放全局兜底。 */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 900px) {
  html {
    font-size: 14px;
  }

  body {
    overflow-x: hidden;
  }

  /* 主线页面大量使用 1200px 固定容器，窄屏统一退化为流式宽度 */
  .agent-page .agent-wrap {
    width: auto;
    max-width: calc(100% - 32px);
  }

  /* 依赖 hover 的下拉在触摸设备上不可达，入口改由移动导航抽屉提供 */
  .main .ivu-select-dropdown {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 600px) {
  a,
  p,
  h1, h2, h3, h4, h5, h6,
  span,
  strong,
  li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 悬浮气泡依赖 hover，手机上直接隐藏；二维码由页面正文展示 */
  .float-pop {
    display: none !important;
  }

  .float-box {
    bottom: 16px;
    right: 12px;
  }

  .float-box .float-item {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .float-box .float-item + .float-item {
    margin-top: 8px;
  }
}

/* ===== 剩余页面适配的全局兜底 ===== */
@media (max-width: 900px) {
  /* product_info / product 的 Affix 吸顶偏移需跟随 60px 移动端头部 */
  .ivu-affix {
    top: 60px !important;
  }

  table {
    max-width: 100% !important;
  }

  .ivu-poptip-popper {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 600px) {
  /* 分页控件条目在窄屏换行，避免撑出横向滚动 */
  .ivu-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}