#social-feed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  padding: 10px 16px 0;
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 14px 6px 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  width: auto;
  /* slide in via transform only — no opacity in keyframe so JS controls opacity cleanly */
  animation: sf-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Opacity by position — nth-child(1) = newest (top) */
.sf-item:nth-child(1) { opacity: 1 !important; }
.sf-item:nth-child(2) { opacity: 0.7 !important; }
.sf-item:nth-child(3) { opacity: 0.42 !important; }
.sf-item:nth-child(4) { opacity: 0.18 !important; }
.sf-item:nth-child(5) { opacity: 0 !important; }
.sf-item .sf-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.sf-item .sf-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sf-item .sf-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 6px #22c55e;
  animation: sf-pulse 1.5s infinite;
}
@keyframes sf-slide-in {
  from { transform: translateY(-14px) scale(0.94); }
  to   { transform: translateY(0) scale(1); }
}
@keyframes sf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}