.online-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; transition: background .15s ease, transform .15s ease; }
.online-row:hover { background: rgba(124, 92, 255, .06); transform: translateX(2px); }
.online-name { font-size: 12.5px; font-weight: 600; color: var(--a-txt-2, #3b415a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-row:hover .online-name { color: var(--a-acc, #6d5dfc); }
.presence-avatar { position: relative; display: inline-block; flex: none; }
.presence-avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.presence-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--a-card, #fff); }
.presence-dot::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
border: 2px solid rgba(34, 197, 94, .55);
animation: presencePing 2.4s ease-out infinite;
}
@keyframes presencePing {
0% { transform: scale(.7); opacity: .9; }
70% { transform: scale(1.7); opacity: 0; }
100% { transform: scale(1.7); opacity: 0; }
}
.widget-online .sidebar-header {
background: linear-gradient(135deg, #6d5dfc, #4f46e5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.presence-dot::after { animation: none; opacity: 0; }
.online-row:hover { transform: none; }
}