#wpp-btn{position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:50%;
background:#25D366;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;
box-shadow:0 10px 30px rgba(0,0,0,.3);}
#wpp-btn svg{width:32px;height:32px}
#wpp-panel{position:fixed;right:-380px;bottom:0;width:360px;height:430px;background:#fff;
border-radius:20px 0 0 0;box-shadow:-8px 0 40px rgba(0,0,0,.25);transition:.35s;z-index:9999;overflow:auto;}
#wpp-panel.active{right:0}
.head{background:#25D366;color:#fff;padding:18px;font-size:20px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
#close{background:none;border:0;color:#fff;font-size:30px;cursor:pointer}
.item{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid #eee;text-decoration:none;color:#111;}
.item img{width:48px;height:48px;border-radius:50%;object-fit:cover;}
.item div strong{font-size:16px;margin-bottom:2px;display:block}
.item div small{color:#888;font-size:13px;display:block}
.item.offline{opacity:.4}
.dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#25D366;}
.offline .dot{background:#999}