:root {
  --cb-accent:    #c0392b;
  --cb-accent2:   #96281b;
  --cb-bg:        #ffffff;
  --cb-bubble-bg: #f7f3ef;
  --cb-text:      #2c2420;
  --cb-muted:     #9a8b7a;
  --cb-radius:    18px;
  --cb-width:     340px;
}
.cb-avatar-svg { width:100%; height:100%; border-radius:50%; display:block; }
#cb-launcher {
  position:fixed; bottom:90px; left:28px;
  width:64px; height:64px; border-radius:50%;
  background:var(--cb-accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(192,57,43,0.40);
  z-index:999999; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  overflow:hidden; padding:0;
}
#cb-launcher:hover { transform:scale(1.09); box-shadow:0 8px 32px rgba(192,57,43,.55); }
#cb-launcher .cb-avatar-wrap { width:64px; height:64px; border-radius:50%; overflow:hidden; }
#cb-launcher .cb-close-icon { display:none; color:#fff; font-size:22px; font-weight:300; }
#cb-launcher.open .cb-avatar-wrap { display:none; }
#cb-launcher.open .cb-close-icon { display:block; }
#cb-launcher.open { background:#555; box-shadow:0 4px 16px rgba(0,0,0,.25); }
#cb-launcher .cb-dot {
  position:absolute; top:4px; right:4px;
  width:14px; height:14px; background:#27ae60;
  border:2px solid #fff; border-radius:50%;
}
#cb-launcher.open .cb-dot { display:none; }
#cb-teaser {
  position:fixed; bottom:166px; left:28px;
  background:#fff; border:1px solid #e8e0d8;
  border-radius:14px 14px 14px 4px;
  padding:10px 16px; font-size:13px; color:#2c2420;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  z-index:999998; white-space:nowrap; display:none;
  font-family:sans-serif;
  animation:cb-pop .4s cubic-bezier(.34,1.56,.64,1) both; cursor:pointer;
}
#cb-teaser span { font-weight:600; color:var(--cb-accent); }
#cb-teaser .cb-teaser-close { margin-left:10px; color:#ccc; cursor:pointer; font-size:15px; vertical-align:middle; }
@keyframes cb-pop {
  from { opacity:0; transform:scale(.8) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
#cb-window {
  position:fixed; bottom:166px; left:28px;
  width:var(--cb-width); max-height:560px;
  background:var(--cb-bg); border-radius:var(--cb-radius);
  box-shadow:0 16px 60px rgba(0,0,0,.18); z-index:999999;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(20px) scale(.96);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  font-family:sans-serif;
}
#cb-window.open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
#cb-header {
  background:linear-gradient(135deg, var(--cb-accent) 0%, var(--cb-accent2) 100%);
  padding:14px 18px; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
#cb-header .cb-hdr-avatar { width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.4); overflow:hidden; flex-shrink:0; }
.cb-header-info { flex:1; }
.cb-header-name { font-size:15px; font-weight:600; color:#fff; }
.cb-header-role { font-size:11px; color:rgba(255,255,255,.75); margin-top:1px; }
.cb-header-status { display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.8); margin-top:3px; }
.cb-status-dot { width:7px; height:7px; background:#2ecc71; border-radius:50%; animation:cb-pulse 2s infinite; }
@keyframes cb-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#cb-messages {
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--cb-bubble-bg); scroll-behavior:smooth;
}
#cb-messages::-webkit-scrollbar { width:4px; }
#cb-messages::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }
.cb-msg { max-width:85%; font-size:13.5px; line-height:1.55; animation:cb-slide .25s ease both; }
@keyframes cb-slide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cb-msg.bot { align-self:flex-start; }
.cb-msg.user { align-self:flex-end; }
.cb-msg.bot .cb-bubble {
  background:#fff; color:var(--cb-text);
  border-radius:4px 16px 16px 16px;
  padding:10px 14px; box-shadow:0 1px 4px rgba(0,0,0,.07); border:1px solid #ede8e2;
}
.cb-msg.user .cb-bubble {
  background:var(--cb-accent); color:#fff;
  border-radius:16px 4px 16px 16px; padding:10px 14px;
}
.cb-msg-time { font-size:10px; color:var(--cb-muted); margin-top:4px; padding:0 4px; }
.cb-msg.user .cb-msg-time { text-align:right; }
.cb-quick-replies { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; animation:cb-slide .3s .1s ease both; }
.cb-qr {
  background:#fff; border:1.5px solid var(--cb-accent); color:var(--cb-accent);
  border-radius:20px; padding:6px 14px; font-size:12.5px;
  font-family:sans-serif; font-weight:500; cursor:pointer;
  transition:background .15s, color .15s; white-space:nowrap;
}
.cb-qr:hover { background:var(--cb-accent); color:#fff; }
.cb-typing {
  align-self:flex-start; background:#fff; border:1px solid #ede8e2;
  border-radius:4px 16px 16px 16px; padding:12px 16px;
  display:flex; gap:5px; align-items:center; box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.cb-typing span { width:7px; height:7px; background:#ccc; border-radius:50%; animation:cb-bounce .9s infinite; }
.cb-typing span:nth-child(2) { animation-delay:.15s; }
.cb-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes cb-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px);background:var(--cb-accent)} }
#cb-footer {
  padding:10px 14px; background:#fff; border-top:1px solid #f0ebe4;
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
#cb-input {
  flex:1; border:1.5px solid #e8e0d8; border-radius:22px;
  padding:9px 16px; font-size:13px; font-family:sans-serif;
  color:var(--cb-text); outline:none; transition:border .15s; background:#fafaf8;
}
#cb-input:focus { border-color:var(--cb-accent); background:#fff; }
#cb-send {
  width:38px; height:38px; border-radius:50%; background:var(--cb-accent);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s; flex-shrink:0;
}
#cb-send:hover { background:var(--cb-accent2); transform:scale(1.08); }
#cb-send svg { width:16px; height:16px; fill:#fff; }
#cb-wa-btn {
  width:38px; height:38px; border-radius:50%; background:#25D366;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s; flex-shrink:0; text-decoration:none;
}
#cb-wa-btn:hover { background:#1da851; transform:scale(1.08); }
#cb-wa-btn svg { width:20px; height:20px; fill:#fff; }
@media(max-width:480px) {
  #cb-window  { left:10px; bottom:172px; width:calc(100vw - 20px); }
  #cb-launcher{ left:14px; bottom:90px; }
  #cb-teaser  { left:10px; bottom:172px; }
}