/* ============================================================
   伊智 AI · 聊天体验 + 富卡片 + 留资弹窗（浅色）
   ============================================================ */

.det-hint{font-size:13.5px;color:var(--ink-3)}

/* ---------- chat container ---------- */
.chat{
  display:flex;flex-direction:column;overflow:hidden;
  height:560px;border-radius:24px;
  background:rgba(255,255,255,0.82);border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--ac) 45%,rgba(31,70,150,0.5));
}
.det.rev .det-visual{display:flex;justify-content:flex-start}

/* header */
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--glass-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 9%,#fff),transparent)}
.chat-ava{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 75%,#fff),var(--ac));
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--ac) 70%,transparent)}
.chat-head-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.chat-head-t b{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.chat-badge{font-size:10px;font-weight:700;letter-spacing:.05em;padding:1px 6px;border-radius:5px;color:#fff;background:var(--ac)}
.chat-on{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.chat-on i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px #22C55E}

/* messages */
.chat-scroll{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.chat-scroll::-webkit-scrollbar{width:6px}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:88%}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg.bot{align-self:flex-start}
.msg-av{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 70%,#fff),var(--ac))}
.msg-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.bub{padding:11px 14px;border-radius:15px;font-size:14px;line-height:1.55;word-break:break-word}
.msg.bot .bub{background:#F1F4FA;color:var(--ink-1);border-bottom-left-radius:5px}
.msg.bot .bub.soft{background:transparent;padding:2px 4px;color:var(--ink-2);font-size:13px}
.msg.user .bub{background:linear-gradient(150deg,var(--ac),color-mix(in srgb,var(--ac) 72%,#1B4FD6));color:#fff;border-bottom-right-radius:5px;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ac) 60%,transparent)}
.bub.typing{display:flex;gap:4px;align-items:center}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:tdot 1.2s ease-in-out infinite}
.bub.typing i:nth-child(2){animation-delay:.18s}
.bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* footer: suggestions + input */
.chat-foot{padding:12px 14px 14px;border-top:1px solid var(--glass-line);background:rgba(255,255,255,0.6)}
.chat-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.sugg{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font-size:12.5px;font-weight:500;
  color:color-mix(in srgb,var(--ac) 75%,#1B2540);background:color-mix(in srgb,var(--ac) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);transition:transform .2s,background .2s}
.sugg:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ac) 16%,#fff)}
.chat-input{display:flex;gap:9px;align-items:center}
.chat-input input{flex:1;height:44px;padding:0 16px;border-radius:13px;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--glass-line-2);transition:border-color .2s,box-shadow .2s}
.chat-input input::placeholder{color:var(--ink-4)}
.chat-input input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent)}
.chat-send{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 80%,#fff),var(--ac));
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--ac) 60%,transparent);transition:transform .2s}
.chat-send:hover{transform:translateY(-1px) scale(1.03)}

/* ---------- rich cards ---------- */
.cc{background:#fff;border:1px solid var(--glass-line);border-radius:14px;padding:14px;box-shadow:0 10px 26px -18px rgba(31,70,150,0.4);width:100%;max-width:300px}
.cc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.cc-t{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink)}
.cc-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,#fff)}
.cc-stats{display:flex;gap:8px;margin-bottom:10px}
.cc-stats>div{flex:1}
.cc-stats b{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);line-height:1}
.cc-stats span{display:block;font-size:10px;color:var(--ink-4);margin-top:4px}
.cc-bars{display:flex;align-items:flex-end;gap:5px;height:54px;margin-bottom:7px}
.cc-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(var(--ac),color-mix(in srgb,var(--ac) 35%,#fff))}
.cc-cap{font-size:10.5px;color:var(--ink-4);text-align:center}
.cc-kv{display:flex;flex-direction:column;gap:9px}
.cc-kv>div{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.cc-kv span{color:var(--ink-3)}
.cc-kv b{color:var(--ink);font-weight:600}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.cc-tags span{font-size:11px;padding:3px 9px;border-radius:7px;background:#F1F4FA;color:var(--ink-2)}
.cc-swap{display:flex;flex-direction:column;gap:6px}
.cc-swap-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:12.5px;color:var(--ink-1);font-weight:500}
.cc-swap-row.old{background:#FEF2F2;text-decoration:line-through;color:var(--ink-3)}
.cc-swap-row.new{background:color-mix(in srgb,var(--ac) 10%,#fff)}
.cc-swap-row em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3)}
.cc-swap-row.new em{color:var(--ac)}
.cc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.cc-arrow{text-align:center;font-size:11px;color:var(--ink-4)}
.cc-list{display:flex;flex-direction:column;gap:8px}
.cc-li{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;background:#F6F8FC}
.cc-av{width:28px;height:28px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 60%,#fff),var(--ac))}
.cc-li b{font-size:12.5px;color:var(--ink);display:block}
.cc-li span{font-size:10.5px;color:var(--ink-4);display:block;margin-top:1px}
.cc-pill{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;padding:3px 8px;border-radius:7px;color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,#fff);flex-shrink:0}
.cc-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:s}
.cc-steps li{display:flex;gap:10px;font-size:12.5px;color:var(--ink-1);line-height:1.5}
.cc-steps li b{flex-shrink:0;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--ac)}
.cc-rp{max-width:320px}
.cc-rp-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:9px}
.cc-rp-av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#F97316,#EA580C)}
.cc-rp-h i{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;color:var(--ink-4);background:#F1F4FA;padding:2px 7px;border-radius:6px}
.cc-rp p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-1);font-style:italic}
.cc-q{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.5}
.cc-opts{display:flex;flex-direction:column;gap:7px}
.cc-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12.5px;color:var(--ink-1);text-align:left;
  background:#F6F8FC;border:1px solid transparent;transition:all .2s}
.cc-opt span{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;background:#fff;color:var(--ink-3);flex-shrink:0}
.cc-opt:hover{background:color-mix(in srgb,var(--ac) 8%,#fff)}
.cc-opt.ok{background:color-mix(in srgb,#22C55E 12%,#fff);border-color:#22C55E}
.cc-opt.ok span{background:#22C55E;color:#fff}
.cc-opt.no{background:#FEF2F2;border-color:#FCA5A5}
.cc-exp{margin-top:9px;font-size:11.5px;color:var(--ink-2);line-height:1.5;padding:8px 10px;border-radius:9px;background:#F1F4FA}

/* ---------- STYLE: workflow (agentic) ---------- */
.chat-workflow .chat-scroll{gap:18px}
.chat-workflow .msg.bot{max-width:96%}
.chat-workflow .msg.bot .bub{background:transparent;padding:0;color:var(--ink-1);font-size:14px;border-radius:0}
.chat-workflow .msg.bot .msg-body{gap:11px;padding:13px 15px;border-radius:14px;background:rgba(247,249,253,0.9);border:1px solid var(--glass-line);border-left:3px solid var(--ac);width:100%}
.chat-workflow .msg.bot .bub.soft{padding:0;background:transparent}
.chat-workflow .cc{max-width:100%}
.chat-workflow .cc-rp{max-width:100%}

/* ---------- STYLE: phone mockup ---------- */
.chat-stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%}
.phone{position:relative;width:340px;height:660px;border-radius:46px;padding:13px;
  background:linear-gradient(160deg,#f0f3fa,#dde6f5);
  box-shadow:0 40px 90px -30px rgba(31,70,150,0.55),0 2px 0 rgba(255,255,255,0.7) inset,0 0 0 2px rgba(255,255,255,0.5);}
.phone-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:14px;background:#0c1322;z-index:3}
.chat-phone{height:100%;border-radius:34px;border:none;box-shadow:none}
.chat-phone .chat-head{padding-top:40px}
.chat-orbit-glow{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 30%,transparent),transparent);
  filter:blur(50px);transform:scale(1.1)}

/* ---------- vswitch caption ---------- */
.vswitch-cap{display:flex;align-items:center;padding:0 12px 0 8px;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}

/* ============================================================ LEAD MODAL */
.lead-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(20,35,70,0.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:fadeIn .3s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lead-modal{position:relative;width:min(520px,100%);max-height:92vh;overflow-y:auto;padding:38px 34px 30px;border-radius:28px;
  background:linear-gradient(180deg,#fff,#f6f9ff);border:1px solid var(--glass-line-2);
  box-shadow:0 50px 100px -30px rgba(31,70,150,0.6);animation:popIn .42s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.lead-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:10px;color:var(--ink-3);font-size:15px;transition:background .2s}
.lead-x:hover{background:#EEF2FA;color:var(--ink)}
.lead-spark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#1B4FD6));
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--ac) 65%,transparent)}
.lead-modal h3{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-0.01em}
.lead-modal p{margin:10px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:24px 0 22px}
.lead-f{display:flex;flex-direction:column;gap:7px}
.lead-f.full{grid-column:1/-1}
.lead-f label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.lead-f input{height:46px;padding:0 14px;border-radius:12px;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--glass-line-2);transition:border-color .2s,box-shadow .2s}
.lead-f input::placeholder{color:var(--ink-4)}
.lead-f input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.lead-chips{display:flex;flex-wrap:wrap;gap:8px}
.lead-chip{padding:9px 13px;border-radius:10px;font-size:13px;font-weight:500;color:var(--ink-2);background:#F1F4FA;border:1px solid transparent;transition:all .2s}
.lead-chip:hover{background:#E8EEF8}
.lead-chip.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,#fff);border-color:color-mix(in srgb,var(--ac) 38%,transparent)}
.lead-submit{width:100%;height:52px;border-radius:14px;font-size:15.5px;font-weight:600;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 78%,#fff),var(--ac));
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--ac) 60%,transparent);transition:transform .2s,box-shadow .2s}
.lead-submit:hover{transform:translateY(-2px)}
.lead-submit.ghost{background:#fff;color:var(--ink-1);border:1px solid var(--glass-line-2);box-shadow:none;margin-top:18px}
.lead-fine{margin-top:13px;font-size:11.5px;color:var(--ink-4);text-align:center}
.lead-done{text-align:center;padding:14px 0 6px}
.lead-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:linear-gradient(150deg,#34D399,#10B981);box-shadow:0 14px 30px -10px rgba(16,185,129,0.55)}
.lead-done h3{font-size:24px}

@media (max-width:560px){
  .chat{height:520px}
  .phone{width:300px;height:600px}
  .lead-form{grid-template-columns:1fr}
  .lead-modal{padding:30px 22px 24px}
}