/* ============================================================
   COSMETICS — khung avatar (.fr-*) & bong bóng chat (.bb-*)

   • Khung = ĐỒ TRANG TRÍ quanh avatar vuông (kiểu Discord): 2 hoạ tiết
     emoji ở góc đối + viền mảnh theo tông màu + chuyển động nhẹ.
     overflow:visible để hoạ tiết tràn ra ngoài ô avatar.
   • Bong bóng = nền chữ, dùng inline-block nên ÔM SÁT độ dài câu chat.
   ============================================================ */

/* ---------- KHUNG AVATAR (hoạ tiết góc) ---------- */
.av-frame { position: relative; overflow: visible !important; }
.av-frame img { border-radius: inherit !important; }

.av-frame::before,
.av-frame::after {
  position: absolute;
  font-size: 13px; line-height: 1;
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), .55));
}
.av-frame::before { top: -7px;    left: -7px;  }
.av-frame::after  { bottom: -7px; right: -7px; }

/* Hoạ tiết to hơn trên avatar lớn ở trang hồ sơ */
.pf-banner__avatar.av-frame::before { font-size: 26px; top: -8px;  left: -4px;  }
.pf-banner__avatar.av-frame::after  { font-size: 26px; bottom: -8px; right: -4px; }

/* 🐉 Rồng Vàng — huyền thoại: vương miện + lấp lánh, viền vàng */
.fr-1 { box-shadow: 0 0 0 2px var(--gold), 0 0 9px rgba(var(--gold-rgb), .55); }
.fr-1::before { content: "👑"; animation: deco-bob 2.4s ease-in-out infinite; }
.fr-1::after  { content: "✨"; animation: deco-twinkle 1.8s ease-in-out infinite; }

/* 🌸 Anh Đào — sử thi: cành hoa đào hai góc, đung đưa */
.fr-3 { box-shadow: 0 0 0 2px rgba(255, 143, 179, .9), 0 0 9px rgba(var(--pink-rgb), .45); }
.fr-3::before { content: "🌸"; animation: deco-sway 3s ease-in-out infinite; }
.fr-3::after  { content: "🌸"; animation: deco-sway 3s ease-in-out infinite .5s reverse; }

/* ❄️ Băng Giá — hiếm: bông tuyết xoay, viền cyan */
.fr-6 { box-shadow: 0 0 0 2px var(--cyan), 0 0 9px rgba(var(--cyan-rgb), .45); }
.fr-6::before { content: "❄️"; animation: deco-spin 6s linear infinite; }
.fr-6::after  { content: "❄️"; animation: deco-spin 8s linear infinite reverse; }

/* 🔥 Lửa — sử thi: ngọn lửa chập chờn, viền cam */
.fr-10 { box-shadow: 0 0 0 2px #FF8A3D, 0 0 10px rgba(255, 138, 61, .55); }
.fr-10::before { content: "🔥"; animation: deco-flicker 1.1s ease-in-out infinite; }
.fr-10::after  { content: "🔥"; animation: deco-flicker 1.1s ease-in-out infinite .35s; }

/* 🌌 Thiên Hà — sử thi: các vì sao lấp lánh, viền tím */
.fr-13 { box-shadow: 0 0 0 2px var(--violet), 0 0 10px rgba(var(--violet-rgb), .6); }
.fr-13::before { content: "🌟"; animation: deco-twinkle 2s ease-in-out infinite; }
.fr-13::after  { content: "⭐"; animation: deco-twinkle 2s ease-in-out infinite .6s; }

@keyframes deco-sway    { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes deco-twinkle { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes deco-spin    { to { transform: rotate(360deg); } }
@keyframes deco-flicker { 0%,100% { opacity: .7; transform: scale(.88); } 35% { opacity: 1; transform: scale(1.18); } 65% { opacity: .9; transform: scale(1); } }
@keyframes deco-bob     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- BONG BÓNG CHAT (ôm sát chữ) ---------- */
.has-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 13px;
  line-height: 1.5;
  word-break: break-word;
}

/* 💬 Neon — sử thi: nền hồng dịu, viền neon */
.bb-4 {
  background: rgba(var(--pink-rgb), .15) !important;
  border: 1px solid rgba(var(--pink-rgb), .7) !important;
  color: #FFE3ED !important;
  box-shadow: 0 0 10px rgba(var(--pink-rgb), .3);
}

/* ⚡ Sấm — hiếm: gradient xanh điện nhẹ */
.bb-5 {
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), .18), rgba(58, 176, 255, .12)) !important;
  border: 1px solid rgba(var(--cyan-rgb), .55) !important;
  color: #E6FFFB !important;
  box-shadow: 0 0 9px rgba(var(--cyan-rgb), .25);
}

/* ☁️ Mây — phổ thông: nền tím nhạt, bo tròn mềm */
.bb-8 {
  background: rgba(var(--violet-rgb), .16) !important;
  border: 1px solid rgba(var(--violet-rgb), .4) !important;
  color: #ECE6FF !important;
  border-radius: 16px !important;
}

/* 🌟 Sao — hiếm: nền đêm có vì sao li ti */
.bb-12 {
  background:
    radial-gradient(1.5px 1.5px at 20% 35%, rgba(var(--hl-rgb), .9), transparent),
    radial-gradient(1.5px 1.5px at 72% 65%, rgba(var(--hl-rgb), .8), transparent),
    linear-gradient(135deg, #2A2257, #1A2447) !important;
  border: 1px solid rgba(var(--violet-rgb), .5) !important;
  color: #EAE4FF !important;
  box-shadow: 0 0 8px rgba(var(--violet-rgb), .28);
}

/* 🌅 Hoàng Hôn — sử thi: gradient ấm, chữ trắng rõ */
.bb-14 {
  background: linear-gradient(120deg, #FF8A4C, var(--pink) 65%, #B06BFF) !important;
  border: none !important;
  color: var(--on-accent) !important;
  text-shadow: 0 1px 2px rgba(var(--shadow-rgb), .28);
  box-shadow: 0 2px 12px rgba(var(--pink-rgb), .4);
}