/* ============================================================
   BONG BÓNG CHAT — theme contract v2 (lõi render: js/bubble-render.js)
   • Thân = HTML/CSS co giãn (.has-bubble). Token qua --bb-* (bubbleStyle()).
   • Mode A "hybrid": lớp .bb-deco chứa góc (.bb-c--tl/tr/bl/br), emblem (.bb-em--*),
     cạnh (.bb-e--*), đuôi (.bb-tail) — absolute, pointer-events:none, KHÔNG che chữ,
     KHÔNG tham gia flow (không gây layout shift / scroll ngang).
   • Mode B "frame9": border-image 9-slice qua --bb-frame/--bb-slice/--bb-bw/--bb-rep.
   • Animation gom trong @media (prefers-reduced-motion: no-preference) → a11y.
     Animation trên góc dùng thuộc tính translate/scale RIÊNG (không đè transform
     anchor/mirror của góc).
   ============================================================ */

/* ---------- Thân bong bóng ---------- */
.has-bubble {
  position: relative;                        /* mốc cho .bb-deco absolute */
  overflow-wrap: anywhere;                   /* URL dài luôn ngắt, không tràn viền */
}

.bb-var {
  border-radius: var(--bb-radius, 13px) !important;
  box-shadow: var(--bb-glow, none);
  text-shadow: var(--bb-tshadow, none);
}

/* ---------- Mode B: khung nine-slice (viền MỎNG mặc định 5px, manifest chỉnh được) ---------- */
.bb-framed {
  border: var(--bb-bw, 5px) solid transparent !important;
  border-image: var(--bb-frame) var(--bb-slice, 30) / var(--bb-bw, 5px) / var(--bb-outset, 1px) var(--bb-rep, stretch);
  padding: 5px 11px;                          /* bù phần khung ăn vào để chữ không sát nét */
  background-clip: padding-box;               /* nền thân không tràn ra vùng khung */
}

/* ---------- Lớp trang trí ---------- */
.bb-deco {
  position: absolute; inset: 0;
  pointer-events: none;                        /* không chặn chọn chữ / click / menu */
  overflow: visible;                           /* ornament được phép nhô ra ngoài có chủ đích */
  z-index: 1;
}
.bb-deco > * { position: absolute; pointer-events: none; }

/* Góc — mỗi góc ĐỘC LẬP: kích thước/offset/anchor/mirror/rotate/scale/opacity/z riêng
   (biến do bubble-render.js đặt). KHÔNG giả định 4 góc giống nhau hay đối xứng. */
.bb-c {
  width: var(--w, 24px); height: var(--h, auto);
  opacity: var(--op, 1); z-index: var(--z, 2);
  transform: translate(var(--ax, 0%), var(--ay, 0%))
             rotate(var(--rot, 0deg))
             scale(calc(var(--sx, 1) * var(--sc, 1)), calc(var(--sy, 1) * var(--sc, 1)));
  filter: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), .45));
}
.bb-c--tl { top: var(--oy, 0);    left: var(--ox, 0);  transform-origin: top left; }
.bb-c--tr { top: var(--oy, 0);    right: var(--ox, 0); transform-origin: top right; }
.bb-c--bl { bottom: var(--oy, 0); left: var(--ox, 0);  transform-origin: bottom left; }
.bb-c--br { bottom: var(--oy, 0); right: var(--ox, 0); transform-origin: bottom right; }

/* Emblem / mascot — lớp RIÊNG, không bao giờ mirror (chữ, logo, gương mặt có hướng) */
.bb-em {
  width: var(--w, 32px); height: var(--h, auto);
  opacity: var(--op, 1); z-index: var(--z, 3);
  transform: translate(var(--ax, 0%), var(--ay, 0%));
  filter: drop-shadow(0 1px 3px rgba(var(--shadow-rgb), .5));
}
.bb-em--tl { top: var(--oy, 0);    left: var(--ox, 0); }
.bb-em--tr { top: var(--oy, 0);    right: var(--ox, 0); }
.bb-em--bl { bottom: var(--oy, 0); left: var(--ox, 0); }
.bb-em--br { bottom: var(--oy, 0); right: var(--ox, 0); }
.bb-em--tc { top: var(--oy, 0);    left: calc(50% + var(--ox, 0px)); transform: translate(-50%, var(--ay, 0%)); }
.bb-em--bc { bottom: var(--oy, 0); left: calc(50% + var(--ox, 0px)); transform: translate(-50%, var(--ay, 0%)); }

/* Cạnh — ornament chạy dọc từng cạnh; mode repeat/stretch/center/contain do renderer đặt
   (KHÔNG kéo giãn raster gây biến dạng — chọn repeat cho hoạ tiết lặp). */
.bb-e { opacity: var(--op, 1); z-index: var(--z, 1); }
.bb-e--top    { top: var(--oy, -5px);    left: calc(12px + var(--ox, 0px)); right: calc(12px + var(--ox, 0px)); height: var(--eh, 10px); }
.bb-e--bottom { bottom: var(--oy, -5px); left: calc(12px + var(--ox, 0px)); right: calc(12px + var(--ox, 0px)); height: var(--eh, 10px); }
.bb-e--left   { left: var(--ox, -5px);   top: calc(12px + var(--oy, 0px)); bottom: calc(12px + var(--oy, 0px)); width: var(--eh, 10px); }
.bb-e--right  { right: var(--ox, -5px);  top: calc(12px + var(--oy, 0px)); bottom: calc(12px + var(--oy, 0px)); width: var(--eh, 10px); }

/* Đuôi — độc lập với góc; trái/phải, asset riêng hoặc mirror khi manifest khai báo */
.bb-tail {
  width: var(--tw, 15px); height: auto; bottom: calc(-6px + var(--toy, 0px));
  filter: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), .4));
}
.bb-tail--left  { left: calc(4px + var(--tox, 0px)); }
.bb-tail--right { right: calc(4px + var(--tox, 0px)); }

/* Motion overlay (webm alpha) — chỉ theme cao cấp; nạp lười qua hydrateBubbleMotion() */
.bb-motion { inset: 0; border-radius: inherit; overflow: hidden; background: center/cover no-repeat; }
.bb-motion video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }

/* ============================================================
   ANIMATION theo theme — CHỈ khi user không yêu cầu giảm chuyển động.
   Trên .bb-c dùng thuộc tính translate/scale RIÊNG (compose với transform anchor).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Cyber Cyan — nhịp glow neon */
  .bbt-cyber-cyan { animation: bb-pulse-cyan 3.2s ease-in-out infinite; }
  @keyframes bb-pulse-cyan {
    0%,100% { box-shadow: var(--bb-glow, none); }
    50%     { box-shadow: 0 0 18px rgba(67,232,216,.5); }
  }
  /* Violet Glass — vệt sheen chéo lướt qua thi thoảng */
  .bbt-violet-glass { overflow: hidden; }
  .bbt-violet-glass::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 62%);
    transform: translateX(-120%); animation: bb-sheen 5.5s ease-in-out infinite;
  }
  @keyframes bb-sheen { 0%,72%,100% { transform: translateX(-120%); } 84% { transform: translateX(120%); } }

  /* Sakura — ornament góc lơ lửng bay nhẹ */
  .bbt-sakura-dream .bb-c--tr { animation: bb-float 3.4s ease-in-out infinite; }
  @keyframes bb-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }

  /* Inferno — nhịp glow lửa + tàn lửa nhấp nhô */
  .bbt-inferno-dragon { animation: bb-flicker 1.6s ease-in-out infinite; }
  .bbt-inferno-dragon .bb-c--tr { animation: bb-ember 1.4s ease-in-out infinite; }
  @keyframes bb-flicker {
    0%,100% { box-shadow: 0 0 12px rgba(255,90,20,.4); }
    45%     { box-shadow: 0 0 18px rgba(255,120,30,.6); }
    70%     { box-shadow: 0 0 10px rgba(255,80,15,.35); }
  }
  @keyframes bb-ember { 0%,100% { translate: 0 0; opacity: .85; } 50% { translate: 0 -4px; opacity: 1; } }

  /* Celestial — nhịp glow tím + sao nhấp nháy */
  .bbt-celestial-gobu { animation: bb-pulse-violet 3.6s ease-in-out infinite; }
  .bbt-celestial-gobu .bb-c--tr { animation: bb-twinkle 2s ease-in-out infinite; }
  @keyframes bb-pulse-violet {
    0%,100% { box-shadow: var(--bb-glow, none); }
    50%     { box-shadow: 0 0 22px rgba(138,63,252,.55); }
  }
  @keyframes bb-twinkle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

  /* Neon Pulse — thân thở glow hồng, đom đóm hoa nhấp nháy */
  .bbt-neon-pulse { animation: bb-pulse-pink 2.8s ease-in-out infinite; }
  .bbt-neon-pulse .bb-c--br { animation: bb-float 3.8s ease-in-out infinite .4s; }
  @keyframes bb-pulse-pink {
    0%,100% { box-shadow: var(--bb-glow, none); }
    50%     { box-shadow: 0 0 18px rgba(255,110,190,.5); }
  }
}

/* ---------- Mobile: viền/ornament nhỏ lại; góc theo cấu hình responsive riêng ---------- */
@media (max-width: 640px) {
  .bb-framed { border-width: var(--bb-bw-m, 4px); border-image-width: var(--bb-bw-m, 4px); border-image-outset: 1px; padding: 5px 10px; }
  .bb-c, .bb-em {
    width: calc(var(--w, 24px) * .88);
    transform: translate(var(--ax, 0%), var(--ay, 0%)) rotate(var(--rot, 0deg))
               scale(calc(var(--sx, 1) * var(--sc-m, var(--sc, 1))), calc(var(--sy, 1) * var(--sc-m, var(--sc, 1))));
  }
  .bb-c--tl, .bb-em--tl { top: var(--oy-m, var(--oy, 0));    left: var(--ox-m, var(--ox, 0)); }
  .bb-c--tr, .bb-em--tr { top: var(--oy-m, var(--oy, 0));    right: var(--ox-m, var(--ox, 0)); }
  .bb-c--bl, .bb-em--bl { bottom: var(--oy-m, var(--oy, 0)); left: var(--ox-m, var(--ox, 0)); }
  .bb-c--br, .bb-em--br { bottom: var(--oy-m, var(--oy, 0)); right: var(--ox-m, var(--ox, 0)); }
  [data-hide-m] { display: none !important; }    /* ẩn ornament dưới breakpoint theo manifest */
  .bb-tail { width: calc(var(--tw, 15px) * .88); }
}