/* ============================================================
 * chatbot.css — 在线智能客服聊天窗口（对接 kb-data.js 知识库）
 * 主题：与 cf-panel 一致的实底深蓝 + 白卡消息
 * ============================================================ */
.bot-overlay{position:fixed;inset:0;z-index:9998;background:rgba(4,10,32,.62);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s}
.bot-overlay.open{opacity:1;pointer-events:auto}

.bot-win{width:430px;max-width:100%;height:640px;max-height:min(86vh,700px);display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(165deg,#0D2470 0%,#061757 48%,#030D38 100%);
  box-shadow:0 28px 80px rgba(2,8,40,.55);transform:translateY(14px) scale(.985);transition:transform .24s}
.bot-overlay.open .bot-win{transform:none}

/* 头部 */
.bot-head{flex:none;display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.12)}
.bot-avatar{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(135deg,#002890 0%,#3fb3d9 100%);border:1px solid rgba(255,255,255,.2)}
.bot-head-t{flex:1;min-width:0}
.bot-head-t b{display:block;font-size:15.5px;color:#fff;letter-spacing:.5px}
.bot-head-t small{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11.5px;color:#9CC2FF}
.bot-dot{width:7px;height:7px;border-radius:50%;background:#2BD97C;box-shadow:0 0 0 3px rgba(43,217,124,.18);animation:botPulse 2s infinite}
@keyframes botPulse{50%{box-shadow:0 0 0 6px rgba(43,217,124,.06)}}
.bot-close{flex:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:9px;cursor:pointer;
  background:#FFFFFF;color:#16294F;font-size:18px;line-height:1;transition:.18s}
.bot-close:hover{background:#F3F8FF;color:#0E62C7}

/* 消息区 */
.bot-body{flex:1;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.bot-body::-webkit-scrollbar{width:5px}
.bot-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}

.bot-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.75;
  animation:botIn .25s ease both;word-break:break-word}
@keyframes botIn{from{opacity:0;transform:translateY(8px)}}
.bot-msg.bot{align-self:flex-start;background:#FFFFFF;color:#16294F;border-bottom-left-radius:5px;
  box-shadow:0 4px 14px rgba(2,8,40,.25)}
.bot-msg.bot .a-link{color:#0E62C7;text-decoration:underline;text-underline-offset:2px}
.bot-msg.user{align-self:flex-end;background:linear-gradient(135deg,#0E62C7,#1168BF);color:#fff;
  border-bottom-right-radius:5px;box-shadow:0 4px 14px rgba(2,8,40,.35)}
.bot-msg .a-src{display:block;margin-top:7px;padding-top:7px;border-top:1px dashed rgba(0,40,160,.18);
  font-size:11px;color:#6B7CA0;letter-spacing:.4px}
.bot-time{align-self:center;font-size:10.5px;color:#7E93BE;letter-spacing:.6px}

/* 消息内答案排版 */
.bot-msg.bot p{margin:0 0 6px}
.bot-msg.bot p:last-child{margin-bottom:0}
.bot-msg.bot b{color:#0028A0}

/* 快捷提问 chips */
.bot-chips{align-self:flex-start;display:flex;flex-wrap:wrap;gap:7px;max-width:92%;animation:botIn .25s ease both}
.bot-chip{padding:7px 12px;border-radius:999px;font-size:12.5px;cursor:pointer;transition:.16s;
  background:#FFFFFF;color:#16294F;border:1px solid rgba(0,40,160,.18)}
.bot-chip:hover{background:#EEF6FF;border-color:rgba(2,132,199,.55);color:#0E62C7}
.bot-chip.hl{background:linear-gradient(135deg,#002890,#1168BF);border-color:transparent;color:#fff}

/* 相关提问 */
.bot-rel{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(0,40,160,.18)}
.bot-rel small{display:block;margin-bottom:6px;font-size:11px;color:#6B7CA0;letter-spacing:.5px}
.bot-rel .bot-chip{padding:5px 10px;font-size:11.5px}

/* 未命中转人工 */
.bot-human{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.bot-human button{flex:1;min-width:120px;padding:9px 12px;border-radius:10px;font-size:13px;cursor:pointer;transition:.16s}
.bot-human .b-msg{background:linear-gradient(135deg,#002890,#1168BF);border:none;color:#fff}
.bot-human .b-msg:hover{filter:brightness(1.15)}
.bot-human .b-wecom{background:#fff;border:1px solid rgba(0,40,160,.2);color:#16294F}
.bot-human .b-wecom:hover{border-color:rgba(2,132,199,.55);color:#0E62C7}

/* 正在输入 */
.bot-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:#fff;border-radius:14px;border-bottom-left-radius:5px}
.bot-typing i{width:6px;height:6px;border-radius:50%;background:#8FA8D8;animation:botT 1.2s infinite}
.bot-typing i:nth-child(2){animation-delay:.18s}
.bot-typing i:nth-child(3){animation-delay:.36s}
@keyframes botT{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* 输入区 */
.bot-foot{flex:none;padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.bot-input-row{display:flex;gap:9px}
.bot-input{flex:1;height:44px;padding:0 15px;border-radius:12px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;outline:none;transition:.18s}
.bot-input::placeholder{color:#7E93BE}
.bot-input:focus{border-color:rgba(120,190,255,.65);background:rgba(255,255,255,.12)}
.bot-send{flex:none;width:52px;height:44px;border:none;border-radius:12px;cursor:pointer;font-size:17px;color:#fff;
  background:linear-gradient(135deg,#002890 0%,#1168BF 100%);transition:.16s;display:flex;align-items:center;justify-content:center}
.bot-send:hover{filter:brightness(1.18)}
.bot-send svg{width:20px;height:20px}
.bot-note{margin-top:8px;text-align:center;font-size:10.5px;color:#7E93BE;letter-spacing:.5px}

/* ---------------- 答案反馈条（自学习闭环 · 2026-10-14） ---------------- */
.bot-fb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px;padding-left:2px;animation:fbIn .3s ease}
@keyframes fbIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fb-tip{font-size:11.5px;color:#8FA3C8}
.fb-btn{height:27px;padding:0 12px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:500;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#C9D8F2;transition:.16s}
.fb-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.fb-btn.fb-yes:hover{border-color:rgba(80,220,140,.6);color:#7DE2A5}
.fb-btn.fb-no:hover{border-color:rgba(255,170,90,.6);color:#FFC79A}
.fb-done{font-size:12px;color:#7DE2A5;letter-spacing:.3px}
.bot-fb{margin-bottom:6px}

/* 移动端：底部抽屉 */
@media (max-width:640px){
  .bot-overlay{padding:0;align-items:flex-end}
  .bot-win{width:100%;height:82vh;max-height:none;border-radius:18px 18px 0 0;transform:translateY(30px)}
  .bot-overlay.open .bot-win{transform:none}
  .bot-msg{max-width:90%}
}