/* Notification Popup — bottom-left */
.np-container{position:fixed;bottom:20px;left:20px;z-index:99999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;max-width:360px;width:calc(100vw - 40px)}
.np-popup{pointer-events:auto;background:#1e1e2e;border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);overflow:hidden;cursor:pointer;opacity:0;transform:translateX(-20px);transition:opacity .25s ease,transform .25s ease}
.np-popup.np-show{opacity:1;transform:translateX(0)}
.np-popup.np-hide{opacity:0;transform:translateX(-20px)}
.np-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0}
.np-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5)}
.np-close{background:none;border:none;color:rgba(255,255,255,.35);font-size:18px;cursor:pointer;padding:0 2px;line-height:1;transition:color .15s}
.np-close:hover{color:#fff}
.np-body{display:flex;align-items:flex-start;gap:10px;padding:8px 12px 12px}
.np-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,255,255,.08);background:#12121e}
.np-avatar-fb{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff6b1a,#ff4d8e);color:#fff;font-size:16px;font-weight:700}
.np-content{flex:1;min-width:0}
.np-msg{font-size:13px;color:rgba(255,255,255,.85);line-height:1.4;display:flex;align-items:flex-start;gap:5px}
.np-msg svg{flex-shrink:0;margin-top:2px}
.np-time{font-size:11px;color:rgba(255,255,255,.3);margin-top:2px}
@media(max-width:480px){.np-container{bottom:70px;left:10px;max-width:calc(100vw - 20px)}}