/**
 * CRMChat 主题覆盖：① 离线留言页 ② 在线会话页（/chat/mobile），部署在客服站 public/admin/css/。
 *
 * 【重要】须在 public/admin/index.html 内 link 本文件，且尽量放在 **所有 chunk 的 link 之后**（否则异步
 *   CSS 后加载可能用同优先级 !important 盖掉隐藏顶栏）。改后更新 ?v= 以清缓存。
 *   <link rel="stylesheet" href="/admin/css/crmchat-offline-ui-overrides.css?v=20260421" />
 *
 * ENPG 主体色（与 pages/layout/enpg-order、客服顶栏一致）：
 *   主色 #033558 · 页面底 #F8F8F8 · 主字 #1A1A1A · 次字 #999 · 边 #EDEDED
 *
 * 【/chat/customerOutLine】现网 chunk-e6b99f2c 根节点为 .customerOutLine_server（非 .feedback）；
 *   顶栏 .customerOutLine_server_header、提交区 .customerOutLine_server_content_handle，带 scoped data-v-57923fe6。
 */

/* ---------- 现网 customerOutLine 页（chunk-e6b99f2c）：顶栏文案 + 提交按钮 ---------- */
/* 右侧关闭（❌）去掉；标题由伪元素展示「ENPG客服已离线」（原「商城客服已离线」用 font-size:0 隐藏） */
#app .customerOutLine_server_header .pc_customerServer_container_header_handle {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#app .customerOutLine_server_header > span:first-of-type {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

#app .customerOutLine_server_header > span:first-of-type::after {
  content: 'ENPG客服已离线';
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
}

#app .customerOutLine_server_header,
html body #app .customerOutLine_server_header,
#app .customerOutLine_server_header[data-v-57923fe6] {
  background: #ffffff !important;
  background-image: none !important;
  -webkit-background-image: none !important;
  color: #1a1a1a !important;
  border-bottom: 1px solid #ededed !important;
}

#app .customerOutLine_server_content_handle > div,
html body #app .customerOutLine_server_content_handle > div,
#app .customerOutLine_server_content_handle > div[data-v-57923fe6] {
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border-radius: 0.46rem !important;
  box-shadow: 0 0.1rem 0.26rem rgba(3, 53, 88, 0.28) !important;
  color: #ffffff !important;
}

/* ---------- 全页 .feedback（部分打包/旧版）顶栏 + 按钮 ---------- */
#app .feedback > .head,
#app .feedback .head,
.feedback > .head {
  display: flex !important;
  align-items: center !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #ededed !important;
  box-sizing: border-box !important;
}

#app .feedback .head .left-wrapper,
#app .feedback .head .left-wrapper .title,
#app .feedback .head .left-wrapper .txt {
  color: #1a1a1a !important;
}

#app .feedback .head .left-wrapper .txt {
  color: #666666 !important;
}

#app .feedback .head .ivu-icon,
#app .feedback .head [class*='close'] {
  color: #666666 !important;
}

/* 与 App CustomNavBar（kefu-webview）同款 135deg 渐变 */
#app .feedback .sub_btn,
.feedback .sub_btn,
#app .feedback button.sub_btn {
  margin-top: 0.52rem !important;
  height: 0.92rem !important;
  line-height: 0.92rem !important;
  font-size: 0.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.46rem !important;
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  box-shadow: 0 0.1rem 0.26rem rgba(3, 53, 88, 0.28) !important;
}

#app .feedback .sub_btn:active,
.feedback .sub_btn:active {
  opacity: 0.94 !important;
}

#app .feedback .ivu-btn-primary,
#app .feedback button.ivu-btn-primary,
.feedback .ivu-btn-primary {
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 0.1rem 0.26rem rgba(3, 53, 88, 0.28) !important;
}

/* ---------- 离线留言顶栏「商城客服已离线」：白底深字（与 App 顶栏同色系的按钮见 .sub_btn） ---------- */
.feedback-wrapper .head {
  display: flex !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #ededed !important;
  box-sizing: border-box !important;
}

.feedback-wrapper .head .left-wrapper {
  color: #1a1a1a !important;
}

.feedback-wrapper .head .left-wrapper .title {
  color: #1a1a1a !important;
}

.feedback-wrapper .head .left-wrapper .txt {
  color: #666666 !important;
}

/* 若仍有旧版 .head-box 顶栏，同步为白底 */
.feedback-wrapper .head-box {
  display: flex !important;
  background: #ffffff !important;
  border-bottom: 1px solid #ededed !important;
}

/* ---------- 整页：商城同款浅灰底 + 轻微青绿氛围 ---------- */
.feedback-wrapper {
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: calc(0.48rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    165deg,
    #f8f8f8 0%,
    #f4f8f9 42%,
    #fafcfb 100%
  );
}

/* ---------- 主内容卡片（白底 + 顶部分色条 + 轻阴影） ---------- */
.feedback-wrapper .main {
  position: relative !important;
  margin-top: 0 !important;
  margin-left: 0.24rem !important;
  margin-right: 0.24rem !important;
  padding: 0.44rem 0.36rem 0.52rem !important;
  background: #ffffff !important;
  border: 1px solid #ededed !important;
  border-radius: 0.2rem !important;
  box-shadow: 0 0.1rem 0.36rem rgba(3, 53, 88, 0.07), 0 0.02rem 0 rgba(3, 53, 88, 0.03) !important;
  overflow: hidden !important;
}

.feedback-wrapper .main::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.08rem;
  background: linear-gradient(90deg, #022c44 0%, #033558 50%, #054a6e 100%);
  pointer-events: none;
}

/* 提示文案 */
.feedback-wrapper .main > .title {
  font-size: 0.28rem !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  line-height: 1.7 !important;
  margin-bottom: 0.32rem !important;
  padding-top: 0.08rem !important;
}

/* ---------- 表单 ---------- */
.feedback-wrapper .input-box {
  margin-top: 0.22rem !important;
}

.feedback-wrapper .input-box input,
.feedback-wrapper .input-box textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid #ededed !important;
  border-radius: 0.14rem !important;
  background: #fafafa !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.feedback-wrapper .input-box input {
  height: 0.88rem !important;
  padding: 0 0.26rem !important;
  font-size: 0.28rem !important;
  color: #1a1a1a !important;
}

.feedback-wrapper .input-box textarea {
  min-height: 2.4rem !important;
  padding: 0.22rem 0.26rem !important;
  font-size: 0.28rem !important;
  line-height: 1.55 !important;
  color: #1a1a1a !important;
  resize: none !important;
}

.feedback-wrapper .input-box input:focus,
.feedback-wrapper .input-box textarea:focus {
  border-color: #033558 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(3, 53, 88, 0.14) !important;
}

.feedback-wrapper .input-box input::placeholder,
.feedback-wrapper .input-box textarea::placeholder {
  color: #999999 !important;
}

.feedback-wrapper .input-box .ivu-input {
  border-radius: 0.14rem !important;
  border: 1px solid #ededed !important;
  background: #fafafa !important;
  color: #1a1a1a !important;
}

/* ---------- 提交按钮：与 ENPG 顶栏同款青绿渐变（无金色） ---------- */
.feedback-wrapper .sub_btn {
  margin-top: 0.52rem !important;
  height: 0.92rem !important;
  line-height: 0.92rem !important;
  font-size: 0.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.46rem !important;
  background: linear-gradient(
    135deg,
    #033558 0%,
    #054a6e 48%,
    #022c44 100%
  ) !important;
  box-shadow: 0 0.1rem 0.26rem rgba(3, 53, 88, 0.28) !important;
}

.feedback-wrapper .sub_btn:active {
  opacity: 0.94 !important;
}

.feedback-wrapper .sub_btn[disabled] {
  opacity: 0.5 !important;
  box-shadow: none !important;
}

/* ---------- 内嵌弹窗「商城客服已离线」（chunk-015d74e8 .feedback，非 feedback-wrapper） ---------- */
.feedback .feedback-header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #ededed !important;
}

.feedback .feedback-header .sp1 {
  color: #1a1a1a !important;
}

.feedback .feedback-header .ivu-icon {
  color: #666666 !important;
}

.feedback .ivu-btn-primary,
.feedback button.ivu-btn-primary {
  background: linear-gradient(135deg, #033558 0%, #054a6e 48%, #022c44 100%) !important;
  border: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(3, 53, 88, 0.28) !important;
}

.feedback .ivu-btn-primary:hover,
.feedback button.ivu-btn-primary:hover {
  opacity: 0.95 !important;
}

/* =============================================================================
 * 在线会话（CRMChat 移动端 .chat-box，含 /chat/mobile）
 * 类名来源：CRMChat template admin 移动端聊天页；若升级 CRM 后失效，用开发者工具核对 DOM。
 * ============================================================================= */

.chat-box {
  background: #f8f8f8 !important;
}

/*
 * 隐藏 CRMChat 自带蓝顶栏（CRM 客服 / 渐变条）：App 壳层已用 CustomNavBar。
 * 升级 CRM 重新打包后若 scoped hash 变化，请同步改 [data-v-xxxx] 或改 chunk-1e8c2754.*.css 源码段。
 */
/* 不依赖 Vue scoped hash，CRM 升级后仍尽量生效 */
.chat-box .head-box,
.chat-box > .head-box,
.head-box .title-hd,
.head-box[data-v-83149e88],
.chat-box .head-box[data-v-83149e88],
.chat-box .head-box .title-hd[data-v-83149e88] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  opacity: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* 压过 chunk 内同权重规则：提高选择器优先级（线上若蓝条仍在，确认本文件在 chunk 之后加载或提高 ?v=） */
#app .chat-box[data-v-83149e88] > .head-box[data-v-83149e88],
#app .chat-box[data-v-83149e88] .head-box[data-v-83149e88],
html body #app .chat-box .head-box[data-v-83149e88] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* 消息区背景 */
.chat-box .scroll-box {
  background: transparent !important;
}

.chat-scroll-box {
  background: transparent !important;
}

.chat-scroll-box .day-box {
  color: #999999 !important;
  font-size: 0.24rem !important;
}

/* 客服侧气泡（左侧） */
.chat-item:not(.right-box) .msg-box {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #ededed !important;
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.04) !important;
}

/* 用户侧气泡（右侧）：浅青绿底 + 主色边，替代默认浅蓝/浅绿 */
.chat-item.right-box .msg-box {
  background: linear-gradient(160deg, #e5f2f6 0%, #d0e8f0 100%) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(3, 53, 88, 0.15) !important;
  box-shadow: 0 0.04rem 0.14rem rgba(3, 53, 88, 0.08) !important;
}

.chat-item .img-box img {
  border-radius: 0.12rem !important;
}

/* 底部输入区 */
.chat-box .footer-box {
  background: #ffffff !important;
  border-top: 1px solid #ededed !important;
  padding-bottom: calc(0.08rem + env(safe-area-inset-bottom, 0px)) !important;
}

.chat-box .footer-box .input-box {
  background: #fafafa !important;
  border: 1px solid #ededed !important;
  border-radius: 0.36rem !important;
}

.chat-box .footer-box .input-box input,
.chat-box .footer-box .input-box .ivu-input {
  font-size: 0.28rem !important;
  color: #1a1a1a !important;
}

.chat-box .footer-box .input-box .isSend {
  color: #033558 !important;
  font-weight: 600 !important;
}

.chat-box .footer-box .emoji .iconfont,
.chat-box .footer-box .more .iconfont {
  color: #666666 !important;
}

/* 会话区底部「CRMChat开源客服系统」等品牌脚注：完全隐藏 */
.crmchat_link,
.crmchat_link a,
[class*="crmchat_link"],
.chat-scroll-box .crmchat_link,
.chat-box .crmchat_link,
#app .crmchat_link,
.crmchat_link[data-v-83149e88],
a.crmchat_link[data-v-83149e88] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  left: -9999px !important;
}