/* Photos de profil dans les conversations (js/chat-avatars.js). Un rond de 32 px à côté des bulles : la photo si le compte en a
   une que l'on a le droit de voir, sinon les initiales sur la couleur de la personne. */

.chat-av {
  --av: #5c6f99;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--av);
  background: linear-gradient(140deg, var(--av), color-mix(in srgb, var(--av) 62%, #000));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.chat-av--lg {
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
}

/* Emplacement vide : garde les bulles d'une même série alignées (seule la dernière porte la pastille). */
.chat-av--spacer {
  visibility: hidden;
  background: none;
  box-shadow: none;
}

/* ---------- Fil support (js/support-chat-ui.js : .chat-bubble-row) ---------- */
.chat-bubble-row {
  align-items: flex-end;
  gap: 8px;
}

.chat-bubble-row > .chat-av {
  order: 0;
}

/* Par défaut (widget d'un utilisateur, panel prof) : le staff à gauche, l'utilisateur à droite */
.chat-bubble-row--user > .chat-av {
  order: 2;
}

/* Panel admin : mes réponses (staff) à droite, l'utilisateur à gauche */
.pp .ad-tickets .chat-bubble-row--staff > .chat-av {
  order: 2;
}

.pp .ad-tickets .chat-bubble-row--user > .chat-av {
  order: 0;
}

.chat-bubble-row > .chat-bubble {
  min-width: 0;
}

/* ---------- Fil élève <-> professeur (js/prof-chat.js : .pc-row) ---------- */
.pc-row {
  align-items: flex-end;
  gap: 8px;
}

.pc-row--mine > .chat-av {
  order: 2;
}

/* Une série de messages du même auteur : les bulles intermédiaires n'ont pas de « queue », seule la dernière en a une.
   (Sélecteur à trois classes : il doit l'emporter sur les coins de css/prof-chat.css et du panel, qui en ont deux ou trois.) */
.pc-row.pc-row--cont .pc-bubble {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.pc-row.pc-row--cont {
  margin-bottom: -2px;
}

/* ---------- Titre à côté du pseudo (js/support-chat-labels.js, js/prof-chat.js) ----------
   « Kryos [Admin] » : une étiquette pleine, de la couleur du statut, qui reste lisible sur les bulles claires comme sombres
   (les couleurs sont celles de la pastille de la barre de navigation, assombries pour un texte blanc à 4,5:1 minimum). */
.msg-role {
  --role: #475569;
  display: inline-block;
  margin-left: 0.15em;
  padding: 0 0.55em;
  border-radius: 999px;
  background: var(--role);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
  vertical-align: 0.08em;
  white-space: nowrap;
}

.msg-role--admin {
  --role: #c93620;
}

.msg-role--prof {
  --role: #b5590b;
}

.msg-role--student {
  --role: #0369a1;
}

.msg-role--guest {
  --role: #2563eb;
}

.msg-role--paid {
  --role: #047857;
}

.msg-role--visitor {
  --role: #475569;
}

@media (max-width: 560px) {
  .chat-av {
    width: 28px;
    height: 28px;
    font-size: 0.62rem;
  }
}