/* ========== AI智能客服弹窗组件 v4.3 样式 ========== */
#ai-chat-trigger{position:fixed;z-index:99999;cursor:pointer;width:60px;height:60px;border-radius:50%;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.25);transition:transform .3s,box-shadow .3s;background:linear-gradient(135deg,#1890ff,#096dd9)}
#ai-chat-trigger:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,.3)}
#ai-chat-trigger .ai-badge{position:absolute;top:-4px;right:-4px;background:#ff4d4f;color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:none;align-items:center;justify-content:center;border:2px solid #fff}
#ai-chat-trigger svg{width:28px;height:28px;fill:#fff}

#ai-chat-widget{position:fixed;z-index:100000;width:400px;height:600px;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.2);display:none;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:#fff}

@media(max-width:480px){
    #ai-chat-widget{width:calc(100vw - 16px);height:calc(100vh - 100px);left:8px!important;right:8px!important;bottom:80px!important;border-radius:12px}
}

/* ===== 头部 ===== */
.ai-hdr{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#1890ff,#096dd9)}
.ai-hdr .ai-hdr-l{display:flex;align-items:center;gap:10px}
.ai-hdr .ai-hdr-l .ai-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.ai-hdr .ai-hdr-l .ai-av svg{width:22px;height:22px;fill:#fff}
.ai-hdr .ai-hdr-l .ai-av img{width:100%;height:100%;object-fit:cover}
.ai-hdr .ai-hdr-l .ai-info h4{margin:0;font-size:15px;font-weight:600;color:#fff}
.ai-hdr .ai-hdr-l .ai-info span{font-size:11px;opacity:.85;color:#fff;display:flex;align-items:center;gap:4px}
.ai-hdr .ai-hdr-l .ai-info span::before{content:'';width:6px;height:6px;border-radius:50%;background:#52c41a;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ai-hdr .ai-hdr-r{display:flex;gap:8px}
.ai-hdr .ai-hdr-r button{background:none;border:none;color:#fff;cursor:pointer;padding:4px;opacity:.7;font-size:18px;line-height:1;transition:opacity .2s}
.ai-hdr .ai-hdr-r button:hover{opacity:1}

/* ===== 消息区 ===== */
.ai-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

.ai-msgs{flex:1;overflow-y:auto;padding:16px;background:#f7f8fa}
.ai-msgs::-webkit-scrollbar{width:4px}
.ai-msgs::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}

.ai-m{margin-bottom:16px;display:flex;gap:8px;animation:aiIn .3s ease}
@keyframes aiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ai-m.user{flex-direction:row-reverse}
.ai-m .ai-mav{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;overflow:hidden}
.ai-m .ai-mav img{width:100%;height:100%;object-fit:cover}
.ai-m.user .ai-mav{background:#e6f7ff;color:#1890ff}
.ai-m.ai .ai-mav,.ai-m.staff .ai-mav{background:#f0f5ff;color:#2f54eb}
.ai-m.system .ai-mav{display:none}
.ai-m .ai-bb{max-width:270px;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.7;word-break:break-word}
.ai-m.user .ai-bb{color:#fff;border-bottom-right-radius:4px;background:#1890ff}
.ai-m.ai .ai-bb,.ai-m.staff .ai-bb{background:#fff;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ai-m.system .ai-bb{background:#fff7e6;color:#d48806;border-radius:8px;font-size:12px;max-width:100%;text-align:center;margin:0 auto;padding:8px 14px}
.ai-m.system{justify-content:center}
.ai-m .ai-bb .ai-tm{font-size:11px;margin-top:6px;display:block}
.ai-m.user .ai-bb .ai-tm{color:rgba(255,255,255,.65)}
.ai-m.ai .ai-bb .ai-tm,.ai-m.staff .ai-bb .ai-tm{color:rgba(0,0,0,.3)}

/* ===== 富文本样式 ===== */
.ai-m .ai-bb .ai-text{white-space:pre-wrap;word-break:break-word}
.ai-m .ai-bb .ai-text b,.ai-m .ai-bb .ai-text strong{font-weight:600}
.ai-m .ai-bb .ai-text a{color:#1890ff;text-decoration:underline;word-break:break-all}
.ai-m.user .ai-bb .ai-text a{color:#fff;text-decoration:underline}
.ai-m .ai-bb .ai-text .ai-num{display:inline-block;margin-right:4px;font-weight:600;color:#1890ff}
.ai-m.user .ai-bb .ai-text .ai-num{color:#fff}
.ai-m .ai-bb .ai-text .ai-code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:3px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.9em}
.ai-m.user .ai-bb .ai-text .ai-code{background:rgba(255,255,255,.2)}

/* ===== 图片消息 ===== */
.ai-m.img-msg .ai-bb{padding:6px;max-width:230px;background:#fff}
.ai-m.img-msg.user .ai-bb{background:#1890ff}
.ai-m.img-msg.staff .ai-bb{background:#f6ffed}
.ai-m.img-msg .ai-img{display:block;max-width:100%;max-height:220px;border-radius:10px;cursor:pointer;transition:transform .2s}
.ai-m.img-msg .ai-img:hover{transform:scale(1.02)}
.ai-m.img-msg .ai-img-caption{margin-top:6px;padding:0 6px 2px;font-size:13px;line-height:1.5;word-break:break-word}
.ai-m.img-msg.user .ai-img-caption{color:#fff}
.ai-m.img-msg .ai-tm{margin-top:4px;padding:0 6px 2px}

/* ===== 图片查看器 ===== */
.ai-img-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.88);z-index:999999;display:none;align-items:center;justify-content:center;cursor:zoom-out}
.ai-img-viewer.show{display:flex}
.ai-img-viewer img{max-width:92%;max-height:92%;object-fit:contain;border-radius:4px}
.ai-img-viewer .ai-iv-close{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ai-img-viewer .ai-iv-close:hover{background:rgba(255,255,255,.3)}

/* ===== 打字动画 ===== */
.ai-typing{display:flex;gap:4px;padding:8px 14px;align-items:center}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:#bbb;animation:tdot 1.4s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,80%,100%{transform:scale(1);opacity:.4}40%{transform:scale(1.3);opacity:1}}

/* ===== 底部输入区 ===== */
.ai-ftr{padding:12px 16px;background:#fff;border-top:1px solid #f0f0f0;flex-shrink:0}
.ai-ftr .ai-irow{display:flex;gap:8px;align-items:flex-end}
.ai-ftr textarea{flex:1;border:1px solid #e0e0e0;border-radius:12px;padding:10px 14px;font-size:14px;resize:none;outline:none;font-family:inherit;max-height:80px;min-height:40px;line-height:1.4;transition:border-color .2s;color:#333;background:#fff}
.ai-ftr textarea:focus{border-color:#1890ff}
.ai-ftr .ai-img-btn,.ai-ftr .ai-sbtn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ai-ftr .ai-img-btn{background:#f0f0f0;color:#666}
.ai-ftr .ai-img-btn:hover{background:#e6f7ff;color:#1890ff}
.ai-ftr .ai-img-btn svg{width:20px;height:20px;fill:currentColor}
.ai-ftr .ai-sbtn{background:#1890ff}
.ai-ftr .ai-sbtn:active{transform:scale(.93)}
.ai-ftr .ai-sbtn:disabled{opacity:.4;cursor:not-allowed}
.ai-ftr .ai-sbtn svg{width:18px;height:18px;fill:#fff}
.ai-ftr .ai-tools{display:flex;gap:12px;margin-top:8px}
.ai-ftr .ai-tools button{background:none;border:none;color:#999;font-size:12px;cursor:pointer;transition:color .2s;padding:0}
.ai-ftr .ai-tools button:hover{color:#1890ff}

/* ===== 图片预览（发送前） ===== */
.ai-img-preview{margin-bottom:10px;padding:10px;background:#f7f8fa;border:1px dashed #d9d9d9;border-radius:10px;display:none;position:relative}
.ai-img-preview.show{display:block}
.ai-img-preview img{max-width:100%;max-height:120px;border-radius:8px;display:block}
.ai-img-preview .ai-img-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;font-size:14px;line-height:24px;text-align:center;padding:0}
.ai-img-preview .ai-img-remove:hover{background:rgba(0,0,0,.7)}
.ai-img-preview .ai-upload-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#e6f7ff;border-radius:0 0 10px 10px;overflow:hidden}
.ai-img-preview .ai-upload-progress-bar{height:100%;background:#1890ff;width:0;transition:width .3s}

/* ===== 联系资料表单 ===== */
.ai-form{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;z-index:10;display:none;flex-direction:column;overflow-y:auto}
.ai-form .af-head{padding:24px 24px 0;text-align:center}
.ai-form .af-head .af-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;background:#e6f7ff;color:#1890ff}
.ai-form .af-head h3{font-size:17px;font-weight:600;color:#1a1a2e;margin-bottom:6px}
.ai-form .af-head p{font-size:13px;color:#999;margin:0}
.ai-form .af-body{padding:20px 24px;flex:1}
.ai-form .af-g{margin-bottom:16px}
.ai-form .af-g label{display:block;font-size:13px;font-weight:600;color:#555;margin-bottom:6px}
.ai-form .af-g label .req{color:#ff4d4f;margin-left:2px}
.ai-form .af-g input,.ai-form .af-g textarea{width:100%;padding:10px 14px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;font-family:inherit;transition:border-color .2s;color:#333;background:#fff}
.ai-form .af-g input:focus,.ai-form .af-g textarea:focus{border-color:#1890ff;box-shadow:0 0 0 2px rgba(24,144,255,.1)}
.ai-form .af-g textarea{height:70px;resize:none}
.ai-form .af-g .af-err-input{border-color:#ff4d4f!important}
.ai-form .af-g .af-err{color:#ff4d4f;font-size:12px;margin-top:4px;display:none}
.ai-form .af-foot{padding:0 24px 24px}
.ai-form .af-submit{width:100%;padding:12px;border:none;border-radius:10px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#1890ff,#096dd9)}
.ai-form .af-submit:hover{opacity:.9}
.ai-form .af-submit:disabled{opacity:.5;cursor:not-allowed}

/* ===== 拖拽提示 ===== */
.ai-drop-hint{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(24,144,255,.1);border:2px dashed #1890ff;z-index:20;display:none;align-items:center;justify-content:center;color:#1890ff;font-size:16px;font-weight:600;pointer-events:none}
.ai-drop-hint.show{display:flex}

/* ===== 主题色：绿色 ===== */
.theme-green #ai-chat-trigger,.theme-green .ai-hdr{background:linear-gradient(135deg,#52c41a,#389e0d)}
.theme-green .ai-ftr .ai-sbtn{background:#52c41a}
.theme-green .ai-m.user .ai-bb,.theme-green .ai-m.img-msg.user .ai-bb{background:#52c41a}
.theme-green .ai-form .af-head .af-icon{background:#f6ffed;color:#52c41a}
.theme-green .ai-form .af-submit{background:linear-gradient(135deg,#52c41a,#389e0d)}
.theme-green .ai-m.user .ai-mav{background:#f6ffed;color:#52c41a}

/* ===== 主题色：紫色 ===== */
.theme-purple #ai-chat-trigger,.theme-purple .ai-hdr{background:linear-gradient(135deg,#722ed1,#531dab)}
.theme-purple .ai-ftr .ai-sbtn{background:#722ed1}
.theme-purple .ai-m.user .ai-bb,.theme-purple .ai-m.img-msg.user .ai-bb{background:#722ed1}
.theme-purple .ai-form .af-head .af-icon{background:#f9f0ff;color:#722ed1}
.theme-purple .ai-form .af-submit{background:linear-gradient(135deg,#722ed1,#531dab)}
.theme-purple .ai-m.user .ai-mav{background:#f9f0ff;color:#722ed1}

/* ===== 主题色：橙色 ===== */
.theme-orange #ai-chat-trigger,.theme-orange .ai-hdr{background:linear-gradient(135deg,#fa8c16,#d46b08)}
.theme-orange .ai-ftr .ai-sbtn{background:#fa8c16}
.theme-orange .ai-m.user .ai-bb,.theme-orange .ai-m.img-msg.user .ai-bb{background:#fa8c16}
.theme-orange .ai-form .af-head .af-icon{background:#fff7e6;color:#fa8c16}
.theme-orange .ai-form .af-submit{background:linear-gradient(135deg,#fa8c16,#d46b08)}
.theme-orange .ai-m.user .ai-mav{background:#fff7e6;color:#fa8c16}

/* ===== 主题色：红色 ===== */
.theme-red #ai-chat-trigger,.theme-red .ai-hdr{background:linear-gradient(135deg,#f5222d,#cf1322)}
.theme-red .ai-ftr .ai-sbtn{background:#f5222d}
.theme-red .ai-m.user .ai-bb,.theme-red .ai-m.img-msg.user .ai-bb{background:#f5222d}
.theme-red .ai-form .af-head .af-icon{background:#fff1f0;color:#f5222d}
.theme-red .ai-form .af-submit{background:linear-gradient(135deg,#f5222d,#cf1322)}
.theme-red .ai-m.user .ai-mav{background:#fff1f0;color:#f5222d}

/* ===== 主题色：深色 ===== */
.theme-dark #ai-chat-trigger,.theme-dark .ai-hdr{background:linear-gradient(135deg,#2c3e50,#1a1a2e)}
.theme-dark .ai-ftr .ai-sbtn{background:#2c3e50}
.theme-dark .ai-m.user .ai-bb,.theme-dark .ai-m.img-msg.user .ai-bb{background:#2c3e50}
.theme-dark .ai-form .af-head .af-icon{background:#f0f2f5;color:#2c3e50}
.theme-dark .ai-form .af-submit{background:linear-gradient(135deg,#2c3e50,#1a1a2e)}
.theme-dark .ai-m.user .ai-mav{background:#f0f2f5;color:#2c3e50}