/* ===================================================================
   CHAT VIP - giao dien kieu Telegram (mau sac theo theme nguoi dung chon)
   Chi override bien mau / class on dinh -> hop moi theme, ke ca Dark.
   =================================================================== */

/* ---------- 1) NEN KHUNG CHAT: hoa tiet cham kieu Telegram ----------
   Dat nen len container RONG HET CO (messagePanel + body) de khi keo to
   man hinh nen van phu kin, khong bi tro nen phang o hai ben. */
.mx_RoomView_messagePanel,
.mx_RoomView_body {
  background-color: var(--timeline-background-color, transparent) !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.6px) !important;
  background-size: 24px 24px !important;
}
/* Timeline ben trong de trong suot -> tranh nen bi chong 2 lop (cham day gap doi) */
.mx_RoomView_timeline { background: transparent !important; }

/* ---------- 2) BONG BONG TIN NHAN ---------- */
.mx_EventTile[data-layout="bubble"] { margin-top: 2px; }
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 35, 47, 0.18);
}
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line { border-bottom-right-radius: 4px; }
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line { border-bottom-left-radius: 4px; }
.mx_EventTile[data-layout="bubble"] .mx_MTextBody { font-size: 15px; line-height: 1.35; }
.mx_EventTile[data-layout="bubble"] .mx_MessageTimestamp {
  color: var(--timeline-text-secondary-color) !important; font-size: 11px;
}
.mx_DisambiguatedProfile { font-weight: 600; }

/* Bo hieu ung loe trang khi re/click vao tin */
.mx_EventTile[data-layout="bubble"]:hover:before,
.mx_EventTile_selected:before { background: transparent !important; }
.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img,
.mx_EventTile_selected .mx_EventTile_avatar img { box-shadow: none !important; }

/* Vach ngay dang vien thuoc (nhu Telegram) */
.mx_TimelineSeparator hr { visibility: hidden; }
.mx_TimelineSeparator > :not(hr) {
  background: rgba(50, 65, 55, 0.45); border-radius: 12px; padding: 2px 12px; color: #fff !important;
}

/* ---------- 3) DANH SACH CHAT (kieu Telegram) ---------- */
/* Avatar tron */
.mx_BaseAvatar, .mx_BaseAvatar img { border-radius: 50% !important; }

/* Moi dong chat: khoang cach thoang, bo goc khi hover/chon */
.mx_RoomListItemView {
  border-radius: 10px !important;
  margin: 1px 6px !important;
}
.mx_RoomListItemView:hover { background: var(--roomlist-highlights-color, rgba(128,128,128,.14)) !important; }

/* Dong dang mo = to mau nhan (xanh) + chu trang, giong Telegram */
.mx_RoomListItemView_selected { background: var(--accent-color, #3390ec) !important; }
.mx_RoomListItemView_selected [class*="roomName"],
.mx_RoomListItemView_selected [class*="RoomName"],
.mx_RoomListItemView_selected [class*="timestamp"],
.mx_RoomListItemView_selected [class*="Timestamp"],
.mx_RoomListItemView_selected [class*="messagePreview"],
.mx_RoomListItemView_selected [class*="MessagePreview"],
.mx_RoomListItemView_selected [class*="secondary"] {
  color: #ffffff !important;
}

/* Badge tin chua doc: bo tron, mau nhan cua theme (tru bao @ highlight do) */
.mx_NotificationBadge { border-radius: 999px !important; }
.mx_NotificationBadge_visible:not(.mx_NotificationBadge_level_highlight) {
  background-color: var(--accent-color, #3390ec) !important;
}

/* ---------- 4) O TIM KIEM tren cung: bo tron kieu Telegram ---------- */
[data-testid="room-list-search"] {
  border-radius: 20px !important;
  background: var(--roomlist-highlights-color, rgba(128,128,128,.14)) !important;
  border: none !important;
}

/* ---------- 5) THANH SOAN TIN + HEADER PHONG ---------- */
.mx_MessageComposer {
  background: var(--roomlist-background-color) !important;
  border-top: 1px solid var(--roomlist-separator-color) !important;
  padding: 8px 12px !important;
}
.mx_BasicMessageComposer_input { color: var(--timeline-text-color) !important; font-size: 15px !important; }
.mx_RoomHeader {
  background: var(--roomlist-background-color) !important;
  color: var(--timeline-text-color) !important;
  border-bottom: 1px solid var(--roomlist-separator-color) !important;
}

/* ---------- 6) MAN HINH TRONG (chua chon chat) = kieu Telegram ---------- */
/* Nen hoa tiet + o "vien thuoc" o giua "Chon mot cuoc tro chuyen..." */
.mx_HomePage_default {
  background-color: var(--timeline-background-color) !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px) !important;
  background-size: 24px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}
.mx_HomePage_default > * { display: none !important; }
.mx_HomePage_default::after {
  content: "Chọn một cuộc trò chuyện để bắt đầu nhắn tin";
  display: inline-block;
  background: rgba(50, 65, 55, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: 16px;
}