@charset "UTF-8";

/* ==========================================================================
   墨聚芯能 · 在线客服页样式（service/index.html 专用）
   2026-10-15 自 css/main.css 抽出 —— 本页从此不再依赖 main.css。

   **为什么抽**：本页的定位是「挂在官网目录下的独立对话工具」，不是官网的内容页。
   V2.47（2026-10-13）整页换配色时，用户明确「颜色可以不跟官网相干」，于是本页
   只剩「白 ＋ 冷灰 ＋ 蓝」三色（--svc-* 一套），与官网的「暖白／墨黑／橙」
   （--ink／--accent 一套）本来就不是同一个视觉体系。

   本文件放下四块 ＋ 一条响应式：
     1. 基础层 —— * / html / body / 元素重置 / .skip-link / .wrap
     2. 悬浮条 —— .contact-rail 与 .rail-*（本页右侧那一条）
     3. 联系弹窗 —— .modal 与 .chn-*（点联系入口时弹出）
     4. 客服专有 —— .svc-* / .chat-* / .msg*，含 9 个 --svc-* 变量
     5. ≤760px 隐藏悬浮条

   **变量口径**：main.css 用它的 :root（官网一套），本文件用下面的 :root（本页一套）。
   同名变量的值取自 2026-10-15 的 main.css。官网改版不会影响本页，这是刻意的。

   **改动范围**：改本页只动这一个文件。另外 48 页仍走 main.css，与本文件无关。
   ========================================================================== */

:root {
  /* 以下值取自 2026-10-15 的 main.css :root，供本页基础层与悬浮条、弹窗使用。 */
  --accent: #A94E0C;
  --accent-fill: #FF8A3D;
  --accent-soft: #FBEADF;
  --bg: #F3F1EA;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gut: 24px;
  --header-h: 76px;
  --ink: #171A1D;
  --ink-2: #4E555C;
  --ink-3: #5C636A;
  --line: rgba(23, 26, 29, .12);
  --line-strong: rgba(23, 26, 29, .22);
  --mask: rgba(15, 18, 20, .6);
  --radius-card: 14px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-lift: 0 2px 5px rgba(23, 26, 29, .05), 0 20px 40px -24px rgba(23, 26, 29, .20);
  --surface: #FFFFFF;
  --warm: #F3F1EA;
  --wrap: 1240px;
}

/* ==================== 1. 基础层（原 main.css L113–162）==================== */

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* 横向溢出交给视口裁切。
   注意：不能在 body 上用 overflow-x: hidden —— 那会让 body 变成滚动容器，
   子元素的 position: sticky（目录页吸顶分类条）会失去参照而不再跟随滚动。
   clip 不建立滚动容器，sticky 正常。html 上保留 hidden 作旧浏览器兜底。 */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* 站内锚点跳转的落点补偿：让开固定页头再留 24px。
     带吸顶树目（`.cat-tree`）的页面由下面那条 `:has()` 规则覆盖——
     吸顶元素的高度随断点变，写不进这里的静态值。 */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
  font-family: "Inter", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans SC",
               "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

img { max-width: 100%; display: block; border-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 18px; background: var(--ink); color: #fff; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. 版式 ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ==================== 2. 悬浮条（原 main.css L1757–1855）==================== */

.contact-rail {
  --rail-pad: 6px; --rail-cell: 44px; --rail-gap: 2px;
  position: fixed; right: 20px; top: calc(50% - 74px);
  z-index: 80;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--rail-gap); padding: var(--rail-pad);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(23, 26, 29, .10);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(23, 26, 29, .06),
              0 24px 48px -22px rgba(23, 26, 29, .48),
              inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  transition: opacity .24s var(--ease), visibility .24s var(--ease);
}
/* 不支持 backdrop-filter 的老浏览器（老 Firefox 等）把白纱提到 96%，观感差别很小 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-rail { background: rgba(255, 255, 255, .96); }
}
/* 窄屏正文列会收到 1240px 以内，而浮条始终贴在视口右侧，两者必然相交。
   让浮条在真正压到内容时整体淡出（见 js/main.js 第 7 段，名单里含 `.svc-card` 与 `.chat`）。
   **不能再写 transform**：这一版定位已经不用 `translateY(-50%)`，覆盖它同样会跳位。 */
.contact-rail.is-hidden { opacity: 0; visibility: hidden; }
/* V2.45：胶囊里的一格。图标 20px、墨黑；hover／聚焦时这一格填能量橙、图标转墨黑——
   与站内「原橙实底配墨黑字」（`--accent-fill` 的口径）一致，在玻璃、纯白、照片上都认得出。 */
.rail-btn {
  position: relative;
  width: var(--rail-cell); height: var(--rail-cell); padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 999px;
  color: var(--ink); font-family: inherit;
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
/* V2.54：图标 20 → 21px，线宽经 css 提到 1.8（SVG 表现属性可被 CSS 覆盖，写在 `svg` 上会
   向下继承给各条 path）。**V2.56：1.8 → 2**——用户连着两轮说浮条图标「不直观、都是残缺的」，
   除了把 `ICO_CHAT`／`ICO_QR` 重画成闭合轮廓（见 `sitecore.py`），这一档线重也再压厚一点，
   21px 下一格图标才立得住。 */
.rail-btn svg { width: 21px; height: 21px; flex: none; stroke-width: 2; }
.rail-btn:hover,
.rail-btn:focus-visible { color: var(--ink); background: var(--accent-fill); }
.rail-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* 文字提示：默认不显示，鼠标移上去或键盘聚焦时在**按钮左侧**浮出。
   偏移从 8px 提到 14px：V2.45 起按钮外面还包着 6px 的胶囊内边距，留出这一步才不贴住胶囊边。 */
.rail-tip {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap; padding: 5px 10px; border-radius: 6px;
  background: var(--ink); color: var(--warm);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), visibility .18s var(--ease), transform .18s var(--ease);
}
.rail-btn:hover .rail-tip,
.rail-btn:focus-visible .rail-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
/* 企业微信的二维码收在浮层里，鼠标移上去（或键盘聚焦）才展开。
   浮层向左开——按钮右侧已经没有空间。
   **V2.67（2026-10-14）**：上一版 168px（码实际只有 144px），用户嫌小；这一版
   放到 **216px**，码随之到 192px（＋33%），卡片内边距与文案行距都不动。 */
.rail-pop {
  position: absolute; right: calc(100% + 16px); top: 50%;
  width: 216px; padding: 12px;
  transform: translateY(-50%) translateX(6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 36px -22px rgba(23, 26, 29, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease);
}
.rail-wx:hover .rail-pop,
.rail-wx:focus-within .rail-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
/* 码位：`position: relative` 保留（中心 `.qr-logo` 品牌标叠层已于 2026-10-15 移除，二维码自带企微标）。
   `overflow: hidden` 把缩放后的源图裁进圆角。 */
.rail-pop-qr {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px;
  background: #fff; overflow: hidden;
}
.rail-pop-qr > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rail-pop p { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
/* 「回到顶部」并入同一组按钮（`.rail-btn`），**V2.25 起改为滚动之后才出现**
   （用户 2026-10-11 01:23：「返回顶部的这个按钮，不是一直都出现的。只有页面滚动后才会出现」）。
   这一条历史上按 scrollY 显隐过，后来因为「整组垂直居中、逐个显隐会把整组顶得上下一跳」
   改成了全时段可见。这次把这个副作用彻底消掉再改回来：
     · **用 `height` 从 0 长到 42px**（不是 `display:none`）——高度可以过渡，胶囊是平滑伸长；
     · 胶囊定位按**三格高度**居中（`top: calc(50% - 71px)`，见上文），所以伸出来的这一格
       只向**下**长，上面三格一个像素都不动，不会「顶上去」。
   阈值 300px，状态由 `js/main.js` 第 7 段随滚动切换（复用那里已有的 rAF 节流）。 */
.rail-top {
  height: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: height .26s var(--ease),
              opacity .26s var(--ease), visibility .26s var(--ease),
              background .2s var(--ease), color .2s var(--ease);
}
.contact-rail.is-scrolled .rail-top { height: var(--rail-cell); opacity: 1; visibility: visible; pointer-events: auto; }

/* ==================== 3. 联系弹窗（原 main.css L1875–1945）==================== */

.modal { position: fixed; inset: 0; z-index: 120; display: none; }
.modal.is-open { display: block; }
/* 锁滚动锁在根元素上：body 一旦变成滚动容器，目录页吸顶条会失去参照 */
html.is-locked { overflow: hidden; }
.modal-mask { position: absolute; inset: 0; background: var(--mask); }
.modal-box {
  position: relative; width: min(92vw, 400px); margin: 12vh auto 0;
  background: var(--surface); border-radius: var(--radius-lg); padding: 34px 34px 30px;
  text-align: center; box-shadow: var(--shadow-lift);
}
.modal-box h2 { font-size: 22px; }
.modal-line { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.modal-tip { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }

/* 弹层里的通道切换：电话 / 企业微信 /（后续）在线客服。
   用一个弹层而不是每项各做一个，是因为三条通道的出口是同一个「联系商务」，
   拆成三个弹层只会让二维码这类唯一素材散到三处。
   没有下划线、没有滑块，只靠实底与字重区分当前项。 */
.chn-tabs {
  display: flex; gap: 6px; margin-top: 22px; padding: 4px;
  background: var(--bg); border-radius: var(--radius-md);
}
.chn-tab {
  flex: 1 1 0; padding: 9px 6px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.chn-tab[aria-selected="true"] { background: var(--ink); color: var(--warm); font-weight: 600; }
.chn-panel[hidden] { display: none; }
/* 两个通道的内容高度差得不多（电话两块、二维码三块），但一高一低会让弹层
   在切换时跳一下。给面板一个统一的最小高度并让内容垂直居中，切换时外框不动。 */
.chn-panel {
  min-height: 248px; padding-top: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ph-qr {
  margin: 0 auto; width: 176px; height: 176px; border-radius: var(--radius-md);
  border: 1px dashed var(--line-strong); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; color: var(--ink-3); text-align: center; line-height: 1.7;
}
/* 电话：号码用等宽数字排成一行大字，下面一个低调的复制按钮。
   桌面浏览器点 tel: 一般没有反应，所以「复制号码」不是装饰，是桌面上唯一能接上的动作。 */
.chn-phone {
  display: block; margin-top: 4px;
  font-size: 27px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.chn-phone:hover { color: var(--accent); }
.chn-note { margin-top: 12px; color: var(--ink-3); font-size: 13.5px; }
/* 「扫一扫」不许在中间折行——居中排下 13.5px 会把三个字拆到两行，读起来断句（V2.46） */
.chn-note .nb { white-space: nowrap; }
/* V2.46：企业微信弹层里的二维码图槽，尺寸与原来的虚线占位框一致（176×176），
   **换图直接覆盖 `images/brand/qr-wecom.png`，联系页／客服页／这里三处一起生效**。 */
.chn-qr {
  display: block; width: 176px; height: 176px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); object-fit: contain;
}
.chn-copy {
  margin-top: 18px; padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 500; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.chn-copy:hover { border-color: var(--ink); background: rgba(23, 26, 29, .04); }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ink-3);
}
.modal-close:hover { background: var(--bg); color: var(--ink); }
.modal-close svg { width: 18px; height: 18px; }

/* ==================== 4. 客服专有（原 main.css L2306–2424）==================== */

/* ---------- 在线客服页（service/index.html）----------
   V2.47（2026-10-13）整页换配色。上一版是「暖黑面板 ＋ 纯白气泡 ＋ 能量橙」，用户否掉了：
   「这个颜色很难看，非常的难看…你网上找一找别人的在线客服是这个配色，你抄一下，
   颜色可以不跟官网相干」。于是**本页脱离站内暖白／墨黑／橙那一套**，照主流在线客服
   （美洽／七鱼／Intercom 一类）的做法重排——调研见下，整页只剩「白 ＋ 冷灰 ＋ 蓝」三色：
     · 面板纯白、对话区浅冷灰 #F5F7FA、页面底冷灰 #F4F6F9，三层都浅，靠一层轻投影分层；
     · 强调只用一个蓝 #2563EB——在线点、访客气泡、发送键、链接，与站内橙色无关；
     · 客服气泡白底细边配墨字、访客气泡蓝底白字，两处文字都过 AA（15.6:1 / 7.0:1）；
     · 冷灰页底用 `--svc-page` 铺在 `.svc-main` 上（本页无页脚，留白处不会露出暖白）。
   左侧是问答面板（真的能用：见 js/main.js 第 8 段），右侧是电话／企微／邮箱／官网四张卡。
   **本页不要页脚与吸底条**（`page(no_footer=True)`）——那几块信息与右侧卡片重复。 */
.svc-main { background: #F4F6F9; min-height: 100vh; }
.svc-page {
  --svc-bg: #FFFFFF;
  --svc-canvas: #F5F7FA;
  --svc-line: #E6E9EF;
  --svc-ink: #1B2431;
  --svc-ink-2: #4B5563;
  --svc-ink-3: #6B7280;
  --svc-accent: #2563EB;
  --svc-accent-d: #1D4ED8;
  --svc-accent-t: rgba(37, 99, 235, .08);
  padding: 64px 0 84px;
}
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; align-items: start; }
/* 面板：纯白底、18px 圆角、一层轻投影，浮在冷灰页面上 */
.chat {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(27, 36, 49, .04), 0 24px 48px -30px rgba(27, 36, 49, .30);
}
.chat-head { padding: 20px 24px 18px; border-bottom: 1px solid var(--svc-line); }
.chat-name { font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--svc-ink); }
.chat-state { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: var(--svc-ink-3); }
/* 在线点走本页强调蓝，不用站内橙色，也不做成绿色「在线」——旁边写的是工作时段，不是实时在线。 */
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--svc-accent); flex: none; }
.chat-log {
  display: flex; flex-direction: column; gap: 12px;
  height: 400px; overflow-y: auto; padding: 24px; background: var(--svc-canvas);
}
.msg { display: flex; }
.msg p {
  max-width: 78%; padding: 12px 16px;
  border-radius: 16px; font-size: 14.5px; line-height: 1.8;
}
/* 客服气泡＝白底细边（「内容」落在这上面），字用近黑，白底上 15.6:1 */
.msg--cs p { background: #FFFFFF; color: var(--svc-ink); border: 1px solid var(--svc-line); border-top-left-radius: 6px; }
.msg--me { justify-content: flex-end; }
.msg--me p { background: var(--svc-accent); color: #FFFFFF; border-top-right-radius: 6px; }
/* 「正在输入」气泡：三个跳动的点。**停留时长与回复字数成正比**，时序见 js/main.js 第 8 段
   的 `thinkMs()` / `typeMs()`——先停 1.2–3.4 秒（在看你这条消息），再按每字 85–120ms 冒点，
   整段夹在 1.6–16 秒；字数越多冒得越久，不再出现「冒三四秒甩出一百字」。 */
.msg--typing p { display: flex; align-items: center; gap: 5px; padding: 15px 17px; }
.msg--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #98A1B0;
  animation: chatTyping 1.2s ease-in-out infinite;
}
.msg--typing span:nth-child(2) { animation-delay: .18s; }
.msg--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chatTyping {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px 0; }
.chat-quick button {
  padding: 8px 14px; border: 1px solid var(--svc-line); border-radius: 999px;
  background: #FFFFFF; color: var(--svc-ink-2);
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chat-quick button:hover,
.chat-quick button:focus-visible {
  border-color: var(--svc-accent); color: var(--svc-accent); background: var(--svc-accent-t);
}
.chat-form { display: flex; gap: 10px; padding: 18px 24px 22px; }
.chat-form input {
  flex: 1; min-width: 0; padding: 13px 16px;
  font-family: inherit; font-size: 14.5px; color: var(--svc-ink);
  background: var(--svc-canvas); border: 1px solid transparent; border-radius: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.chat-form input::placeholder { color: var(--svc-ink-3); }
.chat-form input:focus { outline: none; border-color: var(--svc-accent); background: #FFFFFF; }
.chat-send {
  flex: none; padding: 13px 24px; border: 0; border-radius: 12px;
  background: var(--svc-accent); color: #FFFFFF;
  font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease);
}
.chat-send:hover { background: var(--svc-accent-d); transform: translateY(-1px); }
.chat-send:focus-visible { outline: 2px solid var(--svc-accent-d); outline-offset: 2px; }
.svc-side { display: flex; flex-direction: column; gap: 12px; }
.svc-card {
  padding: 22px; background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 36, 49, .04);
}
.svc-card h2 { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--svc-ink); }
.svc-card p { margin-top: 9px; font-size: 13.5px; line-height: 1.8; color: var(--svc-ink-2); }
.svc-link { color: var(--svc-accent); text-decoration: underline; text-underline-offset: 3px; }
.svc-link:hover { color: var(--svc-accent-d); }
.svc-phone {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 20px; font-weight: 600; color: var(--svc-ink); font-variant-numeric: tabular-nums;
}
.svc-phone svg { width: 18px; height: 18px; flex: none; }
.svc-phone:hover { color: var(--svc-accent); }
/* 企业微信卡里的二维码（现在是暖白占位图；**换图直接覆盖
   `images/brand/qr-wecom.png` 即可，不用改代码**）。 */
.svc-qr {
  display: block; width: 150px; height: 150px; margin-top: 14px;
  border: 1px solid var(--svc-line); border-radius: 12px; background: #FFFFFF; object-fit: contain;
}

@media (max-width: 900px) {
  .svc-page { padding: 44px 0 60px; }
  .svc-layout { grid-template-columns: 1fr; gap: 16px; }
  .chat-log { height: 340px; padding: 20px; }
  .msg p { max-width: 88%; }
}

/* 窄屏隐藏悬浮条（原在 main.css 的 @media (max-width: 760px) 块里，
   抽出后由本文件自己控制）。 */
@media (max-width: 760px) {
  .contact-rail { display: none; }
}