/**
 * IP 归属地彩色徽标
 * 评论 / 圈子动态 / 用户中心共用
 * 颜色由 PHP 端按评论、动态、用户固定分配，通过 CSS 变量传入
 */

.b2-ip-badge {
    --b2-ip-c1: #4361ee;
    --b2-ip-c2: #7b2cbf;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .055);
    background: linear-gradient(135deg, rgba(0, 0, 0, .035), rgba(0, 0, 0, .012));
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.b2-ip-badge:hover {
    transform: translateY(-1px);
    border-color: var(--b2-ip-c1);
    box-shadow: 0 3px 12px -4px var(--b2-ip-c1);
}

/* 彩色文字：颜色固定，渐变缓慢流动 */
.b2-ip-badge .b2-ip-text {
    color: var(--b2-ip-c1);
    background-image: linear-gradient(90deg,
        var(--b2-ip-c1) 0%,
        var(--b2-ip-c2) 35%,
        var(--b2-ip-c1) 70%,
        var(--b2-ip-c2) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: b2-ip-shine 6s linear infinite;
}

.b2-ip-badge .b2-ip-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b2-ip-c1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 0 8px var(--b2-ip-c1);
    animation: b2-ip-pulse 2.4s ease-in-out infinite;
}

.b2-ip-badge .b2-ip-addr {
    padding-left: 5px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    color: #98a2b3;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .2px;
}

/* 动态 / 评论元信息里的排布 */
.topic-footer-left .b2-ip-badge-wrap {
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 1;
    padding: 0;
    background: none;
    margin-left: 12px;
}

.topic-author-meta .b2-ip-badge-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    margin-right: auto;
}

.topic-author-meta .b2-ip-badge {
    margin-left: 0;
}

/* 用户中心 */
.user-panel-location {
    margin-top: 8px;
    line-height: 1;
}

.user-panel-location .b2-ip-badge {
    margin-left: 0;
}

/* 评论区：时间后面的徽标 */
.comment-floor .b2-ip-badge {
    margin-left: 10px;
}

@keyframes b2-ip-shine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: -220% 50%;
    }
}

@keyframes b2-ip-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .55;
        transform: scale(.8);
    }
}

/* 不支持文字渐变的浏览器，退回纯色 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .b2-ip-badge .b2-ip-text {
        -webkit-text-fill-color: currentColor;
        color: var(--b2-ip-c1);
        background: none;
        animation: none;
    }
}

@media (max-width: 768px) {
    .b2-ip-badge {
        gap: 4px;
        margin-left: 6px;
        padding: 2px 7px;
        font-size: 10px;
        line-height: 15px;
    }

    .b2-ip-badge .b2-ip-addr {
        font-size: 9px;
    }

    .comment-floor .b2-ip-badge,
    .topic-footer-left .b2-ip-badge-wrap {
        margin-left: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b2-ip-badge,
    .b2-ip-badge .b2-ip-text,
    .b2-ip-badge .b2-ip-dot {
        animation: none !important;
        transition: none !important;
    }
}