/* bottom-toast-stack.css
 * Gemeinsamer Container für die nicht-modalen Hinweise am unteren Rand
 * (Install-Banner, Update-Hinweis) – siehe bottom-toast-stack.js.
 *
 * Zuvor positionierte sich jeder Hinweis selbst auf exakt derselben Stelle
 * (bottom: max(1rem, safe-area), z-index 1000). Zwei gleichzeitig sichtbare
 * Hinweise lagen damit übereinander, und beide verdeckten die Bottom-Bar der
 * Einkaufsliste (z-index 110) samt ihrer Buttons.
 */

:root {
    /* Abstand zwischen gestapelten Hinweisen und zum unteren Rand. */
    --wkf-toast-gap: 0.75rem;
    --wkf-toast-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Sichtbare Bottom-Bar der Einkaufsliste schiebt den ganzen Stack hoch,
   damit deren Buttons erreichbar bleiben. Die Höhe setzt sl-shell.js. */
body.sl-bottom-bar-visible {
    --wkf-toast-bottom: calc(
        var(--sl-bottom-bar-height, 74px) + env(safe-area-inset-bottom) + var(--wkf-toast-gap)
    );
}

.wkf-bottom-toast-stack {
    position: fixed;
    left: 50%;
    bottom: var(--wkf-toast-bottom);
    transform: translateX(-50%);
    /* Über Bottom-Bar (110) und FAB (95), unter den Vollbild-Modals (10000). */
    z-index: 1200;
    display: flex;
    /* column-reverse: der zuletzt eingehängte Hinweis liegt unten, ältere
       rücken nach oben – ohne dass jemand die Höhe der anderen kennen muss. */
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--wkf-toast-gap);
    width: max-content;
    max-width: min(100% - 2rem, 32rem);
    /* Ohne Deckel wuchsen zwei gleichzeitig offene Hinweise (Consent + Install)
       auf niedrigen Screens (z. B. 352×413) auf ~90% der Viewporthöhe und
       verdeckten die App darunter komplett. Innen scrollen statt den Header
       überdecken oder aus dem sichtbaren Bereich wachsen. */
    max-height: calc(100vh - var(--wkf-toast-bottom) - 4rem);
    max-height: calc(100dvh - var(--wkf-toast-bottom) - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Der Container selbst fängt keine Taps ab, nur seine Kinder. */
    pointer-events: none;
}

.wkf-bottom-toast-stack > * {
    pointer-events: auto;
}

/* Leerer Stack darf keine Taps schlucken und keinen Platz belegen. */
.wkf-bottom-toast-stack:empty {
    display: none;
}