/* Yateer Voice Bot — Public Widget Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

:root { --yvbot-primary: #185FA5; }

.yvbot-widget { position:fixed; z-index:99999; font-family:'DM Sans',sans-serif; }
.yvbot-widget.yvbot-bottom-right { bottom:24px; right:24px; }
.yvbot-widget.yvbot-bottom-left  { bottom:24px; left:24px; }

/* Bubble */
.yvbot-bubble { width:60px; height:60px; border-radius:50%; background:var(--yvbot-primary); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.22); transition:transform .2s; position:relative; }
.yvbot-bubble:hover { transform:scale(1.07); }
.yvbot-pulse { position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:#22c55e; border-radius:50%; border:2.5px solid #fff; animation:yvbotPulse 2s infinite; }
@keyframes yvbotPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }

/* Panel */
.yvbot-panel { position:absolute; bottom:74px; width:320px; background:#fff; border-radius:18px; box-shadow:0 10px 44px rgba(0,0,0,.18); display:none; flex-direction:column; overflow:hidden; }
.yvbot-widget.yvbot-bottom-right .yvbot-panel { right:0; }
.yvbot-widget.yvbot-bottom-left  .yvbot-panel { left:0; }
.yvbot-panel.yvbot-open { display:flex; animation:yvbotSlideIn .25s ease; }
@keyframes yvbotSlideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* Header */
.yvbot-header { background:var(--yvbot-primary); padding:14px 16px; display:flex; align-items:center; gap:10px; }
.yvbot-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.yvbot-agent-info { flex:1; }
.yvbot-agent-name { color:#fff; font-size:14px; font-weight:500; }
.yvbot-agent-status { color:rgba(255,255,255,.75); font-size:11px; display:flex; align-items:center; gap:5px; margin-top:2px; }
.yvbot-status-dot { width:7px; height:7px; background:#22c55e; border-radius:50%; }
.yvbot-close { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.7); font-size:22px; cursor:pointer; line-height:1; padding:0; }
.yvbot-close:hover { color:#fff; }

/* Waveform */
.yvbot-waveform { display:flex; align-items:center; justify-content:center; gap:3px; height:34px; background:#f0f6fc; padding:0 16px; }
.yvbot-bar { display:inline-block; width:3px; background:var(--yvbot-primary); border-radius:2px; height:6px; transition:height .1s; }
.yvbot-bar.yvbot-animated { animation:yvbotWave .7s ease-in-out infinite; }
.yvbot-bar:nth-child(1){animation-delay:0s}.yvbot-bar:nth-child(2){animation-delay:.08s}.yvbot-bar:nth-child(3){animation-delay:.16s}.yvbot-bar:nth-child(4){animation-delay:.24s}.yvbot-bar:nth-child(5){animation-delay:.32s}.yvbot-bar:nth-child(6){animation-delay:.24s}.yvbot-bar:nth-child(7){animation-delay:.16s}.yvbot-bar:nth-child(8){animation-delay:.08s}.yvbot-bar:nth-child(9){animation-delay:0s}
@keyframes yvbotWave { 0%,100%{height:4px} 50%{height:20px} }

/* Messages */
.yvbot-messages { padding:12px; display:flex; flex-direction:column; gap:8px; max-height:200px; overflow-y:auto; scrollbar-width:thin; }
.yvbot-msg { padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; max-width:86%; word-break:break-word; }
.yvbot-msg.yvbot-bot  { background:#f0f4f8; color:#1a1a2e; align-self:flex-start; border-bottom-left-radius:4px; }
.yvbot-msg.yvbot-user { background:var(--yvbot-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }

/* Quick actions */
.yvbot-quick-actions { padding:8px 12px; border-top:1px solid #f0f0f0; }
.yvbot-hint-text { font-size:11px; color:#aaa; display:block; margin-bottom:6px; }
#yvbot-qa-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.yvbot-qa-chip { padding:4px 11px; border:1px solid var(--yvbot-primary); color:var(--yvbot-primary); background:none; border-radius:14px; font-size:11px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; }
.yvbot-qa-chip:hover { background:var(--yvbot-primary); color:#fff; }

/* Lead form */
.yvbot-lead-form { padding:12px; border-top:1px solid #f0f0f0; background:#fafcff; }
.yvbot-lead-title { font-size:13px; font-weight:500; color:#1a1a2e; margin-bottom:8px; }
.yvbot-lead-form input { width:100%; border:1px solid #ddd; border-radius:7px; padding:7px 10px; font-size:12px; margin-bottom:6px; box-sizing:border-box; font-family:'DM Sans',sans-serif; color:#1a1a2e; }
.yvbot-lead-form input:focus { border-color:var(--yvbot-primary); outline:none; }
.yvbot-lead-form button { width:100%; padding:9px; background:var(--yvbot-primary); color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; }
.yvbot-lead-form button:hover { opacity:.9; }

/* Input row */
.yvbot-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid #f0f0f0; }
.yvbot-input-row input { flex:1; border:1px solid #ddd; border-radius:20px; padding:7px 13px; font-size:13px; font-family:'DM Sans',sans-serif; color:#1a1a2e; outline:none; }
.yvbot-input-row input:focus { border-color:var(--yvbot-primary); }
.yvbot-send-btn { width:34px; height:34px; border-radius:50%; background:var(--yvbot-primary); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yvbot-send-btn:hover { opacity:.85; }

/* CTA buttons */
.yvbot-cta-row { display:flex; gap:6px; padding:8px 12px 12px; }
.yvbot-cta-call,.yvbot-cta-wa,.yvbot-cta-callback { flex:1; padding:8px 4px; border:none; border-radius:8px; font-size:11px; font-weight:500; cursor:pointer; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; }
.yvbot-cta-call { background:#16a34a; color:#fff; }
.yvbot-cta-wa   { background:#25D366; color:#fff; }
.yvbot-cta-callback { background:#f0f6fc; color:var(--yvbot-primary); }
.yvbot-cta-call:hover,.yvbot-cta-wa:hover { opacity:.88; }
.yvbot-cta-callback:hover { background:#e0eef8; }

/* Typing indicator */
.yvbot-typing { display:flex; gap:4px; padding:10px 14px; }
.yvbot-typing span { width:7px; height:7px; background:#ccc; border-radius:50%; animation:yvbotDot 1.2s infinite; }
.yvbot-typing span:nth-child(2){animation-delay:.2s} .yvbot-typing span:nth-child(3){animation-delay:.4s}
@keyframes yvbotDot { 0%,80%,100%{transform:scale(0.6);opacity:.4} 40%{transform:scale(1);opacity:1} }