/* VIP 等级标签：跟名字同色系、小一号、圆角胶囊，不抢正文视觉 */

.kefu-vip-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
  background: #f2f3f5;
  color: #86909c;
}

/* 等级越高越暖，但都保持低饱和，避免整屏花花绿绿 */
.kefu-vip-lv1,
.kefu-vip-lv2 {
  background: #eef4ff;
  color: #3d7eff;
}
.kefu-vip-lv3,
.kefu-vip-lv4 {
  background: #eaf7f0;
  color: #18a058;
}
.kefu-vip-lv5,
.kefu-vip-lv6 {
  background: #fff6e6;
  color: #d98900;
}
.kefu-vip-lv7,
.kefu-vip-lv8 {
  background: #fdeee6;
  color: #e0602c;
}
.kefu-vip-lv9,
.kefu-vip-lv10 {
  background: #fdeaf0;
  color: #d03050;
}

/* 消息气泡里：贴在发送者名字右边，跟着名字排版而不是独占一行 */
.kefu-vip-tag-bubble {
  display: inline-block;
  margin: 0 0 0 6px;
  vertical-align: middle;
  position: static;
}

/* 暗色模式下别刺眼 */
body[theme-mode='dark'] .kefu-vip-tag,
html[data-theme='dark'] .kefu-vip-tag {
  background: #2c3036;
  color: #a8b0ba;
}

/* ==========================================================================
   头像段位环
   补丁给头像 img 打 data-kefu-vip="1..10"，这里负责视觉。
   用 box-shadow 而不是 border：不占布局空间，也能自动跟随头像原有的圆角。
   十个等级从「朴素铜环」递进到「流光金环」，一眼能看出高低。
   ========================================================================== */

img[data-kefu-vip='1'] {
  box-shadow: 0 0 0 2px #a97142;
}
img[data-kefu-vip='2'] {
  box-shadow: 0 0 0 2px #c08a52, 0 0 5px rgba(192, 138, 82, 0.35);
}
img[data-kefu-vip='3'] {
  box-shadow: 0 0 0 2px #9fa8b3, 0 0 5px rgba(159, 168, 179, 0.4);
}
img[data-kefu-vip='4'] {
  box-shadow: 0 0 0 2px #cbd3dc, 0 0 7px 1px rgba(203, 211, 220, 0.55);
}
img[data-kefu-vip='5'] {
  box-shadow: 0 0 0 2px #d4a017, 0 0 8px 1px rgba(212, 160, 23, 0.5);
}
img[data-kefu-vip='6'] {
  box-shadow: 0 0 0 2px #e8b923, 0 0 8px 1px rgba(232, 185, 35, 0.6),
    0 0 16px 3px rgba(232, 185, 35, 0.3);
}
img[data-kefu-vip='7'] {
  box-shadow: 0 0 0 2px #29b6f6, 0 0 9px 1px rgba(41, 182, 246, 0.65),
    0 0 18px 4px rgba(41, 182, 246, 0.32);
}
img[data-kefu-vip='8'] {
  box-shadow: 0 0 0 2px #7c4dff, 0 0 10px 2px rgba(124, 77, 255, 0.7),
    0 0 20px 5px rgba(124, 77, 255, 0.36);
}
img[data-kefu-vip='9'] {
  box-shadow: 0 0 0 2px #e91e63, 0 0 12px 2px rgba(233, 30, 99, 0.75),
    0 0 24px 6px rgba(233, 30, 99, 0.4);
}

/* VIP10：金环 + 呼吸流光，全场只有极少数人会亮 */
img[data-kefu-vip='10'] {
  box-shadow: 0 0 0 2px #ffb300, 0 0 14px rgba(255, 179, 0, 0.75);
  animation: kefu-vip-halo 2.4s ease-in-out infinite;
}
@keyframes kefu-vip-halo {
  0%,
  100% {
    box-shadow: 0 0 0 2px #ffb300, 0 0 14px rgba(255, 179, 0, 0.75);
  }
  50% {
    box-shadow: 0 0 0 2px #ff6d00, 0 0 20px rgba(255, 109, 0, 0.9);
  }
}

/* ==========================================================================
   流金炫光（VIP9 / VIP10）
   光环挂在头像父元素上，用 conic-gradient 旋转做出「光在环上跑」的效果 ——
   这是 box-shadow 做不到的。头像本身压在光环之上，不挡脸。
   ========================================================================== */

[data-kefu-halo] {
  position: relative;
  isolation: isolate; /* 建独立层叠上下文，让 z-index:-1 不外泄出去 */
  border-radius: var(--kefu-vip-radius, 50%);
}

[data-kefu-halo]::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--kefu-vip-radius, 50%);
  z-index: -1;
  pointer-events: none;
}

/* 光环本体：一圈金色渐变，靠旋转让高光扫过去 */
[data-kefu-halo='9']::before {
  background: conic-gradient(
    from 0deg,
    #7a4a00,
    #e91e63,
    #ffd0e0,
    #e91e63,
    #7a4a00,
    #e91e63,
    #ffd0e0,
    #e91e63,
    #7a4a00
  );
  animation: kefu-vip-spin 3s linear infinite;
  filter: saturate(1.3);
}

[data-kefu-halo='10']::before {
  background: conic-gradient(
    from 0deg,
    #8a5a00,
    #ffd700,
    #fffbe6,
    #ffb300,
    #ff8c00,
    #ffd700,
    #fffbe6,
    #ffb300,
    #8a5a00
  );
  animation: kefu-vip-spin 2s linear infinite;
  filter: saturate(1.4) brightness(1.08);
}

/* 外圈再垫一层柔光，环看起来是「发光」而不是贴了张渐变纸 */
[data-kefu-halo='9']::after,
[data-kefu-halo='10']::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--kefu-vip-radius, 50%);
  z-index: -2;
  pointer-events: none;
  animation: kefu-vip-glow 2.4s ease-in-out infinite;
}
[data-kefu-halo='9']::after {
  box-shadow: 0 0 12px 3px rgba(233, 30, 99, 0.6);
}
[data-kefu-halo='10']::after {
  box-shadow: 0 0 16px 5px rgba(255, 179, 0, 0.7);
}

@keyframes kefu-vip-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kefu-vip-glow {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   消息气泡按等级上色
   补丁给接收方的气泡打 data-kefu-vip="1..10"。
   消息列表里气泡数量多，全部上重色会很吵，所以分层递进：
     VIP1–5   左侧一道等级色竖条  —— 有标识但不抢正文
     VIP6–8   整圈细边框 + 极淡底色 —— 开始有存在感
     VIP9–10  边框 + 渐变 + 外光晕 —— 一眼看出是大佬
   ========================================================================== */

/* --- VIP1–5：左侧竖条 --- */
.wk-message-base-bubble[data-kefu-vip='1'] {
  border-left: 3px solid #a97142;
}
.wk-message-base-bubble[data-kefu-vip='2'] {
  border-left: 3px solid #c08a52;
}
.wk-message-base-bubble[data-kefu-vip='3'] {
  border-left: 3px solid #9fa8b3;
}
.wk-message-base-bubble[data-kefu-vip='4'] {
  border-left: 3px solid #aab4c0;
}
.wk-message-base-bubble[data-kefu-vip='5'] {
  border-left: 3px solid #d4a017;
}

/* --- VIP6–8：边框 + 淡底 --- */
.wk-message-base-bubble[data-kefu-vip='6'] {
  border: 1px solid rgba(232, 185, 35, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf4 100%);
  box-shadow: 0 2px 10px rgba(232, 185, 35, 0.16);
}
.wk-message-base-bubble[data-kefu-vip='7'] {
  border: 1px solid rgba(41, 182, 246, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
  box-shadow: 0 2px 10px rgba(41, 182, 246, 0.16);
}
.wk-message-base-bubble[data-kefu-vip='8'] {
  border: 1px solid rgba(124, 77, 255, 0.5);
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  box-shadow: 0 2px 12px rgba(124, 77, 255, 0.2);
}

/* --- VIP9–10：边框 + 渐变 + 光晕 --- */
.wk-message-base-bubble[data-kefu-vip='9'] {
  border: 1px solid rgba(233, 30, 99, 0.55);
  background: linear-gradient(180deg, #fffdfe 0%, #fff2f6 100%);
  box-shadow: 0 0 0 1px rgba(233, 30, 99, 0.18), 0 3px 14px rgba(233, 30, 99, 0.22);
}
.wk-message-base-bubble[data-kefu-vip='10'] {
  border: 1px solid rgba(255, 179, 0, 0.65);
  background: linear-gradient(180deg, #fffdf6 0%, #fff5df 100%);
  box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.28), 0 3px 16px rgba(255, 179, 0, 0.3);
}

/* 暗色模式下把浅底压回去，只用边框和光晕表达等级 */
body[theme-mode='dark'] .wk-message-base-bubble[data-kefu-vip='6'],
html[data-theme='dark'] .wk-message-base-bubble[data-kefu-vip='6'],
body[theme-mode='dark'] .wk-message-base-bubble[data-kefu-vip='7'],
html[data-theme='dark'] .wk-message-base-bubble[data-kefu-vip='7'],
body[theme-mode='dark'] .wk-message-base-bubble[data-kefu-vip='8'],
html[data-theme='dark'] .wk-message-base-bubble[data-kefu-vip='8'],
body[theme-mode='dark'] .wk-message-base-bubble[data-kefu-vip='9'],
html[data-theme='dark'] .wk-message-base-bubble[data-kefu-vip='9'],
body[theme-mode='dark'] .wk-message-base-bubble[data-kefu-vip='10'],
html[data-theme='dark'] .wk-message-base-bubble[data-kefu-vip='10'] {
  background: #23272e;
}

/* 用户关掉动画偏好时，流光退化成静态金环 */
@media (prefers-reduced-motion: reduce) {
  [data-kefu-halo]::before,
  [data-kefu-halo]::after {
    animation: none;
  }
}