.avatar-scroll-container{scroll-behavior:smooth;box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;gap:8px;width:100%;height:100%;padding:5px;display:flex;overflow-x:hidden;overflow-y:auto!important}.avatar-scroll-container::-webkit-scrollbar{width:6px}.avatar-scroll-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}.avatar-scroll-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:10px;transition:background .3s}.avatar-scroll-container::-webkit-scrollbar-thumb:hover{background:#ffffff80}.avatar-card{opacity:0;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0d;border-radius:12px;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;padding:6px 8px;transition:all .4s cubic-bezier(.34,1.56,.64,1);animation:.6s ease-out forwards slideInScale;display:flex;transform:translate(-50px)scale(.8)}@keyframes slideInScale{0%{opacity:0;transform:translate(-50px)scale(.8)rotateY(-15deg)}60%{transform:translate(10px)scale(1.05)rotateY(5deg)}to{opacity:1;transform:translate(0)scale(1)rotateY(0)}}.avatar-card:hover{background:#ffffff1a;transform:translate(10px)scale(1.08);box-shadow:0 8px 30px #0000004d}.avatar-circle{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex;position:relative;box-shadow:0 3px 12px #0003}.avatar-card:hover .avatar-circle{transform:scale(1.15)rotate(5deg);box-shadow:0 8px 25px #0006}.avatar-image{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-text{color:#fff;font-size:20px;font-weight:600}.online-indicator{background:#fff;border-radius:50%;padding:1.5px;position:absolute;bottom:1px;right:1px;box-shadow:0 2px 8px #0000004d}.name-tag{background:#d0d0d0;border-radius:12px;max-width:100%;padding:4px 10px;transition:all .3s;box-shadow:0 2px 10px #0000001a}.avatar-card:hover .name-tag{background:#e0e0e0;transform:scale(1.05);box-shadow:0 4px 15px #0003}.name-text{color:#333;white-space:nowrap;text-overflow:ellipsis;max-width:100px;font-size:11px;font-weight:600;overflow:hidden}.avatar-scroll-container:hover .avatar-card{transform:scale(.98)}.avatar-scroll-container:hover .avatar-card:hover{transform:translate(10px)scale(1.08)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.avatar-card.new-item{animation:.6s ease-in-out pulse}
