/* v9.4 – Hàng chưa đọc / chưa trả lời nổi bật hơn hàng đã xem */
.app.v9 .conv.need-reply { background: color-mix(in srgb, var(--accent) 7%, #fff); }
.app.v9 .conv.unread { background: color-mix(in srgb, var(--accent) 13%, #fff); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 18%, transparent); }
.app.v9 .conv.unread .name, .app.v9 .conv.unread .snippet { font-weight: 700; color: var(--text); opacity: 1; }
.app.v9 .conv.need-reply:not(.unread) .snippet { color: var(--text); opacity: 1; font-weight: 600; }
.app.v9 .conv:hover { filter: brightness(.97); }
.app.v9 .conv.active { background: color-mix(in srgb, var(--accent) 20%, #fff) !important; }
@media (prefers-color-scheme: dark) {
  .app.v9 .conv.need-reply { background: color-mix(in srgb, var(--accent) 10%, #242526); }
  .app.v9 .conv.unread { background: color-mix(in srgb, var(--accent) 20%, #242526); }
  .app.v9 .conv.active { background: color-mix(in srgb, var(--accent) 30%, #242526) !important; }
}

/* v9.5 – Cột lọc trái rộng hơn, hiện chữ luôn */
@media (min-width: 761px) {
  .app.v9 .rail { width: 156px !important; align-items: stretch; padding: 10px 8px !important; gap: 4px !important; }
  .app.v9 .rail .frail-btn { width: 100% !important; height: 44px !important; display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 10px; }
  .app.v9 .rail .frail-btn svg { flex: 0 0 22px; width: 22px !important; height: 22px !important; }
  .app.v9 .rail .frail-btn .fl { font-size: 14.5px; font-weight: 600; white-space: nowrap; color: inherit; }
  .app.v9 .rail .frail-btn::after { display: none !important; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .app.v9 .rail { width: 128px !important; }
  .app.v9 .rail .frail-btn { gap: 8px; padding: 0 8px; }
  .app.v9 .rail .frail-btn .fl { font-size: 13px; }
}