/**
 * notice.css — 全局通知（Toast）样式（与 js/sr-notice.js 配套，可独立复用）
 *
 * 结构（由 JS 生成）：
 *   .sr-notice-layer[data-pos="top|center|bottom"]   固定定位的承载层
 *     .sr-notice[data-type="info|success|warning|error"]
 *       <svg> 或 .swatch（色块）
 *       <span>文案</span>
 *
 * 颜色走 style.css 令牌，深浅色模式自动适配；语义色在本文件内定义。
 */

/* ========== 承载层 ========== */
.sr-notice-layer {
    position: fixed;
    left: 50%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none; /* 层本身不挡点击，仅通知项可交互 */
}
.sr-notice-layer[data-pos="top"]    { top: 22px; transform: translateX(-50%); }
.sr-notice-layer[data-pos="center"] { top: 50%; transform: translate(-50%, -50%); }
.sr-notice-layer[data-pos="bottom"] { bottom: 28px; transform: translateX(-50%); }

/* ========== 通知项 ========== */
.sr-notice {
    --notice-color: var(--accent);
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(88vw, 460px);
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.5;
    box-shadow: var(--shadow-hover);
    pointer-events: auto;
    animation: srNoticeIn .26s cubic-bezier(.22, .61, .36, 1) both;
}
.sr-notice.is-out { animation: srNoticeOut .2s ease both; }
.sr-notice > span { word-break: break-word; }

/* 图标 / 色块 */
.sr-notice svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; color: var(--notice-color); }
.sr-notice .swatch {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

/* 语义色 */
.sr-notice[data-type="success"] { --notice-color: #4f9e6f; }
.sr-notice[data-type="warning"] { --notice-color: #d98a3d; }
.sr-notice[data-type="error"]   { --notice-color: #cf5b5b; }

@keyframes srNoticeIn {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes srNoticeOut {
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* 减少动态效果：仅淡入淡出 */
@media (prefers-reduced-motion: reduce) {
    .sr-notice { animation: none; }
    .sr-notice.is-out { animation: none; opacity: 0; }
}