/* ====================================================================
   MA VILLE — Conversation façon WhatsApp (02/10/2026)
   --------------------------------------------------------------------
   Habillage seul : couleurs, bulles, fond d'écran, barre d'écriture.
   Aucun bouton n'est retiré. Mode clair = WhatsApp clair, mode sombre =
   WhatsApp sombre. Chargé en dernier (après theme-lagune.css).
   ==================================================================== */

/* ---------- Palette ---------- */
:root {
  --wa-header: #0C6C3C;          /* vert-lagune Ma Ville, très proche du vert WhatsApp */
  --wa-accent: #00A884;
  --wa-accent-dark: #008F72;
  --wa-bg: #EFEAE2;
  --wa-out: #D9FDD3;
  --wa-in: #FFFFFF;
  --wa-text: #0B1A12;
  --wa-meta: #667781;
  --wa-tick: #53BDEB;
  --wa-panel: #FFFFFF;
  --wa-input: #FFFFFF;
  --wa-search: #F0F2F5;
  --wa-line: #E9EDEF;
  --wa-unread: #1E9E5A;
  --wa-date: #FFFFFF;
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.03' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16v12H14zM18 18v-3h8v3'/%3E%3Ccircle cx='74' cy='22' r='7'/%3E%3Cpath d='M70 22h8M74 18v8'/%3E%3Cpath d='M98 60l8 8m0-8l-8 8'/%3E%3Cpath d='M20 74c4-6 12-6 16 0s-12 14-16 6z'/%3E%3Cpath d='M60 64l6 12 6-12z'/%3E%3Ccircle cx='96' cy='100' r='5'/%3E%3Cpath d='M40 104h14M47 97v14'/%3E%3Cpath d='M106 30l4 4-8 8-4-4z'/%3E%3C/g%3E%3C/svg%3E");
}
body.dark-mode {
  --wa-header: #13231A;
  --wa-accent: #00A884;
  --wa-accent-dark: #06CF9C;
  --wa-bg: #0B1A12;
  --wa-out: #005C4B;
  --wa-in: #13231A;
  --wa-text: #E9EDEF;
  --wa-meta: #8696A0;
  --wa-panel: #0B1A12;
  --wa-input: #2A3942;
  --wa-search: #13231A;
  --wa-line: #222D34;
  --wa-date: #182229;
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16v12H14zM18 18v-3h8v3'/%3E%3Ccircle cx='74' cy='22' r='7'/%3E%3Cpath d='M70 22h8M74 18v8'/%3E%3Cpath d='M98 60l8 8m0-8l-8 8'/%3E%3Cpath d='M20 74c4-6 12-6 16 0s-12 14-16 6z'/%3E%3Cpath d='M60 64l6 12 6-12z'/%3E%3Ccircle cx='96' cy='100' r='5'/%3E%3Cpath d='M40 104h14M47 97v14'/%3E%3Cpath d='M106 30l4 4-8 8-4-4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Les volets Conversation n'imposent plus le bleu nuit : ils suivent WhatsApp */
html body :is(#tab-dating, #tab-communities, #tab-calls, #private-chat-modal, #group-chat-modal, #group-info-modal, #find-by-phone-modal, #new-discussion-modal) {
  --paper: var(--wa-panel);
  --paper-card: var(--wa-panel);
  --surface: var(--wa-search);
  --ink: var(--wa-text);
  --muted: var(--wa-meta);
  --line: var(--wa-line);
}

/* ==================== Liste des discussions ==================== */
html body :is(#tab-dating, #tab-communities, #tab-calls) {
  background: var(--wa-panel);
  border-radius: 22px;
  padding: 12px 6px 14px;
  box-shadow: 0 6px 20px rgba(12,84,36, .08);
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-subnav { padding: 0 8px; gap: 8px; }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-subnav-btn {
  background: var(--wa-search);
  border: 0;
  color: var(--wa-meta);
  font-weight: 600;
  min-height: 36px;
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-subnav-btn.active {
  background: rgba(0, 168, 132, .15);
  color: #0C6C3C;
}
body.dark-mode :is(#tab-dating, #tab-communities, #tab-calls) .chat-subnav-btn.active { background: rgba(0, 168, 132, .22); color: #00D29B; }

html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-search-wrap {
  background: var(--wa-search);
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-new-discussion-btn {
  background: var(--wa-accent);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 168, 132, .3);
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-discussions-toolbar { padding: 0 8px; }

html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row {
  padding: 10px 12px;
  gap: 14px;
  border-bottom: 0;
  border-radius: 0;
  position: relative;
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row::after {
  content: "";
  position: absolute;
  left: 76px;
  right: 12px;
  bottom: 0;
  border-bottom: 1px solid var(--wa-line);
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row:last-child::after { display: none; }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row:hover { background: var(--wa-search); }
html body :is(#tab-dating, #tab-communities, #tab-calls) :is(.chat-row-avatar, .chat-row-avatar-img) {
  width: 50px;
  height: 50px;
  box-shadow: none;
  font-size: 24px;
}
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-avatar { background: #DFE5E7; }
body.dark-mode :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-avatar { background: #2A3942; }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-online-dot { width: 13px; height: 13px; border: 2.5px solid var(--wa-panel); }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-online-dot.online { background: var(--wa-unread); }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-name { font-size: 16px; font-weight: 600; color: var(--wa-text); }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-time { font-size: 12px; color: var(--wa-meta); }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-unread .chat-row-time { color: #1DAA61; font-weight: 600; }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-row-preview { font-size: 14px; color: var(--wa-meta); }
html body :is(#tab-dating, #tab-communities, #tab-calls) .chat-unread-badge {
  background: var(--wa-unread);
  color: #fff;
  min-width: 20px;
  height: 20px;
  font-size: 11.5px;
  border-radius: 999px;
}
body.dark-mode :is(#tab-dating, #tab-communities, #tab-calls) .chat-unread-badge { color: #0B1A12; }

/* ==================== Écran de conversation ==================== */
html body :is(#private-chat-modal, #group-chat-modal) .chat-screen-header {
  background: var(--wa-header) !important;
  border-bottom: 0;
  color: #fff;
  padding: 8px 8px 8px 6px;
  min-height: 60px;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-screen-header :is(h3, h2, .chat-modal-header-info, .chat-modal-header-info *) { color: #fff; }
html body :is(#private-chat-modal, #group-chat-modal) .chat-modal-status { color: rgba(255, 255, 255, .82); }
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-back-btn, .chat-modal-options-btn) {
  background: transparent !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
}
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-back-btn, .chat-modal-options-btn):hover { background: rgba(255, 255, 255, .14) !important; }

/* Fond d'écran WhatsApp */
html body :is(#private-chat-modal, #group-chat-modal) .chat-screen-messages,
html body :is(#private-chat-modal, #group-chat-modal) .chat-box-area {
  background-color: var(--wa-bg) !important;
  background-image: var(--wa-doodle) !important;
  background-size: 240px 240px !important;
  padding: 10px 14px;
}

/* Bulles */
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) {
  border-radius: 8px !important;
  padding: 6px 9px 8px !important;
  font-size: 14.5px;
  line-height: 1.38;
  font-weight: 400;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13) !important;
  max-width: 82%;
  margin-bottom: 4px;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-user {
  background: var(--wa-out) !important;
  color: var(--wa-text) !important;
  border-top-right-radius: 0 !important;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-bot {
  background: var(--wa-in) !important;
  color: var(--wa-text) !important;
  border-top-left-radius: 0 !important;
}
/* petites « queues » des bulles, en haut comme WhatsApp */
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot)::after {
  top: 0;
  bottom: auto;
  border: 0;
  width: 8px;
  height: 13px;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-user::after {
  right: -8px;
  left: auto;
  background: var(--wa-out);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-bot::after {
  left: -8px;
  right: auto;
  background: var(--wa-in);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-meta {
  color: var(--wa-meta) !important;
  font-size: 11px;
  opacity: 1;
  margin-top: 2px;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-tick { color: var(--wa-meta) !important; }
html body :is(#private-chat-modal, #group-chat-modal) .chat-tick.chat-tick-read { color: var(--wa-tick) !important; }
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-user .chat-quote-block,
html body :is(#private-chat-modal, #group-chat-modal) .chat-bubble-bot .chat-quote-block {
  background: rgba(11, 20, 26, .06);
  border-left: 4px solid #06CF9C;
  border-radius: 6px;
  color: var(--wa-text);
}
body.dark-mode :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) .chat-quote-block { background: rgba(255, 255, 255, .07); }

/* Messages vocaux dans les bulles */
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) .voice-msg-player .voice-msg-play-btn { background: transparent; color: var(--wa-meta); }
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) .voice-msg-player .voice-msg-bars span { background: rgba(102, 119, 129, .35); }
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) .voice-msg-player .voice-msg-bars-fill span { background: #06CF9C; }
html body :is(#private-chat-modal, #group-chat-modal) :is(.chat-bubble-user, .chat-bubble-bot) .voice-msg-player .voice-msg-duration { color: var(--wa-meta); }

/* Pastille de date */
html body :is(#private-chat-modal, #group-chat-modal) .chat-date-separator span {
  background: var(--wa-date) !important;
  color: var(--wa-meta) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-load-older-btn {
  background: var(--wa-date);
  color: var(--wa-meta);
  border: 0;
  border-radius: 8px;
}

/* Barre d'écriture */
html body :is(#private-chat-modal, #group-chat-modal) .chat-screen-composer {
  background: var(--wa-bg) !important;
  background-image: var(--wa-doodle) !important;
  background-size: 240px 240px !important;
  border-top: 0 !important;
  padding: 6px 8px;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex {
  background: var(--wa-input) !important;
  border: 0;
  border-radius: 26px;
  min-height: 50px;
  padding: 4px 4px 4px 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex :is(input[type=text], textarea) {
  font-size: 16px;
  color: var(--wa-text);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex :is(button.chat-input-icon-btn, label.chat-input-icon-btn) {
  color: var(--wa-meta) !important;
  background: transparent !important;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-send-btn {
  background: var(--wa-accent) !important;
  color: #fff !important;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-send-btn:hover { background: var(--wa-accent-dark) !important; }
html body :is(#private-chat-modal, #group-chat-modal) .chat-send-btn.recording { background: #F15C6D !important; }
html body :is(#private-chat-modal, #group-chat-modal) .chat-scroll-bottom-btn {
  background: var(--wa-date);
  color: var(--wa-meta);
  box-shadow: 0 1px 3px rgba(11, 20, 26, .2);
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-scroll-bottom-badge { background: var(--wa-unread); color: #fff; }

/* Réponse / modification en cours, pièces jointes */
html body :is(#private-chat-modal, #group-chat-modal) .chat-reply-preview {
  background: var(--wa-input);
  border-radius: 12px 12px 0 0;
}
html body :is(#private-chat-modal, #group-chat-modal) .chat-reply-preview-bar { background: #06CF9C; }

/* Barre de recherche dans la conversation et message épinglé */
html body :is(#private-chat-modal, #group-chat-modal) .chat-pinned-banner { background: var(--wa-panel); color: var(--wa-text); border-bottom: 1px solid var(--wa-line); }
html body :is(#private-chat-modal, #group-chat-modal) .chat-input-flex :is(input[type=text], textarea) { background: transparent !important; border: 0 !important; }