/* Ce qui fait vivre le salon : présence, réactions, « en train d'écrire ».
   Palette et arrondis alignés sur v5.css (une seule couleur d'accent, coins discrets). */

/* ------------------------------ Présence ------------------------------- */
.presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2FA36B;
  box-shadow: 0 0 0 2px rgba(47, 163, 107, .18);
  vertical-align: middle;
}

/* ------------------------------ Réactions ------------------------------ */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.react-chip,
.react-add,
.react-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid rgba(42, 35, 32, .12);
  border-radius: 6px;
  background: #fff;
  color: #2A2320;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.react-chip:hover,
.react-add:hover,
.react-pick:hover {
  background: #F7F3EE;
  border-color: rgba(42, 35, 32, .22);
}

.react-chip.mine {
  background: rgba(168, 88, 52, .10);
  border-color: rgba(168, 88, 52, .45);
}

.react-emoji { font-size: 14px; }

.react-count {
  font-size: 11px;
  font-weight: 600;
  color: #6A6A87;
}

.react-chip.mine .react-count { color: #A85834; }

.react-add {
  padding: 2px 7px;
  font-weight: 700;
  color: #6A6A87;
}

.react-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.react-pick {
  padding: 3px 6px;
  font-size: 15px;
}

/* --------------------- « En train d'écrire » --------------------------- */
.typing-line {
  margin: 6px 0 0;
  padding: 0 2px;
  font-size: 12.5px;
  font-style: italic;
  color: #6A6A87;
  min-height: 17px;
}

.typing-line[hidden] { display: none; }

/* ------------------------- Badge « IA » de l'agent --------------------- */
/* Distinct du badge « BOT » de Q : Q est un automate, Z écrit avec un
   modèle de langage. Ce badge est obligatoire (loi européenne sur l'IA) :
   les membres doivent savoir qu'ils parlent à une machine. */
.ai-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: #2FA36B;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ---------------------- Badge « ACCUEIL » d'INFO ----------------------- */
/* Distinct de « IA » (Z) et de « BOT » (Q). INFO n'est pas un compagnon de
   conversation : il accuse réception d'une demande et invite à la détailler.
   Teinte ambre, pour ne pas être confondu avec le vert de Z. */
.info-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: #C2811F;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}

@media (max-width: 560px) {
  /* Sur téléphone, les puces restent compactes et ne poussent pas le texte. */
  .msg-reactions { gap: 5px; }
  .react-chip, .react-add { min-height: 24px; padding: 2px 7px; }
  .typing-line { font-size: 12px; }
}