/* ============================================================
   鹭小链 · 集装箱问答助手样式
   一套代码支撑两种入口：
     · 首页内嵌卡（.chat-card）——用户一进来就看到「能问什么」
     · 全站右下角悬浮球（.chat-fab + .chat-panel）——任何页面随时问
   变量全部带兜底值，不依赖 h5.css 是否先加载。
   ============================================================ */

.lulu-chat {
  --cc-brand-900: var(--brand-900, #0A2E5C);
  --cc-brand-700: var(--brand-700, #0F4C95);
  --cc-brand-500: var(--brand-500, #2E7BD6);
  --cc-brand-100: var(--brand-100, #DCEAFA);
  --cc-brand-050: var(--brand-050, #F1F7FE);
  --cc-accent: var(--accent, #17A2A8);
  --cc-ink: var(--ink, #13253C);
  --cc-ink-2: var(--ink-2, #4C657E);
  --cc-ink-3: var(--ink-3, #8AA0B4);
  --cc-line: var(--line, #E1EAF3);
  --cc-white: #fff;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif);
}

/* ---------------- 通用：头像 ---------------- */
.lulu-chat .cc-ava {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(150deg, var(--cc-brand-500), var(--cc-brand-900));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(10, 46, 92, .18);
}
.lulu-chat .cc-ava svg { width: 17px; height: 17px; display: block; }

/* ---------------- 通用：消息 ---------------- */
.lulu-chat .cc-msgs {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;   /* flex 子项默认 min-height:auto，不加这条滚动区撑不住容器 */
}
.lulu-chat .cc-m { display: flex; gap: 8px; align-items: flex-start; animation: cc-in .18s ease both; }
@keyframes cc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lulu-chat .cc-m.me { flex-direction: row-reverse; }
.lulu-chat .cc-m .cc-ava { width: 24px; height: 24px; }
.lulu-chat .cc-m .cc-ava svg { width: 13px; height: 13px; }

.lulu-chat .cc-bub {
  max-width: 84%; min-width: 0;
  padding: 9px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.66; color: var(--cc-ink);
  background: var(--cc-white); border: 1px solid var(--cc-line);
  box-shadow: 0 1px 2px rgba(10, 46, 92, .04);
  word-break: break-word; white-space: pre-wrap;
}
.lulu-chat .cc-m.me .cc-bub {
  background: var(--cc-brand-700); border-color: var(--cc-brand-700);
  color: #fff; box-shadow: 0 2px 8px rgba(15, 76, 149, .22);
}
.lulu-chat .cc-bub.is-warn { background: var(--cc-brand-050); border-color: var(--cc-brand-100); }

/* 答案小标题 + 来源 + 引导 */
.lulu-chat .cc-title {
  display: block; font-weight: 700; color: var(--cc-brand-700);
  font-size: 13.5px; margin-bottom: 5px; letter-spacing: .1px;
}
/* 大模型回答里的加粗与行内代码 */
.lulu-chat .cc-bub b { font-weight: 700; color: var(--cc-brand-900); }
.lulu-chat .cc-m.me .cc-bub b { color: #fff; }
.lulu-chat .cc-bub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--cc-brand-050); color: var(--cc-brand-700);
  border: 1px solid var(--cc-brand-100);
}
.lulu-chat .cc-refs { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--cc-line); }
.lulu-chat .cc-refs b {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--cc-ink-3); text-transform: uppercase; margin-bottom: 5px;
}
.lulu-chat .cc-ref {
  display: block; font-size: 12px; line-height: 1.6; color: var(--cc-ink-2);
  text-decoration: none; padding: 2px 0;
}
.lulu-chat a.cc-ref { color: var(--cc-brand-700); }
.lulu-chat a.cc-ref:active { opacity: .6; }
.lulu-chat .cc-ref::before { content: "· "; color: var(--cc-ink-3); }

.lulu-chat .cc-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 9px; padding: 7px 13px; border-radius: 999px;
  background: var(--cc-brand-700); color: #fff;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 76, 149, .2);
}
.lulu-chat .cc-cta:active { transform: scale(.97); }

/* 打字指示 */
.lulu-chat .cc-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.lulu-chat .cc-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cc-ink-3);
  animation: cc-dot 1.1s infinite ease-in-out;
}
.lulu-chat .cc-typing i:nth-child(2) { animation-delay: .16s; }
.lulu-chat .cc-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes cc-dot { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* ---------------- 通用：引导问句 ---------------- */
.lulu-chat .cc-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.lulu-chat .cc-sug {
  border: 1px solid var(--cc-line); background: var(--cc-white);
  color: var(--cc-ink-2); font-size: 12px; line-height: 1;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: all .14s ease;
}
.lulu-chat .cc-sug:active { background: var(--cc-brand-050); border-color: var(--cc-brand-100); color: var(--cc-brand-700); }

/* ---------------- 通用：输入行 ---------------- */
.lulu-chat .cc-form { display: flex; gap: 8px; align-items: center; }
.lulu-chat .cc-in {
  flex: 1; min-width: 0; height: 40px; padding: 0 13px;
  /* 16px 防 iOS/微信聚焦缩放：字号 <16px 时，聚焦输入框整个页面会被放大，
     用户看到的就是「一要输入界面就变大」（ demand 页 .field 早已踩过并修掉，
     这里当初只顾着视觉用 13.5px，2026-10-16 补上同一口径） */
  font-size: 16px; font-family: inherit; color: var(--cc-ink);
  background: var(--cc-brand-050); border: 1px solid transparent;
  border-radius: 999px; outline: none; transition: all .15s ease;
}
.lulu-chat .cc-in::placeholder { color: var(--cc-ink-3); }
.lulu-chat .cc-in:focus { background: var(--cc-white); border-color: var(--cc-brand-500); box-shadow: 0 0 0 3px var(--cc-brand-050); }
.lulu-chat .cc-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cc-brand-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.lulu-chat .cc-send:disabled { opacity: .45; cursor: default; }
.lulu-chat .cc-send:not(:disabled):active { transform: scale(.94); }
.lulu-chat .cc-send svg { width: 17px; height: 17px; }

.lulu-chat .cc-note {
  margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--cc-ink-3); text-align: center;
}
.lulu-chat .cc-note a { color: var(--cc-ink-3); }

/* ============================================================
   入口一：首页内嵌卡
   ============================================================ */
.lulu-chat.cc-card {
  margin: 0 0 14px;
  background: var(--cc-white); border: 1px solid var(--cc-line);
  border-radius: var(--r-lg, 20px); overflow: hidden;
  box-shadow: var(--shadow, 0 2px 6px rgba(10, 46, 92, .06), 0 12px 32px rgba(10, 46, 92, .08));
}
.cc-card > .cc-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 15px 11px;
  background: linear-gradient(135deg, var(--cc-brand-900), var(--cc-brand-700) 65%, var(--cc-brand-500));
  color: #fff;
}
.cc-card > .cc-head .cc-hi { flex: 1; min-width: 0; }
.cc-card > .cc-head b { display: block; font-size: 14px; font-weight: 700; letter-spacing: .2px; }
.cc-card > .cc-head small { display: block; font-size: 11.5px; opacity: .82; margin-top: 2px; }
.cc-card > .cc-head .cc-ava { background: rgba(255, 255, 255, .18); box-shadow: none; }
.cc-card > .cc-head .cc-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(255, 255, 255, .2); color: #fff;
}

.cc-card .cc-msgs { padding: 14px 15px 4px; max-height: 258px; }
.cc-card .cc-sugs { padding: 10px 15px 0; }
.cc-card .cc-form { padding: 11px 15px 0; }
.cc-card .cc-note { padding: 9px 15px 14px; }

/* ============================================================
   入口二：悬浮球 + 浮层面板
   ============================================================ */
.cc-fab {
  position: fixed; z-index: 60;
  right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-700, #0F4C95), var(--brand-900, #0A2E5C));
  color: #fff; font-size: 13.5px; font-weight: 600; font-family: inherit;
  letter-spacing: .2px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 46, 92, .28), 0 1px 3px rgba(10, 46, 92, .2);
  transition: transform .16s ease, opacity .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.cc-fab svg { width: 18px; height: 18px; flex: none; }
.cc-fab:active { transform: scale(.95); }
.cc-fab.cc-fab-up { bottom: calc(74px + env(safe-area-inset-bottom)); }
.cc-fab.cc-hide { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.9); }

/* 首次进站的一次性呼吸提示，点开即永久消失 */
.cc-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(15, 76, 149, .45);
  animation: cc-pulse 2.4s ease-out 3;
  pointer-events: none;
}
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 76, 149, .42); }
  70% { box-shadow: 0 0 0 12px rgba(15, 76, 149, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 76, 149, 0); }
}

.cc-panel {
  position: fixed; z-index: 61;
  left: 0; right: 0; bottom: 0;
  height: min(78vh, 620px);
  display: flex; flex-direction: column;
  background: var(--bg, #F3F7FB);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(10, 46, 92, .22);
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.32, .72, .28, 1);
  will-change: transform;
}
.cc-panel.cc-open { transform: none; }
.cc-panel[hidden] { display: none; }

.cc-panel > .cc-head {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 13px 14px 12px;
  background: linear-gradient(135deg, var(--brand-900, #0A2E5C), var(--brand-700, #0F4C95) 65%, var(--brand-500, #2E7BD6));
  border-radius: 20px 20px 0 0; color: #fff;
}
.cc-panel > .cc-head .cc-hi { flex: 1; min-width: 0; }
.cc-panel > .cc-head b { display: block; font-size: 14px; font-weight: 700; }
.cc-panel > .cc-head small { display: block; font-size: 11.5px; opacity: .82; margin-top: 2px; }
.cc-panel > .cc-head .cc-ava { background: rgba(255, 255, 255, .18); box-shadow: none; }
.cc-panel .cc-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, .2);
}
.cc-panel .cc-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cc-panel .cc-x svg { width: 15px; height: 15px; }
.cc-panel .cc-x:active { background: rgba(255, 255, 255, .3); }

.cc-panel .cc-msgs { flex: 1; padding: 14px 14px 4px; }
.cc-panel .cc-sugs { flex: none; padding: 10px 14px 0; }
.cc-panel .cc-form { flex: none; padding: 11px 14px 0; }
.cc-panel .cc-note { flex: none; padding: 8px 14px calc(13px + env(safe-area-inset-bottom)); }

.cc-mask {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(10, 46, 92, .28);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.cc-mask.cc-open { opacity: 1; pointer-events: auto; }
body.cc-lock { overflow: hidden; }

/* ---------------- 桌面端：面板改成右下角小窗 ---------------- */
@media (min-width: 720px) {
  .cc-panel {
    left: auto; bottom: 74px;
    right: max(16px, calc((100% - 1120px) / 2 + 16px));
    width: 392px; height: min(620px, calc(100vh - 110px));
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(10, 46, 92, .24);
    transform: translateY(14px) scale(.98);
    opacity: 0; transition: transform .24s ease, opacity .2s ease;
  }
  .cc-panel > .cc-head { border-radius: 20px 20px 0 0; }
  .cc-panel.cc-open { transform: none; opacity: 1; }
  .cc-fab { right: max(16px, calc((100% - 1120px) / 2 + 16px)); bottom: 16px; }
  .cc-fab.cc-fab-up { bottom: 16px; }
  .cc-mask { display: none; }
  /* 桌面端内嵌卡放宽消息区 */
  .cc-card .cc-msgs { max-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .lulu-chat .cc-m, .cc-fab::after { animation: none; }
  .cc-panel { transition: none; }
  .lulu-chat .cc-typing i { animation-duration: 1.6s; }
}

/* 深色模式：H5 主体是浅色，这里只做最低限度的可读性兜底 */
@media (prefers-color-scheme: dark) {
  .cc-panel { background: #F3F7FB; }
}