/**
 * PC 客服工作台输入区：微信风格布局（增量样式）
 *
 * 适用页面：/kefu/pc_list（客服工作台 → 接待页）。由 kefu-composer-pc.js 给容器加
 * .kf-wx-composer 后才会命中；其它页面元素不带该类，零影响。
 *
 * 改造边界：
 * - 只调整布局与视觉，不改 DOM 结构、不改事件绑定、不改消息数据与接口；
 * - 原「表情」面板（emoji-box / emoji-tabs / emoji-list）原样保留，仅调整尺寸与定位；
 * - 工具栏从左到右：表情 / 图片 / 话术(文件夹图标) / 自动回复 …… 转接 ｜ 发送。
 */

/* ---------- 1. 输入区容器：白底圆角卡片，1px 蓝色描边（不投影） ---------- */

.content-wrapper .chat-content .chat-textarea.kf-wx-composer {
  /* 尺寸令牌：响应式断点只改这几个变量，子元素全部按变量排布 */
  --kf-send-w: 88px;
  --kf-send-h: 36px;
  --kf-send-gap: 24px;
  --kf-radius: 12px;
  --kf-text: #191919;
  --kf-brand: #07c160;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 196px;
  margin: 10px 12px 12px !important;
  padding: 10px 10px 8px;
  background: #fff;
  /* 功能区外框：按需求画 1px 蓝色描边，不加投影、不叠加聚焦光圈；
     输入区的边界由内部输入框自身的浅灰描边表达，布局与交互不受影响 */
  border: 1px solid #1890ff !important;
  box-shadow: none !important;
  border-radius: var(--kf-radius);
  box-sizing: border-box;
}

/* ---------- 2. 输入区移到工具栏上方，占满剩余空间 ---------- */

#app .kf-wx-composer .textarea-box {
  order: 1;
  position: static !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  padding: 2px 2px 0;
  box-sizing: border-box;
}

#app .kf-wx-composer .editable {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 210px;
  padding: 6px 10px !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .2px;
  /* 输入文字加深、光标用品牌绿，提升可读性与识别度 */
  color: var(--kf-text);
  caret-color: var(--kf-brand);
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  box-sizing: border-box;
  word-break: break-word;
}

#app .kf-wx-composer .editable::-webkit-scrollbar {
  width: 6px;
}

#app .kf-wx-composer .editable::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}

#app .kf-wx-composer .editable::-webkit-scrollbar-track {
  background: transparent;
}

/* 空态占位：文案由脚本写入 data-kf-ph，空态标记由脚本维护 */
#app .kf-wx-composer .editable.kf-wx-empty::before {
  content: attr(data-kf-ph);
  color: #a9a9a9;
  pointer-events: none;
}

/* ---------- 3. 工具栏移到卡片底部 ---------- */

#app .kf-wx-composer .chat-btn-wrapper {
  order: 2;
  /* 置为 static，让内部 .emoji-box 的定位基准改为整张输入卡片 */
  position: static !important;
  padding: 4px 2px 0 !important;
  /* 与微信电脑端一致：卡片内不再画分隔线，工具栏直接贴在输入区下方 */
  border-top: 0 none !important;
  margin-top: 2px;
  min-height: 44px;
  box-sizing: border-box;
}

/* 左下角工具区：四枚图标放进等大的方形热区，水平等距、垂直居中；
   图标绘制盒统一为 26×26（见第 4 节），不再各按字形大小排版 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* 间距统一交给 gap，清除原有 20px 左边距与首项特例 */
  margin-left: 0 !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease;
}

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item:hover {
  background-color: #f2f2f3;
}

/* 图片按钮被 iView Upload 包了一层：让包裹层铺满热区并居中，
   消除行盒基线造成的垂直偏移（原样式下文件夹图标比其它三枚低约 7px） */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .ivu-upload {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont {
  color: #4a4a4a;
}

/* ---------- 4. 图标替换：按微信电脑端底部工具栏重新绘制 ---------- */
/* 只换外观：字体字形置零后用遮罩绘制线性图标，点击事件仍由原有节点承担。
   顺序沿用原有语义：表情 / 图片(含视频、PDF) / 话术(文件夹) / 授权话术 / 转接 */

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconbiaoqing1,
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.icontupian1,
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconliaotian,
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .ivu-icon {
  /* 统一 26×26 绘制盒并绝对居中：字形大小、描边粗细、视觉重心一致，
     不再受各节点行高、内联样式与包裹层基线影响 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
  background-color: #4a4a4a;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* 表情：圆脸 + 两点眼睛 + 微笑 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconbiaoqing1 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8.4%2014.1a4.6%204.6%200%200%200%207.2%200%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%229.8%22%20r%3D%22.95%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.8%22%20cy%3D%229.8%22%20r%3D%22.95%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8.4%2014.1a4.6%204.6%200%200%200%207.2%200%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%229.8%22%20r%3D%22.95%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.8%22%20cy%3D%229.8%22%20r%3D%22.95%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

/* 文件上传：文件夹 + 向上箭头（该按钮承担 图片 / 视频 / PDF / 表格 选择，
   图标语义改为「上传文件」，与访客页文件入口同一口径） */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.icontupian1 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.4%207.2a2%202%200%200%201%202-2h3.1a2%202%200%200%201%201.5.68l1.05%201.22h7.55a2%202%200%200%201%202%202v8.1a2%202%200%200%201-2%202H5.4a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.2v-4.6%22%2F%3E%3Cpath%20d%3D%22M9.9%2013.7%2012%2011.6l2.1%202.1%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.4%207.2a2%202%200%200%201%202-2h3.1a2%202%200%200%201%201.5.68l1.05%201.22h7.55a2%202%200%200%201%202%202v8.1a2%202%200%200%201-2%202H5.4a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.2v-4.6%22%2F%3E%3Cpath%20d%3D%22M9.9%2013.7%2012%2011.6l2.1%202.1%22%2F%3E%3C%2Fsvg%3E");
}

/* 话术库：对话气泡 + 两行文字（一眼可辨「快捷话术/文本回复」，
   对应原 iconliaotian 点击后弹出的「个人库 / 公共库」话术面板） */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconliaotian {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.4%2011.6a8.4%208.4%200%200%201-12.2%207.52L3.6%2020.4l1.28-4.52A8.4%208.4%200%201%201%2020.4%2011.6z%22%2F%3E%3Cpath%20d%3D%22M8.4%209.7h7.2%22%2F%3E%3Cpath%20d%3D%22M8.4%2013.3h4.6%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.4%2011.6a8.4%208.4%200%200%201-12.2%207.52L3.6%2020.4l1.28-4.52A8.4%208.4%200%201%201%2020.4%2011.6z%22%2F%3E%3Cpath%20d%3D%22M8.4%209.7h7.2%22%2F%3E%3Cpath%20d%3D%22M8.4%2013.3h4.6%22%2F%3E%3C%2Fsvg%3E");
}

/* 授权话术：盾牌 + 对勾（表达「需授权的回复模板」，
   对应原 iView ios-chatboxes-outline 点击后弹出的授权话术面板） */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .ivu-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.1%204%206.05v5.6c0%204.3%203.2%207.95%208%209.25%204.8-1.3%208-4.95%208-9.25V6.05z%22%2F%3E%3Cpath%20d%3D%22M9.1%2011.8l2.05%202.05%203.75-3.95%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.1%204%206.05v5.6c0%204.3%203.2%207.95%208%209.25%204.8-1.3%208-4.95%208-9.25V6.05z%22%2F%3E%3Cpath%20d%3D%22M9.1%2011.8l2.05%202.05%203.75-3.95%22%2F%3E%3C%2Fsvg%3E");
}

/* 转接：右侧文字前的箭头，与左侧图标同一线性风格 */
#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item .iconfont.iconzhuanjie {
  font-size: 0 !important;
  display: inline-block;
  width: 17px;
  height: 17px;
  /* 间距交给胶囊按钮的 gap，避免与原有 margin 叠加 */
  margin-right: 0;
  vertical-align: 0;
  background-color: #4a4a4a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.6%205.4L19.2%2010l-4.6%204.6%22%2F%3E%3Cpath%20d%3D%22M19.2%2010H9.3a4.9%204.9%200%200%200%200%209.8h1.3%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.6%205.4L19.2%2010l-4.6%204.6%22%2F%3E%3Cpath%20d%3D%22M19.2%2010H9.3a4.9%204.9%200%200%200%200%209.8h1.3%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ---------- 5. 转接：浅灰胶囊按钮，hover 转绿 ---------- */
/* 只改外观：触发节点仍是原来的 .icon-item，点击事件与弹层完全不受影响 */

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper {
  display: flex;
  align-items: center;
  padding-right: 0 !important;
  /* 给右下角的发送按钮让出位置，宽度随断点变量变化 */
  margin-right: calc(var(--kf-send-w) + var(--kf-send-gap));
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: #f4f5f7;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item span {
  display: inline-block;
  /* 原样式给文字留了 10px 左外边距，这里改由 gap 统一控制 */
  margin-left: 0 !important;
  line-height: 1;
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item:hover {
  background: #ebfaf1;
  border-color: #b9e8cc;
  color: #07a34f;
  box-shadow: 0 1px 3px rgba(7, 193, 96, .14);
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item:active {
  transform: translateY(1px);
}

/* 箭头跟随文字颜色，突出时同步转绿 */
#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item:hover .iconfont.iconzhuanjie {
  background-color: #07a34f;
}

/* ---------- 6. 发送按钮：微信绿实心，右下角突出 ---------- */

#app .kf-wx-composer .send-btn {
  position: absolute !important;
  right: 12px !important;
  bottom: 9px !important;
  margin: 0 !important;
  z-index: 30;
}

#app .kf-wx-composer .send-btn .btns {
  width: auto !important;
  min-width: var(--kf-send-w) !important;
  height: var(--kf-send-h) !important;
  padding: 0 20px !important;
  border: 0 none !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #14cf6f 0%, #07c160 55%, #06b157 100%) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: calc(var(--kf-send-h) - 2px) !important;
  box-shadow: 0 2px 6px rgba(7, 193, 96, .26), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#app .kf-wx-composer .send-btn .btns:hover {
  background: linear-gradient(180deg, #0dc46a 0%, #06b25a 55%, #059e4d 100%) !important;
  box-shadow: 0 4px 12px rgba(7, 193, 96, .34), inset 0 1px 0 rgba(255, 255, 255, .2);
}

#app .kf-wx-composer .send-btn .btns:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(7, 193, 96, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

#app .kf-wx-composer .send-btn .btns:focus-visible {
  outline: 2px solid rgba(7, 193, 96, .45);
  outline-offset: 2px;
}

/* 禁用态：去渐变、去阴影，避免看起来仍可点击 */
#app .kf-wx-composer .send-btn .btns[disabled],
#app .kf-wx-composer .send-btn .btns.ivu-btn[disabled],
#app .kf-wx-composer .send-btn .btns.ivu-btn[disabled]:hover {
  background: #eceef0 !important;
  border: 0 none !important;
  color: #a9adb2 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

/* ---------- 7. 表情面板：微信式浮层（底部标签栏 + 大格子 + 自适应列数） ---------- */
/* DOM 顺序仍是「标签栏 → 表情网格」，这里只用 flex 的 order 把标签栏换到视觉底部，
   不新增、不移动任何节点，表情点选仍由原有的 @click 承担。 */

#app .kf-wx-composer .chat-btn-wrapper .emoji-box {
  left: 8px !important;
  right: auto !important;
  top: auto !important;
  /* 定位基准已改为整张输入卡片：面板整体浮在卡片正上方，不遮挡正在输入的文本 */
  bottom: calc(100% + 8px) !important;
  transform: none !important;
  /* 注意：不要给 display 加 !important。面板开合走 v-show（内联 display:none），
     一旦强制 display:flex，收起状态也会被强行显示 */
  width: min(560px, calc(100% - 16px)) !important;
  height: clamp(288px, 40vh, 420px) !important;
  max-height: 58vh;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .05);
  overflow: hidden;
}

/* 7.1 标签栏：贴在面板底部，圆角胶囊选项，选中项反白浮起 */
#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs {
  order: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 0 !important;
  background: #fafafa;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs .tab-item {
  padding: 4px 14px !important;
  /* 间距交给容器的 gap，清除原有 8px 左边距 */
  margin-left: 0 !important;
  border-radius: 999px !important;
  color: #8a8d93;
  font-size: 12px;
  line-height: 18px;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs .tab-item:hover {
  color: #191919;
  background: #f0f1f3;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs .tab-item.on {
  color: #191919 !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* 7.2 表情网格：等大方格、列数随面板宽度自适应，细滚动条贴右缘 */
#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
  order: 1;
  flex: 1 1 auto;
  /* flex 子项默认 min-height:auto，置 0 后网格才会内部滚动而不是撑高面板 */
  min-height: 0;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
  grid-auto-rows: 48px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: start !important;
  padding: 10px 6px 10px 12px !important;
  overflow-x: hidden;
  overflow-y: auto;
  /* 滚动条常驻占位，避免出现/消失时列宽跳动 */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list::-webkit-scrollbar {
  width: 6px;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list::-webkit-scrollbar-thumb:hover {
  background: #c4c4c4;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 7.3 表情格：整格可悬停，按下缩一圈给出即时回执 */
#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .12s ease, transform .1s ease;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item:hover {
  background-color: #f2f2f3 !important;
  border-radius: 8px;
}

#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item:active {
  background-color: #e6e7e9 !important;
  transform: scale(.9);
}

/* 陀螺匠表情是雪碧图字体（.em 为 1em 方块，字号即图标尺寸） */
#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
  font-size: 32px;
}

/* QQ 表情是 Unicode 字符，用字号控制大小，与左侧雪碧图视觉重量对齐 */
#app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
  font-size: 30px !important;
  line-height: 1 !important;
  text-align: center;
}

/* 7.4 表情面板响应式：格子与字号逐级收敛，列数由 auto-fill 自动换算 */
@media (max-width: 1366px) {
  #app .kf-wx-composer .chat-btn-wrapper .emoji-box {
    width: min(520px, calc(100% - 16px)) !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
    grid-auto-rows: 46px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
    font-size: 30px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
    font-size: 28px !important;
  }
}

@media (max-width: 1200px) {
  #app .kf-wx-composer .chat-btn-wrapper .emoji-box {
    width: min(480px, calc(100% - 16px)) !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important;
    grid-auto-rows: 44px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
    font-size: 28px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
    font-size: 26px !important;
  }
}

@media (max-width: 1024px) {
  #app .kf-wx-composer .chat-btn-wrapper .emoji-box {
    width: min(432px, calc(100% - 16px)) !important;
    height: clamp(264px, 38vh, 380px) !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
    grid-auto-rows: 40px !important;
    padding: 8px 4px 8px 10px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
    font-size: 26px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
    font-size: 24px !important;
  }
}

@media (max-width: 860px) {
  #app .kf-wx-composer .chat-btn-wrapper .emoji-box {
    left: 4px !important;
    width: min(384px, calc(100% - 8px)) !important;
    height: clamp(248px, 36vh, 340px) !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
    grid-auto-rows: 36px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
    font-size: 24px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
    font-size: 22px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs {
    padding: 6px 10px !important;
  }
}

@media (max-width: 720px) {
  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
    grid-auto-rows: 32px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item .em {
    font-size: 22px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-item.qq {
    font-size: 20px !important;
  }

  #app .kf-wx-composer .chat-btn-wrapper .emoji-box .emoji-tabs .tab-item {
    padding: 3px 10px !important;
    font-size: 11px;
  }
}

/* ---------- 8. 点击联动：遮罩层级、按压反馈与展开态 ---------- */
/* 成因（可验证）：分包样式里 .emoji-bg 与 .transfer-bg 都是 position:fixed、
   铺满视口、z-index:50 的透明遮罩，用来实现「点空白处收起面板」。它们同时盖在
   工具栏与输入区之上，所以面板展开时点任一按钮，第一次点击只会命中遮罩并把面板
   收起，按钮自身的动作要再点一次才执行。
   处理：工具栏与输入区抬到遮罩之上（55 > 50），面板本体仍是 60，保持最上层；
   遮罩继续覆盖聊天消息区、侧栏等其余区域，「点空白处收起」的行为不变；被抬起的
   这几块区域内如何收起面板，由 kefu-composer-pc.js 在点击时显式触发原遮罩的
   关闭逻辑，不直接读写组件状态、不触碰消息数据。
   三者（.left-wrapper / .right-wrapper .icon-item / .textarea-box）都是 flex 子项，
   按 Flexbox 规范 z-index 对 flex 子项生效，无需改动原有 position。 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper,
#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item,
#app .kf-wx-composer .textarea-box {
  z-index: 55;
}

/* 按压反馈：按下即缩一圈并加深底色，松开回弹；与 hover 区分开，
   让「这一下点到了」有即时的视觉回执 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item {
  transition: background-color .15s ease, transform .12s ease;
}

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item:active {
  background-color: #e6e8eb;
  transform: scale(.94);
}

/* 键盘焦点环：脚本给按钮补了 tabindex，聚焦时给出可见轮廓 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item:focus-visible,
#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item:focus-visible {
  outline: 2px solid rgba(7, 193, 96, .5);
  outline-offset: 2px;
}

/* 展开态：表情面板 / 转接面板打开期间，对应按钮保持高亮，与面板形成一组 */
#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item.kf-on {
  background-color: #e9f8ef;
}

#app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item.kf-on .iconfont.iconbiaoqing1 {
  background-color: #07c160;
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item.kf-on {
  background: #ebfaf1;
  border-color: #b9e8cc;
  color: #07a34f;
  box-shadow: 0 1px 3px rgba(7, 193, 96, .14);
}

#app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item.kf-on .iconfont.iconzhuanjie {
  background-color: #07a34f;
}

/* ---------- 9. 响应式适配：断点只改尺寸令牌，布局规则共用一套 ---------- */

/* 常规笔记本：略微收紧留白与按钮尺寸 */
@media (max-width: 1366px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    --kf-send-w: 84px;
    --kf-send-gap: 20px;
    --kf-radius: 10px;
    margin: 8px 8px 10px !important;
    min-height: 184px;
  }

  #app .kf-wx-composer .textarea-box {
    min-height: 120px;
  }

  #app .kf-wx-composer .editable {
    min-height: 108px;
  }
}

/* 小笔记本 / 分屏：图标间距与按钮同步收敛 */
@media (max-width: 1200px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    --kf-send-w: 78px;
    --kf-send-h: 34px;
    --kf-send-gap: 16px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper {
    gap: 5px;
  }
}

/* 平板横屏：进一步压缩，转接按钮改为更紧凑的胶囊 */
@media (max-width: 1024px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    --kf-send-w: 70px;
    --kf-send-gap: 14px;
    min-height: 172px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper {
    gap: 3px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  #app .kf-wx-composer .send-btn .btns {
    padding: 0 14px !important;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

/* 窄屏：转接只留箭头，发送按钮保留文字以维持主操作识别度 */
@media (max-width: 860px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    --kf-send-w: 64px;
    --kf-send-gap: 10px;
    min-height: 164px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item span {
    display: none;
  }

  #app .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item {
    width: 28px;
    padding: 0;
    border-radius: 14px;
  }
}

/* 极窄（侧边栏全展开的小窗）：图标再小一档，避免换行挤压输入区 */
@media (max-width: 720px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    --kf-send-w: 58px;
    min-height: 156px;
    padding: 8px 8px 6px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper {
    gap: 2px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item {
    width: 28px;
    height: 28px;
  }

  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconbiaoqing1,
  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.icontupian1,
  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconliaotian,
  #app .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .ivu-icon {
    width: 23px;
    height: 23px;
    margin: -11.5px 0 0 -11.5px;
  }

  #app .kf-wx-composer .send-btn {
    right: 10px !important;
    bottom: 8px !important;
  }
}