/* 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. */
  height: 68%;
  max-height: 68%;
  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. */
.rs-grip {
  width: 36px;
  height: 4px;
  margin: 10px auto 6px;
  border-radius: 999px;
  background: #d5d7db;
  flex: none;
}

/* Hàng thẻ: "N lượt thích" | "N chia sẻ" | "N lượt lưu" */
.rs-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid #e8e8ea;
  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;
  padding: 12px 10px 10px;
  font: inherit;
  font-size: 0.95rem;
  color: #65676b;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

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

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

.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;
}