/* Vivi — chat de atendimento por IA (home) */
.ai-widget { position:fixed; right:max(22px,env(safe-area-inset-right)); bottom:calc(22px + env(safe-area-inset-bottom)); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:inherit; }
.ai-fab { box-sizing:border-box; width:58px; height:58px; border:0; border-radius:999px; cursor:pointer; font-size:28px; line-height:1; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#7c3aed,#2563eb); box-shadow:0 10px 26px rgba(80,60,220,.5); transition:transform .15s ease; position:relative; }
.ai-fab:hover { transform:translateY(-3px); }
.ai-fab-badge { position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:#ef4444; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
section.ai-panel, .storefront section.ai-panel { width:min(378px,calc(100vw - 28px)); height:min(540px,calc(100dvh - 130px)); min-height:380px; background:#fff; border:1px solid #e2e8f0; border-radius:20px; box-shadow:0 30px 70px -20px rgba(15,40,80,.45); display:flex; flex-direction:column; overflow:hidden; animation:aiUp .3s cubic-bezier(.2,.7,.3,1) both; padding:0; margin:0; }
.ai-panel[hidden] { display:none; }
@keyframes aiUp { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.ai-head { display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; margin:0; background:linear-gradient(135deg,#1e1b4b,#312e81 60%,#1d4ed8); color:#fff; border-radius:19px 19px 0 0; flex-shrink:0; }
.ai-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex-shrink:0; position:relative; overflow:hidden; }
.ai-avatar svg { width:26px; height:26px; }
.ai-avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; opacity:0; }
.ai-avatar-photo.on { opacity:1; }
.ai-fab-ico { display:grid; place-items:center; line-height:0; }
.ai-fab-ico svg { width:32px; height:32px; }
.ai-fab-img { width:34px; height:34px; object-fit:contain; }
.ai-head h2 { font-size:14px; margin:0; }
.ai-head small { font-size:11px; color:#c7d2fe; display:flex; align-items:center; gap:5px; }
.ai-online { width:8px; height:8px; border-radius:50%; background:#4ade80; display:inline-block; animation:aiPulse 2s infinite; }
@keyframes aiPulse { 0%,100% { box-shadow:0 0 0 0 rgba(74,222,128,.6); } 50% { box-shadow:0 0 0 5px rgba(74,222,128,0); } }
.ai-x { margin-left:auto; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; flex-shrink:0; }
.ai-msgs { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:9px; background:#f8fafc; }
.ai-msg { max-width:85%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.ai-msg.bot { align-self:flex-start; background:#fff; border:1px solid #e2e8f0; border-bottom-left-radius:4px; color:#1e293b; }
.ai-msg.user { align-self:flex-end; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; border-bottom-right-radius:4px; }
.ai-actions { display:flex; flex-direction:column; gap:6px; align-self:flex-start; max-width:85%; }
.ai-actions a { display:block; text-align:center; font-size:13px; font-weight:700; padding:9px 14px; border-radius:12px; text-decoration:none; }
.ai-actions a.wa { background:#22c55e; color:#fff; }
.ai-actions a.link { background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe; }
.ai-typing { align-self:flex-start; background:#fff; border:1px solid #e2e8f0; border-radius:14px; border-bottom-left-radius:4px; padding:9px 14px 11px; display:flex; align-items:center; gap:6px; }
.ai-typing-label { font-size:10.5px; color:#94a3b8; font-style:italic; }
.ai-ticks { font-size:10px; letter-spacing:-2px; opacity:.75; margin-left:6px; vertical-align:middle; }
.ai-ticks.seen { color:#7dd3fc; opacity:1; }
.ai-typing i { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:aiBlink 1.1s infinite; }
.ai-typing i:nth-child(2) { animation-delay:.18s; } .ai-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes aiBlink { 0%,100% { opacity:.3; } 50% { opacity:1; } }
.ai-quick { display:flex; gap:6px; padding:8px 10px; border-top:1px solid #eef2f6; background:#fff; overflow-x:auto; }
.ai-quick button { flex-shrink:0; font-size:12px; font-weight:600; padding:7px 12px; border-radius:99px; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; cursor:pointer; font-family:inherit; }
.ai-form { display:flex; gap:8px; padding:10px; border-top:1px solid #eef2f6; background:#fff; }
.ai-form input { flex:1; min-width:0; border:1.5px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-size:14px; font-family:inherit; }
.ai-form input:focus { outline:none; border-color:#7c3aed; }
.ai-form button { width:42px; height:42px; flex-shrink:0; border:0; border-radius:12px; background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff; font-size:17px; cursor:pointer; }
.ai-form button:disabled { opacity:.5; cursor:wait; }
@media(max-width:480px) {
  .ai-widget { right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); }
  .ai-panel { width:calc(100vw - 24px); height:min(560px,calc(100dvh - 110px)); }
}
/* empilha acima da barra fixa de ofertas quando ela aparece */
@media(max-width:760px) {
  body:has(.sticky-cta.show) .ai-widget { transform:translateY(-76px); }
  .ai-widget { transition:transform .35s cubic-bezier(.2,.7,.3,1); }
}
@media(prefers-reduced-motion:reduce) {
  .ai-panel, .ai-online, .ai-typing i { animation:none; }
}