/* Online assistant widget (from the live main.css, with the legacy site's CSS variables as fallbacks) */
:root{
  /* Brand — derived from logo mark (teal → blue) */
  --c-teal:        #4FB3D9;
  --c-teal-dark:   #2E8FB8;
  --c-teal-ink:    #1F6F91;   /* accessible teal for small text on light surfaces */
  --c-blue:        #2E7CB8;
  --c-blue-deep:   #1B5C8F;
  --c-ink:         #16283C;   /* deep navy for text/headers */
  --c-ink-2:       #24405C;
  --c-ink-3:       #3E5871;

  --c-text:        #22303F;
  --c-text-soft:   #5A6B7C;
  --c-text-mute:   #62758A;

  --c-bg:          #FFFFFF;
  --c-bg-soft:     #F4F7FA;
  --c-bg-tint:     #EAF2F8;
  --c-line:        #DFE7EE;
  --c-line-soft:   #EBF1F6;

  --c-accent:      #E8A33D;   /* golden Bengal accent */

  --grad-brand:    linear-gradient(135deg, var(--c-teal) 0%, var(--c-blue) 100%);
  /* Button surfaces carry text, so they use the deep end of the brand ramp.
     White on the vivid --grad-brand tops out at 2.39:1 (AA needs 4.5:1). */
  --grad-btn:      linear-gradient(135deg, #1F6F91 0%, #1B5C8F 100%);
  --grad-ink:      linear-gradient(160deg, #1B3450 0%, #16283C 100%);

  /* ---- 「一条线」航线视觉系统 ------------------------------------
     业务母题：中国 ⇔ 孟加拉，双向往返，只做一条线。
     这套令牌让「线」成为贯穿全站的图形语言：
       起点青 → 终点蓝，节点带光晕，轨道两端渐隐（线是有始有终的，不硬切）。 */
  --grad-route:    linear-gradient(90deg, #4FB3D9 0%, #2E7CB8 58%, #1B5C8F 100%);
  --grad-route-v:  linear-gradient(180deg, #4FB3D9 0%, #2E7CB8 58%, #1B5C8F 100%);
  --c-node:        #4FB3D9;
  --c-node-halo:   rgba(79,179,217,.16);
  --line-route:    rgba(79,179,217,.34);   /* 浅色底上的轨道线 */
  --line-route-d:  rgba(79,179,217,.46);   /* 深色底上的轨道线 */
  /* 轨道线两端渐隐：避免出现「线突然断掉」的硬边 */
  --fade-route:    linear-gradient(90deg, transparent 0%, var(--line-route) 14%, var(--line-route) 86%, transparent 100%);
  --fade-route-v:  linear-gradient(180deg, transparent 0%, var(--line-route) 14%, var(--line-route) 86%, transparent 100%);

  --shadow-s:      0 1px 2px rgba(22,40,60,.06), 0 2px 8px rgba(22,40,60,.05);
  --shadow-m:      0 2px 6px rgba(22,40,60,.06), 0 12px 28px rgba(22,40,60,.08);
  --shadow-l:      0 8px 20px rgba(22,40,60,.08), 0 28px 60px rgba(22,40,60,.12);
  --shadow-route:  0 10px 30px rgba(31,111,145,.22);

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;

  --maxw: 1200px;
  --maxw-narrow: 880px;

  --f-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   AI ASSISTANT WIDGET
   Markup is built by assets/js/chat.js — one <script> tag per page.
   ============================================================ */
.chat-widget { position: fixed; inset: auto 0 0 auto; z-index: 120; }

.chat-launcher {
  position: fixed; right: 22px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border: 0; border-radius: 999px;
  background: var(--grad-btn); color: #fff;
  font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(27,92,143,.34);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(27,92,143,.44); }
.chat-launcher-txt { white-space: nowrap; }
.chat-launcher-ico { display: flex; }
.chat-launcher-ico svg { width: 20px; height: 20px; }

.chat-panel {
  position: fixed; right: 22px; bottom: 92px;
  width: min(384px, calc(100vw - 32px));
  height: min(586px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 24px 64px rgba(22,40,60,.24), 0 4px 14px rgba(22,40,60,.1);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s, height .26s var(--ease);
}
@supports (height: 100dvh) { .chat-panel { height: min(586px, calc(100dvh - 140px)); } }
.chat-widget.is-open .chat-panel { opacity: 1; visibility: visible; transform: none; }

/* ★ 2026-10-07（老板报「留资表单装不下、对话框不能滚」）：
   表单展开时（chat.js 加 .is-lead）——
   ① 面板临时加高（原 586px 装不下 385px 表单 + 240px 固定件）
   ② 收起底部免责声明（那是讲对话的，表单有独立隐私行）→ 腾出 60px
   ③ 表单本身仍是「可压缩 + 内部可滚」（见 .chat-lead），保证任何屏高都不被切。 */
.chat-panel.is-lead { height: min(680px, calc(100vh - 110px)); }
@supports (height: 100dvh) { .chat-panel.is-lead { height: min(680px, calc(100dvh - 110px)); } }
.chat-panel.is-lead .chat-note { display: none; }

.chat-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; background: var(--grad-ink);
}
.chat-head-ava {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.chat-head-ava svg { width: 20px; height: 20px; color: var(--c-teal); }
.chat-head-txt { flex: 1; min-width: 0; }
.chat-head-txt b { display: block; font-size: .92rem; color: #fff; letter-spacing: -.005em; }
.chat-head-txt small { display: block; margin-top: 1px; font-size: .74rem; color: #9FB8CC; }
.chat-close {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: rgba(255,255,255,.08); color: #C3D5E4;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.chat-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.chat-close svg { width: 15px; height: 15px; }

.chat-log {
  flex: 1 1 0; min-height: 0;   /* ★ 2026-10-07：留资表单展开时让位给表单（表单是转化点） */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px;
  background: var(--c-bg-soft);
}
.chat-row { display: flex; }
.chat-row--user { justify-content: flex-end; }
.chat-bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: .875rem; line-height: 1.7; }
.chat-row--assistant .chat-bubble {
  background: #fff; border: 1px solid var(--c-line); color: var(--c-text);
  border-bottom-left-radius: 6px; box-shadow: var(--shadow-s);
}
.chat-row--user .chat-bubble { background: var(--grad-btn); color: #fff; border-bottom-right-radius: 6px; }
.chat-bubble p + p { margin-top: 8px; }
.chat-bubble ul { display: grid; gap: 5px; margin-top: 6px; }
.chat-bubble li { position: relative; padding-left: 15px; }
.chat-bubble li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-teal);
}
.chat-bubble strong { font-weight: 700; color: var(--c-ink); }
.chat-row--user .chat-bubble strong { color: #fff; }

.chat-typing .chat-bubble { display: flex; gap: 4px; padding: 14px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal); animation: chatdot 1.2s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .16s; }
.chat-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chatdot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* 2026-10-07（老板答题卡 Q3=B）：快捷问题改成 Flexport 式 —— 竖排、右对齐、胶囊形，
   读起来像「客户即将要说的话」。
   ★ 位置：挂在**对话流里**（.chat-chips-row），随对话一起滚动，**不占固定高度**。
   为什么不放原来的固定栏：竖排比横排高得多，而「留资表单展开」时高 371px，
   面板只有 586px —— 固定栏会被撑爆（实测溢出 168px，标题栏被顶出可视区）。
   旧的 .chat-chips 容器保留但不再使用（恒为空）。 */
.chat-chips { display: none; }
.chat-chips-row { display: grid; gap: 8px; justify-items: end; }
.chat-chip {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-teal-ink);
  font-size: .78rem; font-weight: 600;
  transition: border-color .2s, background .2s;
}
.chat-chip:hover { border-color: var(--c-teal); background: var(--c-bg-tint); }

.chat-form {
  flex: none; display: flex; align-items: flex-end; gap: 9px;
  padding: 12px 14px; background: #fff; border-top: 1px solid var(--c-line);
}
.chat-input {
  flex: 1; resize: none; max-height: 108px;
  border: 1px solid var(--c-line); border-radius: 12px;
  padding: 10px 13px; font: inherit; font-size: .875rem; line-height: 1.6;
  color: var(--c-text); background: var(--c-bg-soft);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.chat-input:focus {
  outline: none; border-color: var(--c-teal); background: #fff;
  box-shadow: 0 0 0 3px rgba(79,179,217,.14);
}
.chat-send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: var(--grad-btn); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease), opacity .2s;
}
.chat-send svg { width: 18px; height: 18px; }
.chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }

.chat-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 16px 11px; background: #fff;
}
.chat-note { font-size: .7rem; color: var(--c-text-mute); }
.chat-reset {
  border: 0; background: none; padding: 2px 0;
  font-size: .72rem; font-weight: 600; color: var(--c-text-mute);
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-reset:hover { color: var(--c-teal-ink); }

.chat-fallback {
  padding: 13px 15px; border-radius: 12px;
  background: #fff; border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent);
  font-size: .82rem; color: var(--c-text-soft);
}
.chat-fallback b { display: block; margin-bottom: 5px; color: var(--c-ink); font-size: .86rem; }
.chat-fallback-links { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; }
.chat-fallback-links a { font-size: .8rem; font-weight: 600; color: var(--c-teal-ink); }
.chat-fallback-links a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .chat-launcher { right: 16px; bottom: 16px; padding: 12px 18px 12px 14px; }
  .chat-panel {
    right: 16px; left: 16px; bottom: 82px; width: auto;
    height: min(560px, calc(100vh - 118px));
  }
}
@supports (height: 100dvh) {
  @media (max-width: 520px) { .chat-panel { height: min(560px, calc(100dvh - 118px)); } }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-launcher, .chat-send, .chat-chip { transition: none; }
  .chat-typing i { animation: none; opacity: .6; }
}

/* ============================================================
   留资表单（2026-09-30）
   产品口径：官网 AI 客服的唯一用途是引导客户留资，不得自行报价。
   表单可跳过 —— 强拦会让客户直接关窗，连对话一起丢掉。
   ============================================================ */
.chat-lead {
  /* ★ 2026-10-07（老板报「表单装不下、对话框不能滚」）：
     原 `flex: 0 0 auto` 不许压缩 → 面板内容实测 679px 塞进 584px 面板，
     表单被 overflow:hidden 切掉，且面板/表单都不可滚。
     改为「可压缩 + 内部可滚」：空间不够时表单自己滚，每个字段都够得着。 */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-line, rgba(22,40,60,.10));
  background: var(--c-bg-soft, #F7FAFC);
}
.chat-lead[hidden] { display: none; }
.chat-lead-title { font-size: .86rem; font-weight: 500; line-height: 1.45; color: var(--c-ink, #16283C); }
.chat-lead-hint { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--c-text-mute, #62758A); }
.chat-lead-input {
  box-sizing: border-box; width: 100%;
  padding: 8px 11px; font: inherit; font-size: .84rem;
  color: var(--c-ink, #16283C); background: #fff;
  border: 1px solid var(--c-line, rgba(22,40,60,.14)); border-radius: 8px;
}
.chat-lead-input:focus {
  outline: none;
  border-color: var(--c-teal-ink, #1F6F91);
  box-shadow: 0 0 0 3px rgba(31,111,145,.12);
}
.chat-lead-msg { margin: 0; font-size: .78rem; color: var(--c-danger, #A32D2D); }
.chat-lead-msg[hidden] { display: none; }
.chat-lead-row { display: flex; gap: 8px; }
.chat-lead-submit, .chat-lead-skip {
  flex: 1; padding: 9px 10px; font: inherit; font-size: .82rem;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.chat-lead-submit { color: #fff; font-weight: 500; background: var(--grad-btn, linear-gradient(135deg, #1F6F91, #1B5C8F)); }
.chat-lead-submit:disabled { opacity: .6; cursor: default; }
.chat-lead-skip {
  color: var(--c-text-mute, #62758A); background: transparent;
  border-color: var(--c-line, rgba(22,40,60,.16));
}
.chat-lead-privacy { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--c-text-soft, #8496A6); }
.chat-lead-privacy a { color: var(--c-teal-ink, #1F6F91); text-decoration: underline; }
.chat-lead-open {
  padding: 0; font: inherit; font-size: .76rem;
  color: var(--c-teal-ink, #1F6F91); background: none; border: 0;
  text-decoration: underline; cursor: pointer;
}
.chat-lead-open:disabled { color: var(--c-text-soft, #8496A6); text-decoration: none; cursor: default; }

/* 隐私政策页正文 */
.legal { margin-top: 34px; }
.legal h2 { margin: 28px 0 10px; font-size: 1.02rem; color: var(--c-ink, #16283C); }
.legal p { margin: 0 0 12px; font-size: .92rem; line-height: 1.78; color: var(--c-text, #2C3E50); }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; font-size: .92rem; line-height: 1.78; color: var(--c-text, #2C3E50); }
.legal a { color: var(--c-teal-ink, #1F6F91); text-decoration: underline; }


/* ============================================================
   询价表单：提交状态 + 蜜罐（2026-10-03）
   ------------------------------------------------------------
   旧表单提交走 mailto，客户要自己去邮箱点发送；现在提交到 /api/enquiry，
   客户原地看到「已收到」。这里只管两件事：状态提示的样式、蜜罐的隐藏。
   ============================================================ */
.form-status {
  margin-top: 16px; padding: 11px 14px;
  font-size: .85rem; line-height: 1.65;
  border: 1px solid transparent; border-radius: var(--r-s, 6px);
}
/* 空的时候不占位，避免表单底部凭空多出一块空白 */
.form-status:empty { display: none; }
.form-status.is-ok {
  color: #14532D; background: #ECFDF3; border-color: #A7E3BE;
}
.form-status.is-err {
  color: var(--c-danger, #A32D2D); background: #FDF2F2; border-color: #F3C6C6;
}

/* 蜜罐：正常客户看不见。用绝对定位挪出视口，而不是 display:none ——
   部分机器人会跳过 display:none 的字段，那样蜜罐就失效了。 */
.hp-field {
  position: absolute !important;
  left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* 提交中：按钮置灰，防连点重复提交 */
.btn.is-busy { opacity: .62; cursor: default; pointer-events: none; }