/* ═══════════════════════════════════════════════════════════════════════════
 * chat.css — 右下角悬浮联系按钮（2026-10-13，用户：「弄一个聊天快捷跳转的按钮，
 *            悬浮在右下角的，方便买家联系我们」）
 *
 * 定位：全站每一页的**转化出口**。买家在任意页面看完了，不用滚回页脚找联系方式。
 *
 * 口径（全部取自站内**已公开**的信息，不新增任何未公开内容）：
 *   · WhatsApp +86 182 6776 0712   （页脚/about/contact 已在公开）
 *   · support@gerasourcing.com     （全站唯一公开邮箱）
 *   · /contact/ 询盘表单           （语言感知，走 gera_url()）
 * 🔴 不写任何时效承诺（「24 小时内回复」之类）—— 用户没确认过的数字不上线。
 *
 * 设计口径 = ATLAS：实心 teal + **零阴影** + 1px 发丝边 + 3px 圆角。
 *   · 阴影一律不加 —— 靠 `--accent-deep` 的 1px 边把按钮从浅底与深底上都切出来。
 *   · 对比度自算：白字压 --accent #0E7C7B = **5.01:1**（AA 正文 4.5 达标）；
 *     hover 换成 --accent-deep #0A5F5E = **7.27:1**。
 *   · 触发按钮高 **46px**、面板行高 **≥44px** —— 触摸目标达标（WCAG 2.5.8）。
 *
 * z-index：65 —— 高于移动菜单面板（60），低于地图浮层（90）与导航下拉（70）。
 *   手机菜单打开时由 chat.js 加 `is-menu-open` 隐藏，避免压在菜单上。
 *
 * 回滚：删掉本文件 + footer.php 里的那段标记 + functions.php 里的 enqueue。
 * ═══════════════════════════════════════════════════════════════════════════ */

body.gera .gera-chat {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  font-family: var(--font-sans);
  text-align: left;
}
body.gera .gera-chat.is-menu-open { display: none; }

/* ── 2026-10-31 —— 页面上有询价表单时就收起按钮 ─────────────────────────────
   实测（390×844，/category/hardware-tools/）：hero 里的 `.capture` 表单在 y=765、
   高 114px，而按钮（未滚动时是 130px 宽的「Contact us」胶囊）在 y=784 / x=246 / w=130
   → **直接压住输入框的右端和提交按钮的右端**，手机上会点错。
   表单本身就是联系入口，这时不需要再叠一个悬浮按钮。
   由 chat.js 用 IntersectionObserver 观察 `.capture` 与 `form.gera-rfq`，
   任一进入视口（>20%）就加 `.is-tucked`。
   面板已打开时不收（用 :not(.is-open) 保证正在看的联系信息不会突然消失）。 */
body.gera .gera-chat.is-tucked:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

/* ── 触发按钮 ─────────────────────────────────────────────────────────── */
body.gera .gera-chat__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 17px 0 15px;
  border: 1px solid var(--accent-deep);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.gera .gera-chat__b:hover,
body.gera .gera-chat__b:active { background: var(--accent-deep); color: #fff; }
body.gera .gera-chat__b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.gera .gera-chat__ic { display: inline-flex; flex: none; width: 19px; height: 19px; }
body.gera .gera-chat__ic svg { display: block; width: 19px; height: 19px; }
body.gera .gera-chat__b[aria-expanded="true"] { background: var(--accent-deep); }

/* ── 面板 ─────────────────────────────────────────────────────────────── */
body.gera .gera-chat__p {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(334px, calc(100vw - 40px));
  padding: 18px 18px 8px;
  background: var(--paper);
  border: 1px solid var(--line-2, var(--line));
  border-radius: 3px;
  color: var(--body, var(--ink-2));
}
body.gera .gera-chat__p[hidden] { display: none; }

body.gera .gera-chat__h {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
body.gera .gera-chat__s {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

body.gera .gera-chat__a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
body.gera .gera-chat__a:hover,
body.gera .gera-chat__a:focus-visible { text-decoration: none; }
body.gera .gera-chat__a:hover .gera-chat__v { color: var(--accent-deep); }
body.gera .gera-chat__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

body.gera .gera-chat__k {
  font-size: 11.5px;
  font-family: var(--font-num);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
body.gera .gera-chat__v {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--accent);
  overflow-wrap: anywhere;
}
body.gera .gera-chat__n {
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── 滚动后收成纯图标 ─────────────────────────────────────────────────────
   P2-9（2026-10-15 实测）：按钮 130×46 在手机上滚动时会压住正文 ——
   /390px 首页实测 8 个滚动位里有 5 个压到元素（最多同时压 2 个：一个 <b> 一个 <p>）。
   滚动超过 240px 且面板未打开时加 `.is-mini` → 收成 46×46。
   标签不删、只做 sr-only，读屏与键盘用户仍听到 "Contact us"（触摸目标仍 46px ≥ 44）。
   ⚠️ 不做过渡动画 —— 收缩是避让行为，加动画反而让文字被压的时间变长。 */
body.gera .gera-chat.is-mini .gera-chat__b {
  width: 46px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
body.gera .gera-chat.is-mini .gera-chat__t {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 手机 ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.gera .gera-chat { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body.gera .gera-chat__b { padding: 0 15px 0 13px; font-size: 14.5px; }
  body.gera .gera-chat.is-mini .gera-chat__b { width: 46px; padding: 0; }
  body.gera .gera-chat__p { width: calc(100vw - 28px); }
}

/* 打印时不该出现 */
@media print { body.gera .gera-chat { display: none !important; } }