:root {
  --primary: #c9a96e;
  --secondary: #edd9b0;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-dark: #2d2d2d;
  --text: #2d2d2d;
  --text-muted: rgba(45,45,45,.68);
  --text-light: #f5f5f0;
  --border: #e0e0e0;
  --shadow: 0 24px 60px rgba(0,0,0,.18);
}

#ao-chatbot-root * { box-sizing: border-box; font-family: Inter, system-ui, sans-serif; }
#ao-chatbot-root { position: fixed; inset: 0; pointer-events: none; z-index: 999999; }
.ao-chatbot-toggle {
  position: fixed; right: 24px; bottom: 24px; width: 64px; height: 64px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), #b88d43); color: white; box-shadow: var(--shadow); cursor: pointer;
  display:flex; align-items:center; justify-content:center; pointer-events:auto; transition: transform .25s ease, box-shadow .25s ease;
  animation: aoPulse 2.8s infinite;
}
.ao-chatbot-toggle:hover { transform: translateY(-2px) scale(1.03); }
.ao-chatbot-badge { position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; border-radius:999px; background:#d93d3d; color:#fff; font-size:12px; display:none; align-items:center; justify-content:center; padding:0 6px; }
.ao-chatbot-window {
  position: fixed; right: 24px; bottom: 100px; width: 380px; height: 520px; background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow); overflow:hidden; transform: scale(.92); opacity:0; pointer-events:none; transition: all .22s ease;
  display:flex; flex-direction:column; border: 1px solid rgba(0,0,0,.06);
}
.ao-chatbot-window.open { transform: scale(1); opacity:1; pointer-events:auto; }
.ao-chatbot-header { background: linear-gradient(135deg, var(--primary), #b88d43); color: white; padding: 16px; display:flex; align-items:center; justify-content:space-between; }
.ao-chatbot-brand { display:flex; align-items:center; gap:12px; }
.ao-chatbot-avatar { width:42px; height:42px; border-radius:999px; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ao-chatbot-avatar img { width:100%; height:100%; object-fit:cover; }
.ao-chatbot-status { font-size:12px; opacity:.92; display:flex; align-items:center; gap:6px; }
.ao-chatbot-status::before { content:''; width:8px; height:8px; border-radius:50%; background:#82f288; display:inline-block; }
.ao-chatbot-close { background:transparent; border:0; color:white; cursor:pointer; font-size:20px; }
.ao-chatbot-messages { flex:1; overflow:auto; padding: 18px 16px; background: var(--bg); display:flex; flex-direction:column; gap:12px; }
.ao-msg { max-width: 85%; padding: 12px 14px; border-radius: 18px; line-height:1.55; font-size:14px; animation: messageIn .2s ease; }
.ao-msg.bot { align-self:flex-start; background: var(--surface-dark); color: var(--text-light); border-bottom-left-radius: 6px; }
.ao-msg.user { align-self:flex-end; background: linear-gradient(135deg, var(--primary), #b88d43); color:#fff; border-bottom-right-radius:6px; }
.ao-msg a { color: inherit; text-decoration: underline; }
.ao-quick-wrap { display:flex; flex-wrap:wrap; gap:8px; padding: 0 16px 10px; background: var(--bg); }
.ao-quick-btn { pointer-events:auto; border:1px solid var(--border); background:#fff; color:var(--text); padding:8px 12px; border-radius:999px; font-size:12px; cursor:pointer; transition: all .2s ease; }
.ao-quick-btn:hover { border-color: var(--primary); background:#fff9ef; }
.ao-chatbot-input { padding: 14px; border-top:1px solid var(--border); background:#fff; display:flex; gap:10px; align-items:flex-end; }
.ao-chatbot-textarea { flex:1; resize:none; max-height:120px; min-height:44px; border:1px solid var(--border); border-radius:14px; padding:12px 14px; outline:none; font-size:14px; }
.ao-chatbot-send { border:0; background: linear-gradient(135deg, var(--primary), #b88d43); color:white; width:46px; height:46px; border-radius:14px; cursor:pointer; }
.ao-typing { display:flex; gap:6px; align-items:center; }
.ao-typing span { width:7px; height:7px; border-radius:999px; background:#fff; opacity:.4; animation: aoTyping 1.2s infinite; }
.ao-typing span:nth-child(2){ animation-delay:.2s } .ao-typing span:nth-child(3){ animation-delay:.4s }

@keyframes aoPulse { 0%,100%{ box-shadow: 0 20px 50px rgba(0,0,0,.18)} 50%{ box-shadow: 0 20px 50px rgba(201,169,110,.38)} }
@keyframes aoTyping { 0%,80%,100%{ transform:translateY(0); opacity:.35 } 40%{ transform:translateY(-3px); opacity:1 } }
@keyframes messageIn { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:translateY(0) } }

@media (max-width: 640px) {
  .ao-chatbot-toggle { right: 16px; bottom: 16px; }
  .ao-chatbot-window { right: 0; bottom: 0; width: 100vw; height: 100vh; border-radius:0; }
}