/* Tay Like của Naloo (mẫu C "Bóng nổi", anh Thanh chọn 26.10.2026) – hình + hiệu ứng do like-tay.js dựng. Tệp riêng để không đụng app.css */
.tay-like { width: 24px; height: 24px; display: block; flex: none; overflow: visible; }
.bai-dem .tay-like { width: 16px; height: 16px; }
/* Chưa thích: xám nhạt; thích rồi: đủ màu xanh */
.bai-nut:not(.bat) .tay-like { filter: grayscale(1) opacity(.62); transition: filter .2s; }
.bai-nut.bat .tay-like { filter: drop-shadow(0 2px 3px rgba(8, 121, 170, .35)); transition: filter .2s; }
/* Ngón cái gật lên xuống quanh gốc ngón */
.tay-like .ngon { transform-box: view-box; transform-origin: 78px 92px; }
@keyframes tay-gat { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-17deg); } 70% { transform: rotate(8deg); } }
.tay-like.nod .ngon { animation: tay-gat .6s ease-in-out 2; }
.tay-nut.bat .tay-like.nod { animation: tay-nay .26s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tay-nay { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Nút Thích: không bôi chọn / không hiện menu giữ lâu của trình duyệt */
.tay-nut { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Giữ lâu: tay to ra phía trên ngón tay, nền mờ xanh đậm */
.tay-san { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 50% 40%, rgba(8, 60, 100, .5), rgba(6, 30, 52, .62)); }
.tay-san.on { opacity: 1; }
.tay-lon { position: absolute; width: 290px; height: 290px; margin: -145px 0 0 -145px; will-change: transform;
  transition-property: transform; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 18px 18px rgba(8, 121, 170, .45)); }
.tay-lon .tay-like { width: 100%; height: 100%; filter: none; }
.tay-lon .ngon { animation: tay-gat .7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tay-like .ngon, .tay-lon .ngon { animation: none !important; } .tay-san { transition: none; } .tay-nut.bat .tay-like.nod { animation: none; } }

/* Ô soạn tin 1 hàng (anh Thanh 26.10.2026): đính kèm | ô chữ + biểu cảm | Thích (tay) | micro | Gửi – 4 nút CÙNG cỡ, sát nhau.
   Anh dặn "cho theo chuẩn": vùng chạm 44 × 44 px (chuẩn Apple; Google 48 dp ≈ 48 px) – giảm khoảng cách / lề để ô chữ còn chỗ */
.go.go-chat { gap: 2px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* app.css đặt lại padding của .go nên thanh cử chỉ / tai thỏ đè nút */
/* Ô chữ chừa chỗ cho nút biểu cảm nằm trong ô (app.css: .go textarea đè mất padding-right của .go-o textarea → chữ chạy vào dưới nút); nút biểu cảm cũng 44 px; chữ gợi ý không xuống dòng ở màn hẹp */
.go.go-chat .go-o textarea { padding-right: 48px; }
.go.go-chat .nut-bc { width: 44px; height: 44px; right: 0; bottom: 0; }
.go.go-chat textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go.go-chat:not(.go-ghi) > .nut-tron { width: 44px; height: 44px; min-height: 44px; margin-bottom: 0; } /* cao bằng ô chữ 1 dòng (44 px), bám đáy khi ô chữ cao thêm */
.go.go-chat:not(.go-ghi) > .nut-tron .ico { width: 20px; height: 20px; }
.go.go-chat > .nut-thich { background: transparent; border: 0; box-shadow: none; display: grid; place-items: center; }
.go.go-chat > .nut-thich .tay-like { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(8, 121, 170, .35)); }
/* Màn rất hẹp (≤ 340 px, vd 320): 4 nút 44 px chỉ để ô chữ ~58 px (không đọc nổi chữ gợi ý) → 4 nút + nút biểu cảm xuống 40 px (ô chữ ~80 px); từ 341 px trở lên giữ 44 px */
@media (max-width: 340px) {
  .go.go-chat:not(.go-ghi) > .nut-tron { width: 40px; height: 40px; min-height: 40px; margin-bottom: 2px; }
  .go.go-chat > .nut-thich .tay-like { width: 32px; height: 32px; }
  .go.go-chat .nut-bc { width: 40px; height: 40px; }
  .go.go-chat .go-o textarea { padding-right: 44px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .go .nut-thich:hover { transform: scale(1.12); } }
/* Tin chỉ có 1 cái 👍 (tay Like Naloo) và 👍 trong 6 cảm xúc */
.tay-cx { filter: none; }

/* Ô số điện thoại / email (anh Thanh 26.10.2026): không còn ô chọn mã nước – nước tự nhận theo máy; dòng nhỏ dưới ô hiện số app hiểu (cờ + số) để thấy nếu nhầm nước */
.o-so-email { flex-direction: column; gap: 0; }
.o-so-email input { flex: 0 0 auto; width: 100%; }
.so-hieu { min-width: 0; overflow-wrap: anywhere; }
.so-hieu:not(:empty) { margin: 6px 4px 0; font-size: .86rem; line-height: 1.3; color: var(--chu-nhat, #5b6b7a); font-variant-numeric: tabular-nums; }
.man-xanh .so-hieu:not(:empty) { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* Tay Like trong tin: giữ lâu thì to tới 3 lần (app.js đặt rộng / cao bằng CSSOM, tối đa 12,75rem – cỡ chữ "Rất to" thành ~280 px). Màn hẹp (320 px) chỉ chứa ~230 px
   nên giới hạn theo bề rộng màn hình, không để tin tràn ra ngoài / làm danh sách tin cuộn ngang */
.bc-chi svg.tay-like.bc-to { max-width: 62vw; max-height: 62vw; }

/* GPT N04 (26.10.2026): màn 320 px + cỡ chữ "Rất to" cắt nhãn thanh dưới thành "Trò chu…" (nhãn 83 px, chỗ 74 px) → nhãn thu theo bề rộng màn hình, chỉ khi không đủ chỗ
   (app.css: .muc-duoi-chu = .75rem; ≥ 360 px không đổi). Giữ nguyên cỡ chữ trợ năng ở mọi chỗ khác. */
.muc-duoi-chu { font-size: min(.75rem, 4.5vw); }
/* GPT N12: vùng chạm ≥ 44 px mà KHÔNG đổi cỡ nhìn thấy – mở rộng vùng bấm bằng phần tử ảo trong suốt (tab lọc 38 px, nút đầu trang 40 px, nút gọi lại 40 px) */
.tab, .dau .nut-tron, .nut-goi-lai { position: relative; }
.tab::after { content: ''; position: absolute; inset: -3px 0; }
.dau .nut-tron::after, .nut-goi-lai::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }

/* Nền chat (màu có sẵn hoặc ảnh từ máy): chữ nằm THẲNG trên nền – giờ, "đã sửa", tên người gửi trong nhóm, "Đã chuyển tiếp", dòng trống –
   có nhãn nền theo màu giao diện, nên đọc được ở mọi chế độ Sáng / Vừa / Tối và mọi nền (nền sáng ở chế độ Tối, nền "Đêm" ở
   chế độ Sáng, ảnh từ máy). Trước đây chữ đặt thẳng lên nền: Tối + nền Biển hay Sáng + nền Đêm thì gần như không đọc được. */
.tin-ds.nen-chat .tin-gio, .tin-ds.nen-chat .tin-ten, .tin-ds.nen-chat .tin-ct, .tin-ds.nen-chat > .trong {
  width: fit-content; max-width: 100%; padding: 1px 8px; border-radius: 10px; overflow-wrap: anywhere; /* tên rất dài viết liền không lấn ra ngoài khung */
  background: var(--nen); /* đặc, cùng màu nền giao diện → chữ rõ đúng như ở giao diện chính (bán trong suốt thì tên người gửi xanh trên nền Đêm chỉ ~3,9:1) */
}
.tin-ds.nen-chat .tin.toi .tin-gio, .tin-ds.nen-chat .tin.toi .tin-ct { margin-left: auto; }
.tin-ds.nen-chat > .trong { margin: 24px auto; padding: 8px 14px; }