/**
 * CRMChat PC 在线会话 ENPG 品牌覆盖 v2
 * 部署：public/admin/css/crmchat-pc-ui-overrides.css
 * index.html：<link href="/admin/css/crmchat-pc-ui-overrides.css?v=20260619" rel=stylesheet>
 *
 * ENPG：#033558 · #054a6e · #022c44 · 底 #F8F8F8 · 字 #1A1A1A · 边 #EDEDED
 */

/* ==========================================================================
 * 0. 根布局：iframe 嵌入铺满；去掉 CRM 自带顶栏/侧栏（由商城壳层提供顶栏）
 * ========================================================================== */

html,
body,
#app {
  background: #f8f8f8 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

#app .pc_customerServer,
.pc_customerServer {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#app .pc_customerServer > .fixed,
.pc_customerServer > .fixed {
  display: none !important;
}

#app .pc_customerServer_container,
.pc_customerServer_container,
#app .pc_customerServer_container.max-width_advertisement,
#app .pc_customerServer_container.max-width_con,
.pc_customerServer_container.max-width_advertisement,
.pc_customerServer_container.max-width_con {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8f8f8 !important;
}

#app .layout_content,
.layout_content {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

#app .layout_content .layout_customerServer_content,
.layout_content .layout_customerServer_content {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: none !important;
  background: #f8f8f8 !important;
}

/* 右侧测试广告栏：嵌入商城时必须隐藏 */
#app .layout_content .pc_customerServer_container_advertisement,
.layout_content .pc_customerServer_container_advertisement,
#app .pc_customerServer_container_advertisement,
.pc_customerServer_container_advertisement {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 商城壳已有顶栏 + 关闭，隐藏 CRM 顶栏避免双层 */
#app .pc_customerServer_container_header,
.pc_customerServer_container_header,
html body #app .pc_customerServer_container_header[data-v-f27916bc] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ==========================================================================
 * 1. 消息区
 * ========================================================================== */

#app .pc_customerServer_container_content,
.pc_customerServer_container_content {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8f8f8 !important;
}

#app .pc_customerServer_container_content .scroll_content,
.pc_customerServer_container_content .scroll_content,
html body #app .pc_customerServer_container_content .scroll_content[data-v-f27916bc] {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 16px 20px 12px !important;
  box-sizing: border-box !important;
  background: #f8f8f8 !important;
}

/* 每条消息容器：时间戳需占满行宽以便居中 */
#app .chart_list_item,
.chart_list_item,
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item[data-v-f27916bc],
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item[data-v-0a009e5a] {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

#app .chart_list_item_time,
.chart_list_item_time,
html body #app .chart_list_item_time[data-v-f27916bc],
html body #app .chart_list_item_time[data-v-0a009e5a],
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item_time[data-v-f27916bc],
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item_time[data-v-0a009e5a] {
  display: block !important;
  width: max-content !important;
  max-width: calc(100% - 40px) !important;
  margin: 16px auto 12px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #999999 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  clear: both !important;
}

#app .chart_list_item_content,
.chart_list_item_content,
html body #app .chart_list_item_content[data-v-f27916bc] {
  width: 100% !important;
  padding: 6px 0 !important;
  align-items: flex-start !important;
}

#app .chart_list_item_avatar,
.chart_list_item_avatar,
html body #app .chart_list_item_avatar[data-v-f27916bc] {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

#app .chart_list_item_avatar img,
.chart_list_item_avatar img {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* 客服消息（左） */
#app .chart_list_item_content .chart_list_item_text,
.chart_list_item_content .chart_list_item_text,
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item_text[data-v-f27916bc] {
  max-width: min(72%, 420px) !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #ededed !important;
  border-radius: 12px 12px 12px 4px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 用户消息（右） */
#app .chart_list_item .right-box .chart_list_item_text,
.chart_list_item .right-box .chart_list_item_text,
html body #app .pc_customerServer_container_content .scroll_content .chart_list_item .right-box .chart_list_item_text[data-v-f27916bc] {
  max-width: min(72%, 420px) !important;
  background: linear-gradient(160deg, #e5f2f6 0%, #d0e8f0 100%) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(3, 53, 88, 0.14) !important;
  border-radius: 12px 12px 4px 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-shadow: 0 2px 10px rgba(3, 53, 88, 0.08) !important;
  text-align: left !important;
}

#app .chart_list_item .right-box .chart_list_item_avatar,
.chart_list_item .right-box .chart_list_item_avatar {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

#app .chart_list_item_img img,
.chart_list_item_img img {
  border-radius: 10px !important;
}

#app .chart_list_item_imgOrText,
.chart_list_item_imgOrText,
html body #app .chart_list_item .chart_list_item_imgOrText[data-v-f27916bc] {
  background: #ffffff !important;
  border: 1px solid #ededed !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 2px 10px rgba(3, 53, 88, 0.06) !important;
}

#app .chart_list_item_imgOrText .order-wrapper .order-info .price-box,
.chart_list_item_imgOrText .order-wrapper .order-info .price-box {
  color: #033558 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
 * 2. 底部输入区（压缩默认 180px 过高 footer）
 * ========================================================================== */

#app .pc_customerServer_container_footer,
.pc_customerServer_container_footer,
html body #app .pc_customerServer_container_footer[data-v-f27916bc] {
  flex-shrink: 0 !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid #ededed !important;
  padding: 12px 16px 14px !important;
  box-sizing: border-box !important;
}

#app .pc_customerServer_container_footer_header_handle,
.pc_customerServer_container_footer_header_handle {
  margin-bottom: 8px !important;
}

#app .pc_customerServer_container_footer_header_handle > div,
.pc_customerServer_container_footer_header_handle > div {
  opacity: 0.7 !important;
  transition: opacity 0.15s ease !important;
}

#app .pc_customerServer_container_footer_header_handle > div:hover,
.pc_customerServer_container_footer_header_handle > div:hover {
  opacity: 1 !important;
}

#app .pc_customerServer_container_footer_input > div,
.pc_customerServer_container_footer_input > div,
html body #app .pc_customerServer_container_footer_input > div[data-v-f27916bc] {
  height: auto !important;
  min-height: 72px !important;
  max-height: 120px !important;
  background: #fafafa !important;
  border: 1px solid #ededed !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

#app .pc_customerServer_container_footer_input > div:focus-within,
.pc_customerServer_container_footer_input > div:focus-within {
  border-color: #033558 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(3, 53, 88, 0.1) !important;
}

#app .pc_customerServer_container_footer_input-textarea,
.pc_customerServer_container_footer_input-textarea {
  color: #1a1a1a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

#app .pc_customerServer_container_footer_handle,
.pc_customerServer_container_footer_handle {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

#app .pc_customerServer_container_footer_handle_send,
.pc_customerServer_container_footer_handle_send,
html body #app .pc_customerServer_container_footer_handle_send[data-v-f27916bc] {
  width: auto !important;
  min-width: 72px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(3, 53, 88, 0.28) !important;
  cursor: pointer !important;
}

#app .pc_customerServer_container_footer_handle_send:hover,
.pc_customerServer_container_footer_handle_send:hover {
  opacity: 0.92 !important;
}

#app .pc_customerServer_container_footer_emoji,
.pc_customerServer_container_footer_emoji {
  border: 1px solid #ededed !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.12) !important;
  background: #ffffff !important;
}

/* ==========================================================================
 * 3. 商品条
 * ========================================================================== */

#app .productMessage_container,
.productMessage_container {
  background: #ffffff !important;
  border-bottom: 1px solid #ededed !important;
}

#app .productMessage_container_content_priceOrHandle > div:nth-child(2),
.productMessage_container_content_priceOrHandle > div:nth-child(2) {
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border-radius: 999px !important;
}

/* ==========================================================================
 * 4. 精简 footer（chunk-c8d315d0 备用）
 * ========================================================================== */

#app .mobel_customerServer_container_footer .sendMessage-primary,
.mobel_customerServer_container_footer .sendMessage-primary {
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border-radius: 999px !important;
}

html body #app .pc_customerServer_container_content .scroll_content .chart_list_item .right-box .chart_list_item_text[data-v-0a009e5a] {
  background: linear-gradient(160deg, #e5f2f6 0%, #d0e8f0 100%) !important;
  border: 1px solid rgba(3, 53, 88, 0.14) !important;
}

#app .primary_color,
.primary_color {
  color: #033558 !important;
}

/* ==========================================================================
 * 5. 隐藏 CRM 品牌脚注
 * ========================================================================== */

#app .pc_customerServer_container_footer_copyright,
.pc_customerServer_container_footer_copyright,
#app .crmchat_link,
.crmchat_link,
#app .copyright,
.copyright {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
 * 6. 滚动条
 * ========================================================================== */

#app .pc_customerServer_container_content .scroll_content::-webkit-scrollbar,
.pc_customerServer_container_content .scroll_content::-webkit-scrollbar {
  width: 6px;
}

#app .pc_customerServer_container_content .scroll_content::-webkit-scrollbar-thumb,
.pc_customerServer_container_content .scroll_content::-webkit-scrollbar-thumb {
  background: rgba(3, 53, 88, 0.22) !important;
  border-radius: 6px !important;
}