/* ══════════════════════════════════════════════════════════════════ BULBAL CHAT — Ô SOẠN TIN (composer) Sở hữu độc quyền: css/bulbal-composer.css (Phase 04) Vùng: #send-message-wrapper, #send-message-panel và bên trong. Mọi màu PHẢI dùng var(--bb-*) khai báo ở css/bulbal-tokens.css (Phase 01). 🔴 CẢNH BÁO BẪY CHÍ MẠNG — ĐỌC TRƯỚC KHI SỬA FILE NÀY: src/widgets/send-message.jsx (dòng 93, 110) dò desktop/mobile bằng cách đọc getComputedStyle(textarea).getPropertyValue('transition-property') và so sánh CHÍNH XÁC với chuỗi 'all' (==, không phải includes). Ở mobile (≤640px), base.css dòng 3843-3846 gán riêng cho ô nhập transition-property: -tinode-mobile ⇒ khác 'all' ⇒ JS KHÔNG tự focus (né bàn phím ảo tự bật) — ĐÚNG Ý ĐỒ, không đụng. bulbal (P05, QA trình duyệt thật 260729) — SỬA LẠI hiểu lầm ở bản gốc cảnh báo này: base.css dòng 493-497 có sẵn rule DÙNG CHUNG cho MỌI `textarea, input[type=text/email/password/search/tel]`: `transition: all 0.1s ease-in-out, height 0s;` — RULE NÀY VỐN ĐÃ ÁP DỤNG lên #send-message-input (nó là

) TỪ TRƯỚC, không phải do
   bulbal thêm. Hệ quả: trên desktop, computed transition-property KHÔNG
   phải 'all' đơn — mà là **'all, height'** (2 giá trị, vì shorthand có 2
   nhóm phẩy) ⇒ so sánh `== 'all'` SAI ⇒ **JS KHÔNG tự focus, kể cả khi
   KHÔNG file bulbal nào đụng vào #send-message-input** (đã đo bằng
   Playwright thật, browser_evaluate, trước khi thêm rule dưới đây: computed
   'all, height', document.activeElement = <body>, không phải textarea).
   Đây là hành vi CÓ SẴN của base.css (không được sửa), không phải lỗi do
   4 partial gây ra — đã grep xác nhận 0 rule transition nào trên
   #send-message-input trong cả 5 file bulbal-*.css trước khi vá.

⇒ FIX DUY NHẤT hợp lệ (không sửa base.css/src/**, không cần !important —
   specificity ID #send-message-input đã thắng type-selector "textarea"):
   ép LẠI đúng 1 longhand `transition-property: all` (danh sách 1 phần tử)
   CHỈ ở desktop (>640px, dùng lại đúng breakpoint của base.css) để danh
   sách rút về đúng 1 giá trị 'all', khớp so sánh của JS. Ở ≤640px KHÔNG
   khai báo gì (bỏ trống ở mục 8 bên dưới) để rule -tinode-mobile của
   base.css (cùng specificity ID, nhưng base.css nạp TRƯỚC nên nếu 2 bên
   cùng khai báo ở cùng breakpoint thì file này sẽ thắng — do đó PHẢI để
   trống, không phải vì specificity thấp hơn) tiếp tục là nguồn chân lý duy
   nhất cho mobile. Đã verify bằng Playwright thật: desktop 1440px →
   transition-property: 'all' (1 giá trị) + document.activeElement =
   textarea (auto-focus hoạt động); mobile 390px → transition-property:
   '-tinode-mobile' (rule mobile của base.css vẫn thắng, không bị đè).

⇒ NGOÀI rule fix ở mục 6 bên dưới: TUYỆT ĐỐI KHÔNG đặt thêm bất kỳ
   `transition`/`transition-property` nào khác lên #send-message-input.
   Muốn hiệu ứng đổi màu/viền khi focus, đặt transition lên
   #send-message-panel (phần tử CHA) — KHÔNG BAO GIỜ lên chính textarea.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Wrapper ngoài cùng — bỏ nền/bóng trên của base, chỉ còn padding ── */
#send-message-wrapper {
  background: transparent;
  box-shadow: none;
  padding: 10px 24px 18px;
}

/* ── 2. Panel — "viên thuốc" nổi, canh giữa khớp #scroller (P03) ── */
#send-message-panel {
  max-width: var(--bb-chat-max);
  margin-inline: auto;
  align-items: flex-end; /* nhiều dòng thì icon dồn xuống đáy, không kéo giữa */
  gap: 4px;
  padding: 6px 6px 6px 10px;
  border-radius: var(--bb-r-composer);
  background: var(--bb-bub-in);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-sh-2);
  /* Transition đặt Ở ĐÂY (phần tử cha panel) — KHÔNG đặt lên textarea con, xem cảnh báo đầu file */
  transition: border-color var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}

/* Focus-within: viền sáng thương hiệu + quầng 3px dựng từ chính --bb-brand (color-mix,
   không hardcode hex/rgba — đáp ứng "không tự chế mã hex" của Key Insight 4) */
#send-message-panel:focus-within {
  border-color: var(--bb-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-brand) 18%, transparent), var(--bb-sh-2);
}

/* ── 3. Anchor bọc icon — bỏ gạch chân link mặc định của base.css (a{text-decoration:none}
   chỉ áp dụng lúc bình thường, còn a:hover/:focus base lại BẬT underline trở lại) ── */
#send-message-panel > a {
  display: inline-flex;
  text-decoration: none;
}
#send-message-panel > a:hover,
#send-message-panel > a:focus {
  text-decoration: none;
}

/* ── 4. Icon phụ (thêm ảnh, đính kèm tệp) — ô tròn 40px ──
   base.css:1911-1918 đã ép mức ưu tiên tuyệt đối cho màu, buộc 2 dòng màu dưới đây
   phải đối trọng ở cùng mức ưu tiên đó (xem ghi chú ngay trên từng dòng). */
#send-message-panel .material-icons.secondary {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: var(--bb-txt-3) !important; /* ngoại lệ 1/2 — đối trọng base.css:1911-1913 (.secondary!important) */
  transition: color var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

#send-message-panel .material-icons.secondary:hover {
  color: var(--bb-brand-600) !important; /* ngoại lệ 2/2 — đối trọng base.css:1915-1917 (.secondary:hover!important) */
  background: var(--bb-hover);
  transform: scale(1.08);
}

/* ── 5. Nút gửi / mic — ký tự icon do JS quyết định (sendIcon), CSS chỉ tô nền/màu.
   KHÔNG chọn theo vị trí "phần tử con cuối" của panel: sau nút này còn 2
   <input type="file" hidden> trong DOM thật (send-message.jsx:304-306) sẽ trúng nhầm.
   Dùng :not(.secondary) để phân biệt thay vì chọn theo vị trí. ── */
#send-message-panel .material-icons:not(.secondary) {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 21px;
  cursor: pointer;
  background: var(--bb-hover);
  color: var(--bb-txt-2);
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease),
    transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}

#send-message-panel .material-icons:not(.secondary):hover {
  transform: scale(1.07);
}

/* Đang gõ (ô nhập không còn rỗng) → nút bật màu thương hiệu, nổi bật hẳn.
   :has() là lớp trang trí thêm — trình duyệt không hỗ trợ vẫn bấm được nút bình thường. */
#send-message-panel:has(#send-message-input:not(:placeholder-shown)) .material-icons:not(.secondary) {
  background: var(--bb-brand-600);
  color: var(--bb-txt-on-brand);
  box-shadow: var(--bb-sh-3);
}

/* ── 6. Textarea — KHÔNG height (JS tự set theo scrollHeight, xem send-message.jsx:116-117).
   Chỉ chỉnh trình bày, không đụng cơ chế đo chiều cao. Ngoại lệ transition-property duy nhất
   nằm ở mục 6.1 ngay dưới (fix sentinel, không phải hiệu ứng trang trí). ── */
#send-message-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: var(--bb-fs-base);
  line-height: 1.5;
  padding: 11px 6px;
  max-height: 112px;
  color: var(--bb-txt-1);
}

#send-message-input::placeholder {
  color: var(--bb-txt-3);
}

/* ── 6.1 (bulbal, P05, 260729) — FIX sentinel auto-focus desktop, xem cảnh báo đầu file.
   base.css:497 (`textarea{transition:all .1s ease-in-out, height 0s}`) đã tự làm computed
   transition-property của #send-message-input thành 'all, height' (2 giá trị) từ TRƯỚC khi có
   bất kỳ file bulbal nào — send-message.jsx so sánh CHÍNH XÁC với 'all' nên auto-focus desktop
   ĐANG BỊ HỎNG SẴN (đã đo bằng Playwright thật: document.activeElement vẫn là <body> sau khi mở
   hội thoại, TRƯỚC khi thêm rule dưới đây). Ép lại đúng 1 giá trị 'all' — CHỈ ở desktop
   (>640px, đúng breakpoint base.css), KHÔNG cần !important (ID thắng type-selector sẵn). Ở
   ≤640px cố tình để trống (không viết gì) để rule `-tinode-mobile` của base.css (cùng
   breakpoint, cùng specificity ID) là nguồn duy nhất — nếu viết đè ở đây thì file này nạp sau
   base.css nên sẽ thắng nhầm, làm mobile lại tự bật bàn phím ảo. Đã verify cả 2 chiều bằng
   Playwright thật (xem report phase-05). */
@media (min-width: 641px) {
  #send-message-input {
    transition-property: all;
  }
}

/* ── 7. Trạng thái cấm ghi + xem trước tin đang trả lời ── */
#send-message-panel #writing-disabled {
  padding: 10px 6px;
  color: var(--bb-txt-3);
  font-size: var(--bb-fs-base);
  font-weight: 500;
}

/* #reply-quote-preview render làm anh em ĐỨNG TRƯỚC #send-message-panel trong luồng bình
   thường (trả lời tin), chỉ lồng VÀO TRONG panel ở nhánh noInput đặc biệt (send-message.jsx:280-281,
   256-261) — dùng descendant selector trên #send-message-wrapper để bắt cả 2 trường hợp,
   vẫn nằm trong vùng sở hữu "#send-message-wrapper và bên trong". */
#send-message-wrapper #reply-quote-preview {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: calc(var(--bb-r-composer) - 8px);
  background: var(--bb-hover);
  border: 1px solid var(--bb-line);
}
#send-message-wrapper #reply-quote-preview .reply-quote {
  background: transparent;
}

/* ── 8. Mobile ≤640px — safe-area đáy + vùng chạm ≥44px (R7) ── */
/* ── 8. Màn hẹp: GỘP 2 NÚT ĐÍNH KÈM SAU NÚT "+" ───────────────────────────────
 *
 * LỖI ĐÃ SỬA 260730: ô nhập bị bóp quá hẹp, người dùng gõ được ~12 ký tự là hết chỗ.
 * Số đo thật trước khi sửa:
 *   360px  ->  ô nhập 130px (36% màn hình)   <- Android phổ thông, đa số công nhân
 *   390px  ->  ô nhập 160px (41%)
 * Nguyên nhân: 4 nút cố định 44px (ảnh, kẹp giấy, emoji, mic) = 176px, cộng khoảng
 * cách, ăn hết 324px khả dụng. Nút emoji thêm ngày 30/07 làm nặng thêm 44px.
 *
 * Đã thử bóp khoảng cách + padding tối đa: chỉ lên được ~42%, KHÔNG ĐỦ. Hàng nút
 * thừa hẳn một nút cho màn 360px ⇒ phải bớt, không bóp được nữa.
 *
 * Cách làm: ẩn 2 nút đính kèm sau một nút "+" (giống Zalo/Messenger). Đính kèm là
 * việc thỉnh thoảng, gõ chữ là việc liên tục — ưu tiên chỗ cho việc liên tục.
 * Bấm "+" thì 2 nút bung ra (JSX gắn class `bulbal-attach-open`), bấm lại thì thu.
 * Desktop KHÔNG đổi gì: nút "+" bị ẩn, cả 2 nút luôn hiện như cũ.
 * Vùng chạm giữ nguyên 44px — không bóp nút để lấy chỗ. */
@media (min-width: 641px) {
  #bulbal-attach-toggle {
    display: none;
  }
}

@media (max-width: 640px) {
  #send-message-wrapper {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }

#send-message-panel .material-icons.secondary,
  #send-message-panel .material-icons:not(.secondary) {
    flex-basis: var(--bb-touch);
    width: var(--bb-touch);
    height: var(--bb-touch);
  }

/* Mặc định: giấu ĐÚNG 2 nút đính kèm. Nút emoji VẪN HIỆN — nó không phải nút
   * đính kèm, người dùng bấm liên tục trong lúc gõ; giấu nó sau "+" là bắt thao tác
   * 2 lần cho việc thường xuyên nhất. Còn lại: "+" · emoji · ô nhập · mic. */
  #send-message-panel:not(.bulbal-attach-open) .bulbal-attach-item {
    display: none;
  }

/* Đã bấm "+": 2 nút đính kèm bung ra, ĐỔI LẠI tạm giấu emoji để không bóp ô nhập
   * xuống 23% (đã đo). Lúc này người dùng đang chọn tệp, không phải đang gõ.
   * Bấm "+" lần nữa (icon đã đổi thành dấu đóng) là về trạng thái gõ. */
  #send-message-panel.bulbal-attach-open #bulbal-emoji-toggle {
    display: none;
  }
}

/* ── 9. Tôn trọng prefers-reduced-motion — chỉ trong vùng sở hữu, KHÔNG đụng
   #send-message-input (transition-duration là longhand khác transition-property,
   không ảnh hưởng sentinel JS, nhưng loại trừ tường minh cho chắc). ── */
@media (prefers-reduced-motion: reduce) {
  #send-message-panel *:not(#send-message-input) {
    transition-duration: .01ms;
  }
}

/* ── 9. GHI ÂM: sửa tràn UI trên mobile (260730) ───────────────────────────────
 *
 * LỖI: bấm nút ghi âm ở màn 360px thì khối ghi âm tràn ra ngoài màn hình, HAI NÚT
 * HUỶ/GỬI bị đẩy khuất — ghi xong không bấm gửi được.
 * Số đo thật lúc lỗi (màn 360px): panel rộng 340px nhưng nội dung 444px (tràn 104px);
 * `div.audio` rộng 434px trải từ x=21 tới x=455; 2 nút nằm ở x=350 và x=401, tức
 * NGOÀI mép màn hình 360.
 *
 * GỐC RỄ ở base.css:3415-3429 —
 *     .audio        { flex: none; }            <- không bao giờ co lại
 *     .audio canvas { width: 14rem;            <- 224px CỐ ĐỊNH
 *                     margin-right: 2rem; }    <- +32px
 * Sóng âm cố định 224px + lề 32px + chữ đếm giờ + 2 nút 44px > 324px khả dụng.
 * Trên desktop thừa chỗ nên không ai thấy; chỉ vỡ ở màn hẹp.
 *
 * VÁ: cho khối ghi âm co được và sóng âm giãn theo chỗ trống. Phạm vi bó trong
 * #send-message-panel để KHÔNG đụng phần phát lại audio trong bong bóng tin nhắn
 * (.audio-player, .audio canvas.playback — thuộc bulbal-media.css).
 * `min-width: 0` là bắt buộc: mặc định flex item không co nhỏ hơn nội dung của nó,
 * thiếu dòng này thì canvas vẫn đẩy tràn dù đã cho flex-shrink. */
#send-message-panel .audio {
  flex: 1 1 auto;
  min-width: 0;
}

#send-message-panel .audio canvas {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-right: 8px;
}