/* Toasts and the header notification list (UI-Design-System §6). Both opt into OS dark via .theme-ready. */
#toast-container.app-toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.app-toast {
    --app-toast-accent: var(--ui-info);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--ui-divider);
    border-left: 4px solid var(--app-toast-accent);
    border-radius: 8px;
    background: var(--ui-surface-raised);
    color: var(--ui-text-strong);
    box-shadow: var(--ui-shadow-popover);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.app-toast.is-visible { opacity: 1; transform: none; }
.app-toast > i { flex: none; margin-top: 3px; color: var(--app-toast-accent); }
.app-toast--success { --app-toast-accent: var(--ui-success); }
.app-toast--error { --app-toast-accent: var(--ui-danger); }
.app-toast--warning { --app-toast-accent: var(--ui-warning); }
.app-toast--info { --app-toast-accent: var(--ui-info); }
@media (prefers-reduced-motion: reduce) { .app-toast { transition: none; transform: none; } }
@media (max-width: 600px) {
    #toast-container.app-toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Header notification list. */
.notification-dropdown.theme-ready {
    background: var(--ui-surface-raised);
    border-color: var(--ui-divider);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-popover);
}
.notification-dropdown.theme-ready .notification-header {
    background: var(--ui-surface-sunken);
    border-bottom-color: var(--ui-divider);
}
.notification-dropdown.theme-ready .notification-header span { color: var(--ui-text-strong); }
.notification-dropdown.theme-ready .notification-header button { color: var(--ui-text-muted); font-size: 12px; }
.notification-dropdown.theme-ready .notification-header button:hover { color: var(--ui-text-strong); }
.notification-dropdown.theme-ready .notification-item {
    border-bottom-color: var(--ui-divider);
    color: var(--ui-text);
    display: block;
    padding-right: 44px;
}
.notification-dropdown.theme-ready .notification-item:hover { background: var(--ui-control-bg-hover); }
.notification-dropdown.theme-ready .notification-unread { background: var(--ui-accent-soft-bg); }
.notification-dropdown.theme-ready .notification-item.success { border-left-color: var(--ui-success); }
.notification-dropdown.theme-ready .notification-item.warning { border-left-color: var(--ui-warning); }
.notification-dropdown.theme-ready .notification-item.error { border-left-color: var(--ui-danger); }
.notification-dropdown.theme-ready .notification-item.info { border-left-color: var(--ui-info); }
.notification-dropdown.theme-ready .notification-message { margin-bottom: 4px; color: var(--ui-text-strong); font-size: 13px; }
.notification-dropdown.theme-ready .notification-time { color: var(--ui-text-muted); font-size: 12px; }
.notification-dropdown.theme-ready .notification-empty { color: var(--ui-text-muted); }
.notification-dropdown.theme-ready .notif-copy-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ui-text-muted);
    cursor: pointer;
}
.notification-dropdown.theme-ready .notif-copy-btn:hover { background: var(--ui-control-bg-hover); color: var(--ui-text-strong); }
.notification-dropdown.theme-ready .notif-copy-btn.is-copied { color: var(--ui-success); }
.notification-dropdown.theme-ready .notif-copy-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }