/* @mention autocomplete popup — global réutilisable */
.mn-ac-popup {
  position: absolute;
  z-index: 9999;
  background: #1C1C2E;
  border: 1px solid rgba(103, 80, 164, .25);
  border-radius: 12px;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  min-width: 200px;
  max-width: 400px;
}
.mn-ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.mn-ac-item.active { background: rgba(103, 80, 164, .25); }
.mn-ac-item:hover { background: rgba(255, 255, 255, .08); }
.mn-ac-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #FF3366, #6750A4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 13px;
  overflow: hidden;
  flex-shrink: 0;
}
.mn-ac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mn-ac-avatar span { color: #fff; }
.mn-ac-pseudo { color: #fff; font-weight: 800; font-size: 14px; }

/* Mirror div pour highlight inline */
.mn-ac-mirror {
  background: #fff !important;
}
.mn-ac-mirror span {
  color: #6750A4;
  font-weight: 900;
}

/* Summary chip line — confirme visuellement les @mentions taguées (sous le textarea) */
.mn-ac-summary {
  margin-top: 6px;
  font-size: 12px;
  color: #6B6B7A;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.mn-ac-summary-lbl {
  font-weight: 800;
  color: #1C1C2E;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mn-ac-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(103, 80, 164,.15), rgba(255,51,102,.15));
  color: #6750A4;
  border: 1px solid rgba(103, 80, 164,.3);
  font-weight: 800;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
}
.mn-ac-summary-chip i {
  color: #10B981;
  font-size: 10px;
}