/* ============================================================
   Toast — bottom-center confirmation pill, on phones at the top (see scripts/toast.js)
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.625rem;
  transform: translateX(-50%) translateY(1.25rem);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.75rem 1.125rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-body);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast-ic { flex: none; display: grid; place-items: center; color: var(--brand); }
/* Icons größer (Design „Neu“ #38) */
.toast-ic svg { width: 1.375rem; height: 1.375rem; }

/* Fehler (showToast(msg, { error: true })): ganz rot, Icon weiß — in beiden
   Themes dasselbe Rot (--err-solid), Weiß hält darauf 4.8:1. */
.toast.toast--error { background: var(--err-solid); color: #fff; }
.toast.toast--error .toast-ic { color: #fff; }
.toast.toast--error .toast-act { color: #fff; border-color: rgb(255 255 255 / 0.45); }
.toast.toast--error .toast-act:hover { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.7); }
.toast-act {
  flex: none;
  margin-left: 0.25rem;
  padding: 0.3125rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--bg);
  background: transparent;
  border: 0.0625rem solid color-mix(in srgb, var(--bg) 38%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toast-act:hover {
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  border-color: color-mix(in srgb, var(--bg) 62%, transparent);
}

/* Handy: volle Breite mit Rand, Text kleiner, mehrzeilig oben bündig. Oben
   statt unten (Generalprobe B4, 02.10.2026): unten lag der Toast über jeder
   Aktionsleiste — Senden-Knopf im Anfrage-Fenster, Auswahlleiste, Eingabe. */
@media (max-width: 560px) {
  .toast {
    left: 1rem;
    right: 1rem;
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    bottom: auto;
    width: auto;
    transform: translateY(-1.25rem);
    border-radius: var(--r-lg);
    padding: 0.75rem 1rem;
    font-size: var(--fs-sm);
    align-items: flex-start;
  }
  .toast.show { transform: none; }
}