/* ============================================================
   苗生堂 AI 智能客服 · 浮窗组件样式
   ============================================================ */
:root{
  --chat-ai:#2FC9B9; --chat-ai-deep:#179C8E; --chat-green:#1F4E3D;
  --chat-gold:#C8A45C; --chat-bubble:#F1F7F5;
}
.ai-fab{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--chat-ai),var(--chat-ai-deep));color:#06231f;
  border:none;cursor:pointer;padding:14px 20px 14px 16px;border-radius:999px;font-family:var(--font-sans);
  font-size:15px;font-weight:700;box-shadow:0 12px 34px var(--ai-glow);transition:transform .25s,box-shadow .25s}
.ai-fab:hover{transform:translateY(-3px);box-shadow:0 16px 42px var(--ai-glow)}
.ai-fab .fab-ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:19px;position:relative}
.ai-fab .fab-ic::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#7CF0C2;border:2px solid var(--chat-ai-deep)}
.ai-fab .fab-pulse{position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 var(--ai-glow);animation:fabpulse 2.4s infinite}
@keyframes fabpulse{0%{box-shadow:0 0 0 0 var(--ai-glow)}70%{box-shadow:0 0 0 16px rgba(47,201,185,0)}100%{box-shadow:0 0 0 0 rgba(47,201,185,0)}}
.ai-fab .fab-label{line-height:1.1}
.ai-fab .fab-label small{display:block;font-size:10px;font-weight:600;opacity:.8;letter-spacing:.05em}

/* 聊天面板 */
.ai-panel{position:fixed;right:24px;bottom:24px;z-index:95;width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 48px);
  background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(8,30,22,.32);overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s;
  font-family:var(--font-sans)}
.ai-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.ai-panel-head{background:linear-gradient(135deg,var(--chat-green),#0e241b);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;position:relative}
.ai-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--chat-ai),var(--chat-ai-deep));
  display:grid;place-items:center;font-size:22px;box-shadow:0 0 0 3px rgba(47,201,185,.35);flex:none;position:relative}
.ai-avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#7CF0C2;border:2px solid var(--chat-green)}
.ai-head-text b{font-family:var(--font-serif);font-size:16px;display:block}
.ai-head-text span{font-size:12px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:5px}
.ai-head-text .live{width:7px;height:7px;border-radius:50%;background:var(--chat-ai);box-shadow:0 0 0 0 var(--ai-glow);animation:pulse 2s infinite}
.ai-close{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;transition:background .2s}
.ai-close:hover{background:rgba(255,255,255,.24)}

.ai-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;background:
  linear-gradient(180deg,#fbfdfc,#f4f8f6)}
.ai-body::-webkit-scrollbar{width:7px}
.ai-body::-webkit-scrollbar-thumb{background:rgba(31,78,61,.25);border-radius:4px}

.msg{display:flex;gap:10px;max-width:88%;align-items:flex-end;animation:msgIn .35s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.bot{align-self:flex-start}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg .m-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:16px}
.msg.bot .m-av{background:linear-gradient(135deg,var(--chat-ai),var(--chat-ai-deep));color:#06231f}
.msg.user .m-av{background:var(--chat-green);color:#fff}
.bubble{padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.6;word-break:break-word}
.msg.bot .bubble{background:#fff;border:1px solid #e4efe9;border-bottom-left-radius:4px;color:var(--ink)}
.msg.user .bubble{background:var(--chat-green);color:#fff;border-bottom-right-radius:4px}
.bubble b{color:var(--chat-ai-deep)}
.bubble a{color:var(--chat-ai-deep);text-decoration:underline}
.bubble ul{margin:6px 0 2px;padding-left:18px}
.bubble li{margin:3px 0}
.typing{display:flex;gap:4px;padding:13px 15px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--chat-ai);opacity:.5;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ai-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.ai-quick button{border:1px solid var(--chat-ai);color:var(--chat-ai-deep);background:#fff;border-radius:999px;
  padding:7px 13px;font-size:12.5px;cursor:pointer;font-family:var(--font-sans);transition:background .2s,color .2s}
.ai-quick button:hover{background:var(--chat-ai);color:#06231f}

.ai-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #eef2f0;background:#fff}
.ai-input input{flex:1;border:1.5px solid #e2e8e5;border-radius:12px;padding:11px 14px;font-family:var(--font-sans);font-size:14px;background:#fafcfb}
.ai-input input:focus{outline:none;border-color:var(--chat-ai)}
.ai-send{border:none;background:linear-gradient(135deg,var(--chat-ai),var(--chat-ai-deep));color:#06231f;width:46px;height:46px;
  border-radius:12px;cursor:pointer;font-size:18px;flex:none;transition:transform .15s}
.ai-send:active{transform:scale(.94)}
.ai-foot{text-align:center;font-size:11px;color:#9aa8a2;padding:0 0 10px;background:#fff}
.ai-foot b{color:var(--chat-ai-deep)}

@media (max-width:480px){
  .ai-fab .fab-label{display:none}
  .ai-fab{padding:14px;bottom:96px}
  .ai-panel{right:12px;left:12px;bottom:12px;width:auto}
}