/**
 * NovaToast — styling for the shared notification service (assets/js/nova-toast.js).
 *
 * Bootstrap's .toast/.toast-container supply the surface, spacing, elevation and
 * light/dark theming via its CSS variables, so only four things live here: the
 * accent stripe, the countdown bar, the mobile width rule, and the stacking
 * context. Everything else is a utility class in the generated markup.
 */

.nova-toast-container {
    z-index: 1090;
    /* Above Bootstrap's modal (1055) so a toast raised from inside a dialog is
       not trapped behind its backdrop. */
    max-width: 100%;
    pointer-events: none;
}

.nova-toast-container .toast {
    pointer-events: auto;
}

.nova-toast {
    width: 22rem;
    max-width: 100%;
    overflow: hidden;
    border-inline-start: 4px solid var(--nova-toast-accent, var(--bs-primary)) !important;
    /* main.css pins `body { color: var(--color-black-800) }`, a fixed dark
       value that ignores data-bs-theme. Inheriting it left dark text on the
       dark toast surface in dark mode, so the colour is restated here from
       Bootstrap's theme-aware variable. */
    --bs-toast-color: var(--bs-body-color);
    color: var(--bs-body-color);
    /* Bootstrap's default toast surface is 85% opaque. Over the pink hero and
       product imagery the page bled through and the text became hard to read,
       so the surface is made solid — still sourced from the theme variable so
       it flips with data-bs-theme. */
    --bs-toast-bg: var(--bs-body-bg);
}

.nova-toast .toast-body {
    overflow-wrap: anywhere;
}

.nova-toast-icon {
    line-height: 1.5;
}

/* ------------------------------------------------------------- progress -- */

.nova-toast-progress {
    height: 3px;
    background-color: var(--bs-secondary-bg);
}

.nova-toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    animation-name: novaToastCountdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Bootstrap already pauses its own autohide timer while the toast is hovered
   or focused, so the bar has to pause with it or the two disagree. */
.nova-toast:hover .nova-toast-progress-bar,
.nova-toast:focus-within .nova-toast-progress-bar {
    animation-play-state: paused;
}

@keyframes novaToastCountdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Bottom-anchored toasts would land under the floating chat launcher, which is
   fixed bottom-right at z-index 10000 — it would cover the toast's close
   button. Lift them clear of it, but only on pages that actually render the
   widget (the warehouse dashboard does not), and only for the two positions
   that overlap it: bottom-start sits on the opposite side.

   `!important` is required, not stylistic: the container carries Bootstrap's
   `p-3`, and every Bootstrap spacing utility is itself `!important`, so a
   plain longhand here is silently discarded. */
body:has(.chat-fab) .nova-toast-container[data-nova-toast-container="bottom-end"],
body:has(.chat-fab) .nova-toast-container[data-nova-toast-container="bottom-center"] {
    padding-bottom: 5.75rem !important;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 575.98px) {
    .nova-toast-container {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100%;
    }

    .nova-toast {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-toast-progress-bar {
        animation: none;
        transform: scaleX(1);
    }
}