/**
 * JussToast v1.0.0 — 轻量通知样式（Juss 套件成员）
 *
 * 设计原则：
 *   - 主题化：CSS 变量驱动 4 级别配色 + 跟随 prefers-color-scheme
 *   - 进入/退出动画：translateY + opacity，受 prefers-reduced-motion 控制
 *   - 移动端适配：小屏自动改全宽 + 顶部位置（栈式排列）
 *   - 关闭按钮聚焦可见：:focus-visible
 *   - 进度条：底部细条，width 0% → 100% 平滑动画（由 JS 控制 transition）
 *
 * 主题变量（可覆盖）：
 *   --juss-toast-radius          圆角
 *   --juss-toast-shadow          阴影
 *   --juss-toast-min-width       最小宽度
 *   --juss-toast-max-width       最大宽度
 *   --juss-toast-gap             多条间距
 *   --juss-toast-duration        进入/退出过渡时长
 */

:root {
    --juss-toast-radius: 8px;
    --juss-toast-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    --juss-toast-min-width: 240px;
    --juss-toast-max-width: 380px;
    --juss-toast-gap: 10px;
    --juss-toast-duration: 280ms;

    /* 4 级别色板（亮色） */
    --juss-toast-success-bg: #ecfdf5;
    --juss-toast-success-border: #10b981;
    --juss-toast-success-text: #065f46;
    --juss-toast-success-icon: #10b981;

    --juss-toast-error-bg: #fef2f2;
    --juss-toast-error-border: #ef4444;
    --juss-toast-error-text: #991b1b;
    --juss-toast-error-icon: #ef4444;

    --juss-toast-warning-bg: #fffbeb;
    --juss-toast-warning-border: #f59e0b;
    --juss-toast-warning-text: #92400e;
    --juss-toast-warning-icon: #f59e0b;

    --juss-toast-info-bg: #eff6ff;
    --juss-toast-info-border: #3b82f6;
    --juss-toast-info-text: #1e3a8a;
    --juss-toast-info-icon: #3b82f6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --juss-toast-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);

        --juss-toast-success-bg: #064e3b;
        --juss-toast-success-text: #d1fae5;
        --juss-toast-success-icon: #34d399;

        --juss-toast-error-bg: #7f1d1d;
        --juss-toast-error-text: #fee2e2;
        --juss-toast-error-icon: #f87171;

        --juss-toast-warning-bg: #78350f;
        --juss-toast-warning-text: #fef3c7;
        --juss-toast-warning-icon: #fbbf24;

        --juss-toast-info-bg: #1e3a8a;
        --juss-toast-info-text: #dbeafe;
        --juss-toast-info-icon: #60a5fa;
    }
}


/* ─────────────────────────────────────────────────────────────────
   容器：6 个位置变体
   pointer-events: none 让"toast 之间的空隙"不阻挡用户点击底层 UI
   ───────────────────────────────────────────────────────────────── */
.juss-toast-root {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--juss-toast-gap);
    pointer-events: none;       /* 子 toast 自己 enable pointer */
    max-width: calc(100vw - 32px);
}

.juss-toast-pos-top-right {
    top: 16px;
    right: 16px;
    align-items: flex-end;
}
.juss-toast-pos-top-left {
    top: 16px;
    left: 16px;
    align-items: flex-start;
}
.juss-toast-pos-top-center {
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}
.juss-toast-pos-bottom-right {
    bottom: 16px;
    right: 16px;
    align-items: flex-end;
    flex-direction: column-reverse;  /* 新 toast 在底部，旧的往上挤 */
}
.juss-toast-pos-bottom-left {
    bottom: 16px;
    left: 16px;
    align-items: flex-start;
    flex-direction: column-reverse;
}
.juss-toast-pos-bottom-center {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    flex-direction: column-reverse;
}


/* ─────────────────────────────────────────────────────────────────
   单条 toast
   ───────────────────────────────────────────────────────────────── */
.juss-toast {
    pointer-events: auto;       /* 单条自己接收点击 */
    position: relative;
    overflow: hidden;
    min-width: var(--juss-toast-min-width);
    max-width: var(--juss-toast-max-width);
    border-radius: var(--juss-toast-radius);
    box-shadow: var(--juss-toast-shadow);
    border-left: 4px solid transparent;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.5;
    will-change: transform, opacity;
    transition:
        opacity var(--juss-toast-duration) ease-out,
        transform var(--juss-toast-duration) ease-out;
    /* 默认隐藏（enter 状态） */
    opacity: 0;
    transform: translateX(20px);
}

/* 顶部居中 / 底部居中：从上下方向滑入 */
.juss-toast-pos-top-center .juss-toast,
.juss-toast-pos-bottom-center .juss-toast {
    transform: translateY(-12px);
}
.juss-toast-pos-bottom-center .juss-toast {
    transform: translateY(12px);
}

/* 左侧位置：从左滑入 */
.juss-toast-pos-top-left .juss-toast,
.juss-toast-pos-bottom-left .juss-toast {
    transform: translateX(-20px);
}

/* 显示状态：归位 + Sonner 风格叠加缩放（var 驱动）
   --juss-toast-scale / --juss-toast-opacity 由 JS 在 restack() 中根据 stack index 设置 */
.juss-toast-show {
    opacity: var(--juss-toast-opacity, 1) !important;
    transform: translate(0, 0) scale(var(--juss-toast-scale, 1)) !important;
}

/* 退出状态：缩小淡出 */
.juss-toast-leave {
    opacity: 0 !important;
    transform: scale(0.92) !important;
}

/* stack-3+ 已被 opacity:0 隐藏，但仍占容器位置；禁用点击避免误触 */
.juss-toast-stack-hidden {
    pointer-events: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   级别变体：背景 + 左条 + 文字色
   ───────────────────────────────────────────────────────────────── */
.juss-toast-success {
    background: var(--juss-toast-success-bg);
    border-left-color: var(--juss-toast-success-border);
    color: var(--juss-toast-success-text);
}
.juss-toast-success .juss-toast-icon { color: var(--juss-toast-success-icon); }

.juss-toast-error {
    background: var(--juss-toast-error-bg);
    border-left-color: var(--juss-toast-error-border);
    color: var(--juss-toast-error-text);
}
.juss-toast-error .juss-toast-icon { color: var(--juss-toast-error-icon); }

.juss-toast-warning {
    background: var(--juss-toast-warning-bg);
    border-left-color: var(--juss-toast-warning-border);
    color: var(--juss-toast-warning-text);
}
.juss-toast-warning .juss-toast-icon { color: var(--juss-toast-warning-icon); }

.juss-toast-info {
    background: var(--juss-toast-info-bg);
    border-left-color: var(--juss-toast-info-border);
    color: var(--juss-toast-info-text);
}
.juss-toast-info .juss-toast-icon { color: var(--juss-toast-info-icon); }


/* ─────────────────────────────────────────────────────────────────
   body 排版：图标 | 文案 | 关闭按钮
   ───────────────────────────────────────────────────────────────── */
.juss-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
}

.juss-toast-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}
.juss-toast-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.juss-toast-msg {
    flex: 1;
    word-break: break-word;
}

.juss-toast-close {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: -2px -4px 0 0;
    border: 0;
    background: transparent;
    color: currentColor;
    opacity: 0.55;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: opacity 120ms;
    border-radius: 4px;
}
.juss-toast-close:hover { opacity: 1; }
.juss-toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────
   可点击模式
   ───────────────────────────────────────────────────────────────── */
.juss-toast-clickable {
    cursor: pointer;
}
.juss-toast-clickable:hover {
    transform: translate(0, 0) translateY(-2px);
}


/* ─────────────────────────────────────────────────────────────────
   进度条（底部细条；width 由 JS 设 transition）
   ───────────────────────────────────────────────────────────────── */
.juss-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
}
.juss-toast-progress-bar {
    width: 100%;
    height: 100%;
    background: currentColor;
    opacity: 0.4;
    /* transition 由 JS 在 startTimer 中动态设置 */
}


/* ─────────────────────────────────────────────────────────────────
   移动端响应式：< 480px 强制全宽 + 顶部位置
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .juss-toast-root {
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        bottom: auto !important;
        transform: none !important;
        max-width: calc(100vw - 16px);
        align-items: stretch !important;
    }
    .juss-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────
   减少动画偏好：完全关闭过渡
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .juss-toast {
        transition: none !important;
        transform: none !important;
    }
    .juss-toast-progress-bar {
        transition: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   §X variant: 'banner' —— 顶部贴边横幅风格（MountGo 旧"小刘海"复刻）
   特征：
     - 顶部贴顶，无外边距
     - 实色背景 + 白字（success/error/warning/info 4 色）
     - 上摆方形 + 下摆 6px 圆角
     - 居中对称（无左色条、无图标、无关闭按钮、无进度条）
     - 入场: translateY(-100%) → 0（从屏幕顶部下垂出现）
     - 出场: translateY(0) → -100%（缩回顶部）
   ───────────────────────────────────────────────────────────────── */

/* banner 模式下，root 容器贴顶（必须 !important 覆盖移动端响应式的 top: 8px !important） */
.juss-toast-root[data-variant="banner"].juss-toast-pos-top-center {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    align-items: center !important;
    max-width: 100vw !important;
    gap: 0;          /* maxStack:1 时不需要间距，单条覆盖 */
}

/* banner toast 主体（v1.1.2：略小一点 + 用 MountGo 原版深饱和色去灰蒙蒙）*/
.juss-toast[data-variant="banner"] {
    min-width: auto;
    max-width: 90vw;
    padding: 7px 20px;              /* 比原版 6px 18px 略大一点点，但不过大 */
    border: none;
    border-left: none;
    border-radius: 0 0 8px 8px;     /* 8px 圆角介于原版 6px 与之前 10px 之间 */
    color: #fff;
    font-size: 13px;                /* 13px 介于原版 12px 与之前 14px 之间 */
    font-weight: 500;               /* 白字加粗一档让在深色底上更立体 */
    line-height: 1.45;
    letter-spacing: 0.2px;          /* 微小字间距提升清晰度 */
    /* 单方向阴影：仅向下投影，顶部纯净不灰蒙（spread -4px 收缩，主光只往下） */
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* 入场前位置：往上 100% + 微缩 0.95（与 MountGo 旧版动画完全一致）*/
    transform: translateY(-100%) scale(0.95);
    /* 0.2s ease 与 MountGo 旧版一致 */
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}
.juss-toast-show[data-variant="banner"] {
    /* 显示态：归位 + 缩放回 1（覆盖通用 .juss-toast-show 的 translate(0,0)） */
    transform: translateY(0) scale(1) !important;
}
.juss-toast-leave[data-variant="banner"] {
    transform: translateY(-100%) scale(0.95) !important;
    opacity: 0 !important;
}
/* banner body 内部布局：单行居中文字，无 gap */
.juss-toast[data-variant="banner"] .juss-toast-body {
    padding: 0;
    gap: 0;
    justify-content: center;
}

/* banner 4 级别实色背景（采用 MountGo 原版深饱和色板：去灰蒙蒙、对比度高）
   --juss-toast-banner-success/error/warning/info：业务侧可在 :root 覆盖切换品牌色 */
.juss-toast-success[data-variant="banner"] {
    background: var(--juss-toast-banner-success, #3f9e1a);  /* MountGo --green */
    color: #fff;
}
.juss-toast-error[data-variant="banner"] {
    background: var(--juss-toast-banner-error, #cc2244);    /* MountGo --red */
    color: #fff;
}
.juss-toast-warning[data-variant="banner"] {
    background: var(--juss-toast-banner-warning, #d4820a);  /* MountGo --orange */
    color: #fff;
}
.juss-toast-info[data-variant="banner"] {
    background: var(--juss-toast-banner-info, #2a7de1);     /* MountGo --blue */
    color: #fff;
}

/* banner 暗色模式：保持实色风格不变（与 MountGo 现状一致，无暗色对照） */
@media (prefers-color-scheme: dark) {
    .juss-toast-success[data-variant="banner"] { background: var(--juss-toast-banner-success, #3f9e1a); }
    .juss-toast-error[data-variant="banner"]   { background: var(--juss-toast-banner-error,   #cc2244); }
    .juss-toast-warning[data-variant="banner"] { background: var(--juss-toast-banner-warning, #d4820a); }
    .juss-toast-info[data-variant="banner"]    { background: var(--juss-toast-banner-info,    #2a7de1); }
}