/**
 * 访客咨询页 · 电脑端输入区（微信电脑端风格，增量样式）
 *
 * 适用页面：pcCustomerServer 访客页（/chat/pc 与平板视口下的同一组件），
 * 作用域限定在 .pc_customerServer_container_footer（data-v-9484568a）内，
 * 不影响客服工作台（.kf-wx-composer 系列）与手机端 H5 输入栏（data-v-6ace7b5a）。
 *
 * 版式（参照微信电脑端输入框）：
 *   ┌────────────────────────────────┐
 *   │  输入区（占满卡片上部，可滚动）    │
 *   │  😊 📁              [ 发送 ]     │
 *   └────────────────────────────────┘
 *
 * 结构没变。页脚仍是「输入区 / 工具行 / 发送 / 版权」四块栅格，
 * 只是把工具行与发送按钮收进同一张描边卡片内，卡片边框由页脚 ::before 绘制，
 * 因此不需要新增或移动任何 DOM 节点。
 *
 * 改动范围（只覆盖视觉与排列）：
 * 1. 页脚改为两行栅格：第一行输入区，第二行左侧图标、右侧发送；
 * 2. 整张卡片统一描边 + 圆角，聚焦时边框变蓝并加一圈淡蓝光晕（突出输入框）；
 * 3. 左下角两枚图标改为矢量线性图标：表情（笑脸）、文件（文件夹 + 向上箭头），
 *    与「图片 / 视频 / PDF 上传」的实际功能对应；
 * 4. 发送按钮改为圆角矩形实心按钮，与微信电脑端尺寸接近。
 *
 * 约束：不新增、不删除、不复用任何 DOM 节点，不改 @click / input.file / 发送逻辑，
 * 不改消息数据；表情面板结构保留，仅调整浮层定位与层级。
 */

/* ---------- 0. 布局护栏：阻断「长串消息把整页顶宽」 ---------- */

/* 成因：.layout_content 是横向 flex，.layout_customerServer_content 作为 flex 项
   默认 min-width:auto，遇到消息里不可断行的长串（长链接、订单号）时，
   该项的宽度会被撑到 min-content 宽度，超过面板 880px。
   页脚 width:100% 随之变宽，卡片 ::before 的 right:12px 落到面板裁切区之外，
   表现就是「右侧描边缺失、右上圆角被切、发送按钮贴边」。
   这里只给收缩许可与上限，不改变任何既有尺寸。 */
.layout_content[data-v-9484568a],
.layout_content[data-v-6a6c9b08] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.layout_content > .layout_customerServer_content[data-v-9484568a],
.layout_content > .layout_customerServer_content[data-v-6a6c9b08] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.layout_content > .layout_customerServer_content > .pc_customerServer_container_content[data-v-9484568a],
.layout_content > .layout_customerServer_content > .pc_customerServer_container_content[data-v-6a6c9b08] {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------- 1. 页脚：两行栅格 + 统一描边卡片 ---------- */

/* 选择器额外带一层祖先 .pc_customerServer，用于在同为 !important 的竞争中被分包
   scoped 样式（[data-v-9484568a] 单类选择器）压过：提高优先级，而不是继续加宽度值 */
.pc_customerServer .pc_customerServer_container_footer[data-v-9484568a],
.pc_customerServer_container_footer[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer[data-v-6a6c9b08],
.pc_customerServer_container_footer[data-v-6a6c9b08] {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "input input"
    "tools send";
  align-items: end;
  gap: 0;
  /* 内边距交给卡片 ::before 的 inset 与各栅格项自己的 padding 控制，
     页脚本身不留白，卡片高度随输入内容自然增减 */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  /* 宽度锁死在容器边框盒内：任何外部样式改成 content-box 或补了百分比宽度，
     都不会把页脚撑出 .pc_customerServer_container 的裁切区 */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
  border-top: 1px solid #ededed !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* 卡片描边：纯绘制层，不接收事件，不影响内部点击与文件选择 */
.pc_customerServer_container_footer[data-v-9484568a]::before,
.pc_customerServer_container_footer[data-v-6a6c9b08]::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  bottom: 22px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
  pointer-events: none;
  z-index: 0;
}

/* 聚焦态落在整张卡片上：输入区获得焦点时整圈描边变蓝 */
.pc_customerServer_container_footer[data-v-9484568a]:focus-within::before,
.pc_customerServer_container_footer[data-v-6a6c9b08]:focus-within::before {
  border-color: #3875ea;
  box-shadow: 0 0 0 3px rgba(56, 117, 234, .12);
}

/* ---------- 2. 输入区：占据卡片上部，卡片内的滚动容器 ---------- */

.pc_customerServer .pc_customerServer_container_footer_input[data-v-9484568a],
.pc_customerServer_container_footer_input[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input[data-v-6a6c9b08],
.pc_customerServer_container_footer_input[data-v-6a6c9b08] {
  grid-area: input;
  position: relative;
  z-index: 1;
  display: flex;
  /* 栅格项显式占满列宽：不依赖 justify-self 的自动拉伸，
     宽度按 border-box 计算，左右描边都能落在页脚内边距以内 */
  justify-self: stretch;
  align-self: stretch;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  /* 描边由卡片 ::before 统一承担，输入区自身不再画线，避免双层边框 */
  padding: 18px 24px 6px;
  border: 0 none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: text;
  overflow: visible;
  box-sizing: border-box !important;
}

/* 原样式把输入区固定为 90px 且强制裁切，这里改为随内容生长、上限随视口 */
.pc_customerServer .pc_customerServer_container_footer_input > div[data-v-9484568a],
.pc_customerServer_container_footer_input > div[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
.pc_customerServer_container_footer_input > div[data-v-6a6c9b08] {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 84px;
  max-height: min(200px, 30vh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.pc_customerServer_container_footer_input > div[data-v-9484568a]::-webkit-scrollbar,
.pc_customerServer_container_footer_input > div[data-v-6a6c9b08]::-webkit-scrollbar {
  width: 6px;
}

.pc_customerServer_container_footer_input > div[data-v-9484568a]::-webkit-scrollbar-thumb,
.pc_customerServer_container_footer_input > div[data-v-6a6c9b08]::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 3px;
}

.pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
.pc_customerServer_container_footer_input-textarea[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08],
.pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 84px;
  padding: 0 !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: #1f1f1f;
  outline: 0;
  /* 连续长串（链接、订单号）不再把内容撑宽：任意位置可断行，
     换行保留，避免把输入卡片顶出右边界 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
  box-sizing: border-box !important;
}

/* 表情面板展开时原样式会压回 90px，这里保持与上文一致的自适应高度 */
.pc_customerServer_container_footer_input .readyEmojiHeight[data-v-9484568a],
.pc_customerServer_container_footer_input .readyEmojiHeight[data-v-6a6c9b08] {
  height: auto !important;
  min-height: 84px;
}

/* ---------- 3. 工具行：卡片内左下角两枚线性图标 ---------- */

/* 层级说明：表情面板是这一行的绝对定位子元素，面板向上展开后与上方输入区
   （.footer_input，z-index:1）大面积重叠。若本行与输入区同为 z-index:1，
   后出现的输入区会盖在面板之上，点击被输入区的 @click 接管（inputConType=1），
   表现为「部分表情点了没反应、面板反而收起」。这里把工具行抬到输入区之上，
   面板整体可点；工具行本身只占第二行栅格，不与输入区重叠，不影响其它点击。 */
.pc_customerServer_container_footer_header[data-v-9484568a],
.pc_customerServer_container_footer_header[data-v-6a6c9b08] {
  grid-area: tools;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 4px 0 34px 22px;
}

.pc_customerServer_container_footer_header_handle[data-v-9484568a],
.pc_customerServer_container_footer_header_handle[data-v-6a6c9b08] {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 每个图标一个 32px 方形热区，悬停浅灰底；原 margin-right:19px 由 gap 取代 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a],
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 0 !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:hover,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:hover {
  background-color: #f2f3f5;
}

/* 原 PNG 图标隐藏（保留节点与原有点击区域），改由 ::before 绘制矢量图标 */
.pc_customerServer_container_footer_header_handle > div img[data-v-9484568a],
.pc_customerServer_container_footer_header_handle > div img[data-v-6a6c9b08] {
  opacity: 0 !important;
}

.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 21px;
  margin: -10.5px 0 0 -10.5px;
  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;
  transition: background-color .15s ease;
}

/* 3.1 表情：圆脸 + 两点眼睛 + 微笑（对应第一枚，点击展开表情面板） */
.pc_customerServer_container_footer_header_handle > div:nth-child(1)[data-v-9484568a]::before,
.pc_customerServer_container_footer_header_handle > div:nth-child(1)[data-v-6a6c9b08]::before {
  -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");
}

/* 3.2 文件：文件夹 + 向上箭头（对应第二枚，承担 图片 / 视频 / PDF / 表格 上传） */
.pc_customerServer_container_footer_header_handle > div:nth-child(2)[data-v-9484568a]::before,
.pc_customerServer_container_footer_header_handle > div:nth-child(2)[data-v-6a6c9b08]::before {
  -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.5%207.5a2%202%200%200%201%202-2h3.2a2%202%200%200%201%201.4.6l1.2%201.2h6.2a2%202%200%200%201%202%202v7.2a2%202%200%200%201-2%202h-14a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.4v-4.9%22%2F%3E%3Cpath%20d%3D%22M9.8%2013.7%2012%2011.5l2.2%202.2%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.5%207.5a2%202%200%200%201%202-2h3.2a2%202%200%200%201%201.4.6l1.2%201.2h6.2a2%202%200%200%201%202%202v7.2a2%202%200%200%201-2%202h-14a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.4v-4.9%22%2F%3E%3Cpath%20d%3D%22M9.8%2013.7%2012%2011.5l2.2%202.2%22%2F%3E%3C%2Fsvg%3E");
}

/* 悬停时图标随文字一起转为品牌蓝 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:hover::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:hover::before {
  background-color: #3875ea;
}

/* ---------- 4. 发送按钮：卡片内右下角圆角矩形 ---------- */

.pc_customerServer_container_footer_handle[data-v-9484568a],
.pc_customerServer_container_footer_handle[data-v-6a6c9b08] {
  grid-area: send;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 4px 24px 34px 8px;
  margin: 0 !important;
}

.pc_customerServer_container_footer_handle_send[data-v-9484568a],
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 76px;
  height: 34px;
  padding: 0 18px;
  margin: 0 !important;
  border-radius: 8px;
  background: #3875ea !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500 !important;
  letter-spacing: .5px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(56, 117, 234, .20);
  box-sizing: border-box;
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.pc_customerServer_container_footer_handle_send[data-v-9484568a]:hover,
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08]:hover {
  background: #2f66d0 !important;
  box-shadow: 0 4px 10px rgba(56, 117, 234, .26);
}

.pc_customerServer_container_footer_handle_send[data-v-9484568a]:active,
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08]:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(56, 117, 234, .22);
}

/* ---------- 5. 底部版权行：卡片下方居中，不占卡片内部空间 ---------- */

.pc_customerServer_container_footer_copyright[data-v-9484568a],
.pc_customerServer_container_footer_copyright[data-v-6a6c9b08] {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  bottom: 6px !important;
  padding: 0 !important;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: #c8c8c8;
}

/* ---------- 6. 表情面板：保留原结构，仅调整浮层定位与层级 ---------- */

.pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
  left: 18px !important;
  bottom: calc(100% + 8px) !important;
  z-index: 30;
  max-width: min(420px, calc(100% - 36px)) !important;
  border-radius: 10px;
}

/* ---------- 7. 响应式收敛：卡片内边距、图标与按钮逐档收紧 ---------- */
/* 说明：基线与媒体查询使用同一份带祖先的选择器，避免 !important 之间
   因优先级不同而让媒体查询失效（同优先级时后出现者生效）。 */

/* 7.1 常规桌面（≤1280px）：卡片左右留白与内边距先收一档 */
@media (max-width: 1280px) {
  .pc_customerServer_container_footer[data-v-9484568a]::before,
.pc_customerServer_container_footer[data-v-6a6c9b08]::before {
    left: 10px;
    right: 10px;
  }

  .pc_customerServer .pc_customerServer_container_footer_input[data-v-9484568a],
  .pc_customerServer_container_footer_input[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input[data-v-6a6c9b08] {
    padding: 16px 22px 4px;
  }

  .pc_customerServer_container_footer_header[data-v-9484568a],
.pc_customerServer_container_footer_header[data-v-6a6c9b08] {
    padding-left: 20px;
  }

  .pc_customerServer_container_footer_handle[data-v-9484568a],
.pc_customerServer_container_footer_handle[data-v-6a6c9b08] {
    padding-right: 22px;
  }
}

/* 7.2 平板（≤992px）：整屏铺满，内边距与间距同步收紧 */
@media (max-width: 992px) {
  .pc_customerServer_container_footer[data-v-9484568a]::before,
.pc_customerServer_container_footer[data-v-6a6c9b08]::before {
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: 20px;
  }

  .pc_customerServer .pc_customerServer_container_footer_input[data-v-9484568a],
  .pc_customerServer_container_footer_input[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input[data-v-6a6c9b08] {
    padding: 12px 18px 2px;
  }

  .pc_customerServer .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
  .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08] {
    min-height: 72px;
  }

  .pc_customerServer_container_footer_header[data-v-9484568a],
.pc_customerServer_container_footer_header[data-v-6a6c9b08] {
    padding: 2px 0 30px 16px;
  }

  .pc_customerServer_container_footer_header_handle > div[data-v-9484568a],
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08] {
    width: 30px;
    height: 30px;
  }

  .pc_customerServer_container_footer_header_handle > div[data-v-9484568a]::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]::before {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
  }

  .pc_customerServer_container_footer_handle[data-v-9484568a],
.pc_customerServer_container_footer_handle[data-v-6a6c9b08] {
    padding: 2px 18px 30px 6px;
  }

  .pc_customerServer_container_footer_handle_send[data-v-9484568a],
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08] {
    min-width: 66px;
    height: 32px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .pc_customerServer_container_footer_copyright[data-v-9484568a],
.pc_customerServer_container_footer_copyright[data-v-6a6c9b08] {
    bottom: 5px !important;
  }

  .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    left: 12px !important;
    max-width: min(360px, calc(100% - 24px)) !important;
    max-height: 200px !important;
  }
}

/* 7.3 窄窗口（≤768px）：卡片与工具行进一步压缩，保证整行不溢出 */
@media (max-width: 768px) {
  .pc_customerServer .pc_customerServer_container_footer_input[data-v-9484568a],
  .pc_customerServer_container_footer_input[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input[data-v-6a6c9b08] {
    padding: 10px 16px 0;
  }

  .pc_customerServer .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
  .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08] {
    min-height: 64px;
    font-size: 14px;
  }

  .pc_customerServer_container_footer_header[data-v-9484568a],
.pc_customerServer_container_footer_header[data-v-6a6c9b08] {
    padding: 2px 0 26px 14px;
  }

  .pc_customerServer_container_footer_header_handle[data-v-9484568a],
.pc_customerServer_container_footer_header_handle[data-v-6a6c9b08] {
    gap: 6px;
  }

  .pc_customerServer_container_footer_header_handle > div[data-v-9484568a],
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08] {
    width: 28px;
    height: 28px;
  }

  .pc_customerServer_container_footer_header_handle > div[data-v-9484568a]::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]::before {
    width: 19px;
    height: 19px;
    margin: -9.5px 0 0 -9.5px;
  }

  .pc_customerServer_container_footer_handle[data-v-9484568a],
.pc_customerServer_container_footer_handle[data-v-6a6c9b08] {
    padding: 2px 16px 26px 4px;
  }

  .pc_customerServer_container_footer_handle_send[data-v-9484568a],
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08] {
    min-width: 60px;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
  }

  .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    left: 10px !important;
    max-width: calc(100% - 20px) !important;
    max-height: 190px !important;
  }
}

/* 7.4 手机宽度（≤520px）：发送按钮再收一档，版权字号下调 */
@media (max-width: 520px) {
  .pc_customerServer .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer_container_footer_input > div[data-v-9484568a],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
  .pc_customerServer_container_footer_input-textarea[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input > div[data-v-6a6c9b08],
  .pc_customerServer .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08],
  .pc_customerServer_container_footer_input-textarea[data-v-6a6c9b08] {
    min-height: 58px;
  }

  .pc_customerServer_container_footer_handle_send[data-v-9484568a],
.pc_customerServer_container_footer_handle_send[data-v-6a6c9b08] {
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  .pc_customerServer_container_footer_copyright[data-v-9484568a],
.pc_customerServer_container_footer_copyright[data-v-6a6c9b08] {
    font-size: 11px;
  }

  .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    max-height: 170px !important;
  }
}

/* ---------- 8. 交互状态：图标展开态、按压与键盘焦点 ---------- */

/* 8.1 表情面板展开时，表情图标保持高亮，让「点开了 / 可再点收起」可被看见。
   由 kefu-composer-pc-visitor.js 在面板出现时加 .kf-ic-on，消失时移除。 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a].kf-ic-on,
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a].kf-ic-on:hover,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08].kf-ic-on,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08].kf-ic-on:hover {
  background-color: rgba(56, 117, 234, .10);
}

.pc_customerServer_container_footer_header_handle > div[data-v-9484568a].kf-ic-on::before,
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a].kf-ic-on:hover::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08].kf-ic-on::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08].kf-ic-on:hover::before {
  background-color: #3875ea;
}

/* 8.2 按压反馈：按下时图标轻微缩小，配合悬停底色确认点中了 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:active,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:active {
  background-color: #e6e9ef;
}

.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:active::before,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:active::before {
  transform: scale(.9);
}

/* 8.3 键盘焦点环：仅在键盘导航时出现，鼠标点击不显示 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:focus,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:focus {
  outline: none;
}

.pc_customerServer_container_footer_header_handle > div[data-v-9484568a]:focus-visible,
.pc_customerServer_container_footer_header_handle > div[data-v-6a6c9b08]:focus-visible {
  box-shadow: 0 0 0 2px rgba(56, 117, 234, .38);
}

/* ---------- 9. 表情面板：连续选择的滚动与按压手感 ---------- */

/* 面板自身不把滚轮事件传给消息区，避免挑选表情时整页跟着滚 */
.pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
  overscroll-behavior: contain;
}

.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #dcdcdc transparent;
}

.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar {
  width: 6px;
}

.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar-thumb,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 3px;
}

.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar-thumb:hover,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar-thumb:hover {
  background: #c9ccd2;
}

/* 表情项按压反馈：点击后由脚本插入内容并收起面板，这里的过渡让「按下 → 收起」不突兀 */
.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item {
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .12s ease, transform .12s ease;
}

.pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item:active,
.pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item:active {
  background-color: #dfe3ea;
  transform: scale(.92);
}

/* ---------- 10. 表情命中区修正：整格可点、最后一行与最后一列不被挡住 ---------- */

/* 10.1 图标与文字不参与命中测试。
   原模板只给 22px 的 i.em 绑了点击，格子本身比图标大（含 6px 内边距），
   点在格子留白处落在 div 上没有任何反应，看起来就是「这个表情点不了」。
   让子节点不接收事件后，点击一律命中 .emoji-item，由脚本按整格处理。 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item > *,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item > * {
  pointer-events: none;
}

/* 10.2 每格固定最小点击区，长宽都覆盖图标与内边距，避免出现 1~2px 的死区 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item {
  box-sizing: border-box;
  min-width: 30px;
  min-height: 34px;
}

/* 10.3 滚动区：底部留出余量，滚到底时最后一行完整露出；
   右侧留出滚动条槽位，滚动条不再压住第 9 列的图标 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
  grid-auto-rows: minmax(34px, auto);
  align-content: start;
  overflow-x: hidden;
  padding: 10px 8px 12px;
  scrollbar-gutter: stable;
}

/* 10.4 窄面板（≤768px）同步收一档，保证 9 列仍完整落在滚动区内 */
@media (max-width: 768px) {
  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item {
    min-width: 26px;
    min-height: 32px;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
    grid-auto-rows: minmax(32px, auto);
    padding: 8px 6px 10px;
  }
}

/* ---------- 11. 表情面板：复刻客服工作台「微信式浮层」 ---------- */
/* 口径与 kefu-composer-pc.css 第 7 节完全一致：白色圆角浮层、底部胶囊标签栏、
   48px 等大方格（列数由 auto-fill 换算）、6px 细滚动条、按下缩一圈。
   DOM 顺序仍是「标签栏 → 表情网格」，只用 flex 的 order 把标签栏换到视觉底部，
   不新增、不移动任何节点；面板开合由 v-if="inputConType == 2" 控制，
   因此这里不给 display 加强制声明，收起逻辑不受影响。
   本节置于文件末尾，用同一套选择器骨架覆盖第 6 / 9 / 10 节的旧尺寸。 */

/* 11.1 浮层外框：定宽 560px，窄视口按可用宽度收缩 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
  left: 18px !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;
  width: min(560px, calc(100% - 36px)) !important;
  max-width: none !important;
  height: clamp(288px, 40vh, 420px) !important;
  max-height: none !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .05) !important;
  overflow: hidden !important;
}

/* 11.2 标签栏：贴面板底部，圆角胶囊，选中项反白浮起 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .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;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs .tab-item,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-tabs .tab-item {
  margin-left: 0 !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-size: 12px;
  line-height: 18px;
  color: #8a8d93;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs .tab-item + .tab-item,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-tabs .tab-item + .tab-item {
  margin-left: 0 !important;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs .tab-item:hover,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-tabs .tab-item:hover {
  color: #191919;
  background: #f0f1f3;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs .tab-item.on,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-tabs .tab-item.on {
  color: #191919 !important;
  background: #fff !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* 11.3 表情网格：等大方格、列数随面板宽度自适应，细滚动条贴右缘 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
  order: 1;
  flex: 1 1 auto;
  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;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar {
  width: 6px;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar-thumb,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar-thumb:hover,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar-thumb:hover {
  background: #c4c4c4;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list::-webkit-scrollbar-track,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 11.4 表情格：整格可悬停，按下缩一圈给出即时回执 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .12s ease, transform .1s ease;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item:hover,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item:hover {
  background-color: #f2f2f3 !important;
  border-radius: 8px;
}

.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item:active,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item:active {
  background-color: #e6e7e9 !important;
  transform: scale(.9);
}

/* 陀螺匠表情是雪碧图字体，.em 的 1em 方块即图标尺寸 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item .em,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item .em {
  font-size: 32px;
}

/* QQ 表情是 Unicode 字符，用字号控制大小，与雪碧图视觉重量对齐 */
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item.qq,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item.qq {
  font-size: 30px !important;
  line-height: 1 !important;
  text-align: center;
}

/* 11.5 响应式：格子与字号逐级收敛，列数由 auto-fill 自动换算 */
@media (max-width: 1366px) {
  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    width: min(520px, calc(100% - 36px)) !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
    grid-auto-rows: 46px !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item .em,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item .em {
    font-size: 30px;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item.qq,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item.qq {
    font-size: 28px !important;
  }
}

@media (max-width: 1200px) {
  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    width: min(480px, calc(100% - 32px)) !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important;
    grid-auto-rows: 44px !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item .em,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item .em {
    font-size: 28px;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item.qq,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item.qq {
    font-size: 26px !important;
  }
}

@media (max-width: 1024px) {
  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    left: 12px !important;
    width: min(432px, calc(100% - 24px)) !important;
    height: clamp(264px, 38vh, 380px) !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
    grid-auto-rows: 40px !important;
    padding: 8px 4px 8px 10px !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item .em,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item .em {
    font-size: 26px;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item.qq,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item.qq {
    font-size: 24px !important;
  }
}

@media (max-width: 860px) {
  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a],
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] {
    left: 10px !important;
    width: min(384px, calc(100% - 20px)) !important;
    height: clamp(248px, 36vh, 340px) !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-list,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-list {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
    grid-auto-rows: 36px !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item .em,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item .em {
    font-size: 24px;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-item.qq,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-item.qq {
    font-size: 22px !important;
  }

  .pc_customerServer .pc_customerServer_container_footer_emoji[data-v-9484568a] .emoji-tabs,
.pc_customerServer .pc_customerServer_container_footer_emoji[data-v-6a6c9b08] .emoji-tabs {
    padding: 6px 10px !important;
  }
}