/* ============================================================================
   回复客户话术 · 结果区 = 「微信聊天对话框」
   ----------------------------------------------------------------------------
   用户原话：「你用微信里那种对话框的颜色…你生成的时候可以生成个刚好就是手机的
   对话框啊，微信聊天对话框，然后里面的颜色也是微信聊天那种颜色，这样视觉上
   看起来有感觉。」

   改法（全部在本文件，作用域严格限制在 #repResult 内）：
     ① 结果区整体 = 一个微信聊天窗口（灰底 #EDEDED + 顶部导航栏 + 底部输入栏）
     ② 要发出去的话 = 微信绿气泡 #95EC69 + 黑字（右对齐，带右上小尾巴）
     ③ 头像 / 标签 / 复制按钮 / 批注 → 全部换成微信那套中性色
     ④ 不碰 reply.css、不碰 reply.js（那是同事的文件，且随时会被改）

   ⚠️ 加载顺序：本文件必须排在 reply.css 之后（同特异性覆盖，后加载者胜）。
   ⚠️ 尺寸铁律：容器 position:relative + overflow:hidden，装饰件一律不许撑宽 document。
   ========================================================================== */

/* ---------- ① 微信聊天窗口 ---------- */

#repResult {
  position: relative;
  padding: 58px 12px 62px;          /* 上面给导航栏、下面给输入栏留位 */
  border: 1px solid #dedede;
  border-radius: 18px;
  background: #ededed;              /* 微信聊天页底色 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -20px rgba(0, 0, 0, .32);
  overflow: hidden;
  /* 滚动到结果区时，别让页面的固定顶栏压住聊天窗口的导航栏 */
  scroll-margin-top: 120px;
}
#repResultCard { scroll-margin-top: 120px; }

/* 顶部导航栏（左侧返回箭头 + 中间联系人 + 右侧更多，两个小图标用 SVG 内联画） */
#repResult::before {
  content: '客户';
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15.5px; font-weight: 600; color: #111; letter-spacing: .5px;
  background-color: #f7f7f7;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21'%3E%3Cpath d='M10.5 1.5 2 10.5l8.5 9' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23333'/%3E%3Ccircle cx='12' cy='3' r='2' fill='%23333'/%3E%3Ccircle cx='21' cy='3' r='2' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 15px center, right 15px center;
  background-size: 11px 19px, 22px 6px;
  border-bottom: 1px solid #e3e3e3;
}

/* 底部输入栏（微信那个白色圆角输入框） */
#repResult::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  background-color: #f7f7f7;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Crect x='1' y='1' width='298' height='32' rx='9' fill='%23ffffff' stroke='%23e2e2e2' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 32px) 34px;
  border-top: 1px solid #e3e3e3;
}

/* ---------- ② 要发出去的话 = 微信绿气泡 ---------- */

#repResult .rep-bub.me {
  position: relative;
  max-width: 84%;
  background: #95ec69;              /* 微信自己发的绿 */
  color: #111;                      /* 微信气泡内是黑字，不是白字 */
  border-radius: 5px 2px 5px 5px;   /* 右上角收小 = 尾巴那一侧 */
  padding: 10px 13px;
  font-size: 14.5px; line-height: 1.62;
  box-shadow: none;
}
/* 气泡尾巴（纯 CSS，clip-path 画，不留任何位图资源） */
#repResult .rep-bub.me::after {
  content: '';
  position: absolute; top: 1px; right: -7px;
  width: 9px; height: 9px;
  background: #95ec69;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}

/* 头像：微信是圆角方块，且不抢色 */
#repResult .rep-av.me {
  background: #dfe2e6; color: #697586;
  border-radius: 5px;
  box-shadow: none;
}

/* ---------- ③ 「主推 / 备选」标签 = 微信的系统提示小胶囊 ---------- */

#repResult .rep-pick-t {
  display: block;
  width: fit-content;
  margin: 2px auto 10px;
  background: #d6d6d6; color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
  padding: 3px 10px; border-radius: 5px;
  box-shadow: none;
}
#repResult .rep-pick.main .rep-pick-t {
  background: #95ec69; color: #14532d;
  font-weight: 800;
}

/* ---------- ④ 复制按钮（微信的链接蓝）+ 批注 ---------- */

#repResult .rep-acts { padding-right: 39px; }   /* 与气泡右边缘对齐（头像 30 + 间距 9） */
#repResult .rep-copy {
  background: #fff; color: #576b95;               /* 微信蓝 */
  border: 1px solid #dcdcdc; border-radius: 8px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600;
}
#repResult .rep-copy:hover { background: #f2f2f2; border-color: #cfcfcf; }
#repResult .rep-copy.ok { background: #95ec69; border-color: #86e05a; color: #14532d; }

#repResult .rep-why {
  background: rgba(255, 255, 255, .8);
  border-left: 3px solid #95ec69;
  border-radius: 3px 10px 10px 3px;
  color: #6b6b6b;
  padding: 9px 12px; margin-top: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* ---------- ⑤ 灰底上的其它区块 → 白色「卡片消息」 ---------- */

#repResult .rep-sec-h {
  background: #fff;
  border-bottom: none;
  border-radius: 10px;
  padding: 9px 12px;
  margin: 14px 0 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
#repResult .rep-sec-h:first-child { margin-top: 0; }

#repResult .rep-case {
  background: #fff; border: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
#repResult .rep-case-tx { background: #f2f2f2; }

#repResult .rep-msay { background: #fff; color: #6b6b6b; }
#repResult .rep-mreal { background: #f0fbe6; color: #1d6b2f; }
#repResult .rep-marrow { color: #b9b9b9; }
#repResult .rep-mtail { background: rgba(255, 255, 255, .8); color: #5f6368; }

#repResult .rep-push-row { border-bottom-color: #dedede; }
#repResult .rep-push-k { color: #1d6b2f; }

#repResult .rep-lint {
  background: #fffdf3; border: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

#repResult .rep-loading,
#repResult .rep-err {
  background: #fff; border-radius: 12px;
  padding: 16px 14px; margin: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* ---------- ⑥ 窄屏收紧 ---------- */

@media (max-width: 400px) {
  #repResult { padding: 54px 10px 58px; border-radius: 16px; }
  #repResult::before { height: 44px; }
  #repResult::after { height: 50px; }
  #repResult .rep-bub.me { font-size: 14px; }
  #repResult .rep-acts { padding-right: 37px; }
}

/* ---------- ⑦ 修「别踩的坑」被压成一条（2026-09-19 用户报"残次品"）----------
   reply.css 把 .rep-av 这个类名写了两遍：
     ① 头像  ——  width/height 30px + flex 居中
     ② 避坑卡 —— border + radius + overflow
   两段都命中避坑卡，于是它被第一条的 width:30px 钉死 → 内容竖着挤成一列。
   （父级 flex 的 align-items:stretch 只在子项 width:auto 时才拉伸，所以救不回来。）
   这里用更高特异性（id + 两个 class）只把**避坑卡**还原成整宽，不动他的文件。 */
#repResult .rep-avoid .rep-av {
  display: block;
  width: auto; height: auto;
  align-items: stretch; justify-content: flex-start;
  border-radius: 12px;
  font-size: 13px; font-weight: 400;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}