/* Bảng "ai đã tương tác" trượt lên từ đáy, mở khi bấm dòng
   "N lượt thích · N chia sẻ · N lượt lưu" trên thẻ bài ở trang Tin tức.
   Xem js/reaction-sheet.js.

   Điện thoại dán đáy, máy tính neo giữa. Bảng này KHÔNG có ô nhập nên không cần bám theo
   visualViewport: bàn phím không bao giờ bật khi nó đang mở. */

.rs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

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

.rs-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  /* Cao cố định theo lớp phủ, không co theo nội dung: bài có 1 người và bài có 50 người mà
     bảng cao thấp khác nhau thì mỗi lần mở lại giật một kiểu. */
  /* Cùng 72% với bảng bình luận (css/comment-sheet.css): hai bảng mở từ cùng một thẻ bài,
     cao khác nhau thì chuyển qua lại thấy giật. */
  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;
  outline: none;
}

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

/* Thanh kéo trang trí. aria-hidden trong JS: nó không bấm được, đọc lên chỉ gây nhiễu. */
/* Vạch kéo: y hệt .cs-grip của bảng bình luận. */
.rs-grip {
  width: 2.4rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background: #d7d7dc;
  flex: none;
}

/* Hàng đầu: ba thẻ + nút X. Đường kẻ dưới đặt ở đây để chạy suốt bề ngang, kể cả dưới X. */
.rs-dau {
  position: relative;
  flex: none;
  border-bottom: 1px solid #ececed;   /* cùng màu kẻ với .bl-dau */
}

/* Nút X: cùng dáng với .bl-dong của bảng bình luận (css/comment-sheet.css). */
.rs-dong {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #522546;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rs-dong:active { background: #f0f0f2; }
.rs-dong svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Hàng thẻ: "N lượt thích" | "N chia sẻ" | "N lượt lưu" — CANH GIỮA.
   Chừa 3rem mỗi bên cho cân (bên phải là chỗ nút X), để tâm hàng thẻ trùng tâm bảng. */
.rs-tabs {
  display: flex;
  gap: 4px;
  padding: 0 3rem;
  flex: none;
  /* Ba thẻ với nhãn tiếng Việt dài dễ tràn ngang trên máy hẹp; cho cuộn ngang trong chính
     hàng này thay vì đẩy cả bảng rộng ra. */
  overflow-x: auto;
  scrollbar-width: none;
}

.rs-tabs::-webkit-scrollbar { display: none; }

.rs-tab {
  appearance: none;
  border: 0;
  background: none;
  /* Cùng nhịp với đầu bảng bình luận (.bl-dau: đệm trên 0.5rem, dưới 0.7rem) — trừ 3px
     đáy của vạch chọn — để hai bảng có phần đầu cao y như nhau. */
  padding: 0.5rem 0.45rem calc(0.7rem - 3px);
  /* Cùng font với tiêu đề "Bình luận" nhưng NHỎ và MẢNH hơn (chủ trang chốt): 1rem, thẻ
     đang chọn nét 500 màu mực, thẻ còn lại nét 300 tím nhạt. Ba thẻ đứng cạnh nhau, để
     đậm như một tiêu đề đơn thì cả hàng nặng nề. */
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  /* Máy hẹp (dưới ~380px) co theo bề ngang để ba thẻ vẫn nằm gọn giữa hai khoảng chừa
     3rem, không chui xuống dưới nút X. */
  font-size: min(1rem, 4.2vw);
  font-weight: 300;
  /* Dòng cao CỐ ĐỊNH đúng bằng tiêu đề (1.1rem × 1.25): chữ co trên máy hẹp mà phần đầu
     vẫn cao y như bảng bình luận, nút X không lệch. */
  line-height: 1.375rem;
  letter-spacing: -0.01em;
  color: #977c90;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.rs-tab[aria-selected="true"] {
  color: #522546;
  font-weight: 500;
  border-bottom-color: #522546;
}

.rs-tab:disabled { opacity: 0.45; cursor: default; }

/* Canh giữa bằng margin:auto hai đầu, KHÔNG dùng justify-content:center: hàng này cuộn
   ngang được, và khi tràn thì justify-content:center đẩy thẻ đầu ra ngoài mép trái — phần
   đó không cuộn tới được nữa. margin:auto chỉ chia khoảng thừa, hết chỗ thì tự về 0. */
.rs-tab:first-child { margin-left: auto; }
.rs-tab:last-child { margin-right: auto; }

.rs-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 14px;
}

.rs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}

.rs-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #eceff3;
}

.rs-ten {
  font-size: 1rem;
  color: #1c1e21;
  /* Tên dài không được đẩy hàng rộng ra rồi sinh cuộn ngang cho cả danh sách. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-khach { color: #65676b; }

.rs-empty {
  padding: 28px 16px;
  text-align: center;
  color: #65676b;
  font-size: 0.95rem;
}