/* Chat decorations: verify badges + top avatar FX */

/* Admin name + verify */
.cvh-chatname-admin{color:#0b5ed7;font-weight:800;}
.cvh-verify{font-size:14px;vertical-align:middle;margin-left:2px;}
.cvh-verify-admin{color:#0b5ed7;}
.cvh-verify-super{color:#dc3545;}

/* Avatar FX wrapper */
.cvh-avatar{position:relative;display:inline-block;border-radius:999px;}
.cvh-avatar img{display:block;border-radius:999px;}

/* Base ring */
.cvh-avatar.fx-fire::before,
.cvh-avatar.fx-lightning::before,
.cvh-avatar.fx-water::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* Fire: rotating warm conic ring + glow */
.cvh-avatar.fx-fire::before{
  background:conic-gradient(from 0deg, #ff2d2d, #ff8a00, #ffd000, #ff2d2d);
  filter:blur(0.35px) drop-shadow(0 0 8px rgba(255,122,0,.55));
  animation:cvh-rot 1.8s linear infinite;
}
.cvh-avatar.fx-fire::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,122,0,.35) 0%, rgba(255,122,0,0) 65%);
  filter:blur(2px);
  animation:cvh-pulse 1.2s ease-in-out infinite;
  pointer-events:none;
}

/* Lightning: flicker ring */
.cvh-avatar.fx-lightning::before{
  background:conic-gradient(from 0deg, rgba(255,255,255,.9), #5b8cff, rgba(255,255,255,.9), #5b8cff);
  filter:drop-shadow(0 0 10px rgba(91,140,255,.65));
  animation:cvh-flicker 0.8s steps(2,end) infinite;
}
.cvh-avatar.fx-lightning::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(91,140,255,.35) 0%, rgba(91,140,255,0) 70%);
  filter:blur(2px);
  animation:cvh-pulse 1.1s ease-in-out infinite;
  pointer-events:none;
}

/* Water: rotating cool ring */
.cvh-avatar.fx-water::before{
  background:conic-gradient(from 0deg, #00d4ff, #2d7dff, #00ffa6, #00d4ff);
  filter:drop-shadow(0 0 10px rgba(0,212,255,.55));
  animation:cvh-rot 2.2s linear infinite;
}
.cvh-avatar.fx-water::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,212,255,.28) 0%, rgba(0,212,255,0) 70%);
  filter:blur(2px);
  animation:cvh-pulse 1.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes cvh-rot{to{transform:rotate(360deg);}}
@keyframes cvh-pulse{0%,100%{transform:scale(.98);opacity:.85;}50%{transform:scale(1.05);opacity:1;}}
@keyframes cvh-flicker{0%{opacity:.55;}50%{opacity:1;}100%{opacity:.65;}}

/* Group chat: ensure message rows align properly even on mobile */
#chatgroup .widget-chat-item{width:100%;}
#chatgroup .widget-chat-item.reply{justify-content:flex-end;}
#chatgroup .widget-chat-item.reply .widget-chat-content{align-items:flex-end;}
#chatgroup .widget-chat-content{display:flex;flex-direction:column;}

/* Top rank badges (SM/NAP/BOSS) shown next to names (chat + members) */
.cvh-topbadges{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}
.cvh-topbadge{
  font-size:11px;
  font-weight:900;
  line-height:1;
  padding:4px 9px 4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  color:#0b1b33;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(6px);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.cvh-topbadge::before{
  content:attr(data-ico);
  font-size:12px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.cvh-topbadge-title{font-weight:900;}
.cvh-topbadge-rk{font-weight:1000; opacity:.95;}

/* shimmer */
.cvh-topbadge::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width:55%;
  height:180%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.35;
  pointer-events:none;
  animation:cvh-shine 2.6s ease-in-out infinite;
}
@keyframes cvh-shine{0%{left:-70%;}55%{left:140%;}100%{left:140%;}}

.cvh-topbadge-power{
  background:linear-gradient(135deg, rgba(255,224,130,.92), rgba(255,140,0,.90));
  color:#2b1600;
  box-shadow:0 10px 22px rgba(255,140,0,.18);
}
.cvh-topbadge-nap{
  background:linear-gradient(135deg, rgba(166,255,214,.90), rgba(25,135,84,.90));
  color:#032014;
  box-shadow:0 10px 22px rgba(25,135,84,.16);
}
.cvh-topbadge-boss{
  background:linear-gradient(135deg, rgba(195,169,255,.92), rgba(111,66,193,.90));
  color:#1b0b2a;
  box-shadow:0 10px 22px rgba(111,66,193,.16);
}

/* Elite glow for top 1-3 */
.cvh-topbadge.rk1{animation:cvh-badge-pop 1.5s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 14px 30px rgba(0,0,0,.18);}
.cvh-topbadge.rk2{animation:cvh-badge-pop 1.8s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255,255,255,.28), 0 12px 26px rgba(0,0,0,.16);}
.cvh-topbadge.rk3{animation:cvh-badge-pop 2.1s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.14);}
@keyframes cvh-badge-pop{0%,100%{transform:translateY(0);}50%{transform:translateY(-1px);}}



/* ==============================
   Chat Bubble Skins (VIP / TOP / ADMIN)
   - Applied when server adds: .cvh-bubble + .cvh-bubble-KEY on .widget-chat-message
   - KEY can be: vipX_YY, top1..3, admin
   - Bubble image watermark is injected via inline style: --cvh-bimg:url('...')
   ============================== */

body.cvh-fb .widget-chat-message.cvh-bubble{
  --cvh-bbg: var(--fb-card);
  --cvh-bbd: rgba(0,0,0,.10);
  --cvh-btx: #0f172a;
  --cvh-bshadow: 0 10px 22px rgba(0,0,0,.10);
  --cvh-bbtn-bd: rgba(0,0,0,.18);
  --cvh-bbtn-tx: currentColor;
  --cvh-bbtn-bg: rgba(255,255,255,.10);
  --cvh-bq-bd: rgba(0,0,0,.25);

  /* watermark image (được tạo từ ảnh frame) */
  --cvh-bimg: none;
  --cvh-bimg-size: 92px;
  --cvh-bimg-pos: right -10px bottom -12px;

  background: var(--cvh-bimg) var(--cvh-bimg-pos) / var(--cvh-bimg-size) no-repeat, var(--cvh-bbg) !important;
  border: 1px solid var(--cvh-bbd) !important;
  color: var(--cvh-btx) !important;
  position: relative;
  overflow: visible;
  box-shadow: var(--cvh-bshadow);
}

/*
  IMPORTANT: app.css đang dùng .widget-chat-message.last:before để tạo "đuôi" bubble.
  Với cvh-bubble, ta tắt :before của app để tránh lộ "ô vuông".
*/
body.cvh-fb .widget-chat-message.cvh-bubble.last:before{
  content:none !important;
  display:none !important;
  border:0 !important;
}

/* Bubble tail */
body.cvh-fb .widget-chat-item.widget-chat-item-start .widget-chat-message.cvh-bubble::after{
  content:"";
  position:absolute;
  left:-6px;
  bottom:10px;
  width:14px;
  height:14px;
  background: var(--cvh-bbg);
  border-left: 1px solid var(--cvh-bbd);
  border-bottom: 1px solid var(--cvh-bbd);
  transform: rotate(45deg);
  border-bottom-left-radius: 6px;
}
body.cvh-fb .widget-chat-item.reply .widget-chat-message.cvh-bubble::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:10px;
  width:14px;
  height:14px;
  background: var(--cvh-bbg);
  border-right: 1px solid var(--cvh-bbd);
  border-top: 1px solid var(--cvh-bbd);
  transform: rotate(45deg);
  border-top-right-radius: 6px;
}

/* Links + mentions */
body.cvh-fb .widget-chat-message.cvh-bubble a{ color: inherit !important; text-decoration: underline; }
body.cvh-fb .widget-chat-message.cvh-bubble .mention{ color: currentColor !important; font-weight: 800; }

/* Reply quote inside bubble */
body.cvh-fb .widget-chat-message.cvh-bubble .cvh-reply-quote{ border-left-color: var(--cvh-bq-bd) !important; }

/* Reply button inside bubble */
body.cvh-fb .widget-chat-message.cvh-bubble .btn-outline-secondary{
  border-color: var(--cvh-bbtn-bd) !important;
  color: var(--cvh-bbtn-tx) !important;
  background: var(--cvh-bbtn-bg) !important;
}
body.cvh-fb .widget-chat-message.cvh-bubble .btn-outline-secondary:hover{
  filter: brightness(1.03);
}

@keyframes cvhBubbleGlow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ filter: drop-shadow(0 0 10px rgba(255,255,255,.16)); }
}
@keyframes cvhBubbleGlowStrong{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ filter: drop-shadow(0 0 16px rgba(255,255,255,.24)); }
}
@keyframes cvhBubbleShimmer{
  0%{ transform: translateX(-140%) rotate(18deg); opacity:.0; }
  10%{ opacity:.25; }
  45%{ opacity:.25; }
  60%{ transform: translateX(160%) rotate(18deg); opacity:0; }
  100%{ transform: translateX(160%) rotate(18deg); opacity:0; }
}

/* ===== Special: ADMIN / TOP ===== */
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-admin{
  --cvh-bbg: linear-gradient(135deg, rgba(17,24,39,1), rgba(220,38,38,1));
  --cvh-bbd: rgba(255,255,255,.22);
  --cvh-btx: #fff;
  --cvh-bshadow: 0 14px 28px rgba(220,38,38,.18);
  --cvh-bbtn-bd: rgba(255,255,255,.35);
  --cvh-bbtn-tx: rgba(255,255,255,.95);
  --cvh-bq-bd: rgba(255,255,255,.35);
  --cvh-bimg-size: 118px;
  animation: cvhBubbleGlow 2.4s ease-in-out infinite;
}

body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-top1{
  --cvh-bbg: linear-gradient(135deg, #7c4a00, #facc15);
  --cvh-bbd: rgba(255,255,255,.26);
  --cvh-btx: #111827;
  --cvh-bshadow: 0 14px 28px rgba(250,204,21,.20);
  --cvh-bbtn-bd: rgba(17,24,39,.25);
  --cvh-bbtn-tx: rgba(17,24,39,.92);
  --cvh-bq-bd: rgba(17,24,39,.35);
  --cvh-bimg-size: 120px;
  animation: cvhBubbleGlow 2.8s ease-in-out infinite;
}
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-top2{
  --cvh-bbg: linear-gradient(135deg, #111827, #cbd5e1);
  --cvh-bbd: rgba(255,255,255,.30);
  --cvh-btx: #0f172a;
  --cvh-bshadow: 0 14px 28px rgba(148,163,184,.18);
  --cvh-bbtn-bd: rgba(17,24,39,.22);
  --cvh-bbtn-tx: rgba(15,23,42,.92);
  --cvh-bq-bd: rgba(15,23,42,.35);
  --cvh-bimg-size: 120px;
  animation: cvhBubbleGlow 3.1s ease-in-out infinite;
}
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-top3{
  --cvh-bbg: linear-gradient(135deg, #3b2f2f, #c27c3a);
  --cvh-bbd: rgba(255,255,255,.24);
  --cvh-btx: #fff;
  --cvh-bshadow: 0 14px 28px rgba(194,124,58,.18);
  --cvh-bbtn-bd: rgba(255,255,255,.32);
  --cvh-bbtn-tx: rgba(255,255,255,.95);
  --cvh-bq-bd: rgba(255,255,255,.35);
  --cvh-bimg-size: 118px;
  animation: cvhBubbleGlow 3.4s ease-in-out infinite;
}

/* ===== VIP tiers (vipX_YY) =====
   Tip: selector uses "contains" so vip10_01 still matches.
*/
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip"]{
  --cvh-bbd: rgba(255,255,255,.20);
  --cvh-btx: #fff;
  --cvh-bbtn-bd: rgba(255,255,255,.30);
  --cvh-bbtn-tx: rgba(255,255,255,.95);
  --cvh-bq-bd: rgba(255,255,255,.35);
}

/* VIP1 (cute nhẹ) */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip1_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip1{
  --cvh-bbg: linear-gradient(135deg, rgba(37,99,235,.92), rgba(14,165,233,.92));
  --cvh-bshadow: 0 14px 28px rgba(37,99,235,.16);
  --cvh-bimg-size: 98px;
  animation: cvhBubbleGlow 4.8s ease-in-out infinite;
}

/* VIP2 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip2_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip2{
  --cvh-bbg: linear-gradient(135deg, rgba(34,197,94,.92), rgba(20,184,166,.92));
  --cvh-bshadow: 0 14px 28px rgba(34,197,94,.16);
  --cvh-bimg-size: 100px;
  animation: cvhBubbleGlow 4.6s ease-in-out infinite;
}

/* VIP3 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip3_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip3{
  --cvh-bbg: linear-gradient(135deg, rgba(236,72,153,.92), rgba(168,85,247,.92));
  --cvh-bshadow: 0 14px 28px rgba(236,72,153,.16);
  --cvh-bimg-size: 102px;
  animation: cvhBubbleGlow 4.1s ease-in-out infinite;
}

/* VIP4 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip4_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip4{
  --cvh-bbg: linear-gradient(135deg, rgba(251,113,133,.92), rgba(244,63,94,.92));
  --cvh-bshadow: 0 14px 28px rgba(244,63,94,.16);
  --cvh-bimg-size: 104px;
  animation: cvhBubbleGlow 3.8s ease-in-out infinite;
}

/* VIP5 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip5_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip5{
  --cvh-bbg: linear-gradient(135deg, rgba(99,102,241,.92), rgba(14,165,233,.92));
  --cvh-bshadow: 0 14px 30px rgba(99,102,241,.17);
  --cvh-bimg-size: 106px;
  animation: cvhBubbleGlow 3.4s ease-in-out infinite;
}

/* VIP6 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip6_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip6{
  --cvh-bbg: linear-gradient(135deg, rgba(56,189,248,.92), rgba(34,211,238,.92));
  --cvh-bshadow: 0 14px 32px rgba(56,189,248,.18);
  --cvh-bimg-size: 108px;
  animation: cvhBubbleGlow 3.2s ease-in-out infinite;
}

/* VIP7 */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip7_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip7{
  --cvh-bbg: linear-gradient(135deg, rgba(245,158,11,.92), rgba(234,88,12,.92));
  --cvh-bshadow: 0 14px 34px rgba(245,158,11,.20);
  --cvh-bimg-size: 110px;
  animation: cvhBubbleGlow 3.0s ease-in-out infinite;
}

/* SVIP 8-10: glow mạnh + shimmer */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip8_"],
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip9_"],
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip10_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip8,
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip9,
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip10{
  --cvh-bbd: rgba(255,255,255,.28);
  --cvh-bbtn-bd: rgba(255,255,255,.36);
  --cvh-bbtn-tx: rgba(255,255,255,.96);
  --cvh-bq-bd: rgba(255,255,255,.38);
  animation: cvhBubbleGlowStrong 2.4s ease-in-out infinite;
}
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip8_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip8{
  --cvh-bbg: linear-gradient(135deg, rgba(251,191,36,.95), rgba(245,158,11,.95));
  --cvh-bshadow: 0 16px 36px rgba(251,191,36,.22);
  --cvh-bimg-size: 114px;
}
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip9_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip9{
  --cvh-bbg: linear-gradient(135deg, rgba(168,85,247,.95), rgba(30,41,59,.95));
  --cvh-bshadow: 0 16px 38px rgba(168,85,247,.22);
  --cvh-bimg-size: 118px;
}
/* SVIP10: rồng đỏ (mạnh nhất) */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip10_"],
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip10{
  --cvh-bbg: linear-gradient(135deg, rgba(220,38,38,.96), rgba(245,158,11,.96));
  --cvh-bshadow: 0 18px 44px rgba(220,38,38,.22);
  --cvh-bimg-size: 124px;
}

/* shimmer overlay for SVIP */
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip8_"]::before,
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip9_"]::before,
body.cvh-fb .widget-chat-message.cvh-bubble[class*="cvh-bubble-vip10_"]::before,
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip8::before,
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip9::before,
body.cvh-fb .widget-chat-message.cvh-bubble.cvh-bubble-vip10::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-140%) rotate(18deg);
  opacity: 0;
  pointer-events:none;
  mix-blend-mode: overlay;
  animation: cvhBubbleShimmer 2.8s ease-in-out infinite;
}