/* ds-toast — DIE Meldung von TeamHUB (window.dsToast, ds-toast.js). Einzige Stelle für Aussehen und Platz
   (05.11.2026; vorher zusätzlich ein Block in design-system.css und ~60 Eigenbauten).
   Platz: PC unten rechts, Handy (Kompakt) unten mittig — immer über dem Dock (--app-dock-reserve).
   --ds-toast-heben setzt ds-toast.js, wenn die Fußleiste eines offenen Fensters darunter läge.
   z-index über dem gesamten Modal-Stack: CRM-Modals 2000, Sub-Modals 2020+, Arc-Picker 20000. */
.ds-toast-container {
    position: fixed;
    z-index: 20050;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(var(--app-dock-reserve, 0px) + .75rem + var(--ds-toast-heben, 0px));
    width: min(380px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .ds-toast-container {
        left: max(.75rem, env(safe-area-inset-left, 0px));
        right: max(.75rem, env(safe-area-inset-right, 0px));
        width: auto;
    }
}

.ds-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem .75rem .75rem .875rem;
    background: var(--ds-card);
    color: var(--ds-foreground);
    border: 1px solid var(--ds-border);
    border-left-width: 3px;
    border-radius: var(--ds-radius, .5rem);
    box-shadow: 0 8px 24px color-mix(in srgb, black 18%, transparent), 0 1px 3px color-mix(in srgb, black 10%, transparent);
    animation: ds-toast-in .22s ease-out;
}
.ds-toast-icon { flex-shrink: 0; font-size: 1.125rem; line-height: 1.25rem; }
.ds-toast-body { flex: 1; min-width: 0; }
.ds-toast-title { font-weight: 600; font-size: .875rem; line-height: 1.25rem; color: var(--ds-foreground); }
.ds-toast-text { font-size: .875rem; line-height: 1.25rem; color: var(--ds-foreground); white-space: pre-line; overflow-wrap: anywhere; }
.ds-toast-title + .ds-toast-text { font-size: .8125rem; color: var(--ds-muted-foreground); }
.ds-toast-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.ds-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--ds-muted-foreground);
    cursor: pointer;
    padding: .125rem .25rem;
    margin: -.125rem -.125rem 0 0;
    border-radius: .25rem;
    font-size: .8125rem;
    line-height: 1.25rem;
}
.ds-toast-close:hover { background: var(--ds-muted); color: var(--ds-foreground); }

.ds-toast-info    { border-left-color: var(--ds-info); }
.ds-toast-info    .ds-toast-icon { color: var(--ds-info); }
.ds-toast-success { border-left-color: var(--ds-success); }
.ds-toast-success .ds-toast-icon { color: var(--ds-success); }
.ds-toast-warning { border-left-color: var(--ds-warning); }
.ds-toast-warning .ds-toast-icon { color: var(--ds-warning); }
.ds-toast-destr   { border-left-color: var(--ds-destructive); }
.ds-toast-destr   .ds-toast-icon { color: var(--ds-destructive); }

.ds-toast-leave { animation: ds-toast-out .2s ease-in forwards; }
.ds-toast-nochmal { animation: ds-toast-nochmal .3s ease-out; }
@keyframes ds-toast-in      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ds-toast-out     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
@keyframes ds-toast-nochmal { 40% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ds-toast, .ds-toast-leave, .ds-toast-nochmal { animation: none; } }