/* ============================================================
 * 文件 / 视频 / 音频消息的会话区展示样式
 * 由 kefu-file-transfer.js 生成节点，类名统一 kf-file- 前缀。
 * 作用域：
 *   访客咨询页（PC 与手机） .chart_list_item_img.kf-file-host
 *   客服工作台会话区        .img-wraper.kf-file-host
 * 原则：
 *   1) 原 <img> 节点不删除，只隐藏，消息数据结构不变；
 *   2) 媒体尺寸随容器自适应，手机上按视口分档收敛；
 *   3) 只覆盖宽高、间距、圆角等呈现属性，不改动任何业务样式。
 * ============================================================ */

/* ---------- 1. 原图片节点隐藏（数据保留，Vue 重渲染不错位） ---------- */
.chart_list_item_img img[data-kf-file-kind],
.img-wraper img[data-kf-file-kind] {
  display: none !important;
}

/* ---------- 2. 宿主容器：按文件类型放宽原有图片宽度限制 ---------- */
/* 访客咨询页原样式把 .chart_list_item_img 限到 200px / 156px，
   视频与文件名塞不进去，这里仅对承载文件的容器改为更宽的自适应档 */
.pc_customerServer_container_content .chart_list_item_img.kf-file-host {
  width: min(78%, 320px) !important;
  max-width: min(78%, 320px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* 客服工作台：.msg-wrapper 自身已限宽，这里给一个固定基准宽度，
   百分比宽度在内容自适应的父级里会出现塌陷 */
.chat-item .msg-wrapper .img-wraper.kf-file-host {
  width: 260px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* ---------- 3. 视频：封面卡（点击后在浮层里播放） ---------- */
.kf-file-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  line-height: 0;
  box-shadow: 0 1px 3px rgba(20, 42, 84, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kf-file-video video,
.kf-file-video .kf-v-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  border-radius: 8px;
  background: #111;
  object-fit: contain;
  /* 封面只负责显示首帧，点击与键盘事件统一落在外层容器上 */
  pointer-events: none;
}

.kf-file-video:focus-visible {
  outline: 2px solid #3875ea;
  outline-offset: 2px;
}

/* 居中播放按钮：纯展示，不参与命中 */
.kf-file-video .kf-v-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .15s ease, background-color .15s ease;
}

.kf-file-video .kf-v-play svg {
  display: block;
  margin-left: 2px;
}

.kf-file-video:hover .kf-v-play {
  background: rgba(0, 0, 0, .6);
}

.kf-file-video:active .kf-v-play {
  transform: translate(-50%, -50%) scale(.94);
}

.kf-file-video .kf-v-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  pointer-events: none;
}

/* ---------- 4. 音频 ---------- */
.kf-file-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(20, 42, 84, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 42, 84, 0.06);
}

.kf-file-audio .kf-file-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(56, 117, 234, 0.1);
  color: #3875ea;
}

.kf-file-audio audio {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 32px;
  display: block;
}

/* ---------- 5. 文件卡片（表格 / 压缩包 / 文档等） ---------- */
.kf-file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(20, 42, 84, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 42, 84, 0.06);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.kf-file-card:active {
  background: #f5f7fa;
}

.kf-file-card .kf-file-ico {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(56, 117, 234, 0.1);
  color: #3875ea;
}

.kf-file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.kf-file-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 18px;
  color: #1f2d3d;
}

.kf-file-tip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 15px;
  color: #8a94a6;
}

/* ---------- 6. 响应式收敛 ---------- */
/* 6.1 手机端（≤767px）：媒体宽度按屏宽比例收敛，避免挤压气泡 */
@media (max-width: 767px) {
  .pc_customerServer_container_content .chart_list_item_img.kf-file-host {
    width: min(72%, 280px) !important;
    max-width: min(72%, 280px) !important;
  }

  .kf-file-video video {
    max-height: 200px;
  }

  .kf-file-audio,
  .kf-file-card {
    padding: 8px 10px;
    gap: 8px;
  }

  .kf-file-name {
    font-size: 12px;
    line-height: 17px;
  }

  .kf-file-audio .kf-file-ico {
    width: 26px;
    height: 26px;
  }

  .kf-file-card .kf-file-ico {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

/* 6.2 窄屏（≤359px）：再收一档，文件名与提示保持单行省略 */
@media (max-width: 359px) {
  .pc_customerServer_container_content .chart_list_item_img.kf-file-host {
    width: min(68%, 240px) !important;
    max-width: min(68%, 240px) !important;
  }

  .kf-file-video video {
    max-height: 168px;
  }

  .kf-file-tip {
    font-size: 10px;
  }
}

/* 6.3 工作台窄窗口（≤1200px）：跟随 .msg-wrapper 的收窄口径 */
@media (max-width: 1200px) {
  .chat-item .msg-wrapper .img-wraper.kf-file-host {
    width: 228px !important;
  }

  .kf-file-video video {
    max-height: 168px;
  }
}

/* 6.4 横屏手机（高度不足）：视频高度优先让位给会话可读性 */
@media (max-height: 460px) and (orientation: landscape) {
  .kf-file-video video {
    max-height: 150px;
  }
}

/* ============================================================
 * 7. 文件入口宫格面板（访客手机页「＋」）
 * 由 kefu-file-transfer.js 生成 .kf-fp 节点，类名统一 kf-fp- 前缀。
 * 版式参考微信「＋」面板：浅灰底、4 列栅格、白色圆角磁贴 + 灰色标签。
 * 面板作为 .footer_customerServer_container 的最后一个子节点，
 * 只通过自身高度把会话区顶起，不做绝对定位、不覆盖消息区。
 * ============================================================ */

.kf-fp {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 12px calc(16px + env(safe-area-inset-bottom));
  background: #ededed;
}

/* 开关只切换父容器的 .kf-fp-open，样式全部落在这一处，便于单独调整 */
.footer_customerServer_container.kf-fp-open .kf-fp {
  display: block;
}

/* 面板与表情面板互斥：同一时刻只展示一个，避免两组高度叠加 */
.footer_customerServer_container.kf-fp-open
  .mobel_customerServer_container_footer_emojiList {
  display: none !important;
}

/* 「在线客服」浮标绝对定位在输入栏上方，面板展开时会压住磁贴，随之隐藏 */
.footer_customerServer_container.kf-fp-open .crmchat_link {
  display: none !important;
}

.kf-fp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 8px;
  align-items: start;
}

.kf-fp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.kf-fp-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
  color: #4a4a4a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background-color 0.15s ease;
}

.kf-fp-tile svg {
  display: block;
  width: 26px;
  height: 26px;
}

.kf-fp-cell:active .kf-fp-tile {
  background: #f2f2f2;
}

.kf-fp-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: #8a8a8a;
}

/* 7.1 窄屏（≤359px）：磁贴与标签各收一档，4 列仍保持等宽 */
@media (max-width: 359px) {
  .kf-fp {
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
  }

  .kf-fp-grid {
    gap: 12px 6px;
  }

  .kf-fp-tile {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .kf-fp-tile svg {
    width: 23px;
    height: 23px;
  }

  .kf-fp-label {
    font-size: 11px;
    line-height: 15px;
  }
}

/* 7.2 大屏（≥414px）：磁贴放大到接近参考图比例，栅格列数不变 */
@media (min-width: 414px) {
  .kf-fp-tile {
    width: 60px;
    height: 60px;
  }
}

/* 7.3 横屏且高度不足：压缩上下留白，把高度留给会话区 */
@media (max-height: 460px) and (orientation: landscape) {
  .kf-fp {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .kf-fp-grid {
    gap: 10px 8px;
  }

  .kf-fp-tile {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
 * 8. 客服工作台：图片按钮的多格式选型入口
 * 原生 input 由 kefu-file-transfer.js 插入到 .icon-item 内，
 * 行内已做隐藏；这里再兜一层，保证任何情况下都不参与布局、
 * 不改变图标的尺寸与点击区域。
 * ============================================================ */

/* 不用 display:none：部分内核下隐藏的 file input 无法被 click() 唤起，
   这里改为移出可视区 + 不接收指针事件，效果等价且不占布局 */
.chat-textarea .left-wrapper .icon-item .kf-wb-input {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

/* 8.1 工作台宽窗口（≥1201px）：媒体区随窗口宽度伸缩，
   下限 240px 保证文件名可读，上限 320px 与访客电脑端保持一致 */
@media (min-width: 1201px) {
  .chat-item .msg-wrapper .img-wraper.kf-file-host {
    width: clamp(240px, 24vw, 320px) !important;
  }

  .kf-file-video video,
  .kf-file-video .kf-v-thumb {
    max-height: 260px;
  }
}

/* ============================================================
 * 9. 在线预览浮层（视频 / 音频 / PDF / 文本 / Office / 其它文件）
 * 由 kefu-file-transfer.js 动态创建，类名统一 kf-pv- 前缀。
 * 层级低于全局 toast（2147483600），关闭后节点立即移除。
 * ============================================================ */

.kf-pv {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .55);
  box-sizing: border-box;
}

.kf-pv-panel {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(760px, 100%);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  box-sizing: border-box;
}

.kf-pv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f4;
  box-sizing: border-box;
}

.kf-pv-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #1f2d3d;
}

.kf-pv-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.kf-pv-act {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e2e6ee;
  border-radius: 15px;
  background: #fff;
  color: #3875ea;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.kf-pv-act:hover {
  background: #f5f8ff;
  border-color: #c9d8fb;
}

.kf-pv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f4f8;
  color: #5b6577;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kf-pv-close:hover {
  background: #e6eaf2;
  color: #1f2d3d;
}

.kf-pv-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: #0f172a;
  box-sizing: border-box;
}

.kf-pv-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.kf-pv-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #000;
}

.kf-pv-audio {
  width: min(560px, 90%);
  max-width: 100%;
}

.kf-pv-text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px;
  overflow: auto;
  background: #fff;
  color: #1f2d3d;
  font-family: Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}

.kf-pv-notice {
  padding: 28px 24px;
  text-align: center;
  color: #dbe3f0;
}

.kf-pv-notice-main {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 22px;
}

.kf-pv-notice-sub {
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #9aa7bd;
}

/* 9.1 手机端：浮层铺满视口，顶部操作条保持单行可点 */
@media (max-width: 767px) {
  .kf-pv {
    padding: 0;
  }

  .kf-pv-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .kf-pv-head {
    padding: 10px 12px;
    gap: 8px;
  }

  .kf-pv-title {
    font-size: 13px;
  }

  .kf-pv-act {
    height: 28px;
    padding: 0 10px;
  }

  .kf-pv-close {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .kf-file-video .kf-v-play {
    width: 40px;
    height: 40px;
  }
}