/* AI 异步任务的全局通知：右下角堆叠，不遮挡当前阅读内容。 */
.notification-stack {
    position: fixed;
    z-index: 1200;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.notification-toast {
    display: grid;
    grid-template-columns: 28px 1fr 26px;
    align-items: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgb(13 110 253 / 16%);
    border-radius: 14px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 14px 32px rgb(33 37 41 / 18%);
    backdrop-filter: blur(12px);
    color: var(--text-primary);
    pointer-events: auto;
    animation: notification-enter 240ms ease-out;
}

.notification-toast.is-success { border-color: rgb(20 108 67 / 24%); }
.notification-toast.is-error { border-color: rgb(180 35 24 / 25%); }
.notification-toast.is-leaving { animation: notification-leave 180ms ease-in forwards; }
.notification-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.notification-toast.is-success .notification-icon { background: #e9f7ef; color: var(--success); }
.notification-toast.is-error .notification-icon { background: var(--danger-soft); color: var(--danger); }
.notification-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: notification-spin .75s linear infinite; }
.notification-copy { min-width: 0; padding-top: 2px; }
.notification-title { display: block; font-size: .94rem; font-weight: 650; }
.notification-message { display: block; margin-top: 3px; color: var(--text-secondary); font-size: .85rem; line-height: 1.45; }
.notification-close { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.notification-close:hover, .notification-close:focus-visible { background: var(--surface-muted); color: var(--text-primary); }
@keyframes notification-spin { to { transform: rotate(360deg); } }
@keyframes notification-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes notification-leave { to { opacity: 0; transform: translateX(18px) scale(.97); } }
@media (max-width: 600px) { .notification-stack { right: 16px; bottom: 16px; } }