/* =============================================================================
 * bulbal-search.css — Thanh tìm kiếm tin nhắn TRONG hội thoại (31/07/2026).
 * Tinode gốc chỉ tìm được liên hệ, không tìm được nội dung tin nhắn; nhóm làm
 * việc ~300 tin/ngày nên cuộn tay tìm lại thông báo cũ là cực hình.
 *
 * Nạp SAU bulbal-shell.css (thanh nằm ngay dưới #topic-caption-panel, cần thắng
 * cascade nền/viền của header). Màu PHẢI qua var(--bb-*) ở bulbal-tokens.css.
 * ============================================================================= */

.bulbal-msg-search {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bb-bg-side);
  border-bottom: 1px solid var(--bb-line);
  /* Nằm trên bong bóng tin nhắn khi cuộn, dưới menu ngữ cảnh (ul.menu z-index:30). */
  position: relative;
  z-index: 5;
}

.bulbal-msg-search__icon {
  flex: 0 0 auto;
  color: var(--bb-txt-2);
  font-size: 20px;
}

.bulbal-msg-search__input {
  /* flex:1 + min-width:0 — thiếu min-width thì input không co được, đẩy các nút
   * ra khỏi mép ở màn 360px (đúng lỗi đã gặp ở thanh soạn tin và ghi âm). */
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--bb-fs-base);
  color: var(--bb-txt-1);
  padding: 8px 4px;
}

.bulbal-msg-search__input::placeholder {
  color: var(--bb-txt-3);
}

.bulbal-msg-search__count {
  flex: 0 0 auto;
  font-size: var(--bb-fs-meta);
  color: var(--bb-txt-2);
  white-space: nowrap;
  padding: 0 4px;
}

.bulbal-msg-search__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Vùng chạm 44px — cùng chuẩn với các nút icon khác (xem bulbal-interactions.css B5) */
  min-width: var(--bb-touch);
  min-height: var(--bb-touch);
  color: var(--bb-txt-2);
  text-decoration: none;
}

.bulbal-msg-search__nav[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.bulbal-msg-search__nav:hover {
  color: var(--bb-brand);
}

/* Desktop có chỗ rộng: nút gọn lại cho đỡ thưa. */
@media (min-width: 641px) {
  .bulbal-msg-search__nav {
    min-width: 36px;
    min-height: 36px;
  }
}