/* ================================================================
   Meldungen (Toasts) — alle drei Oberflächen
   ================================================================
   Nachbau von .ngd-meldung aus neugedacht-base 2.0.0 (kit/komponenten.css,
   Entscheidung E012), siehe Issue #25. Klassennamen und Aufbau sind
   bewusst dieselben wie im Kit, damit ein späterer Umstieg auf das Kit
   nur noch das Einbinden ändert. Die Werte kommen aus tokens.css statt
   aus den --ngd-*-Tokens, weil SchnellerTeller. das Kit nicht einbindet.

   Die Art der Meldung zeigt ein schmaler, runder Balken INNEN in der
   Fläche statt einer farbigen Fläche oder eines linken Randes. Farbe
   über --ngd-indikator.

   Anders als im Kit mit logischen Eigenschaften (inline-start/-end):
   die Stationsansicht läuft auch auf Arabisch, dort gehören Stapel und
   Balken auf die andere Seite.
   ================================================================ */

:root {
  --ngd-indikator-breite:  4px;
  --ngd-indikator-abstand: .5rem;
}

.ngd-meldungen {
  position: fixed;
  inset-inline-end: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.ngd-meldung {
  --ngd-indikator: var(--c-muted);
  position: relative;
  padding-block: var(--sp-3);
  padding-inline: calc(var(--ngd-indikator-abstand) + var(--ngd-indikator-breite) + var(--sp-3)) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  line-height: 1.4;
  animation: ngd-meldung-kommt .18s ease;
  pointer-events: auto;
}

.ngd-meldung::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--ngd-indikator-abstand);
  top: var(--ngd-indikator-abstand);
  bottom: var(--ngd-indikator-abstand);
  width: var(--ngd-indikator-breite);
  border-radius: 999px;
  background: var(--ngd-indikator);
  pointer-events: none;
}

.ngd-meldung--ok      { --ngd-indikator: var(--c-success); }
.ngd-meldung--fehler  { --ngd-indikator: var(--c-danger); }
.ngd-meldung--warnung { --ngd-indikator: var(--c-warning); }
.ngd-meldung--hinweis { --ngd-indikator: var(--c-info); }

.ngd-meldung--geht {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

@keyframes ngd-meldung-kommt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ngd-meldung       { animation: none; }
  .ngd-meldung--geht { transition: none; }
}