/* ═══════════════════════════════════════════════════════════════════════
   CHANNEL REDESIGN v3 — replica 1:1 del mockup "1motor" per la vista EMAIL.
   Cosa cambia rispetto alla v2:
     • header contatti: freccia "indietro" senza box, bottoni quadrati 38px,
       matita viola piena
     • righe contatto: altezza BLOCCATA a 64px (= itemHeight del
       VirtualScroller, così non si sovrappongono oltre i 50 contatti)
     • nuovi stati vuoti a classi (.email-empty*) invece dei selettori
       fragili basati su style inline
     • pillola "Carica altri contatti", tab cartelle a pillola, scrollbar
   NOTA: pensato per il tema chiaro. In dark mode restano validi gli
   override di email.css ([data-theme="dark"] ...), che hanno la stessa o
   maggiore priorità solo dove dichiarato: vedi ultimo blocco.
   ═══════════════════════════════════════════════════════════════════════ */

#main-content.page-email {
  --cr-primary: #6C5CE7;
  --cr-primary-dark: #5a4bd4;
  --cr-soft: #EFEDFD;
  --cr-softer: #F7F6FE;
  --cr-text: #1e2235;
  --cr-muted: #8b90a3;
  --cr-border: #ECEDF5;
  --cr-field: #F4F4F9;
  background: #fff;
}

/* ── Griglia: proporzioni del mockup (contatti larghi, dettagli larghi) ── */
#main-content.page-email .email-view-3col {
  background: #fff;
  grid-template-columns: minmax(320px, 4.5fr) 3.2fr 5fr;
  box-shadow: none;
  border-radius: 0;
}
#main-content.page-email .email-contacts-column,
#main-content.page-email .email-threads-column,
#main-content.page-email .email-details-column {
  background: #fff;
  border-color: var(--cr-border) !important;
}

/* ═════════ COLONNA 1 — CONTATTI ═════════ */

/* Testata: alta, bianca, titolo bold + fila di bottoni a destra */
#main-content.page-email .email-contacts-header {
  background: #fff;
  border-bottom: 1px solid var(--cr-border);
  min-height: 64px;
  padding: 0.7rem 0.9rem !important;
  gap: 0.45rem !important;
}
#main-content.page-email .email-contacts-header h3 {
  color: var(--cr-text);
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em;
}
#main-content.page-email .email-contacts-header h3 i {
  color: var(--cr-text);
  font-size: 0.95rem;
}

/* Freccia indietro: nel mockup è nuda, senza cornice */
#main-content.page-email .email-contacts-header .email-back-btn {
  width: 32px; height: 32px; min-width: 32px;
  border: none !important;
  background: transparent !important;
  color: #5b6070 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#main-content.page-email .email-contacts-header .email-back-btn:hover {
  background: var(--cr-softer) !important;
  color: var(--cr-primary) !important;
  transform: none;
}

/* Bottoni testata (config / cartelle / programmate / bozze):
   quadrati 38px, bordo grigio-lavanda, icona grigia */
#main-content.page-email .email-contacts-header .btn {
  width: 38px; height: 38px; min-width: 38px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cr-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #5b6070 !important;
  font-size: 0.85rem !important;
  box-shadow: none !important;
  transition: all .15s;
}
#main-content.page-email .email-contacts-header .btn:hover {
  border-color: var(--cr-primary) !important;
  color: var(--cr-primary) !important;
  background: var(--cr-softer) !important;
}

/* La MATITA (nuovo messaggio) è il bottone viola pieno */
#main-content.page-email #email-compose-btn-tl {
  background: var(--cr-primary) !important;
  border-color: var(--cr-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(108, 92, 231, .30) !important;
}
#main-content.page-email #email-compose-btn-tl:hover {
  background: var(--cr-primary-dark) !important;
  color: #fff !important;
}

/* Badge sui bottoni testata: tondi, viola/rosso, staccati dal bordo */
#main-content.page-email #email-scheduled-badge,
#main-content.page-email #email-drafts-badge {
  top: -6px !important; right: -6px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* — Icone: allineamento estetico al mockup (sliders / tre puntini).
     Puramente decorativo: rimuovi questo blocco per tornare alle
     icone originali (ingranaggio / documento / aggiorna). — */
#main-content.page-email #email-config-btn i::before  { content: "\f1de"; } /* sliders-h */
#main-content.page-email #email-drafts-btn i::before  { content: "\f142"; } /* ellipsis-v */
#main-content.page-email #email-refresh-btn i::before { content: "\f021"; } /* sliders-h */

/* Riga ricerca: campo a pillola grigia + bottone quadrato a destra */
#main-content.page-email .email-contacts-search {
  padding: 0.65rem 0.9rem 0.8rem !important;
  background: #fff;
  border-bottom: 1px solid var(--cr-border);
  gap: 0.5rem;
}
#main-content.page-email .email-contacts-search input {
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  background: var(--cr-field) !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--cr-text) !important;
  box-shadow: none !important;
  height: 42px;
}
#main-content.page-email .email-contacts-search input::placeholder {
  color: #a0a4b8 !important;
  font-size: 0.875rem;
}
#main-content.page-email .email-contacts-search input:focus {
  border-color: var(--cr-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .12) !important;
  background: #fff !important;
}
#main-content.page-email .email-contacts-search .btn {
  width: 42px; height: 42px; min-width: 42px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--cr-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #5b6070 !important;
  box-shadow: none !important;
}
#main-content.page-email .email-contacts-search .btn:hover {
  border-color: var(--cr-primary) !important;
  color: var(--cr-primary) !important;
}

/* — RIGHE CONTATTO —
   ATTENZIONE: l'altezza resta 64px perché è il valore usato da
   VirtualScroller({ itemHeight: 64 }) in renderContactsWithVirtualScroll.
   Cambiandola qui le righe si sovrappongono con più di 50 contatti. */
#main-content.page-email .email-contacts-list {
  padding: 6px 0 !important;
}
#main-content.page-email .email-contact-item {
  height: 64px !important;
  box-sizing: border-box;
  margin: 0 8px;
  padding: 0 12px !important;
  border-bottom: none !important;
  border-radius: 14px;
  transition: background .15s;
}
#main-content.page-email .email-contact-item:hover  { background: var(--cr-softer) !important; }
#main-content.page-email .email-contact-item.active { background: var(--cr-soft) !important; }

#main-content.page-email .email-contact-avatar {
  width: 42px !important; height: 42px !important;
  background: var(--cr-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}
#main-content.page-email .email-contact-item.active .email-contact-avatar {
  background: var(--cr-primary) !important;
  color: #fff !important;
}
#main-content.page-email .email-contact-name {
  color: var(--cr-text) !important;
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  margin-bottom: 2px !important;
}
#main-content.page-email .email-contact-email {
  color: var(--cr-muted) !important;
  font-size: 0.8rem !important;
}
#main-content.page-email .email-contact-item.active .email-contact-name  { color: var(--cr-text) !important; }
#main-content.page-email .email-contact-item.active .email-contact-email { color: var(--cr-muted) !important; }

/* Colonna meta a destra: orario sopra, badge viola sotto */
#main-content.page-email .email-contact-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 5px;
  margin-left: auto; flex-shrink: 0;
  min-width: 44px;
}
#main-content.page-email .email-contact-time {
  font-size: 0.75rem; color: var(--cr-muted); white-space: nowrap;
}
#main-content.page-email .email-contact-unread {
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--cr-primary); color: #fff;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Chip "Bozza" ambra accanto al nome */
#main-content.page-email .email-contact-name span[style*="fef3c7"] {
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 0.62rem !important;
  vertical-align: middle;
}

/* Iconcine rubrica / condiviso: discrete, fuori dal flusso del testo */
#main-content.page-email .contact-book-icon   { bottom: 4px !important; right: 10px !important; font-size: 0.6rem !important; opacity: .8; }
#main-content.page-email .contact-shared-icon { top: 4px !important;    right: 10px !important; font-size: 0.6rem !important; }

/* "Carica altri contatti (N rimanenti)": pillola larga chiara */
#main-content.page-email .email-load-more-btn {
  display: block;
  width: calc(100% - 16px) !important;
  margin: 8px 8px 12px !important;
  padding: 0.8rem !important;
  border: 1px solid var(--cr-border) !important;
  border-top: 1px solid var(--cr-border) !important;
  border-radius: 12px !important;
  background: #F6F6FA !important;
  color: #5b6070 !important;
  font-size: 0.85rem !important;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
#main-content.page-email .email-load-more-btn:hover {
  background: var(--cr-soft) !important;
  color: var(--cr-primary) !important;
  border-color: var(--cr-soft) !important;
}

/* ═════════ COLONNE 2 e 3 — TESTATE ═════════ */
#main-content.page-email .email-threads-header,
#main-content.page-email .email-details-header {
  background: #fff;
  border-bottom: 1px solid var(--cr-border);
  min-height: 64px;
  padding: 0.9rem 1.25rem !important;
}
#main-content.page-email .email-threads-header h3,
#main-content.page-email .email-details-header h3 {
  color: var(--cr-text);
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 0 0 2px 0 !important;
}
#main-content.page-email .email-threads-header p {
  color: var(--cr-muted);
  font-size: 0.82rem;
  margin: 0;
}

/* Righe conversazione: card arrotondate, niente bordi netti */
#main-content.page-email .email-thread-channel {
  border-radius: 14px;
  margin: 3px 8px;
  border: none !important;
  transition: background .15s;
}
#main-content.page-email .email-thread-channel:hover  { background: var(--cr-softer) !important; }
#main-content.page-email .email-thread-channel.active {
  background: var(--cr-soft) !important;
  /* sfondo chiaro => testo SCURO. Il markup JS metteva inline color:white (pensato per lo
     sfondo indigo, che questa regola sovrascrive): testo bianco su lilla illeggibile. */
  color: var(--cr-text, #1f2937) !important;
  box-shadow: inset 3px 0 0 #7c3aed;
}
#main-content.page-email .email-thread-channel.active:hover { background: var(--cr-soft) !important; }
#main-content.page-email .email-thread-channel.active .fa-envelope { color: #6d28d9 !important; }

/* Tab cartelle a pillola */
#main-content.page-email .email-folder-tabs button {
  border-radius: 999px !important;
  border: 1px solid var(--cr-border) !important;
  background: #fff !important;
  color: #5b6070 !important;
}
#main-content.page-email .email-folder-tabs button.active {
  background: var(--cr-primary) !important;
  border-color: var(--cr-primary) !important;
  color: #fff !important;
}

/* ═════════ STATI VUOTI (nuove classi, vedi patch email.js) ═════════ */
.email-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  padding: 2.5rem 2rem;
  text-align: center;
}
.email-empty-icon-circle {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--cr-soft, #EFEDFD);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.email-empty-icon-circle i {
  font-size: 2.3rem;
  color: var(--cr-primary, #6C5CE7);
}
.email-empty-glyph {
  font-size: 2.7rem;
  color: #c9ccdd;
  margin-bottom: 1.1rem;
}
.email-empty-title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cr-text, #1e2235);
}
.email-empty-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cr-muted, #8b90a3);
}
.email-empty .email-compose-menu {
  margin-top: 1.75rem;
}

/* Bottone "Nuovo Messaggio" viola pieno */
#main-content.page-email .email-action-btn.primary,
#main-content.page-email #email-compose-btn {
  background: var(--cr-primary) !important;
  border-color: var(--cr-primary) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.8rem 1.6rem !important;
  font-size: 0.95rem !important;
  box-shadow: 0 6px 18px rgba(108, 92, 231, .28) !important;
}
#main-content.page-email .email-action-btn.primary:hover,
#main-content.page-email #email-compose-btn:hover {
  background: var(--cr-primary-dark) !important;
  transform: translateY(-1px);
}

/* ═════════ SCROLLBAR SOTTILI ═════════ */
#main-content.page-email .email-contacts-list::-webkit-scrollbar,
#main-content.page-email .email-threads-list::-webkit-scrollbar,
#main-content.page-email .email-details-body::-webkit-scrollbar { width: 6px; }
#main-content.page-email .email-contacts-list::-webkit-scrollbar-thumb,
#main-content.page-email .email-threads-list::-webkit-scrollbar-thumb,
#main-content.page-email .email-details-body::-webkit-scrollbar-thumb {
  background: #dcdef0; border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RAIL LATERALE SCURO: colonna sottile solo-icone, logo in alto, voce
   attiva su mattonella indaco. Attiva nelle viste CANALE.
   ═══════════════════════════════════════════════════════════════════════ */
body:has(#main-content:is(.page-email, .page-channels)),
body:has(#main-content.page-chat),
body:has(#main-content.page-internal-chat) {
  --quick-sidebar-width: 80px;
}
body:has(#main-content:is(.page-email, .page-channels)) #quick-sidebar-menu.always-visible,
body:has(#main-content.page-chat) #quick-sidebar-menu.always-visible,
body:has(#main-content.page-internal-chat) #quick-sidebar-menu.always-visible {
  width: 80px !important;
  background: #17172E !important;
  border-right: none !important;
  box-shadow: none !important;
}
/* niente espansione all'hover: resta sottile, le etichette restano nascoste */
body:has(#main-content:is(.page-email, .page-channels)) #quick-sidebar-menu.always-visible:hover,
body:has(#main-content.page-chat) #quick-sidebar-menu.always-visible:hover,
body:has(#main-content.page-internal-chat) #quick-sidebar-menu.always-visible:hover {
  width: 80px !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-header,
body:has(#main-content.page-chat) .quick-sidebar-header,
body:has(#main-content.page-internal-chat) .quick-sidebar-header {
  justify-content: center !important;
  padding: 16px 0 10px !important;
  border-bottom: none !important;
  background: transparent !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-header .wd-sticky-nav-title,
body:has(#main-content.page-chat) .quick-sidebar-header .wd-sticky-nav-title,
body:has(#main-content.page-internal-chat) .quick-sidebar-header .wd-sticky-nav-title,
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-header .sidebar-close-btn,
body:has(#main-content.page-chat) .quick-sidebar-header .sidebar-close-btn,
body:has(#main-content.page-internal-chat) .quick-sidebar-header .sidebar-close-btn {
  display: none !important;
}
/* logo Chatlify tondo al posto dell'icona hamburger */
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-menu-icon,
body:has(#main-content.page-chat) .quick-sidebar-menu-icon,
body:has(#main-content.page-internal-chat) .quick-sidebar-menu-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: grid !important;
  place-items: center;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-menu-icon i,
body:has(#main-content.page-chat) .quick-sidebar-menu-icon i,
body:has(#main-content.page-internal-chat) .quick-sidebar-menu-icon i {
  display: none !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-menu-icon img,
body:has(#main-content.page-chat) .quick-sidebar-menu-icon img,
body:has(#main-content.page-internal-chat) .quick-sidebar-menu-icon img {
  display: block;
  width: 42px;
  height: 42px;
}
/* voci: mattonelle 46px centrate, solo icona */
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-nav,
body:has(#main-content.page-chat) .quick-sidebar-nav,
body:has(#main-content.page-internal-chat) .quick-sidebar-nav {
  display: flex !important; flex-direction: column; align-items: center;
  gap: 6px; padding: 30px 0 10px !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item,
body:has(#main-content.page-chat) .quick-sidebar-item,
body:has(#main-content.page-internal-chat) .quick-sidebar-item {
  width: 46px !important; height: 46px !important;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 14px !important;
  color: #8F93B8 !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item span,
body:has(#main-content.page-chat) .quick-sidebar-item span,
body:has(#main-content.page-internal-chat) .quick-sidebar-item span {
  display: none !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item i,
body:has(#main-content.page-chat) .quick-sidebar-item i,
body:has(#main-content.page-internal-chat) .quick-sidebar-item i {
  font-size: 1.05rem !important; margin: 0 !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item:hover,
body:has(#main-content.page-chat) .quick-sidebar-item:hover,
body:has(#main-content.page-internal-chat) .quick-sidebar-item:hover {
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item.active,
body:has(#main-content.page-chat) .quick-sidebar-item.active,
body:has(#main-content.page-internal-chat) .quick-sidebar-item.active {
  background: #6C5CE7 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(108, 92, 231, .35);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP BAR + FONT + PROFILO RAIL
   ═══════════════════════════════════════════════════════════════════════ */

/* Font della skin: Montserrat self-hosted (definito qui per essere immune
   dalla cache di index.html) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-var.woff2?v=20260805') format('woff2');
}
body:has(#main-content:is(.page-email, .page-channels)) .top-nav :not(i):not(svg),
body:has(#main-content:is(.page-email, .page-channels)) #quick-sidebar-menu :not(i):not(svg),
#main-content.page-email :not(i):not(svg):not(code):not(pre) {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── TOP BAR: fondo grigio-lavanda piatto, selettori a pillola bianca ── */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav,
body:has(#main-content.page-chat) .top-nav,
body:has(#main-content.page-internal-chat) .top-nav {
  background: #F8F8FC !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding-left: 96px !important; /* la top bar parte DOPO la rail (80px) */
}
/* niente logo nella top bar: nel mockup il logo vive nella rail */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .logo-img,
body:has(#main-content.page-chat) .top-nav .logo-img,
body:has(#main-content.page-internal-chat) .top-nav .logo-img {
  display: none !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .top-nav #mobile-menu-toggle,
body:has(#main-content.page-chat) .top-nav #mobile-menu-toggle,
body:has(#main-content.page-internal-chat) .top-nav #mobile-menu-toggle {
  display: none !important;
}
/* pillole workspace + canale */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .btn-secondary,
body:has(#main-content.page-chat) .top-nav .btn-secondary,
body:has(#main-content.page-internal-chat) .top-nav .btn-secondary {
  background: #fff !important;
  border: 1px solid #ECEDF5 !important;
  border-radius: 12px !important;
  padding: 9px 15px !important;
  color: #1e2235 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  box-shadow: none !important;
}
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .btn-secondary:hover,
body:has(#main-content.page-chat) .top-nav .btn-secondary:hover,
body:has(#main-content.page-internal-chat) .top-nav .btn-secondary:hover {
  border-color: #6C5CE7 !important;
}
/* cerca globale a pillola grigia */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .search-input,
body:has(#main-content.page-chat) .top-nav .search-input,
body:has(#main-content.page-internal-chat) .top-nav .search-input {
  background: #EFEFF6 !important;
  border: none !important;
  border-radius: 12px !important;
  height: 40px !important;
  box-shadow: none !important;
}
/* campanella: badge viola */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .notification-badge,
body:has(#main-content.page-chat) .top-nav .notification-badge,
body:has(#main-content.page-internal-chat) .top-nav .notification-badge {
  background: #6C5CE7 !important;
}
/* avatar utente viola pieno */
body:has(#main-content:is(.page-email, .page-channels)) .top-nav .user-avatar,
body:has(#main-content.page-chat) .top-nav .user-avatar,
body:has(#main-content.page-internal-chat) .top-nav .user-avatar {
  background: #6C5CE7 !important;
  color: #fff !important;
  border-radius: 50% !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ── RAIL: come il mockup — niente Dashboard, profilo in basso ── */
body:has(#main-content:is(.page-email, .page-channels)) .quick-sidebar-item[data-view="dashboard"],
body:has(#main-content.page-chat) .quick-sidebar-item[data-view="dashboard"],
body:has(#main-content.page-internal-chat) .quick-sidebar-item[data-view="dashboard"] {
  display: none !important;
}
#quick-sidebar-profile { display: none; }
body:has(#main-content:is(.page-email, .page-channels)) #quick-sidebar-profile,
body:has(#main-content.page-chat) #quick-sidebar-profile,
body:has(#main-content.page-internal-chat) #quick-sidebar-profile {
  display: flex;
  position: relative;
  width: 40px; height: 40px;
  margin: auto auto 16px;
  border-radius: 50%;
  background: #6C5CE7;
  color: #fff;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}
body:has(#main-content:is(.page-email, .page-channels)) #quick-sidebar-profile .qs-status-dot,
body:has(#main-content.page-chat) #quick-sidebar-profile .qs-status-dot,
body:has(#main-content.page-internal-chat) #quick-sidebar-profile .qs-status-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #17172E;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — la skin è chiara: qui si ripristinano i fondi scuri per non
   avere colonne bianche su tema scuro.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #main-content.page-email,
[data-theme="dark"] #main-content.page-email .email-view-3col,
[data-theme="dark"] #main-content.page-email .email-contacts-column,
[data-theme="dark"] #main-content.page-email .email-threads-column,
[data-theme="dark"] #main-content.page-email .email-details-column,
[data-theme="dark"] #main-content.page-email .email-contacts-header,
[data-theme="dark"] #main-content.page-email .email-contacts-search,
[data-theme="dark"] #main-content.page-email .email-threads-header,
[data-theme="dark"] #main-content.page-email .email-details-header {
  background: var(--card-bg, #1f2937) !important;
  border-color: var(--border-color, #374151) !important;
}
[data-theme="dark"] #main-content.page-email .email-contacts-header h3,
[data-theme="dark"] #main-content.page-email .email-threads-header h3,
[data-theme="dark"] #main-content.page-email .email-details-header h3,
[data-theme="dark"] #main-content.page-email .email-contact-name,
[data-theme="dark"] .email-empty-title {
  color: var(--text-primary, #f9fafb) !important;
}
[data-theme="dark"] #main-content.page-email .email-contacts-search input {
  background: var(--bg-secondary, #111827) !important;
  color: var(--text-primary, #f9fafb) !important;
}
[data-theme="dark"] #main-content.page-email .email-contact-item:hover {
  background: rgba(108, 92, 231, .12) !important;
}
[data-theme="dark"] #main-content.page-email .email-contact-item.active {
  background: rgba(108, 92, 231, .22) !important;
}
[data-theme="dark"] #main-content.page-email .email-load-more-btn {
  background: var(--bg-secondary, #111827) !important;
  color: var(--text-secondary, #9ca3af) !important;
  border-color: var(--border-color, #374151) !important;
}
[data-theme="dark"] .email-empty-icon-circle {
  background: rgba(108, 92, 231, .18);
}
[data-theme="dark"] #main-content.page-email .email-contacts-header .btn {
  background: var(--card-bg, #1f2937) !important;
  border-color: var(--border-color, #374151) !important;
  color: var(--text-secondary, #9ca3af) !important;
}
[data-theme="dark"] #main-content.page-email #email-compose-btn-tl {
  background: #6C5CE7 !important;
  color: #fff !important;
}
/* "..." sotto il profilo nella rail (come il mockup): apre il menu utente */
#qs-more-dots { display: none; }
body:has(#main-content:is(.page-email, .page-channels)) #qs-more-dots,
body:has(#main-content.page-chat) #qs-more-dots,
body:has(#main-content.page-internal-chat) #qs-more-dots {
  display: flex;
  align-items: center; justify-content: center;
  width: 34px; height: 24px;
  margin: 0 auto 14px;
  color: #8F93B8;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.9rem;
}
body:has(#main-content:is(.page-email, .page-channels)) #qs-more-dots:hover,
body:has(#main-content.page-chat) #qs-more-dots:hover,
body:has(#main-content.page-internal-chat) #qs-more-dots:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Final Email geometry. NB: la navigazione visibile è la .sidebar principale
   trasformata in rail (blocco "One navigation structure" più sotto); la
   quick-sidebar resta nascosta su desktop — niente doppia struttura. */
body:has(#main-content.page-email) {
  --quick-sidebar-width: 74px;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav {
  height: 74px !important;
  margin: 0 !important;
  padding-left: 96px !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav-breadcrumb {
  display: none !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) #main-content.fullscreen {
  top: 74px !important;
  left: 74px !important;
  width: calc(100vw - 74px) !important;
  height: calc(100vh - 74px) !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) #main-content.page-email .email-view-3col {
  grid-template-columns: minmax(420px, 34%) minmax(320px, 24%) minmax(0, 1fr) !important;
}

/* Email top bar: fixed, compact controls as in the channel workspace layout. */
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav {
  height: 74px !important;
  min-height: 74px;
  padding: 0 18px 0 96px !important;
  background: #fbfbfd !important;
  border: 0 !important;
  border-bottom: 1px solid #ececf3 !important;
  box-shadow: none !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .nav-left,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .selectors-container,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .nav-right {
  display: flex;
  align-items: center;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .nav-left {
  gap: 0;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .selectors-container { gap: 10px; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .top-nav-breadcrumb,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .logo-img,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #mobile-menu-toggle { display: none !important; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #workspace-dropdown-btn,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #channel-dropdown-btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ececf3 !important;
  border-radius: 9px !important;
  color: #34394b !important;
  background: #f5f5f8 !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
/* Larghezza adattiva: il nome si legge per intero (ellissi solo oltre il max) */
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #workspace-dropdown-btn { width: auto; min-width: 112px; max-width: 230px; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #channel-dropdown-btn { width: auto; min-width: 96px; max-width: 210px; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #workspace-dropdown-btn span,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #channel-dropdown-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #workspace-dropdown-btn > i:first-child,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #channel-dropdown-btn > i:first-child { color: #273044; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #workspace-dropdown-btn > i:last-child,
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav #channel-dropdown-btn > i:last-child { margin-left: auto; color: #7f8495; font-size: .62rem; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .nav-right { gap: 12px; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .global-search { width: 232px; height: 40px; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .global-search .search-input {
  height: 40px !important;
  padding-left: 33px;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f0f0f6 !important;
  font-size: .73rem;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .global-search .search-icon { left: 11px; color: #687084; }
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #e9eaf0;
  border-radius: 50%;
  color: #596175;
  background: #fff;
  box-shadow: none;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .user-avatar {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #6244e8 !important;
  font-size: .72rem;
  box-shadow: none;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav .notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fbfbfd;
  border-radius: 999px;
  background: #6244e8 !important;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

/* Notifications control: compact outlined bell with an attached violet counter. */
body:has(#main-content:is(.page-email, .page-channels, .page-chat, .page-internal-chat)) #notifications-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  border: 1px solid #e8e9ef !important;
  border-radius: 50% !important;
  color: #72798b !important;
  background: #fff !important;
  box-shadow: none !important;
}
body:has(#main-content:is(.page-email, .page-channels, .page-chat, .page-internal-chat)) #notifications-btn > i {
  font-size: .83rem;
  line-height: 1;
}
body:has(#main-content:is(.page-email, .page-channels, .page-chat, .page-internal-chat)) #notifications-btn .notification-badge {
  position: absolute !important;
  top: -7px !important;
  right: -8px !important;
  z-index: 2;
  display: grid !important;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  border: 2px solid #fbfbfd;
  border-radius: 999px;
  color: #fff;
  background: #6347e8 !important;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

/* The Channels management page uses the full desktop sidebar, not the 80px rail. */
body:has(#main-content.page-channels) .top-nav {
  height: 56px !important;
  width: calc(100% - 232px) !important;
  margin: 4px 4px 0 228px !important;
  padding-left: 18px !important;
  background: #fff !important;
  border-bottom: 1px solid #ededf4 !important;
  transition: none !important;
}
body:has(#main-content.page-channels) .top-nav .nav-left {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body:has(#main-content.page-channels) .top-nav #workspace-dropdown-btn {
  height: 31px;
  padding: 0 10px;
  border: 0 !important;
  border-radius: 5px !important;
  background: #f6f6f9 !important;
  font-size: .75rem !important;
  max-width: 230px;
}
body:has(#main-content.page-channels) .app-container {
  margin: 0 4px 4px 228px !important;
  transition: none !important;
}

/* One navigation structure: use the main sidebar in every view. */
@media (min-width: 769px) {
  #quick-sidebar-menu,
  #quick-sidebar-overlay {
    display: none !important;
  }

  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    border: 0;
    border-radius: 0;
    background: #17172e;
    box-shadow: none;
    overflow: hidden;
    /* sopra #main-content.fullscreen (z 1000): senza, l espansione hover resta nascosta dietro il contenuto */
    z-index: 1200;
    transition: width .16s ease .06s, box-shadow .16s ease .06s;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) {
    width: 74px;
  }
  /* hover = si riapre il menu full (in overlay, il contenuto non si sposta) */
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:hover {
    width: 220px;
    box-shadow: 14px 0 38px rgba(8, 8, 34, .42);
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:hover .nav-item span,
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:hover .app-sidebar-workspace span { white-space: nowrap; }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-brand {
    height: 74px;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-brand .brand-logo-full {
    display: none;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-brand .brand-logo-mini {
    display: block;
    width: 34px;
    height: 38px;
    object-fit: contain;
    object-position: center;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-workspace {
    width: 50px;
    height: 44px;
    min-height: 44px;
    margin: 10px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #262b49;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-workspace span,
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-workspace > i:last-child {
    display: none;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-workspace > i:first-child {
    font-size: .95rem;
    color: #bec4dc;
  }
  /* Footer nella rail: avatar con stato online + tre puntini (come nel mockup) */
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-upgrade {
    display: none !important;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-profile {
    width: auto;
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-profile > span:nth-child(2) {
    display: none;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-profile > span:first-child {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: .74rem;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-profile > span:first-child::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #17172e;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .app-sidebar-profile > i {
    margin: 0;
    transform: rotate(90deg);
    color: #aeb4d3;
    font-size: .8rem;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .sidebar-nav {
    padding: 18px 12px 28px;
    overflow: hidden;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .nav-item {
    width: 50px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    margin: 0 0 7px;
    border: 0;
    border-radius: 6px;
    color: #aeb4d3;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .nav-item span {
    display: none;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .nav-item i {
    width: auto;
    color: inherit;
    font-size: 1.05rem;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .sidebar:not(:hover) .nav-item.active {
    background: rgba(255,255,255,.13);
    color: #dfdaff;
    box-shadow: inset 3px 0 0 #7655ef;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .top-nav {
    width: calc(100% - 74px) !important;
    margin: 0 0 0 74px !important;
    padding: 0 18px !important;
  }
  body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) #main-content.fullscreen {
    left: 74px !important;
    width: calc(100vw - 74px) !important;
  }
}

/* Compact icon rail visual language. */
body:has(#main-content.page-email) #quick-sidebar-menu.always-visible {
  width: 80px !important;
  background: linear-gradient(180deg, #17172e 0%, #111225 100%) !important;
}
body:has(#main-content.page-email) .quick-sidebar-header {
  height: 92px;
  padding: 18px 0 12px !important;
}
body:has(#main-content.page-email) .quick-sidebar-menu-icon {
  width: 40px !important;
  height: 40px !important;
}
body:has(#main-content.page-email) .quick-sidebar-menu-icon img {
  width: 40px;
  height: 40px;
}
body:has(#main-content.page-email) .quick-sidebar-nav {
  gap: 9px;
  padding: 30px 0 14px !important;
}
body:has(#main-content.page-email) .quick-sidebar-item {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}
body:has(#main-content.page-email) .quick-sidebar-item i {
  color: #afb3ca !important;
  font-size: 1.05rem !important;
}
body:has(#main-content.page-email) .quick-sidebar-item.active {
  color: #ffffff !important;
  background: #39394d !important;
  box-shadow: inset 3px 0 0 #7653ed !important;
}
body:has(#main-content.page-email) .quick-sidebar-item.active i {
  color: #c9c4f7 !important;
}
body:has(#main-content.page-email) #quick-sidebar-profile {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  background: #e8e9f2;
  color: #282a3e;
}
body:has(#main-content.page-email) #qs-more-dots {
  margin-bottom: 18px;
}

/* Icon rail refinement: compact visual rhythm and a subtle active marker. */
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-nav {
  gap: 8px;
  padding: 30px 0 12px !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px;
  border-radius: 9px !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item i {
  color: #a8adc5 !important;
  font-size: 1rem !important;
  opacity: .92;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item:hover {
  background: rgba(255, 255, 255, .055) !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item.active {
  position: relative;
  color: #e6e3ff !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: none !important;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 10px;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: #7655ef;
}
body:has(#main-content:is(.page-email, .page-chat, .page-internal-chat)) .quick-sidebar-item.active i {
  color: #e0dcff !important;
  opacity: 1;
}

/* Stato vuoto "Dettagli messaggio" — variante template con sola icona:
   la busta gigante diventa il cerchio lavanda con busta viola del mockup */
#main-content.page-email .email-details-body i.fa-envelope[style*="4rem"] {
  color: #6C5CE7 !important;
  background: #EFEDFD;
  padding: 28px;
  border-radius: 50%;
  font-size: 2.3rem !important;
}

/* (rimosso il nascondi-.sidebar: l unificazione ufficiale usa la .sidebar
   principale come rail — vedi blocco "One navigation structure" sopra) */

/* ═══════════════════════════════════════════════════════════════════════
   SKIN CANALE: CHAT INTERNA — stessa lingua visiva della vista EMAIL
   (bianco, bordi #ECEDF5, accento #6C5CE7, righe a pillola).
   WhatsApp resta con la sua grafica verde nativa (scelta utente 17/08).
   Le nuvolette dei messaggi restano quelle native.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chat interna: colonna lista ── */
#main-content.page-internal-chat .int-side { background: #fff !important; border-right: 1px solid #ECEDF5 !important; }
#main-content.page-internal-chat .int-side-head { background: #fff !important; border-bottom: 1px solid #ECEDF5 !important; min-height: 64px; }
#main-content.page-internal-chat .int-logo { background: #6C5CE7 !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(108,92,231,.30); }
#main-content.page-internal-chat .int-head-btn { width: 38px !important; height: 38px !important; border: 1px solid #ECEDF5 !important; border-radius: 12px !important; background: #fff !important; color: #5b6070 !important; box-shadow: none !important; transition: all .15s; }
#main-content.page-internal-chat .int-head-btn:hover { border-color: #6C5CE7 !important; color: #6C5CE7 !important; background: #F7F6FE !important; }
#main-content.page-internal-chat .int-newbtn { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: #6C5CE7 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(108,92,231,.30) !important; }
#main-content.page-internal-chat .int-newbtn:hover { background: #5a4bd4 !important; }

#main-content.page-internal-chat .int-search { border: 1.5px solid transparent !important; border-radius: 12px !important; background: #F4F4F9 !important; color: #1e2235 !important; box-shadow: none !important; }
#main-content.page-internal-chat .int-search::placeholder { color: #a0a4b8 !important; }
#main-content.page-internal-chat .int-search:focus { border-color: #6C5CE7 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important; }

#main-content.page-internal-chat .int-filter-chip,
#main-content.page-internal-chat .int-folder-tab { border: 1px solid #ECEDF5 !important; border-radius: 999px !important; background: #fff !important; color: #5b6070 !important; font-weight: 600; }
#main-content.page-internal-chat .int-filter-chip:hover,
#main-content.page-internal-chat .int-folder-tab:hover { background: #F7F6FE !important; color: #6C5CE7 !important; }
#main-content.page-internal-chat .int-filter-chip.active,
#main-content.page-internal-chat .int-folder-tab.active { background: #EFEDFD !important; border-color: #EFEDFD !important; color: #6C5CE7 !important; }

#main-content.page-internal-chat .int-conv-row { margin: 0 8px; border-radius: 14px; border-left: none !important; transition: background .15s; }
#main-content.page-internal-chat .int-conv-row:hover { background: #F7F6FE !important; }
#main-content.page-internal-chat .int-conv-row.active,
#main-content.page-internal-chat .int-conv-row.selected { background: #EFEDFD !important; }
#main-content.page-internal-chat .int-avatar { background: #6C5CE7 !important; }
#main-content.page-internal-chat .int-conv-name { color: #1e2235 !important; }
#main-content.page-internal-chat .int-conv-time,
#main-content.page-internal-chat .int-conv-snip { color: #8b90a3 !important; }
#main-content.page-internal-chat .int-unread { background: #6C5CE7 !important; }
#main-content.page-internal-chat .int-chat-head { background: #fff !important; border-bottom: 1px solid #ECEDF5 !important; }
#main-content.page-internal-chat #int-conv-list::-webkit-scrollbar { width: 6px; }
#main-content.page-internal-chat #int-conv-list::-webkit-scrollbar-thumb { background: #E3E4EE; border-radius: 999px; }