/* ==========================================================================
 * mailbox_ai — Styles « mini-Gmail » (LOT 2)
 * --------------------------------------------------------------------------
 * S'appuie sur Bootstrap natif Perfex. Aucun framework externe. Design cible :
 * cf docs/REFERENCE-UI.md (cartes blanches epurees, accents bleus, badges de
 * categories color-codes, avatar rond, bordure gauche bleue sur les non-lus).
 * ======================================================================== */

/* ---- Palette interne (variables CSS, fallback gracieux) ---------------- */
.mailbox-ai {
  --mbx-blue: #2f6fed;
  --mbx-blue-soft: #eef4ff;
  --mbx-gold: #d99a2b;
  --mbx-gold-dark: #b87e15;
  --mbx-dark: #2b3340;
  --mbx-border: #e7ebf0;
  --mbx-muted: #8a94a6;
}

/* ==========================================================================
 * Layout general
 * ======================================================================== */
.mailbox-ai-app-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.mailbox-ai-app-row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}
.mailbox-ai-side,
.mailbox-ai-main {
  float: none;
}
.mailbox-ai-card {
  border: 1px solid var(--mbx-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
  margin-bottom: 16px;
}
.mailbox-ai-card > .panel-body {
  padding: 16px;
}

/* ---- En-tete de carte -------------------------------------------------- */
.mailbox-ai-card-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mbx-border);
}
.mailbox-ai-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--mbx-dark);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ==========================================================================
 * Carte « Comptes »
 * ======================================================================== */
.mailbox-ai-badge-synced {
  background-color: #e7f6ec;
  color: #1f8a4c;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
}
.mailbox-ai-badge-synced .fa {
  margin-right: 3px;
}
.mailbox-ai-account-select {
  margin-bottom: 12px;
}
.mailbox-ai-account-select .control-label {
  font-size: 12px;
  color: var(--mbx-muted);
  font-weight: 600;
}

/* Bouton « Composer » (fonce) */
.btn.mailbox-ai-btn-compose,
.btn.mailbox-ai-btn-compose:focus {
  background-color: var(--mbx-dark);
  border-color: var(--mbx-dark);
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
}
.btn.mailbox-ai-btn-compose:hover {
  background-color: #1f2733;
  border-color: #1f2733;
  color: #fff;
}

/* Bouton dore « IA : Resumer les non-lus » */
.btn.mailbox-ai-btn-ai-summary,
.btn.mailbox-ai-btn-ai-summary:focus {
  background-color: var(--mbx-gold);
  border-color: var(--mbx-gold);
  color: #fff;
  font-weight: 600;
}
.btn.mailbox-ai-btn-ai-summary:hover {
  background-color: var(--mbx-gold-dark);
  border-color: var(--mbx-gold-dark);
  color: #fff;
}
.btn.mailbox-ai-btn-ai-summary[disabled],
.btn.mailbox-ai-btn-ai-summary[disabled]:hover {
  background-color: #e7d6b3;
  border-color: #e7d6b3;
  color: #fff;
  opacity: .8;
}
.mailbox-ai-manage-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mbx-muted);
}
.mailbox-ai-manage-link:hover {
  color: var(--mbx-blue);
}

/* ==========================================================================
 * Carte « Dossiers »
 * ======================================================================== */
.mailbox-ai-refresh-folders {
  padding: 0;
  color: var(--mbx-muted);
  font-size: 12px;
}
.mailbox-ai-refresh-folders:hover {
  color: var(--mbx-blue);
}
.mailbox-ai-folder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mailbox-ai-folder-list > li {
  margin: 0;
}
.mailbox-ai-folder {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 6px;
  color: #4a5568;
  text-decoration: none;
  font-size: 14px;
  transition: background-color .12s ease;
}
.mailbox-ai-folder:hover,
.mailbox-ai-folder:focus {
  background-color: #f4f6f9;
  color: var(--mbx-dark);
  text-decoration: none;
}
.mailbox-ai-folder.active {
  background-color: var(--mbx-blue-soft);
  color: var(--mbx-blue);
  font-weight: 600;
}
.mailbox-ai-folder .fa {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  font-size: 14px;
}
.mailbox-ai-folder-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailbox-ai-folder-count {
  background-color: var(--mbx-blue);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 2px 8px;
  min-width: 20px;
}
.mailbox-ai-folder.active .mailbox-ai-folder-count {
  background-color: var(--mbx-blue);
  color: #fff;
}

/* ==========================================================================
 * Colonne principale : en-tete + badge total + sync
 * ======================================================================== */
.mailbox-ai-main-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mbx-border);
}
.mailbox-ai-main-title {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--mbx-dark);
}
.mailbox-ai-main-title small {
  font-weight: 400;
}
.mailbox-ai-main-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mailbox-ai-badge-total {
  background-color: #f0f3f7;
  color: #5a6473;
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
 * Barre d'outils (select-all, recherche, filtres)
 * ======================================================================== */
.mailbox-ai-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mailbox-ai-checkall-wrap {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mailbox-ai-checkall-label {
  font-size: 13px;
  color: var(--mbx-muted);
}
.mailbox-ai-search {
  width: 260px;
  flex: 1 1 200px;
  margin: 0;
}
.mailbox-ai-view-filter,
.mailbox-ai-category-filter {
  width: auto;
  min-width: 150px;
  display: inline-block;
}

/* ==========================================================================
 * Barre d'actions de masse
 * ======================================================================== */
.mailbox-ai-bulkbar {
  background: #f7f9fc;
  border: 1px solid var(--mbx-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mailbox-ai-bulk-count {
  font-weight: 700;
  background: var(--mbx-blue);
  color: #fff;
  border-radius: 12px;
  padding: 2px 9px;
  min-width: 24px;
  text-align: center;
  font-size: 12px;
}
.mailbox-ai-bulk-category {
  width: auto;
  min-width: 160px;
  display: inline-block;
}

/* ==========================================================================
 * Liste d'emails (lignes mini-Gmail)
 * ======================================================================== */
.mailbox-ai-list {
  border: 1px solid var(--mbx-border);
  border-radius: 8px;
  overflow: hidden;
}
.mailbox-ai-emails-table {
  margin-bottom: 0;
}
.mailbox-ai-emails-table > tbody > tr {
  cursor: pointer;
  border-left: 3px solid transparent;
}
.mailbox-ai-emails-table > tbody > tr > td {
  vertical-align: middle;
  border-top: 1px solid #f1f4f8;
  padding: 10px 8px;
}
.mailbox-ai-emails-table > tbody > tr:first-child > td {
  border-top: none;
}
.mailbox-ai-emails-table > tbody > tr:hover {
  background-color: #f7fafe;
}

/* Ligne non-lue : bordure gauche bleue + fond legerement teinte + gras. */
.mailbox-ai-email-row.mailbox-ai-unread {
  background-color: var(--mbx-blue-soft);
  border-left-color: var(--mbx-blue);
}
/* Objet d'un mail non-lu : bleu (le markup emet .mailbox-ai-subject +
   .mailbox-ai-subject-unread). */
.mailbox-ai-email-row.mailbox-ai-unread .mailbox-ai-subject,
.mailbox-ai-subject.mailbox-ai-subject-unread {
  color: var(--mbx-blue);
}

/* Gras non-lu : le markup ajoute .mailbox-ai-bold sur l'expediteur et l'objet. */
.mailbox-ai-bold {
  font-weight: 700;
}

/* Cellules */
.mailbox-ai-select {
  width: 30px;
  text-align: center;
}
.mailbox-ai-star {
  cursor: pointer;
}
.mailbox-ai-star-icon {
  cursor: pointer;
}

/* Avatar rond (initiales) */
.mailbox-ai-avatar-cell {
  width: 46px;
}
.mailbox-ai-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--mbx-blue);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}

/* Cellule principale : expediteur (ligne 1), objet + extrait (ligne 2), badge.
   Le markup emet td.mailbox-ai-main contenant .mailbox-ai-from, .mailbox-ai-line
   (avec .mailbox-ai-subject + .mailbox-ai-snippet) et .mailbox-ai-cat-badge. */
td.mailbox-ai-main {
  /* prend la place restante ; force la troncature de l'objet/extrait.
     SCOPE td: ne doit PAS toucher la colonne <div class="col-md-9 mailbox-ai-main">
     (sinon max-width:0 ecrase la colonne -> layout casse selon le theme). */
  width: 100%;
  max-width: 0;
}
.mailbox-ai-from {
  color: var(--mbx-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ligne objet + extrait : tient sur une seule ligne avec ellipsis. */
.mailbox-ai-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mailbox-ai-subject {
  color: var(--mbx-dark);
}
.mailbox-ai-snippet {
  color: var(--mbx-muted);
  font-weight: 400;
}
/* Badge de categorie : sous l'objet, petit espace. */
td.mailbox-ai-main .mailbox-ai-cat-badge {
  margin-top: 4px;
}

/* Date courte + pieces jointes (td.mailbox-ai-meta). */
.mailbox-ai-meta {
  width: 130px;
  text-align: right;
  white-space: nowrap;
}
.mailbox-ai-attach-icon {
  margin-right: 4px;
}
.mailbox-ai-date {
  color: var(--mbx-muted);
  font-size: 12px;
}

/* ---- Cellule d'actions de ligne (td.mailbox-ai-actions) ----------------
   Liens a.mailbox-ai-star / a.mailbox-ai-toggle-read / a.mailbox-ai-row-delete
   + dropdown .mailbox-ai-cat-dd. Reveles au survol de la ligne. */
.mailbox-ai-actions {
  width: 130px;
  text-align: right;
  white-space: nowrap;
}
.mailbox-ai-actions > a,
.mailbox-ai-actions .mailbox-ai-cat-dd {
  display: inline-block;
  margin-left: 8px;
  color: var(--mbx-muted);
  cursor: pointer;
  vertical-align: middle;
}
.mailbox-ai-actions > a:first-child {
  margin-left: 0;
}
.mailbox-ai-actions > a:hover,
.mailbox-ai-actions .mailbox-ai-cat-dd > .dropdown-toggle:hover {
  color: var(--mbx-blue);
  text-decoration: none;
}
.mailbox-ai-actions .mailbox-ai-row-delete:hover {
  color: #d9534f;
}
/* Le favori reste toujours visible ; les autres apparaissent au survol. */
.mailbox-ai-actions .mailbox-ai-toggle-read,
.mailbox-ai-actions .mailbox-ai-row-delete,
.mailbox-ai-actions .mailbox-ai-cat-dd {
  opacity: 0;
  transition: opacity .12s ease;
}
.mailbox-ai-emails-table > tbody > tr:hover .mailbox-ai-actions .mailbox-ai-toggle-read,
.mailbox-ai-emails-table > tbody > tr:hover .mailbox-ai-actions .mailbox-ai-row-delete,
.mailbox-ai-emails-table > tbody > tr:hover .mailbox-ai-actions .mailbox-ai-cat-dd,
.mailbox-ai-cat-dd.open {
  opacity: 1;
}
/* Etoile favori active (jaune) deja geree par .text-warning du markup. */
.mailbox-ai-star-icon.fa-star {
  color: var(--mbx-gold);
}

/* Dropdown de categorie sur la ligne. */
.mailbox-ai-cat-dd > .dropdown-toggle {
  color: var(--mbx-muted);
}
.mailbox-ai-cat-menu {
  min-width: 180px;
}
.mailbox-ai-cat-menu > li.active > a,
.mailbox-ai-cat-menu > li.active > a:hover,
.mailbox-ai-cat-menu > li.active > a:focus {
  background-color: var(--mbx-blue-soft);
  color: var(--mbx-blue);
}
.mailbox-ai-cat-menu > li > a {
  display: flex;
  align-items: center;
}
/* Pastille de couleur de categorie dans le menu. */
.mailbox-ai-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #9aa3b2;
  flex: 0 0 auto;
}

/* ==========================================================================
 * Badges de categories (color-codes ; couleur de fond via style inline du
 * model, ces classes assurent le fallback + lisibilite)
 * ======================================================================== */
.mailbox-ai-cat-badge {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background-color: #9aa3b2;
  line-height: 1.6;
}
.mailbox-ai-cat-badge.mailbox-ai-cat-none {
  background-color: #eef1f5;
  color: #6b7280;
}
/* Codes couleur par defaut (seeds FR) — appliques par classe si pas de couleur. */
.mailbox-ai-cat-urgent       { background-color: #e23b3b; }
.mailbox-ai-cat-suivi        { background-color: var(--mbx-gold); }
.mailbox-ai-cat-attente      { background-color: #f08a24; }
.mailbox-ai-cat-juridique    { background-color: #2b3340; }
.mailbox-ai-cat-basse        { background-color: #9aa3b2; }

/* ==========================================================================
 * Etiquettes (tags) — couche multi-valeur. Badges + dropdown TOGGLE par ligne.
 * Volontairement distincts des categories : coins moins arrondis + icone tags.
 * ======================================================================== */
.mailbox-ai-tag-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 7px;
  margin-top: 4px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background-color: #6b7280;
  line-height: 1.6;
}
td.mailbox-ai-main .mailbox-ai-tag-badge {
  margin-top: 4px;
}
/* Dropdown d'etiquettes sur la ligne (revele au survol, comme la categorie). */
.mailbox-ai-actions .mailbox-ai-tag-dd {
  display: inline-block;
  margin-left: 8px;
  opacity: 0;
  transition: opacity .12s ease;
}
.mailbox-ai-emails-table > tbody > tr:hover .mailbox-ai-actions .mailbox-ai-tag-dd,
.mailbox-ai-tag-dd.open {
  opacity: 1;
}
.mailbox-ai-tag-dd > .dropdown-toggle {
  color: var(--mbx-muted);
}
.mailbox-ai-tag-dd > .dropdown-toggle:hover {
  color: var(--mbx-blue);
  text-decoration: none;
}
.mailbox-ai-tag-menu {
  min-width: 200px;
}
.mailbox-ai-tag-menu > li.active > a,
.mailbox-ai-tag-menu > li.active > a:hover,
.mailbox-ai-tag-menu > li.active > a:focus {
  background-color: var(--mbx-blue-soft);
  color: var(--mbx-blue);
}
.mailbox-ai-tag-menu > li > a {
  display: flex;
  align-items: center;
}
.mailbox-ai-tag-check {
  margin-right: 6px;
  color: var(--mbx-blue);
  flex: 0 0 auto;
}
.mailbox-ai-tag-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  background-color: #9aa3b2;
  flex: 0 0 auto;
}
/* Zone d'etiquettes dans la modale de lecture. */
.mailbox-ai-view-tags {
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.mailbox-ai-view-tags-label {
  font-size: 12px;
  margin-right: 4px;
}
.mailbox-ai-view-tag-dd {
  margin-left: 6px;
}

/* ==========================================================================
 * Etats vides
 * ======================================================================== */
.mailbox-ai-empty-list {
  padding: 40px 10px;
}
.mailbox-ai-empty-list .fa {
  margin-bottom: 10px;
  color: var(--mbx-muted);
}

/* ==========================================================================
 * Charger plus / spinner
 * ======================================================================== */
.mailbox-ai-loadmore {
  padding: 12px 0;
}
.mailbox-ai-spinner {
  padding: 16px 0;
}

/* ==========================================================================
 * Modale de lecture
 * ======================================================================== */
.mailbox-ai-modal .modal-content {
  border-radius: 10px;
}
.mailbox-ai-modal-header {
  border-bottom: 1px solid var(--mbx-border);
}
.mailbox-ai-modal-subject {
  font-weight: 700;
  color: var(--mbx-dark);
  display: inline-block;
  max-width: 80%;
  vertical-align: middle;
}
.mailbox-ai-modal-category {
  margin-left: 8px;
  vertical-align: middle;
}

/* Meta expediteur (modale + partial) */
.mailbox-ai-modal-meta,
.mailbox-ai-view-meta {
  margin-bottom: 14px;
}
.mailbox-ai-modal-meta-row,
.mailbox-ai-view-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mailbox-ai-modal-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--mbx-blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
}
.mailbox-ai-modal-meta-text,
.mailbox-ai-view-meta-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.mailbox-ai-modal-from,
.mailbox-ai-view-from {
  font-size: 14px;
}
.mailbox-ai-modal-date,
.mailbox-ai-view-date {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}
.mailbox-ai-view-head {
  margin-bottom: 12px;
}

/* ==========================================================================
 * Badge statut « Recu » / « Envoye » (en-tete de lecture)
 * ======================================================================== */
.mailbox-ai-status-badge {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  border-radius: 10px;
  padding: 2px 9px;
}
.mailbox-ai-status-received {
  background-color: #e7f6ec;
  color: #1f8a4c;
}
.mailbox-ai-status-sent {
  background-color: var(--mbx-blue-soft);
  color: var(--mbx-blue);
}

/* ==========================================================================
 * Barre d'actions de la modale de lecture (haut, type Gmail)
 * Horizontale, wrap responsive, boutons btn-sm. Le bouton « Resumer ce
 * message » est mis en avant (vert). Placee SOUS l'en-tete, AVANT le corps.
 * ======================================================================== */
.mailbox-ai-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mbx-border);
}
.mailbox-ai-action-bar > .btn,
.mailbox-ai-action-bar > .dropdown {
  margin: 0;
}
/* Pousse le menu « plus » a droite quand la place le permet. */
.mailbox-ai-action-bar > .mailbox-ai-more-dd.pull-right {
  float: none !important;
  margin-left: auto;
}
/* Bouton « Resumer ce message » VERT (mis en avant) — scope a la barre pour ne
   PAS toucher le bouton dore homonyme de l'inbox (.mailbox-ai-btn-ai-summary). */
.mailbox-ai-action-bar .btn.mailbox-ai-btn-ai-summary,
.mailbox-ai-action-bar .btn.mailbox-ai-btn-ai-summary:focus {
  background-color: #1f8a4c;
  border-color: #1f8a4c;
  color: #fff;
  font-weight: 600;
}
.mailbox-ai-action-bar .btn.mailbox-ai-btn-ai-summary:hover {
  background-color: #1a7440;
  border-color: #1a7440;
  color: #fff;
}
.mailbox-ai-action-bar .btn.mailbox-ai-btn-ai-summary[disabled],
.mailbox-ai-action-bar .btn.mailbox-ai-btn-ai-summary[disabled]:hover {
  background-color: #b9dcc6;
  border-color: #b9dcc6;
  color: #fff;
  opacity: .85;
}
/* Sous-liste « Deplacer vers » dans le menu « plus ». */
.mailbox-ai-more-menu {
  min-width: 220px;
}
.mailbox-ai-more-menu .dropdown-header {
  padding: 4px 16px;
}
.mailbox-ai-more-menu .mailbox-ai-move-menu {
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
}
.mailbox-ai-more-menu .mailbox-ai-move-menu > li > a,
.mailbox-ai-more-menu > li > a {
  display: block;
  padding: 5px 16px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.mailbox-ai-more-menu .mailbox-ai-move-menu > li > a:hover,
.mailbox-ai-more-menu > li > a:hover {
  background-color: #f5f5f5;
  text-decoration: none;
}
.mailbox-ai-more-menu .mailbox-ai-action-delete-link,
.mailbox-ai-more-menu .mailbox-ai-action-delete-link:hover {
  color: #d9534f;
}

@media (max-width: 767px) {
  .mailbox-ai-action-bar > .mailbox-ai-more-dd.pull-right {
    margin-left: 0;
  }
}
.mailbox-ai-view-subject {
  margin: 0 0 6px;
  display: inline-block;
  margin-right: 8px;
}

/* Bandeau images distantes */
.mailbox-ai-remote-images {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.mailbox-ai-remote-images > span {
  flex: 1 1 auto;
}

/* Iframe sandbox du corps */
.mailbox-ai-iframe-wrap {
  border: 1px solid var(--mbx-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.mailbox-ai-body-frame {
  width: 100%;
  /* Hauteur fixee par le JS (autoSizeBodyFrame) au contenu reel -> un seul
     scroll (le volet), corps long lisible d'un trait sur mobile. min-height =
     etat de chargement avant la mesure. PAS de max-height (sinon le corps long
     serait recoupe + re-creerait un scroll imbrique). */
  min-height: 200px;
  border: 0;
  display: block;
}

/* Pieces jointes */
.mailbox-ai-attachments,
.mailbox-ai-view-attach-note {
  margin-top: 14px;
}
.mailbox-ai-attachments-head {
  font-weight: 600;
  color: var(--mbx-dark);
  margin-bottom: 6px;
}
.mailbox-ai-attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mailbox-ai-attachments-list > li a,
.mailbox-ai-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mbx-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: #4a5568;
  background: #f8fafc;
  max-width: 320px;
}
.mailbox-ai-attachments-list > li a:hover,
.mailbox-ai-attachment-chip:hover {
  border-color: var(--mbx-blue);
  color: var(--mbx-blue);
  text-decoration: none;
}
.mailbox-ai-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailbox-ai-attachment-size {
  color: var(--mbx-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.mailbox-ai-attachment-dl {
  margin-left: 2px;
  opacity: 0.5;
  flex-shrink: 0;
}
.mailbox-ai-attachment-chip:hover .mailbox-ai-attachment-dl {
  opacity: 1;
}

/* Zone IA : suggerer une reponse */
.mailbox-ai-ai-zone {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--mbx-border);
}
.btn.mailbox-ai-btn-ai-suggest,
.btn.mailbox-ai-btn-ai-suggest:focus {
  background-color: var(--mbx-gold);
  border-color: var(--mbx-gold);
  color: #fff;
  font-weight: 600;
}
.btn.mailbox-ai-btn-ai-suggest:hover {
  background-color: var(--mbx-gold-dark);
  border-color: var(--mbx-gold-dark);
  color: #fff;
}
.btn.mailbox-ai-btn-ai-suggest[disabled],
.btn.mailbox-ai-btn-ai-suggest[disabled]:hover {
  background-color: #e7d6b3;
  border-color: #e7d6b3;
  color: #fff;
  opacity: .8;
}
.mailbox-ai-ai-suggestions {
  margin-top: 12px;
}
.mailbox-ai-ai-suggestion {
  border: 1px solid var(--mbx-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fffdf6;
}
.mailbox-ai-ai-suggestion textarea {
  width: 100%;
  border: 0;
  background: transparent;
  resize: vertical;
  min-height: 70px;
}

/* Resultat du resume d'un email (liste a puces rendue par le JS) */
.mailbox-ai-ai-email-result {
  margin: 12px 0;
}
.mailbox-ai-ai-summary-box {
  border: 1px solid #d9dee5;
  border-left: 3px solid var(--mbx-blue);
  border-radius: 6px;
  padding: 12px 14px;
  background: #eef1f5; /* fond GRIS : distingue le resume du corps du message */
}
.mailbox-ai-ai-summary-title {
  margin-bottom: 8px;
}
.mailbox-ai-ai-summary-para {
  margin: 0 0 8px;
}
.mailbox-ai-ai-summary-list {
  margin: 0;
  padding-left: 20px;
}
.mailbox-ai-ai-summary-list li {
  margin-bottom: 4px;
}

.mailbox-ai-modal-footer {
  border-top: 1px solid var(--mbx-border);
}
.mailbox-ai-modal-actions-left .btn {
  margin-right: 4px;
}

/* ==========================================================================
 * Fil de conversation (threading) — cartes repliables type Gmail
 * Chaque message du fil = une carte repliee par defaut ; depli au clic sur
 * l'en-tete ; corps charge en lazy dans une iframe sandbox (body/{id}).
 * ======================================================================== */
.mailbox-ai-thread-zone {
  margin: 0 0 16px;
  padding-bottom: 4px;
}
.mailbox-ai-thread-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mbx-border);
  color: var(--mbx-dark);
}
.mailbox-ai-thread-zone-head .fa {
  color: var(--mbx-blue);
}
.mailbox-ai-thread-zone-title {
  font-weight: 600;
}
.mailbox-ai-thread-zone-count {
  font-size: 12px;
}
.mailbox-ai-thread-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mailbox-ai-thread-item {
  border: 1px solid var(--mbx-border);
  border-radius: 6px;
  background: #fafbfc;
  overflow: hidden;
}
.mailbox-ai-thread-item.expanded {
  background: #fff;
}
/* Carte non lue : liseré bleu a gauche. */
.mailbox-ai-thread-item.mailbox-ai-thread-unread {
  border-left: 3px solid var(--mbx-blue);
}
.mailbox-ai-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
}
.mailbox-ai-thread-head:hover {
  background-color: var(--mbx-blue-soft);
}
.mailbox-ai-thread-head:focus {
  box-shadow: inset 0 0 0 2px var(--mbx-blue-soft);
}
/* Avatar plus compact dans les cartes du fil. */
.mailbox-ai-thread-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.mailbox-ai-thread-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.mailbox-ai-thread-from {
  font-size: 13px;
  color: var(--mbx-dark);
}
.mailbox-ai-thread-snippet {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mailbox-ai-thread-date {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}
.mailbox-ai-thread-chevron {
  flex: 0 0 auto;
  color: var(--mbx-muted);
  transition: transform .15s ease;
}
.mailbox-ai-thread-item.expanded .mailbox-ai-thread-chevron {
  transform: rotate(180deg);
}
/* Snippet masque une fois la carte depliee (le corps complet prend le relais). */
.mailbox-ai-thread-item.expanded .mailbox-ai-thread-snippet {
  display: none;
}
.mailbox-ai-thread-body {
  display: none;
  border-top: 1px solid var(--mbx-border);
}
.mailbox-ai-thread-item.expanded .mailbox-ai-thread-body {
  display: block;
}
.mailbox-ai-thread-frame {
  width: 100%;
  min-height: 220px;
  height: 40vh;
  max-height: 55vh;
  border: 0;
  display: block;
}

/* ==========================================================================
 * Responsive
 * ======================================================================== */
@media (max-width: 991px) {
  .mailbox-ai-app-row {
    display: block;
  }
  /* Sur petit ecran, masquer la cellule meta (date) pour laisser respirer
     l'objet ; la cellule actions reste accessible. */
  .mailbox-ai-meta {
    display: none;
  }
  .mailbox-ai-search {
    width: 100%;
    flex-basis: 100%;
  }
  .mailbox-ai-modal-date,
  .mailbox-ai-view-date,
  .mailbox-ai-thread-date {
    display: none;
  }
}

/* ==========================================================================
 * REFONTE « facon Outlook » : split LISTE | VOLET DE LECTURE
 * Desktop : 2 sous-colonnes cote a cote (liste etroite + volet large docke,
 * sticky). Mobile/petit ecran : la liste prend tout l'ecran ; ouvrir un email
 * affiche le volet en PLEIN ECRAN (.is-open) avec un bouton « Retour ».
 * ======================================================================== */
.mailbox-ai-split {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mailbox-ai-split-list {
  flex: 0 0 41%;
  max-width: 41%;
  min-width: 0;
}
.mailbox-ai-split-reading {
  flex: 1 1 59%;
  min-width: 0;
  position: sticky;
  top: 15px;
  align-self: flex-start;
  max-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}
.mailbox-ai-reading-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 90px);
  margin-bottom: 0;
  overflow: hidden;
}
.mailbox-ai-reading-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mbx-border);
  flex: 0 0 auto;
}
.mailbox-ai-reading-bar .mailbox-ai-modal-subject {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mailbox-ai-reading-back,
.mailbox-ai-reading-close {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--mbx-muted);
  text-decoration: none;
}
.mailbox-ai-reading-back:hover,
.mailbox-ai-reading-close:hover {
  color: var(--mbx-dark);
}
.mailbox-ai-reading-back { display: none; }   /* visible sur mobile uniquement */
/* Le sujet est deja affiche dans la barre sticky du volet -> on masque le
   doublon rendu dans le corps (_email_view.php .mailbox-ai-view-subject). */
.mailbox-ai-reading-body .mailbox-ai-view-subject { display: none; }
.mailbox-ai-reading-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 16px;
}
.mailbox-ai-reading-empty {
  text-align: center;
  color: var(--mbx-muted);
  padding: 60px 20px;
}
.mailbox-ai-reading-empty i {
  font-size: 42px;
  opacity: .5;
  display: block;
  margin-bottom: 12px;
}
/* Ligne selectionnee (email ouvert) — surlignage facon Outlook */
.mailbox-ai-email-row.mailbox-ai-row-active,
.mailbox-ai-email-row.mailbox-ai-row-active:hover {
  background: var(--mbx-blue-soft);
  box-shadow: inset 3px 0 0 var(--mbx-blue);
}

/* --- Mobile / petit ecran (<=991px) : volet en PLEIN ECRAN --- */
@media (max-width: 991px) {
  .mailbox-ai-split { display: block; }
  .mailbox-ai-split-list { flex: none; max-width: 100%; }
  .mailbox-ai-split-reading {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    /* HAUTEUR EXPLICITE indispensable : avec seulement top/bottom:0 + une carte
       enfant en height:100%, le volet ne se contraignait PAS au viewport (il
       s'etirait a la hauteur du contenu -> rien ne scrollait -> email illisible
       au-dela du 1er ecran). 100dvh suit la barre d'adresse mobile ; 100vh = repli. */
    height: 100vh;
    height: 100dvh;
    z-index: 1050;
    max-height: none;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;          /* cache tant qu'aucun email n'est ouvert */
  }
  .mailbox-ai-split-reading.is-open { display: block; }
  .mailbox-ai-reading-card { max-height: none; height: 100%; border-radius: 0; }
  .mailbox-ai-reading-bar { position: sticky; top: 0; background: #fff; z-index: 2; }
  .mailbox-ai-reading-back { display: inline-block; }   /* « Retour » visible */
  .mailbox-ai-reading-close { display: none; }           /* le Retour suffit */
}

/* ==========================================================================
 * Recherche CRM : liaison d'un email ET filtre client/contact de la liste.
 * Le dropdown de resultats (.mailbox-ai-crm-results) est ancre SOUS le champ
 * grace a .mailbox-ai-crm-search-wrap { position:relative } -> corrige le
 * mauvais placement (popup en bas) sur mobile.
 * ======================================================================== */
.mailbox-ai-crm-search-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.mailbox-ai-crm-results.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  min-width: 240px;
  max-width: 340px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 1060;
}
.mailbox-ai-crm-results.dropdown-menu > li > a {
  white-space: normal;
  padding: 5px 12px;
}
/* Filtre client/contact dans la barre d'outils */
.mailbox-ai-crm-filter {
  display: inline-block;
  vertical-align: middle;
}
.mailbox-ai-crm-filter .mailbox-ai-crm-filter-input {
  min-width: 210px;
  display: inline-block;
  width: auto;
}
.mailbox-ai-crm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 9px;
}
.mailbox-ai-crm-filter-chip .mailbox-ai-crm-filter-clear {
  color: #fff;
  opacity: .85;
}
.mailbox-ai-crm-filter-chip .mailbox-ai-crm-filter-clear:hover {
  opacity: 1;
  text-decoration: none;
}
@media (max-width: 991px) {
  .mailbox-ai-crm-search-wrap { display: block; }
  .mailbox-ai-crm-filter,
  .mailbox-ai-crm-filter-wrap { display: block; width: 100%; }
  .mailbox-ai-crm-filter .mailbox-ai-crm-filter-input { width: 100%; min-width: 0; }
  .mailbox-ai-crm-results.dropdown-menu { width: 100%; min-width: 0; max-width: none; }
}

/* ==========================================================================
 * Liaison PROJET / TACHE dans le volet de lecture (LOT 2).
 * Reutilise le patron de la recherche CRM (.mailbox-ai-crm-search-wrap +
 * .mailbox-ai-crm-results) : ici on ne stylise QUE les elements propres au
 * bloc (selecteur de type, champ, case « propager », groupement des badges).
 * Scope strict .mailbox-ai-link-* -> aucun debordement sur le theme Perfex.
 * ======================================================================== */
.mailbox-ai-link-search-wrap .mailbox-ai-link-type,
.mailbox-ai-link-search-wrap .mailbox-ai-link-search-input {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}
.mailbox-ai-link-propagate {
  display: block;
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: normal;
  color: var(--mbx-muted, #8a94a6);
  cursor: pointer;
}
.mailbox-ai-link-propagate input {
  margin-right: 4px;
  vertical-align: middle;
}
.mailbox-ai-link-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}

/* ==========================================================================
 * MOBILE : repli des cartes Comptes + Dossiers (barre toggle)
 * Sur petit ecran, les 2 cartes prenaient ~600px AVANT la liste -> mauvaise UX
 * (l'usage = lire/repondre). On les replie derriere une barre compacte ; la
 * liste devient immediatement visible. Desktop : toggle cache, cartes visibles.
 * ======================================================================== */
.mailbox-ai-side-toggle { display: none; }

@media (max-width: 991px) {
  .mailbox-ai-side-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--mbx-border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mbx-dark);
    cursor: pointer;
    -webkit-appearance: none;
  }
  .mailbox-ai-side-toggle > .fa-bars { color: var(--mbx-blue); }
  .mailbox-ai-side-toggle .mailbox-ai-side-toggle-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mailbox-ai-side-toggle-caret { transition: transform .2s ease; color: var(--mbx-muted); }
  .mailbox-ai-side-toggle.is-open .mailbox-ai-side-toggle-caret { transform: rotate(180deg); }

  .mailbox-ai-side-collapse { display: none; }
  .mailbox-ai-side-collapse.is-open { display: block; }
  .mailbox-ai-side .mailbox-ai-card { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------------------
 | Jauge DISCRETE de de-bruitage (relevance) — sous l'arbre des comptes.
 | Bloc volontairement sobre : barre fine + petit texte, non intrusif.
 | ------------------------------------------------------------------------- */
.mbx-denoise-progress {
  margin: 6px 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--mbx-border, #e4e8ef);
  border-radius: 8px;
  background: var(--mbx-bg, #f7f9fc);
}
.mbx-denoise-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
}
.mbx-denoise-progress-text {
  color: var(--mbx-muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbx-denoise-progress-count {
  color: var(--mbx-text, #384150);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.mbx-denoise-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--mbx-border, #e4e8ef);
  overflow: hidden;
}
.mbx-denoise-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--mbx-blue, #2f6fed);
  transition: width .4s ease;
}