.social-toast {
  position: fixed;
  left: 14px;
  bottom: 16px;
  z-index: 1200;
  display: block;
  max-width: min(320px, calc(100vw - 28px));
  padding: 0.8rem 0.95rem;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid var(--ink, #0b0b0b);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--snap, #fffc00);
  backdrop-filter: blur(8px);
  animation: toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.social-toast[hidden] {
  display: none !important;
}

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

.social-toast__body {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--ink, #0b0b0b);
}

.social-toast__body strong {
  color: var(--ink, #0b0b0b);
  font-weight: 800;
}

.social-toast__time {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-faint, #6b6b6b);
}

.social-toast.is-vip {
  border-color: var(--ink, #0b0b0b);
  background: #0b0b0b;
  color: #fff;
  box-shadow: 3px 3px 0 var(--snap, #fffc00);
}

.social-toast.is-vip .social-toast__body,
.social-toast.is-vip .social-toast__body strong {
  color: var(--snap, #fffc00);
}

.social-toast.is-vip .social-toast__time {
  color: rgba(255, 255, 255, 0.55);
}

.social-toast.is-leg {
  background: var(--snap, #fffc00);
  box-shadow: 3px 3px 0 var(--ink, #0b0b0b);
}

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

body.has-reveal-dock .social-toast {
  bottom: 96px;
}