/* Dau khung chat: doi ten hoi thoai, tieu de, nut cuon xuong tin moi */

/* ---------- Doi ten hoi thoai ---------- */
.chat-rename-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: 2px;
  width: 24px; height: 24px; margin-right: 6px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); opacity: .55; transition: opacity .15s, background .15s;
}
.chat-header-main:hover .chat-rename-btn { opacity: 1; }
.chat-rename-btn:hover { background: var(--primary-soft); color: var(--primary); }
#chat-title { cursor: text; }
.chat-rename-input {
  font: inherit; font-size: 15px; font-weight: 700; padding: 4px 10px; width: min(340px, 60vw);
  border: 1.5px solid var(--primary); border-radius: 8px; box-shadow: var(--ring); outline: none;
}
/* Tieu de dai: 1 dong, cat "..." thay vi xuong dong tung chu khi cua so hep */
.chat-header-main { flex: 1 1 auto; }
.chat-header-actions { flex-shrink: 0; display: flex; gap: 6px; }
#chat-title {
  display: inline-block; max-width: min(100%, 520px); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#chat-title:has(input) { overflow: visible; max-width: none; }
.chat-rename-btn { vertical-align: middle; }
.chat-header-main { min-width: 140px; }
/* Cua so hep: nut tren header chi con bieu tuong (ten hien o tooltip) */
@media (max-width: 1150px) {
  .chat-header-actions .small-btn { font-size: 0; gap: 0; padding: 8px; }
  .chat-header-actions .small-btn svg { margin: 0; }
}

/* ---------- Nut cuon xuong tin moi nhat ---------- */
.chat-active { position: relative; }
.scroll-bottom-btn {
  position: absolute; left: 50%; bottom: 140px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--primary); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px) scale(.9);
  transition: opacity .2s var(--ease), transform .2s var(--ease), box-shadow .2s;
}
.scroll-bottom-btn.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.scroll-bottom-btn:hover { box-shadow: var(--glow); background: var(--grad); color: #fff; border-color: transparent; }
.scroll-bottom-badge {
  display: none; position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(229, 72, 77, .4);
}
.scroll-bottom-btn.has-unread .scroll-bottom-badge { display: inline-flex; }
.scroll-bottom-btn.has-unread { animation: scroll-bottom-pulse 1.6s ease-in-out 2; }
@keyframes scroll-bottom-pulse { 50% { box-shadow: 0 0 0 8px rgba(0, 104, 255, .15), var(--shadow); } }