/* ============================================================
   微信服务号 H5 适配层 · assets/wechat.css
   ------------------------------------------------------------
   设计前提：本站在微信服务号菜单 / 图文消息中打开，宿主是微信
   内置浏览器（iOS WKWebView / Android X5），页面上方已经有微信
   原生导航栏，下方有 Home Indicator 或安卓手势条。

   用法：由 wechat.js 给 <html> 加 .wx
     · 真微信环境    → .wx.wx-real（启用全部增强）
     · 后台预览 ?wx=1 → .wx.wx-sim （只启用版式模拟）
   非微信环境不加载任何 .wx 规则，原版式完全不受影响。
   ============================================================ */

/* ---------- 1. 全局基础：字号锁定、禁止横向滚动、点击反馈 ---------- */
html{
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  overflow-x:hidden;
}
body{
  overflow-x:hidden;
  overscroll-behavior-y:contain;      /* 下拉回弹不露出微信底色 */
  -webkit-font-smoothing:antialiased;
}
img,svg,video,table{max-width:100%}
a,button,input,select,textarea{font-family:inherit}
/* 只对可点击元素禁长按菜单，正文仍可长按复制阵容码 */
a,button,label{-webkit-tap-highlight-color:rgba(15,118,110,.10);touch-action:manipulation;
 -webkit-touch-callout:none}
/* 二维码允许长按识别（微信服务号常见需求） */
img[src*="qr"],img[alt*="二维码"],img[alt*="QR"]{-webkit-touch-callout:default}

/* ---------- 2. 微信内：下拉橡皮筋区域与页面同色 ---------- */
html.wx,html.wx body{background:#f1f4f3}

/* 顶部安全区：iOS 全屏网页（无微信导航栏）时状态栏/灵动岛会压住品牌栏。
   --wx-st 由后台「纯网页」预览显式传入；真机则用 env() 自动取值。
   普通浏览器 env() 为 0，此规则零副作用。 */
.header,
.topbar{padding-top:var(--wx-st,env(safe-area-inset-top,0px))}

/* ---------- 3. 顶栏：微信原生导航栏已占一层，网页品牌条收薄 ---------- */
html.wx .header,
html.wx .topbar{
  padding-top:0;              /* 微信原生导航栏已占好位置，网页不再留顶部 inset */
  border-bottom-width:3px;
}
html.wx .headerInner,
html.wx .topbar .inner{min-height:52px}
html.wx .brandMark,
html.wx .bmark{width:34px;height:34px;border-radius:5px}
html.wx .brandMark svg,
html.wx .bmark svg{width:19px;height:19px}
html.wx .brandName,
html.wx .bcopy b{font-size:15px}
html.wx .brandSubtitle,
html.wx .bcopy span{font-size:11.5px;margin-top:1px}
/* 右上角信息在微信里与原生胶囊视觉重复，且挤压 440px 宽度 */
html.wx .brandCue,
html.wx .secure,
html.wx .headerLabel{display:none}
html.wx .dlpill{padding:7px 11px;font-size:12px;min-height:34px}
html.wx .dlpill.ghost{display:none}   /* 返回目录交给底部翻页条 / 微信原生返回 */
html.wx .hact{gap:6px}

/* ---------- 4. 首屏密度：微信可视高度更小，收紧顶部留白 ---------- */
html.wx .main{padding-top:18px}
html.wx .intro{margin-bottom:14px}
html.wx .intro h1{font-size:23px}
html.wx .downloads,
html.wx .serviceSection{margin-top:18px}

/* ---------- 5. 阅读体验：长中文断行、正文行高 ---------- */
html.wx p,
html.wx .article,
html.wx .articleBody,
html.wx .textBlock{overflow-wrap:anywhere;word-break:break-word}
html.wx .article,html.wx .articleBody{font-size:15.5px;line-height:1.8}
html.wx .guideRow,
html.wx .serviceGrid a,
html.wx .featureCard,
html.wx .downloadGrid a,
html.wx .downloadRow a{min-height:52px}

/* ---------- 6. 底部安全区（微信 iOS Home Indicator / 安卓手势条） ----------
   --wx-sb 由 wechat.js 实测 env(safe-area-inset-bottom) 后写入，
   微信 WebView 若返回 0 但设备是 iOS，则回退 34px。
   ------------------------------------------------------------------ */
html.wx .pager{
  bottom:calc(10px + var(--wx-sb,0px)) !important;
  width:min(100% - 20px,620px);
  border-radius:12px;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  background:rgba(255,255,255,.96);
}
html.wx .footer,
html.wx footer{
  padding-bottom:calc(88px + var(--wx-sb,0px)) !important;
}
html.wx .pgbtn{min-height:56px}
html.wx .pgbtn small{font-size:11px}
html.wx .pgbtn b{font-size:13.5px}

/* ---------- 7. 微信内标题栏颜色（安卓微信支持 theme-color） ---------- */
html.wx body{-webkit-overflow-scrolling:touch}

/* ---------- 8. 后台预览模拟模式：不启用真微信的浮层交互 ---------- */
html.wx-sim .wxTip{display:none}

/* ---------- 9. 微信外链下载引导浮层（仅真微信环境由 JS 创建） ---------- */
.wxTip{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;
 background:rgba(10,22,26,.44);-webkit-tap-highlight-color:transparent}
.wxTipCard{width:100%;padding:18px 18px calc(20px + var(--wx-sb,0px));
 background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.14)}
.wxTipCard b{display:block;font-size:16px;color:#17242a;margin-bottom:6px}
.wxTipCard p{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:#5d6d73}
.wxTipBtns{display:flex;gap:10px}
.wxTipBtns button{flex:1;min-height:44px;border-radius:9px;border:1px solid #d5dddb;
 background:#fff;color:#315f5b;font-size:14px;font-weight:700;cursor:pointer}
.wxTipBtns button.primary{background:#0f766e;border-color:#0f766e;color:#fff}
.wxTipArrow{position:absolute;right:16px;top:8px;width:0;height:0;
 border-left:9px solid transparent;border-right:9px solid transparent;
 border-bottom:14px solid #fff;transform:rotate(180deg)}
.wxTipHint{position:absolute;right:12px;top:26px;color:#fff;font-size:13px;
 font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}