/* ---------------------------------------------------------------------------
   Toasts (Components/Shared/ToastHost.razor). Each toast springs in from the
   right, draws its icon, and counts down on a timer bar that pauses on hover.
   The timer bar's animationend is what dismisses the toast.
--------------------------------------------------------------------------- */
.bz-toasts {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

/* The slot's grid row grows from 0fr so toasts already on screen glide up instead of jumping. */
.bz-toast-slot {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 10px;
    animation: bz-toast-grow 380ms cubic-bezier(.2, .9, .3, 1) both;
}

.bz-toast-slot > .bz-toast { min-height: 0; }

/* Closing is a plain fade: no collapsing row, no fly-out. */
.bz-toast-slot.is-leaving {
    animation: bz-toast-fade-away 160ms ease-out both;
    pointer-events: none;
}

.bz-toast {
    --k: var(--mud-palette-info, #5291EF);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px 15px 14px;
    border: 1px solid var(--bz-border, rgba(127, 127, 127, .35));
    border-radius: 10px;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--k) 17%, transparent) 0%, transparent 58%),
        var(--bz-card, var(--mud-palette-surface, #2F353E));
    color: var(--mud-palette-text-primary, #E7EAEF);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .18);
    overflow: hidden;
    pointer-events: auto;
    transform-origin: right center;
    /* backwards, not both: a filled end state would override the hover lift. */
    animation: bz-toast-in 560ms cubic-bezier(.2, .9, .3, 1) backwards;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.bz-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .2);
}

.is-leaving > .bz-toast { animation: none; }

.bz-toast-success { --k: var(--mud-palette-success, #4CCD8D); }
.bz-toast-error { --k: var(--mud-palette-error, #EF6B6B); animation: bz-toast-in 560ms cubic-bezier(.2, .9, .3, 1) backwards, bz-toast-shake 420ms ease-in-out 560ms; }
.bz-toast-warning { --k: var(--mud-palette-warning, #F1BB6E); }
.bz-toast-info { --k: var(--mud-palette-info, #5291EF); }

/* Icon: badge pops, a ring pulses out, then the glyph draws itself. */
.bz-toast-icon {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--k) 20%, transparent);
    color: var(--k);
    animation: bz-toast-pop 520ms cubic-bezier(.3, 1.6, .5, 1) 140ms both;
}

.bz-toast-icon svg { width: 20px; height: 20px; overflow: visible; }

.bz-toast-draw {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: bz-toast-draw 380ms cubic-bezier(.6, 0, .3, 1) 320ms forwards;
}

.bz-toast-dot {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    animation: bz-toast-pop 420ms cubic-bezier(.3, 1.8, .5, 1) 560ms both;
}

.bz-toast-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--k);
    opacity: 0;
    animation: bz-toast-ring 900ms ease-out 260ms;
}

.bz-toast-warning .bz-toast-icon svg { animation: bz-toast-wobble 700ms ease-in-out 700ms; transform-origin: 50% 90%; }
.bz-toast-info .bz-toast-icon svg { animation: bz-toast-bob 700ms ease-in-out 700ms; }

/* Success confetti: eight dots fly out of the badge. */
.bz-toast-sparks { position: absolute; inset: 0; pointer-events: none; }

.bz-toast-sparks i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--k);
    opacity: 0;
    transform: rotate(var(--a)) translateY(0) scale(1);
    animation: bz-toast-spark 640ms cubic-bezier(.15, .7, .3, 1) 360ms;
}

.bz-toast-sparks i:nth-child(even) { background: color-mix(in srgb, var(--k) 55%, #FFD86B); width: 3px; height: 3px; }

.bz-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 5px;
    font-size: .875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.bz-toast-title { font-weight: 650; margin-bottom: 2px; }
.bz-toast-message { animation: bz-toast-fade-up 360ms ease-out 200ms both; }

.bz-toast-action {
    margin: 6px 0 0 -6px;
    padding: 3px 6px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--k);
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background 120ms ease;
}

.bz-toast-action:hover,
.bz-toast-action:focus-visible { background: color-mix(in srgb, var(--k) 16%, transparent); outline: none; }

.bz-toast-count {
    flex: 0 0 auto;
    align-self: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--k);
    color: #11151A;
    font-size: .72rem;
    font-weight: 700;
    animation: bz-toast-pop 420ms cubic-bezier(.3, 1.8, .5, 1) both;
}

.bz-toast-timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 45%, #FFFFFF));
    transform-origin: left center;
    animation-name: bz-toast-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Only hovering pauses the countdown: focus could stay on a toast (its Undo button) and keep it open for good. */
.bz-toast:hover .bz-toast-timer { animation-play-state: paused; }

@keyframes bz-toast-grow { from { grid-template-rows: 0fr; margin-top: 0; } to { grid-template-rows: 1fr; margin-top: 10px; } }
@keyframes bz-toast-fade-away { from { opacity: 1; } to { opacity: 0; } }

@keyframes bz-toast-in {
    0% { opacity: 0; transform: translateX(calc(100% + 24px)) scale(.9) rotate(2deg); }
    55% { opacity: 1; transform: translateX(-10px) scale(1.02) rotate(-.6deg); }
    78% { transform: translateX(4px) scale(.995); }
    100% { opacity: 1; transform: none; }
}

@keyframes bz-toast-out {
    0% { opacity: 1; transform: none; }
    25% { transform: translateX(-8px); }
    100% { opacity: 0; transform: translateX(calc(100% + 24px)) scale(.92); }
}

@keyframes bz-toast-shake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes bz-toast-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bz-toast-draw { to { stroke-dashoffset: 0; } }

@keyframes bz-toast-ring {
    0% { opacity: .75; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.1); }
}

@keyframes bz-toast-spark {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-24px) scale(.3); }
}

@keyframes bz-toast-wobble {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    45% { transform: rotate(10deg); }
    70% { transform: rotate(-5deg); }
}

@keyframes bz-toast-bob {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-3px); }
    65% { transform: translateY(1px); }
}

@keyframes bz-toast-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

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

@media (max-width: 600px) {
    .bz-toasts { left: 8px; right: 8px; bottom: 8px; width: auto; }
    .bz-toast { transform-origin: center bottom; }
}

/* Reduced motion keeps a plain fade; the timer bar still runs because it drives dismissal. */
@media (prefers-reduced-motion: reduce) {
    .bz-toast-slot, .bz-toast-slot.is-leaving, .bz-toast, .is-leaving > .bz-toast,
    .bz-toast-icon, .bz-toast-dot, .bz-toast-message, .bz-toast-count,
    .bz-toast-warning .bz-toast-icon svg, .bz-toast-info .bz-toast-icon svg { animation-name: bz-toast-fade; animation-duration: 160ms; animation-delay: 0ms; }
    .is-leaving > .bz-toast { animation-direction: reverse; }
    .bz-toast-ring, .bz-toast-sparks { display: none; }
    .bz-toast-draw { animation: none; stroke-dashoffset: 0; }
    .bz-toast:hover { transform: none; }
}

@keyframes bz-toast-fade { from { opacity: 0; } to { opacity: 1; } }

/* The whole toast is the dismiss target. */
.bz-toast { cursor: pointer; }
.bz-toast:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }