/* Bảng bình luận trượt lên từ đáy, mở khi bấm nút bình luận trên thẻ bài ở trang Tin tức.
   Xem js/comment-sheet.js.

   ĐỌC TRƯỚC KHI SỬA — bảng này từng đi qua một chuỗi lỗi dài trên Safari iOS, mỗi quy tắc
   dưới đây vá một cái. Bỏ bất kỳ cái nào là lỗi cũ quay lại:

     1. Lớp phủ bị js thu theo visualViewport, mà Safari CÓ LÚC BÁO HỤT số đo ấy (bắn resize
        giữa lúc bàn phím còn trượt rồi thôi). Lớp phủ dựng theo số hụt sẽ dừng trước mép
        bàn phím, hở một dải.
     2. Khi bàn phím mở, iOS neo position:fixed theo VISUAL viewport — tức chính hệ quy chiếu
        đã hụt, nên KHÔNG lớp phủ nào phủ kín được phần Safari không biết tới. Thứ cứu được
        là làm nhoè và mờ chính nội dung phía sau (.cs-dang-mo bên dưới).
     3. Chiều cao lấy % của lớp phủ, không dùng vh: trên iOS vh tính theo viewport lớn, bỏ
        qua cả thanh trình duyệt lẫn bàn phím.
     4. Thanh nhập nằm cùng luồng flex với danh sách, không phải lớp nổi đè lên. */

.cs-overlay {
  position: fixed;
  /* inset:0 chỉ là giá trị ban đầu — js ghi đè top/left/width/height theo visualViewport để
     lớp phủ trùng khít vùng CÒN NHÌN THẤY khi bàn phím mở. */
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

/* Nền tối ở ::before chứ không đặt thẳng lên .cs-overlay: lớp phủ bị thu theo bàn phím,
   nền đặt trên nó thì thu theo và để hở. Xem điểm 1 ở đầu file. */
.cs-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.cs-overlay.is-open { opacity: 1; visibility: visible; }

/* Làm nhoè và mờ nội dung phía sau — CHỈ khi bàn phím mở.
   Bàn phím đóng thì không có dải hở nào, để nguyên cho thấy rõ bài viết như mẫu. Bàn phím
   mở mới sinh dải hở (điểm 2), lúc đó dù hở cũng chỉ còn mảng màu; opacity thấp để lộ nền
   #f5f5f5 của body, vì blur xoá NÉT chứ không xoá MÀU — ảnh và video trong bài vẫn để lại
   mảng tối nếu chỉ có blur. */
body.cs-dang-mo.cs-ban-phim > *:not(.cs-overlay) { filter: blur(8px); opacity: .08; }

.cs-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  /* % của lớp phủ, KHÔNG dùng vh — xem điểm 3 ở đầu file. Cao cố định chứ không co theo nội
     dung: bảng nhảy cao thấp mỗi lần thêm bình luận sẽ giật, lúc chưa có bình luận nào thì
     bẹp dí. */
  height: 72%;
  max-height: 72%;
  background: #fff;
  border-radius: 1rem 1rem 0 0;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.cs-overlay.is-open .cs-sheet { transform: translateY(0); }

/* js gọi .cs-sheet.focus() để bẫy bàn phím trong bảng (tabindex="-1"), nên trình duyệt vẽ
   vòng focus quanh cả bảng — nhìn ra thành một viền xanh vắt ngang mép trên. Bỏ đi được vì
   đây không phải phần tử người dùng tab tới; các nút bên trong vẫn giữ vòng focus của mình. */
.cs-sheet:focus,
.cs-sheet:focus-visible { outline: none; }

/* Bàn phím mở thì bảng ăn trọn phần màn hình còn trống. Giữ 72% lúc này là bảng bị BÓP nhỏ
   theo lớp phủ đã co: danh sách cụt đi, trên đầu hở một mảng lớn, nhìn như bảng tụt xuống
   chứ không phải được đẩy lên cùng thanh nhập. */
.cs-overlay.cs-ban-phim-mo .cs-sheet { height: 100%; max-height: 100%; }

/* Vạch kéo ở mép trên, như trong mẫu. */
.cs-grip {
  flex-shrink: 0;
  width: 2.4rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background: #d7d7dc;
}

/* ── Đầu bảng ── */
.bl-dau {
  position: relative;       /* mốc cho nút X đặt tuyệt đối bên phải */
  flex-shrink: 0;
  padding: 0.5rem 3rem 0.7rem;   /* chừa hai bên bằng nhau để tiêu đề vẫn cân giữa BẢNG */
  border-bottom: 1px solid #ececed;
  text-align: center;
}

.bl-tieu-de {
  margin: 0;
  /* Sans đậm như mẫu — KHÔNG dùng serif của tiêu đề trang. 'Be Vietnam Pro' là font thân
     bài của cả site (css/style.css). Nét ĐẬM NHẤT có file là 600 — để 700 thì trình duyệt
     tự bôi đậm lấy, chữ Việt bị dày bệt ở dấu. */
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Cùng màu mực với tên người đăng ở trang Tin tức (.middle .feed .user .info h3
     trong css/style.css), không dùng đen. */
  color: #522546;
}

.bl-dong {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2.5rem để vùng chạm đủ rộng cho ngón tay, dấu X bên trong chỉ 1.15rem. */
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #522546;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bl-dong:active { background: #f0f0f2; }

.bl-dong svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Danh sách ── */
.bl-ds {
  flex: 1;
  min-height: 0;          /* để flex item co được, nếu không sẽ tràn khỏi bảng */
  overflow-y: auto;
  /* Cuộn hết danh sách rồi kéo tiếp thì DỪNG, không lan xuống trang phía sau. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.9rem;
}

.bl-trong {
  padding: 2.5rem 1rem;
  color: #977c90;          /* mực nhạt của thẻ bài (.info small) */
  font-size: 0.9rem;
  text-align: center;
}

.bl-muc {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
}

.bl-anh {
  flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: #ded7dc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b4560;
  font-size: 0.8rem;
  font-weight: 700;
}

.bl-anh img { width: 100%; height: 100%; object-fit: cover; }

.bl-than { flex: 1; min-width: 0; }

.bl-meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* Tên và thời gian lấy đúng bộ đôi màu của đầu thẻ bài ở trang Tin tức
   (.middle .feed .user .info h3 và .info small trong css/style.css). Cỡ nhỏ hơn một bậc
   vì đây là dòng trong danh sách, không phải tên chủ bài. */
.bl-ten {
  font-size: 0.9rem;
  font-weight: 600;
  color: #522546;
}

.bl-luc { font-size: 0.85rem; color: #977c90; }

/* Cùng kiểu chữ với chú thích bài viết (.middle .caption p): nét mảnh 300 và dòng thưa
   1.8 — hai thứ làm nên vẻ của trang Tin tức, xem ghi chú ở css/style.css. */
.bl-chu {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  color: #522546;
  text-align: justify;
  /* Giữ xuống dòng người viết gõ, giống chú thích bài. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Nút tim của từng bình luận ── */
.bl-tim {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.15rem 0.2rem;
  border: 0;
  background: none;
  color: #977c90;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.bl-tim svg {
  width: 1.45rem; height: 1.45rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}

.bl-tim.is-on { color: #f0322d; }   /* đúng đỏ của tim đã thích ở thẻ bài */
.bl-tim.is-on svg { fill: currentColor; stroke: currentColor; }

/* Ô đếm luôn chiếm một dòng dù rỗng: bình luận chưa ai tim thì span rỗng cao 0, vừa bấm
   tim là nút cao thêm một dòng và ĐẨY mọi bình luận bên dưới xuống, ngay dưới ngón tay. */
.bl-dem {
  display: block;
  min-height: 1em;
  line-height: 1;
}

/* ── Thanh cảm xúc + ô nhập ── */
/* Cùng luồng flex với danh sách, KHÔNG phải lớp nổi đè lên (điểm 4 ở đầu file): kiểu
   absolute cũ đè lên danh sách và phải bù bằng padding do js đo, đo lệch là cắt ngang bình
   luận cuối. Là flex item thì .bl-ds tự co đúng phần còn lại. */
.bl-thanh {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #ececed;
}

.bl-emojis {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.6rem;
}

/* Các ô CHIA ĐỀU bề ngang còn lại thay vì mỗi ô một cỡ cố định.
   
   Nhờ vậy sticker to hết mức mà thanh cho phép trên từng máy: iPhone rộng 430pt được ô to
   hơn, máy 320pt hẹp thì ô tự co lại — và không bao giờ tràn ra ngoài thanh. Đặt cỡ cứng
   thì phải chọn theo máy hẹp nhất, tức máy nào cũng thấy sticker bé.
   
   min-width: 0 là bắt buộc: mặc định một ô flex không co nhỏ hơn nội dung của nó, nên thiếu
   dòng này thì trên máy hẹp hàng sticker đẩy rộng ra và thanh bị tràn ngang. */
.bl-emoji {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.bl-emoji:hover, .bl-emoji:focus-visible { transform: scale(1.22); }

/* Sticker trong dải phản ứng: to hết mức thanh cho phép, trần 40px.
   
   width:100% để ăn trọn ô đã chia đều ở trên; max-width chặn trên để trên máy rộng sticker
   không phình thành mấy ô vuông to đùng lấn hết thanh nhập bên dưới.
   
   aspect-ratio + object-fit: contain giữ mọi ô VUÔNG BẰNG NHAU dù sticker gốc cao thấp khác
   nhau — không có nó thì hàng lởm chởm, ô cao ô thấp. */
.bl-emoji img {
  display: block;
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Sticker khi đã thành một bình luận: to như trong chat livestream (80px), vì lúc này nó
   LÀ nội dung chứ không còn là nút bấm. */
.bl-chu--sticker {
  margin: 0;
}

.bl-sticker {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.bl-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
}

.bl-toi {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  overflow: hidden;
  background: #ded7dc;
}

.bl-toi img { width: 100%; height: 100%; object-fit: cover; }

.bl-o-nhap {
  flex: 1;
  min-width: 0;
  height: 2.4rem;
  padding: 0 0.9rem;
  border: 1px solid #dcdce2;
  border-radius: 999px;
  background: #fff;
  color: #522546;
  font: inherit;
  /* 16px là mức Safari iOS NGỪNG tự phóng to trang khi con trỏ vào ô nhập. Đặt nhỏ hơn là
     mỗi lần gõ bình luận trang lại nhảy một cỡ, phải tự chụm hai ngón thu lại. */
  font-size: 16px;
  outline: none;
}

.bl-o-nhap::placeholder { color: #977c90; }

.bl-o-nhap:focus { border-color: #b9a0b2; }

.bl-gui {
  flex-shrink: 0;
  padding: 0 0.85rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: #522546;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.bl-gui:disabled { opacity: 0.4; cursor: not-allowed; }

@media (min-width: 768px) {
  .cs-overlay { align-items: center; }
  .cs-sheet {
    height: 70%;
    border-radius: 1rem;
    transform: translateY(1rem) scale(0.98);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  }
  .cs-overlay.is-open .cs-sheet { transform: translateY(0) scale(1); }
  .cs-grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-overlay, .cs-sheet, .bl-emoji { transition: none; }
}