/* ══════════════════════════════════════════════════════════════════
   BULBAL CHAT — BẢNG CHỌN EMOJI (phase-03, đợt 1 mobile-first, 260730)
   Sở hữu độc quyền: css/bulbal-emoji.css (Phase 03)
   Vùng: .bulbal-emoji-panel (con của #send-message-wrapper) + 1 rule duy nhất
   trên chính #send-message-wrapper (position: relative, xem mục 1).
   Nạp SAU css/bulbal-composer.css (P05 thêm <link>, xem báo cáo phase-03).
   Mọi màu PHẢI dùng var(--bb-*) khai báo ở css/bulbal-tokens.css. CẤM hardcode
   hex/rgba trong file này, CẤM mọi khai báo có cờ ép mức ưu tiên (dấu chấm
   than + chữ "important" liền sau thuộc tính CSS — xem success criteria).

   🔴 CẢNH BÁO BẪY CHÍ MẠNG — ĐỌC TRƯỚC KHI SỬA FILE NÀY (xem đầu
   css/bulbal-composer.css để hiểu đầy đủ bối cảnh):
   src/widgets/send-message.jsx (dòng 93, 110) dò desktop/mobile bằng cách so
   sánh CHÍNH XÁC computed style của ô nhập tin — thuộc tính CSS ghép chữ
   "transition" + "-property" — với chuỗi 'all'.
   bulbal-composer.css mục 6.1 đã ép lại đúng 1 giá trị 'all' cho ô nhập tin
   (id "send-message-input", viết liền có dấu #) CHỈ ở desktop (>640px) để
   sentinel này hoạt động đúng.
   File này TUYỆT ĐỐI KHÔNG được khai báo bất kỳ rule đổi dần (transition)
   nào chạm vào phần tử ô nhập tin nói trên, dù trực tiếp hay qua selector
   cha lan xuống (ví dụ không dùng ký hiệu chọn-mọi-phần-tử-con của
   #send-message-wrapper để áp hiệu ứng đổi dần). Muốn hiệu ứng cho panel
   emoji, khai báo hiệu ứng đổi dần trên chính .bulbal-emoji-panel /
   .bulbal-emoji-tab / .bulbal-emoji-item — không bao giờ trên ô nhập tin.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Neo panel — #send-message-wrapper hiện KHÔNG có `position` khai báo
   (đã đọc bulbal-composer.css mục 1, chỉ có background/box-shadow/padding),
   nên panel `position:absolute` bên trong cần 1 tổ tiên `position:relative`.
   Rule này nạp SAU bulbal-composer.css nên thắng bằng THỨ TỰ NẠP (cùng
   specificity ID, không cần cờ ép mức ưu tiên) — không phải ghi đè giá trị đã
   có, composer.css chưa từng đặt position cho wrapper này. ── */
#send-message-wrapper {
  position: relative;
}

/* ── 2. Panel nổi phía TRÊN ô soạn tin (R3), canh giữa khớp bề rộng composer.
   left/right:24px LẶP LẠI đúng padding ngang của #send-message-wrapper ở
   desktop (bulbal-composer.css mục 1: padding:10px 24px 18px) — vì containing
   block của phần tử absolute là padding-edge của tổ tiên relative (bỏ qua
   padding của chính tổ tiên đó), nếu để left/right:0 panel sẽ RỘNG HƠN
   #send-message-panel bên dưới đúng 2×24px, lệch khỏi "khớp #scroller". Đổi
   giá trị padding ở composer.css thì phải sửa cả hằng số 24px/10px (mobile,
   mục 5) ở đây theo cho khớp lại.
   z-index:30 dùng đúng quy ước "nổi lên trên mọi thứ" đã có sẵn trong codebase
   (xem css/bulbal-panels.css `ul.menu { z-index: 30; }`, cùng lý do: menu/panel
   nổi phải thắng header z-index:4 của base.css). ── */
.bulbal-emoji-panel {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 100%;
  margin-bottom: 8px;
  max-width: var(--bb-chat-max);
  margin-inline: auto;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bb-bub-in);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-composer);
  box-shadow: var(--bb-sh-2);
}

/* ── 3. Thanh nhóm — dính trên đầu panel khi cuộn lưới bên dưới (position:sticky
   dùng chung 1 overflow-y:auto của .bulbal-emoji-panel, không mở thêm vùng
   cuộn thứ 2). Nền trùng nền panel để chữ/emoji bên dưới không lộ khi dính. ── */
.bulbal-emoji-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 2px;
  padding: 6px 6px 4px;
  background: var(--bb-bub-in);
  border-bottom: 1px solid var(--bb-line);
}

.bulbal-emoji-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--bb-txt-2);
  transition: background var(--bb-dur) var(--bb-ease);
}

.bulbal-emoji-tab:hover {
  background: var(--bb-hover);
}

.bulbal-emoji-tab.active {
  background: var(--bb-sel);
}

/* ── 4. Lưới emoji — auto-fill để tự co giãn theo bề rộng panel, không cần
   biết trước số cột. minmax(40px,1fr) = 40px desktop (R2/R9 chỉ bắt buộc
   ≥44px ở ≤640px, mục 6 bên dưới nới lên --bb-touch cho đúng breakpoint đó). ── */
.bulbal-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 2px;
  padding: 6px;
}

.bulbal-emoji-item {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.bulbal-emoji-item:hover {
  background: var(--bb-hover);
  transform: scale(1.12);
}

.bulbal-emoji-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  text-align: center;
  color: var(--bb-txt-3);
  font-size: var(--bb-fs-preview);
}

/* ── 5. Mobile ≤640px — vùng chạm ≥44px (R2/R9), cùng breakpoint với
   bulbal-composer.css mục 8 để nhất quán trên toàn bộ ô soạn tin. left/right
   10px LẶP LẠI padding ngang mobile của wrapper (composer.css mục 8: padding:
   8px 10px ...) — cùng lý do đã giải thích ở mục 2. ── */
@media (max-width: 640px) {
  .bulbal-emoji-panel {
    left: 10px;
    right: 10px;
  }

  .bulbal-emoji-tab {
    height: var(--bb-touch);
  }

  .bulbal-emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--bb-touch), 1fr));
  }

  .bulbal-emoji-item {
    width: var(--bb-touch);
    height: var(--bb-touch);
  }
}

/* ── 6. Tôn trọng prefers-reduced-motion — chỉ trong vùng sở hữu của file này. ── */
@media (prefers-reduced-motion: reduce) {
  .bulbal-emoji-tab,
  .bulbal-emoji-item {
    transition-duration: .01ms;
  }
}