Added new modules and updated existing logic

dev/ui-ux/Opus w images/src/components/online-users/online-users.css

@@ -0,0 +1,95 @@
+/* online-users — avatar stack + overflow list */
+
+.online-users-stack {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.online-users-avatar {
+  margin-left: -8px;
+  border: 2px solid white;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.online-users-avatar:first-child {
+  margin-left: 0;
+}
+.online-users-avatar:hover {
+  transform: translateY(-2px);
+  z-index: 10;
+  border-color: #dbeafe;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
+}
+
+/* enter / leave transitions */
+.online-avatar-enter-active {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.online-avatar-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.online-avatar-enter-from {
+  opacity: 0;
+  transform: scale(0.4) translateY(6px);
+}
+.online-avatar-leave-to {
+  opacity: 0;
+  transform: scale(0.4) translateY(-6px);
+}
+
+/* +N overflow circle */
+.online-users-overflow {
+  width: 32px;
+  height: 32px;
+  margin-left: -8px;
+  border-radius: 50%;
+  background-color: #eff6ff;
+  color: #2563eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  z-index: 5;
+  border: 2px solid white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.online-users-overflow:hover {
+  background-color: #dbeafe;
+}
+
+/* count badge transition */
+.online-count-enter-active,
+.online-count-leave-active {
+  transition: all 0.3s ease;
+}
+.online-count-enter-from,
+.online-count-leave-to {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+/* profile tooltip card */
+.online-users-profile-card {
+  min-width: 260px;
+  padding: 16px;
+}
+
+/* online indicator dot */
+.online-users-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+  display: inline-block;
+  margin-right: 4px;
+  animation: online-pulse 2s ease-in-out infinite;
+}
+
+@keyframes online-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.5; }
+}