/* <ui-toast-host> — singleton container; <ui-toast> — single message. */
ui-toast-host {
    position: fixed;
    bottom: var(--ui-spacing-4, 16px);
    right:  var(--ui-spacing-4, 16px);
    z-index: var(--ui-z-toast, 1100);
    display: flex; flex-direction: column; gap: var(--ui-spacing-2, 8px);
    pointer-events: none;
}
ui-toast {
    pointer-events: auto;
    background: var(--ui-color-bg, #fff);
    color: var(--ui-color-text, #0f172a);
    border: 1px solid var(--ui-border-color, #e2e8f0);
    border-left-width: 4px;
    border-radius: var(--ui-radius-md, 7px);
    box-shadow: var(--ui-shadow-md);
    padding: var(--ui-spacing-2, 8px) var(--ui-spacing-3, 12px);
    font-size: var(--ui-font-size-sm, 12px);
    min-width: 220px; max-width: 360px;
    display: flex; align-items: flex-start; gap: var(--ui-spacing-2, 8px);
    animation: ui-toast-in .18s ease;
}
ui-toast[variant="success"] { border-left-color: var(--ui-color-success, #10b981); }
ui-toast[variant="warning"] { border-left-color: var(--ui-color-warning, #f59e0b); }
ui-toast[variant="danger"]  { border-left-color: var(--ui-color-danger,  #ef4444); }
ui-toast[variant="info"],
ui-toast:not([variant])     { border-left-color: var(--ui-color-primary, #2563eb); }

ui-toast .ui-toast-close {
    margin-left: auto; border: 0; background: transparent; cursor: pointer;
    color: var(--ui-color-text-faint, #94a3b8); padding: 2px;
}
ui-toast .ui-toast-close:hover { color: var(--ui-color-text, #0f172a); }
ui-toast[closing] { animation: ui-toast-out .15s ease forwards; }

@keyframes ui-toast-in  { from { opacity:0; transform: translateX(8px); } to { opacity:1; transform: translateX(0); } }
@keyframes ui-toast-out { to { opacity:0; transform: translateX(8px); } }