/* ==========================================================================
 * mailbox_ai — UI v2 : LAYOUT + composants (d'apres maquette_v2.html)
 * --------------------------------------------------------------------------
 * Ce fichier est charge APRES mailbox_ai.css : il porte la refonte v2 (coquille
 * pleine hauteur, barre d'icones, arbre, liste en lignes-avatars, panneau
 * contextuel) et neutralise les regles v1 devenues caduques.
 *
 * CONTRAINTES
 *  - Tailwind est VOLONTAIREMENT absent : son « preflight » (reset global)
 *    casserait le theme Perfex sur cette page. Tout est du CSS maison.
 *  - Tout est SCOPE sous .mailbox-ai-v2 : rien ne doit deborder sur le reste du
 *    CRM (menus, tables, boutons Perfex des autres pages).
 *  - Police Inter + Font Awesome 6.2 : deja fournis par Perfex, aucun CDN.
 * ======================================================================== */

.mailbox-ai-v2 {
  /* Palette maquette (surcharge la palette v1). */
  --mbx-blue: #2563eb;
  --mbx-blue-dark: #1d4ed8;
  --mbx-blue-soft: #eff6ff;
  --mbx-ink: #111827;
  --mbx-text: #374151;
  --mbx-muted: #6b7280;
  --mbx-border: #e5e7eb;
  --mbx-border-soft: #f3f4f6;
  --mbx-bg: #f8fafc;
  --mbx-navy: #1e3a8a;
  /* Hauteur du chrome Perfex au-dessus du module (header). Mesure reelle = 57px ;
     ajuste finement par JS (fitShell) au chargement/redimensionnement. */
  --mbx-chrome: 57px;
}

/* 🔴 Perfex impose min-height ~1330px sur #wrapper (pour remplir la page) : combine
   a notre shell qui fait deja 100vh, ca deborde sous le viewport => DOUBLE SCROLL +
   espace en bas. Le module gere sa propre hauteur -> on annule ce min-height. */
#wrapper.mailbox-ai-v2 { min-height: 0 !important; height: auto; }

/* Filet anti « grand espace vide » : quand le module est actif (classe posee par
   fitShell), la PAGE ne defile plus (le module gere son scroll interne). La sidebar
   Perfex reste ACCESSIBLE (defilement interne) pour ne couper aucun item de menu. */
html.mbx-fullpage, html.mbx-fullpage body { height: 100%; overflow: hidden !important; }
html.mbx-fullpage #menu { max-height: 100vh; overflow-y: auto; overflow-x: hidden; }

/* La zone de contenu Perfex impose des marges : on les annule pour que le
   module occupe toute la largeur/hauteur utile, sans toucher au theme global. */
.mailbox-ai-v2 .mbx-content-reset {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
 * Coquille
 * ======================================================================== */
.mailbox-ai-v2 .mbx-shell {
  display: flex;
  flex-direction: column;
  /* ⚠️ INDISPENSABLE : la coquille porte AUSSI .mailbox-ai-app-row, dont la regle
     v1 impose « flex-wrap: wrap » + des marges negatives de grille. En colonne
     avec une hauteur contrainte, ce wrap renvoie le split dans une 2e colonne a
     cote de la barre module (layout casse). On neutralise donc explicitement. */
  flex-wrap: nowrap !important;
  margin: 0 !important;
  height: calc(100vh - var(--mbx-chrome));
  min-height: 420px;
  background: #fff;
  border: 1px solid var(--mbx-border);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--mbx-text);
  font-size: 13px;
}

/* ==========================================================================
 * Barre module
 * ======================================================================== */
.mailbox-ai-v2 .mbx-modulebar {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--mbx-border);
  background: #fff;
}
.mailbox-ai-v2 .mbx-modulebar-left,
.mailbox-ai-v2 .mbx-modulebar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mailbox-ai-v2 .mbx-search {
  position: relative;
  width: 260px;
  max-width: 40vw;
}
.mailbox-ai-v2 .mbx-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; font-size: 12px; pointer-events: none;
}
.mailbox-ai-v2 .mbx-search-input {
  width: 100%; height: 32px;
  padding: 0 30px 0 30px;
  border: 1px solid #d1d5db; border-radius: 999px;
  background: #fff; font-size: 13px; color: var(--mbx-ink);
  outline: none;
}
.mailbox-ai-v2 .mbx-search-input:focus { border-color: var(--mbx-blue); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.mailbox-ai-v2 .mbx-search-go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--mbx-muted); border-radius: 999px; cursor: pointer;
}
.mailbox-ai-v2 .mbx-search-go:hover { background: var(--mbx-blue-soft); color: var(--mbx-blue); }

.mailbox-ai-v2 .mbx-total {
  font-size: 11px; color: var(--mbx-muted); white-space: nowrap;
  background: #f3f4f6; border-radius: 999px; padding: 3px 9px;
}

/* ==========================================================================
 * Boutons
 * ======================================================================== */
.mailbox-ai-v2 .mbx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--mbx-border); border-radius: 6px;
  background: #fff; color: var(--mbx-text);
  font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.mailbox-ai-v2 .mbx-btn:hover { background: #f9fafb; color: var(--mbx-ink); text-decoration: none; }
.mailbox-ai-v2 .mbx-btn:disabled { opacity: .55; cursor: not-allowed; }
.mailbox-ai-v2 .mbx-btn-ghost { border-color: transparent; background: transparent; }
.mailbox-ai-v2 .mbx-btn-ghost:hover { background: #f3f4f6; }
.mailbox-ai-v2 .mbx-btn-light { background: #fff; }
.mailbox-ai-v2 .mbx-btn-danger { color: #b91c1c; border-color: #fecaca; }
.mailbox-ai-v2 .mbx-btn-danger:hover { background: #fef2f2; }
.mailbox-ai-v2 .mbx-btn-ai { background: var(--mbx-blue); border-color: var(--mbx-blue); color: #fff; }
.mailbox-ai-v2 .mbx-btn-ai:hover { background: var(--mbx-blue-dark); color: #fff; }
.mailbox-ai-v2 .mbx-btn-xs { height: 26px; padding: 0 8px; font-size: 11px; }
.mailbox-ai-v2 .mbx-block { display: flex; width: 100%; justify-content: center; }

.mailbox-ai-v2 .mbx-icon-btn {
  width: 30px; height: 30px; border: 0; background: transparent;
  border-radius: 6px; color: var(--mbx-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mailbox-ai-v2 .mbx-icon-btn:hover { background: #f3f4f6; color: var(--mbx-ink); }

.mailbox-ai-v2 .mbx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: var(--mbx-text);
  font-size: 11px; font-weight: 500;
}
.mailbox-ai-v2 .mbx-chip-primary { background: var(--mbx-blue-soft); color: #1e40af; }
.mailbox-ai-v2 .mbx-chip a { color: inherit; margin-left: 2px; }

/* Menu deroulant maison (filtres) : les <select> DOIVENT rester dans le DOM
   (le JS les ecoute au ready) — on les replie ici plutot que les supprimer. */
.mailbox-ai-v2 .mbx-dd { position: relative; }
.mailbox-ai-v2 .mbx-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 250px; padding: 10px;
  background: #fff; border: 1px solid var(--mbx-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.mailbox-ai-v2 .mbx-dd.open .mbx-dd-menu { display: block; }
.mailbox-ai-v2 .mbx-dd-label {
  display: block; margin: 8px 0 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--mbx-muted);
}
.mailbox-ai-v2 .mbx-dd-label:first-child { margin-top: 0; }
.mailbox-ai-v2 .mbx-caret { font-size: 9px; opacity: .6; }

.mailbox-ai-v2 .mbx-select {
  width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; font-size: 12px; color: var(--mbx-text); outline: none;
}
.mailbox-ai-v2 .mbx-select:focus { border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-select-xs { height: 26px; font-size: 11px; width: auto; min-width: 120px; }

/* Le <select> des comptes reste dans le DOM (le JS ecoute son change) mais est
   masque : c'est l'arbre qui le pilote. */
.mailbox-ai-v2 .mbx-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
 * Split
 * ======================================================================== */
.mailbox-ai-v2 .mbx-split {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;   /* les 5 colonnes ne doivent JAMAIS passer a la ligne */
  min-height: 0;
  position: relative;
}

/* ---- Barre d'icones ---------------------------------------------------- */
.mailbox-ai-v2 .mbx-iconbar {
  flex: 0 0 48px; width: 48px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 8px 0;
  border-right: 1px solid var(--mbx-border); background: #fff;
}
.mailbox-ai-v2 .mbx-ico {
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: 6px; color: var(--mbx-muted); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.mailbox-ai-v2 .mbx-ico:hover { background: #f3f4f6; color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-ico.is-active { background: var(--mbx-blue-soft); color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-ico-add {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--mbx-blue); color: #fff; font-size: 12px;
}
.mailbox-ai-v2 .mbx-ico-add:hover { background: var(--mbx-blue-dark); color: #fff; }
.mailbox-ai-v2 .mbx-ico-sep { width: 24px; border-top: 1px solid var(--mbx-border); margin: 2px 0; }

/* ---- Arbre comptes > dossiers ------------------------------------------ */
.mailbox-ai-v2 .mbx-folders {
  flex: 0 0 224px; width: 224px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--mbx-border); background: #fff;
  transition: width .2s ease, opacity .15s ease;
}
.mailbox-ai-v2 .mbx-folders.is-collapsed {
  width: 0; flex-basis: 0; opacity: 0; border-right: 0; overflow: hidden;
}
.mailbox-ai-v2 .mbx-folders-head { padding: 10px; border-bottom: 1px solid var(--mbx-border-soft); }
.mailbox-ai-v2 .mbx-newmsg {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--mbx-border); border-radius: 6px;
  color: var(--mbx-text); font-weight: 500; font-size: 12px; text-decoration: none;
}
.mailbox-ai-v2 .mbx-newmsg:hover { background: #f9fafb; color: var(--mbx-ink); text-decoration: none; }
.mailbox-ai-v2 .mbx-tree { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.mailbox-ai-v2 .mbx-tree-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; margin-bottom: 8px;
  background: var(--mbx-blue-soft); color: #1d4ed8;
  border: 1px solid #dbeafe; border-radius: 6px;
  font-weight: 600; font-size: 12px;
}
.mailbox-ai-v2 .mbx-badge {
  background: var(--mbx-blue); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
}

/* --- Entree « Voir tous les mails » (vue unifiee) : en TETE de l'arbre -------
   Meme gabarit qu'une ligne de dossier ; etat actif = surbrillance bleue posee
   par le JS (setUnifiedActive -> .is-active). N'altere pas l'arbre des comptes. */
.mailbox-ai-v2 .mbx-tree-unified {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 8px; border-radius: 6px;
  border: 1px solid transparent;
  color: var(--mbx-text); font-size: 12px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.mailbox-ai-v2 .mbx-tree-unified > .fa { width: 14px; color: #9ca3af; font-size: 13px; }
.mailbox-ai-v2 .mbx-tree-unified:hover {
  background: #f9fafb; color: var(--mbx-ink); text-decoration: none;
}
.mailbox-ai-v2 .mbx-tree-unified.is-active {
  background: var(--mbx-blue-soft); color: #1d4ed8; border-color: #dbeafe;
}
.mailbox-ai-v2 .mbx-tree-unified.is-active > .fa { color: var(--mbx-blue); }
.mailbox-ai-v2 .mailbox-ai-unified-label {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mailbox-ai-v2 .mbx-tree-node { margin-bottom: 2px; }
.mailbox-ai-v2 .mbx-tree-head {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 4px; border-radius: 4px; cursor: pointer; color: var(--mbx-text);
}
.mailbox-ai-v2 .mbx-tree-head:hover { background: #f9fafb; }
.mailbox-ai-v2 .mbx-chev { width: 12px; font-size: 9px; color: #9ca3af; transition: transform .2s; }
.mailbox-ai-v2 .mbx-tree-node.open > .mbx-tree-head .mbx-chev { transform: rotate(90deg); }
.mailbox-ai-v2 .mbx-tree-name {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-tree-name.is-active { font-weight: 700; color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-tree-children { display: none; list-style: none; margin: 3px 0 0; padding: 0 0 0 16px; }
.mailbox-ai-v2 .mbx-tree-node.open > .mbx-tree-children { display: block; }

/* Dossiers : markup identique a celui regenere par le JS (buildFoldersHtml). */
.mailbox-ai-v2 .mailbox-ai-folder {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px;
  color: var(--mbx-text); font-size: 12px; text-decoration: none;
}
.mailbox-ai-v2 .mailbox-ai-folder:hover { background: #f9fafb; color: var(--mbx-ink); text-decoration: none; }
.mailbox-ai-v2 .mailbox-ai-folder.active { background: #f3f4f6; color: var(--mbx-ink); font-weight: 600; }
.mailbox-ai-v2 .mailbox-ai-folder > .fa { width: 13px; color: #9ca3af; font-size: 12px; }
.mailbox-ai-v2 .mailbox-ai-folder.active > .fa { color: var(--mbx-blue); }
.mailbox-ai-v2 .mailbox-ai-folder-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-ai-v2 .mailbox-ai-folder-count {
  background: transparent; color: var(--mbx-blue);
  font-size: 11px; font-weight: 700; padding: 0;
}

/* --- SOUS-DOSSIERS (hierarchie reelle, v1.1.54) ---------------------------
   Les dossiers enfants sont imbriques dans un <ul class="mbx-subfolders"> a
   l'interieur du <li> parent. Classe DISTINCTE de .mbx-tree-children (qui est
   pilotee par .mbx-tree-node.open) pour ne pas interferer avec le depliage des
   COMPTES. Le chevron est hors de l'ancre -> le clic dossier reste intact. */
.mailbox-ai-v2 li.mbx-fnode { position: relative; list-style: none; }
.mailbox-ai-v2 .mbx-subfolders {
  display: none; list-style: none; margin: 1px 0 0; padding: 0 0 0 14px;
}
.mailbox-ai-v2 li.mbx-fnode.open > .mbx-subfolders { display: block; }
.mailbox-ai-v2 .mbx-ftoggle {
  position: absolute; left: -12px; top: 6px;
  width: 12px; height: 14px; line-height: 14px; text-align: center;
  font-size: 10px; color: #9ca3af; cursor: pointer; z-index: 1;
  transition: transform .15s ease;
}
.mailbox-ai-v2 .mbx-ftoggle:hover { color: var(--mbx-ink); }
.mailbox-ai-v2 li.mbx-fnode.open > .mbx-ftoggle { transform: rotate(90deg); }
/* Indice discret que le dossier a des enfants meme quand il est replie. */
.mailbox-ai-v2 li.mbx-fnode.has-children > .mailbox-ai-folder > .mailbox-ai-folder-label {
  font-weight: 500;
}
/* Mobile (tiroir <=900px) : gouttiere un peu plus large pour une cible tactile
   confortable, sans decaler les libelles. */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-ftoggle { left: -14px; width: 16px; height: 18px; line-height: 18px; font-size: 12px; }
  .mailbox-ai-v2 .mbx-subfolders { padding-left: 16px; }
}

/* --- PASTILLES d'etiquettes sous chaque compte (filtre par tag) -----------
   Affichees quand le noeud de compte est deplie (comme les dossiers). Discret,
   n'altere pas la mise en page de l'arbre ; wrap sur plusieurs lignes. */
.mailbox-ai-v2 .mbx-tags {
  display: none; flex-wrap: wrap; gap: 4px;
  margin: 3px 0 7px; padding: 0 4px 0 16px;
}
.mailbox-ai-v2 .mbx-tree-node.open > .mbx-tags { display: flex; }
.mailbox-ai-v2 .mbx-tag-pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 7px; border-radius: 999px;
  background: #f3f4f6; border: 1px solid transparent;
  color: var(--mbx-text); font-size: 11px; line-height: 1.5;
  text-decoration: none; cursor: pointer;
}
.mailbox-ai-v2 .mbx-tag-pill:hover { background: #e9edf1; color: var(--mbx-ink); text-decoration: none; }
.mailbox-ai-v2 .mbx-tag-pill.is-active {
  background: #e6f0fb; border-color: var(--mbx-blue); color: var(--mbx-ink); font-weight: 600;
}
.mailbox-ai-v2 .mbx-tag-pill-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07) inset;
}
.mailbox-ai-v2 .mbx-tag-pill-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.mailbox-ai-v2 .mbx-tag-pill-count {
  font-size: 10px; font-weight: 700; color: var(--mbx-blue);
  background: rgba(255, 255, 255, .75); border-radius: 999px;
  padding: 0 5px; min-width: 16px; text-align: center;
}
/* --- SECTION « Tags » GLOBALE (bas de l'arbre) ----------------------------
   Une SEULE liste de pastilles valable pour TOUTES les boites (compteurs
   cross-compte). Clic -> vue unifiee filtree sur ce tag. Toujours visible (tant
   qu'il y a des etiquettes), contrairement aux pastilles par-compte retirees. */
.mailbox-ai-v2 .mbx-tags-global {
  margin: 10px 4px 4px; padding: 8px 4px 2px;
  border-top: 1px solid var(--mbx-border-soft);
}
.mailbox-ai-v2 .mbx-tags-global-head {
  display: flex; align-items: center; gap: 6px;
  margin: 0 4px 7px; padding: 0 4px;
  color: #6b7280; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.mailbox-ai-v2 .mbx-tags-global-head > .fa { font-size: 11px; color: #9ca3af; }
.mailbox-ai-v2 .mbx-tags-global-list {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px;
}
/* Mobile (<= 900px) : l'arbre passe en tiroir -> cibles tactiles plus larges. */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-tags { gap: 6px; padding-left: 14px; }
  .mailbox-ai-v2 .mbx-tag-pill { padding: 5px 10px; font-size: 12px; }
  .mailbox-ai-v2 .mbx-tag-pill-label { max-width: 55vw; }
  .mailbox-ai-v2 .mbx-tags-global-list { gap: 6px; }
}
.mailbox-ai-v2 .mbx-folders-foot {
  border-top: 1px solid var(--mbx-border-soft); padding: 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.mailbox-ai-v2 .mbx-manage-link { font-size: 11px; color: var(--mbx-muted); text-decoration: none; }
.mailbox-ai-v2 .mbx-manage-link:hover { color: var(--mbx-blue); }

/* ---- Liste ------------------------------------------------------------- */
.mailbox-ai-v2 .mbx-listpanel {
  flex: 0 0 320px; width: 320px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--mbx-border); background: #fff; min-height: 0;
}
.mailbox-ai-v2 .mbx-listbar {
  height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--mbx-border-soft);
  background: #fafbfc; color: var(--mbx-muted); font-size: 11px;
}
.mailbox-ai-v2 .mbx-listbar-folder { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.mailbox-ai-v2 .mbx-checkall { margin: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; }

.mailbox-ai-v2 .mbx-bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--mbx-blue-soft); border-bottom: 1px solid #dbeafe;
}
.mailbox-ai-v2 .mbx-bulk-count {
  background: var(--mbx-blue); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.mailbox-ai-v2 .mbx-bulk-actions { display: flex; gap: 3px; }
.mailbox-ai-v2 .mbx-muted { color: var(--mbx-muted); font-size: 11px; }

.mailbox-ai-v2 .mbx-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.mailbox-ai-v2 .mbx-loadmore { flex: 0 0 auto; padding: 8px; border-top: 1px solid var(--mbx-border-soft); }
.mailbox-ai-v2 .mbx-spinner { padding: 14px; text-align: center; color: var(--mbx-muted); }

/* ---- Ligne d'email (remplace l'ancien <tr>) ---------------------------- */
.mailbox-ai-v2 .mbx-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px 9px 7px;
  border-top: 1px solid var(--mbx-border-soft);
  border-left: 3px solid transparent;
  cursor: pointer; position: relative;
}
.mailbox-ai-v2 .mbx-row:first-child { border-top: 0; }
.mailbox-ai-v2 .mbx-row:hover { background: #f9fafb; }
.mailbox-ai-v2 .mbx-row.mailbox-ai-row-active {
  background: rgba(239,246,255,.6);
  border-left-color: var(--mbx-blue);
}
.mailbox-ai-v2 .mbx-row-check { margin: 2px 0 0; flex: 0 0 auto; }
.mailbox-ai-v2 .mbx-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; margin-top: 1px;
  border-radius: 999px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.mailbox-ai-v2 .mbx-row-main { flex: 1 1 auto; min-width: 0; }
.mailbox-ai-v2 .mbx-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mailbox-ai-v2 .mbx-row-from {
  font-size: 12px; color: var(--mbx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-row-date { flex: 0 0 auto; font-size: 11px; color: var(--mbx-muted); white-space: nowrap; }
.mailbox-ai-v2 .mbx-row-subject {
  font-size: 13px; color: var(--mbx-ink); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-row-snippet {
  font-size: 11px; color: var(--mbx-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
/* Puce « +N » : la ligne n'affiche que le 1er badge d'etiquette ; les autres sont
   resumees ici (tooltip = liste des etiquettes restantes). Decharge la ligne. */
.mailbox-ai-v2 .mailbox-ai-tag-more {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  background: #eceef1; color: #6b7280;
  font-size: 10px; font-weight: 700; line-height: 1.6; cursor: default;
}
/* Puce « boite source » des lignes en vue unifiee (identifie le compte de l'email). */
.mailbox-ai-v2 .mbx-row-account {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 7px; border-radius: 999px;
  background: #eef2ff; border: 1px solid #e0e7ff; color: #4338ca;
  font-size: 10px; font-weight: 600; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-row-account > .fa { font-size: 9px; opacity: .8; }
.mailbox-ai-v2 .mailbox-ai-bold { font-weight: 700; }
.mailbox-ai-v2 .mailbox-ai-unread .mbx-row-from,
.mailbox-ai-v2 .mailbox-ai-unread .mbx-row-subject { font-weight: 700; color: #0b1220; }

/* Actions de ligne : bande verticale CENTREE a droite (facon Gmail/Outlook), en
   superposition. Auparavant collees en bas-droite, elles chevauchaient l'extrait
   et les badges et etaient peu decouvrables. Ici : strip net a droite, fond plein,
   revele au survol de la ligne. pointer-events:auto des le survol => cliquable. */
.mailbox-ai-v2 .mbx-row-actions {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; align-items: center; gap: 1px;
  padding: 3px 5px; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.16); border: 1px solid var(--mbx-border);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.mailbox-ai-v2 .mbx-row:hover .mbx-row-actions,
.mailbox-ai-v2 .mbx-row.mailbox-ai-row-active .mbx-row-actions { opacity: 1; pointer-events: auto; }
/* 🔴 Neutralise l'opacity:0 HERITEE de la CSS v1 sur les liens d'action
   individuels (.mailbox-ai-toggle-read / .-row-delete / .-cat-dd) : leur regle
   de reveal ciblait l'ANCIENNE table (.mailbox-ai-emails-table tr:hover), absente
   en v2 -> ils restaient invisibles (opacity:0 masque tout le sous-arbre, glyphe
   inclus, meme si l'<i> a une couleur). En v2 c'est le CONTENEUR .mbx-row-actions
   qui gere le survol ; les liens doivent donc etre pleinement opaques. */
.mailbox-ai-v2 .mbx-row-actions > a,
.mailbox-ai-v2 .mbx-row-actions .mailbox-ai-cat-dd,
.mailbox-ai-v2 .mbx-row-actions .mailbox-ai-tag-dd { opacity: 1 !important; }
/* Les menus (categorie/etiquette) doivent pouvoir sortir de la ligne. */
.mailbox-ai-v2 .mbx-row-actions .dropdown-menu { z-index: 30; }
.mailbox-ai-v2 .mbx-row-actions > a,
.mailbox-ai-v2 .mbx-row-actions .dropdown > a {
  width: 27px; height: 27px; border-radius: 5px; color: #475569; /* slate-600 : nettement visible */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; text-decoration: none; cursor: pointer;
}
/* Les icones grises (.text-muted) heritent de la couleur du lien (slate-600),
   sinon elles restaient trop pales et paraissaient « invisibles ». On EXCLUT
   l'etoile (.text-warning) qui doit rester doree. */
.mailbox-ai-v2 .mbx-row-actions > a > i.text-muted,
.mailbox-ai-v2 .mbx-row-actions .dropdown > a > i.text-muted { color: #475569; }
.mailbox-ai-v2 .mbx-row-actions > a:hover,
.mailbox-ai-v2 .mbx-row-actions .dropdown > a:hover { background: #e2e8f0; color: var(--mbx-ink); }
/* L'etoile allumee reste toujours visible ET cliquable (favori visible sans survol). */
.mailbox-ai-v2 .mbx-row-actions .fa-star { color: #f59e0b; }
.mailbox-ai-v2 .mbx-row[data-starred="1"] .mbx-row-actions { opacity: 1; pointer-events: auto; }

.mailbox-ai-v2 .mbx-empty {
  padding: 36px 16px; text-align: center; color: var(--mbx-muted); font-size: 12px;
}
.mailbox-ai-v2 .mbx-empty i { font-size: 26px; opacity: .35; display: block; margin-bottom: 8px; }
.mailbox-ai-v2 .mbx-empty .bold { color: var(--mbx-text); margin-bottom: 2px; }

/* ---- Volet du mail ----------------------------------------------------- */
.mailbox-ai-v2 .mbx-mailpanel {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff;
}
.mailbox-ai-v2 .mbx-mailcard { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.mailbox-ai-v2 .mbx-mailbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--mbx-border); background: #fff;
}
/* Groupe titre = sujet + date (a cote de l'objet, facon maquette). */
.mailbox-ai-v2 .mbx-mailbar-title {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; overflow: hidden;
}
.mailbox-ai-v2 .mbx-mailbar-subject {
  flex: 0 1 auto; margin: 0; font-size: 14px; font-weight: 600; color: var(--mbx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-mailbar-date { font-size: 12px; color: var(--mbx-muted); white-space: nowrap; flex-shrink: 0; }
/* Croix de fermeture TOUJOURS a l'extreme droite. */
.mailbox-ai-v2 .mbx-mailbar-close { margin-left: auto; flex-shrink: 0; }
.mailbox-ai-v2 .mbx-mailbody { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 18px 22px; }

/* ---- Panneau contextuel ------------------------------------------------ */
.mailbox-ai-v2 .mbx-ctx {
  flex: 0 0 340px; width: 340px;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--mbx-border); background: var(--mbx-bg);
  transition: width .2s ease, opacity .15s ease;
}
.mailbox-ai-v2 .mbx-ctx.is-collapsed {
  width: 0; flex-basis: 0; opacity: 0; border-left: 0; overflow: hidden;
}
.mailbox-ai-v2 .mbx-ctx-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--mbx-border); background: #fff;
}
.mailbox-ai-v2 .mbx-ctx-title {
  margin: 0; font-size: 12px; font-weight: 700; color: var(--mbx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-ctx-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--mbx-border); background: #fff; }
.mailbox-ai-v2 .mbx-ctx-tab {
  flex: 1 1 0; padding: 8px 4px; text-align: center; cursor: pointer;
  color: var(--mbx-muted); font-size: 10px; font-weight: 500;
  border-bottom: 2px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mailbox-ai-v2 .mbx-ctx-tab i { font-size: 13px; }
.mailbox-ai-v2 .mbx-ctx-tab:hover { color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-ctx-tab.active { color: var(--mbx-blue); border-bottom-color: var(--mbx-blue); background: var(--mbx-blue-soft); }
.mailbox-ai-v2 .mbx-ctx-pane { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 10px; }
.mailbox-ai-v2 .mbx-ctx-pane.hidden { display: none; }
.mailbox-ai-v2 .mbx-ctx-empty { padding: 30px 12px; text-align: center; color: var(--mbx-muted); font-size: 11px; }
.mailbox-ai-v2 .mbx-ctx-empty i { font-size: 26px; opacity: .3; display: block; margin-bottom: 8px; }

/* Contenu injecte par le JS dans le panneau (fiche societe, verdict, sources) */
.mailbox-ai-v2 .mbx-ctx-pane .panel-body { padding: 10px !important; background: #fff; border: 1px solid var(--mbx-border); border-radius: 8px; margin-bottom: 8px; }
.mailbox-ai-v2 .mbx-ctx-pane .table { margin-bottom: 4px; font-size: 12px; }
.mailbox-ai-v2 .mbx-ctx-pane .table > tbody > tr > td { padding: 4px 6px; border-top: 1px solid var(--mbx-border-soft); }
.mailbox-ai-v2 .mailbox-ai-web-sources a { display: inline-block; margin-right: 6px; }

/* ---- Barre de defilement fine ----------------------------------------- */
.mailbox-ai-v2 .mbx-tree::-webkit-scrollbar,
.mailbox-ai-v2 .mbx-list::-webkit-scrollbar,
.mailbox-ai-v2 .mbx-mailbody::-webkit-scrollbar,
.mailbox-ai-v2 .mbx-ctx-pane::-webkit-scrollbar { width: 6px; }
.mailbox-ai-v2 .mbx-tree::-webkit-scrollbar-thumb,
.mailbox-ai-v2 .mbx-list::-webkit-scrollbar-thumb,
.mailbox-ai-v2 .mbx-mailbody::-webkit-scrollbar-thumb,
.mailbox-ai-v2 .mbx-ctx-pane::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.mailbox-ai-v2 .mbx-list:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* ==========================================================================
 * Neutralisation des regles v1 devenues caduques (layout en colonnes/cartes)
 * ======================================================================== */
/* ⚠️ NE PAS remettre « width:auto » ici : ces elements portent AUSSI les classes
   .mbx-* qui fixent les largeurs (320px, 340px...). A specificite egale (0,2,0),
   la derniere regle du fichier l'emporterait et ecraserait ces largeurs — la
   liste retombait a ~208px et les objets etaient tronques. On se limite donc a
   annuler le float et les gouttieres de la grille v1. */
.mailbox-ai-v2 .mailbox-ai-side,
.mailbox-ai-v2 .mailbox-ai-main,
.mailbox-ai-v2 .mailbox-ai-split,
.mailbox-ai-v2 .mailbox-ai-split-list,
.mailbox-ai-v2 .mailbox-ai-split-reading {
  float: none; padding: 0; margin: 0;
}

/* Le split v1 (« facon Outlook ») imposait des proportions en % et un volet de
   lecture colle : ces proprietes ne sont PAS couvertes par mes regles .mbx-*
   (je redefinis flex/width mais pas max-width/position) et gagnaient donc.
   Resultat observe : liste ecrasee a ~208px + objets tronques. */
.mailbox-ai-v2 .mbx-listpanel { max-width: none; min-width: 0; }
.mailbox-ai-v2 .mbx-mailpanel {
  max-width: none; max-height: none;
  position: static; top: auto; align-self: auto;
}
/* v1 masquait la sidebar sous 991px (.mailbox-ai-side-collapse{display:none}) :
   en v2 c'est la media query 900px + les tiroirs qui pilotent l'affichage. */
.mailbox-ai-v2 .mbx-folders { display: flex; }
.mailbox-ai-v2 .mbx-shell .panel_s { box-shadow: none; border: 0; margin: 0; background: transparent; }
.mailbox-ai-v2 .mbx-hide { display: none !important; }

/* --- Neutralisation de la CSS v1 « mobile » (mailbox_ai.css @media <=991px) qui
   FUYAIT sur des elements PARTAGES : le volet de lecture porte AUSSI la classe v1
   .mailbox-ai-split-reading (hauteur 100vh + position fixed + display:none <=991),
   et les boutons Retour/Fermer inversaient leur affichage des ~991px. Ces regles
   parasitaient la bande 901-991 (tablette). On reprend la main ici en v2 (0,2,0 >
   0,1,0) : la SEULE source de verite du comportement mobile est la media query
   <=900px plus bas. Ces defauts s'appliquent donc au-dessus de 900px. --- */
.mailbox-ai-v2 .mbx-mailpanel { height: auto; overflow: visible; }
.mailbox-ai-v2 .mailbox-ai-reading-back { display: none; }   /* Retour : mobile uniquement */
.mailbox-ai-v2 .mbx-mailbar-close { display: inline-flex; }  /* Fermer : visible en desktop */
.mailbox-ai-v2 .mbx-mailbar-ctx { display: none; }           /* Infos contextuelles : mobile uniquement */

/* ==========================================================================
 * Responsive (seuils de la maquette)
 * ======================================================================== */
@media (max-width: 1400px) {
  .mailbox-ai-v2 .mbx-ctx { flex-basis: 300px; width: 300px; }
}

/* Zone 1100-1350 : les 5 colonnes (48 + 222 + 320 + 300 de chrome = 890px) ne
   laissaient que 3px au mail a 1150px de large. On replie donc l'arbre des ce
   seuil (et non a 1100) : le mail garde >= ~420px partout. */
@media (max-width: 1350px) {
  .mailbox-ai-v2 .mbx-folders { flex-basis: 0; width: 0; opacity: 0; border-right: 0; overflow: hidden; }

}

/* L'arbre doit RESTER ATTEIGNABLE entre 901 et 1350px : la media query
   ci-dessus le met a width:0, et sans cette regle elle gagnait sur la classe
   .is-open posee par le bouton => dossiers totalement inaccessibles.
   On le rouvre EN SUPERPOSITION (pas de place reprise dans le flux).
   Borne basse a 901px : sous 900px c'est le tiroir mobile qui pilote. */
@media (min-width: 901px) and (max-width: 1350px) {
  .mailbox-ai-v2 .mbx-folders.is-open {
    position: absolute; top: 0; bottom: 0; left: 48px; z-index: 45;
    flex-basis: 222px; width: 222px; opacity: 1; overflow: auto;
    border-right: 1px solid var(--mbx-border);
    box-shadow: 4px 0 20px rgba(15,23,42,.15);
  }
}

/* Sous 1500px, le panneau contextuel passe EN SUPERPOSITION au lieu de prendre
   sa place dans le flux : sinon il reprend les 300px qu'on vient de liberer et
   le mail se retrouve ecrase a nouveau (mesure : 252px de mail a 1400px, soit
   la largeur d'un portable courant). Comportement standard des webmails. */
@media (max-width: 1500px) {
  .mailbox-ai-v2 .mbx-ctx {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 40;
    box-shadow: -4px 0 20px rgba(15,23,42,.15);
  }
}

@media (max-width: 1100px) {
  .mailbox-ai-v2 .mbx-listpanel { flex-basis: 260px; width: 260px; }
  .mailbox-ai-v2 .mbx-ctx { flex-basis: 280px; width: 280px; }
}
/* Bande tablette 769-900 : on masque les libelles de boutons pour eviter
   l'encombrement de la barre module (icones seules). */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-hide-sm { display: none !important; }
}

/* ==========================================================================
 * MOBILE (<= 900px) — layout MONO-COLONNE pilote par NAVIGATION.
 * Webmail pleinement utilisable au pouce, ZERO scroll horizontal.
 *   - Comptes/dossiers  = tiroir GAUCHE (offcanvas), ouvert par le hamburger.
 *   - Liste d'emails    = vue plein largeur PAR DEFAUT.
 *   - Email ouvert      = plein ecran par-dessus la liste (barre sticky + Retour).
 *   - Panneau contextuel= tiroir DROIT, ouvert depuis la vue mail (bouton infos).
 *   - Compose / Chatbot = feuilles plein ecran (blocs dedies plus bas).
 * Tout est SOUS .mailbox-ai-v2 -> le desktop (> 900px) reste STRICTEMENT inchange.
 * ======================================================================== */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-total { display: none; }
  .mailbox-ai-v2 .mbx-mailbody { padding: 12px 14px; }

  /* La coquille : fitShell fixe la hauteur en INLINE (prioritaire) ; ce calc
     n'est qu'un repli avant l'execution du JS. Bords a plat (plein cadre). */
  .mailbox-ai-v2 .mbx-shell { height: calc(100vh - 96px); border-radius: 0; border-left: 0; border-right: 0; }

  /* Le split devient la SCENE des tiroirs superposes. */
  .mailbox-ai-v2 .mbx-split { position: relative; }

  /* Barre d'icones verticale masquee : ses fonctions passent par le hamburger,
     le FAB « composer » et le bouton « infos » de la vue mail. */
  .mailbox-ai-v2 .mbx-iconbar { display: none; }

  /* ---- Barre module : la recherche prend la largeur ; en LECTURE on ne garde
     que les actions du mail (le reste vit dans la vue plein ecran). ---------- */
  .mailbox-ai-v2 .mbx-modulebar { padding: 0 8px; gap: 6px; }
  .mailbox-ai-v2 .mbx-modulebar-left { flex: 1 1 auto; min-width: 0; }
  .mailbox-ai-v2 .mbx-search { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  .mailbox-ai-v2 .mailbox-ai-reading-open .mbx-modulebar-left,
  .mailbox-ai-v2 .mailbox-ai-reading-open #mailbox_ai_ai_summarize,
  .mailbox-ai-v2 .mailbox-ai-reading-open #mailbox_ai_sync_btn { display: none; }

  /* ---- Arbre Comptes/Dossiers = TIROIR GAUCHE (offcanvas) ----------------- */
  .mailbox-ai-v2 .mbx-folders {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 70;
    width: 86%; max-width: 300px; flex-basis: auto;
    display: flex; opacity: 1; overflow: hidden;
    border-right: 1px solid var(--mbx-border);
    box-shadow: 4px 0 24px rgba(15,23,42,.20);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  .mailbox-ai-v2 .mbx-folders.is-open { transform: translateX(0); }

  /* ---- Liste = vue PLEIN LARGEUR par defaut ------------------------------ */
  .mailbox-ai-v2 .mbx-listpanel {
    display: flex; flex: 1 1 auto; width: 100%; max-width: none;
    min-width: 0; border-right: 0;
  }
  /* Rangees plus lisibles + cibles tactiles. Les actions au SURVOL sont
     masquees (inatteignables au tactile) : on ouvre le mail (repondre/etoile/
     supprimer y sont) ou on coche pour les actions groupees. */
  .mailbox-ai-v2 .mbx-row { padding: 11px 12px 11px 10px; }
  .mailbox-ai-v2 .mbx-row-from { font-size: 13px; }
  .mailbox-ai-v2 .mbx-row-subject { font-size: 14px; }
  .mailbox-ai-v2 .mbx-row-snippet { font-size: 12px; }
  .mailbox-ai-v2 .mbx-row-check { width: 18px; height: 18px; }
  .mailbox-ai-v2 .mbx-row-actions { display: none; }

  /* ---- Email ouvert = PLEIN ECRAN par-dessus la liste -------------------- */
  .mailbox-ai-v2 .mbx-mailpanel {
    position: absolute; inset: 0; z-index: 50;
    display: none; height: auto; overflow: hidden; background: #fff;
  }
  .mailbox-ai-v2 .mbx-mailpanel.is-open { display: flex; }
  /* Barre superieure STICKY : Retour (gros), sujet, infos, (fermer masque). */
  .mailbox-ai-v2 .mbx-mailbar { position: sticky; top: 0; z-index: 2; padding: 6px 8px; gap: 4px; }
  .mailbox-ai-v2 .mailbox-ai-reading-back { display: inline-flex; }
  .mailbox-ai-v2 .mbx-mailbar-ctx { display: inline-flex; }
  .mailbox-ai-v2 .mbx-mailbar-close { display: none; }   /* le Retour suffit */
  .mailbox-ai-v2 .mbx-mailbar .mailbox-ai-modal-category { display: none; }
  .mailbox-ai-v2 .mbx-mailbar-subject { font-size: 15px; }
  .mailbox-ai-v2 .mbx-mailview { padding: 14px 14px 28px; }

  /* ---- Panneau contextuel = TIROIR DROIT -------------------------------- */
  .mailbox-ai-v2 .mbx-ctx {
    position: absolute; top: 0; right: 0; bottom: 0; left: auto; z-index: 72;
    width: 92%; max-width: 380px; flex-basis: auto;
    display: none; opacity: 1; transform: none;
    border-left: 1px solid var(--mbx-border);
    box-shadow: -4px 0 24px rgba(15,23,42,.20);
  }
  .mailbox-ai-v2 .mbx-ctx.is-drawer { display: flex; }
  .mailbox-ai-v2 .mbx-ctx-tab span { font-size: 10px; }

  /* ---- Voile commun a tous les tiroirs ---------------------------------- */
  .mailbox-ai-v2 .mbx-backdrop {
    display: none; position: absolute; inset: 0; z-index: 60;
    background: rgba(15,23,42,.42);
  }
  .mailbox-ai-v2 .mbx-backdrop.is-open { display: block; }

  /* ---- Cibles tactiles >= 44px (recommandation d'accessibilite mobile) --- */
  .mailbox-ai-v2 .mbx-icon-btn,
  .mailbox-ai-v2 .mailbox-ai-reading-back,
  .mailbox-ai-v2 .mbx-mailbar-ctx,
  .mailbox-ai-v2 .mbx-ctx-head .mbx-icon-btn { width: 44px; height: 44px; font-size: 17px; }
  /* La mailbar est un conteneur flex charge (Retour + sujet + infos) : sans
     flex-shrink:0 + min-width, le bouton « infos » et le « Retour » se font
     ecraser (mesures : ~29px). On garantit la cible tactile de 44px. */
  .mailbox-ai-v2 .mbx-mailbar-ctx,
  .mailbox-ai-v2 .mailbox-ai-reading-back { flex-shrink: 0; min-width: 44px; }
  /* Boutons a libelle (icone seule ou icone+texte) : hauteur confortable ;
     largeur toujours >= la hauteur -> surface tactile suffisante. */
  .mailbox-ai-v2 .mbx-btn { min-height: 40px; }
  .mailbox-ai-v2 .mbx-mailactions .mbx-btn { min-width: 44px; justify-content: center; }
  .mailbox-ai-v2 .mbx-search-input { height: 40px; }
}

/* Tres petits telephones : tiroirs quasi plein ecran. */
@media (max-width: 420px) {
  .mailbox-ai-v2 .mbx-folders { width: 88%; max-width: 320px; }
  .mailbox-ai-v2 .mbx-ctx { width: 100%; max-width: none; }
}

/* ==========================================================================
 * Panneau contextuel — Onglet CRM (fiche + carte + timeline + actions)
 * Design porte de maquette_v2.html (cartes blanches, timeline a pastilles).
 * ======================================================================== */
.mailbox-ai-v2 .mbx-crm-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.mailbox-ai-v2 .mbx-ctx-loading { padding: 28px; text-align: center; color: var(--mbx-muted); }
.mailbox-ai-v2 .mbx-crm-card {
  background: #fff; border: 1px solid var(--mbx-border); border-radius: 8px;
  padding: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.mailbox-ai-v2 .mbx-crm-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mailbox-ai-v2 .mbx-crm-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #1e3a8a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.mailbox-ai-v2 .mbx-crm-ident { min-width: 0; }
.mailbox-ai-v2 .mbx-crm-name { font-weight: 700; color: var(--mbx-ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailbox-ai-v2 .mbx-crm-company { font-size: 11px; color: var(--mbx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailbox-ai-v2 .mbx-crm-fields { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #475569; }
.mailbox-ai-v2 .mbx-crm-field { display: flex; align-items: flex-start; gap: 8px; word-break: break-word; }
.mailbox-ai-v2 .mbx-crm-field > i { width: 14px; text-align: center; color: #94a3b8; margin-top: 2px; flex-shrink: 0; }
.mailbox-ai-v2 .mbx-crm-field .mbx-crm-pin { color: #ef4444; }
.mailbox-ai-v2 .mbx-crm-map {
  width: 100%; height: 150px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--mbx-border); margin-top: 10px; background: #e8eef3; z-index: 0;
}
.mailbox-ai-v2 .mbx-crm-map .leaflet-container { background: #e8eef3; font: inherit; }
.mailbox-ai-v2 .mbx-crm-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mailbox-ai-v2 .mbx-crm-card-head h4 { font-size: 12px; font-weight: 700; color: #334155; margin: 0; }
.mailbox-ai-v2 .mbx-crm-ext { color: #94a3b8; font-size: 11px; }
.mailbox-ai-v2 .mbx-crm-ext:hover { color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-crm-summary { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0; }
.mailbox-ai-v2 .mbx-crm-summary > i { color: var(--mbx-blue); margin-right: 4px; }
.mailbox-ai-v2 .mbx-crm-empty-line { font-size: 12px; color: var(--mbx-muted); margin: 0; }

/* Timeline a pastilles colorees (barre verticale + dots) */
.mailbox-ai-v2 .mbx-crm-timeline { position: relative; padding-left: 22px; }
.mailbox-ai-v2 .mbx-crm-timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--mbx-border);
}
.mailbox-ai-v2 .mbx-tl-item { position: relative; padding-bottom: 12px; }
.mailbox-ai-v2 .mbx-tl-item:last-child { padding-bottom: 0; }
.mailbox-ai-v2 .mbx-tl-dot {
  position: absolute; left: -22px; top: 1px; width: 18px; height: 18px; border-radius: 999px;
  background: #fff; border: 2px solid #3b82f6; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #2563eb;
}
.mailbox-ai-v2 .mbx-tl-title { font-weight: 600; font-size: 12px; color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-tl-detail { font-size: 11px; color: #64748b; margin-top: 1px; }
.mailbox-ai-v2 .mbx-tl-when { font-size: 10px; color: #94a3b8; margin-top: 1px; }
.mailbox-ai-v2 .mbx-tl-link { text-decoration: none; display: block; }
.mailbox-ai-v2 .mbx-tl-link:hover .mbx-tl-title { color: var(--mbx-blue); }

.mailbox-ai-v2 .mbx-crm-actions { display: flex; flex-direction: column; gap: 8px; }
.mailbox-ai-v2 .mbx-crm-act {
  width: 100%; padding: 8px 10px; border: 1px solid var(--mbx-border); border-radius: 6px;
  background: #fff; color: #334155; font-size: 12px; font-weight: 500; cursor: pointer; text-align: left;
}
.mailbox-ai-v2 .mbx-crm-act:hover { background: #f8fafc; border-color: var(--mbx-blue); color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-crm-act > i { margin-right: 6px; }

/* ==========================================================================
 * Onglet CRM ENRICHI (v1.1.40) — fiche meta, synthese financiere, sections
 * repliables (factures/devis/projets/contrats/tickets/contacts). 100% DB.
 * ======================================================================== */
/* -- Fiche contact enrichie -- */
.mailbox-ai-v2 .mbx-crm-role { font-size: 11px; color: #475569; font-weight: 600; margin-top: 1px; }
.mailbox-ai-v2 .mbx-crm-company-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.mailbox-ai-v2 .mbx-crm-company-link:hover { color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-crm-company-link > i { font-size: 9px; opacity: .6; }
.mailbox-ai-v2 .mbx-crm-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11px; color: var(--mbx-muted); }
.mailbox-ai-v2 .mbx-crm-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mailbox-ai-v2 .mbx-crm-meta i { color: #94a3b8; }
.mailbox-ai-v2 .mbx-crm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mailbox-ai-v2 .mbx-crm-tag {
  font-size: 10px; font-weight: 600; color: #4338ca; background: #eef2ff;
  border: 1px solid #e0e7ff; border-radius: 999px; padding: 2px 8px;
}

/* -- Synthese financiere -- */
.mailbox-ai-v2 .mbx-crm-badge {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-crm-badge-due { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; }
.mailbox-ai-v2 .mbx-crm-badge-ok  { color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; }
.mailbox-ai-v2 .mbx-crm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mailbox-ai-v2 .mbx-crm-stat {
  background: #f8fafc; border: 1px solid var(--mbx-border-soft, #eef2f7); border-radius: 7px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.mailbox-ai-v2 .mbx-crm-stat-v { font-size: 14px; font-weight: 700; color: var(--mbx-ink); line-height: 1.2; word-break: break-word; }
.mailbox-ai-v2 .mbx-crm-v-paid { color: #16a34a; }
.mailbox-ai-v2 .mbx-crm-v-due  { color: #dc2626; }
.mailbox-ai-v2 .mbx-crm-stat-l { font-size: 10px; color: var(--mbx-muted); text-transform: uppercase; letter-spacing: .02em; }
.mailbox-ai-v2 .mbx-crm-stat-sub { text-transform: none; letter-spacing: 0; color: #dc2626; }
.mailbox-ai-v2 .mbx-crm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mailbox-ai-v2 .mbx-crm-pill {
  font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
  border: 1px solid transparent; white-space: nowrap; display: inline-block;
}
.mailbox-ai-v2 .mbx-crm-summary-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--mbx-border); }
.mailbox-ai-v2 .mbx-crm-summary-foot > i { color: #64748b; }

/* -- Sections repliables -- */
.mailbox-ai-v2 .mbx-crm-sec-head { cursor: pointer; user-select: none; margin-bottom: 0; }
.mailbox-ai-v2 .mbx-crm-sec-head h4 { display: flex; align-items: center; gap: 6px; }
.mailbox-ai-v2 .mbx-crm-sec-ic { color: #94a3b8; font-size: 11px; }
.mailbox-ai-v2 .mbx-crm-count {
  font-size: 10px; font-weight: 700; color: #475569; background: #f1f5f9;
  border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}
.mailbox-ai-v2 .mbx-crm-chevron { color: #cbd5e1; font-size: 11px; transition: transform .18s ease; }
.mailbox-ai-v2 .mbx-crm-sec.is-open .mbx-crm-chevron { transform: rotate(180deg); }
.mailbox-ai-v2 .mbx-crm-sec-body { display: none; margin-top: 10px; }
.mailbox-ai-v2 .mbx-crm-sec.is-open .mbx-crm-sec-body { display: block; }

/* -- Listes (lignes cliquables vers Perfex) -- */
.mailbox-ai-v2 .mbx-crm-list { display: flex; flex-direction: column; }
.mailbox-ai-v2 .mbx-crm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 4px; border-top: 1px solid var(--mbx-border-soft, #eef2f7);
  text-decoration: none; color: inherit;
}
.mailbox-ai-v2 .mbx-crm-list > .mbx-crm-row:first-child { border-top: 0; }
.mailbox-ai-v2 a.mbx-crm-row:hover { background: #f8fafc; }
.mailbox-ai-v2 .mbx-crm-row-col { flex-direction: column; align-items: stretch; gap: 5px; }
.mailbox-ai-v2 .mbx-crm-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
.mailbox-ai-v2 .mbx-crm-row-col .mbx-crm-row-main { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.mailbox-ai-v2 .mbx-crm-row-t { font-size: 12px; font-weight: 600; color: var(--mbx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailbox-ai-v2 .mbx-crm-row-d { font-size: 10px; color: var(--mbx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailbox-ai-v2 .mbx-crm-row-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mailbox-ai-v2 .mbx-crm-row-amt { font-size: 12px; font-weight: 700; color: #334155; white-space: nowrap; }
.mailbox-ai-v2 .mbx-crm-row-static:hover { background: transparent; }
.mailbox-ai-v2 .mbx-crm-row-off .mbx-crm-row-t { color: var(--mbx-muted); font-weight: 500; }
.mailbox-ai-v2 .mbx-crm-off-tag { font-size: 10px; color: #cbd5e1; font-weight: 400; }
.mailbox-ai-v2 .mbx-crm-morerow { font-size: 11px; color: var(--mbx-muted); padding: 6px 4px 0; text-align: center; }

/* -- Barre de progression projet (ligne en colonne : nom+statut / barre / %) -- */
.mailbox-ai-v2 .mbx-crm-prog { height: 6px; width: 100%; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.mailbox-ai-v2 .mbx-crm-prog-bar { height: 100%; background: var(--mbx-blue, #3b82f6); border-radius: 999px; }
.mailbox-ai-v2 .mbx-crm-prog-l { font-size: 10px; color: var(--mbx-muted); font-weight: 600; align-self: flex-end; }

/* ==========================================================================
 * Barre d'actions de l'email OUVERT (dans l'en-tete module) — point C
 * Masquee tant qu'aucun email n'est ouvert (#mailbox_ai_app.mailbox-ai-reading-open).
 * ======================================================================== */
.mailbox-ai-v2 .mbx-mailactions { display: none; align-items: center; gap: 4px; margin-right: 8px; }
/* .mailbox-ai-v2 est sur #wrapper ; .mailbox-ai-reading-open est ajoutee par le JS
   sur #mailbox_ai_app (enfant). La barre s'affiche donc quand un email est ouvert. */
.mailbox-ai-v2 .mailbox-ai-reading-open .mbx-mailactions { display: flex; }
.mailbox-ai-v2 .mbx-mailactions-sep { width: 1px; height: 18px; background: var(--mbx-border); margin: 0 4px; }

/* ==========================================================================
 * Vue mail EPUREE (maquette) — points 1 & D
 * ======================================================================== */
.mailbox-ai-v2 .mbx-mailview { padding: 22px 26px; max-width: 900px; margin: 0 auto; }
.mailbox-ai-v2 .mbx-mv-head { margin-bottom: 18px; }
.mailbox-ai-v2 .mbx-mv-subject-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mailbox-ai-v2 .mbx-mv-subject { font-size: 21px; font-weight: 700; color: var(--mbx-ink); margin: 0 0 14px; line-height: 1.25; }
.mailbox-ai-v2 .mbx-mv-date { font-size: 12px; color: var(--mbx-muted); white-space: nowrap; margin-top: 3px; }
.mailbox-ai-v2 .mbx-mv-meta { display: flex; align-items: flex-start; gap: 12px; }
.mailbox-ai-v2 .mbx-mv-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #1e3a8a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.mailbox-ai-v2 .mbx-mv-meta-text { flex: 1; min-width: 0; font-size: 13px; }
.mailbox-ai-v2 .mbx-mv-from { color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-mv-to, .mailbox-ai-v2 .mbx-mv-cc { font-size: 12px; margin-top: 2px; }
/* align-items: stretch -> les chips Etiquettes et CRM ont la MEME hauteur
   (sinon la chip CRM, plus chargee, depassait et paraissait mal alignee). */
.mailbox-ai-v2 .mbx-mv-chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 12px; }
.mailbox-ai-v2 .mbx-mv-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid var(--mbx-border); border-radius: 6px;
  padding: 5px 10px; font-size: 12px; color: #475569;
}
.mailbox-ai-v2 .mbx-mv-chip .mailbox-ai-tag-badge {
  padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #e2e8f0; color: #334155;
}
.mailbox-ai-v2 .mbx-mv-chip-add, .mailbox-ai-v2 .mbx-mv-chip-btn {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--mbx-blue); background: #fff; border: 1px solid var(--mbx-border);
  border-radius: 5px; padding: 2px 7px; cursor: pointer; text-decoration: none;
}
.mailbox-ai-v2 .mbx-mv-chip-add:hover, .mailbox-ai-v2 .mbx-mv-chip-btn:hover { background: #eff6ff; border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-mv-chip .mailbox-ai-crm-search-wrap { position: relative; display: block; width: 100%; margin-top: 6px; }
/* Badges CRM (contact / societe) LISIBLES dans la chip : les classes Perfex
   .label rendaient un fond quasi transparent + texte blanc = illisible. On force
   un style pastille clair a bon contraste (bleu doux), sans !important pour rester
   surchargable. */
.mailbox-ai-v2 .mbx-mv-chip .mailbox-ai-crm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  padding: 2px 9px; border-radius: 11px; font-size: 11px; font-weight: 600;
  text-decoration: none; line-height: 1.6;
}
.mailbox-ai-v2 .mbx-mv-chip a.mailbox-ai-crm-badge:hover { background: #dbeafe; color: #1e40af; }
.mailbox-ai-v2 .mbx-mv-chip .mailbox-ai-crm-badge > i { color: inherit; }

/* --- Boite AI ASSISTANT --- */
.mailbox-ai-v2 .mbx-ai-box { border: 1px solid #bfdbfe; border-radius: 10px; overflow: hidden; margin-bottom: 22px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.mailbox-ai-v2 .mbx-ai-box-head {
  background: #eff6ff; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; border-bottom: 1px solid #bfdbfe;
}
.mailbox-ai-v2 .mbx-ai-box-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mailbox-ai-v2 .mbx-ai-tag { font-weight: 700; color: #1e3a8a; font-size: 13px; }
.mailbox-ai-v2 .mbx-ai-badge { background: var(--mbx-blue); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 4px; font-weight: 500; }
.mailbox-ai-v2 .mbx-ai-box-head-right { display: flex; gap: 8px; flex-wrap: wrap; }
.mailbox-ai-v2 .mbx-ai-webbtn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  background: #fff; border: 1px solid #bfdbfe; color: #1d4ed8; border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.mailbox-ai-v2 .mbx-ai-webbtn:hover { background: #dbeafe; }
.mailbox-ai-v2 .mbx-ai-box-body { padding: 14px; background: #f8fafc; }
/* Chevron de repli de la boite AI ASSISTANT. */
.mailbox-ai-v2 .mbx-ai-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid #bfdbfe;
  background: #fff; color: #1d4ed8; cursor: pointer; font-size: 12px;
}
.mailbox-ai-v2 .mbx-ai-collapse:hover { background: #dbeafe; }
.mailbox-ai-v2 .mbx-ai-box.collapsed .mbx-ai-box-body { display: none; }
/* Bouton « Relancer le resume » : secondaire compact (le resume est desormais
   automatique a l'ouverture ; ce bouton ne sert qu'a forcer un nouvel appel IA). */
.mailbox-ai-v2 .mbx-ai-summarize-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  background: #fff; color: #475569; border: 1px solid var(--mbx-border); border-radius: 6px;
  padding: 5px 11px; cursor: pointer; margin-top: 4px;
}
.mailbox-ai-v2 .mbx-ai-summarize-btn:hover { background: #f1f5f9; border-color: var(--mbx-blue); color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-ai-summarize-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Resume : PAS d'encart (border/fond) — il vit deja dans la boite AI (fond dedie). */
.mailbox-ai-v2 .mbx-ai-result { margin: 0 0 10px; font-size: 13px; color: #334155; line-height: 1.55; }
.mailbox-ai-v2 .mbx-ai-result:empty { display: none; }
.mailbox-ai-v2 .mbx-ai-sum-para { margin: 0 0 8px; }
.mailbox-ai-v2 .mbx-ai-sum-list { margin: 4px 0 0; padding-left: 18px; }
.mailbox-ai-v2 .mbx-ai-sum-list li { margin-bottom: 4px; }
/* Neutralise l'ancien encart v1 du resume (au cas ou un rendu le reintroduirait). */
.mailbox-ai-v2 .mbx-ai-result .mailbox-ai-ai-summary-box { border: 0; background: transparent; padding: 0; }
.mailbox-ai-v2 .mbx-ai-subtitle { font-size: 13px; font-weight: 700; color: var(--mbx-ink); margin: 14px 0 8px; }
.mailbox-ai-v2 .mbx-ai-suggested { display: flex; flex-wrap: wrap; gap: 8px; }
.mailbox-ai-v2 .mbx-ai-action {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  background: #fff; border: 1px solid var(--mbx-border); color: #374151; border-radius: 6px;
  padding: 7px 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04); text-decoration: none;
}
.mailbox-ai-v2 .mbx-ai-action:hover { background: #f1f5f9; border-color: var(--mbx-blue); color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-ai-action[disabled] { opacity: .55; cursor: not-allowed; }
.mailbox-ai-v2 .mbx-ai-websearch { display: block; margin-top: 10px; font-size: 12px; color: var(--mbx-muted); }
.mailbox-ai-v2 .mbx-ai-suggestions { margin-top: 12px; }

/* ==========================================================================
 * Panneaux contextuels EN CARTES — « Enrichir WEB » & « Verif. » (point 3)
 * Maquette lignes 795-907. Scope .mailbox-ai-v2, classes mbx-*.
 * ======================================================================== */
/* En-tete de pane : titre + badge cache + bouton Actualiser. */
.mailbox-ai-v2 .mbx-web-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.mailbox-ai-v2 .mbx-web-head-title { font-size: 13px; font-weight: 700; color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-web-head-right { display: inline-flex; align-items: center; gap: 6px; }
.mailbox-ai-v2 .mbx-web-cached {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
  color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 10px; padding: 1px 7px;
}
.mailbox-ai-v2 .mbx-web-refresh, .mailbox-ai-v2 .mbx-sec-refresh {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: #1d4ed8; background: #fff; border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 4px 9px; cursor: pointer;
}
.mailbox-ai-v2 .mbx-web-refresh:hover, .mailbox-ai-v2 .mbx-sec-refresh:hover { background: #dbeafe; }

/* Carte blanche generique du pane. */
.mailbox-ai-v2 .mbx-web-card {
  background: #fff; border: 1px solid var(--mbx-border); border-radius: 8px;
  padding: 12px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.mailbox-ai-v2 .mbx-web-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.mailbox-ai-v2 .mbx-web-card-h > span:first-child { font-size: 12px; font-weight: 700; color: #334155; }
.mailbox-ai-v2 .mbx-web-card-h > span:first-child > i { margin-right: 5px; }
.mailbox-ai-v2 .mbx-badge-ok {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 1px 7px;
}

/* Bloc identite « Societe identifiee ». */
.mailbox-ai-v2 .mbx-web-ident { text-align: center; padding: 4px 0 12px; }
.mailbox-ai-v2 .mbx-web-logo {
  width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.mailbox-ai-v2 .mbx-web-ident-name { font-weight: 700; color: var(--mbx-ink); font-size: 14px; word-break: break-word; }
.mailbox-ai-v2 .mbx-web-ident-sub { font-size: 11px; color: var(--mbx-muted); margin-top: 2px; }

/* Grille d'infos (site/effectif/SIREN/SIRET...). */
.mailbox-ai-v2 .mbx-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mailbox-ai-v2 .mbx-info-card {
  background: #f8fafc; border: 1px solid var(--mbx-border); border-radius: 8px; padding: 8px 10px; min-width: 0;
}
.mailbox-ai-v2 .mbx-info-label { color: var(--mbx-muted); font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.mailbox-ai-v2 .mbx-info-value { color: var(--mbx-ink); font-weight: 600; font-size: 12px; margin-top: 2px; word-break: break-word; }
.mailbox-ai-v2 .mbx-info-value a { color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-na { color: #9ca3af; font-weight: 500; font-style: italic; }

/* Listes cle/valeur (infos juridiques, identite, verifications). */
.mailbox-ai-v2 .mbx-kv { display: flex; flex-direction: column; gap: 7px; }
.mailbox-ai-v2 .mbx-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.mailbox-ai-v2 .mbx-kv-k { color: var(--mbx-muted); flex-shrink: 0; }
.mailbox-ai-v2 .mbx-kv-v { color: #334155; font-weight: 600; text-align: right; word-break: break-word; }
.mailbox-ai-v2 .mbx-kv-v.mbx-na { font-weight: 500; }
.mailbox-ai-v2 .mbx-kv-empty { font-size: 12px; color: var(--mbx-muted); font-style: italic; }

/* Bloc activite / reputation (texte + motifs). */
.mailbox-ai-v2 .mbx-web-activity { font-size: 12px; color: #475569; line-height: 1.5; }
.mailbox-ai-v2 .mbx-web-activity p { margin: 0 0 8px; }
.mailbox-ai-v2 .mbx-web-activity p:last-child { margin-bottom: 0; }
.mailbox-ai-v2 .mbx-motifs { margin: 0 0 8px; padding-left: 18px; }
.mailbox-ai-v2 .mbx-motifs li { margin-bottom: 4px; }
.mailbox-ai-v2 .mbx-checks-note, .mailbox-ai-v2 .mbx-verdict-note {
  font-size: 11px; color: #94a3b8; line-height: 1.45; margin: 8px 0 0;
}

/* Liste des sources. */
.mailbox-ai-v2 .mbx-src-list { display: flex; flex-direction: column; gap: 5px; }
.mailbox-ai-v2 .mbx-src-list a { font-size: 11px; color: var(--mbx-blue); word-break: break-word; text-decoration: none; }
.mailbox-ai-v2 .mbx-src-list a:hover { text-decoration: underline; }

/* Carte score-ring (onglet Verif.). */
.mailbox-ai-v2 .mbx-sec-scorecard { text-align: center; }
.mailbox-ai-v2 .mbx-score-ring {
  width: 64px; height: 64px; border-radius: 50%; margin: 2px auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff;
}
.mailbox-ai-v2 .mbx-score-good { background: #16a34a; }
.mailbox-ai-v2 .mbx-score-mid  { background: #f59e0b; }
.mailbox-ai-v2 .mbx-score-bad  { background: #ef4444; }
.mailbox-ai-v2 .mbx-sec-score-label { font-size: 11px; color: var(--mbx-muted); margin-bottom: 3px; }
.mailbox-ai-v2 .mbx-sec-verdict { font-size: 14px; font-weight: 700; }
.mailbox-ai-v2 .mbx-txt-good { color: #15803d; }
.mailbox-ai-v2 .mbx-txt-mid  { color: #b45309; }
.mailbox-ai-v2 .mbx-txt-bad  { color: #b91c1c; }
.mailbox-ai-v2 .mbx-sec-scan { font-size: 11px; color: var(--mbx-muted); margin: 8px 0 0; }
.mailbox-ai-v2 .mbx-sec-grade { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.mailbox-ai-v2 .mbx-sec-subtitle { font-size: 11px; color: var(--mbx-muted); margin-top: 5px; line-height: 1.4; }

/* Lignes de verification (SPF/DKIM/DMARC/Blacklist/SSL/PTR/Phishing) avec pastille d'etat. */
.mailbox-ai-v2 .mbx-chk { display: flex; flex-direction: column; gap: 9px; }
.mailbox-ai-v2 .mbx-chk-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 12px; }
.mailbox-ai-v2 .mbx-chk-k { color: #334155; font-weight: 700; flex-shrink: 0; padding-top: 1px; }
.mailbox-ai-v2 .mbx-chk-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; min-width: 0; }
.mailbox-ai-v2 .mbx-chk-pill {
  display: inline-block; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 9px; white-space: nowrap;
}
.mailbox-ai-v2 .mbx-chk-good { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.mailbox-ai-v2 .mbx-chk-warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.mailbox-ai-v2 .mbx-chk-bad  { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.mailbox-ai-v2 .mbx-chk-na   { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; font-style: italic; }
.mailbox-ai-v2 .mbx-chk-detail { font-size: 10.5px; color: var(--mbx-muted); word-break: break-word; }

/* Liste de recommandations / points d'attention priorises. */
.mailbox-ai-v2 .mbx-reco-list { margin: 0; padding-left: 2px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mailbox-ai-v2 .mbx-reco-list li { font-size: 12px; color: #475569; line-height: 1.45; }
.mailbox-ai-v2 .mbx-reco-lvl {
  display: inline-block; font-size: 10px; font-weight: 700; color: #fff; border-radius: 6px; padding: 0 6px; margin-right: 5px;
}
.mailbox-ai-v2 .mbx-reco-p1 { background: #ef4444; }
.mailbox-ai-v2 .mbx-reco-p2 { background: #f59e0b; }
.mailbox-ai-v2 .mbx-reco-p3 { background: #64748b; }

/* ==========================================================================
 * CHATBOT IA CRM (point 4) — pane intro + overlay flottant
 * D'apres maquette_v2.html (#chatbotOverlay, .cb-*). Classes prefixees
 * mbx-cb-* / mbx-cbpane-* pour ne collisionner avec aucune regle Perfex.
 * ======================================================================== */

/* -- Onglet Chatbot : carte intro dans le panneau contextuel -------------- */
.mailbox-ai-v2 .mbx-cbpane-intro {
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 16px; text-align: center; margin-bottom: 10px;
}
.mailbox-ai-v2 .mbx-cbpane-ico { font-size: 30px; color: var(--mbx-blue); margin-bottom: 6px; }
.mailbox-ai-v2 .mbx-cbpane-title { font-size: 14px; font-weight: 700; color: var(--mbx-ink); margin: 0 0 4px; }
.mailbox-ai-v2 .mbx-cbpane-desc { font-size: 12px; color: var(--mbx-text); margin: 0 0 12px; line-height: 1.45; }
.mailbox-ai-v2 .mbx-cbpane-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 0; border-radius: 8px;
  background: var(--mbx-blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mailbox-ai-v2 .mbx-cbpane-btn:hover { background: var(--mbx-blue-dark); }
.mailbox-ai-v2 .mbx-cbpane-suggest {
  background: #fff; border: 1px solid var(--mbx-border); border-radius: 10px; padding: 12px;
}
.mailbox-ai-v2 .mbx-cbpane-suggest-title { font-size: 12px; font-weight: 700; color: var(--mbx-text); margin: 0 0 8px; }
.mailbox-ai-v2 .mbx-cbpane-sug {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--mbx-text); line-height: 1.4;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; margin-bottom: 4px;
}
.mailbox-ai-v2 .mbx-cbpane-sug:hover { background: var(--mbx-blue-soft); color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cbpane-sug i { color: var(--mbx-blue); margin-top: 2px; }

/* -- Chat INLINE dans le 4e onglet du panneau contextuel -----------------
 * Le pane « chatbot » devient une COLONNE FLEX plein-hauteur : en-tete
 * (lie/general) + messages defilants + suggestions + saisie epinglee en bas.
 * :not(.hidden) pour ne PAS ecraser la regle .mbx-ctx-pane.hidden{display:none}
 * (meme specificite -> l'ordre source ferait gagner le display:flex). Les
 * classes .mbx-cb-messages / -msg / -suggestions / -input / -send / -cite /
 * -typing sont partagees avec l'ancien overlay (definies plus bas). */
.mailbox-ai-v2 .mbx-ctx-pane.mbx-cb-pane { padding: 0; overflow: hidden; }
.mailbox-ai-v2 .mbx-ctx-pane.mbx-cb-pane:not(.hidden) {
  display: flex; flex-direction: column; min-height: 0;
}
.mailbox-ai-v2 .mbx-cb-linked {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: 11px; font-weight: 600; line-height: 1.3;
  border-bottom: 1px solid var(--mbx-border); background: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mailbox-ai-v2 .mbx-cb-linked.is-contact { color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cb-linked.is-general { color: var(--mbx-muted); }
.mailbox-ai-v2 .mbx-cb-linked i { flex: 0 0 auto; }

/* -- Overlay flottant (bas-droite) — CONSERVE pour compat (element retire du
 *    DOM : ces regles ne matchent plus, gardees sans risque). --------------- */
.mailbox-ai-v2 .mbx-cb-panel {
  position: fixed; right: 24px; bottom: 24px;
  width: 420px; height: 600px; max-height: calc(100vh - 60px); max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid #d1d5db; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: none; flex-direction: column; overflow: hidden;
  z-index: 9997;
}
.mailbox-ai-v2 .mbx-cb-panel.is-open { display: flex; }

.mailbox-ai-v2 .mbx-cb-header {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
}
.mailbox-ai-v2 .mbx-cb-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mailbox-ai-v2 .mbx-cb-head-id > i { font-size: 18px; }
.mailbox-ai-v2 .mbx-cb-head-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.mailbox-ai-v2 .mbx-cb-head-linked {
  font-size: 11px; opacity: 0.85; line-height: 1.2; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.mailbox-ai-v2 .mbx-cb-close {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.mailbox-ai-v2 .mbx-cb-close:hover { background: rgba(255, 255, 255, 0.2); }

.mailbox-ai-v2 .mbx-cb-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 16px;
  background: var(--mbx-bg); display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.mailbox-ai-v2 .mbx-cb-msg {
  max-width: 85%; padding: 9px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.45; word-wrap: break-word;
}
.mailbox-ai-v2 .mbx-cb-msg.bot {
  background: #fff; border: 1px solid var(--mbx-border);
  align-self: flex-start; border-bottom-left-radius: 4px; color: var(--mbx-ink);
}
.mailbox-ai-v2 .mbx-cb-msg.user {
  background: var(--mbx-blue); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.mailbox-ai-v2 .mbx-cb-msg.bot p { margin: 0 0 6px; }
.mailbox-ai-v2 .mbx-cb-msg.bot p:last-child { margin-bottom: 0; }
.mailbox-ai-v2 .mbx-cb-msg.bot ul { margin: 4px 0 4px 4px; padding-left: 16px; }
.mailbox-ai-v2 .mbx-cb-msg.bot li { margin-bottom: 3px; }
.mailbox-ai-v2 .mbx-cb-cite {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mbx-border-soft);
  font-size: 11px; color: var(--mbx-muted);
}
.mailbox-ai-v2 .mbx-cb-cite b { display: block; margin-bottom: 3px; }
.mailbox-ai-v2 .mbx-cb-cite a {
  color: var(--mbx-blue); text-decoration: none; display: block;
  padding: 1px 0; cursor: pointer; word-break: break-word;
}
.mailbox-ai-v2 .mbx-cb-cite a:hover { text-decoration: underline; }
.mailbox-ai-v2 .mbx-cb-typing { display: inline-flex; gap: 3px; align-items: center; }
.mailbox-ai-v2 .mbx-cb-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #9ca3af;
  animation: mbx-cb-blink 1.2s infinite ease-in-out both;
}
.mailbox-ai-v2 .mbx-cb-typing span:nth-child(2) { animation-delay: 0.2s; }
.mailbox-ai-v2 .mbx-cb-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mbx-cb-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.mailbox-ai-v2 .mbx-cb-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; background: var(--mbx-bg);
  border-top: 1px solid var(--mbx-border); flex: 0 0 auto;
}
.mailbox-ai-v2 .mbx-cb-suggestions .mbx-cb-chip {
  font-size: 11px; padding: 5px 9px; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 999px; cursor: pointer; color: #475569;
}
.mailbox-ai-v2 .mbx-cb-suggestions .mbx-cb-chip:hover { border-color: var(--mbx-blue); color: var(--mbx-blue); }

.mailbox-ai-v2 .mbx-cb-input {
  padding: 12px; border-top: 1px solid var(--mbx-border);
  display: flex; gap: 8px; background: #fff; flex: 0 0 auto;
}
.mailbox-ai-v2 .mbx-cb-input input {
  flex: 1 1 auto; padding: 9px 13px; border: 1px solid #cbd5e1;
  border-radius: 999px; font-size: 13px; outline: none; color: var(--mbx-ink);
}
.mailbox-ai-v2 .mbx-cb-input input:focus { border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cb-send {
  width: 38px; height: 38px; flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--mbx-blue); color: #fff; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.mailbox-ai-v2 .mbx-cb-send:hover { background: var(--mbx-blue-dark); }
.mailbox-ai-v2 .mbx-cb-send[disabled] { opacity: 0.6; cursor: default; }

/* Mobile : overlay quasi plein ecran (tactile). */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-cb-panel {
    right: 0; left: 0; bottom: 0; top: auto; width: auto;
    /* Le defaut desktop plafonne a calc(100vw - 32px) -> il restait une bande de
       ~32px a droite sur telephone (mesure ~343px sur 375). On leve le plafond. */
    max-width: none;
    height: 92dvh; max-height: 92dvh; border-radius: 14px 14px 0 0;
  }
  .mailbox-ai-v2 .mbx-cb-close { width: 40px; height: 40px; }
  .mailbox-ai-v2 .mbx-cb-input input { height: 42px; }
  .mailbox-ai-v2 .mbx-cb-send { width: 42px; height: 42px; }
}

/* ==========================================================================
 * FENETRE DE COMPOSITION FLOTTANTE (facon Gmail) — point 5 / F
 * Coquille NEUVE qui HEBERGE le formulaire compose existant (compose_form,
 * injecte dans .mbx-cw-host). Tout scope sous .mailbox-ai-v2. Aucune dep CDN.
 * ======================================================================== */

/* --- FAB rond bleu bas-droite --- */
.mailbox-ai-v2 .mbx-cw-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 4200;
  width: 56px; height: 56px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mbx-blue); color: #fff; font-size: 20px;
  box-shadow: 0 6px 18px rgba(37,99,235,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mailbox-ai-v2 .mbx-cw-fab:hover { transform: scale(1.06); background: var(--mbx-blue-dark); }
.mailbox-ai-v2 .mbx-cw-fab.is-hidden { display: none; }

/* --- Fenetre --- */
.mailbox-ai-v2 .mbx-cw {
  position: fixed; right: 24px; bottom: 0; z-index: 4300;
  width: 960px; max-width: calc(100vw - 40px);
  height: 620px; max-height: calc(100vh - 90px);
  background: #fff; border: 1px solid #d1d5db; border-bottom: 0;
  border-radius: 10px 10px 0 0; box-shadow: 0 12px 44px rgba(0,0,0,0.28);
  display: none; flex-direction: column; overflow: hidden;
}
.mailbox-ai-v2 .mbx-cw.is-open { display: flex; }
.mailbox-ai-v2 .mbx-cw.is-min { height: 46px !important; }
.mailbox-ai-v2 .mbx-cw.is-min .mbx-cw-body { display: none; }
.mailbox-ai-v2 .mbx-cw.is-max {
  right: 24px !important; left: 24px !important; top: 70px !important; bottom: 0 !important;
  width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
}

/* --- En-tete draggable --- */
.mailbox-ai-v2 .mbx-cw-header {
  flex: 0 0 auto; background: #1f2937; color: #fff; cursor: move;
  padding: 9px 12px; display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.mailbox-ai-v2 .mbx-cw-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-ai-v2 .mbx-cw-controls { display: flex; gap: 3px; flex: 0 0 auto; }
.mailbox-ai-v2 .mbx-cw-ctl {
  width: 28px; height: 28px; border: 0; background: transparent; color: #fff; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.mailbox-ai-v2 .mbx-cw-ctl:hover { background: rgba(255,255,255,0.16); }
.mailbox-ai-v2 .mbx-cw-ai-toggle { display: none; } /* visible en mobile seulement */

/* --- Corps : split mail | IA --- */
.mailbox-ai-v2 .mbx-cw-body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.mailbox-ai-v2 .mbx-cw-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--mbx-border);
}
.mailbox-ai-v2 .mbx-cw-host { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 14px 4px; }
.mailbox-ai-v2 .mbx-cw-loading { text-align: center; color: var(--mbx-muted); padding: 40px 0; }

/* Compactage du formulaire compose injecte (look Gmail) */
.mailbox-ai-v2 .mbx-cw-host .form-group { margin-bottom: 8px; }
.mailbox-ai-v2 .mbx-cw-host .control-label { font-size: 11px; color: var(--mbx-muted); font-weight: 600; margin-bottom: 2px; }
.mailbox-ai-v2 .mbx-cw-host .mailbox-ai-cc-toggle { margin-top: 2px; font-size: 12px; }
/* On masque le fouillis : boutons/actions du form (pilotes par le chrome + panneau IA) */
.mailbox-ai-v2 .mbx-cw-host .mailbox-ai-ai-toolbar,
.mailbox-ai-v2 .mbx-cw-host .mailbox-ai-compose-actions,
.mailbox-ai-v2 .mbx-cw-host #mailbox_ai_compose_attachments { display: none !important; }

/* --- Pied : envoyer + icones --- */
.mailbox-ai-v2 .mbx-cw-footer {
  flex: 0 0 auto; border-top: 1px solid var(--mbx-border); background: #f9fafb;
  padding: 8px 12px; display: flex; align-items: center; gap: 6px;
}
.mailbox-ai-v2 .mbx-cw-send {
  border: 0; cursor: pointer; background: var(--mbx-blue); color: #fff;
  padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.mailbox-ai-v2 .mbx-cw-send:hover { background: var(--mbx-blue-dark); }
.mailbox-ai-v2 .mbx-cw-send[disabled] { opacity: 0.6; cursor: default; }
.mailbox-ai-v2 .mbx-cw-icobtn {
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  border-radius: 4px; color: var(--mbx-muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.mailbox-ai-v2 .mbx-cw-icobtn:hover { background: #e5e7eb; color: var(--mbx-ink); }
.mailbox-ai-v2 .mbx-cw-status { font-size: 12px; margin-left: auto; text-align: right; }
.mailbox-ai-v2 .mbx-cw-status.text-danger  { color: #b91c1c; }
.mailbox-ai-v2 .mbx-cw-status.text-success { color: #15803d; }
.mailbox-ai-v2 .mbx-cw-status.text-muted   { color: var(--mbx-muted); }

/* --- Panneau IA 272px --- */
.mailbox-ai-v2 .mbx-cw-ai {
  flex: 0 0 272px; width: 272px; display: flex; flex-direction: column;
  background: var(--mbx-bg); font-size: 12px; min-height: 0;
}
.mailbox-ai-v2 .mbx-cw-ai-head {
  flex: 0 0 auto; padding: 10px 12px; background: var(--mbx-blue-soft);
  color: var(--mbx-navy); font-weight: 700; border-bottom: 1px solid var(--mbx-border);
  display: flex; align-items: center; gap: 6px;
}
.mailbox-ai-v2 .mbx-cw-ai-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--mbx-border); }
.mailbox-ai-v2 .mbx-cw-ai-tab {
  flex: 1; text-align: center; padding: 8px 0; cursor: pointer; font-size: 11px;
  color: var(--mbx-muted); font-weight: 600; border-bottom: 2px solid transparent;
}
.mailbox-ai-v2 .mbx-cw-ai-tab.active { color: var(--mbx-blue); border-color: var(--mbx-blue); background: #fff; }
.mailbox-ai-v2 .mbx-cw-ai-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.mailbox-ai-v2 .mbx-cw-ai-pane.hidden { display: none; }
.mailbox-ai-v2 .mbx-cw-ai-lbl { font-size: 11px; color: var(--mbx-text); font-weight: 600; display: block; margin-bottom: 4px; }
.mailbox-ai-v2 .mbx-cw-ai-hint { font-size: 11px; color: var(--mbx-muted); margin: 0 0 8px; }
.mailbox-ai-v2 .mbx-cw-prompt {
  width: 100%; min-height: 68px; padding: 8px; resize: vertical; outline: none;
  border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; font-family: inherit; color: var(--mbx-ink);
}
.mailbox-ai-v2 .mbx-cw-prompt:focus { border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cw-tones { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.mailbox-ai-v2 .mbx-cw-tone {
  padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #cbd5e1;
  font-size: 11px; cursor: pointer; color: var(--mbx-text);
}
.mailbox-ai-v2 .mbx-cw-tone.active { background: var(--mbx-blue); color: #fff; border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cw-aibtn {
  width: 100%; border: 0; cursor: pointer; background: var(--mbx-blue); color: #fff;
  padding: 8px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mailbox-ai-v2 .mbx-cw-aibtn:hover { filter: brightness(0.95); }
.mailbox-ai-v2 .mbx-cw-aibtn[disabled] { opacity: 0.6; cursor: default; }
.mailbox-ai-v2 .mbx-cw-ai-sec { margin-top: 14px; }
.mailbox-ai-v2 .mbx-cw-ai-sec h5 {
  font-size: 11px; text-transform: uppercase; color: var(--mbx-muted);
  font-weight: 700; margin: 0 0 6px;
}
.mailbox-ai-v2 .mbx-cw-tpl {
  padding: 7px 9px; background: #fff; border: 1px solid var(--mbx-border);
  border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-size: 12px; color: var(--mbx-ink);
}
.mailbox-ai-v2 .mbx-cw-tpl:hover { border-color: var(--mbx-blue); background: var(--mbx-blue-soft); }
.mailbox-ai-v2 .mbx-cw-crm-fact {
  padding: 7px 9px; background: #fff; border: 1px solid var(--mbx-border); border-radius: 6px;
  margin-bottom: 5px; font-size: 12px; color: var(--mbx-ink);
  display: flex; align-items: flex-start; gap: 7px; cursor: pointer;
}
.mailbox-ai-v2 .mbx-cw-crm-fact:hover { border-color: var(--mbx-blue); }
.mailbox-ai-v2 .mbx-cw-crm-fact i { color: var(--mbx-blue); margin-top: 2px; }
.mailbox-ai-v2 .mbx-cw-ai-loader {
  display: inline-block; width: 12px; height: 12px; border: 2px solid #fff;
  border-top-color: transparent; border-radius: 50%; animation: mbx-cw-spin 0.8s linear infinite;
}
@keyframes mbx-cw-spin { to { transform: rotate(360deg); } }

/* --- Responsive : sous 900px, feuille PLEIN ECRAN + panneau IA en bascule ---
   La fenetre flottante devient une feuille plein ecran (le formulaire + l'IA
   restent accessibles ; l'editeur ne doit pas deborder). Position forcee en
   !important pour NEUTRALISER un eventuel repositionnement inline issu du drag
   (le drag est par ailleurs desactive en mobile cote JS). */
@media (max-width: 900px) {
  .mailbox-ai-v2 .mbx-cw,
  .mailbox-ai-v2 .mbx-cw.is-max {
    right: 0 !important; left: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0; border: 0;
  }
  .mailbox-ai-v2 .mbx-cw-header { cursor: default; }
  .mailbox-ai-v2 .mbx-cw-host { overflow-x: hidden; }
  .mailbox-ai-v2 .mbx-cw-ai-toggle { display: flex; }
  .mailbox-ai-v2 .mbx-cw-main { border-right: 0; }
  .mailbox-ai-v2 .mbx-cw-ai {
    position: absolute; top: 46px; right: 0; bottom: 0; width: 88%; max-width: 340px;
    box-shadow: -6px 0 20px rgba(0,0,0,0.18); transform: translateX(101%);
    transition: transform 0.2s ease; z-index: 5;
  }
  .mailbox-ai-v2 .mbx-cw.show-ai .mbx-cw-ai { transform: translateX(0); }
  /* Cibles tactiles de la fenetre compose (>= 40px au pouce). */
  .mailbox-ai-v2 .mbx-cw-ctl { width: 40px; height: 40px; }        /* dont la bascule IA (.mbx-cw-ai-toggle) */
  .mailbox-ai-v2 .mbx-cw-icobtn { width: 40px; height: 40px; }
  .mailbox-ai-v2 .mbx-cw-send { min-height: 40px; }                /* « Envoyer » etait a ~35px */
}