/**
 * 访客咨询页 · 手机端 H5 输入栏（2026-10-31 表情面板专项）
 *
 * 适用页面：由 chunk-3de6dd85 渲染的 mobileCustomerServer 访客页（/chat 系列路由），
 * 作用域限定在 .mobel_customerServer_container_footer（data-v-6ace7b5a）内，
 * 不影响 PC 工作台与其它后台页面。
 *
 * 改动范围：
 * 1. 空态提示文字「请输入内容」在胶囊输入框内左对齐、上下居中；
 *    仅在占位符可见（输入框为空）时生效，开始输入后正文对齐方式保持不变。
 * 2. 「圆圈＋」入口图标的尺寸与描边口径，与语音、表情两个圆形按钮一致。
 * 3. 窄屏与横屏安全区的响应式收敛，避免图标被挤压或裁切。
 * 4. 表情模式（.kf-mi-emo）下的纵向排布：底部容器不参与收缩，面板高度过渡与
 *    惯性滚动、安全区由面板承担，使「输入栏 + 表情面板」把会话区顶起而不是覆盖。
 * 5. 表情面板（对标微信）：7 列大号表情、顶部拖拽横条、页签胶囊、细滚动条；
 *    面板高度同时提供 CSS 兜底与脚本计算两套口径，脚本失效时也不会退回 200px。
 * 6. 输入栏视觉口径：胶囊改用内描边定义边界、发送按钮胶囊圆角与按压反馈，
 *    均为不改变盒模型与尺寸的纯视觉声明。
 * 7. 会话区（2026-10-31 第二轮）：微信同款浅灰画布、36px 圆角方形头像、
 *    气泡尖角与 16px 正文、昵称定位随头像同步，只改视觉，不动消息收发逻辑。
 *    第 11 节的祖先锚点已改为运行时类 .kf-wx-chat（由 kefu-mobile-input.js 的
 *    tagChat() 注入），不再引用构建产生的 data-v 哈希；这样前端重新打包后
 *    会话区样式不会整段失配。
 * 8. 输入区（2026-10-31 第三轮）：按微信输入面板口径收敛输入栏底色与分割线、
 *    按钮热区与图标尺寸、输入框圆角与内边距、发送按钮形态、1–5 行自适应与
 *    各窄屏/横屏断点，全部为纯视觉声明，不改 textarea 事件与发送、上传链路。
 * 9. 输入聚焦外框与语音激活态（2026-10-31 第六轮）：输入框进入输入状态时在
 *    外侧补 0.5px 浅蓝色线框（box-shadow 绘制，不占盒模型），并给出免哈希兜底；
 *    语音按钮听写期间只变更图标颜色，热区与图标尺寸不变。
 * 10. 会话区落地的清理（2026-10-31 第六轮）：第 8 节原有几条带 data-v 哈希、
 *    特异性为 6 的气泡/时间声明，会压住第 11 节（特异性 4）的同名取值，
 *    造成「会话区改版看不到变化」。这些取值已并入第 11 节，第 8 节只保留
 *    与第 11 节不冲突的结构性声明。
 *
 * 约束：只覆盖视觉表现，不触碰 textarea 的 focus / input / keyup 事件、
 * 发送按钮逻辑、表情面板与图片上传（input.file_input）链路。
 */

/* ---------- 1. 空态提示文字：左对齐 + 上下均等居中 ---------- */

/* 纵向居中不再靠「占位态归零内边距」，而是让空态与单行输入态同高：
   kefu-context.css 已把 .footer_input_con 的 min-height 设为所在断点的胶囊内高
   （40 / 38 / 36 / 34px），与 textarea 的「上下内边距 + 22px 行高」严格相等。
   textarea 绝对定位 height:100%，内容盒正好容纳一行，
   占位文字上下各留 9px（窄屏 8px / 7px / 6px），字形中心压在胶囊垂直中线上；
   与键入后的正文位置完全一致，首次输入不会出现文字下跳。

   此处只固定水平对齐：占位文字起点与正文首字起点重合（textarea 左右内边距为 0，
   外侧留白由胶囊的 padding 提供），避免其它样式把占位文字推到框中。
   与占位态绑定的 :placeholder-shown 保证不影响正文与光标。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]:placeholder-shown,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c]:placeholder-shown {
  text-align: left !important;
  text-indent: 0 !important;
}

/* 占位符颜色与目标稿一致：浅灰、不抢正文 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::-webkit-input-placeholder,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c]::-webkit-input-placeholder {
  color: #b6b6b6 !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::placeholder,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c]::placeholder {
  color: #b6b6b6 !important;
}

/* ---------- 2. 「圆圈＋」图标口径 ---------- */

/* kefu-mobile-input.js 已把 SVG 换成圆圈＋；这里统一尺寸，
   与语音、表情两个圆形按钮同为 28px，线条粗细由 SVG 的 stroke-width 决定。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* 圆形按钮维持 30px 热区，图标不溢出到胶囊上 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_uploag_image {
  overflow: hidden;
}

/* ---------- 3. 响应式收敛 ---------- */

/* 375px 档（iPhone SE2 / 8 / 12 mini 等）：左右留白与 360px 档衔接，
   避免 361–375px 区间出现单侧贴边。 */
@media (max-width: 375px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico svg {
    width: 26px;
    height: 26px;
  }
}

/* 横屏且带左右安全区（刘海屏横置）：按安全区补偿，避免图标被圆角裁切 */
@media (orientation: landscape) and (max-height: 500px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
    padding-left: calc(10px + env(safe-area-inset-left)) !important;
    padding-right: calc(10px + env(safe-area-inset-right)) !important;
  }
}

/* ---------- 4. 表情模式（复刻微信）：输入栏 + 表情面板把会话区顶起 ---------- */

/* 表情面板展开时由 kefu-mobile-input.js 给容器加上 .kf-mi-emo。
   底部容器改为不参与收缩（flex: 0 0 auto）：面板的 overflow:hidden 会把自身的
   自动最小高度算成 0，若允许收缩，面板底部会被裁掉一截，这正是「会话被遮挡」的
   直接成因之一。面板高度由脚本按最近一次键盘高度写成行内 !important，
   这里只补过渡与滚动惯性，不写死任何像素值。 */
.pc_customerServer_container.kf-mi-emo .footer_customerServer_container {
  flex: 0 0 auto;
  min-height: 0;
}

.pc_customerServer_container.kf-mi-emo .mobel_customerServer_container_footer_emojiList {
  flex: 0 0 auto;
  transition: height 0.25s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 表情面板展开后，底部安全区由面板承担，输入栏不再重复留白 */
.pc_customerServer_container.kf-mi-emo .mobel_customerServer_container_footer[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-emo .mobel_customerServer_container_footer[data-v-2ec4738c] {
  padding-bottom: 7px !important;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c] {
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

/* 「在线客服」浮标是绝对定位在输入栏上方 60px 的独立标签，键盘或表情面板展开时
   正好压在最后一条消息上；这两个状态下隐藏它，收起后自动恢复，链接与点击行为不变 */
.pc_customerServer_container.kf-mi-kb .crmchat_link[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-emo .crmchat_link[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-kb .crmchat_link[data-v-2ec4738c],
.pc_customerServer_container.kf-mi-emo .crmchat_link[data-v-2ec4738c] {
  display: none !important;
}

/* ---------- 5. 会话滚动区：可视高度与内容区严格一致 ---------- */

/* vue-happy-scroll 的尺寸是组件挂载时一次性算好并写成行内样式的
   （访客页实测为 width:410px; height:755px），此后既不监听窗口尺寸，也不监听
   祖先容器的高度变化。而外层 .happy-scroll 跟随 flex 收缩：键盘弹起时内容区
   391px、表情面板展开时 455px，滚动视口却仍是 755px，滚到底部后末尾约 300px
   会话内容落进 overflow:hidden 的裁剪区，看起来就是「输入栏/表情面板遮住了
   会话」。这里把滚动视口钉在外层容器上：
   - height:100% 让滚动可视高度始终等于会话区实际高度，滚到底部即最后一条消息；
   - width:100% 消除组件多加的 20px 横向溢出（右侧气泡被裁）。
   只覆盖访客手机页（data-v-6ace7b5a），PC 工作台与其它路由不受影响。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .happy-scroll-container {
  width: 100% !important;
  height: 100% !important;
}

/* 内容层跟随滚动视口宽度，避免行内块在窄屏下多出 20px 造成横向裁切 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-content,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .happy-scroll-content {
  width: 100% !important;
  box-sizing: border-box !important;
}

.pc_customerServer_container[data-v-6ace7b5a]
  #chat_scroll[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  #chat_scroll[data-v-2ec4738c] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 输入区在任何状态下都不参与收缩：键盘把容器压到 300px 级高度时，
   若允许 footer 收缩，输入框会被压扁或挤出可视区 */
.pc_customerServer_container[data-v-6ace7b5a]
  .footer_customerServer_container,
.pc_customerServer_container[data-v-2ec4738c]
  .footer_customerServer_container {
  flex: 0 0 auto !important;
}

/* 会话区为绝对定位的浮标（在线客服标签）提供定位参照，滚动容器高度变化时
   浮标不会跟着错位 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c] {
  position: relative;
}

/* ---------- 6. 滚动与合成层加固（只影响流畅度，不改变布局取值） ---------- */

/* 会话区滚到边界后不再把滚动传递给页面本体。页面一旦被带着上下滚，
   visualViewport.offsetTop 就会变化，键盘态的纵向校准被反复触发，
   表现是输入栏轻微上下浮动；该声明只拦截边界滚动传递，不改变滚动惯性 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .happy-scroll-container {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 键盘态容器带 translateY 位移：提前声明合成层，避免键盘动画的每一帧
   都重新栅格化整块会话内容；键盘收起后该声明随 class 一起失效，不长期占用显存 */
.pc_customerServer_container.kf-mi-kb {
  will-change: transform;
}

/* ---------- 7. 表情面板（对标微信）与「文字 ⇄ 表情」切换提示 ---------- */

/* 7.1 面板底色与分割线：微信表情面板为浅灰底，与输入栏之间有一条细分隔线；
   面板高度仍由脚本按键盘高度写成行内 !important，这里只改视觉层。
   构建产物里的 .canSelectemoji 带 10px 内边距，会把页签条挤成内缩的一条；
   这里用权重更高的普通声明归零，让页签通栏贴顶、网格自行决定留白。
   底部安全区仍由第 4 节以 !important 提供，不会被这条普通声明覆盖 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c] {
  background: #f7f7f8 !important;
  border-top: 1px solid #ececec;
  box-shadow: 0 -6px 16px rgba(20, 42, 84, 0.04);
  box-sizing: border-box;
  padding: 0;
  /* 5 行表情的尺寸令牌：行高取「网格可视高度的 1/5」。面板高度由脚本按最近
     一次键盘高度或视口 44% 写入行内 !important（在 240–372px 之间浮动），
     所以不能用固定像素推算行高；改用百分比轨道后，无论面板是 240 还是 372px，
     5 行都恰好等于网格可视高度，不会只露出 3–4 行或留下半行。
     百分比轨道按内容盒计算，不含上下内边距，因此第 5 行不会被内边距顶出可视区。
     --kf-emoji-icon 是按视口高度估算的兜底字号：支持容器查询单位的内核
     （iOS 16+ / Chrome 105+）由 7.2 的 15cqh 接管，这里是旧内核的降级取值。
     字号口径对齐微信表情面板：图标约占行高的八成（行数由 6 减到 5 后行高变高，
     图标随之放大），兜底值同步抬到 22–34px。 */
  --kf-emoji-gap: clamp(4px, 0.6vh, 7px);
  --kf-emoji-row: calc((100% - 4 * var(--kf-emoji-gap)) / 5);
  --kf-emoji-icon: clamp(22px, calc(5.8vh - 4px), 34px);
}

/* 7.1.1 面板高度兜底：构建产物把 .canSelectemoji 写死 200px!important，
   只够露出 3 行；kefu-context.css 又用 38vh 限高。这里用更高优先级给出
   「240–372px / 44vh」的微信级高度，脚本正常时由行内 height 接管，
   脚本异常时也不会退回 200px 的矮条。
   42%–44% 的视口占比配合 7.2 的五等分行高，可完整显示 5 行 × 7 列，
   同时给会话区留出 34% 以上。 */
.pc_customerServer_container[data-v-6ace7b5a] .canSelectemoji[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c] .canSelectemoji[data-v-2ec4738c] {
  height: clamp(240px, 44vh, 372px) !important;
  max-height: 46vh !important;
}

/* 7.1.2 顶部拖拽横条：参考微信表情面板的浅灰短横条，
   纯装饰伪元素，不绑定任何手势，也不参与表情选择逻辑 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]::before,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]::before {
  content: "";
  order: 0;
  flex: 0 0 12px;
  height: 12px;
  background-color: transparent;
  background-image: linear-gradient(#d9dbdf, #d9dbdf);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 4px;
  pointer-events: none;
}

/* 7.2 表情网格（5 行 × 7 列、微信口径的大号表情、均匀间距）：
   为在一屏内完整显示 5 行，行高改为「网格可视高度均分 5 份」（7.1 的
   --kf-emoji-row 为百分比轨道），面板高度在 240–372px 之间变化时 5 行
   始终完整可见；表情字号取 --kf-emoji-icon，随视口高度收敛到 22–34px。
   第一条 42px 是旧内核不支持百分比轨道时的回退值，保证仍能露出 5 行。
   原构建产物为 7 列 50px 大格子，一屏只露出约 4 行 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c] {
  order: 2;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: 42px;
  grid-auto-rows: var(--kf-emoji-row);
  grid-row-gap: var(--kf-emoji-gap) !important;
  /* 把网格声明为尺寸查询容器：表情字号改用 cqh 后，图标始终按网格高度
     等比缩放，面板高度被脚本压到 240px 时图标不会大于行高、互相压叠 */
  container-type: size;
  align-content: start;
  /* 顶部留白给页签条下的装饰横条，左右与底部留白取微信面板的均匀口径 */
  padding: 8px 12px 4px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d5d7db transparent;
}

/* 右侧细滚动条：微信表情面板是一条极窄的灰色指示条，不占内容宽度 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]::-webkit-scrollbar,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]::-webkit-scrollbar {
  width: 3px;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]::-webkit-scrollbar-track,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]::-webkit-scrollbar-track {
  background: transparent;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]::-webkit-scrollbar-thumb,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #d5d7db;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]
  .emoji-item[data-v-2ec4738c] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  transition: background-color 0.1s ease, transform 0.1s ease;
  /* 表情是文字与雪碧图两类节点：禁掉长按选中、系统菜单与 300ms 双击缩放判定，
     连点时只走按下反馈，不弹选择手柄 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item.qq[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]
  .emoji-item.qq[data-v-2ec4738c] {
  /* 显式指定彩色表情字体，避免个别内核回退到单色字形或字重偏细的字体 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
  /* 字号跟随 5 行网格自适应：15cqh 为网格高度的 15%，按行高占比约八成缩放，
     与微信表情面板的图标观感一致且不溢出单元格；9.4vw 是窄屏宽度上限，
     防止 320px 级机身下图标贴到格子边缘；旧内核不认 cqh 时回落到上面的视口估算值 */
  font-size: var(--kf-emoji-icon) !important;
  font-size: min(15cqh, 9.4vw) !important;
  font-weight: 400;
  line-height: 1 !important;
  text-align: center;
}

/* 陀螺匠表情是 1em 见方的雪碧图，字号即图标尺寸；原样式的 margin-top:-4px
   是给 22px 行内表情对齐正文用的，放进大格子里会让图标整体偏上 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item[data-v-6ace7b5a]
  .em,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]
  .emoji-item[data-v-2ec4738c]
  .em {
  /* 雪碧图是 1em 见方，字号即图标尺寸，与 5 行网格行高联动（口径同 QQ 表情） */
  font-size: var(--kf-emoji-icon);
  font-size: min(15cqh, 9.4vw);
  line-height: 1;
  margin-top: 0 !important;
  vertical-align: middle;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item[data-v-6ace7b5a]:active,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-list[data-v-2ec4738c]
  .emoji-item[data-v-2ec4738c]:active {
  background: #e6e7e9;
  transform: scale(0.92);
}

/* 7.3 分类页签在面板顶部（微信口径）：只用 order 调换视觉顺序，
   DOM 顺序与点击绑定保持不变，因此不影响表情插入逻辑。
   页签固定不滚动，网格在它下方独立纵向滚动，翻看表情时分类始终可见 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-tabs[data-v-2ec4738c] {
  order: 1;
  position: relative;
  justify-content: center;
  padding: 4px 10px 8px !important;
  background: #f7f7f8;
  border-bottom: 0 !important;
  border-top: 0 !important;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-tabs[data-v-2ec4738c]
  .tab-item[data-v-2ec4738c] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 20px !important;
  border-radius: 10px;
  color: #6f747c;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.2px;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item + .tab-item[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-tabs[data-v-2ec4738c]
  .tab-item + .tab-item[data-v-2ec4738c] {
  margin-left: 8px !important;
}

/* 当前分类用白底胶囊 + 主题色文字，白底在浅灰面板上形成明确层级 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item.on[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
  .emoji-tabs[data-v-2ec4738c]
  .tab-item.on[data-v-2ec4738c] {
  background: #fff;
  color: #3875ea;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(20, 42, 84, 0.1);
}

/* 7.3.1 响应式收敛：行高由 7.1 的 --kf-emoji-row 按网格可视高度五等分，
   字号由 --kf-emoji-icon 按视口高度收敛，窄屏这里只收紧左右留白与页签尺寸，
   不再写死格子像素值，避免媒体查询回退成固定行高后把第 5 行挤出可视区；
   7 列始终不换行 */
@media (max-width: 375px) {
  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-list[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-list[data-v-2ec4738c] {
    padding: 8px 10px 4px;
  }
}

@media (max-width: 320px) {
  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-tabs[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-tabs[data-v-2ec4738c] {
    padding: 6px 8px 10px !important;
  }

  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-tabs[data-v-6ace7b5a]
    .tab-item[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-tabs[data-v-2ec4738c]
    .tab-item[data-v-2ec4738c] {
    min-height: 30px;
    padding: 6px 14px !important;
    font-size: 12px;
  }

  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-list[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-list[data-v-2ec4738c] {
    padding: 8px 6px 4px;
  }
}

@media (max-height: 480px) {
  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-tabs[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-tabs[data-v-2ec4738c] {
    padding: 4px 10px 9px !important;
  }

  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-tabs[data-v-6ace7b5a]
    .tab-item[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-tabs[data-v-2ec4738c]
    .tab-item[data-v-2ec4738c] {
    min-height: 28px;
    padding: 5px 14px !important;
    font-size: 12px;
  }

  /* 横屏可用高度本就有限：脚本把面板压到 150px 级后，五等分只剩十余像素，
     故这里改用 30px 定高 + 24px 图标的紧凑档，网格在面板内纵向滚动翻看，
     不裁切表情，也不会因行高过小导致图标互相压叠 */
  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-list[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-list[data-v-2ec4738c] {
    --kf-emoji-row: 30px;
    --kf-emoji-gap: 3px;
    --kf-emoji-icon: 24px;
    grid-auto-rows: var(--kf-emoji-row);
    grid-row-gap: var(--kf-emoji-gap) !important;
    padding: 6px 10px 2px;
  }

  /* 横屏网格可视高度只有 80px 级，cqh 会缩到 8px 左右，这里恢复固定字号，
     与 30px 行高搭配（图标约占八成），翻看时图标大小稳定 */
  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-list[data-v-6ace7b5a]
    .emoji-item.qq[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-list[data-v-2ec4738c]
    .emoji-item.qq[data-v-2ec4738c] {
    font-size: 24px !important;
  }

  .pc_customerServer_container[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
    .emoji-list[data-v-6ace7b5a]
    .emoji-item[data-v-6ace7b5a]
    .em,
.pc_customerServer_container[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emojiList[data-v-2ec4738c]
    .emoji-list[data-v-2ec4738c]
    .emoji-item[data-v-2ec4738c]
    .em {
    font-size: 24px;
  }

  /* 横屏面板高度兜底：竖屏的 44vh 在 400px 级视口下只剩 176px，
     这里把下限抬到 168px、上限压到 240px，保证完整行数与输入栏共存 */
  .pc_customerServer_container[data-v-6ace7b5a] .canSelectemoji[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c] .canSelectemoji[data-v-2ec4738c] {
    height: clamp(168px, 52vh, 240px) !important;
    max-height: 56vh !important;
  }
}

/* 7.4 模式提示（一）：表情态下表情按钮出现浅灰圆形底，图标已由脚本换成键盘，
   即「现在是表情输入，点这里回到文字输入」 */
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emoji[data-v-2ec4738c] {
  position: relative;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a]::before,
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emoji[data-v-2ec4738c]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: #e4e6e9;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a]
  .kf-mi-ico,
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emoji[data-v-2ec4738c]
  .kf-mi-ico {
  position: relative;
  z-index: 1;
}

/* 7.5 模式提示（二）：文字态下胶囊输入框聚焦即出现主题色描边，与表情态的
   灰色圆钮形成两态对照，切换时不再需要猜测当前输入方式 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input[data-v-6ace7b5a]:focus-within,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input[data-v-2ec4738c]:focus-within {
  box-shadow: 0 0 0 2px rgba(56, 117, 234, 0.45) !important;
}

/* ---------- 8. 会话区可读性与最后一条消息完整显示 ---------- */

/* 说明（2026-10-31 第六轮）：本节原先还包含气泡对齐、气泡宽度、行高与时间标签的声明。
   它们都带 [data-v-哈希] 属性、特异性为 6，而第 11 节以运行时类 .kf-wx-chat 为锚点、
   特异性只有 4。同一文件内 !important 之间仍按特异性决胜，于是第 11 节的
   line-height、max-width 等取值被本节压住，页面看起来「改了却没有变化」。
   现在这些取值已并入第 11 节（对齐见 11.2，宽度/断行/选择行为见 11.4，
   时间标签见 11.7），本节只保留与第 11 节不冲突的结构性声明。 */

/* 8.3 图片气泡：图片按气泡宽度等比缩放并显示为块级，去掉行内图片底部
   基线留白（约 3–4px），避免图片与下一条消息间距忽大忽小 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_img[data-v-6ace7b5a] img,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .chart_list_item_img[data-v-2ec4738c] img {
  display: block !important;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 8.4 滚动内容层改为块级：inline-block 会带入行盒基线间隙，滚到底部时
   最后一条消息下方多出一段看不见的高度，看起来像「没滚到底」 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-content,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .happy-scroll-content {
  display: block !important;
}

/* 8.5 会话区滚动流畅度：只允许纵向手势交给会话列表，横向手势不再争抢滚动权，
   配合 overscroll-behavior: contain 让上下滑动始终作用在消息区而不带动整页 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container,
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .happy-scroll-container {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 8.8 消息行结构完整性：flex 子项默认 min-width:auto，超长内容会把行撑宽；
   统一置 0 后由气泡自身的 max-width 决定换行，头像与气泡不会互相挤压 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_content[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c]
  .pc_customerServer_container_content[data-v-2ec4738c]
  .chart_list_item_content[data-v-2ec4738c] {
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- 9. 长按复制消息 ---------- */

/* 浮层固定定位、独立于文档流，不占会话高度、不改变任何布局取值 */
.kf-mi-copy {
  position: fixed;
  z-index: 2147483500;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 10px;
  background: rgba(38, 40, 44, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  -webkit-tap-highlight-color: transparent;
}

.kf-mi-copy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: rgba(38, 40, 44, 0.94);
  transform: rotate(45deg);
}

/* 气泡贴近视口顶部、浮层改放到下方时，箭头同步翻到浮层上沿，指向被长按的气泡 */
.kf-mi-copy-below::after {
  top: -5px;
  bottom: auto;
}

.kf-mi-copy-btn {
  min-width: 52px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.kf-mi-copy-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- 10. 输入栏稳定性加固 ---------- */

/* 10.1 关闭移动端字号自动放大：WebView 横屏或系统字号偏大时，浏览器会自行放大正文，
   textarea 与镜像 <p> 的放大幅度不一定一致，两者高度就会错位（表现为输入框抖动、
   光标与文字错行）。固定为 100% 后两端始终按 CSS 声明的 16px / 22px 渲染。 */
.pc_customerServer_container[data-v-6ace7b5a],
.pc_customerServer_container[data-v-2ec4738c] {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 10.2 输入栏内按钮：去掉 300ms 点击延迟与双击缩放判定，点按响应更跟手 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-voice,
.mobel_customerServer_container_footer[data-v-2ec4738c] .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-2ec4738c] .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage {
  touch-action: manipulation;
}

/* 10.3 多行输入：镜像 <p> 与 textarea 采用同一断行规则，行数一致才不会出现
   「输入框比文字高一行」的跳动；超过 106px 上限后由 textarea 内部滚动，
   输入栏本身不再继续长高，会话区高度因此保持恒定。 */
.mobel_customerServer_container_footer_input_con[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con[data-v-2ec4738c] {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con .font[data-v-2ec4738c] {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con textarea[data-v-2ec4738c] {
  overflow-y: auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  -webkit-overflow-scrolling: touch;
}

/* 10.4 输入栏视觉口径：胶囊边界改用内描边（inset 阴影），
   不参与盒模型计算，40px 内高与占位符基线保持第 1 节的既有口径；
   聚焦时由第 7.5 节的 2px 主题色光环接管，形成从常态到聚焦的层级递进 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input[data-v-2ec4738c] {
  box-shadow: inset 0 0 0 1px #eceef2;
  transition: box-shadow 0.16s ease, background-color 0.16s ease;
}

/* 发送按钮：与胶囊同一套圆角语言（全圆角），加轻投影与按压缩放，
   点按时有明确回落反馈；尺寸与显隐仍由 kefu-context.css 的 32px 口径决定 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c] {
  border-radius: 16px !important;
  box-shadow: 0 4px 10px rgba(56, 117, 234, 0.24);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a]:active,
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c]:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(56, 117, 234, 0.2);
}

/* ---------- 11. 会话区：微信同款双向对话布局 ---------- */

/* 锚点说明：本节的祖先选择器改用运行时类 .kf-wx-chat，由 kefu-mobile-input.js
   的 tagChat() 打在访客页根节点上——手机端访客页必定标记，PC 版访客页只在
   ≤992px 视口下标记，桌面宽屏不标记、保持原样。
   原先写死的 [data-v-6ace7b5a] 是构建产生的 scoped 哈希，随每次重新打包变化；
   一旦前端重建，属性选择器整体失配，就会出现「改完样式但页面没有变化」的情况。
   改用语义类后，视觉基线与构建哈希解耦。 */

/* 11.1 会话画布：微信聊天区为浅灰底（#ededed），白色/浅蓝气泡在其上有明确边界；
   只改背景色，滚动容器尺寸与滚动逻辑仍由第 5 节的口径决定 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content,
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .happy-scroll-container,
.pc_customerServer_container.kf-wx-chat #chat_scroll {
  background: #ededed !important;
}

/* 11.2 消息行节奏：微信相邻消息垂直间距约 6px，头像与气泡顶部对齐；
   只调内边距与对齐，不改 DOM 顺序与点击绑定。

   2026-11-01 修订（第四次）：左右内边距取 11px——会话区两侧留白再加宽，
   头像与屏幕边缘的距离更接近微信会话区的宽松观感。安全区补偿放在外层
   #chat_scroll 上，本层只保留纯 11px，避免两层留白叠加成 22px。 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content {
  padding: 6px 11px !important;
  align-items: flex-start !important;
}

/* 会话列表宽度钉满整个会话区：构建产物给 .scroll_content 写的是 width:98%，
   左对齐时右侧会留 2% 空隙，右侧头像因此贴不到屏幕右边缘。
   与下一条合并为同一个作用域（仅 .kf-wx-chat 访客页），
   不进入客服工作台，只改宽度与左右内边距，不参与滚动计算。

   kefu-context.css 第 11.1 节给 #chat_scroll 写了 padding: 18px 20px 20px!important，
   这左右各 20px 就是头像离屏幕边缘的最后一段距离。该文件同时服务客服工作台，
   不能整体改，因此只在本页把左右两条归零（安全区机型按 env() 补偿）；
   上下内边距（18px / 20px）保持原值，首条与末条消息的上下呼吸空间不变。
   横向 4px 留白由里层消息行承担，两层不叠加。 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  #chat_scroll {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}

/* 带昵称的行由 kefu-chat-resilience.js 注入 .kf-msg-nick，微信把昵称放在气泡上方；
   这里为它保留 28px 顶部空间，避免昵称压在气泡上（原 24px 按 33px 头像计算） */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content.kf-has-nick {
  padding-top: 28px !important;
}

/* 11.3 头像：33px 圆形 → 36px 圆角方形（微信头像口径），始终贴顶；
   右侧消息的头像与气泡间距翻转到左侧 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_avatar {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin-right: 10px !important;
  border-radius: 6px !important;
  background: #fff;
}

.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content.right-box
  .chart_list_item_avatar {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* 昵称水平锚点与头像对齐：2026-11-01 起消息行左右内边距为 11px，昵称锚点取 12px，
   比头像外缘再内缩 1px——昵称字号 12px，字形左侧自带约 1px 侧边距，
   视觉上昵称首字与头像左缘（右侧为末字与头像右缘）落在同一条竖线上。

   2026-11-01 修正锚点：由 .kf-wx-chat 改为 #chat_scroll。
   运行时类由 kefu-mobile-input.js 的 tagChat() 注入，只要该脚本未执行、
   路径判定未命中或注入时机晚于渲染，本节昵称定位就整段失配，回退到
   kefu-context.css 的「左 51px / 右 51px」（贴气泡边缘）取值，
   表现就是「改了样式但页面没有任何变化」。#chat_scroll 是访客会话列表
   自身的节点，不依赖任何脚本注入；选择器权重也高于 kefu-context.css。
   外层用 ≤992px 媒体查询限定，电脑宽屏访客页保持原样。 */
@media (max-width: 992px) {
  #chat_scroll .chart_list_item_content .kf-msg-nick {
    top: 5px;
    left: 12px;
    right: auto;
    text-align: left;
    color: #9aa3b0;
    font-size: 12px;
    line-height: 16px;
  }

  /* 右侧消息（访客本人）：昵称锚点 12px，与右侧头像右缘视觉对齐，
     形成「头像 + 昵称」整体贴右的视觉组，与左侧镜像呼应。 */
  #chat_scroll .chart_list_item_content.right-box .kf-msg-nick {
    left: auto;
    right: 12px;
    text-align: right;
  }
}

/* 11.4 文字气泡（微信口径）：6px 圆角、9px 12px 内边距、16px 正文、无投影，
   左侧白底、右侧沿用品牌浅蓝；气泡左侧/右侧各加一个小尖角，
   ::before 用 inherit 取气泡底色，左右两侧自动跟随，不需要第二套配色 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_text {
  position: relative;
  max-width: min(70%, 560px) !important;
  padding: 9px 12px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-align: left !important;
  /* 左侧气泡底色由本节自己给出（与构建产物里的 #fff 一致），
     这样气泡与 ::before 尖角不再依赖构建哈希命中，重建后也不会缺底 */
  background: #fff !important;
  min-width: 0;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  /* 与原第 8.6 节一致：点到气泡上不弹系统选择手柄与菜单，
     长按复制仍由脚本的浮层提供，避免两套菜单同时出现 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_text::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: inherit;
  transform: rotate(45deg);
  pointer-events: none;
}

.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content.right-box
  .chart_list_item_text {
  color: #14203a !important;
  background: #cde0ff !important;
}

.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content.right-box
  .chart_list_item_text::before {
  left: auto;
  right: -4px;
}

/* 11.5 图片消息：微信图片不带气泡底色与内边距，只保留 6px 圆角 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_img,
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_content.right-box
  .chart_list_item_img {
  max-width: 60% !important;
  background: transparent !important;
  border-radius: 6px;
  overflow: hidden;
}

.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_img img {
  border-radius: 6px;
}

/* 11.6 商品卡片：微信卡片为白色圆角块，宽度按视口收敛，不再固定 226px */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_imgOrText {
  width: min(260px, 74vw) !important;
  max-width: 74vw !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(20, 42, 84, 0.08);
}

/* 11.7 时间标签：微信为居中浅灰小字，与消息组之间留出呼吸间距。
   居中、字号、行高与浅灰色（原第 8.7 节的取值）在本节落地，
   不再依赖带构建哈希的高特异性规则，重建后依然一致。 */
.pc_customerServer_container.kf-wx-chat
  .pc_customerServer_container_content
  .chart_list_item_time {
  margin: 12px 0 4px !important;
  text-align: center;
  color: #9aa0a8 !important;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.2px;
}

/* 11.8 窄屏收敛：头像尺寸与气泡宽度缩小，左右留白保持与宽屏一致的 11px、
   昵称锚点 12px，不随断点收窄，保证「头像 + 昵称」在各档屏幕上都与边缘
   保持同一视觉间距；正文保持 16px 不缩小（低于 16px 会在 iOS 聚焦时触发缩放） */
@media (max-width: 375px) {
  .pc_customerServer_container.kf-wx-chat
    .pc_customerServer_container_content
    .chart_list_item_content {
    padding: 6px 11px !important;
  }

  .pc_customerServer_container.kf-wx-chat
    .pc_customerServer_container_content
    .chart_list_item_avatar {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  #chat_scroll .chart_list_item_content .kf-msg-nick {
    left: 12px;
  }

  #chat_scroll .chart_list_item_content.right-box .kf-msg-nick {
    right: 12px;
  }

  .pc_customerServer_container.kf-wx-chat
    .pc_customerServer_container_content
    .chart_list_item_text {
    max-width: 72% !important;
    padding: 8px 11px !important;
  }
}

@media (max-width: 320px) {
  .pc_customerServer_container.kf-wx-chat
    .pc_customerServer_container_content
    .chart_list_item_avatar {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  #chat_scroll .chart_list_item_content .kf-msg-nick {
    left: 12px;
  }

  #chat_scroll .chart_list_item_content.right-box .kf-msg-nick {
    right: 12px;
  }

  .pc_customerServer_container.kf-wx-chat
    .pc_customerServer_container_content
    .chart_list_item_text {
    max-width: 74% !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
  }
}

/* ---------- 12. 输入区：微信输入面板口径（2026-10-31 第三轮） ---------- */

/* 12.1 输入栏外壳：微信底部输入区为浅灰底 + 一条极浅分割线，四周留白紧凑，
   多行输入时三个圆形按钮与输入框底边对齐；数值只影响视觉高度，不影响事件。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  background: #f7f7f7 !important;
  border-top: 1px solid #e6e6e6 !important;
  box-sizing: border-box !important;
  align-items: flex-end !important;
}

/* 12.2 三个入口按钮：统一 30px 热区、27px 图标、近黑描边色，
   与微信「语音 / 表情 / 加号」的视觉重量一致；按钮之间保留 2px 间隔，
   单行时图标垂直居中于 40px 输入框，多行时随底边对齐。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-voice,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_uploag_image {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 40px !important;
  color: #191919 !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico svg {
  width: 27px;
  height: 27px;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_emoji {
  margin-right: 2px;
  margin-left: 2px;
}

/* 12.3 输入框：微信为白底、6px 圆角的小方块（不是通栏胶囊），
   左右各留 8px 与按钮分隔；边界用 1px 内描边表达，不参与盒模型，
   因此 40px 内高与占位符基线沿用第 1 节的既有口径。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input[data-v-2ec4738c] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 8px !important;
  padding: 0 11px !important;
  min-height: 40px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px #e8e8e8;
  transition: box-shadow 0.16s ease, background-color 0.16s ease;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* 聚焦态（2026-10-31 第六轮）：点击进入输入文案状态时，输入框外侧补 0.5px 浅蓝色线框。
   外框用 box-shadow 绘制，不占盒模型、不改变 40px 内高与占位符基线，也不触发重排；
   内侧仍保留 1px 浅灰描边，两者一起界定「正在输入」的边界。
   0.5px 在 2 倍屏上渲染为一条发丝线，3 倍屏同样成立；不支持小数描边的旧内核
   会按 1px 取整，外观仍是浅蓝细线，不会出现缺边。
   这条规则同时覆盖第 7.5 节的主题色光环，保持微信式的低饱和边界。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input[data-v-6ace7b5a]:focus-within,
.pc_customerServer_container[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input[data-v-2ec4738c]:focus-within {
  box-shadow: inset 0 0 0 1px #e8e8e8, 0 0 0 0.5px #a8c8ff !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c] {
  color: #191919 !important;
  caret-color: #3875ea !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::placeholder,
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::-webkit-input-placeholder,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c]::placeholder,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-2ec4738c]::-webkit-input-placeholder {
  color: #b2b2b2 !important;
}

/* 12.4 多行自适应：微信输入框随内容从 1 行长到 5 行，
   每行固定 22px（16px 字号 + 1.375 行高），上下内边距各 9px，
   5 行总高 9 + 110 + 9 = 128px；超过 5 行由 textarea 内部滚动，
   输入栏不再继续长高，会话区可视高度保持稳定。 */
.mobel_customerServer_container_footer_input_con[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con[data-v-2ec4738c] {
  min-height: 40px !important;
  max-height: 128px !important;
  width: 100% !important;
  overflow: hidden !important;
  align-items: flex-start !important;
}

.mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con .font[data-v-2ec4738c],
.mobel_customerServer_container_footer_input_con textarea[data-v-2ec4738c] {
  font-size: 16px !important;
  line-height: 22px !important;
  padding: 9px 0 !important;
  box-sizing: border-box !important;
}

/* 12.5 发送按钮：微信为右侧独立色块（高 32px、6px 圆角、无投影），
   仅在输入框有内容时出现，占位与文件图标一致，出现时输入框宽度只做
   一次平滑收缩，不产生整栏跳动；颜色沿用项目主题蓝。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c] {
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 16px !important;
  margin-left: 8px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  box-shadow: none !important;
  transition: opacity 0.12s ease !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a]:active,
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c]:active {
  opacity: 0.82;
  transform: none;
  box-shadow: none;
}

/* 12.6 375px 档：左右留白与图标同步收一档，与 320px 档衔接 */
@media (max-width: 375px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_uploag_image {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 38px !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico svg {
    width: 25px;
    height: 25px;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_input[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_input[data-v-2ec4738c] {
    margin: 0 6px !important;
    padding: 0 10px !important;
    min-height: 38px !important;
  }

  .mobel_customerServer_container_footer_input_con[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con[data-v-2ec4738c] {
    min-height: 38px !important;
    max-height: 118px !important;
  }

  .mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a],
  .mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con .font[data-v-2ec4738c],
  .mobel_customerServer_container_footer_input_con textarea[data-v-2ec4738c] {
    padding: 8px 0 !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c] {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}

/* 12.7 320px 档：四个横向元素（语音 / 输入框 / 表情 / 加号）刚好铺满，
   不换行、不重叠；发送态下输入框仍保留 120px 以上可输入宽度。 */
@media (max-width: 320px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_uploag_image {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 36px !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-ico svg {
    width: 23px;
    height: 23px;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_input[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_input[data-v-2ec4738c] {
    margin: 0 5px !important;
    padding: 0 9px !important;
    min-height: 36px !important;
  }

  .mobel_customerServer_container_footer_input_con[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con[data-v-2ec4738c] {
    min-height: 36px !important;
    max-height: 106px !important;
  }

  .mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a],
  .mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con .font[data-v-2ec4738c],
  .mobel_customerServer_container_footer_input_con textarea[data-v-2ec4738c] {
    padding: 7px 0 !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] .sendMessage[data-v-2ec4738c] {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 12px !important;
    margin-left: 6px !important;
    font-size: 13px !important;
  }
}

/* 12.8 横屏矮屏（≤480px 高）：输入栏整体收高，把高度还给消息区；
   左右两侧同时补偿刘海屏安全区，避免图标被圆角裁切。 */
@media (max-height: 480px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c] {
    padding: 6px calc(10px + env(safe-area-inset-right)) 6px
      calc(10px + env(safe-area-inset-left)) !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-2ec4738c] .kf-mi-voice,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_emoji,
  .mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_uploag_image {
    height: 34px !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a]
    .mobel_customerServer_container_footer_input[data-v-6ace7b5a],
.mobel_customerServer_container_footer[data-v-2ec4738c]
    .mobel_customerServer_container_footer_input[data-v-2ec4738c] {
    min-height: 34px !important;
  }

  .mobel_customerServer_container_footer_input_con[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con[data-v-2ec4738c] {
    min-height: 34px !important;
    max-height: 84px !important;
  }

  .mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a],
  .mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a],
.mobel_customerServer_container_footer_input_con .font[data-v-2ec4738c],
  .mobel_customerServer_container_footer_input_con textarea[data-v-2ec4738c] {
    padding: 6px 0 !important;
  }
}

/* ---------- 13. 输入聚焦外框与语音按钮激活态（2026-10-31 第六轮） ---------- */

/* 13.1 聚焦外框的免哈希镜像：第 12.3 与 12.4 节用 data-v-6ace7b5a 锚定，
   前端重新打包后哈希会变化，整段样式随之失配。这里用结构性类名再写一份同款
   声明，作为构建哈希变化时的兜底；两处取值一致（0.5px 浅蓝外框 + 1px 浅灰内描边），
   不叠加、不改变盒模型。祖先链取到 .footer_customerServer_container，特异性高于基础内描边声明。 */
.footer_customerServer_container
  .mobel_customerServer_container_footer
  .mobel_customerServer_container_footer_input:focus-within {
  box-shadow: inset 0 0 0 1px #e8e8e8, 0 0 0 0.5px #a8c8ff !important;
}

/* 13.2 语音按钮激活态：脚本开始听写时给按钮加 .kf-mi-voice-on，
   这里只改颜色做状态提示，热区（30px）与图标尺寸（27px）保持不变，
   因此不会引起输入栏布局变化；听写结束后脚本移除该类，自动复原。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .kf-mi-voice.kf-mi-voice-on,
.mobel_customerServer_container_footer[data-v-2ec4738c]
  .kf-mi-voice.kf-mi-voice-on {
  color: #3875ea !important;
}

/* 同上，为重新打包后的哈希变化保留一份免哈希兜底 */
.footer_customerServer_container
  .mobel_customerServer_container_footer
  .kf-mi-voice.kf-mi-voice-on {
  color: #3875ea !important;
}

/* ---------- 14. 键盘收起后的容器基准形态（手机端） ---------- */

/* 脚本在键盘态会给 .pc_customerServer_container 写入行内 height 与 translateY，
   键盘收起、系统授权弹窗打断或页面被恢复后必须回到「贴顶、占满视口」的基准形态。
   脚本侧已按「输入框是否持有焦点」做复位与看门狗（见 kefu-mobile-input.js），
   这里再补一层样式兜底：只要不是键盘态/表情态，就不允许任何纵向位移，
   容器高度回归 100%，避免行内残留值把顶部导航推到屏幕中间。
   仅在 ≤991px 的手机端访客页生效，不影响电脑端与工作台页面。 */
@media (max-width: 991px) {
  .pc_customerServer_container.kf-wx-chat:not(.kf-mi-kb):not(.kf-mi-emo) {
    transform: none !important;
    height: 100% !important;
  }
}