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

/* ---------- 1. 输入区外框：白底圆角卡片，替代原来的 214px 固定高度条 ---------- */

.content-wrapper .chat-content .chat-textarea.kf-wx-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 196px;
  margin: 10px 12px 12px !important;
  padding: 8px 8px 10px;
  background: #fff;
  border: 1px solid #e5e5e5 !important;
  border-top: 1px solid #e5e5e5 !important;
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* 聚焦态：与微信一致的浅绿描边，不改变任何交互逻辑 */
.kf-wx-composer:focus-within {
  border-color: #07c160 !important;
  box-shadow: 0 0 0 2px rgba(7, 193, 96, .12);
}

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

.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;
}

.kf-wx-composer .editable {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 210px;
  padding: 6px 8px !important;
  font-size: 14px;
  line-height: 1.65;
  color: #1f1f1f;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  box-sizing: border-box;
  word-break: break-word;
}

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

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

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

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

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

.kf-wx-composer .chat-btn-wrapper {
  order: 2;
  /* 置为 static，让内部 .emoji-box 的定位基准改为整张输入卡片 */
  position: static !important;
  padding: 8px 2px 0 !important;
  border-top: 1px solid #f2f2f2;
  margin-top: 6px;
  min-height: 44px;
  box-sizing: border-box;
}

.kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item {
  margin-left: 14px !important;
  border-radius: 6px;
  transition: background-color .15s ease;
}

.kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item:first-child {
  margin-left: 6px !important;
}

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

.kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont {
  font-size: 21px !important;
  color: #4a4a4a !important;
  padding: 4px;
  box-sizing: content-box;
}

/* ---------- 4. 图标替换：话术按钮改为「文件夹」线性图标 ---------- */
/* 只换外观：字体字形置零后用遮罩绘制矢量文件夹，点击事件仍由原有节点承担 */

.kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item .iconfont.iconliaotian {
  font-size: 0 !important;
  display: inline-block;
  width: 21px;
  height: 21px;
  padding: 4px;
  box-sizing: content-box;
  background-color: currentColor;
  -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 / 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%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 / contain no-repeat;
}

/* ---------- 5. 转接按钮让出发送按钮的位置 ---------- */

.kf-wx-composer .chat-btn-wrapper .right-wrapper {
  padding-right: 0 !important;
  margin-right: 104px;
}

.kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item {
  height: 34px;
  padding: 0 6px;
  border-radius: 6px;
  transition: background-color .15s ease;
}

.kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item:hover {
  background-color: #f2f2f2;
}

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

.kf-wx-composer .send-btn {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  margin: 0 !important;
  z-index: 30;
}

.kf-wx-composer .send-btn .btns {
  width: auto !important;
  min-width: 80px;
  height: 34px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border-color: #07c160 !important;
  background: #07c160 !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(7, 193, 96, .28);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.kf-wx-composer .send-btn .btns:hover {
  background: #06ad56 !important;
  border-color: #06ad56 !important;
  box-shadow: 0 3px 10px rgba(7, 193, 96, .34);
}

.kf-wx-composer .send-btn .btns:active {
  transform: translateY(1px);
}

.kf-wx-composer .send-btn .btns[disabled],
.kf-wx-composer .send-btn .btns.ivu-btn[disabled] {
  background: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- 7. 表情面板：保留原结构，仅收敛尺寸并跟随底部工具栏上弹 ---------- */

.kf-wx-composer .chat-btn-wrapper .emoji-box {
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  /* 定位基准已改为整张输入卡片：面板整体浮在卡片正上方，不遮挡正在输入的文本 */
  bottom: calc(100% + 8px) !important;
  transform: none !important;
  width: min(560px, 100%) !important;
  height: 270px !important;
  max-height: 46vh;
  border-radius: 8px !important;
}

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

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

@media (max-width: 1366px) {
  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    margin: 8px 8px 10px !important;
    min-height: 184px;
  }

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

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

@media (max-width: 1024px) {
  .kf-wx-composer .chat-btn-wrapper .left-wrapper .icon-item {
    margin-left: 10px !important;
  }

  .kf-wx-composer .chat-btn-wrapper .right-wrapper {
    margin-right: 88px;
  }

  .kf-wx-composer .send-btn .btns {
    min-width: 66px;
    padding: 0 14px !important;
  }
}

@media (max-width: 820px) {
  .kf-wx-composer .chat-btn-wrapper .right-wrapper .icon-item span {
    display: none;
  }

  .content-wrapper .chat-content .chat-textarea.kf-wx-composer {
    min-height: 172px;
  }
}