.site-messages {
  --message-gutter: var(--page-gutter, 16px);
  position: fixed;
  inset-block-start: 84px;
  inset-inline-end: max(var(--message-gutter), calc((100% - 1320px) / 2));
  z-index: 1100;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100% - 2 * var(--message-gutter)));
  pointer-events: none;
}

.site-messages[hidden] {
  display: none;
}

.site-message {
  --message-accent: var(--em-accent);
  padding: 12px 16px;
  border: 1px solid var(--em-line);
  border-inline-start: 3px solid var(--message-accent);
  border-radius: 12px;
  background: var(--em-card, #1d2226);
  box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
  color: var(--em-ink);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-message-success { --message-accent: #9fdda6; }
.site-message-warning { --message-accent: #ffd285; }
.site-message-error { --message-accent: #ffaaa8; }

@media (max-width: 767px) {
  .site-messages {
    inset-block-start: 76px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-messages {
    animation: site-messages-enter 180ms ease-out;
  }

  @keyframes site-messages-enter {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}