/* ============================================================
   九信远智 服务解读 H5（service_h5.html）· 样式总表
   作用域约定：本页样式全部走 pm- 前缀（模块内令牌 --pm-*，定义见 body.pm-page）；
     .jm-brand 为全站统一品牌组合（logo+字距基线规范），跨页共用
   历史清理（2026-09-15）：门户「大色块」版遗留样式已移除——site-nav / nav-* /
     field-hero / hero-* / btn* / card / section / sec-* / field-grid / grid-* /
     footer* / tabs / timeline / moment / fortune-* / zodiac-* / course-type /
     placeholder-box / scroll-hint 等类本页均未使用（含 bounce/fadein 动画）
   画布：固定 400 × 757，不随屏幕缩放；超出高度在 .pm-scroll 内纵向滚动
   ============================================================ */
:root {
  /* 字体族（pm- 模块与 jm-brand 共用） */
  --font-display: Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif SC", SimSun, serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #fafafa;   /* pm-page 覆盖为 --pm-bg（浅灰画布底） */
  color: #171717;
  line-height: 1.75;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}


/* ═══════ 品牌组合（全站统一 · 规范已固化，勿随意改动） ═══════
   规则：
     1. 印章 logo（logoyk.webp）明显大于品牌名：logo 高 = 字号 × 1.8
     2. logo 与品牌名下对齐（基线对齐：logo 底边落在文字基线上）
     3. logo 与品牌名之间的间距固定 5px
     4. 不带拼音字样（禁止 "JIU XIN" 等 small 标注）
   用法：<a class="jm-brand" style="font-size:17px"><img src="assets/logoyk.webp">九信远智</a>
        页面只覆盖字号 / 颜色，间距与 logo 比例不要覆盖
   ═══════ */
.jm-brand {
  display: inline-flex; align-items: baseline; gap: 5px;
  transform: translateX(2px);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.04em; color: inherit; text-decoration: none;
}
.jm-brand img { height: 1.62em; width: auto; flex: none; transform: translate(2px, 3px); }
/* 图片缩小 3px 并右移 2px；下移 3px 使"最低带色内容"与品牌字底部对齐 */

/* ═══════ 产品介绍模块（pm- 前缀 · H5 固定画布） ═══════
   与门户「大色块」语言区分：浅灰底 + 朱砂红框线/点缀
   色彩关系：
     页面底 —— 浅灰（neutral 系）
     卡片底 —— 浅灰（比页面浅半档，做出纸面层次）
     框线   —— 朱砂红 hairline（继承服务 --vermilion）
     点缀   —— 朱砂红（眉题/价格/按钮描边/激活态）
   画布：固定 400 × 757，不随屏幕缩放（无媒体查询 / vw / clamp），
        内容超出 757 高在 .pm-scroll 内纵向滚动
   ═══════ */
body.pm-page {
  /* 模块内局部令牌（只作用于 pm- 前缀，不污染门户） */
  --pm-bg: #f0f0f0;               /* 页面浅灰底（纯灰） */
  --pm-surface: #f7f7f7;          /* 卡片浅灰底（半档提亮，纯灰） */
  --pm-surface-deep: #eaeaea;     /* 更深一档（目录条目/分区底，纯灰） */
  --pm-accent: #D94E3D;           /* 朱砂红 · 框线/点缀（跟随服务板块） */
  --pm-accent-deep: #a63a2e;      /* 朱砂红 · 深（hover/强调） */
  --pm-line: rgba(217, 78, 61, 0.38);   /* 朱砂 hairline 静态 */
  --pm-line-strong: rgba(217, 78, 61, 0.85); /* 朱砂 hairline hover/激活 */
  --pm-line-faint: #e3e3e3;       /* 中性发丝线（分组间，纯灰） */
  /* 墨色三档：原为门户中性色别名（var(--ink) 等），2026-09-15 清理门户样式时改内联实值，模块自此自持 */
  --pm-ink: #171717;
  --pm-ink-soft: #6b6b6b;
  --pm-ink-faint: #999999;
  --pm-radius: 10px;
  --pm-accent-soft: #E46E5F;      /* 机器人 blob：比 --pm-accent 浅 1.5 档（再浅会融进灰底） */
  --pm-scrollbar: #cccccc;        /* 面板内滚动条（中性件） */
  --pm-grab: #c9c9c9;             /* 抽屉抓手条（中性件） */
  --pm-shadow: 0 2px 10px rgba(23, 23, 23, 0.05);

  background: var(--pm-bg);
  color: var(--pm-ink);

  /* 固定画布：内容装入 400×757 stage，居中放置；背板与画布同色，
     长屏手机上页面自然延伸，边界仅由投影暗示 */
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--pm-bg);
}

/* ── 固定显示区域（400 × 757，不随屏幕缩放） ── */
.pm-stage {
  position: relative;   /* 悬浮机器人（absolute）的定位基准 */
  flex: none;
  display: flex; flex-direction: column;
  width: 400px; height: 757px;
  background: var(--pm-bg);
  overflow: hidden;
}
/* 页内滚动区：顶栏之外的 all 内容在其内纵向滚动 */
.pm-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--pm-scrollbar) transparent;
}

/* ── 顶栏（stage 顶部固定 ·「扉页钤印」：与页面同色融合，印章即装饰） ── */
.pm-topbar {
  position: relative; z-index: 90; flex: none; top: 5px;   /* 整体下移 5px（相对偏移，不影响下方布局） */
  display: flex; align-items: baseline;
  gap: 10px;
  padding: 0 16px; height: 54px;
  background: var(--pm-bg);
}
.pm-topbar__brand { font-size: 17px; color: var(--pm-ink); position: relative; top: 5px; }   /* 品牌字下移 5px：用相对定位，不覆盖 jm-brand 固化的 translateX */
/* 面包屑分类：详情态时「我们的服务 > 分类」，普通黑字样式 */
.pm-topbar__crumb {
  font-size: 15px; color: var(--pm-ink);   /* 与 17px 品牌字同基线时，分类名取 15px 视觉最稳（旋钮） */
  position: relative; top: 5px;            /* 随品牌字同步下移 5px：保持两者下沿对齐 */
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pm-topbar__crumb.is-on { opacity: 1; transform: none; }
.pm-topbar__crumb i { font-style: normal; color: var(--pm-ink-soft); margin-right: 7px; }

/* ── Hero（浅灰场，朱砂红只做字与线） ── */
.pm-hero {
  position: relative; overflow: hidden;
  padding: 27px 20px 44px;
}
/* 页眉底边线：朱砂飞白贴在 logo 栏底部——左端与 logo 左缘对齐（收 16px），下移 5px 拉开缝隙 */
.pm-topbar::after {
  content: ""; position: absolute; left: 16px; right: 0; bottom: -5px; height: 3px;
  background: linear-gradient(90deg, var(--pm-accent), rgba(217, 78, 61, 0));
}
/* 详情态：页眉装饰线隐藏（约定详情页顶部无线，logo 栏灰缝直接过渡到卡片） */
body.pm-detail-open .pm-topbar::after { content: none; }
.pm-hero__mark {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.32em; color: var(--pm-accent); margin-bottom: 16px;
}
.pm-hero__mark .gan-mark {
  font-size: 15px; letter-spacing: 0.1em; color: var(--pm-ink);
  border: 1px solid var(--pm-line-strong); border-radius: 4px;
  padding: 1px 7px; text-indent: 0;
}
.pm-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1.2;
  letter-spacing: 0.06em; color: var(--pm-ink); margin: 0 0 17px;
}
.pm-hero__tagline {
  font-size: 13px; letter-spacing: 0.26em; color: var(--pm-ink-faint);
  margin-bottom: 14px; text-indent: 0.26em;
}
.pm-hero__lead {
  font-size: 14.5px; line-height: 1.9; color: var(--pm-ink-soft); max-width: 560px;
  letter-spacing: 0.03em;
  text-indent: 1em; font-weight: 700;
}

/* hero 内目录：标题下方（较自然间距下移 10px） */
.pm-hero .pm-cat__grid { margin: 0 0 33px; }

/* ── 按钮（朱砂红框线语言） ── */
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--pm-radius);
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer; transition: all 0.18s;
  border: 1px solid var(--pm-accent); background: transparent; color: var(--pm-accent);
}
.pm-btn:hover { background: rgba(217, 78, 61, 0.07); border-color: var(--pm-accent-deep); color: var(--pm-accent-deep); }
.pm-btn--solid { background: var(--pm-accent); color: #fff; }
.pm-btn--solid:hover { background: var(--pm-accent-deep); border-color: var(--pm-accent-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 78, 61, 0.28); }
.pm-btn--sm { padding: 8px 16px; font-size: 12.5px; border-radius: 8px; }

/* ── 通用容器与区块头（400 画布：16px 边距 → 368px 内容宽） ── */
.pm-wrap { padding: 0 16px; }

.pm-section { padding: 40px 0; }

.pm-sechead { margin-bottom: 22px; }
.pm-sechead .eyebrow { color: var(--pm-accent); text-align: left; text-indent: 0; }
.pm-sechead h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: 0.04em; color: var(--pm-ink); margin: 0 0 8px;
}
.pm-sechead p { font-size: 13.5px; color: var(--pm-ink-soft); margin: 0; }

/* ── 目录（借鉴 JmServicesCatalog 解剖：天干字+类名+说明+项数）
      400 画布：2×2 满铺网格，四类一屏看全，点按直达分组 ── */
.pm-cat__grid {
  display: grid; grid-template-columns: 1fr;
  gap: 13px;
}
/* 指路兑现（气泡 go='catalog'）：宫格聚光一拍——朱砂框线提亮+轻浮起（hover 同语言），甲乙丙丁错峰 */
.pm-cat__grid.is-spotlight .pm-cat__entry { animation: pm-cat-spot 1.8s ease both; }
.pm-cat__grid.is-spotlight .pm-cat__entry:nth-child(2) { animation-delay: 0.12s; }
.pm-cat__grid.is-spotlight .pm-cat__entry:nth-child(3) { animation-delay: 0.24s; }
.pm-cat__grid.is-spotlight .pm-cat__entry:nth-child(4) { animation-delay: 0.36s; }
@keyframes pm-cat-spot {
  0%   { border-color: var(--pm-line); background: var(--pm-surface-deep); transform: translateY(0); }
  18%  { border-color: var(--pm-line-strong); background: var(--pm-surface); transform: translateY(-2px); }
  70%  { border-color: var(--pm-line-strong); background: var(--pm-surface); transform: translateY(-2px); }
  100% { border-color: var(--pm-line); background: var(--pm-surface-deep); transform: translateY(0); }
}
.pm-cat__entry {
  position: relative; display: flex; flex-direction: row; align-items: center;
  min-height: 64px; padding: 12px 14px;
  background: var(--pm-surface-deep);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  text-decoration: none; color: var(--pm-ink);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.pm-cat__entry:hover,
.pm-cat__entry:active {
  border-color: var(--pm-line-strong);
  background: var(--pm-surface);
  transform: translateY(-2px);
}
.pm-cat__gan {
  flex: none; margin-right: 12px;
  font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--pm-accent); opacity: 0.85;
}
.pm-cat__name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.08em; margin-right: 10px;
}
.pm-cat__desc { font-size: 13px; color: var(--pm-ink-soft); line-height: 1.6; margin-right: auto; }
/* 目录卡分享角标：右上角小图标，分享该类目深链接；捕获阶段拦截（js/share.js），不触发开抽屉 */
.pm-cat__share {
  position: absolute; top: 6px; right: 7px;
  width: 25px; height: 25px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pm-accent); opacity: 0.58;
  border-radius: 8px;
  transition: opacity 0.18s, background 0.18s;
}
.pm-cat__share:hover,
.pm-cat__share:active { opacity: 1; background: rgba(217, 78, 61, 0.09); }
.pm-cat__count {
  flex: none; margin-left: 10px;
  font-size: 10.5px; letter-spacing: 0.2em; color: var(--pm-accent);
  border: 1px solid var(--pm-line); border-radius: 4px; padding: 2px 8px;
}
/* 小助手导购行：虚线框 + 轻朱砂，与五组目录行区分 */
.pm-cat__entry--bot {
  border-style: dashed; border-color: var(--pm-line-strong);
  background: var(--pm-surface);
}
.pm-cat__entry--bot .pm-cat__gan { opacity: 1; }
.pm-cat__entry--bot .pm-cat__name { color: var(--pm-accent); }

/* ── 分组（目录锚点落点） ── */
.pm-group { border-top: 1px solid var(--pm-line-faint); }
.pm-group__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 18px;
}
.pm-group__gan {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--pm-accent); border: 1px solid var(--pm-line-strong);
  border-radius: 4px; padding: 1px 8px; flex: none;
}
.pm-group__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--pm-ink); margin: 0;
}
.pm-group__sub { font-size: 12px; color: var(--pm-ink-faint); letter-spacing: 0.1em; }

/* ── 产品卡片（浅灰底 + 朱砂红 hairline 框线；400 画布单列） ── */
.pm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.pm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  padding: 20px 18px 18px;
  box-shadow: var(--pm-shadow);
  text-decoration: none; color: var(--pm-ink);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pm-card:hover {
  border-color: var(--pm-line-strong);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(166, 58, 46, 0.12);
}
.pm-card__tags { display: flex; gap: 6px; margin-bottom: 10px; }
.pm-card__tag {
  font-size: 10.5px; letter-spacing: 0.06em;
  border: 1px solid var(--pm-line); color: var(--pm-accent);
  border-radius: 999px; padding: 2px 9px;
}
.pm-card__tag--neutral { border-color: var(--pm-line-faint); color: var(--pm-ink-soft); }
.pm-card__title {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
  letter-spacing: 0.02em; margin: 0 0 6px; color: var(--pm-ink);
}
.pm-card__desc {
  font-size: 12.5px; line-height: 1.75; color: var(--pm-ink-soft); margin: 0;
  flex: 1;
}
.pm-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: 16px;
}
.pm-card__price {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--pm-accent); line-height: 1.2;
}
.pm-card__price small {
  font-size: 11px; font-weight: 400; color: var(--pm-ink-faint);
  font-family: var(--font-body); margin-left: 2px;
}
.pm-card__more {
  flex: none; font-size: 12px; letter-spacing: 0.06em;
  color: var(--pm-accent); border: 1px solid var(--pm-line);
  border-radius: 8px; padding: 7px 13px;
  transition: all 0.18s;
}
.pm-card:hover .pm-card__more { border-color: var(--pm-line-strong); background: rgba(217, 78, 61, 0.06); }

/* ── 模块说明注记（沿用门户 note 语言，换朱砂线） ── */
.pm-note {
  margin-top: 24px; padding: 12px 16px;
  font-size: 12px; color: var(--pm-ink-soft); letter-spacing: 0.02em;
  background: var(--pm-surface);
  border: 1px solid var(--pm-line-faint);
  border-left: 3px solid var(--pm-accent);
  border-radius: 0 var(--pm-radius) var(--pm-radius) 0;
}

/* ── 页脚（浅灰收尾，一道朱砂 hairline 分隔） ── */
.pm-footer {
  position: relative;
  margin-top: 38px; padding: 3px 20px 40px;   /* 顶部 3px：导航紧贴页脚线下方 5px（线底边在框外 -2px 处）；margin 含装饰线一起累计下移 15px */
  background: var(--pm-bg);
}
/* 页脚线：红头抵右、向左渐隐——与页眉线镜像呼应；右端收 16px 与页眉线（左端收 16px）对称，上移 5px */
.pm-footer::before {
  content: ""; position: absolute; left: 0; right: 16px; top: -10px; height: 3px;
  background: linear-gradient(270deg, var(--pm-accent), rgba(217, 78, 61, 0));
}
.pm-footer__brand { font-size: 16px; color: var(--pm-ink); }
.pm-footer__copy {
  margin-top: 10px; font-size: 11px; color: var(--pm-ink-faint); letter-spacing: 0.04em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* 门户版遗留的 max-width:860px / 560px 两段媒体查询已删除（本页固定 400 画布，不做响应式缩放） */


/* ═══════ 页面滚动锁（状态推导式） ═══════
   任一覆盖层（详情抽屉/对话面板）开启即锁页面滚动；各层开合只增删自己的 body 类，
   锁由「还有没有覆盖层开着」实时推导——杜绝 A 层关闭时直接清 overflow 误放 B 层的锁 */
body.pm-detail-open, body.pm-chat-open { overflow: hidden; }

/* ── 悬浮问答机器人（pm- 前缀 · 纯前端知识库版） ──
   FAB 锚定 .pm-stage 右下角（absolute，固定画布内，不用 fixed）
   【独立层原则】机器人在 z 轴上是独立的一层（自持堆叠上下文），x/y 轴位置按场景自由设定：
   目录页右侧 / 详情态锚按钮下 40px / 对话态落输入行旁——均不被卡片或页眉绑定
   对话面板 = 画布内底部抽屉；视觉沿用浅灰面 + 朱砂 hairline 语言
   ═══════ */

/* ── 悬浮印章按钮 ── */
.pm-fab {
  position: absolute; z-index: 97;   /* 详情 94 < 对话 96 < FAB 97：对话打开时机器人浮在面板上，点它收起 */
  width: 48px; height: 48px; padding: 0; border: none;
  display: flex; align-items: center; justify-content: center;   /* blob 在按钮内严格居中：气泡 top:50% 与之同轴平行 */
  background: transparent; cursor: pointer;
}
/* 目录页：机器人居左，累计下移 70px（含点击区与气泡锚点同步） */
.pm-fab--blob { left: 5px; right: auto; top: 631px; }
/* 气泡镜像到机器人右侧：贴左边缘时朝右展开，尖角换到左下指向机器人 */
.pm-fab--blob .pm-fab__bubble { left: 56px; right: auto; border-radius: 10px 10px 10px 2px; }
/* 详情抽屉打开：机器人竖向由 JS 动态锚定（顶部 = 预约按钮底 + 40px，见 robot.js placeSheetRobot），
   bottom:7 仅作 JS 未就绪兜底；横向 left:7 固定 */
.pm-sheet.open ~ .pm-fab--blob { left: 7px; right: auto; top: auto; bottom: 7px; }
/* 气泡：机器人右上方「按钮下方空白带」（随机器人上移，距按钮仍留足余量），紧凑规格防超画布底 */
.pm-sheet.open ~ .pm-fab--blob .pm-fab__bubble { left: 45px; right: auto; top: -2px; bottom: auto; transform: none; padding: 6px 10px; line-height: 1.5; border-radius: 10px 10px 10px 2px; }
/* 对话面板打开：机器人浮在面板右下（输入行右侧留位），点它收起对话。
   置于 sheet 规则之后：详情+对话同开时以这条为准（同特异性，后序胜） */
.pm-fab.pm-fab--blob.is-open { left: auto; right: 4px; top: auto; bottom: 10px; }

/* 原创 blob 机器人（几何与动画均为原创，仅风格致敬，无版权来源） */
.pm-blob {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 40px; height: 36px;
  background: var(--pm-accent-soft);   /* 比 --pm-accent 浅 1.5 档：再浅会融进灰底 */
  border-radius: 46% 54% 52% 48% / 55% 52% 48% 45%;
  box-shadow: 0 6px 18px rgba(166, 58, 46, 0.38);
  animation: pm-bob 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.pm-blob__eye {
  width: 6px; height: 10px; border-radius: 3px; background: #fff;
  animation: pm-blink 4.2s ease-in-out infinite;
}
.pm-blob__eye + .pm-blob__eye { animation-delay: 0.06s; }
@keyframes pm-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes pm-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}

/* ── 定时提示气泡 ── */
.pm-fab__bubble {
  position: absolute; right: 56px; top: 50%; bottom: auto;   /* 垂直居中：与机器人同一水平线（目录页平行） */
  transform: translateY(-50%);
  width: max-content; max-width: 320px;   /* 跟随页面宽度 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  background: var(--pm-surface-deep); color: var(--pm-ink);
  border: none; border-radius: 10px 10px 2px 10px;
  padding: 9px 12px; font-size: 12px; line-height: 1.6; text-align: center;
  box-shadow: var(--pm-shadow); cursor: pointer;
  animation: pm-bubble-in 0.3s ease;
}
.pm-fab__bubble[hidden] { display: none; }
@keyframes pm-bubble-in {
  from { opacity: 0; margin-top: 8px; }   /* 下滑入场用 margin：transform 已占用做垂直居中，不能动 */
  to { opacity: 1; margin-top: 0; }
}

/* ── 对话抽屉面板 ── */
.pm-chat {
  position: absolute; left: 2px; right: 2px; bottom: 0; z-index: 96;   /* 两侧各收 2px：与画布边缘留发丝缝 */
  height: min(72%, 500px);   /* 兜底值：打开后由 robot.js placeOpenUI 恒定为展开态高度（顶边锚 slogan） */
  display: flex; flex-direction: column;
  background: var(--pm-bg);
  border: 1px solid var(--pm-line);   /* 顶部 + 两侧朱砂 hairline：面板框线可见（底边贴画布底，不画） */
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 30px rgba(23, 23, 23, 0.14);
  transform: translateY(105%); visibility: hidden;
  transition: transform 0.26s ease, visibility 0.26s, height 0.2s ease, bottom 0.2s ease;   /* height/bottom：键盘弹起收起时面板平滑扩缩，消除突跳 */
}
.pm-chat.open { transform: translateY(0); visibility: visible; }

.pm-chat__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 16px;   /* 右侧收窄 + 单行标题：头部变薄，省下的高度全给消息区 */
  border-bottom: 1px solid var(--pm-line-faint);
}
.pm-chat__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-chat__head h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: 0.06em; margin: 0; color: var(--pm-ink); flex: none;
}
.pm-chat__head p {
  margin: 0; font-size: 12px; color: var(--pm-accent); letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-chat__close {
  flex: none; width: 32px; height: 32px; border: 1px solid var(--pm-line); border-radius: 50%;
  background: var(--pm-surface); color: var(--pm-ink-soft);
  font-size: 18px; line-height: 1; cursor: pointer;
  align-self: flex-start; margin: -4px -3px 0 0;   /* 向右上角贴近面板边框 */
}
.pm-chat__close:hover { color: var(--pm-accent); border-color: var(--pm-line-strong); }

/* 消息滚动区 */
.pm-chat__msgs {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--pm-scrollbar) transparent;
}
.pm-msg {
  max-width: 80%; padding: 9px 12px;
  font-size: 13px; font-weight: 500; line-height: 1.75; text-align: left;
  border-radius: 10px; white-space: pre-wrap; word-break: break-word;
}
.pm-msg--bot { align-self: flex-start; background: var(--pm-surface); border: 1px solid var(--pm-line-faint); color: var(--pm-ink); border-bottom-left-radius: 3px; }
.pm-msg--user { align-self: flex-end; background: var(--pm-accent); color: #fff; border-bottom-right-radius: 3px; }

/* 预设问题 chips（横滑） */
.pm-chat__chips {
  flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px;
  border-top: 1px solid var(--pm-line-faint);
  scrollbar-width: none;
}
.pm-chat__chips::-webkit-scrollbar { display: none; }
.pm-chip {
  flex: none; padding: 6px 12px; border-radius: 999px;
  background: var(--pm-surface); border: 1px solid var(--pm-line);
  font-size: 12px; color: var(--pm-accent); cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.pm-chip:hover { border-color: var(--pm-line-strong); background: var(--pm-surface-deep); }

/* 输入行 */
.pm-chat__input {
  flex: none; display: flex; gap: 8px; padding: 10px 16px 14px;
  border-top: 1px solid var(--pm-line-faint);
}
/* 对话打开态：输入行右侧给浮着的机器人留位（48px 按钮宽 + 间隙） */
.pm-chat.open .pm-chat__input { padding-right: 58px; }
.pm-chat__input input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--pm-line); border-radius: var(--pm-radius);
  background: var(--pm-surface); color: var(--pm-ink); font-size: 13.5px;
  outline: none;
}
.pm-chat__input input:focus { border-color: var(--pm-line-strong); }
.pm-chat__send {
  flex: none; height: 40px; padding: 0 16px; border: none; border-radius: var(--pm-radius);
  background: var(--pm-accent); color: #fff; font-size: 13.5px; cursor: pointer;
  transition: background 0.2s;
}
.pm-chat__send:hover { background: var(--pm-accent-deep); }

/* ═══════ 产品详情抽屉（pm-sheet · 点目录直达详情） ═══════
   z 序：详情 94 < 对话 96 < FAB 97（机器人留在抽屉之上做陪伴）
   结构：头部（类目+关闭）→ 横滑卡片轨（scroll-snap 一屏一卡）→ 上/下项名称箭头导航条
   ═══════ */
.pm-sheet {
  position: absolute; left: 0; right: 0; top: 54px; bottom: 0; z-index: 94;
  display: flex; flex-direction: column;
  background: var(--pm-bg);
  border-radius: 14px 14px 0 0;
  transform: translateY(105%); visibility: hidden;
  transition: transform 0.26s ease, visibility 0.26s;
}
.pm-sheet.open { transform: translateY(0); visibility: visible; }
/* 详情态不画飞白线：logo 栏与卡片之间留 10px 灰缝做过渡，渐变标题栏即开场（目录页的线不受影响） */
.pm-sheet::before { content: none; }

/* 横滑卡片轨：同类目服务 scroll-snap 吸附，一屏一卡；scroll-padding 让卡片左右边框各留 2px 可见 */
.pm-sheet__deck {
  flex: 1; min-height: 0;
  margin: 0;   /* 卡底 = 下方签带上缘（框线 y709，上收 20px）；下方 48px 签带归 .pm-sheet__next */
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 5px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pm-sheet__deck::-webkit-scrollbar { display: none; }

/* ── 「上一项/下一项」签：卡片下缘左右两枚小签，上缘贴卡片下框线（卡底框线即签上缘），垂在灰带里。
   各自预告左右邻卡的提炼词；落卡 1s 呼吸两拍登场后常驻；点击直达对应卡；首卡隐左签、末卡隐右签 ── */
.pm-sheet__next {
  flex: none; height: 48px; position: relative;
}
.pm-sheet__next b {
  position: absolute; top: 0;
  padding: 3px 10px 4px;
  background: var(--pm-surface); border: 1px solid var(--pm-line); border-top: none;
  border-radius: 0 0 8px 8px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--pm-accent);
  cursor: pointer; opacity: 0; user-select: none;
}
.pm-sheet__chip--next { right: 16px; }
.pm-sheet__chip--prev { left: 16px; }

/* ── 分章段控（分章类目）：抽屉顶部纤细胶囊段控，随时换章，章内连滑；平铺组隐藏 ── */
.pm-sheet__switch {
  flex: none; display: none; justify-content: center;
  padding: 1px 0 9px;
}
.pm-sheet__switch span {
  padding: 5px 16px;
  background: var(--pm-surface); border: 1px solid var(--pm-line);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--pm-accent); cursor: pointer; user-select: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.pm-sheet__switch span:first-child { border-radius: 999px 0 0 999px; }
.pm-sheet__switch span:last-child { border-radius: 0 999px 999px 0; }
.pm-sheet__switch span + span { border-left: none; }
.pm-sheet__switch span.is-on { background: var(--pm-accent); border-color: var(--pm-accent); color: #fff; }
.pm-sheet__next b.is-live { animation: pm-next-live 1.8s ease 1s both; }
@keyframes pm-next-live {
  0%   { opacity: 0; transform: translateY(-4px); }
  55%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0.45; }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 轻推动画（预留：配合机器人阶段统一启用，当前 JS 不触发） */
@keyframes pm-nudge {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-24px); }
  70% { transform: translateX(0); }
  85% { transform: translateX(-8px); }
}
.pm-sheet__deck.is-nudge .pm-doc { animation: pm-nudge 0.85s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── 详情卡片（横滑卡轨内，一卡一服务；布局与最初一致，签条贴卡内） ── */
.pm-doc {
  position: relative;
  flex: 0 0 calc(100% - 10px);
  margin: 0 5px;
  scroll-snap-align: start;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;   /* 预约按钮钉在卡片底部 */
  background: var(--pm-surface); border: 1px solid var(--pm-accent);   /* 实色朱砂细框：与标题栏渐变底端同色融合，无淡色缝；比目录卡 hairline 重一档 */
  border-radius: var(--pm-radius); padding: 0 0 18px;
}
/* 正文内层：左右内距在这里控制，标题栏即可全宽贴合边框（无负 margin，杜绝 1px 缝） */
.pm-doc__main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;   /* 按钮随内容后置（不再钉底） */
  padding: 5px 14px 0;
}
/* 标题栏：无底色——品牌色标题直接落在卡片浅灰面上；
   上下对称 padding = 标题垂直居中；下框线 = 朱砂 hairline（全宽，接回边框两缘） */
.pm-doc__hero {
  position: relative;
  flex: none;
  margin: 0 0 14px;                        /* 全宽贴合边框（不靠负 margin） */
  padding: 7px 16px;
  border-bottom: 1px solid var(--pm-line);
}
/* 关闭控件：角部圆片——右上弧与卡片内角弧重合（10-1=9px），左下大弧内收成角片；
   磨砂白底融入渐变顶端，× 居于圆片中心（padding 把中心推向右上以避开左下弧线） */
/* 抓手条：iOS 弹层语言——居中小灰条，点击关闭；兼作 logo 栏与卡片之间的过渡 */
.pm-sheet__grab {
  flex: none; height: 20px;
  display: flex; align-items: center; justify-content: center;
  padding-top: 4px; cursor: pointer;
}
.pm-sheet__grab span {
  width: 36px; height: 4px; border-radius: 999px;
  background: var(--pm-grab);
}
.pm-sheet__grab:active span { background: var(--pm-line-strong); }
.pm-doc__title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--pm-accent); margin: 0; max-width: 280px;   /* 品牌朱砂 #D94E3D：与预约按钮背景同源 */
}
/* 章头卡（pm-doc--chapter）已移除：chapters 组直接摊平为产品卡连滑 */
.pm-doc__price {
  font-family: var(--font-body); font-size: 22px; font-weight: 700;
  color: var(--pm-accent); margin: 6px 0 14px;
}
.pm-doc__price small {
  font-size: 12px; color: var(--pm-ink-faint); font-family: var(--font-body);
  font-weight: 400; margin-left: 6px;
}
.pm-doc__sec { margin-bottom: 14px; }
.pm-doc__sec h4 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  color: var(--pm-ink); margin: 0 0 6px; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
}
.pm-doc__sec h4::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--pm-accent); flex: none;
}
.pm-doc__sec p {
  font-size: 14px; line-height: 1.85; letter-spacing: 0.02em;
  color: var(--pm-ink-soft); margin: 0;
}
.pm-doc__note {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em;
  color: var(--pm-ink-faint); text-align: center;
  margin: 2px 0 0;
}
/* 详情卡底部 CTA 行：预约 + 分享并排（…Share = 第 9 个功能位 id，行为归 js/share.js） */
.pm-doc__cta {
  display: flex; gap: 10px; justify-content: center; align-items: stretch;
  margin: 15px auto 30px;   /* 底部居中；距「相逢」字样 15px（原预约钮外距移交本行） */
}
.pm-doc__book {
  flex: 1 1 auto; max-width: 170px;   /* 原独立居中布局（width 50%-20px）随 CTA 行调整 */
  padding: 9px 12px; font-size: 15px;
}
.pm-doc__book:disabled { opacity: 0.75; cursor: default; }
.pm-doc__share {
  flex: none; width: 84px; padding: 9px 0; font-size: 14px;
  letter-spacing: 0.14em; text-indent: 0.14em;   /* 描边钮（.pm-btn 默认态）：与实心预约钮同排对比 */
}

/* ── 分享引导浮层（js/share.js 动态挂到 #pmStage）
      z 98：详情 94 < 对话 96 < FAB 97 < 引导 98；点任意处收起 ── */
.pm-share {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 98;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 23, 23, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  cursor: pointer;
}
.pm-share.is-on { opacity: 1; visibility: visible; }
.pm-share__corner {
  position: absolute; top: 10px; right: 12px;
  padding: 3px 11px; border-radius: 9px;
  border: 1.5px dashed rgba(255, 255, 255, 0.9); color: #fff;
  font-size: 15px; letter-spacing: 2px; line-height: 1.5;
  animation: pm-share-point 1.4s ease infinite;
}
@keyframes pm-share-point {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.pm-share__panel {
  width: 264px; padding: 22px 20px 16px;
  background: var(--pm-surface); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 23, 23, 0.3);
  text-align: center;
}
.pm-share__title {
  display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--pm-accent); letter-spacing: 0.06em;
}
.pm-share__steps { counter-reset: pmstep; margin: 15px 0 0; padding: 0 2px; list-style: none; text-align: left; }
.pm-share__steps li {
  counter-increment: pmstep; position: relative;
  padding-left: 27px; margin-top: 10px;
  font-size: 13.5px; line-height: 1.7; color: var(--pm-ink-soft);
}
.pm-share__steps li::before {
  content: counter(pmstep);
  position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--pm-accent); color: #fff;
  font-size: 11px; line-height: 17px; text-align: center;
}
.pm-share__note {
  margin: 16px 0 0; padding-top: 11px;
  border-top: 1px solid rgba(217, 78, 61, 0.18);
  font-size: 11.5px; color: var(--pm-ink-faint); letter-spacing: 0.02em;
}

/* 分享 toast（复制成功提示） */
.pm-share-toast {
  position: absolute; left: 50%; bottom: 84px; z-index: 99;
  transform: translateX(-50%) translateY(6px);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(23, 23, 23, 0.86); color: #fff;
  font-size: 12.5px; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 0.22s, transform 0.22s;
  pointer-events: none; white-space: nowrap;
}
.pm-share-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }