/* CNFX 网页聊天挂件
   自带 --cc-* 命名空间：前台和 admin3 有两套同名不同值的令牌
   （前台 --radius-sm:4px / admin 5px；前台 --space-4:1rem / admin 16px），
   不隔离的话挪个页面就变色。fallback 链是「前台优先 → admin → 硬值」。 */
:root{
  --cc-brand:var(--primary-dark,var(--color-primary,#0A2540));
  --cc-surface:var(--white,#fff);
  --cc-soft:var(--gray-200,#F1F4F9);
  --cc-line:var(--gray-300,#E2E8F0);
  --cc-ink:var(--gray-900,#1A202C);
  --cc-text:var(--gray-800,#2D3748);
  --cc-muted:var(--gray-600,#718096);
  --cc-ok:#2f855a; --cc-warn:#c58a12; --cc-bad:#d13b3b;
  --cc-r:12px; --cc-r-s:8px; --cc-r-pill:999px;
  --cc-z-fab:2100; --cc-z-panel:2110;
  --cc-fab:56px; --cc-panel-w:384px;
  --cc-ease:cubic-bezier(.2,.7,.3,1);
}

/* ── 气泡按钮：尺寸写死不靠 padding 撑，图标内联 SVG 不用 Font Awesome
      （FA 走 CDN，字体到达前是 0×0、到达后撑开，白送一次 CLS） ── */
.cc-fab{
  position:fixed; z-index:var(--cc-z-fab);
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:var(--cc-fab); height:var(--cc-fab);
  display:flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer;
  border-radius:var(--cc-r-pill);
  background:var(--cc-brand); color:#fff;
  box-shadow:0 6px 20px rgba(10,37,64,.28);
  transition:transform .18s var(--cc-ease), box-shadow .18s var(--cc-ease), opacity .18s var(--cc-ease);
  text-decoration:none;
}
.cc-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(10,37,64,.34); }
.cc-fab:focus-visible{ outline:2px solid var(--cc-brand); outline-offset:3px; }
.cc-fab__dot{ position:absolute; top:10px; right:10px; width:9px; height:9px;
  border-radius:var(--cc-r-pill); background:var(--cc-bad); box-shadow:0 0 0 2px var(--cc-brand); }
/* 询盘表单进视口时让位：用户已经在做转化动作，聊天入口退成备用，但不隐藏 */
html.cc-yield .cc-fab{ transform:scale(.72); opacity:.55; }
/* 询盘表单自己留出气泡高度——纯 CSS，AMP 页同样适用 */
#inquiry-form,.rfq{ padding-bottom:88px; }

/* ── 面板 ── */
.cc-panel{
  position:fixed; z-index:var(--cc-z-panel);
  right:20px; bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:var(--cc-panel-w); height:min(620px,calc(100vh - 130px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cc-surface); border:1px solid var(--cc-line);
  border-radius:var(--cc-r);
  box-shadow:0 24px 60px -20px rgba(10,37,64,.45),0 2px 8px rgba(10,37,64,.08);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,'Inter','PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--cc-text);
  opacity:0; transform:translateY(8px);
  transition:opacity .18s var(--cc-ease),transform .18s var(--cc-ease);
}
.cc-panel.is-on{ opacity:1; transform:none; }
.cc-panel[hidden]{ display:none; }

.cc-hd{ display:flex; align-items:center; gap:10px; padding:0 12px 0 16px;
  height:56px; flex:none; border-bottom:1px solid var(--cc-line); background:var(--cc-brand); color:#fff; }
.cc-hd h2{ margin:0; font-size:14px; font-weight:600; line-height:1.2; color:#fff; }
.cc-hd p{ margin:2px 0 0; font-size:11.5px; opacity:.72; line-height:1.2; }
.cc-hd .cc-sp{ margin-left:auto; display:flex; gap:2px; }
.cc-ib{ width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#fff; cursor:pointer; border-radius:var(--cc-r-s);
  font-size:11.5px; font-weight:600; opacity:.85; }
.cc-ib:hover{ background:rgba(255,255,255,.14); opacity:1; }

/* ── 身份选择：一句问话 + 三张卡，不是冷冰冰的表单 ── */
.cc-roles{ padding:16px; overflow-y:auto; }
.cc-roles__q{ margin:0 0 12px; font-size:13.5px; color:var(--cc-ink); font-weight:600; }
.cc-role{ display:block; width:100%; text-align:left; margin-bottom:8px;
  padding:11px 13px; border:1px solid var(--cc-line); border-radius:var(--cc-r-s);
  background:var(--cc-surface); cursor:pointer; transition:border-color .12s,background .12s; }
.cc-role:hover{ border-color:var(--cc-brand); background:var(--cc-soft); }
.cc-role[aria-checked="true"]{ border-color:var(--cc-brand); border-width:1.5px; background:#F0F4F9; }
.cc-role b{ display:block; font-size:13.5px; font-weight:600; color:var(--cc-ink); }
.cc-role span{ display:block; font-size:12px; color:var(--cc-muted); margin-top:2px; line-height:1.45; }
/* 「先不选直接说」永远在——门槛不能把达成条件的路径本身挡死 */
.cc-skip{ display:block; width:100%; margin-top:4px; padding:8px; border:0; background:none;
  color:var(--cc-muted); font-size:12.5px; cursor:pointer; text-decoration:underline; }

/* ── 消息区 ── */
.cc-body{ flex:1; overflow-y:auto; padding:14px 16px; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:10px; }
.cc-msg{ max-width:78%; padding:8px 12px; border-radius:var(--cc-r); font-size:14px; line-height:1.55;
  word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap; }
.cc-msg.out{ align-self:flex-end; background:var(--cc-brand); color:#fff; border-bottom-right-radius:4px; }
.cc-msg.in { align-self:flex-start; background:var(--cc-soft); color:var(--cc-text); border-bottom-left-radius:4px; }
.cc-msg.sys{ align-self:center; max-width:94%; background:none; color:var(--cc-muted);
  font-size:12.5px; text-align:center; padding:6px 0; border-top:1px solid var(--cc-line);
  border-bottom:1px solid var(--cc-line); border-radius:0; }
.cc-msg.is-failed{ border-left:2px solid var(--cc-bad); }
.cc-t{ font-size:11.5px; color:var(--cc-muted); align-self:flex-end; margin-top:-6px; }
.cc-msg.in + .cc-t{ align-self:flex-start; }
.cc-more{ align-self:center; border:1px solid var(--cc-line); background:var(--cc-surface);
  color:var(--cc-muted); font-size:12.5px; padding:5px 12px; border-radius:var(--cc-r-pill); cursor:pointer; }

/* 骨架：点击后立刻有东西看，INP 测到的是这一帧 */
.cc-skel{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.cc-skel i{ height:32px; border-radius:var(--cc-r); background:var(--cc-soft);
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  background-size:200% 100%; animation:cc-sh 1.4s linear infinite; }
.cc-skel i:nth-child(1){ width:72%; align-self:flex-start; }
.cc-skel i:nth-child(2){ width:48%; align-self:flex-end; }
.cc-skel i:nth-child(3){ width:84%; align-self:flex-start; }
@keyframes cc-sh{ from{background-position:200% 0} to{background-position:-200% 0} }

/* ── 联系方式：不劝退的时机是「聊了几句之后」，不是进门就问 ── */
.cc-contact{ flex:none; padding:10px 16px; border-top:1px solid var(--cc-line); background:#FFFBEB; }
.cc-contact p{ margin:0 0 6px; font-size:12.5px; color:#8a5a00; line-height:1.5; }
.cc-contact .row{ display:flex; gap:6px; }
.cc-contact input{ flex:1; min-width:0; height:32px; padding:0 10px; font-size:13px;
  border:1px solid var(--cc-line); border-radius:var(--cc-r-s); }
.cc-contact button{ height:32px; padding:0 12px; border:0; border-radius:var(--cc-r-s);
  background:var(--cc-brand); color:#fff; font-size:12.5px; cursor:pointer; }
.cc-contact .x{ background:none; color:var(--cc-muted); padding:0 6px; }

/* ── 输入区 ── */
.cc-in{ flex:none; display:flex; gap:8px; align-items:flex-end;
  padding:10px 12px; border-top:1px solid var(--cc-line); }
.cc-in textarea{ flex:1; min-height:38px; max-height:120px; resize:none;
  padding:9px 11px; font:14px/1.45 inherit; color:var(--cc-text);
  border:1px solid var(--cc-line); border-radius:var(--cc-r-s); outline:none; }
.cc-in textarea:focus{ border-color:var(--cc-brand); }
.cc-in button{ flex:none; width:38px; height:38px; border:0; border-radius:var(--cc-r-s);
  background:var(--cc-brand); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.cc-in button:disabled{ opacity:.4; cursor:default; }

.cc-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

@media (max-width:640px){
  .cc-panel{ inset:0; width:auto; height:100dvh; border-radius:0; border:0; }
  .cc-fab{ width:52px; height:52px; }
  .cc-msg{ max-width:84%; }
}
@media (prefers-reduced-motion:reduce){
  .cc-fab,.cc-panel{ transition-duration:.01ms; }
  .cc-skel i{ animation:none; }
}

/* [hidden] 只是把 display 设成 none 的**默认样式**，任何显式 display 都会盖掉它。
   .cc-in{display:flex} / .cc-roles{...} 正好如此——实测身份还没选，输入框就露出来了。
   这类 bug 很隐蔽：HTML 上明明写着 hidden，看起来"应该"生效。 */
.cc-panel [hidden]{ display:none !important; }