.chat-container {
    height: 91vh;
    display: flex;
    flex-direction: column;
}   

.chat-header {
    flex-shrink: 0;
    background: white;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 5px;
}

.chat-header-info:hover {
    cursor: pointer;
    border-radius: 10px;
    background-color: var(--bs-secondary-bg);
}

.chat-header-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-header-title h6 {
    margin: 0;
    font-weight: 600;
}

.chat-header-title small {
    color: #666;
    font-size: 12px;
}

.message-section {
    flex: 1;
    background: #ffffff;
    padding: 12px;
    overflow-y: auto;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    display: flex;
    /* Giữ nguyên chiều dọc nhưng đảo ngược vị trí bắt đầu */
    flex-direction: column-reverse;
}

/* Thêm dòng này để các group tin nhắn không bị đảo ngược nội dung bên trong */
.chat-messages > * {
    flex-shrink: 0;
}

.message-group {
    margin-bottom: 20px;
}

.message-date {
    display: flex;
    justify-content: center;
    margin: 20px 0 10px 0;
    width: 100%;
}

.message-date span {
    background: #e3e3e3;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: #666;
}

.message {
    display: flex;
    margin-bottom: 15px;
    gap: 10px;
}

.message.sent {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.message-content {
    max-width: 70%;
}
.sender-name {
    padding-bottom: 5px;
}
.message.sent .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.message.received .message-content {
    display: flex !important;
    flex-direction: column !important;
}
.message-bubble {
    display: flex;
  flex-direction: column;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 4px;
    word-wrap: break-word;
}
.message.sent .message-bubble p{
    align-self: center;
}
.message.received .message-bubble p{
    margin-left: 5px;
}
.message.received .message-bubble {
    background: white;
    border: 1px solid #e0e0e0;
    border-top-left-radius: 4px;
    width: fit-content;
}

.message.sent .message-bubble {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-top-right-radius: 4px;
    align-self: flex-end;
}
.message-time {
    font-size: 11px;
    color: #999;
    padding: 0 5px;
}
.message.sent .message-time {
     align-self: flex-end;
}

.chat-input {
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 15px 20px;
    flex-shrink: 0;
}

.chat-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input-group input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 10px 20px;
    outline: none;
}

.chat-input-group input:focus {
    border-color: #5e72e4;
}

.btn-send {
    background: #5e72e4;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-send:hover {
    background: #4c63d2;
}

.user-list {
    height: calc(100vh - 65px);
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.user-list-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.user-list-header input {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 14px;
}

#createGroupBtn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-list-body {
    padding-bottom: 60px;
    overflow-y: auto;
    height: calc(100% - 60px);
}

.user-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}

.user-item:hover {
    background: #f8f9fa;
}

.user-item.active {
    background: #e3f2fd;
}

.user-item img {
    width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;

  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* 👈 nổi lên */
  background: #f1f3f5;
}

.user-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 60%;
}

.user-item-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-item-info-header h6 {
    margin: 0;
    font-size: 14px;

    /*  chống xô layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-item-info-header .left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0; /*  cực quan trọng để ellipsis hoạt động */
    flex: 1;
}

.user-item-info-header .time {
    flex-shrink: 0;
    font-size: 11px;
    color: #6b7280;
}

.user-item-info h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.user-item-info p {
    font-size: 13px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.user-item-info p.newMessage, .user-item-info .time.newMessage {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
}

.user-badge {
    position: absolute;
    margin-top: 20px;
    right: 10px;
    width: 16px;
    height: 16px;
    background: #f44336;
    color: white;
    border-radius: 50%;
    font-size: 11px;    
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.dropdown-menu {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo-brand {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

.chat-room-item {
    position: relative;
}

.chat-room-item .badge {
    font-size: 10px;
    padding: 2px 6px;
}

.user-list-body::-webkit-scrollbar {
    width: 6px;
}

.user-list-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.user-list-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.user-list-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Group creation modal styles */
.member-item:hover {
    background-color: #f8f9fa;
}

.member-item.selected {
    background-color: #e3f2fd;
}

.selected-member-item {
    background-color: white;
}

.selected-member-item:hover {
    background-color: #f8f9fa;
}

#memberList::-webkit-scrollbar,
#selectedMembers::-webkit-scrollbar {
    width: 6px;
}

#memberList::-webkit-scrollbar-track,
#selectedMembers::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#memberList::-webkit-scrollbar-thumb,
#selectedMembers::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#memberList::-webkit-scrollbar-thumb:hover,
#selectedMembers::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.remove-member-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* nav type message */
.chat-filter-tabs {
    display: flex;
    gap: 13px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
    padding: 0 4px;
}

.chat-filter-tabs .nav-link {
    background: none !important;
    border: none;
    font-size: 12.5px;
    padding: 4px 0;
    color: #666;
    border-radius: 0;
    position: relative;
    transition: 0.2s;
}

.chat-filter-tabs .nav-link:hover {
    color: #000;
}

.chat-filter-tabs .nav-link.active {
    color: #0d6efd;
    font-weight: 600;
}

/* gạch chân */
.chat-filter-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 2px;
    background: #0d6efd;
    border-radius: 2px;
}

/* css chat system room */
.chat-room-item.system {
    height: 80px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.28), #fff);
}

/* css modal create new message or group message */
.chat-create-modal .modal-content {
    border-radius: 18px;
}

/* tab */
.chat-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    margin: 0 16px;
}

.chat-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
    font-weight: 500;
}

.chat-tab.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* search */
.search-input {
    border-radius: 12px;
}

/* member list box */
.member-box {
    height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 6px;
}

.member-selected {
    background: #f9fafb;
}

/* empty */
.empty {
    text-align: center;
    padding-top: 70px;
    color: #9ca3af;
}

.empty i {
    font-size: 32px;
}

/* css dropdown menu chat room options */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 8px 0;
}

.dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background: #f0f2f5;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
}

/* css disable event ở item thành viên dc tìm kiếm */
.member-disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* css modal info member chat */
.room-info-dialog .modal-content {
    max-height: 500px;
    display: flex;
}

.room-info-dialog .modal-body {
    overflow-y: hidden;
}

#memberSection {
    height: 255px;
    overflow-y: auto;
}

/* css thanh gửi tin nhắn  , button ẹmoji img */
.chat-input-group {
    background: #fff;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-input-group input {
    border: none;
    outline: none;
    background: #f1f3f5;
    padding: 8px 12px;
    border-radius: 20px;
}

.btn-action {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: 0.15s;
}

.btn-action:hover {
    background: #f1f3f5;
}

.btn-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #0d6efd;
    color: white;
}

/* css image preiview */


/* khung input */
.input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column; /* ảnh trên, input dưới */
    gap: 6px;
    height: 40px;
    min-height: 40px;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 12px;
    background: #fff;
    flex-shrink: 0;
    max-height: 320px;
    justify-content: center;
}


/* text input */
.text-input {
    width: 100%;
    border: none;
    outline: none;
    min-height: 20px;
    max-height: 170px;
    margin-bottom: 10px;
}

/* preview */
.image-preview {
    display: flex;
    gap: 6px;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
}

/* mỗi ảnh */
.preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #ab8cca;
    flex-shrink: 0;
    transition: 0.2s;
}

.preview-item:hover {
    border-color: #764ba2;
    transform: scale(1.05);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* nút xoá */
.preview-item .remove {
    position: absolute;
    top: -6px;
    right: -6px;

    width: 22px;
    height: 22px;

    background: #ff4d4f;
    color: #fff;
    font-size: 14px;
    font-weight: bold;

    border-radius: 50%;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-action {
    background: none;
    border: none;
    cursor: pointer;
}

.preview-item .remove {
    opacity: 0;
    transition: .2s;
}

.preview-item:hover .remove {
    opacity: 1;
}

/* modal view full img */
.image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-modal img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
}

.close-btn-imageModal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    color: white;
    cursor: pointer;
    user-select: none;
}

/* css message có ảnh */
.message.received .image-message {
    display: flex;
    flex-direction: column; /*  xếp dọc */
    gap: 6px;
    padding-bottom: 5px;
}

.message.sent .image-message {
    display: flex;
    align-items: flex-end;
    flex-direction: column; /*  xếp dọc */
    gap: 6px;
    padding-bottom: 5px;
}

.image-text {
    background: #f1f1f1;
    padding: 6px 10px;
    border-radius: 12px;

    display: inline-block; /*  tự fit theo text */
    width: fit-content;
}
.reply-preview + .image-list + .image-text , .reply-preview + .comment-image-wrapper + .message-bubble {
  background: #fefefe !important;
}
.chat-image {
    max-width: 240px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ===== SENT (mạnh hơn 1 chút) ===== */
.sent .chat-image.selected {
    background: rgba(59,130,246,0.15);
    border-color: #3b82f6;
    box-shadow: 0 4px 14px rgba(59,130,246,.28);
    transform: scale(1.02);
}


/* ===== RECEIVED (nhẹ hơn) ===== */
.received .chat-image.selected {
    background: #e9f7ef;   /* nhạt hơn #d1e7dd */
    border-color: #198754;
    color: #0f5132;
    box-shadow: 0 2px 8px rgba(25,135,84,.15);
}

/* css div hiển thị đã rời nhóm */
.system-wrapper{
    display:flex;
    justify-content:center;
    margin:18px 0;
}

.system-pill{
    background:#f1f5f9;
    color:#64748b;
    font-size:12.5px;
    padding:6px 14px;
    border-radius:999px;
    border:1px solid #e2e8f0;
    font-weight:500;
}
/* css member là trưởng nhóm */
/* highlight row leader */
.member-item.leader {
    background: #fff9e6;
}

/* badge crown */
.leader-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #fbbf24;
    color: #7c2d12;
    font-weight: 600;
    white-space: nowrap;
}
/*  css text message delete */

.message-bubble.deleted {
  background: #f1f1f1 !important;
  color: #888;
  font-style: italic;
  border: 1px dashed #ccc;
}

/*  css thong báo tin nhắn mới các tab  */
.unread-badge {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  display: inline-block;
  right: -8px;
  bottom: 14px;
  animation: pulse 1.5s infinite;
}

/*  css không cho chat  */
.chat-restricted-message {
  background: linear-gradient(135deg, #fff3cd, #ffe69c);
  color: #856404;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  gap: 8px;
  border: 1px solid #ffe69c;
  display: flex;
  justify-content: center;
}

.chat-restricted-message i {
  font-size: 16px;
}

/*  css button edit room ( ten phong , avatar ) */
.chat-header-title {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.group-edit-btn {
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin-left: 6px;
  font-size: 14px;
  color: #6c757d; /* màu bạn đang dùng */
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.group-edit-btn:hover {
  color: #0d6efd; /* hover xanh nhẹ */
}

.chat-header-title:hover .group-edit-btn {
  opacity: 1;
}

/*  css modal edit room name */
.group-avatar-wrapper {
  cursor: pointer;
}

.avatar-edit-btn {
  display: flex;
  align-items: center;
  position: absolute;
  width: 24px;
  height: 24px; 
  bottom: 10px;
  right: 0;
  background: white;
  border-radius: 50%;
  padding: 6px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-edit-btn:hover {
  background: #f1f1f1;
}

#groupAvatarPreview {
  transition: 0.2s ease;
}

#groupAvatarPreview:hover {
  opacity: 0.85;
}

/* marrk tin nhan chua doc */
.unread-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
}

.unread-divider::before,
.unread-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.unread-divider span {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #ff3b30;
  background: #fff; /* để che line phía sau */
}

/* css marker add new participant  */
.system-message {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  font-size: 13px;
  color: #8a8a8a;
  font-weight: 500;
}

.system-message span {
  background-color: #f2f3f5;
  padding: 6px 12px;
  border-radius: 14px;
  line-height: 1.4;
}

/* Highlight người thực hiện */
.actor-name {
  color: #005ae0;
  font-weight: 600;
}

/* Highlight người được thêm */
.target-name {
  color: #1a1a1a;
  font-weight: 600;
}

/* Hover nhẹ cho đẹp */
.system-message span:hover {
  background-color: #e8e9eb;
}

/* css list  ảnh message */
.image-list {
  display: grid;
  gap: 4px;
  max-width: 260px;
}
.message.sent .image-list.reply-mode {
  background-color: white;
  border-radius: 10px;
  padding: 5px;
}
.message.sent .image-text {
    background-color: #e3f2fd;
}
.message.received .image-list.reply-mode {
  background-color: #f3f5ff;
  border-radius: 10px;
  padding: 5px;
}
.message.received .image-list.reply-mode img{
  border: 1px solid white;
}
.message.sent .image-list img{
    justify-content: end;
}
.image-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}
.image-list.count-1 {
  grid-template-columns: 1fr;
}

.image-list.count-1 img {
  max-height: 300px;
}
.image-list.count-2 {
  grid-template-columns: 1fr 1fr;
}
.image-list.count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.image-list.count-3 img:nth-child(1) {
  grid-row: span 2;
}
.image-list.count-4 {
  grid-template-columns: 1fr 1fr;
}
.image-list[class*="count-"]:not(.count-1):not(.count-2):not(.count-3):not(.count-4) {
  grid-template-columns: repeat(4, 1fr);
      margin-right: 70px;
}
.image-list[class*="count-"]:not(.count-1):not(.count-2):not(.count-3):not(.count-4) img{
  width: 80px;
  height: 80px;
}

.message.sent .image-list[class*="count-"]:not(.count-1):not(.count-2):not(.count-3):not(.count-4) {
    margin-right: 0 !important;
   display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;  /*  HÀNG CUỐI TỰ LÙI PHẢI */
  max-width: 400px;
}

/*  css dropdown message item */
/* Ẩn action */
.message-actions {
  margin-bottom: 5px;
  display: none;
  position: relative;
}

/* Hover mới hiện */
.message.sent:hover .message-actions {
  display: block;
  margin-top: 10px;
}
.message.received:hover .message-actions {
  display: block;
  margin-top: 30px;
}
.message.received .dropdown-menu {
    right: 0;
    left: 0;
}
.action-btn {
  background: transparent;
  border: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-size: 15px;
}

/* Dropdown */


.message .dropdown-menu {
   position: absolute;
  top: 22px;
  right: 0;
  background: white;
  border-radius: 10px;
  min-width: 150px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  padding: 5px;
  display: none;
}

/* Item */
.message .dropdown-item {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;   
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.message .dropdown-item:hover {
  background: #f2f2f2;
}

/* Màu nguy hiểm */
.message .dropdown-item.reply-message {
  color: #2671f2;
}

.message .dropdown-item.delete {
  color: #e53935;
}

/* css màn hình hiển thị phòng chat của bạn đã bị không tồn tại */
.removed-room-wrapper {
  height: 100%;
  min-height: 60vh; /* đảm bảo đủ cao */
  display: flex;
  align-items: center;
  justify-content: center;
}

.removed-room-box {
  text-align: center;
  padding: 40px 30px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  max-width: 420px;
  width: 100%;
}

.removed-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #ffe5e8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.removed-icon i {
  font-size: 32px;
  color: #dc3545;
}

.removed-room-box h4 {
  font-weight: 600;
  color: #dc3545;
  margin-bottom: 10px;
}

.removed-room-box p {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}
/*  css reply box chat input  */
.reply-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f7fb;
  border-left: 4px solid #4a8cff;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  position: relative;
}

.reply-icon {
  color: #4a8cff;
  font-size: 14px;
}

.reply-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reply-user {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.reply-text {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.cancel-reply {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  color: #999;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.cancel-reply:hover {
  background: #e4e6eb;
  color: #333;
}

/* css msg reply */
.reply-preview {
  display: flex;
  gap: 6px;
  background: #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background 0.2s;
}
.message.received .reply-preview {
   background:  #efecec !important
}
.message.received .reply-preview:hover {
  background: #c8cbd8 !important;
}
.reply-preview:hover {
  background: #e8ecff;
}

.reply-line {
  width: 3px;
  background: #4a8cff;
  border-radius: 2px;
}

.reply-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reply-preview-user {
  font-size: 13px;
  font-weight: 600;
  color: #4a8cff;
}

.reply-preview-text , .reply-image-text{
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.reply-text-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.2;
  font-size: 13px;
}
/*  css ảnh trong input chat  */
.reply-image-wrapper{
  display:flex;
  align-items:center;
  gap:6px;
}

.reply-image-preview{
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:4px;
}

.reply-image-text{
  font-size:12px;
  color:#666;
}

/*  css message dc chon tu reply message */
.highlight-message {
  background: #fff3cd;
  transition: background 0.3s ease;
}

.highlight-message.remove-highlight {
  background: transparent;
}


/*  btn link */
#linkBtn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

/* css thumb youtube */
.yt-preview {
    width: 390px; /* dài hơn */
    height: 80px; /* thấp */
    display: flex; /* ngang */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid gainsboro;
    background: #fff;

    text-decoration: none;
    transition: all .15s ease;
}

/* ===== Thumbnail bên trái ===== */
#thumbnailPreview {
    position: relative;    
}

.yt-thumb-wrapper {
    width: 120px;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    background: #000;
}

.yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none !important;
    box-shadow: none !important;
}

.yt-thumb-wrapper:hover {
    background-color: rgba(166, 164, 164, 0.56);
}

/* ===== Nút play ===== */
.yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 34px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, .7);
}

/* ===== Text bên phải ===== */
.yt-meta {
    flex: 1;
    padding: 12px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.yt-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-top: -5px;
}

.yt-link {
    font-size: 13px;
    color: #6b7280;
}

.remove-thumb {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(237, 15, 15, 0.75);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}

.comment-image-wrapper:hover .remove-thumb {
    opacity: 1;
    transform: scale(1.1);
}

/* css message-action-bar */
.message-action-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  css modal xem thog tin user */
.user-profile-modal{
  border-radius:14px;
  border:none;
  padding:20px;
}

.profile-header{
  text-align:center;
  margin-bottom:20px;
}

.profile-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #e9ecef;
  margin-bottom:10px;
}

#modalName{
  font-weight:600;
  font-size:18px;
  margin-bottom:5px;
}

.profile-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  margin-top:10px;
}

.info-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:14px;
  color:#444;
}

.info-item i{
  color:#6c757d;
}

.profile-actions{
  margin-top:20px;
  display:grid;
  gap:8px;
}

.profile-actions button{
  border-radius:8px;
}


/*  css dropdown header custom */
.dropdown-header-custom { 
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap;
}

/* css màu của loại tài khoản user  */
    .plan-badge{
  text-transform: uppercase;
  padding:3px 8px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
}

/* FREE */
.plan-free{
  background: linear-gradient(135deg,#adb5bd,#6c757d);
}

/* SILVER */
.plan-silver{
  background: linear-gradient(135deg,#dfe4ea,#a4b0be);
  color:#2f3542;
}

/* GOLD */
.plan-gold{
  background: linear-gradient(135deg,#ffd700,#ffb700,#ff8c00);
  box-shadow:0 0 8px rgba(255,193,7,0.5);
}

/* VIP */
.plan-vip{
  background: linear-gradient(135deg,#ff4d6d,#c9184a,#7209b7);
  box-shadow:0 0 10px rgba(255,77,109,0.6);
}

/*  hover icon  */
.info-item i{ 
  cursor:pointer;
}   

/*  response sive 2 cột  */
@media (min-width:1400px){
  .custom-main{
    flex:0 0 auto;
    width:73%;
  }

  .custom-side{
    flex:0 0 auto;
    width:27%;
  }
}

/* css badge load reply message  */
.loading-badge{
  position:fixed;
  bottom:20px;
  right:20px;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color:white;
  padding:8px 14px;
  border-radius:20px;
  font-size:13px;
  display:flex;
  align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  z-index:9999;
  animation:fadeIn 0.2s ease;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* icon buttons chat input*/
.btn-action,
.icon-btn{
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#6c757d;
    font-size:16px;
    transition:all .2s ease;
}

/* hover icon */
.btn-action:hover,
.icon-btn:hover{
    background:#f1f3f5;
    color:#0d6efd;
}

/*  css chat tab dropdown */
/* 👇 more tab */
.more-tab {
  position: relative;
}

.more-btn {
  font-size: 18px;
}

/* 👇 dropdown */
.more-dropdown {
  position: absolute;
  top: 0;
  right: 15px;
  min-width: 160px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  padding: 6px 0;
  display: none;
  z-index: 999;
}

.more-dropdown .dropdown-item:hover {
  background: #f5f5f5;
}

.more-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  position : relative ;
}

/* màu icon riêng */
.more-dropdown .dropdown-item i {
  font-size: 14px;
  opacity: 0.8;
}

/* hover đẹp hơn */
.more-dropdown .dropdown-item:hover i {
  opacity: 1;
  transform: scale(1.1);
}
/* active */
.more-btn.active {
  background: linear-gradient(135deg, #0d6efd, #4dabf7);
  color: linear-gradient(135deg, #0d6efd, #4dabf7);;
}

.more-btn.active i {
  transform: rotate(90deg);
  transition: 0.2s;
}
.more-dropdown .dropdown-item.active {
  color: #0d6efd;
  font-weight: 500;
}

/* icon cũng đổi màu theo */
.more-dropdown .dropdown-item.active i {
  color: #0d6efd;
}

/*  css badge-community */
.badge-community{
    background:#22c55e;
    color:#fff;
    font-size:11px;
    padding:3px 8px;
    border-radius:6px;
}
.bg-purple {
  background-color: #6f42c1; /* tím Bootstrap-like */
}

/* css chat header info */
.logo-brand:has(img) {
  background: transparent;
    border-radius: 50%;
  object-fit: cover;

  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* 👈 nổi lên */
  width: 42px;
  height: 42px;
}

/*  badge của item community  */
.more-dropdown .dropdown-item .unread-badge {
    right : 8px ;
}
.dropdown-item.has-notify {
  background: rgba(255, 59, 48, 0.08);
  border-radius: 8px;
}
.dot {
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  margin-left: auto;

  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/*  css avatar room modal */
.room-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;

  background: #f1f3f5; /* 👈 chống nền trắng */
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.room-avatar.gradient {
  padding: 2px;
  background: linear-gradient(135deg, #00c853, #69f0ae);
}

.room-avatar.gradient img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/*  css roomInfo modal */
.modal-header .header-content {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}
.modal-header .header-content .logo-brand {
  width: 60px;
  height: 60px;
}
.modal-header .header-content .logo-brand i{
  font-size: larger;
}
.modal-header img{
   width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;

  background: #f1f3f5; /* 👈 chống nền trắng */
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
#roomInfo .community {
  background: #22c55e;
  color: #fff;
}

/* css message-text */
.message-text {
  word-break: break-all;
}

/* css modal image btn next , prev */
/* nút next prev */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  font-size: 40px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}