/* ============================================================
   Toast notifications (App.notify.*) - success/info/warning/error.
   Replaces the desktop Notifier form / message boxes for feedback.
   ============================================================ */
#app-toasts {
    position: fixed;
    inset-block-start: calc(var(--app-topbar-height) + var(--spacing-sm));
    inset-inline-end: var(--spacing-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: min(360px, calc(100vw - 32px));
}

@keyframes toast-in {
    from {
        opacity: 0;
        translate: 0 -6px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    min-width: 260px;
    padding: var(--spacing-md);
    background: var(--color-background-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-inline-start: 4px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-label);
    animation: toast-in 150ms ease-out;
}

.toast__message {
    flex: 1 1 auto;
    padding-block-start: 1px;
}

.toast__close {
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    display: inline-flex;
    padding: 2px;
}

.toast__close:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
}

.toast--success {
    border-inline-start-color: var(--color-status-success);
}

.toast--success .toast__icon { color: var(--color-status-success); }

.toast--error {
    border-inline-start-color: var(--color-status-danger);
}

.toast--error .toast__icon { color: var(--color-status-danger); }

.toast--warning {
    border-inline-start-color: var(--color-status-warning);
}

.toast--warning .toast__icon { color: var(--color-status-warning); }

.toast--info {
    border-inline-start-color: var(--color-status-info);
}

.toast--info .toast__icon { color: var(--color-status-info); }