/* ============================================================
   CHATWOOT — TEMA "PULITO + CANALI A COLORI" (1 + 5)
   ------------------------------------------------------------
   Unisce la proposta 1 (chiaro, arioso, avatar grandi) e la 5
   (riconoscimento del canale a colpo d'occhio): ogni canale ha
   un COLORE che tinge sia il bordo sinistro sia l'anello attorno
   all'avatar. Niente intestazioni di gruppo (la lista di Chatwoot
   è "virtualizzata" e non le supporta via CSS) — ma il colore per
   canale dà lo stesso beneficio di scansione immediata.

   Si inietta dal reverse proxy (GUIDA-INSTALLAZIONE.md) o si prova
   incollando PROVA-SUBITO.txt nella Console. Reversibile e a prova
   di aggiornamento. Selettori verificati sui sorgenti v4.15.1.
   ============================================================ */


/* ============================================================
   0) COLORE DI OGNI CANALE  (--ch)
   ------------------------------------------------------------
   Definito una volta qui e riusato per bordo + anello avatar.
   I prefissi seguono l'inizio del nome dell'inbox in Chatwoot:
   se rinomini un'inbox, aggiorna la riga corrispondente.
   ============================================================ */

.conversation:has(div[title^="A/"])     { --ch:#25d366; } /* WhatsApp OdM       */
.conversation:has(div[title^="B/"])     { --ch:#8b5cf6; } /* Chat RicambiStufe  */
.conversation:has(div[title^="C/"])     { --ch:#06b6d4; } /* Chat Termobrico    */
.conversation:has(div[title^="D/"])     { --ch:#ec4899; } /* Chat LoComproio    */
.conversation:has(div[title^="Email1"]) { --ch:#3b82f6; } /* Email · Officine   */
.conversation:has(div[title^="Email2"]) { --ch:#f59e0b; } /* Email · Ricambi    */
.conversation:has(div[title^="Email3"]) { --ch:#ef4444; } /* Email · Termobrico */
.conversation:has(div[title^="Email4"]) { --ch:#14b8a6; } /* Email · LoComproio */

/* fallback per tipo di canale, se un'inbox non è elencata sopra */
.conversation:has([class*="i-woot-whatsapp"]) { --ch:#25d366; }
.conversation:has([class*="i-woot-mail"]),
.conversation:has([class*="i-woot-gmail"])    { --ch:#64748b; }
.conversation:has([class*="i-woot-website"])  { --ch:#94a3b8; }


/* ============================================================
   1) AVATAR — grandi, rotondi, con ANELLO del colore canale
   ============================================================ */

.conversation span[class*="group/avatar"],
.conversation span[role="img"] {
  width: 44px !important;
  height: 44px !important;
}

.conversation span[role="img"] {
  border-radius: 9999px !important;
  box-shadow: 0 0 0 2px var(--ch, var(--active-ch, #cbd5e1)) !important;  /* anello canale */
}

.conversation span[role="img"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


/* ============================================================
   2) BORDO SINISTRO del colore canale
   ============================================================ */

.conversation {
  border-left: 3px solid var(--ch, var(--active-ch, transparent)) !important;
}


/* ============================================================
   3) CARD A 2 RIGHE — via la riga grigia dell'inbox
   ============================================================ */

.conversation .border-line > div:has(> div[title]) {
  display: none !important;
}
.conversation .mt-8 {
  margin-top: 0.875rem !important;
}
.conversation .border-line > div.absolute {
  top: 0.75rem !important;
}


/* ============================================================
   4) TESTI — nome più grande, anteprima più tenue
   ============================================================ */

.conversation .conversation--user {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding-top: 1px;
}
.conversation .border-line > div.overflow-hidden.text-ellipsis,
.conversation .border-line > p {
  font-size: 13px !important;
  opacity: 0.82;
}


/* ============================================================
   5) BADGE "NON LETTI" — pillola blu tonda
   ============================================================ */

.conversation span.bg-n-teal-9 {
  background: #2f7fe0 !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: none !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
}


/* ============================================================
   6) SPAZIO E COLORI — arioso e morbido
   ============================================================ */

.conversation .border-line {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.conversation {
  border-bottom-color: rgba(100, 116, 139, 0.12) !important;
}

/* RIGA INTERA tinta con il colore del canale (chiaro e leggibile).
   Regola la percentuale per più/meno colore: 10% = tenue, 20% = deciso. */
.conversation {
  background: color-mix(in srgb, var(--ch, var(--active-ch, #ffffff)) 10%, #ffffff) !important;
}
.conversation:hover {
  background: color-mix(in srgb, var(--ch, var(--active-ch, #ffffff)) 18%, #ffffff) !important;
}
.conversation.active,
.conversation.selected {
  background: color-mix(in srgb, var(--ch, var(--active-ch, #ffffff)) 26%, #ffffff) !important;
}


/* ============================================================
   7) SIDEBAR — "Canali" in cima (accesso immediato)
   ============================================================ */

li[class*="sidebar-section"]:has([class*="i-lucide-mailbox"]) {
  order: -1 !important;
}

/* --- OPZIONALE: nascondi voci/filtri poco usati ---
li:has(> a [class*="i-lucide-at-sign"]),
li:has(> a [class*="i-lucide-user-round-check"]),
li:has(> a [class*="i-lucide-clock-alert"]) { display: none !important; }

a[href*="/campaigns"] { display: none !important; }
a[href*="/portals"]   { display: none !important; }
a[href*="/captain"]   { display: none !important; }
--------------------------------------------------- */


/* ============================================================
   8) "LA MIA INBOX" — nascondere o spostare (OPZIONALE)
   ------------------------------------------------------------
   È la casella delle notifiche personali (menzioni, assegnate).
   Scegli UNA delle due opzioni togliendo il commento.
   ============================================================ */

/* (B) ATTIVA — "La mia Inbox" spostata in fondo alla barra */
li:has(a[href*="/inbox-view"]) { order: 99 !important; }

/* (A) ALTERNATIVA — per NASCONDERLA del tutto, commenta la riga (B)
   qui sopra e togli il commento a questa:
li:has(a[href*="/inbox-view"]) { display: none !important; }
*/