/**
 * 访客咨询页 · 电脑端输入区（微信风格布局，增量样式）
 *
 * 适用页面：pcCustomerServer 访客页（/chat/pc 与平板视口下的同一组件），
 * 作用域限定在 .pc_customerServer_container_footer（data-v-9484568a）内，
 * 不影响客服工作台（.kf-wx-composer 系列）与手机端 H5 输入栏（data-v-6ace7b5a）。
 *
 * 布局参照微信桌面端输入区：
 *   ┌──────────────────────────────┐
 *   │  输入区（圆角描边，聚焦高亮）  │
 *   ├──────────────────────────────┤
 *   │  表情 · 文件        [ 发送 ]  │
 *   └──────────────────────────────┘
 *
 * 改动范围（只覆盖视觉与排列顺序）：
 * 1. 原「表情/图片图标在上、输入框居中、发送另起一行」改为「输入区在上、工具行在下」；
 * 2. 表情图标（face.png）图标本体不变，仅统一热区尺寸与悬停底色；
 * 3. 第二枚图标（原 picture.png）改为微信风格的文件夹线性图标，点击仍触发原文件选择；
 * 4. 发送按钮改为右下角圆角实心按钮，加大尺寸、加投影，悬停/按下有反馈。
 *
 * 约束：不新增、不删除、不复用任何 DOM 节点，不改 @click / @keyup / input.file 链路，
 * 不改发送与上传逻辑，不改消息数据；表情面板结构保留，仅调整浮层定位与层级。
 */

/* ---------- 1. 外框：两行栅格（输入区 / 工具行），版权单独一行留白 ---------- */

.pc_customerServer_container_footer[data-v-9484568a] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "input input"
    "tools send";
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px 30px !important;
  min-height: 0 !important;
  background: #fff !important;
  border-top: 1px solid #ededed !important;
  box-sizing: border-box;
}

/* ---------- 2. 输入区：圆角描边卡片，聚焦时高亮 ---------- */

.pc_customerServer_container_footer_input[data-v-9484568a] {
  grid-area: input;
  display: flex;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  cursor: text;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.pc_customerServer_container_footer_input[data-v-9484568a]:focus-within {
  border-color: #3875ea;
  box-shadow: 0 0 0 2px rgba(56, 117, 234, .10);
}

/* 原样式把输入区固定为 90px 且强制裁切，这里改为随内容生长、上限随视口 */
.pc_customerServer_container_footer_input > div[data-v-9484568a] {
  height: auto !important;
  min-height: 84px;
  max-height: min(180px, 26vh) !important;
  overflow-y: auto !important;
}

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

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

.pc_customerServer_container_footer_input-textarea[data-v-9484568a] {
  width: 100% !important;
  height: auto !important;
  min-height: 84px;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.65;
  color: #1f1f1f;
  outline: 0;
  word-break: break-word;
  box-sizing: border-box;
}

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

/* ---------- 3. 工具行：左下角图标组 ---------- */

.pc_customerServer_container_footer_header[data-v-9484568a] {
  grid-area: tools;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

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

/* 每个图标一个 32px 方形热区，悬停浅灰底；原 margin-right:19px 由 gap 取代 */
.pc_customerServer_container_footer_header_handle > div[data-v-9484568a] {
  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 {
  background-color: #f2f3f5;
}

/* 表情图标本体（face.png）不变，只把绘制尺寸从 18px 提到 21px 并与文件夹图标对齐 */
.pc_customerServer_container_footer_header_handle > div img[data-v-9484568a] {
  display: block;
  width: 21px !important;
  height: 21px !important;
}

/* ---------- 4. 第二枚图标：换成微信风格文件夹线性图标 ---------- */
/* 只换外观：原 img 透明化，用 ::before 遮罩绘制矢量文件夹；
   文件选择仍由该 div 内原有的 input.type_file 覆盖层承担，点击区域不变。 */

.pc_customerServer_container_footer_header_handle > div:nth-child(2) img[data-v-9484568a] {
  opacity: 0 !important;
}

.pc_customerServer_container_footer_header_handle > div:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  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%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%3C%2Fsvg%3E") center / 22px 22px 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%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%3C%2Fsvg%3E") center / 22px 22px no-repeat;
  pointer-events: none;
  transition: background-color .15s ease;
}

.pc_customerServer_container_footer_header_handle > div:nth-child(2):hover::before {
  background-color: #3875ea;
}

/* ---------- 5. 发送按钮：右下角圆角实心，突出但不遮挡工具行 ---------- */

.pc_customerServer_container_footer_handle[data-v-9484568a] {
  grid-area: send;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 !important;
}

.pc_customerServer_container_footer_handle_send[data-v-9484568a] {
  width: auto !important;
  min-width: 76px;
  height: 36px;
  padding: 0 20px;
  margin: 0 !important;
  border-radius: 18px;
  background: #3875ea !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600 !important;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(56, 117, 234, .30);
  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 {
  background: #2f66d0 !important;
  box-shadow: 0 6px 16px rgba(56, 117, 234, .36);
}

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

/* ---------- 6. 底部版权行：回到页脚底部居中，不再与发送按钮争位 ---------- */

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

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

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

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

@media (max-width: 992px) {
  .pc_customerServer_container_footer[data-v-9484568a] {
    padding: 10px 12px 28px !important;
    gap: 8px 10px;
  }

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

  .pc_customerServer_container_footer_handle_send[data-v-9484568a] {
    min-width: 68px;
    height: 34px;
    padding: 0 16px;
  }

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

@media (max-width: 640px) {
  .pc_customerServer_container_footer_handle_send[data-v-9484568a] {
    min-width: 62px;
    padding: 0 14px;
  }
}