/* ===== xToast: achievement-style notifications ===== */
.xtoast-stack {
    position: fixed; left: 0; right: 0; z-index: 1090;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1rem; pointer-events: none;
}
.xtoast-stack[data-pos^="bottom"] { bottom: 0; }
.xtoast-stack[data-pos^="top"]    { top: 0; }
.xtoast-stack[data-pos$="start"]  { align-items: flex-start; }
.xtoast-stack[data-pos$="end"]    { align-items: flex-end; }

.xtoast {
    --accent: #0078d4; --icon: #fff; --dur: 3000ms;
    position: relative; pointer-events: auto; cursor: pointer;
    display: flex; align-items: center; gap: .85rem;
    height: 64px; padding: 6px; max-width: 64px; overflow: hidden;
    border-radius: 999px; background: #1b1b1b; color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    opacity: 0; transform: scale(.4);
    transition: transform .35s cubic-bezier(.2,1.5,.4,1), opacity .2s,
    max-width .45s cubic-bezier(.65,0,.35,1), padding .45s;
}
.xtoast.is-in   { opacity: 1; transform: scale(1); }
.xtoast.is-open { max-width: min(460px, calc(100vw - 2rem)); padding-right: 1.6rem; }

.xtoast-roundel {
    flex: 0 0 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: var(--icon); font-size: 1.6rem;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}
.xtoast-body { flex: 1 1 auto; min-width: 0; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.xtoast.is-open .xtoast-body { opacity: 1; transition-delay: .25s; }
.xtoast-title { font-weight: 600; font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.xtoast-msg   { font-size: .85rem; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; }

/* progress bar: its animation ending is what closes the toast */
.xtoast-progress {
    height: 3px; margin-top: 5px; border-radius: 2px; overflow: hidden;
    background: rgba(255,255,255,.12);
}
.xtoast-progress span {
    display: block; height: 100%; background: var(--accent);
    transform-origin: left center;
}
.xtoast.is-open .xtoast-progress span { animation: xtoast-countdown var(--dur) linear forwards; }
.xtoast:hover .xtoast-progress span   { animation-play-state: paused; }
@keyframes xtoast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.xtoast-success { --accent: #107c10; }
.xtoast-info    { --accent: #0078d4; }
.xtoast-warning { --accent: #ffb900; --icon: #1b1b1b; }
.xtoast-error   { --accent: #d13438; }

@media (max-width: 575.98px) {
    .xtoast-stack { padding: .75rem; }
    .xtoast { height: 56px; }
    .xtoast-roundel { flex-basis: 44px; height: 44px; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .xtoast, .xtoast-body { transition: none !important; }
}