/**
 * PC 客服工作台三栏自适应布局 + 左右栏收缩 / 展开（增量样式）
 *
 * 适用页面：/kefu/pc_list（客服工作台 → 接待页）。
 * 生效条件：由 kefu-layout-pc.js 给根节点 .kefu-layouts 打上 kf-wb-layout 标记，
 *          并把收缩状态类 kf-wb-left-collapsed / kf-wb-right-collapsed 挂在该根节点上。
 *
 * 改造边界（重要）：
 * - 只覆盖布局与视觉，不改 DOM 模板、不改事件绑定、不改接口与消息数据；
 * - 与 kefu-context.css、kefu-composer-pc.css 共存：本文件在其后加载，仅覆盖尺寸与定位相关的少量规则；
 * - 收缩仅把列宽过渡到 0 并裁切，不销毁节点、不重置列表数据，展开后原有状态与滚动位置保持不变。
 *
 * 断点说明（可验证）：原编译样式为 .content-wrapper 固定 1200x808、左列 320、中列 600、右列 280。
 * 本文件在视口 >= 992px 时替换为弹性三栏；< 992px 保持原有实现（该区间由 kefu-context.css 负责）。
 */

/* ============================================================
   1. 外层骨架：整屏自适应、卡片化容器
   ============================================================ */

@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout {
    padding: 14px !important;
    height: 100vh !important;
    min-height: 560px;
    box-sizing: border-box;
    overflow: auto !important;
    background: #eef1f5 !important;
  }

  .kefu-layouts.kf-wb-layout > .content-wrapper {
    width: 100% !important;
    max-width: 1560px;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 28px rgba(21, 42, 74, .10), 0 1px 2px rgba(21, 42, 74, .06);
  }

  /* 三栏容器：宽度用 CSS 变量集中管理，收缩时变量不变、仅列宽归零 */
  .kefu-layouts.kf-wb-layout .container {
    --kf-left-w: clamp(232px, 18.6vw, 300px);
    --kf-right-w: clamp(224px, 17vw, 280px);
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
}

/* 宽度档位：由 kefu-layout-pc.js 按容器实际宽度写入 data-kf-wb，
   同一套变量同时驱动列宽、收缩动画与把手位置，避免多份断点各写一套数值。 */
@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout[data-kf-wb="wide"] .container {
    --kf-left-w: clamp(272px, 18.6vw, 320px);
    --kf-right-w: clamp(256px, 17vw, 300px);
  }

  .kefu-layouts.kf-wb-layout[data-kf-wb="mid"] .container {
    --kf-left-w: clamp(216px, 21vw, 252px);
    --kf-right-w: clamp(200px, 19vw, 236px);
  }

  /* compact / narrow 档默认收起右栏或左右栏，变量仍保留展开时的合理宽度 */
  .kefu-layouts.kf-wb-layout[data-kf-wb="compact"] .container {
    --kf-left-w: clamp(200px, 24vw, 236px);
    --kf-right-w: clamp(184px, 22vw, 216px);
  }

  .kefu-layouts.kf-wb-layout[data-kf-wb="narrow"] .container {
    --kf-left-w: clamp(184px, 26vw, 216px);
    --kf-right-w: clamp(168px, 24vw, 196px);
  }
}

/* ============================================================
   2. 左列（会话列表）：宽度跟随变量、高度撑满、可平滑收缩
   ============================================================ */

@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout .container > .chatList {
    flex: 0 0 auto;
    width: var(--kf-left-w) !important;
    height: 100% !important;
    min-width: 0;
    overflow: hidden;
    transition: width .26s cubic-bezier(.4, 0, .2, 1);
  }

  /* 列表滚动区由固定 500px 改为占满剩余高度 */
  .kefu-layouts.kf-wb-layout .container > .chatList > .scroll-box {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
  }

  .kefu-layouts.kf-wb-layout.kf-wb-left-collapsed .container > .chatList {
    width: 0 !important;
    border-right-width: 0 !important;
  }

  /* 列表头部两个页签原为固定 52px 内边距，列宽收窄时会挤压文字，改为随列宽收敛 */
  .kefu-layouts.kf-wb-layout .container > .chatList > .tab-head {
    padding: 0 clamp(14px, 3.4vw, 52px) !important;
    min-width: 0;
  }

  /* 会话条目：头像与时间固定，中间信息区弹性，不再按 155px 定宽 */
  .kefu-layouts.kf-wb-layout .chatList .chat-item {
    padding: 12px clamp(8px, 1vw, 12px);
  }

  .kefu-layouts.kf-wb-layout .chatList .chat-item .user-info {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 10px;
  }

  .kefu-layouts.kf-wb-layout .chatList .chat-item .user-info .hd {
    min-width: 0;
  }

  .kefu-layouts.kf-wb-layout .chatList .chat-item .user-info .hd .name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kefu-layouts.kf-wb-layout .chatList .chat-item .right-box {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* ============================================================
   3. 中列（会话区）：吃掉剩余宽度，消息区高度弹性
   ============================================================ */

@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout .chat-content {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .kefu-layouts.kf-wb-layout .chat-body {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0;
    background: #f6f8fa;
  }

  /* 滚动内容由 inline-block 改为块级满宽：消息气泡的百分比上限才能按会话区真实宽度计算 */
  .kefu-layouts.kf-wb-layout .chat-body .happy-scroll-content {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  /* 内容层是 inline-block 时，单靠 row-reverse 无法把客服消息推到会话区右侧；
     这里让条目与内容行都占满可用宽度，右侧消息才能真正贴右并随列宽自适应 */
  .kefu-layouts.kf-wb-layout .chat-body .chat-item {
    width: 100% !important;
    box-sizing: border-box;
  }

  .kefu-layouts.kf-wb-layout .chat-body .chat-item .flex-box {
    width: 100% !important;
    align-items: flex-start;
  }

  /* 昵称标签：左侧消息与气泡左缘对齐，右侧客服消息镜像右对齐，超长省略 */
  .kefu-layouts.kf-wb-layout .chat-body .chat-item > .kf-nick {
    margin: 0 0 4px 56px;
    max-width: calc(100% - 72px);
    font-size: 12px;
    line-height: 1.4;
    color: #8a94a6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kefu-layouts.kf-wb-layout .chat-body .chat-item.right-box > .kf-nick {
    margin: 0 56px 4px 0;
    text-align: right;
  }

  .kefu-layouts.kf-wb-layout #chat_scroll {
    width: 100% !important;
    max-width: 1120px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 消息气泡：原编译样式固定 max-width 320px，宽会话区里显得过窄、
     窄会话区里又会压到边缘；改为按会话区宽度的百分比上限，随列宽自适应。 */
  .kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper {
    max-width: min(78%, 560px) !important;
  }

  .kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper .txt-wrapper {
    word-break: break-word;
  }

  /* 商品 / 订单卡片：宽度不再固定 320px，内部信息区弹性收缩 */
  .kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper .order-wrapper {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper .order-wrapper .order-info {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper .order-wrapper .img-box {
    flex: 0 0 auto;
  }

  .kefu-layouts.kf-wb-layout.kf-wb-right-collapsed .chat-content {
    border-right-width: 0 !important;
  }
}

/* ============================================================
   4. 右列（客户资料）：宽度跟随变量、可平滑收缩
   ============================================================ */

@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout .right_menu {
    flex: 0 0 auto;
    width: var(--kf-right-w);
    min-width: 0;
    overflow: hidden;
    transition: width .26s cubic-bezier(.4, 0, .2, 1);
  }

  /* 只作用于右栏内部的 .right-wrapper；输入区同名元素（转接按钮容器）不受影响 */
  .kefu-layouts.kf-wb-layout .right_menu > .right-wrapper {
    width: 100% !important;
  }

  .kefu-layouts.kf-wb-layout.kf-wb-right-collapsed .right_menu {
    width: 0;
  }
}

/* ============================================================
   5. 收缩 / 展开把手：常驻可点、键盘可达
   ============================================================ */

@media (min-width: 992px) {
  .kefu-layouts.kf-wb-layout .kf-wb-handle {
    position: absolute;
    top: 50%;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 58px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #8a97a6;
    box-shadow: 0 2px 10px rgba(21, 42, 74, .12);
    cursor: pointer;
    opacity: .78;
    transition: left .26s cubic-bezier(.4, 0, .2, 1),
                right .26s cubic-bezier(.4, 0, .2, 1),
                opacity .18s ease,
                background-color .18s ease,
                color .18s ease,
                border-color .18s ease;
  }

  .kefu-layouts.kf-wb-layout .kf-wb-handle:hover,
  .kefu-layouts.kf-wb-layout .kf-wb-handle:focus-visible {
    opacity: 1;
    color: #2d7ff9;
    border-color: #bfd7ff;
    background: #f4f8ff;
  }

  .kefu-layouts.kf-wb-layout .kf-wb-handle:focus-visible {
    outline: 2px solid #2d7ff9;
    outline-offset: 2px;
  }

  .kefu-layouts.kf-wb-layout .kf-wb-handle svg {
    display: block;
    width: 12px;
    height: 12px;
    transition: transform .26s ease;
  }

  /* 展开态：把手骑在分界线上 */
  .kefu-layouts.kf-wb-layout .kf-wb-handle-left {
    left: var(--kf-left-w);
    transform: translate(-50%, -50%);
  }

  .kefu-layouts.kf-wb-layout .kf-wb-handle-right {
    right: var(--kf-right-w);
    transform: translate(50%, -50%);
  }

  /* 收缩态：把手贴边，始终可再次点击展开 */
  .kefu-layouts.kf-wb-layout.kf-wb-left-collapsed .kf-wb-handle-left {
    left: 0;
    transform: translate(0, -50%);
    border-left-color: transparent;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .kefu-layouts.kf-wb-layout.kf-wb-right-collapsed .kf-wb-handle-right {
    right: 0;
    transform: translate(0, -50%);
    border-right-color: transparent;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* 箭头方向跟随状态翻转 */
  .kefu-layouts.kf-wb-layout.kf-wb-left-collapsed .kf-wb-handle-left svg,
  .kefu-layouts.kf-wb-layout.kf-wb-right-collapsed .kf-wb-handle-right svg {
    transform: rotate(180deg);
  }
}

/* ============================================================
   6. 输入区：高度随视口与内容自适应
   ============================================================ */

@media (min-width: 992px) {
  /* 未启用微信风格输入区时的兜底：固定 214px 改为随视口分档 */
  .kefu-layouts.kf-wb-layout .chat-textarea:not(.kf-wx-composer) {
    flex: 0 0 auto;
    height: clamp(176px, 24vh, 236px) !important;
  }

  .kefu-layouts.kf-wb-layout .chat-textarea:not(.kf-wx-composer) .textarea-box {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 微信风格输入区（kefu-composer-pc.css）：最小高度随视口走，输入内容增多时继续向上生长 */
  .kefu-layouts.kf-wb-layout .chat-textarea.kf-wx-composer {
    flex: 0 0 auto;
    min-height: clamp(184px, 23vh, 244px) !important;
  }

  .kefu-layouts.kf-wb-layout .chat-textarea.kf-wx-composer .textarea-box {
    min-height: 0;
  }

  .kefu-layouts.kf-wb-layout .chat-textarea.kf-wx-composer .editable {
    max-height: min(260px, 30vh) !important;
  }
}

/* ============================================================
   7. 窄视口（>= 992px 但较窄）：进一步收敛内边距，避免拥挤
   ============================================================ */

@media (min-width: 992px) and (max-width: 1199px) {
  .kefu-layouts.kf-wb-layout {
    padding: 10px !important;
  }

  .kefu-layouts.kf-wb-layout .chat-textarea.kf-wx-composer {
    margin: 8px 8px 10px !important;
  }
}

 /* ============================================================
   9. 会话区对齐兜底：不依赖媒体查询，任何视口宽度都生效
      —— 客服消息必须贴会话区右缘，昵称与气泡同侧对齐
   ============================================================ */

.kefu-layouts.kf-wb-layout .chat-body .happy-scroll-content {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* 组件会把容器宽度写成「可见宽度 + 20px」，导致内容层右侧多出 20px 被裁；
   这里统一按会话区真实宽度计算，客服头像与气泡才不会被切掉 */
.kefu-layouts.kf-wb-layout .chat-body .happy-scroll-container {
  width: 100% !important;
}

.kefu-layouts.kf-wb-layout #chat_scroll {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item {
  width: 100% !important;
  box-sizing: border-box;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item .flex-box {
  width: 100% !important;
  align-items: flex-start;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item > .kf-nick {
  margin: 0 0 4px 56px;
  max-width: calc(100% - 72px);
  font-size: 12px;
  line-height: 1.4;
  color: #8a94a6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.right-box > .kf-nick {
  margin: 0 56px 4px 0;
  text-align: right;
}

/* 双方消息可读性：长句与长英文串在气泡内断行，行距略放宽 */
.kefu-layouts.kf-wb-layout .chat-body .chat-item .txt-wrapper {
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   10. 客服侧消息兜底右对齐（kf-side-right）
      —— 模板用 kefuInfo.user_ids.indexOf() 判定右侧，user_ids 为空或
         两侧 id 类型不一致时客服消息会整列落到左侧；
         kefu-layout-pc.js 据此补 kf-side-right 类，这里负责与 right-box 同口径的镜像样式
   ============================================================ */

.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right .flex-box {
  flex-direction: row-reverse;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right .avatar {
  margin-right: 0 !important;
  margin-left: 16px !important;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right .msg-wrapper {
  background: #CDE0FF;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right.gary .msg-wrapper {
  background: #F5F5F5;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right > .kf-nick {
  margin: 0 56px 4px 0;
  text-align: right;
}

/* ============================================================
   11. 会话气泡视觉：双方头像、气泡、时间分隔的细节收敛
   ============================================================ */

@media (min-width: 992px) {

.kefu-layouts.kf-wb-layout .chat-body .chat-item .avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #eef1f5;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 气泡：靠头像一侧留缺口，两侧圆角镜像，视觉上能一眼区分谁说的 */
.kefu-layouts.kf-wb-layout .chat-body .chat-item .msg-wrapper {
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(21, 42, 74, .06);
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item.right-box .msg-wrapper,
.kefu-layouts.kf-wb-layout .chat-body .chat-item.kf-side-right .msg-wrapper {
  border-radius: 12px 4px 12px 12px;
}

/* 时间分隔：原创样式每条消息上方一个居中文案，改为浅色分隔标签，降低视觉噪音 */
.kefu-layouts.kf-wb-layout .chat-body .chat-item .time {
  margin: 16px 0 10px;
  font-size: 12px;
  color: #9aa4b2;
}

.kefu-layouts.kf-wb-layout .chat-body .chat-item .time:empty {
  display: none;
}

/* 相邻消息之间收紧，避免同一人连续发言时间距过大 */
.kefu-layouts.kf-wb-layout .chat-body .chat-item {
  margin-bottom: 8px;
}

}