/**
 * 前端 VIP 升级弹窗通知样式表
 *
 * 为网站前台以弹窗形式轮播展示的 VIP 升级通知提供样式。
 * 所有视觉参数（颜色、字号、模糊度、阴影等）均通过 CSS 自定义属性（--yn-*）控制，
 * 由 notify.js 根据后台设置动态注入，实现无需刷新页面的实时样式切换。
 *
 * CSS 自定义属性一览：
 *   --yn-color      文字颜色（rgba 格式，含透明度）
 *   --yn-bg         背景颜色（rgba 格式，含透明度）
 *   --yn-font-size  基准字号（px），控制弹窗整体缩放
 *   --yn-blur       毛玻璃模糊度（px），0 则关闭
 *   --yn-gap        弹窗之间的间距（px）
 *   --yn-shadow     阴影值（完整的 box-shadow 表达式）
 *   --yn-padding    弹窗背景内边距（px），0 则移除背景
 *   --yn-text-shadow 文字阴影值（完整的 text-shadow 表达式），无背景时生效
 *
 * 其他变量：
 *   --uec-notify-gap  弹窗内部元素间距（px），用于图标与文字之间的间距
 *   --yn-hover-opacity 鼠标悬浮时弹窗透明度（0~1），由 JS 动态注入
 *   --yn-icon-shadow  无背景时图标阴影（filter: drop-shadow 表达式），由 JS 动态注入
 *   --dm-size-scale   弹幕字号缩放倍数，由 JS 根据弹性参数随机生成
 *   --dm-opacity      弹幕整体透明度（0~1），由 JS 根据弹性参数随机生成
 */

/* ==================== 容器：弹窗定位与排列 ==================== */

/**
 * 弹窗容器
 * - fixed：固定在视口右下角（或左下角），滚动页面时不移动
 * - z-index: 9999：确保在页面所有内容之上
 * - flex + column-reverse：弹窗从底部向上堆叠，新弹窗出现在最下方
 * - pointer-events: none：容器和弹窗均不拦截鼠标事件，点击穿透到底层页面
 * - gap：弹窗间距由 JS 注入的 --yn-gap 变量控制
 */
#uec-notify-container {
    position:       fixed;
    z-index:        9999;
    display:        flex;
    flex-direction: column-reverse;
    align-items:    flex-end;                      /* 弹窗右对齐（左下角变体为 flex-start） */
    gap:            calc(var(--yn-gap, 12px) * 1px);
    pointer-events: none !important;               /* 鼠标穿透，不拦截点击事件，!important 防止主题覆盖 */
    bottom:         20px;                          /* 距视口底部距离 */
    right:          20px;                          /* 距视口右侧距离 */
    transition:     opacity 0.4s ease;             /* 悬浮时平滑过渡透明度 */
}

/**
 * 鼠标悬浮在弹窗区域时降低透明度
 * 由 JS 通过 mousemove 检测鼠标位置并添加此类名
 * pointer-events: none 下 CSS :hover 无法触发，因此依赖 JS
 */
#uec-notify-container.uec-notify-hover {
    opacity: var(--yn-hover-opacity, 0.3) !important;  /* !important 防止主题覆盖 */
}

/**
 * 左下角位置变体
 * 当后台选择"左下角"时，JS 会添加此类名
 * - right: auto + left: 20px：切换到左侧定位
 * - align-items: flex-start：弹窗左对齐
 */
#uec-notify-container.uec-notify-position-left {
    right:       auto;
    left:        20px;
    align-items: flex-start;
}

/* ==================== 基础弹窗样式 ==================== */

/**
 * 单条通知弹窗
 *
 * 视觉特征：
 * - border-radius: 100px：全圆角胶囊形状
 * - backdrop-filter：毛玻璃模糊效果
 * - CSS 变量驱动所有颜色和尺寸参数
 *
 * 动画：
 * - 入场：yaliNotifyIn（0.3s，从下方滑入）
 * - 退场：添加 .uec-notify-out 类触发 yaliNotifyOut
 * - 主题切换：transition 仅过渡颜色类属性，不过渡布局属性
 *
 * 尺寸系统：
 * - font-size 由 --yn-font-size 控制，所有尺寸用 calc + em 相对计算
 * - padding、gap 等均基于字号等比缩放
 */
.uec-notify-popup {
    pointer-events: none !important;               /* 鼠标穿透，不拦截点击事件，!important 防止主题覆盖 */
    width:          fit-content;                   /* 宽度自适应内容，不撑满容器 */
    display:        flex;                          /* flex 布局：图标与文字水平排列 */
    align-items:    center;                        /* 图标与文字垂直居中对齐 */
    border-radius:  100px;
    flex-shrink:    0;                             /* 不被 flex 容器压缩 */

    /* 入场动画 */
    animation: yaliNotifyIn 0.3s ease forwards;

    /* 仅过渡颜色类属性，不过渡布局属性 */
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    /* CSS变量（由JS根据后台设置动态注入） */
    color:                        var(--yn-color, #ffffff);
    background-color:             var(--yn-bg, rgba(25, 25, 25, 0.88));
    backdrop-filter:         blur(var(--yn-blur, 3px));
    -webkit-backdrop-filter: blur(var(--yn-blur, 3px)); /* Safari/WebKit 兼容前缀 */
    box-shadow:                   var(--yn-shadow, 0 5px 20px rgba(0, 0, 0, 0.22));

    /* 尺寸由基准字号控制 */
    font-size:   var(--yn-font-size,  13px);
    padding:     var(--yn-padding,     8px) calc(var(--yn-padding, 8px) * 1.75);
    line-height: 1.4;                              /* 行高倍数，保证多行文字可读性 */
    gap:         var(--uec-notify-gap, 4px);
}

/**
 * 模糊关闭时覆盖
 * 当后台模糊度设为 0 时，JS 添加 .no-blur 类移除 backdrop-filter
 * 避免 blur(0px) 仍然触发 GPU 合成层
 */
.uec-notify-popup.no-blur {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/**
 * 弹窗背景移除时覆盖
 * 当后台弹窗背景内边距设为 0 时，JS 添加 .no-bg 类
 * 完全移除背景、阴影、圆角和模糊效果，只保留弹窗文字
 */
.uec-notify-popup.no-bg {
    background-color:        transparent;
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    box-shadow:              none;
    border-radius:           0;
    padding:                 0;
    text-shadow:             var(--yn-text-shadow, none);
}

/**
 * 通知文本（"恭喜"、"成功升级"）
 * - 0.95em：略小于基准字号
 * - opacity: 0.75：降低视觉权重，突出用户名和等级名
 */
.uec-notify-text  {font-size: 0.95em; opacity: 0.75;}

/**
 * 通知标题（用户名、VIP等级名）
 * - 1.08em：略大于基准字号
 * - font-weight: 700：加粗突出
 */
.uec-notify-title {font-size: 1.08em; font-weight: 700;}

/**
 * SVG 图标大小跟随字号
 * 宽高均为 1em，与文字等高
 */
.uec-notify-popup svg.icon {width: 1em; height: 1em;}

/**
 * 无背景时为 SVG 图标添加阴影
 * text-shadow 对 SVG 无效，使用 filter: drop-shadow 替代
 * 阴影值由 JS 通过 --yn-icon-shadow 变量注入
 */
.uec-notify-popup.no-bg svg.icon {
    text-shadow:                       none;
    filter:      var(--yn-icon-shadow, none);
}

/**
 * 无背景时为自定义图标容器添加阴影
 * 自定义图标使用 <img> 标签，同样需要 filter: drop-shadow
 */
.uec-notify-popup.no-bg .uec-notify-icon-wrap {
    filter: var(--yn-icon-shadow, none);
}

/* ==================== 自定义图标 ==================== */

/**
 * 自定义图标包裹容器
 * 严格限定为 1em × 1em 的正方形，与默认 SVG 图标保持一致
 * - overflow: hidden：裁切超出部分
 * - flex-shrink: 0：不被 flex 布局压缩
 * - margin-right：与文字的间距，基于字号计算
 */
.uec-notify-popup .uec-notify-icon-wrap {
    display:     inline-flex  !important;          /* 行内 flex，与文字同行排列 */
    align-items: center       !important;          /* 图标在容器内垂直居中 */
    width:       1em          !important;
    height:      1em          !important;
    min-width:   1em          !important;          /* 防止宽度被压缩小于 1em */
    min-height:  1em          !important;          /* 防止高度被压缩小于 1em */
    max-width:   1em          !important;          /* 防止宽度膨胀超过 1em */
    max-height:  1em          !important;          /* 防止高度膨胀超过 1em */
    overflow:    hidden       !important;
    flex-shrink: 0            !important;
    line-height: 0            !important;          /* 消除行高产生的额外空间 */
}

/* 图标位置边距：第一位时右侧间距，中间时左侧间距 */
/* gap 已提供基础间距，margin 仅补充图标所需的额外间距 */
.uec-notify-icon-first {
    display:      inline-flex;
    align-items:  center;
    margin-right: 2px;   /* 第一位图标右侧额外间距，加上gap共6px */
}

.uec-notify-icon-middle {
    display:     inline-flex;
    align-items: center;
    margin-left: 2px;   /* 中间图标左侧额外间距，加上gap共6px */
}

/**
 * 自定义图标图片
 * 填满包裹容器，使用 object-fit: contain 保持比例
 */
.uec-notify-popup .uec-notify-icon-wrap img {
    width:       100%         !important;
    height:      100%         !important;
    max-width:   100%         !important;          /* 防止图片超出容器宽度 */
    max-height:  100%         !important;          /* 防止图片超出容器高度 */
    object-fit:  contain      !important;
    display:     block        !important;          /* 消除 inline 元素的基线间隙 */
    margin:      0            !important;          /* 清除浏览器默认外边距 */
    padding:     0            !important;          /* 清除浏览器默认内边距 */
    border:      none         !important;          /* 清除浏览器默认边框 */
}

/* ==================== 动画 ==================== */

/**
 * 入场动画：从下方 20px 处滑入并淡入
 */
@keyframes yaliNotifyIn {
    from {opacity: 0; transform: translateY(20px);}
    to   {opacity: 1; transform: translateY(0)   ;}
}

/**
 * 入场动画完成后的稳定状态
 *
 * 入场动画使用 animation-fill-mode: forwards 保持终态，
 * 但 CSS 动画会持续占据 transform 属性控制权，导致无法通过
 * transition 驱动 FLIP 位移动画。
 *
 * 因此在入场动画结束后（JS 监听 animationend）添加此类：
 * - animation: none  释放动画对 transform 的控制
 * - transform: translateY(0)  显式保持终态位置
 * - transition 增加 transform  允许后续 FLIP 位移平滑过渡
 */
.uec-notify-popup.uec-notify-settled {
    animation:  none;
    transform:  translateY(0);
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.4s ease;
}

/**
 * 退场动画类
 * JS 在移除弹窗前添加此类，触发 0.3s 的向上滑出淡出动画
 * 动画结束后 JS 才真正移除 DOM 元素
 *
 * transition: none 防止 settled 状态的 transform 过渡干扰退场动画
 */
.uec-notify-popup.uec-notify-out {
    transition: none;
}

/**
 * 退场动画：向上滑出 20px 并淡出
 */
@keyframes yaliNotifyOut {
    from {opacity: 1; transform: translateY(0)    ;}
    to   {opacity: 0; transform: translateY(-20px);}
}

/* ==================== 弹幕容器与弹幕项 ==================== */

/**
 * 弹幕容器
 * - fixed：固定在视口，覆盖全屏
 * - z-index: 9999：前景弹幕，确保在页面内容之上
 * - pointer-events: none：鼠标穿透，不拦截点击事件
 * - 不设置 overflow:hidden，让弹幕自然滑出视口左侧而非被裁切
 */
#uec-danmaku-container {
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    pointer-events: none !important;
    z-index:        9999;
}

/**
 * 背景弹幕模式
 * 降低 z-index 使弹幕飘在页面内容之后
 */
#uec-danmaku-container.uec-danmaku-bg {
    z-index: -1;
}

/**
 * 弹幕项基础样式
 *
 * 与弹窗（.uec-notify-popup）使用完全相同的 CSS 变量体系，
 * 确保后台"外观样式"的所有设定同时作用于弹窗和弹幕。
 *
 * 弹幕特有的弹性缩放通过 --dm-size-scale 和 --dm-opacity 实现：
 * - --dm-size-scale：字号缩放倍数（由 JS 根据弹性参数随机生成）
 * - --dm-opacity：整体透明度（由 JS 根据弹性参数随机生成）
 *
 * 与弹窗的差异：
 * - position: absolute + left: 100%：初始定位在视口右侧外
 * - 无入场/退场动画（由 Web Animations API 驱动平移）
 * - 字号/padding/gap 通过 --dm-size-scale 缩放
 */
.uec-danmaku-item {
    position:       absolute;
    left:           100%;
    white-space:    nowrap;
    pointer-events: auto;
    cursor:         default;
    display:        inline-flex;
    align-items:    center;
    border-radius:  50px;
    flex-shrink:    0;

    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;

    color:                        var(--yn-color, #ffffff);
    background-color:             var(--yn-bg, rgba(25, 25, 25, 0.88));
    backdrop-filter:         blur(var(--yn-blur, 3px));
    -webkit-backdrop-filter: blur(var(--yn-blur, 3px));
    box-shadow:                   var(--yn-shadow, 0 5px 20px rgba(0, 0, 0, 0.22));

    font-size:               calc(var(--yn-font-size, 13px) * var(--dm-size-scale, 1));
    opacity:                      var(--dm-opacity, 1);
    padding:                 calc(var(--yn-padding, 8px) * var(--dm-size-scale, 1))
                             calc(var(--yn-padding, 8px) * 1.75 * var(--dm-size-scale, 1));
    line-height:             1.4;
    gap:                          var(--uec-notify-gap, 4px);
}

/**
 * 弹幕项鼠标悬浮状态
 * 暂停移动时略微放大 + 增强阴影，提供视觉反馈
 * transform 使用 scale 而非 translateY，避免干扰 Web Animations API 的 translateX 动画
 */
.uec-danmaku-item:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
    transform:              scale(1.05);
}

/**
 * 弹幕项 SVG 图标
 * 宽高跟随字号（1em），与文字等高
 * margin-right 与弹窗 .uec-notify-popup .uec-notify-icon-wrap 一致
 * !important 确保覆盖主题 mr6 工具类的 margin-right
 */
.uec-danmaku-item svg.icon {
    width:        1em;
    height:       1em;
    flex-shrink:  0;
}

/**
 * 弹幕项通知文本（"恭喜"、"成功升级"）
 * 与弹窗样式一致：略小字号 + 降低透明度
 */
.uec-danmaku-item .uec-notify-text {
    font-size: 0.95em;
    opacity:   0.75;
}

/**
 * 弹幕项通知标题（用户名、VIP等级名）
 * 与弹窗样式一致：略大字号 + 加粗
 */
.uec-danmaku-item .uec-notify-title {
    font-size:   1.08em;
    font-weight: 700;
}

/**
 * 弹幕项自定义图标包裹容器
 * 与弹窗样式一致：严格 1em × 1em 正方形
 * margin-right 与弹窗 .uec-notify-popup .uec-notify-icon-wrap 一致
 */
.uec-danmaku-item .uec-notify-icon-wrap {
    display:      inline-flex  !important;
    align-items:  center       !important;
    width:        1em          !important;
    height:       1em          !important;
    min-width:    1em          !important;
    min-height:   1em          !important;
    max-width:    1em          !important;
    max-height:   1em          !important;
    overflow:     hidden       !important;
    flex-shrink:  0            !important;
    line-height:  0            !important;
}

/**
 * 弹幕项自定义图标图片
 * 填满包裹容器，保持比例
 */
.uec-danmaku-item .uec-notify-icon-wrap img {
    width:      100%         !important;
    height:     100%         !important;
    max-width:  100%         !important;
    max-height: 100%         !important;
    object-fit: contain      !important;
    display:    block        !important;
    margin:     0            !important;
    padding:    0            !important;
    border:     none         !important;
}

/**
 * 弹幕项无背景模式
 * 当后台弹窗背景内边距设为 0 时，JS 添加 .no-bg 类
 * 移除背景、阴影、圆角，使用 text-shadow 保证可读性
 * --yn-text-shadow 由 syncDmThemeVars() 在弹幕容器上动态设置
 */
.uec-danmaku-item.no-bg {
    background:              transparent      !important;
    backdrop-filter:         none             !important;
    -webkit-backdrop-filter: none             !important; 
    box-shadow:              none             !important;
    border-radius:           0                !important;
    padding:                 0                !important;
    text-shadow:             var(--yn-text-shadow, none);
}

/**
 * 无背景时为 SVG 图标添加阴影
 * text-shadow 对 SVG 无效，使用 filter: drop-shadow 替代
 * --yn-icon-shadow 由 syncDmThemeVars() 在弹幕容器上动态设置
 */
.uec-danmaku-item.no-bg svg.icon {
    filter: var(--yn-icon-shadow, none);
}

/**
 * 无背景时为自定义图标容器添加阴影
 */
.uec-danmaku-item.no-bg .uec-notify-icon-wrap {
    filter: var(--yn-icon-shadow, none);
}

/**
 * 弹幕项模糊关闭时覆盖
 * 当后台模糊度设为 0 时，JS 添加 .no-blur 类
 */
.uec-danmaku-item.no-blur {
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==================== 暗色模式额外样式 ==================== */

/**
 * 夜间模式下弹窗容器通知文本的透明度调整
 * 弹窗容器中设为 0.8（略高于弹幕的 0.65），
 * 因为弹窗有背景衬托，文字对比度已足够，只需略微降低
 */
#uec-notify-container.uec-notify-dark-mode .uec-notify-text {
    opacity: 0.8;}

/**
 * 夜间模式下弹幕通知文本的透明度调整
 * 弹幕无固定背景衬托且处于移动状态，需要更低透明度（0.65）
 * 使文字在深色页面上更柔和，避免过于刺眼
 */
#uec-danmaku-container.uec-notify-dark-mode .uec-notify-text {
    opacity: 0.65;
}

/* ==================== 响应式适配 ==================== */

/**
 * 移动端适配
 * - bottom: 64px：避开移动端底部导航栏
 * - right/left: 15px：缩小边距适配窄屏
 */
@media (max-width: 768px) {
    #uec-notify-container {
        bottom: 64px;
        right:  15px;
    }

    #uec-notify-container.uec-notify-position-left {
        right:  auto;
        left:   15px;
    }
}