/*
前台css样式 - zibll主题优化插件
*/

/* zibll主题优化插件 - 前台样式 */

/* ============================================
   UID 流光字效果
   ============================================ */
.zibll-uid-display {
    display: inline-block !important;
    position: relative;
    white-space: nowrap !important; /* 防止换行 */
    flex-shrink: 0 !important; /* 防止被压缩 */
}

/* 单色UID数字（带10%朦胧光晕） */
.zibll-uid-display.zibll-uid-glow {
    background: none !important;
    background-color: transparent !important;
    -webkit-text-fill-color: inherit !important;
    animation: none !important;
    filter: blur(0.3px) !important; /* 轻微朦胧效果 */
}

/* 备用方案：如果渐变不生效，使用彩色文字 */
@supports not (-webkit-background-clip: text) {
    .zibll-uid-display.zibll-uid-glow {
        background: none !important;
        background-color: transparent !important;
        -webkit-text-fill-color: #4ecdc4 !important;
        color: #4ecdc4 !important;
        animation: none !important;
        text-shadow: none !important;
    }
}

/* 确保在 text-ellipsis 容器中，UID 也能显示 */
span.display-name,
a.display-name {
    overflow: visible !important;
}

/* 如果父元素有 text-ellipsis，确保 UID 不被截断 */
.text-ellipsis .zibll-uid-display,
[class*="text-ellipsis"] .zibll-uid-display,
span.display-name .zibll-uid-display,
a.display-name .zibll-uid-display {
    display: inline-block !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-width: fit-content !important;
}

/* 确保包含 UID 的容器不会截断 UID */
span.display-name:has(.zibll-uid-display),
a.display-name:has(.zibll-uid-display) {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 兼容不支持 :has() 的浏览器 */
span.display-name .zibll-uid-display,
a.display-name .zibll-uid-display {
    position: relative;
    z-index: 1;
}

.zibll-uid-glow {
    animation: zibll-uid-shine 3s linear infinite;
}

@keyframes zibll-uid-shine {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* 单个数字闪烁效果 */
.zibll-uid-digit {
    display: inline-block;
    animation: zibll-uid-digit-sparkle 1.2s ease-in-out infinite;
}



/* 兼容性：如果浏览器不支持 background-clip，使用金色 */
@supports not (-webkit-background-clip: text) {
    .zibll-uid-display {
        -webkit-text-fill-color: #ffd700 !important;
        background: none !important;
        color: #ffd700 !important;
        animation: none !important;
    }
}