/* ============================================================
 * 小逸 在线客服系统 - 群聊「评价客服」弹窗皮肤
 *
 * 背景（2026-10-24）：
 *   老板给了一张参考图（豆包生成的），写着
 *     「您对「螃蟹交付专员-海神」的服务满意吗」
 *   下面 5 个黄色表情 + 5 个文字标签，要求把**群聊里**的评价弹窗改成那样。
 *
 * 改造对象：
 *   Vue 组件 Pxb7Group（页面 /pxb7-group）里的底部弹窗。
 *   DOM：.appraise-overlay（遮罩）+ .appraise.XE-pangxiebg（卡片）
 *   五个选项：.emoji > button > img + p
 *
 * 为什么只写 CSS、不改大包：
 *   1) 大包是 2.9MB 的编译产物，字符串替换风险太高；
 *   2) 五个选项是数据驱动（De(it, ...)），要改结构等于要重建前端构建产物；
 *   3) 原样式在 /assets/index.css 里，带 [data-v-75c8c425] 作用域，本文件后加载即可覆盖。
 *
 * ⚠️ 两条铁律（见交付文档 §四十）：
 *   1) **绝不 replace / remove 弹窗里 Vue 创建的 img / button / p / h2**。
 *      Vue 记着 vnode.el 引用，一旦替换，之后选中某档时它会把新 src 写到
 *      那个已经脱离文档的节点上 —— 界面上「选中变黄」就静默失效了。
 *      所以这里只是把 Vue 的 <img> 藏起来（display:none，节点保留），
 *      改用 button 自己的 background-image 显示黄脸。
 *   2) 选择器全部带 [data-v-75c8c425]。这个作用域 id 只属于 Pxb7Group，
 *      而 .appraise / .emoji 这些类名在 Pz2025 / Pz2026 / PzdsGroup 里都有重名。
 *      入口 JS 里还有一道 pathname 守卫，双保险。
 *
 * 不碰的东西：rt（选中等级 1..5）、Pt()（提交函数）、.sbu 的 onClick、选项顺序。
 * ============================================================ */

/* ---------- 1. 卡片本体：白底 + 顶部浅黄渐变 ---------- */
.appraise[data-v-75c8c425] {
  /* 原来是固定 height:225px，内容一多就挤；改成按内容撑开 */
  height: auto !important;
  min-height: 268px;
  padding: 0 0 4px;
  border-radius: 26px 26px 0 0 !important;
  /* 覆盖 .XE-pangxiebg 那张背景图（pxb7-appraise-bg.png），换成参考图的浅黄渐变 */
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff8ec 0%, #fffdf8 40%, #ffffff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: 0 -10px 34px rgba(60, 32, 4, .14) !important;
  overflow: hidden;
}

/* ---------- 2. 遮罩：稍微压深一点，卡片更跳 ---------- */
.appraise-overlay[data-v-75c8c425] {
  background-color: rgba(0, 0, 0, .52) !important;
  backdrop-filter: blur(2px);
}

/* ---------- 3. 关闭按钮 ---------- */
.appraise-close-btn[data-v-75c8c425] {
  top: 12px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .045) !important;
}
.close-icon[data-v-75c8c425] {
  width: 15px !important;
  height: 15px !important;
  opacity: .55;
}

/* ---------- 4. 标题 ---------- */
.appraise[data-v-75c8c425] h2 {
  margin: 22px auto 4px !important;
  /* 字号随屏宽走：窄屏要放得下一整行「您对「…」的服务满意吗」，
     定死 17.5px 在 375 宽上会折行，很难看。
     4.05vw 是按「一行约 20 个中文字 + 左右各 34px 留白」反推出来的。 */
  font-size: clamp(13.5px, 4.05vw, 17.5px) !important;
  font-weight: 700 !important;
  color: #2b2118 !important;
  letter-spacing: -.2px;
  text-align: center;
  line-height: 1.45;
  padding: 0 34px;   /* 给右上角关闭按钮让位，长名字也不顶到边 */
}

/* ---------- 5. 五个表情 ---------- */
.emoji[data-v-75c8c425] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 92% !important;
  margin: 18px auto 0 !important;
}
.emoji[data-v-75c8c425] button[data-v-75c8c425] {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  margin: 0 !important;
  height: auto !important;
  align-items: center;
  justify-content: flex-start;
  /* 黄脸用背景图画，静止态就是黄脸（参考图里五个都是黄的） */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 52px 52px !important;
  padding: 56px 0 0 0;
  transition: transform .18s ease, filter .18s ease;
}
/* 每个档位对应的黄脸（Na.png）。renderList 顺序固定、button 带 key，所以 nth-child 与档位严格一一对应 */
.emoji[data-v-75c8c425] button:nth-child(1)[data-v-75c8c425] { background-image: url(/assets/img/pzds/1a.png); }
.emoji[data-v-75c8c425] button:nth-child(2)[data-v-75c8c425] { background-image: url(/assets/img/pzds/2a.png); }
.emoji[data-v-75c8c425] button:nth-child(3)[data-v-75c8c425] { background-image: url(/assets/img/pzds/3a.png); }
.emoji[data-v-75c8c425] button:nth-child(4)[data-v-75c8c425] { background-image: url(/assets/img/pzds/4a.png); }
.emoji[data-v-75c8c425] button:nth-child(5)[data-v-75c8c425] { background-image: url(/assets/img/pzds/5a.png); }

/* 藏掉 Vue 自己管的 <img>：节点保留（Vue 继续切 src 无害），只是不显示 */
.emoji[data-v-75c8c425] button[data-v-75c8c425] > img[data-v-75c8c425] {
  display: none !important;
}

/* 选中反馈：上浮 + 投影 + 标签变橙（不再靠灰/黄两套图切换） */
.emoji[data-v-75c8c425] button.emoji-selected[data-v-75c8c425] {
  transform: translateY(-5px) scale(1.05);
  filter: drop-shadow(0 8px 16px rgba(240, 120, 22, .3));
}

/* ---------- 6. 五个文字标签 ---------- */
.emoji[data-v-75c8c425] button[data-v-75c8c425] p[data-v-75c8c425] {
  margin: 10px auto 0 !important;
  font-size: 13px !important;
  font-weight: 500;
  color: #33302c !important;
  white-space: nowrap;
  line-height: 1.2;
}
.emoji[data-v-75c8c425] button.emoji-selected[data-v-75c8c425] p[data-v-75c8c425] {
  color: #e8590c !important;
  font-weight: 700 !important;
}

/* ---------- 7. 顺手修一个文案坑 ---------- */
/* 第 1 档的文案原来是「非常不满」（少一个「意」），标题档位跟别处不一致。
   注意：这里只改「显示」，不动 Vue 的文本节点，也不动提交时发出去的文案 ——
   消息里仍然是「非常不满」。要连提交文案一起改属于功能改动，等老板点头再说。 */
.emoji[data-v-75c8c425] button:nth-child(1)[data-v-75c8c425] p[data-v-75c8c425] {
  font-size: 0 !important;
}
.emoji[data-v-75c8c425] button:nth-child(1)[data-v-75c8c425] p[data-v-75c8c425]::after {
  content: "非常不满意";
  font-size: 13px;
  font-weight: 500;
}
.emoji[data-v-75c8c425] button:nth-child(1).emoji-selected[data-v-75c8c425] p[data-v-75c8c425]::after {
  font-weight: 700;
}

/* ---------- 8. 提交按钮 ---------- */
.sbu[data-v-75c8c425] {
  width: 88% !important;
  margin: 18px auto 20px !important;
  padding: 13px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ff9a45, #f07816) !important;
  box-shadow: 0 10px 20px -8px rgba(240, 120, 22, .6) !important;
  transition: transform .12s ease, box-shadow .16s ease;
}
.sbu[data-v-75c8c425]:active {
  transform: scale(.985);
  box-shadow: 0 4px 12px -6px rgba(240, 120, 22, .6) !important;
}

/* ---------- 9. 窄屏微调（iPhone SE 这类 320px 也要站得住） ---------- */
@media (max-width: 360px) {
  .appraise[data-v-75c8c425] h2 { font-size: 16px !important; padding: 0 28px; }
  .emoji[data-v-75c8c425] button[data-v-75c8c425] {
    background-size: 44px 44px !important;
    padding-top: 48px;
  }
  .emoji[data-v-75c8c425] button[data-v-75c8c425] p[data-v-75c8c425],
  .emoji[data-v-75c8c425] button:nth-child(1)[data-v-75c8c425] p[data-v-75c8c425]::after {
    font-size: 11.5px !important;
  }
}