.majestic-toast-stack {
    position: fixed;
    z-index: 12000;
    top: calc(var(--navbar-height, 0px) + var(--space-4));
    right: max(var(--space-4), env(safe-area-inset-right));
    display: grid;
    width: min(380px, calc(100vw - (2 * var(--space-4))));
    gap: var(--space-2);
    pointer-events: none;
}

.majestic-toast {
    --toast-tone: var(--info-color);
    --toast-surface: var(--info-background);
    --toast-border: var(--info-border-color);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
    color: var(--text-color);
    background: var(--surface-2);
    border: 1px solid var(--toast-border);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-floating);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(calc(100% + var(--space-4))) scale(0.96);
    transition: opacity var(--motion-expressive) var(--ease-out), transform var(--motion-expressive) var(--ease-out);
    pointer-events: auto;
}

.majestic-toast[data-visible="true"] { opacity: 1; transform: none; }
.majestic-toast[data-leaving="true"] { opacity: 0; transform: translateX(calc(100% + var(--space-4))) scale(0.96); }
.majestic-toast--success { --toast-tone: var(--success-color); --toast-surface: var(--success-background); --toast-border: var(--success-border-color); }
.majestic-toast--warning { --toast-tone: var(--warning-color); --toast-surface: var(--warning-background); --toast-border: var(--warning-border-color); }
.majestic-toast--danger { --toast-tone: var(--danger-color); --toast-surface: var(--danger-background); --toast-border: var(--danger-border-color); }
.majestic-toast__icon { display: inline-grid; width: 28px; height: 28px; place-items: center; color: var(--toast-tone); background: var(--toast-surface); border-radius: var(--radius-control); }
.majestic-toast__content { min-width: 0; }
.majestic-toast__title { display: block; margin-bottom: 2px; font: 650 0.875rem/1.35 var(--font-body); }
.majestic-toast__message { margin: 0; color: var(--text-muted-color); font: 400 0.8125rem/1.4 var(--font-body); overflow-wrap: anywhere; }
.majestic-toast__action { display: inline-flex; margin-top: var(--space-2); padding: 0; color: var(--toast-tone); background: transparent; border: 0; font: 650 0.8125rem/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.majestic-toast__count { align-self: center; padding: 3px 6px; color: var(--toast-tone); background: var(--toast-surface); border-radius: 999px; font: 650 0.6875rem/1 var(--font-mono); }
.majestic-toast__count:not(:empty) { display: inline-flex; }
.majestic-toast__close { display: inline-grid; width: 28px; height: 28px; padding: 0; place-items: center; color: var(--text-muted-color); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control); }
.majestic-toast__close:hover, .majestic-toast__close:focus-visible { color: var(--text-color); background: var(--surface-hover); border-color: var(--border-color); }
.majestic-toast__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--toast-surface); pointer-events: none; }
.majestic-toast__progress-bar { display: block; width: 100%; height: 100%; background: var(--toast-tone); transform-origin: left center; animation: majestic-toast-progress var(--toast-duration) linear forwards; }

@keyframes majestic-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .majestic-toast-stack { top: auto; right: auto; bottom: max(var(--space-4), env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
    .majestic-toast { transform: translateY(calc(100% + var(--space-4))) scale(0.96); }
    .majestic-toast[data-visible="true"] { transform: none; }
    .majestic-toast[data-leaving="true"] { transform: translateY(calc(100% + var(--space-4))) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .majestic-toast { transform: none !important; transition-duration: 80ms; }
    .majestic-toast__progress-bar { animation: none; }
}

@media (forced-colors: active) {
    .majestic-toast { border: 2px solid CanvasText; }
}