/* ============================================================================
   WhatsApp Web theme for Chatwoot v4.11.1  (Med Assistance / chat.medassistance.fr)
   Injecte via nginx sub_filter dans la chaine Traefik (voir resume.md).
   Cible UNIQUEMENT la zone de conversation. Le reste = Chatwoot maquille.
   Selecteurs verifies sur l'instance reelle (build Vite dashboard-*.css/js) :
     .conversation-panel  = zone scroll des messages
     .left-bubble         = message entrant (patient)
     .right-bubble        = message sortant (conseillere)
     .message-bubble-container = wrapper de ligne
     .is-private / .reply-box.is-private = note privee (DOIT rester distincte)
     .reply-box           = composer
     .day-wrap            = separateur de date
   Regle: on force la palette claire WhatsApp dans la zone chat, meme en dark.
   ============================================================================ */

:root {
  --wa-chat-bg: #efeae2;
  --wa-out: #d9fdd3;   /* bulle sortante (conseillere) */
  --wa-out-dark: #d1f4cc;
  --wa-in: #ffffff;    /* bulle entrante (patient) */
  --wa-text: #111b21;
  --wa-meta: #667781;
  --wa-header: #f0f2f5;
  --wa-accent: #008069;
  --wa-note: #fff8c4;  /* note privee : jaune post-it, JAMAIS confondu avec msg */
  --wa-note-border: #f2d200;
  --wa-bubble-shadow: 0 1px .5px rgba(11,20,26,.13);
}

/* --- 1. Fond de la zone de conversation : beige + motif doodle WhatsApp ---- */
.conversation-panel {
  background-color: var(--wa-chat-bg) !important;
  /* motif doodle discret embarque en data-URI (evoque WhatsApp, ~5% opacite) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='9'/%3E%3Cpath d='M60 12h20v16H60z'/%3E%3Cpath d='M104 24l10-10 10 10-10 10z'/%3E%3Cpath d='M14 70q10-14 22 0t22 0'/%3E%3Ccircle cx='100' cy='72' r='7'/%3E%3Cpath d='M120 60h14v14h-14z'/%3E%3Cpath d='M30 112l8-8 8 8-8 8z'/%3E%3Cpath d='M70 104h22v20H70z'/%3E%3Ccircle cx='120' cy='114' r='8'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-attachment: local !important;
}

/* --- 2. Bulles ------------------------------------------------------------- */
/* Sortante = vert WhatsApp */
.message-bubble-container .right-bubble,
.right-bubble {
  background-color: var(--wa-out) !important;
  border-color: var(--wa-out) !important;
  box-shadow: var(--wa-bubble-shadow) !important;
  border-radius: 7.5px !important;
}
/* Entrante = blanc */
.message-bubble-container .left-bubble,
.left-bubble {
  background-color: var(--wa-in) !important;
  border-color: var(--wa-in) !important;
  box-shadow: var(--wa-bubble-shadow) !important;
  border-radius: 7.5px !important;
}
/* Coin "colle" du 1er d'un groupe (Chatwoot met un radius 2px) : on garde WA-like */
.group-with-next + .message-bubble-container .right-bubble,
.group-with-next + .message-bubble-container .left-bubble {
  border-top-left-radius: 7.5px !important;
  border-top-right-radius: 7.5px !important;
}

/* Texte lisible sur vert/blanc quel que soit le theme (force la palette claire) */
.right-bubble .prose-bubble,
.left-bubble .prose-bubble,
.right-bubble .prose-bubble :where(*),
.left-bubble .prose-bubble :where(*) {
  color: var(--wa-text) !important;
}
/* Liens dans bulle = bleu WhatsApp */
.right-bubble .prose-bubble :where(a),
.left-bubble .prose-bubble :where(a) {
  color: #027eb5 !important;
}
/* Meta (heure, statut) : gris WhatsApp */
.right-bubble .message-content--meta,
.left-bubble .message-content--meta,
.message-bubble-container [class*="meta"] {
  color: var(--wa-meta) !important;
}

/* --- 3. Note privee : reste un post-it jaune, JAMAIS un message ------------ */
/* (garde-fou critique : les conseilleres ne doivent pas confondre) */
.is-private .right-bubble,
.is-private .left-bubble,
.right-bubble.is-private,
.left-bubble.is-private,
.message-bubble-container.is-private .right-bubble,
.message-bubble-container.is-private .left-bubble {
  background-color: var(--wa-note) !important;
  border: 1px solid var(--wa-note-border) !important;
  box-shadow: none !important;
}
/* liseret gauche pour renforcer la distinction visuelle */
.message-bubble-container.is-private,
.is-private > .message-bubble-container {
  border-left: 3px solid var(--wa-note-border) !important;
}

/* --- 4. Separateur de date facon "pilule" WhatsApp ------------------------ */
.day-wrap > span,
.day-wrap span {
  background-color: #ffffff !important;
  color: #54656f !important;
  border-radius: 7.5px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
  padding: 5px 12px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* --- 5. Composer (reply-box) : ton WhatsApp, sans casser l'etat "note" ----- */
.reply-box:not(.is-private) {
  background-color: #f0f2f5 !important;
  border-radius: 8px !important;
}
/* NE PAS toucher .reply-box.is-private : Chatwoot le met deja en amber = OK */

/* --- 5b. Header de conversation : vert fonce WhatsApp ---------------------- */
/* Selecteur valide en live sur v4.11.1 : 1er enfant de .conversation-details-wrap
   = barre nom patient + actions (h-24 xl:h-12). */
.conversation-details-wrap > div:first-child {
  background-color: var(--wa-accent) !important;
}
.conversation-details-wrap > div:first-child span:not(button *),
.conversation-details-wrap > div:first-child .text-n-slate-12:not(button):not(button *),
.conversation-details-wrap > div:first-child .text-n-slate-11:not(button):not(button *) {
  color: #ffffff !important;
}
/* boutons du header (Resoudre, menus) : style "ghost" lisible sur vert */
.conversation-details-wrap > div:first-child button {
  background-color: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
}
.conversation-details-wrap > div:first-child button span,
.conversation-details-wrap > div:first-child button svg {
  color: #ffffff !important;
}

/* --- 6. Coherence dark mode : on garde la zone chat en clair --------------- */
.dark .conversation-panel { background-color: var(--wa-chat-bg) !important; }
.dark .right-bubble { background-color: var(--wa-out-dark) !important; border-color: var(--wa-out-dark) !important; }
.dark .left-bubble  { background-color: var(--wa-in) !important; border-color: var(--wa-in) !important; }
.dark .right-bubble .prose-bubble, .dark .right-bubble .prose-bubble :where(*),
.dark .left-bubble  .prose-bubble, .dark .left-bubble  .prose-bubble :where(*) { color: var(--wa-text) !important; }

/* --- 7. Accents globaux : gamme "blue" Chatwoot -> vert WhatsApp ------------
   Chatwoot v4 encode ses accents via tokens Radix (triplets RGB) --blue-1..12,
   utilises partout en rgb(var(--blue-N)). En les redefinissant, TOUS les accents
   (onglets actifs, boutons, liens, toggles, compteurs) deviennent verts d'un coup.
   Verifie live : format = triplets "R G B". */
:root, .dark {
  --blue-1: 247 254 251;
  --blue-2: 240 253 248;
  --blue-3: 224 249 240;
  --blue-4: 204 244 230;
  --blue-5: 180 236 218;
  --blue-6: 150 224 202;
  --blue-7: 110 207 181;
  --blue-8: 54 184 153;
  --blue-9: 0 168 132;    /* #00a884 accent WhatsApp */
  --blue-10: 0 150 118;
  --blue-11: 0 128 105;   /* #008069 */
  --blue-12: 17 74 62;
  --text-blue: 0 128 105;
  --border-blue: 0 168 132;
  --border-blue-strong: 0 128 105;
  --solid-blue: 217 253 211;   /* bulle sortante bg-n-solid-blue = vert WA */
  --solid-blue-2: 224 249 240;
  --teal-9: 37 211 102;        /* badge non-lus .bg-n-teal-9 = #25d366 WA */
}

/* --- 8. Panneau gauche : palette WhatsApp Web ------------------------------ */
/* Colonne nav (Med Assistance, recherche, menus, canaux) : VERT WhatsApp fonce,
   texte/icones blancs — identite forte facon header WhatsApp mobile. */
aside.bg-n-background {
  background-color: #008069 !important;
}
/* tout le texte de la nav en blanc (y compris tokens slate) */
aside.bg-n-background :where(a, button, span, div, p, h1, h2, h3, li) {
  color: rgba(255,255,255,.95) !important;
}
aside.bg-n-background [class*="text-n-slate"],
aside.bg-n-background [class*="text-n-"] {
  color: rgba(255,255,255,.92) !important;
}
/* icones (spans i-lucide/i-ri/i-ph = mask currentColor) */
aside.bg-n-background [class*="i-lucide"],
aside.bg-n-background [class*="i-ri-"],
aside.bg-n-background [class*="i-ph-"],
aside.bg-n-background svg {
  color: rgba(255,255,255,.92) !important;
}
/* hover + item actif : voile blanc translucide */
aside.bg-n-background a:hover,
aside.bg-n-background button:hover {
  background-color: rgba(255,255,255,.14) !important;
}
aside.bg-n-background [class*="bg-n-alpha"] {
  background-color: rgba(255,255,255,.20) !important;
}
/* champ recherche : pilule translucide */
aside.bg-n-background input {
  background-color: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
}
aside.bg-n-background input::placeholder {
  color: rgba(255,255,255,.7) !important;
}
/* compteurs non-lus de la nav : pastille verte claire lisible sur vert fonce */
aside.bg-n-background [class~="bg-n-teal-9"],
aside.bg-n-background [class*="rounded-full"][class*="text-xxs"] {
  background-color: #25d366 !important;
  color: #ffffff !important;
}
/* Liste des conversations : blanc, rows facon WhatsApp */
.conversations-list-wrap {
  background-color: #ffffff !important;
}
.conversations-list .vue-recycle-scroller__item-view:hover {
  background-color: #f5f6f6 !important;
}
/* Nom du contact : noir WhatsApp ; snippet : gris */
.conversation--user {
  color: #111b21 !important;
  font-weight: 500 !important;
}
.conversations-list-wrap [class*="text-n-slate-1"]:not(.conversation--user) {
  color: #667781 !important;
}
/* Badge non-lus : vert WhatsApp pilule (le token teal-9 fait deja le fond) */
[class~="bg-n-teal-9"] {
  background-color: #25d366 !important;
  color: #ffffff !important;
}