/* ==========================================================================
   app.css — 微信 app（T4a：微信风基础组件 + 屏 3–8）

   分两段：
     A. 微信 / iOS 基础 token 与组件（导航条、分组列表、气泡、胶囊、按钮）
     B. 屏 3–8 各自的排版
   T4b 往文件末尾追加屏 9–11 的段落，不改 A 段。

   视觉红线（策划案 §1「不要」清单）：
     无紫蓝渐变、无大圆角卡片流、无居中大标题、无网页导航栏。
     头像方角 4px（.avatar 在 phone.css 里已定），iOS 分组列表单元圆角 8px。
     主操作按钮一律在屏幕下半部（.wx-foot 固定在底部），390×844 内单手可达。
   ========================================================================== */

/* ==========================================================================
   A. 基础 token 与组件
   ========================================================================== */

:root {
  --wx-bg: #ededed;              /* 微信页面底色 */
  --wx-white: #ffffff;
  --wx-green: #95ec69;           /* 自己发出的气泡 */
  --wx-green-line: #83d75c;
  --wx-brand: #07c160;           /* 主按钮绿 */
  --wx-brand-press: #069b4d;
  --wx-link: #576b95;            /* 微信蓝（文字按钮） */
  --wx-ink: #191919;
  --wx-ink-2: #4c4c4c;
  --wx-sub: #8f8f94;
  --wx-line: #dcdcdc;
  --wx-line-soft: #ececec;
  --wx-tag-bg: #f0f2f4;
  --wx-tag-ink: #5b646e;
  --wx-nav-h: 44px;
  --wx-radius-cell: 8px;         /* iOS 分组列表单元 */
  --wx-radius-bubble: 6px;
  --wx-radius-btn: 6px;
}

/* app 容器：nav 固定 / body 滚动 / foot 贴底 */
.wx {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--wx-bg);
  color: var(--wx-ink);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 导航条（微信 app 内标题栏，非网页导航栏） ---------- */

.wx-nav {
  flex: 0 0 auto;
  height: var(--wx-nav-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--wx-bg);
  border-bottom: 0.5px solid var(--wx-line);
  position: relative;
}
.wx-nav-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-nav-side {
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.wx-nav-right { justify-content: flex-end; }

.wx-nav-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  font: inherit;
  color: var(--wx-ink);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.wx-nav-btn:active { opacity: 0.5; }
.wx-nav-btn.wx-nav-text { color: var(--wx-link); font-size: 15px; }
.wx-chev {
  font-size: 27px;
  line-height: 1;
  margin-top: -3px;
  font-weight: 300;
}
.wx-nav-note {
  font-size: 13.5px;
  color: var(--wx-sub);
  padding-right: 8px;
  white-space: nowrap;
}

/* ---------- 可滚动内容区 ---------- */

.wx-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* ---------- 分组列表（iOS 风：白单元 + 8px 圆角 + 组标题） ---------- */

.wx-group-title {
  padding: 16px 16px 6px;
  font-size: 13px;
  color: var(--wx-sub);
}
.wx-group {
  margin: 0 16px;
  background: var(--wx-white);
  border-radius: var(--wx-radius-cell);
  overflow: hidden;
}
.wx-group + .wx-group { margin-top: 12px; }
/* 组标题之外的场合（提示条后 / 直接顶在导航条下）也要留出间距 */
.wx-notice + .wx-group,
.wx-body > .wx-group:first-child { margin-top: 12px; }

.wx-cell {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: var(--wx-white);
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
}
.wx-cell + .wx-cell::before {
  content: "";
  position: absolute;
  left: 68px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--wx-line-soft);
}
.wx-cell:active { background: #f2f3f5; }
.wx-cell.is-retired { opacity: 0.62; }

.wx-cell-body { flex: 1 1 auto; min-width: 0; }
.wx-cell-title {
  font-size: 16.5px;
  color: var(--wx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-cell-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--wx-sub);
  line-height: 1.4;
}
.wx-cell-chev {
  flex: 0 0 auto;
  color: #c4c4c6;
  font-size: 20px;
  line-height: 1;
}
.wx-cell-emoji {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.wx-empty {
  padding: 18px 14px;
  font-size: 14.5px;
  color: var(--wx-sub);
  background: var(--wx-white);
}

/* ---------- 右侧状态徽标 ---------- */

.wx-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f2f3f5;
  color: var(--wx-tag-ink);
  white-space: nowrap;
}
.wx-badge-icon { font-size: 12px; line-height: 1; }
.wx-badge--matched   { background: #fdeeee; color: #b0453f; }
.wx-badge--angry     { background: #fbf0e6; color: #a3652a; }
.wx-badge--ambiguous { background: #eef2f2; color: #4f6b6b; }

/* ---------- 胶囊标签 ---------- */

.wx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}
.wx-tag {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--wx-tag-bg);
  color: var(--wx-tag-ink);
}

/* ---------- 键值行（六维定性词 / 背调结果） ---------- */

.wx-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  position: relative;
  font-size: 15px;
}
.wx-kv + .wx-kv::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--wx-line-soft);
}
.wx-kv-k { color: var(--wx-sub); flex: 0 0 auto; }
.wx-kv-v { color: var(--wx-ink); text-align: right; }
.wx-kv--trust { background: #fbfbfc; }
.wx-kv--trust .wx-kv-v { color: var(--wx-ink-2); }
.wx-kv--hidden { display: block; color: var(--wx-ink-2); }
.wx-kv--hidden .wx-kv-k { color: var(--wx-ink-2); }

.wx-inline-action {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wx-hint { font-size: 13px; color: var(--wx-sub); flex: 1 1 auto; }

/* ---------- 提示条（教学提示 / 操作说明） ---------- */

.wx-notice {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: var(--wx-radius-cell);
  background: #fdf6e7;
  color: #7d5a1e;
  font-size: 13.5px;
  line-height: 1.5;
}
/* 提示条里的第二行（屏 5 的「一男一女」那句） */
.wx-notice-sub {
  margin-top: 3px;
  font-size: 12.5px;
  opacity: 0.78;
}

/* ---------- 气泡（微信白 / 绿） ---------- */

.wx-chat { padding: 12px 14px 4px; }
.wx-chat--inline { padding: 0 0 4px; }

.wx-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}
.wx-chat-row--out { justify-content: flex-end; }
/* W6-D：新进的那几条他的消息按节奏逐条冒出来 —— 排队中的先不占地方，
   轮到它时淡入 + 轻微上移（一两百毫秒，跟真人发消息的观感对齐）。 */
.wx-chat-row.is-pending { display: none; }
@keyframes wx-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wx-chat-row.is-arrive { animation: wx-arrive 180ms ease-out both; }

.wx-bubble {
  position: relative;
  max-width: 78%;
  padding: 10px 12px;
  border-radius: var(--wx-radius-bubble);
  font-size: 15.5px;
  line-height: 1.55;
  word-break: break-word;
}
/* W5（§8 A-2）：真机上两种气泡的正文都是纯黑，绿气泡没有偏绿的字色。 */
.wx-bubble--in {
  background: var(--wx-white);
  color: #000000;
}
.wx-bubble--out {
  background: var(--wx-green);
  color: #000000;
}
/* 气泡小尖角 */
.wx-bubble--in::before,
.wx-bubble--out::before {
  content: "";
  position: absolute;
  top: 13px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
.wx-bubble--in::before {
  left: -9px;
  border-right-color: var(--wx-white);
}
.wx-bubble--out::before {
  right: -9px;
  border-left-color: var(--wx-green);
}
.wx-bubble--block { max-width: 100%; }
.wx-bubble--block::before { display: none; }

/* W5（§8 A-1）：红娘自己那侧也有头像了（真机就是这样），所以原来那两条
   「藏掉 out 侧头像 / 右边补一点边距」的规则一并撤掉，不留死样式。
   头像一律顶对齐、不许被气泡挤扁。 */
.wx-chat-row .avatar { flex: 0 0 auto; }

/* ---------- 底部操作条与按钮（主操作恒在下半屏） ---------- */

.wx-foot {
  flex: 0 0 auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--wx-bg);
  border-top: 0.5px solid var(--wx-line);
}
.wx-foot-row { display: flex; gap: 10px; }
.wx-foot-row .wx-btn { flex: 1 1 0; }
.wx-foot-hint {
  font-size: 13px;
  color: var(--wx-sub);
  text-align: center;
  padding: 6px 0 8px;
}

.wx-btn {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--wx-radius-btn);
  padding: 13px 16px;
  font: inherit;
  font-size: 16.5px;
  line-height: 1.2;
  cursor: pointer;
}
.wx-btn--primary {
  background: var(--wx-brand);
  color: #fff;
}
.wx-btn--primary:active { background: var(--wx-brand-press); }
.wx-btn--plain {
  background: var(--wx-white);
  color: var(--wx-ink);
}
.wx-btn--plain:active { background: #f2f3f5; }
.wx-btn--outline {
  width: auto;
  padding: 8px 18px;
  background: var(--wx-white);
  color: var(--wx-link);
  border: 0.5px solid var(--wx-line);
  font-size: 15px;
}
.wx-btn.is-disabled {
  background: #d6dad9;
  color: #f4f5f5;
}
.wx-btn--outline.is-disabled {
  background: #f4f5f6;
  color: #b6b9bd;
  border-color: var(--wx-line-soft);
}

/* ==========================================================================
   B. 各屏排版
   ========================================================================== */

/* ---------- 屏 4 名片页：头部资料块 ---------- */

/* W3：原来这儿是 .wx-profile*（简历式详情页的头部）。名片页把它换成了
   .wx-card-head（见 F 段），旧的那几条已经没有人用，一并撤掉，不留死样式。 */

/* 名片页那条「约会之后他发来的消息」气泡直接贴在白底上，去掉分组边距 */
.wx-chat--inline .wx-chat-row { padding: 12px 16px 0; margin-bottom: 12px; }
.wx-chat--inline .wx-bubble--in {
  background: #f4f6f7;
  max-width: none;
}
.wx-chat--inline .wx-bubble--in::before { border-right-color: #f4f6f7; }

/* ---------- 屏 5 配对：多选勾 ---------- */

.wx-check {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid #c8c9cc;
  background: var(--wx-white);
  color: #fff;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}
.wx-check.is-on {
  background: var(--wx-brand);
  border-color: var(--wx-brand);
}
.wx-cell--pick { gap: 10px; }
.wx-cell--pick.is-picked { background: #f4faf6; }
.wx-cell--pick + .wx-cell--pick::before { left: 90px; }
/* 相亲要一男一女：先选中一位之后，同性别的行灰掉、点不动（D10） */
.wx-cell--pick.is-disabled {
  background: #f7f8f9;
  opacity: 0.45;
  cursor: default;
}

/* ---------- 屏 6 介绍：聊天区 + 选项区 ---------- */

/* C3：屏 6 是微信单聊，形状照微信来——聊天记录占满上面，回答区贴着底部那条操作栏。
   聊天区吃掉剩余高度（新气泡出来时自己滚到底），回答区按内容高度收，最多占四成半，
   于是「要点的东西」永远落在下半屏，单手够得着（本文件开头那条约束）。 */
.wx-body--chat {
  background: var(--wx-bg);
  flex: 1 1 auto;
  min-height: 0;
}
.wx-picker {
  flex: 0 0 auto;
  max-height: 45%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--wx-white);
  border-top: 0.5px solid var(--wx-line);
  padding: 4px 0 10px;
}
.wx-picker-title {
  padding: 10px 14px 4px;
  font-size: 12.5px;
  color: var(--wx-sub);
}
.wx-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px;
}
.wx-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0.5px solid var(--wx-line);
  background: #fafbfb;
  color: var(--wx-ink-2);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  /* C3 之后这几个胶囊是屏 6 唯一的主交互（原来只是三选一里的一格），
     纵向留够，单行的那条也有 44px 上下，拇指点得中。 */
  padding: 11px 12px;
  border-radius: 4px;
  cursor: pointer;
  max-width: 100%;
}
.wx-opt:active { background: #f0f1f2; }
/* 选中态只表示「选了」，不表示「对不对」——穿帮不给任何提示 */
.wx-opt.is-on {
  background: #eef8f1;
  border-color: #9fd6b3;
  color: #1c4c31;
}


/* ---------- 屏 6 问答：追问的三个动作 + 出示资料的引用气泡 ---------- */

/* 三个动作横排一行，390 宽下每个仍有 40px 以上的高度，拇指够得着；
   一律同色同权重——「出示资料」不比「就是这样」更像正确答案，不给任何提示。 */
.wx-press {
  display: flex;
  gap: 8px;
  padding: 10px 14px 4px;
}
.wx-press-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  border: 0.5px solid var(--wx-line);
  border-radius: 4px;
  background: #fafbfb;
  color: var(--wx-ink-2);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.3;
  padding: 12px 6px;
  cursor: pointer;
}
.wx-press-btn:active { background: #f0f1f2; }

/* 出示资料时红娘那条绿气泡里套的引用块（跟直播里引用原话那块同一个样子） */
.wx-say-quote {
  margin: -1px;
  padding: 6px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 2px solid rgba(0, 0, 0, 0.18);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}
.wx-say-quote::before { content: "「"; }
.wx-say-quote::after  { content: "」"; }
/* W5（§8 A-1）：这条引用气泡右边原来摆的是一块看不见的 .avatar-slot（占位用），
   现在跟别的绿气泡一样摆真的那张头像，占位那条规则跟着撤了。 */

/* ---------- 屏 6 「关于{某人}」半屏资料面板 ---------- */

.wx-sheet-wrap {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wx-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.wx-sheet {
  position: relative;
  max-height: 62%;
  display: flex;
  flex-direction: column;
  background: var(--wx-bg);
  border-radius: 10px 10px 0 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  animation: wx-iv-up 180ms ease-out;
}
.wx-sheet-title {
  flex: 0 0 auto;
  padding: 14px 16px 8px;
  font-size: 15px;
  color: var(--wx-ink);
  border-bottom: 0.5px solid var(--wx-line);
}
.wx-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
}
.wx-sheet-group {
  padding: 12px 16px 6px;
  font-size: 12.5px;
  color: var(--wx-sub);
}
.wx-fact {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 6px;
  border: 0.5px solid var(--wx-line);
  border-radius: 4px;
  background: var(--wx-white);
  color: var(--wx-ink-2);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}
.wx-fact:active { background: #f0f1f2; }
.wx-sheet-cancel {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: block;
  width: calc(100% - 24px);
  margin: 4px 12px 6px;
  border: 0;
  border-radius: var(--wx-radius-btn);
  background: var(--wx-white);
  color: var(--wx-ink);
  font: inherit;
  font-size: 16px;
  padding: 12px;
  cursor: pointer;
}
.wx-sheet-cancel:active { background: #f2f3f5; }

/* ---------- 屏 7 复盘笔记：说过的三句 + 那个人的资料 ---------- */

.wx-notes-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  border-bottom: 0.5px solid var(--wx-line-soft);
}
.wx-notes-head .avatar { --avatar-size: 28px; }
.wx-notes-cap {
  font-size: 12.5px;
  color: var(--wx-sub);
}
/* 不标红、不排序、不打勾——这一屏只把话摆出来，对不对得上由玩家自己读 */
.wx-notes-line,
.wx-notes-fact {
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--wx-ink-2);
  border-bottom: 0.5px solid var(--wx-line-soft);
  word-break: break-word;
}
.wx-notes-line:last-child,
.wx-notes-fact:last-child { border-bottom: 0; }
.wx-notes-line::before { content: "「"; }
.wx-notes-line::after  { content: "」"; }

/* 结果页 BETRAYED 两行前面那个小标签：哪句是你说的、哪句是资料上写的 */
.wx-claim-tag {
  flex: 0 0 auto;
  margin-right: 8px;
  font-size: 12px;
  color: var(--wx-sub);
}

/* ---------- 屏 7 对照：两列并排 ---------- */

.wx-cols {
  display: flex;
  gap: 10px;
  padding: 14px 12px 4px;
  align-items: flex-start;
}
.wx-col {
  flex: 1 1 0;
  min-width: 0;
}
.wx-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}
.wx-col-head .avatar { --avatar-size: 34px; }
.wx-col-name {
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-col-cap {
  font-size: 12.5px;
  color: var(--wx-sub);
  padding-bottom: 6px;
}
.wx-col .wx-bubble {
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- 屏 8 场合：分组行 + 勾 ---------- */

.wx-cell--venue { align-items: flex-start; padding: 12px; }
.wx-cell--venue .wx-cell-title { font-size: 16px; }
.wx-cell--venue .wx-cell-sub { white-space: normal; }
.wx-cell--venue.is-picked { background: #f4faf6; }
.wx-tick {
  flex: 0 0 auto;
  color: var(--wx-brand);
  font-size: 17px;
  line-height: 1.3;
}

/* ==========================================================================
   C. 屏 9–11（T4b）：约会直播 / 结果 / 局末战报
   追加段，不改 A/B 两段。仍守「不要」清单：无紫蓝渐变、无大圆角卡片流、
   无居中大标题（结果页的判定词是左对齐的短词，不是居中通栏标题）。
   ========================================================================== */

/* ---------- 屏 9 约会直播：微信群聊 ---------- */

.wx--live { position: relative; }              /* 干预面板贴着它的底边浮起来 */

/* 群聊头：两个方角头像叠一下 + 群名 + 场合，一眼认出是「群」 */
.wx-live-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--wx-white);
  border-bottom: 0.5px solid var(--wx-line);
}
.wx-live-avs { flex: 0 0 auto; display: flex; }
.wx-live-avs .avatar { --avatar-size: 28px; }
.wx-live-avs .avatar + .avatar { margin-left: -9px; box-shadow: 0 0 0 1.5px var(--wx-white); }
.wx-live-head-body { min-width: 0; }
.wx-live-head-name {
  font-size: 14.5px;
  color: var(--wx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-live-head-sub { font-size: 12px; color: var(--wx-sub); margin-top: 1px; }

.wx-body--live { background: var(--wx-bg); }
.wx-live-feed { padding: 10px 14px 16px; }

/* 群里的系统提示（进群那条灰字） */
.wx-live-sys {
  margin: 4px auto 12px;
  padding: 4px 10px;
  max-width: 86%;
  border-radius: 3px;
  background: #d6d8da;
  color: #f6f7f8;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
/* 「时间戳」——红线要求零阿拉伯数字，所以这里是文字挡口 */
.wx-live-time {
  text-align: center;
  font-size: 12px;
  color: var(--wx-sub);
  margin: 12px 0 8px;
}
/* 第二条系统灰条是场合的「事前预告」（这地方考什么、藏得住什么），压得比第一条淡一点 */
.wx-live-sys--probe { margin-top: -8px; background: #dcdfe1; }

.wx-live-row { display: flex; }
.wx-live-bubble {
  max-width: 86%;
  animation: wx-live-in 220ms ease-out;
}
.wx-live-bubble::before { top: 14px; }

/* 考验条目的微信「引用块」：灰底小字，原样引用玩家写过的那句说辞。
   兑现与露馅刻意不做颜色区分——不给系统提示，让玩家自己从演出里读出来。 */
.wx-live-quote {
  margin: -2px -2px 8px;
  padding: 6px 8px;
  border-radius: 3px;
  background: #eceef0;
  border-left: 2px solid #c6cbcf;
  color: var(--wx-sub);
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-word;
}
.wx-live-quote::before { content: "「"; }
.wx-live-quote::after  { content: "」"; }
.wx-live-say { font-size: 15.5px; line-height: 1.55; word-break: break-word; }
@keyframes wx-live-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.wx-foot--live { min-height: 62px; display: flex; align-items: center; }
.wx-foot--live .wx-foot-hint { flex: 1 1 auto; padding: 0; }

/* ---------- 屏 9 干预面板：微信输入区的形状 ---------- */

.wx-iv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: #f7f7f7;
  border-top: 0.5px solid var(--wx-line);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  animation: wx-iv-up 180ms ease-out;
}
@keyframes wx-iv-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.wx-iv-title {
  font-size: 13px;
  color: var(--wx-sub);
  padding: 2px 2px 8px;
}
.wx-iv-opts { display: flex; flex-direction: column; gap: 8px; }
/* 长得像微信输入框：白底、细边、左对齐、圆角小 */
.wx-iv-opt {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0.5px solid var(--wx-line);
  border-radius: 5px;
  background: var(--wx-white);
  color: var(--wx-ink-2);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.wx-iv-opt:active { background: #f0f1f2; }
.wx-iv-skip {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--wx-link);
  font: inherit;
  font-size: 14.5px;
  padding: 12px 0 4px;
  cursor: pointer;
}

/* ---------- 屏 10 结果 ---------- */

.wx-body--result { background: var(--wx-bg); }

.wx-result {
  background: var(--wx-white);
  padding: 20px 16px 22px;
  border-bottom: 0.5px solid var(--wx-line);
}
.wx-result-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--wx-ink);
}
.wx-result-title--match     { color: #12904b; }
.wx-result-title--ambiguous { color: #4f6b6b; }
.wx-result-title--cold      { color: #6b7280; }
.wx-result-title--crash     { color: #b3591f; }
.wx-result-title--betrayed  { color: #a33a63; }
.wx-result-title--disaster  { color: #a8322b; }
/* 拒见（LOOP-PLAN §0-2）：连面都没见上。比崩了淡、比冷场沉，一眼看出「这天白费了」 */
.wx-result-title--refused   { color: #8a6a4f; }

.wx-result-faces {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 4px;
}
.wx-result-face { text-align: center; }
.wx-result-face .avatar { --avatar-size: 56px; }
.wx-result-face-name { margin-top: 6px; font-size: 13.5px; color: var(--wx-ink-2); }
.wx-result-link { font-size: 19px; line-height: 1; padding-bottom: 20px; }

.wx-result-story {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--wx-ink);
}

/* CRASH 归因补的那一行：点名直播里最后露馅的那句原话 */
.wx-result-claimline {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--wx-ink-2);
}

/* 穿帮的两句原话：引号 + 左侧竖线，看得出是「摘的原文」 */
.wx-kv--claim { display: block; padding: 11px 12px; }
.wx-kv--claim .wx-kv-k {
  display: block;
  color: var(--wx-ink);
  font-size: 15px;
  line-height: 1.6;
  border-left: 2px solid #d9b3c4;
  padding-left: 10px;
}
.wx-kv--claim .wx-kv-k::before { content: "「"; }
.wx-kv--claim .wx-kv-k::after  { content: "」"; }
.wx-result-explain {
  padding: 12px;
  border-top: 0.5px solid var(--wx-line-soft);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--wx-ink-2);
}

.wx-cell--react { cursor: default; }
.wx-cell--react .wx-react-text { font-size: 14.5px; color: var(--wx-ink-2); }

/* ---------- 屏 11 局末战报：竖版长图 ---------- */

.wx-body--report { background: var(--wx-bg); }

/* 朋友圈长图的质感：一整张白纸，直角边、细分隔线，不是圆角卡片流 */
.wx-report {
  background: var(--wx-white);
  padding: 26px 20px 20px;
  border-top: 0.5px solid var(--wx-line);
  border-bottom: 0.5px solid var(--wx-line);
}
/* 数词走汉字（红线：界面不出阿拉伯数字），所以不能按「大号数字」那样排——
   「一」「二」「三」放到 40px 粗体就成了一根横杠，读不出是数。
   这里按一句话排版，只把数词稍微放大加重。 */
.wx-report-headline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wx-ink);
}
.wx-report-hl-label { font-size: 19px; color: var(--wx-ink-2); }
.wx-report-hl-num {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--wx-ink);
  padding: 0 2px;
}
.wx-report-line {
  padding: 16px 0 4px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--wx-ink);
}

.wx-report-block { padding: 14px 0 2px; }
.wx-report-label {
  font-size: 12.5px;
  color: var(--wx-sub);
  letter-spacing: 1px;
  padding-bottom: 5px;
}
.wx-report-who { font-size: 14px; color: var(--wx-ink); padding-bottom: 4px; }
.wx-report-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--wx-ink-2);
  border-left: 2px solid var(--wx-line);
  padding-left: 10px;
}
.wx-report-text--empty { color: var(--wx-sub); }

.wx-report-sub {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 0.5px solid var(--wx-line);
  font-size: 12.5px;
  color: var(--wx-sub);
  letter-spacing: 1px;
}
.wx-report-log { padding-top: 4px; }
.wx-report-log-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 0.5px solid var(--wx-line-soft);
}
.wx-report-day { flex: 0 0 34px; color: var(--wx-sub); }
.wx-report-log-name { flex: 1 1 auto; color: var(--wx-ink); }
.wx-report-log-out { flex: 0 0 auto; color: var(--wx-ink-2); }

.wx-report-ai {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 0.5px solid var(--wx-line-soft);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--wx-sub);
}

/* ==========================================================================
   D. B3：微信克隆布局（底部 tab / 会话列表 / 通讯录索引 / 发现 / 我 / 输入栏）
   追加段，A/B/C 三段一行未改。仍守「不要」清单：
     无紫蓝渐变、无 ≥20px 的大圆角卡片、无 ≥26px 居中大标题、
     tab 栏用 div 不用 <nav>（edge.js 的「不要网页导航栏」探针查的是 nav/header/aside）。
   ========================================================================== */

/* ---------- 线性图标 ---------- */

.wx-ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: block;
}
.wx-ic--nav { width: 23px; height: 23px; }
.wx-ic--in  { width: 27px; height: 27px; }
.wx-ic--tile { width: 26px; height: 26px; }

/* ---------- 底部 tab 栏 ---------- */

/* 微信的 tab 栏：浅灰底、顶上一条 0.5px 细线、四格等宽，
   高 50 之外再加安全区（iPhone 的 home 条不能压在文字上）。 */
.wx-tabbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #f7f7f7;
  border-top: 0.5px solid var(--wx-line);
}
.wx-tab {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: #7a7e83;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0 5px;
  cursor: pointer;
}
.wx-tab.is-on { color: var(--wx-brand); }
.wx-tab:active { opacity: 0.6; }
.wx-tab-label {
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: 0.3px;
}

/* ---------- tab 屏的导航条：标题居中粗一点、右上一个裸加号 ---------- */

.wx-nav--tab .wx-nav-title { font-weight: 600; }
.wx-nav-plus { padding: 6px 10px; color: var(--wx-ink); }

/* ---------- 会话列表 ---------- */

/* 微信的会话行：头像 44、右侧一列时间灰字、分隔线从头像右侧起（A 段已定 left:68px）。
   cell 高 56 = 44 头像 + 上下各 6 的内距。 */
.wx-chat-cell,
.wx-cell--bench { padding: 6px 12px; }
.wx-chat-cell .avatar { --avatar-size: 44px; }
.wx-chat-cell .wx-cell-sub,
.wx-cell--bench .wx-cell-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-cell-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  align-self: flex-start;
  padding-top: 3px;
}
.wx-cell-time {
  font-size: 11.5px;
  color: #b2b2b2;
  white-space: nowrap;
}
.wx-cell-side .wx-badge { font-size: 11px; padding: 2px 6px; }

/* 未读红点：贴在头像右上角那一颗 */
.wx-dot {
  position: absolute;
  left: 44px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fa5151;
  box-shadow: 0 0 0 1.5px var(--wx-white);
}

/* 置顶那条「红娘工作群」：绿底方角群头像 + 淡淡的置顶底色 */
.wx-cell--bench { background: #f7f7f7; }
.wx-cell--bench:active { background: #eff0f2; }
.wx-bench-tile {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--wx-brand);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 工作台群里那面成员头像墙：白底一块，像微信群资料页的「群成员」 */
.wx-bench-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  padding: 14px 12px 12px;
  background: var(--wx-white);
  border-radius: var(--wx-radius-cell);
}
.wx-bench-one { width: 52px; text-align: center; }
.wx-bench-one .avatar { --avatar-size: 44px; margin: 0 auto; }
.wx-bench-name {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--wx-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 通讯录：分组 + 右侧字母索引条 ---------- */

.wx-body--contacts {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-bottom: 0;
}
.wx-contacts {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
/* 分组头：微信那条通栏灰条，不是圆角卡片 */
.wx-index-head {
  padding: 4px 16px;
  background: #ededed;
  font-size: 13px;
  color: #7c7c80;
  letter-spacing: 0.5px;
}
.wx-contacts .wx-group { margin: 0; border-radius: 0; }
.wx-contacts-tail {
  padding: 18px 16px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--wx-sub);
}

/* 索引条：钉在右边，不跟着内容滚 */
.wx-index-rail {
  position: absolute;
  right: 1px;
  top: 6px;
  bottom: 6px;
  width: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.wx-index-key {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--wx-ink-2);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
}
.wx-index-key.is-empty { color: #c9cacc; cursor: default; }
.wx-index-key:active { color: var(--wx-brand); }

/* ---------- 发现：往期战报那几行 ---------- */

.wx-past {
  padding: 10px 12px;
  border-top: 0.5px solid var(--wx-line-soft);
}
.wx-past-head { font-size: 14px; color: var(--wx-ink); }
.wx-past-line {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.wx-past-one { font-size: 12.5px; color: var(--wx-sub); }
.wx-cell.is-disabled { opacity: 0.5; }

/* ---------- 我 ---------- */

.wx-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 16px 20px;
  background: var(--wx-white);
  border-bottom: 0.5px solid var(--wx-line-soft);
}
.wx-me .avatar { --avatar-size: 62px; }
.wx-me-body { min-width: 0; }
.wx-me-name {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.wx-me-id { margin-top: 6px; font-size: 13.5px; color: var(--wx-sub); }

/* 二次确认的半屏（跟出示资料那块同一个形状，主操作是危险色） */
.wx-sheet--ask { max-height: none; }
.wx-sheet--ask .wx-sheet-title { border-bottom: 0; line-height: 1.6; }
.wx-sheet-danger {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: calc(100% - 24px);
  margin: 2px 12px 6px;
  border: 0;
  border-radius: var(--wx-radius-btn);
  background: var(--wx-white);
  color: #d94b3f;
  font: inherit;
  font-size: 16px;
  padding: 12px;
  cursor: pointer;
}
.wx-sheet-danger:active { background: #f2f3f5; }

/* ---------- 屏 thread：持久聊天线 + 提问入口（LOOP-PLAN §0-1 / §2） ---------- */

/* 按天的分隔线。微信的聊天记录就是这样断开的：居中一行淡灰小字，不加线、不加框。
   跟直播里那条「时间戳」同一个形状（那边是同一场约会里的先后，这边是隔天）。 */
.wx-chat-day {
  text-align: center;
  font-size: 12px;
  color: var(--wx-sub);
  margin: 6px 0 12px;
}

/* ---------- 输入法联想候选区（W6-C，§10）---------- */

/* 老板第三条：提问不该是我们自己发明的「问一句」胶囊，而该像真机那样
   ——点白色输入框，键盘顶上冒出一条联想词。所以 .wx-askbar 与半屏 askSheet 都删了，
   换成这条贴在输入栏**上方**的候选区：小块、白底、细灰边、横着排。 */
.wx-ime {
  flex: 0 0 auto;
  background: #f7f7f7;
  border-top: 0.5px solid var(--wx-line);
  padding: 7px 8px 5px;
}
.wx-ime-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wx-ime-opt {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border: 0.5px solid #d8d8d8;
  border-radius: 4px;
  background: #ffffff;
  color: var(--wx-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-ime-opt:active { background: #ececec; }
/* 额度用尽：候选全灰（点了只回那句「再问下去要惹人烦了」）。
   藏起来玩家会以为是自己看错，灰着才说明「这条路是有上限的」。 */
.wx-ime-opt.is-disabled { color: #b0b3b8; border-color: #e6e6e6; }
.wx-ime-left {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--wx-sub);
}
.wx-ime.is-off .wx-ime-left { color: #9aa0a6; }

/* 名片页备注里「问出来的」那几条：跟约会观察同一个形状，前面加个引号提示这是听来的话 */
.wx-notes-fact--learned { color: var(--wx-ink); }

/* ---------- 单聊底部的装饰输入栏 ---------- */

/* 顺序照微信来：语音键 / 输入框 / 表情 / 加号，回答区（胶囊面板）从它底下顶上来。
   W6-C：外面多套一层 .wx-indock —— 输入法联想候选区插在它和输入栏之间，
   于是候选区永远在输入栏正上方（真机键盘顶上那一条就是这个位置）。 */
.wx-indock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.wx-inputbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: #f7f7f7;
  border-top: 0.5px solid var(--wx-line);
}
.wx-in-key {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #4a4d52;
  padding: 2px;
  cursor: pointer;
}
.wx-in-key:active { opacity: 0.5; }
/* W6-C：这一格从装饰 div 变成真能点的按钮（点它 = 唤起输入法联想候选区），
   长相一个像素都没变。 */
.wx-in-field {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  border-radius: 5px;
  background: var(--wx-white);
  border: 0.5px solid #e2e2e2;
  font: inherit;
  cursor: pointer;
}

/* ---------- 战报：最响的一次露馅 ---------- */

.wx-report-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wx-ink);
  border-left: 2px solid #d9b3c4;
  padding-left: 10px;
  margin-bottom: 6px;
}
.wx-report-quote::before { content: "「"; }
.wx-report-quote::after  { content: "」"; }

/* ---------- 四个 tab 屏：通栏白块 ---------- */

/* 微信的列表是满宽的白条，靠灰缝分组，不是 iOS 设置那种带边距的圆角卡。
   只在 .wx--tab 里翻这一条，屏 4–11 的分组样式一格没动。 */
.wx--tab .wx-group {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
.wx--tab .wx-body > .wx-group:first-child { margin-top: 0; }
.wx--tab .wx-group + .wx-group { margin-top: 8px; }
.wx-body--chats { background: var(--wx-white); }
.wx-body--chats > .wx-group { margin-top: 0; }
.wx--tab .wx-notice + .wx-group { margin-top: 8px; }

/* 通讯录：右边留出索引条的宽度，别让徽标压到字母上 */
.wx-contacts { padding-right: 18px; }

/* ==========================================================================
   E. M2：红点引导链 / 每屏可退 / 工作群的小程序卡片
   追加段，A–D 四段一行未改。仍守「不要」清单：
     无紫蓝渐变、无 ≥20px 的大圆角卡片、无 ≥26px 居中大标题。
   红点一律不写数字（app 内零阿拉伯数字），数字只落在桌面图标的角标上（外壳那边）。
   ========================================================================== */

/* ---------- 返回键：「‹ + 上一级的名字」 ---------- */

/* 微信的返回是一个字号偏小的名字跟在尖括号后面。左侧那一格平时是 68px 定宽
   （跟右侧对称，标题才居中），挂了名字就放开成自适应、最多占四成二，
   名字太长省略号截断——不许把标题挤出去，更不许撑出横向滚动。 */
.wx-nav-left--label { flex: 0 1 auto; min-width: 68px; max-width: 42%; }
.wx-nav-back { min-width: 0; }
.wx-nav-back-label {
  font-size: 15px;
  color: var(--wx-ink);
  margin-left: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 未读红点 ---------- */

/* 会话行那颗贴在头像右上角（.wx-dot 在 D 段已定），这里补 tab 栏那颗与
   分组行（发现 › 本周战报）那颗的位置。 */
.wx-tab { position: relative; }
.wx-dot--tab {
  left: auto;
  right: 26%;
  top: 5px;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 1.5px #f7f7f7;
}
/* 没有头像的行（发现里那几格用的是 emoji 方块）：红点贴在方块右上角 */
.wx-cell .wx-cell-emoji + .wx-dot,
.wx-cell--date .wx-dot { left: 44px; }
.wx-cell.is-unread .wx-cell-title { font-weight: 500; }

/* ---------- 约会群的群头像：两张头像叠一下 ---------- */

/* 行高与工作群那条、客户会话那几条对齐（44 头像 + 上下各 6） */
.wx-cell--date { padding: 6px 12px; background: #f7f7f7; }
.wx-cell--date:active { background: #eff0f2; }
.wx-cell--date .wx-cell-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wx-date-tile {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: #dfe2e4;
  overflow: hidden;
}
.wx-date-tile .avatar {
  --avatar-size: 26px;
  position: absolute;
}
.wx-date-tile .avatar:first-child { left: 1px; top: 1px; }
.wx-date-tile .avatar:last-child { right: 1px; bottom: 1px; }

/* ---------- 工作群里的小程序卡片 ---------- */

/* 微信派活就是发一张小程序卡片：白卡、左对齐、底下一行带图标的小字。
   它是这一屏唯一的主交互，所以留足 44px 以上的可点高度；
   两张并排时（看笔记 / 选场合）仍旧一张一行，390 宽下不挤。 */
.wx-mini {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 78%;
  margin: 10px 0 2px;
  border: 0.5px solid var(--wx-line);
  border-radius: var(--wx-radius-cell);
  background: var(--wx-white);
  color: var(--wx-ink);
  font: inherit;
  text-align: left;
  padding: 12px 14px 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.wx-mini:active { background: #f2f3f5; }
.wx-mini-title {
  font-size: 16px;
  line-height: 1.4;
  color: var(--wx-ink);
}
.wx-mini-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 0.5px solid var(--wx-line-soft);
  font-size: 11.5px;
  color: var(--wx-sub);
}
.wx-mini-ic { width: 13px; height: 13px; }

/* ---------- 详情页里那条「约会之后他发来的消息」 ---------- */

.wx-chat--react {
  background: var(--wx-white);
  border-bottom: 0.5px solid var(--wx-line-soft);
  padding-bottom: 10px;
}

/* ---------- 结果页 / 拒见页底部的「事后回访」（R3；js/recap.js 只挂类名） ----------

   R3 之前这儿是三行因果旁白（你说 → 这地方放大了什么 → 发生了什么），
   老板说复盘也该是对话，于是整块改成一段聊天摘录：红娘绿气泡在右、当事人白气泡在左、
   左侧带头像和名字。观感沿用聊天窗那一套（.wx-chat-row / .wx-bubble），
   只是缩了一号 —— 它是嵌在结果卡下面的一块摘录，不是一整屏聊天。
   `.wx-recap-row / -label / -text` 那三个选择器随旧模板一起删掉了（没人再发出它们）。 */
.wx-recap {
  margin: 12px 16px 0;
  padding: 12px 14px 14px;
  background: var(--wx-white);
  border-radius: var(--wx-radius-cell);
}
.wx-recap-title {
  font-size: 12.5px;
  color: var(--wx-sub);
  letter-spacing: 1px;
  padding-bottom: 8px;
}

/* 摘录本体：白卡里再垫一层微信页面底色，白气泡才显出来（白底白气泡等于没有气泡） */
.wx-recap--chat {
  padding: 12px 10px 6px;
  background: var(--wx-bg);
}
.wx-recap--chat .wx-recap-title { padding: 0 4px 10px; }

.wx-recap-turn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 10px;
}
.wx-recap-turn--out { justify-content: flex-end; }
/* R4c：v2 起一个人常连着发三四条（情绪拍 → 转述两条 → 场合拍）。
   同一段里的后几条挨紧一点，读起来才是「连发」而不是「各说各的」；
   名字那一行只有段首才有，所以这里只需要把行距收掉一点。 */
.wx-recap-turn--cont { margin-top: -5px; }

.wx-recap-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
/* 聊天窗里的头像是 32px 一格；这块摘录缩到 28，所以把里面那张按比例压一下 */
.wx-recap-avatar .avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.wx-recap-msg { max-width: 80%; }
.wx-recap-turn--out .wx-recap-msg { display: flex; justify-content: flex-end; }

.wx-recap-who {
  font-size: 11px;
  color: var(--wx-sub);
  padding: 0 2px 3px;
}

.wx-recap-bubble {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  border-radius: var(--wx-radius-bubble);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.wx-recap-bubble--in {
  background: var(--wx-white);
  color: var(--wx-ink);
}
.wx-recap-bubble--out {
  background: var(--wx-green);
  color: #17301a;
}
/* 气泡小尖角（同聊天窗，按 14px 字号收了一号） */
.wx-recap-bubble--in::before,
.wx-recap-bubble--out::before {
  content: "";
  position: absolute;
  top: 11px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}
.wx-recap-bubble--in::before {
  left: -7px;
  border-right-color: var(--wx-white);
}
.wx-recap-bubble--out::before {
  right: -7px;
  border-left-color: var(--wx-green);
}

/* ==========================================================================
   F. W3：名片页 / 朋友圈 / 打听来的转述 / 证据小卡（WECHAT-PLAN §0）
   追加段，A–E 五段除「撤掉已经没人用的 .wx-profile*」之外一行未改。
   仍守「不要」清单：无紫蓝渐变、无 ≥20px 大圆角卡片、无 ≥26px 居中大标题；
   白底分组 + 灰缝 + 灰分隔线，宽度按 375 起算（三张缩略图那一行也不例外）。
   ========================================================================== */

/* ---------- 名片页 ---------- */

.wx-body--card { background: var(--wx-bg); }

/* 头部（W5 §8 B-1，照真机）：方头像在左，右边竖排三行 ——
   名字 + 性别小人 / 微信号 / 地区。昵称行与个性签名都不在这一页了。 */
.wx-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 16px 18px;
  background: var(--wx-white);
}
.wx-card-head .avatar { --avatar-size: 66px; }
.wx-card-id { min-width: 0; flex: 1 1 auto; padding-top: 2px; }
.wx-card-namerow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.wx-card-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 性别小人：真机是个填色剪影，女橙男蓝 */
.wx-card-gender { flex: 0 0 auto; display: flex; align-items: center; }
.wx-card-gender--f { color: #ef8a5c; }
.wx-card-gender--m { color: #5b9bd5; }
.wx-ic--gender { width: 19px; height: 19px; }

.wx-card-wxrow,
.wx-card-region {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--wx-sub);
  word-break: break-all;
}
/* 微信号那一格：零英文红线唯一的豁免（§8 B-4）。字距紧一点，像真的 id。 */
.wx-card-wxid { letter-spacing: 0.1px; }

/* 朋友圈那一行：右侧四张方缩略图，再右边才是「›」 */
.wx-cell--moments .wx-cell-title { font-size: 16px; }
.wx-card-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
  margin-left: 8px;
}
/* 真机那四张缩略是横的（约 4:3），不是正方 —— 照着量出来的比例走 */
.wx-mo-thumb {
  width: 50px;
  height: 44px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--wx-tag-bg);
}
.wx-mo-thumb > svg { display: block; width: 100%; height: 100%; }

/* 备注和标签：那一行下面直接铺备注内容，行与行之间要有条灰缝 */
.wx-card-tagrow { border-bottom: 0.5px solid var(--wx-line-soft); }
.wx-card-tagrow:last-child { border-bottom: 0; }
.wx-card-hint {
  padding: 10px 12px 11px;
  font-size: 13px;
  color: var(--wx-sub);
  border-top: 0.5px solid var(--wx-line-soft);
}
.wx-card-asked .wx-tag { background: #f4f0e8; color: #86663a; }

/* ---------- 朋友圈屏 ---------- */

.wx-body--moments { background: var(--wx-white); }

/* 封面（W5 §8 C-1）：一张全出血的大图，约屏高四成 —— 真机就是这么高一张。
   导航是压在它上面的透明浮层，所以封面从屏顶开始，body 不留上边距。 */
.wx-mo-cover {
  position: relative;
  height: 340px;
  background: #dfe3e5;
  overflow: visible;
}
.wx-mo-cover-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wx-mo-cover-img > svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 昵称白字加粗在左、方头像在右，头像悬挂在封面下缘（一半压图一半出图） */
.wx-mo-cover-name {
  position: absolute;
  right: 92px;
  bottom: 22px;
  max-width: calc(100% - 108px);
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-mo-cover-av {
  position: absolute;
  right: 14px;
  bottom: -22px;
  line-height: 0;
}
.wx-mo-cover-av .avatar {
  --avatar-size: 62px;
  box-shadow: 0 0 0 2px var(--wx-white);
}
/* 个性签名：头像正下方一行灰字，跟头像一样靠右（W5 §8 C-2） */
.wx-mo-sig {
  margin: 32px 16px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--wx-sub);
  text-align: right;
  word-break: break-word;
}

/* ---------- 相册式两栏（W5 §8 C-3）---------- */

/* 左栏一个大字日期标签（一档只在头一条上出现），右栏一张紧凑卡。 */
.wx-mo-feed { padding: 20px 0 24px; }
.wx-mo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 16px 16px;
}
.wx-mo-date {
  flex: 0 0 68px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wx-ink);
  padding-top: 2px;
  word-break: break-word;
}
/* 紧凑卡：有图 = 左缩略 + 右两行截断文字（无底色）；纯文字 = 一整块灰底。 */
/* W6-A：卡本身不再可点（点了什么都不展开），所以它是个 div 不是 button —— 
   能点的只有缩略图（看大图）与那颗「全文」。*/
.wx-mo-brief {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wx-mo-brief--text {
  background: #f7f7f7;
  padding: 12px 12px;
}
.wx-mo-brief-pic {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--wx-tag-bg);
}
.wx-mo-brief-pic > svg,
.wx-mo-brief-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wx-mo-brief-body { flex: 1 1 auto; min-width: 0; }
/* W6-A：正文截到两行；装不下时（由 momentsClampPass 量出来）底下挂一颗蓝字「全文」。
   两种卡同一个上限 —— 真机朋友圈的相册紧凑卡也是缩略图旁边两行字。
   **为什么是两行不是三行**（§10 规格写的是「超过三行」）：这一栏只有 202px 宽，
   一行装得下十三个汉字，而全库 595 条动态最长 36 字 —— 三行装得下全部，
   「全文」就成了永远出不来的死功能。实测见 W6 交付。 */
.wx-mo-brief-text {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--wx-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.wx-mo-brief-text.is-full {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
/* 「全文 / 收起」：微信蓝的纯文字切换，不是按钮长相（真机就是一行蓝字） */
.wx-mo-more {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin-top: 2px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #576b95;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}
.wx-mo-more.is-off { display: none; }

/* ---------- 工作群里打听来的转述 ---------- */

/* 转述前面那条灰系统条紧跟在头像墙后面。.wx-live-sys--probe 自带 -8px 的负上边距
   （那是为了让连着的两条灰条贴紧），落在头像墙后面就会压进白卡里，这儿收掉。 */
.wx-bench-wall + .wx-live-sys--probe { margin-top: 12px; }

/* 群里的一条白气泡：名字在上、气泡在下（微信群消息就是这个形状）。
   说话的是「共同朋友」——池子里没有这个人，所以只摆名字不摆头像。 */
.wx-bench-say {
  margin: 0 0 10px;
  max-width: 84%;
}
.wx-bench-say-who {
  font-size: 12px;
  color: var(--wx-sub);
  padding: 0 2px 3px;
}
.wx-bench-say-text {
  display: inline-block;
  padding: 9px 11px;
  background: var(--wx-white);
  border-radius: var(--wx-radius-bubble);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wx-ink);
  word-break: break-word;
}

/* ---------- 证据面板里的朋友圈小卡 + 引用气泡的缩略图 ---------- */

.wx-fact--card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wx-fact-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wx-tag-bg);
}
.wx-fact-thumb > svg { display: block; width: 100%; height: 100%; }
.wx-fact-text { flex: 1 1 auto; min-width: 0; }

.wx-quote-thumb {
  width: 84px;
  height: 84px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.55);
}
.wx-quote-thumb > svg { display: block; width: 100%; height: 100%; }

/* ---------- 真图（X4，ASSETS-PLAN §3：assets/ 里的真照片；SVG 生成器仍是回退） ---------- */

/* 五个配图盒子（朋友圈正文 / 封面 / 名片页缩略 / 证据卡 / 引用气泡）尺寸都由盒子自己给，
   照片一律填满并裁掉多余 —— 跟 SVG 那边 preserveAspectRatio="slice" 是同一件事。
   方盒子（缩略图）于是天然就是「CSS 裁方」，不必为缩略另存一套文件。 */
.wx-pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 真图可以点开看大图，按下去暗一档给个反馈（SVG 那一路不挂点击，也就没有这个态） */
.wx-mo-brief-pic.is-photo,
.wx-fact-thumb.is-photo,
.wx-quote-thumb.is-photo { cursor: pointer; }
.wx-mo-brief-pic.is-photo:active > .wx-pic,
.wx-fact-thumb.is-photo:active > .wx-pic,
.wx-quote-thumb.is-photo:active > .wx-pic { opacity: 0.82; }

/* 全屏看大图：黑底、图居中、点任意处关掉。
   z-index 要压过 .wx-sheet-wrap 的 30（在证据面板里点开的图得盖在面板上面）。 */
.wx-viewer {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 表情包：独立一行、没有白气泡框、最高 120px（微信的表情消息就长这样） */
.wx-chat-row--sticker { margin-bottom: 14px; }
.wx-sticker {
  display: block;
  max-width: 60%;
  max-height: 120px;
  border-radius: 3px;
}

/* ---------- 可点的导航条抬头（点人名进名片页） ---------- */

.wx-nav-title--tap {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.wx-nav-title--tap:active { opacity: 0.5; }

/* ==========================================================================
   R2. 全局重点标注（js/hl.js）
   ==========================================================================
   老板要的是「减少阅读负担」，不是让界面变花。所以这四类只做两件事：
   加粗一档 + 换个色相。没有底色、没有下划线、字号一个像素都不动 ——
   底色和下划线会把段落切碎，那是比纯文字更重的阅读负担。
   色相避开紫与蓝紫：微信里那两个色位是「链接 / 已访问」，占用它们会读成可点。
   一条消息最多三处（上限在 js/hl.js 里，不是靠样式收敛）。 */

.hl {
  font-weight: 600;
  font-style: normal;
}
/* 六维名与定性词 —— 玩家做决策唯一要读的那类信号，给它最亮的那个色位 */
.hl-dim   { color: #c8730a; }
/* 人名与昵称 —— 微信自己的链接蓝（联系人在微信里就是这个颜色） */
.hl-name  { color: #576b95; }
/* 场合名 —— 微信品牌绿压暗一档；#07c160 直接压在白底上太跳 */
.hl-venue { color: #0a8f4d; }
/* 结局与那几个要命的词（底线 / 穿帮 / 露馅…）—— 红棕，不用正红 */
.hl-key   { color: #b45050; }

/* 绿气泡里一个字都不会标（自己说的话自己知道，见 js/app.js 的 chatRow），
   这一条只是兜底：万一哪天有人在 out 气泡里塞了高亮，也别让它糊在绿底上。 */
.wx-bubble--out .hl { color: inherit; font-weight: inherit; }

/* ---------- 「我 › 设置」里的开关（iOS / 微信那颗胶囊） ---------- */

.wx-switch {
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #e4e4e6;
  position: relative;
  transition: background 0.18s ease;
}
.wx-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease;
}
.wx-switch.is-on { background: var(--wx-brand); }
.wx-switch.is-on::after { transform: translateX(18px); }

/* ==========================================================================
   G. W5：对齐真机微信（WECHAT-PLAN §8）
   老板给了三张真机截图（聊天窗 / 名片页 / 朋友圈），这一段是照着它们收的口。
   A–F 六段里只动了四处（都在原地标了 W5）：绿气泡那侧的头像不再藏、
   引用气泡的空占位撤掉、气泡正文改纯黑、名片页头部与朋友圈相册重排。
   仍守「不要」清单：无紫蓝渐变、无 ≥20px 大圆角卡片流、无网页导航栏。
   ========================================================================== */

/* ---------- 导航条：透明浮层（朋友圈相册顶上那条） ---------- */

/* 真机的个人相册页没有标题栏 —— 一颗白「‹」直接压在封面图上。
   做法是把 nav 抬成绝对定位的浮层，body 从屏顶开始铺（封面就是第一块）。 */
.wx--ghostnav { position: relative; }
.wx-nav--ghost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  background: transparent;
  border-bottom: 0;
  color: #ffffff;
}
.wx-nav--ghost .wx-nav-btn { color: #ffffff; }
.wx-nav--ghost .wx-chev {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
/* 浮层导航之下的那一屏自己顶到最上面 */
.wx--ghostnav .wx-body { padding-top: 0; }

/* ---------- 导航条右上那颗「···」 ---------- */

.wx-nav-dots { padding: 6px 10px; color: var(--wx-ink); }
.wx-nav-dots .wx-ic--nav { width: 22px; height: 22px; }

/* ---------- 名片页：行组与底部两条蓝字行 ---------- */

/* 「备注和标签」「打听来的」这两行是**组的抬头**：白底一整行、不带「›」，
   底下直接铺内容。跟可点的行区分开靠的是它没有 chevron，不是另一种底色。 */
.wx-cell--notes { font-weight: 400; }
.wx-cell--ask.is-disabled .wx-cell-title { color: var(--wx-sub); }

/* 备注内容铺在「备注和标签」那一行底下时，小抬头（问出来的 / 约会里看出来的）
   落在白块**里面**，所以在这儿把组标题那套灰缝样式压掉，只当一行小灰字。 */
.wx-group > .wx-group-title {
  padding: 12px 12px 2px;
  margin: 0;
  background: transparent;
}

/* 底部两条：灰底间隔之后的白色整行，居中蓝字 + 小图标（真机就是这个形状，
   不是填色按钮）。「安排约会」那颗主按钮 W5 撤了 —— 它走工作群的小程序卡片。 */
.wx-card-acts { overflow: hidden; }
.wx-card-act {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--wx-link);
  font: inherit;
  font-size: 16.5px;
  padding: 14px 12px;
  cursor: pointer;
}
.wx-card-act + .wx-card-act { border-top: 0.5px solid var(--wx-line-soft); }
.wx-card-act:active { background: #f2f3f5; }
.wx-ic--act { width: 21px; height: 21px; }

/* ---------- 聊天窗输入栏：贴一贴真机的尺寸 ---------- */

/* 真机：左边一颗描边圆的语音键、中间白色圆角输入框、右边表情脸 + ⊕，
   三颗键的直径与输入框的高度都比原来大一圈。 */
.wx-inputbar { gap: 10px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); }
.wx-ic--in { width: 29px; height: 29px; }
.wx-in-field { height: 38px; border-radius: 6px; }

/* ---------- 名片页整体：满宽白块 + 灰缝（真机不是 iOS 那种带边距的圆角卡） ---------- */

.wx-body--card > .wx-group {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
.wx-body--card > .wx-group:first-child,
.wx-body--card > .wx-group + .wx-group { margin-top: 9px; }
/* 头部白块与第一组之间是一条细分线，不是灰缝（真机就是紧贴着的） */
.wx-card-head + .wx-group { margin-top: 0 !important; }
.wx-card-head + .wx-group::before {
  content: "";
  display: block;
  height: 0.5px;
  margin-left: 16px;
  background: var(--wx-line-soft);
}
/* 名片页的行没有头像，分隔线就从左边距起（68px 那个内缩是给带头像的会话行的） */
.wx-body--card .wx-cell + .wx-cell::before { left: 16px; }
.wx-body--card .wx-cell { padding: 13px 16px; }
.wx-body--card .wx-cell-title { font-size: 17px; }
.wx-body--card .wx-card-tagrow,
.wx-body--card .wx-notes-fact { padding-left: 16px; padding-right: 16px; }
/* 「备注和标签」那一行与它底下铺开的备注之间要有条线 */
.wx-cell--notes + * { border-top: 0.5px solid var(--wx-line-soft); }

/* 名片页的抬头栏在真机上是**白的**，跟底下那块白头部连成一片（没有灰底、没有分割线）。
   本来那条灰底 + 细线是列表屏的样式，压在白头部上面会多出一道缝。 */
.wx--card .wx-nav {
  background: var(--wx-white);
  border-bottom: 0;
}
/* 「对你的态度」那一行现在落在「备注和标签」那个白块里面了，
   原来那点浅灰底（列表屏上用来跟白单元区分）在这儿反而像块补丁，去掉。 */
.wx-body--card .wx-kv--trust { background: transparent; }