:root {
    --toast-bg: #07090c;
    --toast-border: #202833;
    --toast-text: #f4f4f5;
    --toast-muted: #a0a7b2;
    --toast-orange: #ff8a00;
    --toast-success: #20d98b;
    --toast-error: #ff4d4f;
    --toast-warning: #ffb020;
    --toast-info: #6fa8dc;
}

#nuxgrid-toast-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1080;
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 0 !important;
    gap: 10px;
    pointer-events: none;
}

#nuxgrid-toast-container .nuxgrid-toast {
    width: 380px;
    max-width: 100%;
    margin: 0;
    pointer-events: auto;
    overflow: hidden;
    color: var(--toast-text);
    background: var(--toast-bg);
    border: 1px solid var(--toast-border);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

#nuxgrid-toast-container .nuxgrid-toast.fade {
    transform: translateX(10px);
    transition: opacity .18s ease, transform .18s ease;
}

#nuxgrid-toast-container .nuxgrid-toast.fade.show { transform: translateX(0); }
#nuxgrid-toast-container .nuxgrid-toast-success { --nuxgrid-toast-accent: var(--toast-success); }
#nuxgrid-toast-container .nuxgrid-toast-error { --nuxgrid-toast-accent: var(--toast-error); }
#nuxgrid-toast-container .nuxgrid-toast-warning { --nuxgrid-toast-accent: var(--toast-warning); }
#nuxgrid-toast-container .nuxgrid-toast-info { --nuxgrid-toast-accent: var(--toast-info); }

.nuxgrid-toast-body {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 13px;
}

.nuxgrid-toast-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nuxgrid-toast-accent);
    background: #0a0d11;
    border: 1px solid #252d36;
    border-radius: 8px;
    font-size: 19px;
}

.nuxgrid-toast-icon.nuxgrid-toast-icon-context { color: var(--toast-orange); }
.nuxgrid-toast-status-dot { position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; background: var(--nuxgrid-toast-accent); border: 1px solid var(--toast-bg); border-radius: 50%; }
.nuxgrid-toast-content { min-width: 0; }
.nuxgrid-toast-title { color: var(--toast-text); font-size: 14px; font-weight: 700; line-height: 1.3; }
.nuxgrid-toast-message { margin-top: 3px; overflow-wrap: anywhere; color: var(--toast-muted); font-size: 12px; line-height: 1.45; }
.nuxgrid-toast-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; color: #7e8793; background: transparent; border: 0; border-radius: 6px; font-size: 13px; }
.nuxgrid-toast-close:hover, .nuxgrid-toast-close:focus-visible { color: var(--toast-text); background: rgba(255, 255, 255, .05); outline: 0; }
.nuxgrid-toast-progress { width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--nuxgrid-toast-accent); opacity: .9; }
.nuxgrid-toast.show .nuxgrid-toast-progress { animation: nuxgrid-toast-progress var(--nuxgrid-toast-delay, 4500ms) linear forwards; }
.nuxgrid-toast[data-bs-autohide="false"] .nuxgrid-toast-progress { display: none; }
.nuxgrid-toast:hover .nuxgrid-toast-progress, .nuxgrid-toast:focus-within .nuxgrid-toast-progress { animation-play-state: paused; }

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

@media (max-width: 576px) {
    #nuxgrid-toast-container { top: auto !important; bottom: 12px !important; right: 12px !important; left: 12px !important; width: auto; max-width: none; }
    #nuxgrid-toast-container .nuxgrid-toast { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #nuxgrid-toast-container .nuxgrid-toast.fade { transition: opacity .15s ease; transform: none; }
    #nuxgrid-toast-container .nuxgrid-toast.fade.show { transform: none; }
    .nuxgrid-toast.show .nuxgrid-toast-progress { animation-duration: .01ms; }
}
