button.mobile-back { display: none; flex: none; }
.pane-title-label { flex: 1; }

.item {
  width: 100%; padding: 13px 15px; display: flex; gap: 10px; align-items: center;
  color: var(--text); background: transparent; border-radius: 0; text-align: left;
  border-bottom: 1px solid var(--line); border-right: 0; border-left: 3px solid transparent;
}
.item:hover { background: #f6f9fe; }
.item.active { background: #e6f1ff; border-left: 3px solid var(--blue); }
.item-main { min-width: 0; flex: 1; }
.item-main .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.name, .preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.name { font-weight: 600; }
.preview, .meta { margin-top: 4px; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.time-sm { color: var(--muted); font-size: 11px; flex: none; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.dot.online { background: var(--green); }
.count { background: #2f75d7; color: #fff; min-width: 20px; text-align: center; padding: 2px 6px; border-radius: 99px; font-size: 11px; flex: none; }

.search-row { margin: 12px; display: flex; gap: 8px; align-items: center; }
.search { flex: 1; padding: 10px 12px; color: var(--text); background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.state { color: var(--muted); font-size: 12px; }
.refreshing { opacity: .65; }

.small { padding: 6px 9px; font-size: 12px; }
.danger { background: var(--red); }
.account-actions { padding: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }

/* Avatar */
.avatar { position: relative; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #cbd5e1; color: #fff; font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 13px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

/* Tab bar lọc hội thoại: Tất cả / Chưa đọc / Khách hàng / Nhóm */
.tabs { display: flex; gap: 4px; padding: 0 12px 12px; }
.tab-btn { background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.tab-btn:hover { background: #f6f9fe; color: var(--text); }
.tab-btn.active { background: #e6f1ff; color: var(--blue); }

.stats-card .stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.stats-card .stat-row:last-child { border-bottom: 0; }
.stats-card .stat-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.stats-card .stat-value { font-weight: 700; }