.social-toast {
  position: fixed;
  left: 14px;
  bottom: 16px;
  z-index: 1200;
  display: block;
  max-width: min(320px, calc(100vw - 28px));
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--pink-light, #ffb6d9);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(255, 20, 147, 0.22);
  backdrop-filter: blur(8px);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.social-toast.is-in {
  animation: toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.social-toast.is-out {
  animation: toast-out 0.35s ease forwards;
}

@keyframes toast-in {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(110%); opacity: 0; }
}

.social-toast__line {
  font-size: 0.82rem;
  line-height: 1.35;
  color: #4a2040;
  margin: 0;
}

.social-toast__line strong {
  color: #ff1493;
  font-weight: 800;
}

.social-toast__time {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #8b5a7a;
}

.social-toast--vip {
  border-color: #c4b5fd;
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.28);
}

.social-toast--leg {
  border-color: #fbbf24;
  box-shadow: 0 10px 28px rgba(251, 191, 36, 0.3);
}

@media (max-width: 480px) {
  .social-toast {
    left: 10px;
    right: 10px;
    max-width: none;
    bottom: 12px;
  }
}

/* Keep clear of sticky reveal dock */
body.has-reveal-dock .social-toast {
  bottom: 88px;
}