/* ==========================================================================
   CJEVOK — 实时沟通浮窗（独立组件，浅色主题）
   文件：assets/css/chat-widget.css
   说明：
     - 气泡固定在【右下角】询价清单 FAB 正上方；面板点击后于【屏幕居中】弹出。
     - 滞留 N 秒无交互 → 主动弹出引导气泡（nudge）；点击气泡展开面板。
     - 面板内含 WhatsApp / 微信(企业微信) / 邮箱 / 留言(询价) 四个通道。
     - 依赖：无（自带内联 SVG 图标）；可选读取 window.CJEVOKI18n 做多语言。
   ========================================================================== */
:root {
  --cjv-chat-blue: #2E5496;
  --cjv-chat-navy: #223B54;
  --cjv-chat-accent: #D88A58;
  --cjv-chat-wa: #25D366;
  --cjv-chat-wc: #07C160;
  --cjv-chat-card: #ffffff;
  --cjv-chat-fg: #22303F;
  --cjv-chat-muted: #5A6B7C;
  --cjv-chat-border: #E1E8F0;
  --cjv-chat-shadow: 0 12px 34px rgba(34, 59, 84, 0.18);
}

/* ---------- 触发气泡（右下角，询价清单 FAB 正上方） ---------- */
/* 2026-10-15：应用户要求从左下角移到右下角，并与询价 FAB 严格对齐：
   桌面 FAB(right:48 / bottom:40 / 62x62) ⇒ 气泡 right:48 / 62x62 / bottom:116（间距 14px）；
   移动 FAB(right:20 / bottom:24 / 56x56, 断点 ≤640) ⇒ 气泡 right:20 / 56x56 / bottom:92（间距 12px）。
   即「同尺寸、同右缘、同一竖直轴线」。断点必须与 cart.css 的 .cjv-fab 一致（≤640），
   否则 641-767 区间会出现 FAB 桌面尺寸、气泡移动位置的对不齐。 */
.cjv-chat-bubble {
  position: fixed;
  right: 48px;
  bottom: 116px;
  left: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--cjv-chat-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cjv-chat-shadow);
  z-index: 9400;
  transition: transform 0.18s ease, background 0.2s ease;
}
.cjv-chat-bubble:hover { background: var(--cjv-chat-navy); transform: translateY(-2px); }
.cjv-chat-bubble:active { transform: translateY(0) scale(0.95); }
.cjv-chat-bubble:focus-visible { outline: 3px solid rgba(46, 84, 150, 0.45); outline-offset: 3px; }
.cjv-chat-bubble svg { width: 26px; height: 26px; display: block; }

/* 主动引导气泡（nudge）：悬浮在触发气泡上方的小提示 */
.cjv-chat-nudge {
  position: fixed;
  right: 48px;
  left: auto;
  bottom: 190px;
  max-width: 250px;
  background: var(--cjv-chat-card);
  color: var(--cjv-chat-fg);
  border: 1px solid var(--cjv-chat-border);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: var(--cjv-chat-shadow);
  z-index: 9450;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cjv-chat-nudge.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cjv-chat-nudge::after {
  content: "";
  position: absolute;
  right: 24px;
  left: auto;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--cjv-chat-card);
  border-right: 1px solid var(--cjv-chat-border);
  border-bottom: 1px solid var(--cjv-chat-border);
  transform: rotate(45deg);
}
.cjv-chat-nudge .cjv-chat-nudge-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--cjv-chat-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

/* 触发气泡上的「新消息」脉冲点 */
.cjv-chat-bubble .cjv-chat-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cjv-chat-accent);
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cjv-chat-bubble.has-nudge .cjv-chat-dot { opacity: 1; transform: scale(1); }
.cjv-chat-bubble.has-nudge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--cjv-chat-accent);
  animation: cjv-chat-ring 1.6s ease-out infinite;
}
@keyframes cjv-chat-ring {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- 沟通面板 ---------- */
/* 2026-10-15：应用户要求改为屏幕居中弹出（原左下角贴边），观感更像正式咨询窗口 */
.cjv-chat-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: 76vh;
  background: var(--cjv-chat-card);
  border: 1px solid var(--cjv-chat-border);
  border-radius: 18px;
  box-shadow: var(--cjv-chat-shadow);
  z-index: 9450;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.96);
  transform-origin: center;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.cjv-chat-panel.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.cjv-chat-head {
  background: linear-gradient(135deg, var(--cjv-chat-navy) 0%, var(--cjv-chat-blue) 100%);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cjv-chat-head .cjv-chat-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cjv-chat-head .cjv-chat-ava svg { width: 22px; height: 22px; }
.cjv-chat-head .cjv-chat-head-text { flex: 1; min-width: 0; }
.cjv-chat-head .cjv-chat-title { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.cjv-chat-head .cjv-chat-sub { font-size: 0.76rem; opacity: 0.85; margin-top: 2px; }
.cjv-chat-head .cjv-chat-close {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s ease;
}
/* 触控热区：视觉仍是 30px 圆点（不破坏头部排版），命中区域用伪元素扩到 44x44。
   实测原热区仅 29x29，低于 WCAG 2.5.5 / iOS HIG 的 44px 下限，
   手机上「×」很难点中（responsive_audit 在 25 个样本里报过）。 */
.cjv-chat-head .cjv-chat-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.cjv-chat-head .cjv-chat-close:hover { background: rgba(255, 255, 255, 0.3); }

.cjv-chat-body { padding: 16px 18px; overflow-y: auto; }
.cjv-chat-greet {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.cjv-chat-greet .cjv-chat-greet-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cjv-chat-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cjv-chat-greet .cjv-chat-greet-ava svg { width: 18px; height: 18px; }
.cjv-chat-greet .cjv-chat-greet-bubble {
  background: #F3F6FA;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--cjv-chat-fg);
}

/* 通道按钮 */
.cjv-chat-channels { display: grid; gap: 10px; }
.cjv-chat-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cjv-chat-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--cjv-chat-fg);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.cjv-chat-channel:hover { border-color: var(--cjv-chat-blue); background: #FAFCFF; transform: translateY(-1px); }
.cjv-chat-channel:active { transform: translateY(0); }
.cjv-chat-channel:focus-visible { outline: 3px solid rgba(46, 84, 150, 0.35); outline-offset: 2px; }
.cjv-chat-channel .cjv-chat-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cjv-chat-channel .cjv-chat-ico svg { width: 22px; height: 22px; }
.cjv-chat-channel .cjv-chat-ico.ico-wa { background: var(--cjv-chat-wa); }
.cjv-chat-channel .cjv-chat-ico.ico-wc { background: var(--cjv-chat-wc); }
.cjv-chat-channel .cjv-chat-ico.ico-mail { background: var(--cjv-chat-blue); }
.cjv-chat-channel .cjv-chat-ico.ico-leave { background: var(--cjv-chat-accent); }
.cjv-chat-channel .cjv-chat-chan-text { flex: 1; min-width: 0; }
.cjv-chat-channel .cjv-chat-chan-name { font-weight: 700; }
.cjv-chat-channel .cjv-chat-chan-desc { font-size: 0.76rem; color: var(--cjv-chat-muted); font-weight: 500; margin-top: 1px; }

/* 微信展开区 */
.cjv-chat-wechat-box {
  margin-top: 10px;
  border: 1px dashed var(--cjv-chat-wc);
  border-radius: 12px;
  padding: 14px;
  background: #F3FBF6;
  display: none;
}
.cjv-chat-wechat-box.is-show { display: block; }
.cjv-chat-wechat-box .cjv-chat-wc-label { font-size: 0.78rem; color: var(--cjv-chat-muted); margin-bottom: 6px; }
.cjv-chat-wechat-box .cjv-chat-wc-row { display: flex; align-items: center; gap: 8px; }
.cjv-chat-wechat-box .cjv-chat-wc-id {
  flex: 1;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--cjv-chat-fg);
  background: #fff;
  border: 1px solid var(--cjv-chat-border);
  border-radius: 8px;
  padding: 8px 10px;
  user-select: all;
}
.cjv-chat-wechat-box .cjv-chat-wc-copy {
  border: none;
  background: var(--cjv-chat-wc);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.cjv-chat-wechat-box .cjv-chat-wc-copy:active { transform: scale(0.96); }
.cjv-chat-wechat-box .cjv-chat-wc-hint { font-size: 0.78rem; color: var(--cjv-chat-muted); margin-top: 10px; line-height: 1.5; }
.cjv-chat-wechat-box .cjv-chat-wc-note {
  font-size: 0.8rem;
  color: var(--cjv-chat-wc);
  font-weight: 600;
  margin-top: 8px;
  display: none;
}
.cjv-chat-wechat-box .cjv-chat-wc-note.is-show { display: block; }

.cjv-chat-foot {
  padding: 10px 18px 14px;
  font-size: 0.74rem;
  color: var(--cjv-chat-muted);
  border-top: 1px solid var(--cjv-chat-border);
  text-align: center;
}

/* ---------- 移动端适配（断点与 cart.css 的 .cjv-fab 严格一致：≤640） ---------- */
@media (max-width: 640px) {
  .cjv-chat-bubble { right: 20px; bottom: 92px; left: auto; width: 56px; height: 56px; }
  .cjv-chat-bubble svg { width: 24px; height: 24px; }
  .cjv-chat-nudge { right: 20px; left: auto; bottom: 158px; max-width: calc(100vw - 40px); }
  .cjv-chat-panel { width: calc(100vw - 32px); max-width: none; }
}
@media (max-width: 430px) {
  .cjv-chat-panel { width: calc(100vw - 24px); }
}
/* 与询价清单 FAB（右下 right:48/bottom:40）垂直堆叠：咨询气泡在其正上方；
   询价抽屉打开时 z 更高会自然盖住本面板，属预期行为。 */

/* ==========================================================================
   询价登记表单（2026-10-27）
   面板内直接填，不再跳 contact.html / checkout.html。
   视图切换靠 .cjv-chat-body 上的 .cjv-form-mode，只加一个 class，最小侵入。
   ========================================================================== */
.cjv-chat-form { display: none; }
.cjv-chat-body.cjv-form-mode .cjv-chat-greet,
.cjv-chat-body.cjv-form-mode .cjv-chat-channels,
.cjv-chat-body.cjv-form-mode .cjv-chat-wechat-box { display: none; }
.cjv-chat-body.cjv-form-mode .cjv-chat-form { display: block; }

.cjv-chat-form .cjv-cf-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0 0 10px;
  color: var(--cjv-chat-blue); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.cjv-chat-form .cjv-cf-back:hover { text-decoration: underline; }
.cjv-chat-form .cjv-cf-title {
  font-family: var(--font-display, inherit);
  font-size: 1.02rem; font-weight: 800; color: var(--cjv-chat-navy);
  margin-bottom: 4px;
}
.cjv-chat-form .cjv-cf-lead {
  font-size: 0.79rem; line-height: 1.55; color: var(--cjv-chat-muted);
  margin-bottom: 14px;
}
.cjv-chat-form .cjv-cf-field { display: block; margin-bottom: 12px; }
.cjv-chat-form .cjv-cf-label {
  display: block; font-size: 0.78rem; font-weight: 700;
  color: var(--cjv-chat-fg); margin-bottom: 5px;
}
.cjv-chat-form input[type="text"],
.cjv-chat-form input[type="email"],
.cjv-chat-form input[type="tel"],
.cjv-chat-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--cjv-chat-border);
  border-radius: 9px;
  font-size: 0.85rem; font-family: inherit; color: var(--cjv-chat-fg);
  background: #fff; outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cjv-chat-form textarea { resize: vertical; min-height: 70px; }
.cjv-chat-form input:focus, .cjv-chat-form textarea:focus {
  border-color: var(--cjv-chat-blue);
  box-shadow: 0 0 0 3px rgba(46, 84, 150, 0.13);
}
.cjv-chat-form .cjv-cf-hint {
  display: block; font-size: 0.72rem; color: var(--cjv-chat-muted); margin-top: 4px;
}
.cjv-chat-form .cjv-cf-ways { display: flex; flex-wrap: wrap; gap: 6px; }
.cjv-chat-form .cjv-cf-way {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 1px solid var(--cjv-chat-border);
  border-radius: 999px; font-size: 0.78rem; color: var(--cjv-chat-fg);
  cursor: pointer; background: #fff; user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cjv-chat-form .cjv-cf-way input { margin: 0; accent-color: var(--cjv-chat-blue); }
.cjv-chat-form .cjv-cf-way:has(input:checked) {
  border-color: var(--cjv-chat-blue); background: #F2F7FF; font-weight: 700;
}
.cjv-chat-form .cjv-cf-submit {
  width: 100%; margin-top: 4px;
  padding: 11px 16px; border: 0; border-radius: 10px;
  background: var(--cjv-chat-blue); color: #fff;
  font-size: 0.9rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background 0.18s ease, transform 0.12s ease;
}
.cjv-chat-form .cjv-cf-submit:hover { background: var(--cjv-chat-navy); transform: translateY(-1px); }
.cjv-chat-form .cjv-cf-submit:disabled { opacity: 0.62; cursor: not-allowed; transform: none; }
.cjv-chat-form .cjv-cf-note {
  font-size: 0.71rem; line-height: 1.5; color: var(--cjv-chat-muted);
  margin-top: 9px; text-align: center;
}
.cjv-chat-form .cjv-cf-toast { display: none; font-size: 0.79rem; line-height: 1.55; margin-bottom: 10px; padding: 9px 11px; border-radius: 8px; }
.cjv-chat-form .cjv-cf-toast.is-ok { display: block; background: #E8F5E9; color: #256E3A; border: 1px solid #A5D6A7; }
.cjv-chat-form .cjv-cf-toast.is-err { display: block; background: #FFF3E0; color: #8A4B12; border: 1px solid #F0CB9B; }
.cjv-chat-form .cjv-cf-toast a { color: inherit; font-weight: 700; text-decoration: underline; }

/* 表单模式：面板加高 + 收紧间距，保证「提交询价」按钮与隐私说明能完整看到
   （380px 宽 × 76vh 时按钮会被底部工作时间栏压住，需要滚动才点得到） */
.cjv-chat-panel:has(.cjv-chat-body.cjv-form-mode) { max-height: 90vh; }
.cjv-chat-body.cjv-form-mode { padding-bottom: 20px; }
.cjv-chat-body.cjv-form-mode .cjv-cf-lead { margin-bottom: 10px; }
.cjv-chat-body.cjv-form-mode .cjv-cf-field { margin-bottom: 9px; }
.cjv-chat-body.cjv-form-mode .cjv-cf-submit { margin-top: 6px; }
@media (max-width: 640px) {
  .cjv-chat-panel:has(.cjv-chat-body.cjv-form-mode) { max-height: 92vh; }
}