:root{
  --form-toasty-radius: .125rem;
  --form-toasty-offset: 16px;
  --form-toasty-gap: .5rem;
  --form-toasty-shadow: 0 10px 30px rgba(0,0,0,.15);
  --form-toasty-z: 99999;
  --form-toasty-toast-max: 640px;      /* << Max-Breite je Toast */

  /* Bricks-ähnliche Farben */
  --form-toasty-success-bg: var(--success-bg);
  --form-toasty-success-fg: var(--success-bg-fg);
  --form-toasty-success-bd: var(--success);

  --form-toasty-error-bg: var(--error-bg);
  --form-toasty-error-fg: var(--error-bg-fg);
  --form-toasty-error-bd: var(--error);
}

/* ROOT: oben zentriert */
#brx-toast-root{
  position: fixed;
  top: var(--form-toasty-offset);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: var(--form-toasty-gap);
  z-index: var(--form-toasty-z);
  pointer-events: none;         /* nur Toasts sind klickbar */
}

/* TOAST: begrenzte Breite, zentriert durch Root */
.brx-toast{
  pointer-events: auto;
  inline-size: min(var(--form-toasty-toast-max), 92vw);
  background: #fff;
  color: var(--text-body);
  font-size: var(--text-m);
  box-shadow: var(--form-toasty-shadow);
  border-radius: var(--form-toasty-radius);
  border-left: 4px solid transparent;
  padding: .75rem 2.25rem .75rem 1rem;
  display: block;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background-color .2s ease;
  overflow-wrap: anywhere;
  white-space: normal;
}

.brx-toast.in{ opacity: 1; transform: translateY(0); }

/* Varianten */
.brx-toast.is-success{
  background: var(--form-toasty-success-bg);
  color: var(--form-toasty-success-fg);
  border-left-color: var(--form-toasty-success-bd);
}
.brx-toast.is-error{
  background: var(--form-toasty-error-bg);
  color: var(--form-toasty-error-fg);
  border-left-color: var(--form-toasty-error-bd);
}

/* Links im Toast */
.brx-toast a{ color: inherit; text-decoration: underline; }

/* Close */
.brx-toast__close{
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; cursor: pointer; opacity: .7;
}
.brx-toast__close:hover{ opacity: 1; }

.brxe-form .message{ display:none !important; } /* doppelte Inline-Messages aus */
@media (prefers-reduced-motion: reduce){ .brx-toast, .brx-toast.in{ transition:none; } }