/* toast.css — Toast-Container + Tone-Varianten. */

/* ──────────────────────────────────────────────────────────────────────
 * Toast (body-appended, Kombi C Phase C.1)
 * ────────────────────────────────────────────────────────────────────── */

.app-toast-container {
  /*
   * Position: rechte Seite, vertikal mittig in der Top-Bar (verdeckt Profil/
   * Glocke waehrend Toast sichtbar ist). DEV-Banner schiebt die Top-Bar nach
   * unten — Toast folgt ueber `--dev-banner-h` (in PROD = 0).
   *
   * Logischer Vertikal-Anchor: oberer Rand der Top-Bar + halbe Top-Bar-Hoehe
   * minus halbe Toast-Hoehe. Der erste Toast sitzt mittig in der Top-Bar; weitere
   * stapeln nach unten (column).
   */
  --toast-height: 38px; /* Fallback; toast.js misst zur Laufzeit und schreibt den echten Wert */
  position: fixed;
  right: 18px;
  top: calc(var(--dev-banner-h, 0px) + (var(--topbar-height) - var(--toast-height)) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-app-toolbar-tier-9);
  max-width: calc(100vw - 36px);
  font-family: var(--lod-font-sans);
  pointer-events: none;
}
.app-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  min-width: 260px;
  max-width: 420px;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-3-5);
  border-radius: var(--radius-pill-sm);
  background: #fff;
  border: 1px solid var(--lod-gray-200);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--lod-darkblue-900) 18%, transparent);
  font-size: 13px;
  color: var(--lod-darkblue);
  pointer-events: auto;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform var(--duration-medium) var(--ease-overshoot), opacity var(--duration-medium);
}
.app-toast.is-visible { transform: translateY(0); opacity: 1; }
.app-toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.app-toast.tone-success { border-left: 3px solid var(--lod-turquoise); }
.app-toast.tone-success .app-toast-icon { color: var(--lod-turquoise); }
.app-toast.tone-error   { border-left: 3px solid var(--lod-danger); }
.app-toast.tone-error   .app-toast-icon { color: var(--lod-danger); }
.app-toast.tone-warning { border-left: 3px solid var(--lod-warning); }
.app-toast.tone-warning .app-toast-icon { color: var(--lod-warning); }
.app-toast.tone-info    { border-left: 3px solid var(--lod-darkblue); }
.app-toast.tone-info    .app-toast-icon { color: var(--lod-darkblue); }
.app-toast-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-toast-msg {
  flex: 1;
  line-height: 1.35;
  word-break: break-word;
}
.app-toast-action {
  background: transparent;
  border: none;
  color: var(--lod-darkblue);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}
.app-toast-action:hover { background: var(--lod-gray-50); }
.app-toast-close {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-toast-close:hover { background: var(--lod-gray-50); }
.app-toast-close img { opacity: 0.55; }

@media (max-width: 599px) {
  .app-toast-container {
    right: 10px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    max-width: none;
  }
  .app-toast { min-width: 0; max-width: none; width: 100%; }
}