#bc-btn:hover { transform: scale(1.08); }
#bc-win { display: flex !important; flex-direction: column; }
#bc-win.bc-hide { display: none !important; }
#bc-msgs::-webkit-scrollbar { width: 4px; }
#bc-msgs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.bc-bot, .bc-user {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
    animation: bcFade .2s ease;
}
.bc-bot  { background:#fff; color:#222; align-self:flex-start; border-bottom-left-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.09); }
.bc-user { color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.bc-typing { align-self:flex-start; background:#fff; padding:10px 16px; border-radius:14px; border-bottom-left-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.09); }
.bc-typing span { display:inline-block; width:7px; height:7px; background:#bbb; border-radius:50%; margin:0 2px; animation:bcBounce 1.2s infinite; }
.bc-typing span:nth-child(2) { animation-delay:.2s; }
.bc-typing span:nth-child(3) { animation-delay:.4s; }

@keyframes bcFade   { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes bcBounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-7px); } }
@media(max-width:380px) { #bc-win { width:calc(100vw - 20px) !important; right:-10px !important; } }