/* ============================================================
   CRMChat 客户端聊天页 · 微信极简主题（方案C）v4
   作用域：html[data-ui="c"]，仅在聊天页生效
   v4 变更：字体整体放大；兜底打标适配 /chat/index 入口
   ============================================================ */

@media screen and (max-width: 820px) {

html[data-ui="c"],
html[data-ui="c"] body {
  background: #EDEDED !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-ui="c"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- 整体容器 ---------- */
html[data-ui="c"] .pc_customerServer_container {
  background: #EDEDED !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- 顶栏 ---------- */
html[data-ui="c"] .pc_customerServer_container_header {
  background: #EDEDED !important;
  background-image: none !important;
  color: #111 !important;
  height: 56px !important;
  padding: 0 12px !important;
  border-bottom: 1px solid #D9D9D9 !important;
  box-shadow: none !important;
  position: relative !important;
  justify-content: center !important;
}

/* KEFU_HEADER_AVATAR_V1 名字前显示客服头像 */
html[data-ui="c"] .pc_customerServer_container_header_title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  color: #111 !important;
}

html[data-ui="c"] .pc_customerServer_container_header_title img {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  margin-right: 0 !important;
  flex: none !important;
  object-fit: cover;
}

html[data-ui="c"] .pc_customerServer_container_header_title span {
  line-height: 26px !important;
}

html[data-ui="c"] .pc_customerServer_container_header_title::after {
  content: "● 在线";
  display: block !important;
  width: 100% !important;
  text-align: center;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  color: #07C160 !important;
  letter-spacing: .2px;
}

html[data-ui="c"] .pc_customerServer_container_header_handle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #333 !important;
  font-size: 20px !important;
}

/* ---------- 消息区 ---------- */
html[data-ui="c"] .pc_customerServer_container_content,
html[data-ui="c"] .pc_customerServer_container_content .scroll_content {
  background: #EDEDED !important;
  width: 100% !important;
}

html[data-ui="c"] .chart_list_item_time {
  font-size: 12px !important;
  color: #9A9A9A !important;
  margin: 14px auto !important;
  line-height: 17px !important;
}

html[data-ui="c"] .chart_list_item_content {
  align-items: flex-start !important;
  padding: 9px 12px !important;
}

html[data-ui="c"] .chart_list_item_avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 5px !important;
  margin-right: 10px !important;
  flex: none !important;
}

html[data-ui="c"] .chart_list_item_avatar img {
  border-radius: 5px !important;
  object-fit: cover;
}

html[data-ui="c"] .chart_list_item_text {
  background: #FFFFFF !important;
  color: #111 !important;
  border-radius: 5px !important;
  padding: 9px 12px !important;
  /* KEFU_FONT_SMALLER_V1 聊天正文 17px -> 15px */
  font-size: 15px !important;
  line-height: 1.5 !important;
  max-width: 66% !important;
  box-shadow: none !important;
  word-break: break-word !important;
}

/* 自己发的消息：微信绿 */
html[data-ui="c"] .right-box {
  align-items: flex-start !important;
}

html[data-ui="c"] .right-box .chart_list_item_text {
  background: #95EC69 !important;
  color: #111 !important;
  text-align: left !important;
}

html[data-ui="c"] .right-box .chart_list_item_avatar {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

/* 图片消息 */
html[data-ui="c"] .chart_list_item_img,
html[data-ui="c"] .right-box .chart_list_item_img {
  background: transparent !important;
  max-width: 58% !important;
}

html[data-ui="c"] .chart_list_item_img img {
  border-radius: 5px !important;
}

/* 商品/订单卡片 */
html[data-ui="c"] .chart_list_item_imgOrText,
html[data-ui="c"] .right-box .chart_list_item_imgOrText {
  background: #FFFFFF !important;
  border-radius: 5px !important;
  font-size: 15px !important;
}

/* ---------- 底部输入栏 ---------- */
html[data-ui="c"] .mobel_customerServer_container_footer {
  background: #F7F7F7 !important;
  border-top: 1px solid #D9D9D9 !important;
  padding: 8px 10px !important;
  min-height: 56px !important;
  height: auto !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer .iconfont {
  color: #3A3A3A !important;
  font-size: 27px !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer_input {
  background: #FFFFFF !important;
  border-radius: 6px !important;
  height: 38px !important;
  margin: 0 10px !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer_input_con {
  min-height: 38px !important;
}

/* 16px：既满足放大需求，也避免 iOS 聚焦时自动放大页面 */
html[data-ui="c"] .mobel_customerServer_container_footer_input_con textarea {
  font-size: 16px !important;
  line-height: 22px !important;
  padding: 8px 10px !important;
  color: #111 !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer_input_con textarea::placeholder {
  color: #B2B2B2 !important;
  font-size: 16px !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer .sendMessage {
  background: #CCCCCC !important;
  border-radius: 5px !important;
  padding: 7px 13px !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  margin-left: 0 !important;
}

html[data-ui="c"] .mobel_customerServer_container_footer .sendMessage-primary {
  background: #07C160 !important;
}

/* KEFU_COPYRIGHT_HIDE_V1 隐藏底部 CRMChat开源客服系统 版权行 */
html[data-ui="c"] .mobel_customerServer_container_footer .crmchat_link,
html[data-ui="c"] .footer_customerServer_container .crmchat_link,
html[data-ui="c"] .pc_customerServer_container_footer_copyright,
html[data-ui="c"] .advertisement .copyright {
  display: none !important;
}

/* ---------- 客服离线时的留言页 ---------- */
html[data-ui="c"] .customerOutLine_server_header {
  background: #EDEDED !important;
  background-image: none !important;
  color: #111 !important;
  border-bottom: 1px solid #D9D9D9 !important;
  height: 56px !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}

html[data-ui="c"] .customerOutLine_server_header .pc_customerServer_container_header_handle {
  color: #333 !important;
}

html[data-ui="c"] .customerOutLine_server_container {
  background: #EDEDED !important;
  font-size: 16px !important;
}

html[data-ui="c"] .customerOutLine_server_container input,
html[data-ui="c"] .customerOutLine_server_container textarea {
  font-size: 16px !important;
}

html[data-ui="c"] .customerOutLine_server_container .ivu-btn {
  font-size: 16px !important;
}

/* 滚动条更轻 */
html[data-ui="c"] .pc_customerServer_container_content .scroll_content::-webkit-scrollbar {
  width: 0;
}

} /* end @media max-width 820 */

/* KEFU_AVATAR_V1 统一头像尺寸填充 */
@media screen and (max-width: 820px) {
  html[data-ui="c"] .chart_list_item_avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* KEFU_WIDTH_V1 滚动容器按视口宽收敛，避免右侧内容溢出 */
@media screen and (max-width: 820px) {
  html[data-ui="c"] .pc_customerServer_container_content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html[data-ui="c"] .pc_customerServer_container_content .happy-scroll-container,
  html[data-ui="c"] .pc_customerServer_container_content .happy-scroll-content,
  html[data-ui="c"] .pc_customerServer_container_content .scroll_content,
  html[data-ui="c"] .chart_list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html[data-ui="c"] .chart_list_item_content {
    box-sizing: border-box !important;
  }
}