/* Global slide-out toast/alert system */
.ui-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.ui-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 4px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease;
}
.ui-toast.is-visible { transform: translateX(0); opacity: 1; }
.ui-toast.is-leaving { transform: translateX(120%); opacity: 0; }

.ui-toast-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-top: 1px;
}
.ui-toast-body { flex: 1 1 auto; min-width: 0; }
.ui-toast-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 1px; color: #0f172a; }
.ui-toast-text { font-size: 0.86rem; color: #475569; line-height: 1.45; word-wrap: break-word; }
.ui-toast-text a { color: inherit; text-decoration: underline; }

.ui-toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    color: #94a3b8;
    padding: 0 0 0 0.25rem;
}
.ui-toast-close:hover { color: #475569; }

.ui-toast-success { border-left-color: #10b981; }
.ui-toast-success .ui-toast-icon { background: rgba(16, 185, 129, 0.14); color: #059669; }
.ui-toast-danger { border-left-color: #f43f5e; }
.ui-toast-danger .ui-toast-icon { background: rgba(244, 63, 94, 0.12); color: #e11d48; }
.ui-toast-warning { border-left-color: #f59e0b; }
.ui-toast-warning .ui-toast-icon { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.ui-toast-info { border-left-color: #0d6efd; }
.ui-toast-info .ui-toast-icon { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }

@media (prefers-reduced-motion: reduce) {
    .ui-toast { transition: opacity 0.2s ease; transform: none; }
    .ui-toast.is-leaving { transform: none; }
}
@media (max-width: 575.98px) {
    .ui-toast-container {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }
    .ui-toast { transform: translateY(140%); }
    .ui-toast.is-leaving { transform: translateY(140%); }
}