/*
============================================================
 CHATWOOT 4.17 — WHATSAPP WEB V4
============================================================
*/


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --wa-green: #00a884;
  --wa-green-dark: #008069;

  --wa-blue-check: #53bdeb;

  --wa-app-bg: #f0f2f5;

  --wa-chat-bg: #efeae2;

  --wa-panel: #ffffff;

  --wa-header: #f0f2f5;

  --wa-border: #e9edef;

  --wa-text: #111b21;

  --wa-secondary: #667781;

  --wa-incoming: #ffffff;

  --wa-outgoing: #d9fdd3;

  --wa-hover: #f5f6f6;

  --wa-selected: #f0f2f5;

}


/* =========================================================
   CHAT AREA
========================================================= */

.wa-v3-conversation,
.conversation-details-wrap {

  background:
    var(--wa-chat-bg) !important;

}


/* =========================================================
   HEADER
========================================================= */

.wa-v3-header {

  background:
    var(--wa-header) !important;

  min-height:
    60px !important;

  height:
    60px !important;

  padding:
    8px 16px !important;

  border-bottom:
    1px solid var(--wa-border) !important;

}


.wa-v3-header img {

  border-radius:
    50% !important;

}


.wa-v3-header .text-n-slate-12 {

  color:
    var(--wa-text) !important;

  font-size:
    15px !important;

  font-weight:
    500 !important;

}


.wa-v3-header .conversation--header--actions {

  color:
    var(--wa-secondary) !important;

}


/* =========================================================
   CONVERSATION LIST
========================================================= */

.conversation {

  min-height:
    72px !important;

  background:
    var(--wa-panel) !important;

  border-bottom:
    1px solid var(--wa-border) !important;

  transition:
    background 100ms ease;

}


.conversation:hover {

  background:
    var(--wa-hover) !important;

}


.conversation.active {

  background:
    var(--wa-selected) !important;

}


/* Contact */

.conversation--user {

  color:
    var(--wa-text) !important;

  font-size:
    15px !important;

  font-weight:
    500 !important;

  line-height:
    20px !important;

  text-transform:
    none !important;

}


/* Avatar */

.conversation img {

  border-radius:
    50% !important;

}


/* Secondary text */

.conversation p {

  color:
    var(--wa-secondary) !important;

}


/* =========================================================
   MESSAGE CONTAINER
========================================================= */

.wa-message {

  padding-left:
    5%;

  padding-right:
    5%;

  margin-bottom:
    3px !important;

}


/* =========================================================
   REMOVE AGENT AVATAR FROM OUTGOING MESSAGES

   WhatsApp doesn't display your own avatar beside every
   message.
========================================================= */

.wa-message[data-wa-orientation="right"] {

  padding-right:
    6%;

}


/* =========================================================
   BUBBLE GENERIC
========================================================= */

.wa-message [data-bubble-name] {

  border-radius:
    7.5px !important;

  box-shadow:
    0 1px .5px rgba(11,20,26,.13) !important;

}


/* =========================================================
   INCOMING MESSAGE
========================================================= */

.wa-message[data-wa-orientation="left"]
[data-bubble-name] {

  background:
    var(--wa-incoming) !important;

  color:
    var(--wa-text) !important;

}


/* =========================================================
   OUTGOING MESSAGE
========================================================= */

.wa-message[data-wa-orientation="right"]
[data-bubble-name] {

  background:
    var(--wa-outgoing) !important;

  color:
    var(--wa-text) !important;

}


/* =========================================================
   TEXT BUBBLE
========================================================= */

.wa-message [data-bubble-name="text"] {

  padding:
    7px 9px 6px 9px !important;

  min-width:
    80px;

  max-width:
    min(65vw, 560px);

}


/* =========================================================
   TEXT
========================================================= */

.wa-message .prose-bubble {

  color:
    var(--wa-text) !important;

  font-size:
    14.2px !important;

  line-height:
    19px !important;

}


/* =========================================================
   LINKS
========================================================= */

.wa-message .prose-bubble a {

  color:
    #027eb5 !important;

  text-decoration:
    underline;

}


/* =========================================================
   IMAGE
========================================================= */

.wa-message [data-bubble-name="image"] {

  padding:
    3px !important;

  overflow:
    hidden;

}


/* =========================================================
   ATTACHMENTS
========================================================= */

.wa-message [data-bubble-name="attachment"] {

  padding:
    6px !important;

}


/* =========================================================
   AUDIO
========================================================= */

.wa-message [data-bubble-name="audio"] {

  min-width:
    280px;

  background:
    var(--wa-outgoing);

}


/* incoming audio */

.wa-message[data-wa-orientation="left"]
[data-bubble-name="audio"] {

  background:
    var(--wa-incoming) !important;

}


/* =========================================================
   FILE
========================================================= */

.wa-message [data-bubble-name="file"] {

  border-radius:
    7px !important;

}


/* =========================================================
   LOCATION
========================================================= */

.wa-message [data-bubble-name="location"] {

  overflow:
    hidden;

}


/* =========================================================
   META / TIME
========================================================= */

.wa-message time {

  color:
    var(--wa-secondary) !important;

  font-size:
    10.5px !important;

}


/* =========================================================
   WHATSAPP STATUS CHECKS

   read / delivered => WhatsApp blue
========================================================= */

.wa-message[data-wa-status="read"]
svg {

  color:
    var(--wa-blue-check) !important;

}


.wa-message[data-wa-status="delivered"]
svg {

  color:
    var(--wa-secondary);

}


/* =========================================================
   FAILED MESSAGE
========================================================= */

.wa-message[data-wa-status="failed"]
[data-bubble-name] {

  border:
    1px solid rgba(220,38,38,.35) !important;

}


/* =========================================================
   PRIVATE NOTE

   Keep it visually different from WhatsApp messages.
========================================================= */

.wa-message[data-wa-variant="private"]
[data-bubble-name] {

  background:
    #fff4cc !important;

}


/* =========================================================
   ACTIVITY MESSAGES
========================================================= */

.wa-message[data-wa-variant="activity"] {

  justify-content:
    center !important;

  opacity:
    .85;

}


/* =========================================================
   WHATSAPP-LIKE CHAT WALLPAPER

   No external image required.
========================================================= */

.wa-v3-conversation {

  background-color:
    var(--wa-chat-bg) !important;

  background-image:

    radial-gradient(
      circle at 20px 20px,
      rgba(11,20,26,.025) 1px,
      transparent 1px
    ),

    radial-gradient(
      circle at 60px 60px,
      rgba(11,20,26,.02) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

}


/* =========================================================
   REPLY COMPOSER
========================================================= */

.wa-v3-conversation textarea,
.wa-v3-conversation [contenteditable="true"] {

  border-radius:
    8px !important;

  border:
    0 !important;

  box-shadow:
    none !important;

}


.wa-v3-conversation textarea:focus,
.wa-v3-conversation [contenteditable="true"]:focus {

  outline:
    none !important;

  box-shadow:
    none !important;

}


/* =========================================================
   BUTTONS
========================================================= */

.wa-v3-conversation button {

  transition:
    background .1s ease;

}


/* =========================================================
   SCROLLBAR
========================================================= */

.wa-v3-conversation ::-webkit-scrollbar {

  width:
    6px;

}


.wa-v3-conversation ::-webkit-scrollbar-thumb {

  background:
    rgba(11,20,26,.20);

}


.wa-v3-conversation ::-webkit-scrollbar-track {

  background:
    transparent;

}


/* =========================================================
   DARK MODE
========================================================= */

.dark {

  --wa-app-bg:
    #111b21;

  --wa-chat-bg:
    #0b141a;

  --wa-panel:
    #111b21;

  --wa-header:
    #202c33;

  --wa-border:
    #222d34;

  --wa-text:
    #e9edef;

  --wa-secondary:
    #8696a0;

  --wa-incoming:
    #202c33;

  --wa-outgoing:
    #005c4b;

  --wa-hover:
    #202c33;

  --wa-selected:
    #2a3942;

}


.dark
.wa-message[data-wa-variant="private"]
[data-bubble-name] {

  background:
    #5c4b16 !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

  .wa-message {

    padding-left:
      2%;

    padding-right:
      2%;

  }


  .wa-message [data-bubble-name="text"] {

    max-width:
      85vw;

  }


  .conversation {

    min-height:
      68px !important;

  }


  .wa-v3-header {

    min-height:
      56px !important;

    height:
      56px !important;

  }

}


/* ============================================
   WHATSAPP V4 - REAL CHAT BACKGROUND
   ============================================ */

.wa-v3-conversation {
  background-color: #efeae2 !important;
  background-image: url('./whatsapp-bg.png') !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-size: 400px auto !important;
  background-attachment: local !important;
}

/* Dark mode */
.dark .wa-v3-conversation {
  background-color: #0b141a !important;
  background-image:
    linear-gradient(rgba(11,20,26,.88), rgba(11,20,26,.88)),
    url('./whatsapp-bg.png') !important;
}


/* ==========================================
   V4.1 - FORCE WHATSAPP BACKGROUND
   ========================================== */

.conversation-details-wrap,
.wa-v3-conversation {
  background-color: #efeae2 !important;
}

/* Zone réelle des messages */
.message-bubble-container {
  position: relative;
}

/* Containers Chatwoot susceptibles de masquer le wallpaper */
.conversation-details-wrap [class*="messages"],
.conversation-details-wrap [class*="message-list"] {
  background-color: transparent !important;
}

/* Wallpaper sur la zone conversation */
.conversation-details-wrap > div.flex.h-full,
.wa-v3-conversation > div.flex.h-full {
  background-color: #efeae2 !important;
  background-image: url('/whatsapp-bg.png') !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 400px auto !important;
}


/* =========================================
   FORCE WALLPAPER ON CHAT MESSAGE AREA
   ========================================= */

.wa-v3-conversation,
.conversation-details-wrap {
  background: transparent !important;
}

.wa-v3-conversation [class*="overflow-y"],
.wa-v3-conversation [class*="overflow-auto"],
.conversation-details-wrap [class*="overflow-y"],
.conversation-details-wrap [class*="overflow-auto"] {
  background-color: #efeae2 !important;
  background-image: url("./whatsapp-bg.png") !important;
  background-repeat: repeat !important;
  background-position: top center !important;
  background-size: 420px auto !important;
}



/* ==========================================================
   CHATWOOT - WHATSAPP WEB V5
   Interface inspirée de WhatsApp Web desktop
   ========================================================== */

:root {
  --wa-v5-bg-app: #f0f2f5;
  --wa-v5-bg-panel: #ffffff;
  --wa-v5-bg-chat: #efeae2;

  --wa-v5-border: #e9edef;

  --wa-v5-text: #111b21;
  --wa-v5-text-secondary: #667781;

  --wa-v5-green: #25d366;
  --wa-v5-green-dark: #00a884;

  --wa-v5-outgoing: #d9fdd3;
  --wa-v5-incoming: #ffffff;

  --wa-v5-search: #f0f2f5;
}


/* ==========================================================
   1. STRUCTURE GÉNÉRALE
   ========================================================== */

body {
  background: var(--wa-v5-bg-app) !important;
}

.conversation-details-wrap,
.wa-v3-conversation {
  border-left: 1px solid var(--wa-v5-border) !important;
}


/* ==========================================================
   2. LISTE DES CONVERSATIONS
   ========================================================== */

/* Séparation des conversations */
.conversation-list li,
.conversation-list > div,
[data-testid="conversation-list"] > div {
  border-bottom-color: var(--wa-v5-border) !important;
}

/* Nom du contact */
.conversation--user {
  color: var(--wa-v5-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

/* Aperçu du dernier message */
.conversation--message,
.conversation-list p {
  color: var(--wa-v5-text-secondary);
}

/* Conversation active */
.conversation-list .active,
.conversation-list [aria-current="true"],
.conversation-list .router-link-active {
  background-color: #f0f2f5 !important;
}

/* Hover */
.conversation-list li:hover,
.conversation-list > div:hover {
  background-color: #f5f6f6;
}

/* Avatars */
.conversation-list img,
.conversation-details-wrap img.rounded-full {
  object-fit: cover;
}


/* ==========================================================
   3. ONGLETS TOUS / LES MIENS / NON ASSIGNÉ
   ========================================================== */

.woot-tabs ul {
  gap: 6px !important;
}

.woot-tabs li a {
  border-radius: 18px !important;
  padding: 6px 12px !important;
  transition: background-color .15s ease !important;
}

/* Onglet actif */
.woot-tabs li.active a,
.woot-tabs li[aria-selected="true"] a {
  background-color: #d9fdd3 !important;
  color: #008069 !important;
}


/* ==========================================================
   4. HEADER DE CONVERSATION
   ========================================================== */

.wa-v3-header {
  min-height: 59px !important;
  height: 59px !important;

  background: #f0f2f5 !important;

  border-bottom: 1px solid var(--wa-v5-border) !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nom */
.wa-v3-header h1,
.wa-v3-header h2,
.wa-v3-header h3,
.wa-v3-header [class*="font-medium"] {
  color: var(--wa-v5-text) !important;
  font-weight: 500 !important;
}


/* ==========================================================
   5. WALLPAPER
   On conserve ton background actuellement fonctionnel
   ========================================================== */

.wa-v3-conversation [class*="overflow-y"],
.wa-v3-conversation [class*="overflow-auto"],
.conversation-details-wrap [class*="overflow-y"],
.conversation-details-wrap [class*="overflow-auto"] {

  background-color: var(--wa-v5-bg-chat) !important;

  background-image: url("./whatsapp-bg.png") !important;

  background-repeat: repeat !important;

  background-position: center top !important;

  background-size: 420px auto !important;
}


/* ==========================================================
   6. ESPACEMENT DES MESSAGES
   ========================================================== */

.wa-message {
  margin-bottom: 3px !important;
}


/* ==========================================================
   7. BULLES DE MESSAGES
   ========================================================== */

/* BULLE ENTRANTE */

.wa-message[data-wa-orientation="left"] [data-bubble-name] {
  background-color: var(--wa-v5-incoming) !important;

  color: var(--wa-v5-text) !important;

  border-radius: 8px !important;

  box-shadow:
    0 1px 0.5px rgba(11,20,26,.13) !important;
}


/* BULLE SORTANTE */

.wa-message[data-wa-orientation="right"] [data-bubble-name] {
  background-color: var(--wa-v5-outgoing) !important;

  color: var(--wa-v5-text) !important;

  border-radius: 8px !important;

  box-shadow:
    0 1px 0.5px rgba(11,20,26,.13) !important;
}


/* Texte */

.wa-message [data-bubble-name="text"] {
  padding: 7px 9px 6px 9px !important;

  font-size: 14.2px !important;

  line-height: 19px !important;
}


/* Pièces jointes */

.wa-message [data-bubble-name="attachment"] {
  border-radius: 8px !important;
}


/* Audio */

.wa-message [data-bubble-name="audio"] {
  border-radius: 8px !important;
}


/* ==========================================================
   8. MESSAGES ENTRANTS À GAUCHE
   ========================================================== */

.wa-message[data-wa-orientation="left"] {
  justify-content: flex-start !important;
}

.wa-message[data-wa-orientation="left"] > div {
  max-width: min(65%, 650px);
}


/* ==========================================================
   9. MESSAGES SORTANTS À DROITE
   ========================================================== */

.wa-message[data-wa-orientation="right"] {
  justify-content: flex-end !important;
}

.wa-message[data-wa-orientation="right"] > div {
  max-width: min(65%, 650px);
}


/* ==========================================================
   10. HEURE DES MESSAGES
   ========================================================== */

.wa-message time,
.wa-message [class*="text-xs"],
.wa-message [class*="text-xxs"] {
  font-size: 11px !important;
  color: #667781 !important;
}


/* ==========================================================
   11. DOUBLE CHECK BLEU
   ========================================================== */

.wa-message[data-wa-orientation="right"][data-wa-status="read"]
svg {
  color: #53bdeb !important;
}


/* ==========================================================
   12. MESSAGES PRIVÉS / NOTES
   ========================================================== */

.wa-message[data-wa-variant="private"] [data-bubble-name] {
  background-color: #fff4cc !important;
}


/* ==========================================================
   13. MESSAGES D'ACTIVITÉ
   ========================================================== */

.wa-message[data-wa-orientation="center"] {
  justify-content: center !important;
}

.wa-message[data-wa-orientation="center"] [data-bubble-name] {
  background-color: #ffffff !important;

  color: #54656f !important;

  font-size: 12px !important;

  border-radius: 8px !important;
}


/* ==========================================================
   14. REPLY BOX - STYLE WHATSAPP WEB
   ========================================================== */

.reply-box,
.replybox,
[class*="reply-box"] {

  background-color: #f0f2f5 !important;

  border-top: 0 !important;

  padding: 8px 12px !important;
}


/* textarea / zone de saisie */

.reply-box textarea,
.replybox textarea,
[class*="reply-box"] textarea,
[contenteditable="true"] {

  background-color: #ffffff !important;

  border-radius: 10px !important;

  border: none !important;

  color: var(--wa-v5-text) !important;

  box-shadow: none !important;
}


/* Placeholder */

.reply-box textarea::placeholder,
.replybox textarea::placeholder {
  color: #667781 !important;
}


/* ==========================================================
   15. SCROLLBAR STYLE WHATSAPP
   ========================================================== */

.wa-v3-conversation ::-webkit-scrollbar,
.conversation-list::-webkit-scrollbar {
  width: 6px !important;
}

.wa-v3-conversation ::-webkit-scrollbar-thumb,
.conversation-list::-webkit-scrollbar-thumb {

  background-color: rgba(11,20,26,.20) !important;

  border-radius: 3px !important;
}


/* ==========================================================
   16. DARK MODE
   ========================================================== */

.dark {
  --wa-v5-bg-app: #111b21;
  --wa-v5-bg-panel: #111b21;
  --wa-v5-bg-chat: #0b141a;

  --wa-v5-border: #222d34;

  --wa-v5-text: #e9edef;
  --wa-v5-text-secondary: #8696a0;

  --wa-v5-outgoing: #005c4b;
  --wa-v5-incoming: #202c33;
}

.dark .wa-v3-header {
  background-color: #202c33 !important;
}

.dark .wa-v3-conversation [class*="overflow-y"],
.dark .wa-v3-conversation [class*="overflow-auto"] {

  background-color: #0b141a !important;

  background-image:
    linear-gradient(
      rgba(11,20,26,.88),
      rgba(11,20,26,.88)
    ),
    url("./whatsapp-bg.png") !important;
}


/* ==========================================================
   17. RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

  .wa-message[data-wa-orientation="left"] > div,
  .wa-message[data-wa-orientation="right"] > div {
    max-width: 80%;
  }

}


/* ==========================================================
   CHATWOOT WHATSAPP V5.1 - FINITIONS
   ========================================================== */

/* ---------- LISTE DES CONVERSATIONS ---------- */

.conversation-list {
  background: #ffffff !important;
}

.conversation-list > div,
.conversation-list li {
  min-height: 72px !important;
}

/* Un peu plus d'espace autour de l'avatar */
.conversation-list img {
  margin-right: 10px !important;
}

/* Heure à droite */
.conversation-list time,
.conversation-list [class*="text-xxs"] {
  color: #667781 !important;
  font-size: 11px !important;
}

/* Dernier message plus discret */
.conversation--message {
  font-size: 13px !important;
  line-height: 18px !important;
  color: #667781 !important;
}

/* Conversation sélectionnée */
.conversation-list .active,
.conversation-list [aria-current="true"],
.conversation-list .router-link-active {
  background: #f0f2f5 !important;
}

/* ---------- HEADER ---------- */

.wa-v3-header {
  box-shadow: none !important;
}

.wa-v3-header img {
  width: 40px !important;
  height: 40px !important;
}

/* ---------- ZONE DES MESSAGES ---------- */

/* Espacement latéral type WhatsApp */
.wa-v3-conversation [class*="overflow-y"],
.wa-v3-conversation [class*="overflow-auto"] {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

/* Bulles plus naturelles */
.wa-message[data-wa-orientation="left"] [data-bubble-name],
.wa-message[data-wa-orientation="right"] [data-bubble-name] {
  border-radius: 7.5px !important;
}

/* Texte légèrement plus compact */
.wa-message [data-bubble-name="text"] {
  padding: 6px 8px 5px 8px !important;
}

/* ---------- REPLY BOX ---------- */

.reply-box,
.replybox,
[class*="reply-box"] {
  background: #f0f2f5 !important;
  padding: 8px 10px !important;
}

.reply-box textarea,
.replybox textarea,
[class*="reply-box"] textarea,
[contenteditable="true"] {
  min-height: 40px !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
  width: 6px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(11,20,26,.20) !important;
  border-radius: 10px !important;
}

/* ---------- DARK MODE ---------- */

.dark .conversation-list {
  background: #111b21 !important;
}

.dark .conversation-list .active,
.dark .conversation-list [aria-current="true"],
.dark .conversation-list .router-link-active {
  background: #2a3942 !important;
}


/* ==========================================================
   WHATSAPP V5.2 — TYPOGRAPHIE & ESPACEMENTS
   ========================================================== */

/* Police proche de WhatsApp Web / interface système */
body,
button,
input,
textarea,
select,
[contenteditable="true"] {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* ==========================================================
   LISTE DES CONVERSATIONS
   ========================================================== */

/* Hauteur proche de WhatsApp Web */
.conversation-list > div,
.conversation-list li {
  min-height: 72px !important;
}

/* Nom contact */
.conversation--user {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: normal !important;

  color: #111b21 !important;
}

/* Aperçu du dernier message */
.conversation--message {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  color: #667781 !important;

  margin-top: 2px !important;
}

/* Heure dans la liste */
.conversation-list time,
.conversation-list [class*="text-xxs"] {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  color: #667781 !important;
}

/* ==========================================================
   HEADER CONVERSATION
   ========================================================== */

.wa-v3-header {
  height: 60px !important;
  min-height: 60px !important;
}

/* Nom du contact dans le header */
.wa-v3-header h1,
.wa-v3-header h2,
.wa-v3-header h3,
.wa-v3-header [class*="font-medium"] {
  font-size: 16px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* ==========================================================
   BULLES
   ========================================================== */

.wa-message {
  margin-bottom: 2px !important;
}

/* Largeur maximale */
.wa-message[data-wa-orientation="left"] > div,
.wa-message[data-wa-orientation="right"] > div {
  max-width: min(65%, 650px) !important;
}

/* Texte des messages */
.wa-message [data-bubble-name="text"],
.wa-message .prose,
.wa-message .prose-bubble {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 14.2px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
  letter-spacing: normal !important;
}

/* Padding de la bulle */
.wa-message [data-bubble-name="text"] {
  padding:
    6px
    7px
    6px
    9px !important;
}

/* Heure du message */
.wa-message time,
.wa-message [class*="text-xxs"] {
  font-size: 11px !important;
  line-height: 15px !important;
  font-weight: 400 !important;
}

/* ==========================================================
   ESPACEMENT GLOBAL DU CHAT
   ========================================================== */

/* Plus d'air sur grands écrans */
@media (min-width: 1200px) {

  .wa-v3-conversation [class*="overflow-y"],
  .wa-v3-conversation [class*="overflow-auto"] {
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

}

/* Écran moyen */
@media (max-width: 1199px) {

  .wa-v3-conversation [class*="overflow-y"],
  .wa-v3-conversation [class*="overflow-auto"] {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }

}

/* ==========================================================
   CHAMP DE SAISIE
   ========================================================== */

.reply-box textarea,
.replybox textarea,
[class*="reply-box"] textarea,
[contenteditable="true"] {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

/* ==========================================================
   ONGLETS
   ========================================================== */

.woot-tabs li a {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  padding: 5px 11px !important;
}

/* ==========================================================
   DARK MODE
   ========================================================== */

.dark .conversation--user {
  color: #e9edef !important;
}

.dark .conversation--message,
.dark .conversation-list time {
  color: #8696a0 !important;
}


/* ==========================================================
   WHATSAPP V6 — FINITION DESKTOP
   ========================================================== */

/* ---------- COLONNE GAUCHE ---------- */

.conversation-list {
  background: #fff !important;
}

.conversation-list > div,
.conversation-list li {
  min-height: 72px !important;
}

.conversation-list img {
  width: 49px !important;
  height: 49px !important;
  border-radius: 50% !important;
}

/* Nom */
.conversation--user {
  font-size: 16px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  color: #111b21 !important;
}

/* Dernier message */
.conversation--message {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: #667781 !important;
}

/* Heure */
.conversation-list time,
.conversation-list [class*="text-xxs"] {
  font-size: 12px !important;
  color: #667781 !important;
}

/* Hover */
.conversation-list li:hover,
.conversation-list > div:hover {
  background: #f5f6f6 !important;
}

/* Sélection */
.conversation-list .active,
.conversation-list [aria-current="true"],
.conversation-list .router-link-active {
  background: #f0f2f5 !important;
}


/* ---------- HEADER ---------- */

.wa-v3-header {
  height: 60px !important;
  min-height: 60px !important;
  background: #f0f2f5 !important;
  border-bottom: 1px solid #e9edef !important;
}

.wa-v3-header img {
  width: 40px !important;
  height: 40px !important;
}


/* ---------- ZONE CHAT ---------- */

.wa-v3-conversation [class*="overflow-y"],
.wa-v3-conversation [class*="overflow-auto"] {
  padding-left: 6% !important;
  padding-right: 6% !important;
}


/* ---------- BULLES ---------- */

.wa-message {
  margin-bottom: 2px !important;
}

.wa-message[data-wa-orientation="left"] [data-bubble-name],
.wa-message[data-wa-orientation="right"] [data-bubble-name] {
  position: relative !important;
  border-radius: 7.5px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
}

/* Entrant */
.wa-message[data-wa-orientation="left"] [data-bubble-name] {
  background: #fff !important;
}

/* Sortant */
.wa-message[data-wa-orientation="right"] [data-bubble-name] {
  background: #d9fdd3 !important;
}

/* Texte */
.wa-message [data-bubble-name="text"],
.wa-message .prose,
.wa-message .prose-bubble {
  font-size: 14.2px !important;
  line-height: 19px !important;
  font-weight: 400 !important;
}

/* Padding */
.wa-message [data-bubble-name="text"] {
  padding: 6px 8px 6px 9px !important;
}


/* ---------- POINTES DE BULLES ---------- */

.wa-message[data-wa-orientation="left"]
[data-bubble-name="text"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -7px !important;

  width: 0 !important;
  height: 0 !important;

  border-top: 0 solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-right: 8px solid #fff !important;
}

.wa-message[data-wa-orientation="right"]
[data-bubble-name="text"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: -7px !important;

  width: 0 !important;
  height: 0 !important;

  border-top: 0 solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 8px solid #d9fdd3 !important;
}


/* ---------- LARGEUR DES BULLES ---------- */

.wa-message[data-wa-orientation="left"] > div,
.wa-message[data-wa-orientation="right"] > div {
  max-width: min(65%, 650px) !important;
}


/* ---------- HEURE ---------- */

.wa-message time,
.wa-message [class*="text-xxs"] {
  font-size: 11px !important;
  line-height: 15px !important;
  color: #667781 !important;
}


/* ---------- LECTURE ---------- */

.wa-message[data-wa-orientation="right"][data-wa-status="read"] svg {
  color: #53bdeb !important;
}


/* ---------- REPLY BOX ---------- */

.reply-box,
.replybox,
[class*="reply-box"] {
  background: #f0f2f5 !important;
  border-top: 0 !important;
  padding: 8px 10px !important;
}

.reply-box textarea,
.replybox textarea,
[class*="reply-box"] textarea,
[contenteditable="true"] {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;

  font-size: 15px !important;
  line-height: 20px !important;

  padding: 10px 12px !important;
  box-shadow: none !important;
}


/* ---------- TABS ---------- */

.woot-tabs li a {
  border-radius: 18px !important;
  padding: 5px 11px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.woot-tabs li.active a,
.woot-tabs li[aria-selected="true"] a {
  background: #d9fdd3 !important;
  color: #008069 !important;
}


/* ---------- LABELS PLUS DISCRETS ---------- */

.conversation-list [class*="label"],
.conversation-list [class*="badge"] {
  font-size: 10px !important;
  line-height: 14px !important;
  border-radius: 8px !important;
}


/* ---------- DARK MODE ---------- */

.dark .conversation-list {
  background: #111b21 !important;
}

.dark .conversation--user {
  color: #e9edef !important;
}

.dark .conversation--message,
.dark .conversation-list time {
  color: #8696a0 !important;
}

.dark .wa-message[data-wa-orientation="left"] [data-bubble-name] {
  background: #202c33 !important;
}

.dark .wa-message[data-wa-orientation="right"] [data-bubble-name] {
  background: #005c4b !important;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1200px) {
  .wa-v3-conversation [class*="overflow-y"],
  .wa-v3-conversation [class*="overflow-auto"] {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }

  .wa-message[data-wa-orientation="left"] > div,
  .wa-message[data-wa-orientation="right"] > div {
    max-width: 75% !important;
  }
}


/* ==========================================================
   WHATSAPP V7.1 — CRM VISUEL
   ========================================================== */

/* Labels / badges Chatwoot */
.conversation-list [class*="badge"],
.conversation-list [class*="label"],
.conversation--labels span {
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  padding: 2px 6px !important;
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Évite que les badges prennent trop de place */
.conversation--labels {
  gap: 3px !important;
  margin-top: 3px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* Compteur non-lu façon WhatsApp */
.conversation-list [class*="unread"] {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Conversation avec message non lu */
.conversation-list [class*="unread"] ~ *,
.conversation-list [data-unread="true"] .conversation--user {
  font-weight: 600 !important;
}

/* Séparation beaucoup plus légère */
.conversation-list li,
.conversation-list > div {
  border-bottom: 1px solid #f0f2f5 !important;
}

/* Zone texte de la conversation */
.conversation--user {
  margin-bottom: 1px !important;
}

.conversation--message {
  margin-top: 0 !important;
}

/* Laisse de la place au compteur et à l'heure */
.conversation-list time {
  white-space: nowrap !important;
}

/* Dark mode */
.dark .conversation-list li,
.dark .conversation-list > div {
  border-bottom-color: #222d34 !important;
}