/*!
 * 客服端移动端体验包
 *
 * 只做「手感」相关的事，不改布局骨架（布局在 kefu-mobile.css 里）：
 *   1. 首屏骨架：等 APP 渲染期间不白屏，看着像秒开
 *   2. 点按反馈：会话/按钮按下有颜色变化，解决「点了没反应」的错觉
 *   3. 触控尺寸：列表行高、头像、底部 Tab 都按 44px 起的触控标准放大
 *   4. 输入区安全区：iPhone 底部横条不再压住输入框/底部 Tab
 *   5. 滚动顺滑：去掉 tap 高亮、禁用橡皮筋、聊天气泡宽度收敛
 */

/* ---------------- 1. 首屏骨架 ---------------- */
#kefu-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: opacity 0.24s ease;
  pointer-events: none;
}
#kefu-splash .ks-head {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 600;
  color: #111;
  border-bottom: 1px solid #f0f0f0;
  letter-spacing: 0.3px;
}
#kefu-splash .ks-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  height: 68px;
  box-sizing: border-box;
}
#kefu-splash .ks-avatar {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  flex: none;
}
#kefu-splash .ks-lines {
  flex: 1;
  min-width: 0;
}
#kefu-splash .ks-l1 {
  height: 13px;
  width: 38%;
  border-radius: 4px;
  margin-bottom: 9px;
}
#kefu-splash .ks-l2 {
  height: 11px;
  width: 68%;
  border-radius: 4px;
}
#kefu-splash .ks-sk {
  background: linear-gradient(90deg, #f2f3f5 25%, #e9ebef 37%, #f2f3f5 63%);
  background-size: 400% 100%;
  animation: ks-shimmer 1.25s ease infinite;
}
@keyframes ks-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------- 2/3/4/5 手机端手感 ---------------- */
@media screen and (max-width: 640px) {
  /* 点按反馈：会话行、按钮、底部 Tab */
  html,
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  .wk-conversationlist-item {
    min-height: 68px;
    transition: background-color 0.12s ease;
  }
  .wk-conversationlist-item:active,
  .wk-conversationlist-item.is-active {
    background-color: #ececec !important;
  }
  .wk-conversationlist-item-avatar-box img,
  .wk-conversationlist-item-avatar-box svg {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
  }
  .wk-conversationlist-item-name {
    font-size: 15.5px !important;
    font-weight: 550;
    color: #111 !important;
  }
  .wk-conversationlist-item-time {
    font-size: 11.5px !important;
    color: #9aa0a6 !important;
  }
  .wk-conversationlist-item-lastmsg {
    font-size: 13px !important;
    color: #9096a0 !important;
    line-height: 1.45;
  }
  .wk-conversationlist-item-reddot {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    border-radius: 9px;
    padding: 0 5px;
    box-sizing: border-box;
  }

  /* 聊天页头部：吸顶 + 触控高度 */
  [class*="wk-chat-header"],
  .wk-chat-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 48px;
    background: rgba(247, 247, 247, 0.96);
    backdrop-filter: saturate(160%) blur(8px);
  }
  [class*="wk-chat-header"] :is(button, [class*="icon"]) {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 消息气泡：宽度收敛，长文本换行更舒服 */
  .wk-message-base-bubble {
    max-width: 76vw !important;
    line-height: 1.5;
    word-break: break-word;
  }
  .wk-message-base-cell {
    margin-bottom: 2px;
  }

  /* 输入区：iPhone 底部横条不再压住输入框 */
  [class*="wk-chat-input"],
  .wk-chat-input {
    padding-bottom: 0 !important;
  }
  [class*="wk-chat-input"] > * {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 底部 Tab：图标 24px、文字 11.5px、点击区域拉满 */
  .wk-main-sider-avatar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }
  .wk-main-sider-avatar:active {
    background: rgba(0, 0, 0, 0.04);
  }
  .wk-main-sider-avatar svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* 滚动容器：惯性滚动 + 不把滚动传给 body */
  .wk-conversationlist,
  [class*="wk-message-list"],
  [class*="wk-chat-message"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 长按头像/消息不要弹出系统菜单 */
  .wk-conversationlist-item-avatar-box,
  .wk-message-base-avatar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 弹层/面板的底部安全区 */
  .kefu-workspace,
  .wk-panel,
  [class*="wk-modal"] {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 低端机/省电模式：关掉骨架动画 */
@media (prefers-reduced-motion: reduce) {
  #kefu-splash .ks-sk {
    animation: none;
  }
}

/* ---------------- 进会话时的消息骨架 ---------------- */
#kefu-chat-skel {
  padding: 14px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
#kefu-chat-skel .ks-b {
  display: flex;
  justify-content: flex-start;
}
#kefu-chat-skel .ks-b.right {
  justify-content: flex-end;
}
#kefu-chat-skel .ks-b span {
  display: block;
  height: 34px;
  border-radius: 10px;
}
/* ---------------- 未读小红点：空的时候必须彻底消失 ----------------
 * 背景：主样式只给 .wk-conversationlist-item-reddot 设了 background/color，
 * 尺寸原本靠内容撑开 —— 没有未读时元素还在 DOM 里但宽度为 0，看不见。
 * 我在上面给它加了 min-width:18px / height:18px / padding，
 * 结果「已读」的空徽章变成一个 18px 的纯红圆点 —— 就是「看过了还一直有红点」的原因。
 * 这里把空徽章彻底收掉，恢复原行为。
 */
.wk-conversationlist-item-reddot:empty,
.wk-conversation-unread-count:empty,
.wk-conversationlist-item-reddot[hidden],
.wk-conversation-unread-count[hidden] {
  display: none !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}