/* ====================================================================
   MA VILLE — Tchat aux couleurs de Ma Ville (21/10/2026)
   --------------------------------------------------------------------
   Habillage seul (couleurs, fond, bulles, bouton d'envoi). Aucun
   changement de fonctionnement : messages, temps réel, appels, sons,
   médias et notifications restent tels quels. S'applique au tchat privé
   et aux groupes (conversations). Chargé après whatsapp-skin.css et
   wa-look.css.
   ==================================================================== */

/* ---------- Mode clair : bleu lagune, sable, bulles teintées ---------- */
html body :is(#private-chat-modal, #group-chat-modal) {
  --wa-header: #0C5424;
  --wa-accent: #1E9E5A;
  --wa-accent-dark: #0C6C3C;
  --wa-bg: #F2F8F4;
  --wa-out: #E4FCE4;
  --wa-in: #FFFFFF;
  --wa-text: #10202E;
  --wa-meta: #4A5A52;
  --wa-tick: #1E9E5A;
  --wa-panel: #FFFFFF;
  --wa-input: #FFFFFF;
  --wa-search: #F2F8F4;
  --wa-line: #E3E8EE;
  --wa-date: #FFFFFF;
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='5' cy='5' r='1.1' fill='%2312B3A8' fill-opacity='.22'/%3E%3Ccircle cx='16' cy='16' r='1.1' fill='%23FFC22E' fill-opacity='.30'/%3E%3C/svg%3E");
}

/* ---------- Mode sombre : bleu nuit lagune ---------- */
body.dark-mode :is(#private-chat-modal, #group-chat-modal) {
  --wa-header: #0A3A1C;
  --wa-accent: #1E9E5A;
  --wa-accent-dark: #5FD8CE;
  --wa-bg: #0F1B26;
  --wa-out: #134B4B;
  --wa-in: #1A2E22;
  --wa-text: #EAF1F6;
  --wa-meta: #9FB3C4;
  --wa-tick: #5FD8CE;
  --wa-panel: #13231A;
  --wa-input: #1A2E22;
  --wa-search: #13231A;
  --wa-line: #2A3B4B;
  --wa-date: #13231A;
}

/* ---------- Bouton d'envoi jaune vif (au lieu du dégradé) ---------- */
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex.mvd-composer > .chat-send-btn:not(.recording) {
  background: #FFC22E !important;
  color: #10202E !important;
  box-shadow: 0 4px 12px rgba(255, 194, 46, .45) !important;
}

/* ---------- Saisie arrondie, bordure douce ---------- */
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex textarea,
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex input[type="text"] {
  border-radius: 22px !important;
}

/* ---------- Ville du membre sous le nom (en-tête) ---------- */
html body #private-chat-modal #mv-chat-city {
  font-size: 11.5px;
  color: #D6F5E0;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Zone de saisie visible : carte distincte du fond, bordure fine ---------- */
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex.mvd-composer .mvd-pill {
  border: 1.5px solid var(--wa-line) !important;
  background: var(--wa-input) !important;
  border-radius: 26px !important;
}

/* ---------- Photos de profil en cercle dans la liste des discussions ---------- */
html body .chat-row-avatar-img,
html body .chat-row-avatar,
html body .chat-row-avatar-wrap > img {
  border-radius: 50% !important;
  object-fit: cover;
}

/* ---------- Liste des discussions : photo ronde dans tout le cadre (renforcé 23/10) ---------- */
html body .chat-row .chat-row-avatar-wrap,
html body .chat-row-avatar-wrap:has(> .chat-row-avatar-img),
html body .chat-row-avatar-wrap:has(> .chat-row-avatar) {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
}
html body .chat-row .chat-row-avatar-img,
html body .chat-row .chat-row-avatar,
html body .chat-row-avatar-wrap > .chat-row-avatar-img,
html body .chat-row-avatar-wrap > .chat-row-avatar {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ==================================================================
   Liste des discussions : photos rondes avec cercle lagune, comme WhatsApp
   (23/10/2026). Nom en gras, aperçu discret, lignes aérées.
   ================================================================== */
html body .chat-row .chat-row-avatar-wrap {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  border-radius: 50% !important;
  overflow: visible !important;
  position: relative;
  margin-right: 12px;
}
html body .chat-row .chat-row-avatar-wrap > .chat-row-avatar-img,
html body .chat-row .chat-row-avatar-wrap > .chat-row-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 0 0 2px var(--wa-panel, #fff), 0 0 0 3.5px #1E9E5A;
}
html body .chat-row .chat-row-avatar-wrap > .chat-row-avatar {
  display: grid;
  place-items: center;
  background: #E4FCE4;
  font-size: 26px;
}
html body #my-conversations-list .chat-row-name {
  font-weight: 800;
  color: var(--wa-text, #10202E);
}
html body #my-conversations-list .chat-row-preview {
  color: #4A5A52;
}
html body #my-conversations-list .chat-row {
  padding: 10px 14px;
  border-radius: 14px;
  transition: background .15s;
}
html body #my-conversations-list .chat-row:active {
  background: rgba(30,158,90, .10);
}
/* Avatar de l'en-tête du tchat : cercle lagune, comme la liste */
html body :is(#private-chat-modal, #group-chat-modal) .chat-modal-avatar {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1E9E5A;
  object-fit: cover;
}
/* Bulles plus douces (plus arrondies, ombre fine) */
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) {
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(12,84,36, .12);
}