/* ═══════════════════════════════════════════════════════════════════════════
   THƯ VIỆN KHUNG CHAT

   Mỗi khung = một class `bm-fr-{code}` gắn lên dòng tên người gửi
   (`.bm-chat-sender`, xem ChatThreadPanel.razor). Máy chủ quyết định khung nào
   được đeo; ở đây chỉ là phần nhìn.

   Bốn kiểu hoạt ảnh dùng chung — thêm khung mới thì gắn lại một trong bốn:
     pulse    nhịp sáng đều
     rainbow  dải màu chạy ngang chữ
     glow     quầng sáng đổi màu
     orbit    đốm sáng chạy vòng quanh viền

   Chỉ animate `transform`/`opacity`/`background-position` — animate màu viền hay
   kích thước sẽ bắt trình duyệt tính lại bố cục 60 lần/giây trên khung chat dài.
   ═══════════════════════════════════════════════════════════════════════════ */

.bm-chat-sender { display: inline-flex; align-items: center; gap: 5px; position: relative; }
.bm-chat-name { font-weight: 700; }

/* ── Hoạt ảnh dùng chung ─────────────────────────────────────────────────── */
@keyframes bmFrPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

@keyframes bmFrRainbow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes bmFrGlow {
    0%, 100% { text-shadow: 0 0 5px currentColor; }
    50%      { text-shadow: 0 0 14px currentColor, 0 0 22px currentColor; }
}

@keyframes bmFrOrbit {
    from { transform: rotate(0deg) translateX(var(--bm-orbit-r, 26px)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--bm-orbit-r, 26px)) rotate(-360deg); }
}

/* Đốm sáng chạy quanh — chỉ khung nào khai báo `bm-anim-orbit` mới có */
.bm-anim-orbit::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: bmFrOrbit 2.8s linear infinite;
    pointer-events: none;
}

.bm-anim-pulse .bm-chat-name { animation: bmFrPulse 1.8s ease-in-out infinite; }
.bm-anim-glow .bm-chat-name { animation: bmFrGlow 2.2s ease-in-out infinite; }
.bm-anim-rainbow .bm-chat-name {
    background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: bmFrRainbow 3.5s linear infinite;
    font-weight: 900;
}

/* ── Khung mua bằng credit ───────────────────────────────────────────────── */
.bm-fr-frame_neon .bm-chat-name  { color: #2563eb; }
.bm-fr-frame_sea .bm-chat-name   { color: #0284c7; }
.bm-fr-frame_fire .bm-chat-name  { color: #dc2626; }
.bm-fr-frame_royal .bm-chat-name { color: #7e22ce; }

/* ── Khung mua bằng tiền thật — hàng cao cấp, phải nhìn ra ngay ──────────── */
.bm-fr-frame_diamond .bm-chat-name {
    background: linear-gradient(90deg, #67e8f9, #a5f3fc, #22d3ee);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900;
}
.bm-fr-frame_aurora .bm-chat-name { color: #10b981; }
.bm-fr-frame_galaxy .bm-chat-name { color: #6366f1; }

/* ── Khung theo thứ hạng — không mua được, chỉ leo bảng mới có ───────────── */
.bm-fr-frame_champion .bm-chat-name {
    background: linear-gradient(90deg, #b45309, #fbbf24, #fef08a, #fbbf24);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900;
}
.bm-fr-frame_podium .bm-chat-name { color: #a16207; }
.bm-fr-frame_top10 .bm-chat-name  { color: #0f766e; }

/* ── Khung NHÂN VIÊN ─────────────────────────────────────────────────────────
   Đỏ = hỗ trợ viên/quản trị, xanh dương = điều hành viên. Máy chủ tự gán theo
   vai trò, khách không đeo được — đây là dấu hiệu chống mạo danh nên phải đậm
   và khác hẳn mọi khung bán ra. */
.bm-fr-frame_admin .bm-chat-name {
    color: #dc2626; font-weight: 900;
    text-shadow: 0 0 6px rgba(220, 38, 38, .45);
}
.bm-fr-frame_admin .bm-chat-title {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}
.bm-fr-frame_mod .bm-chat-name {
    color: #1d4ed8; font-weight: 900;
    text-shadow: 0 0 6px rgba(29, 78, 216, .4);
}
.bm-fr-frame_mod .bm-chat-title {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

/* ── Xem trước trong Tủ đồ ───────────────────────────────────────────────── */
.wd-preview {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--m-bg, #f8fafc); font-size: 11.5px;
}

/* Người dùng bật "giảm chuyển động" của hệ điều hành thì tắt hẳn hoạt ảnh —
   khung vẫn giữ màu, chỉ không nhấp nháy. */
@media (prefers-reduced-motion: reduce) {
    .bm-anim-pulse .bm-chat-name,
    .bm-anim-glow .bm-chat-name,
    .bm-anim-rainbow .bm-chat-name,
    .bm-anim-orbit::after { animation: none; }
}