/* Toast-Messages (Django messages) — die EINE Quelle für templates/partials/
   toast_messages.html (#228). Wird von beiden Basis-Templates geladen
   (allauth/layouts/base.html, applications/_shell_base.html) und vom
   Maintenance-Placeholder. Bewusst eigenständig: Tokens mit Fallback, damit die
   Datei ohne auth.css/tailwind.css funktioniert.

   Vertikaler Versatz: jede Base setzt --am-toast-top auf die Höhe ihrer eigenen
   Kopfzeile (Shell-Navbar 49px, Auth-Header 76px), damit der Toast nie darüber
   liegt — vorher war das eine Klasse (--offset), die nur für den Auth-Header stimmte.

   Token-Namen hier IMMER --am-*-prefixed (Review !240): Tailwind v4 belegt generische
   Namen wie --radius-sm, --spacing, --font-*, --color-* selbst auf :root — ein
   var(--radius-sm, 9px) bekäme in der Shell Tailwinds 4px, nie den Fallback. */

.am-toast-stack {
  position: fixed;
  top: var(--am-toast-top, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  pointer-events: none;
}
.am-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  padding: 12px 16px;
  border-radius: var(--am-toast-radius, 9px);
  background: var(--am-ink, #1c1917);
  color: #fff;
  font-family: "DM Sans", -apple-system, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--am-toast-shadow, 0 24px 60px -20px rgba(28, 25, 23, 0.18));
  animation: am-toast-in 0.25s ease;
}
.am-toast--hide {
  animation: am-toast-out 0.25s ease forwards;
}
.am-toast span {
  flex: 1;
}
.am-toast--success {
  background: var(--am-green-strong, #1f8a5b);
}
.am-toast--error {
  background: var(--am-red-strong, #dc2626);
}
.am-toast--warning {
  background: var(--am-amber, #f59e0b);
  color: var(--am-ink, #1c1917);
}
.am-toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
}
.am-toast-close:hover {
  opacity: 1;
}
@keyframes am-toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes am-toast-out {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}