/* Mensajes del chat coloreados según el rol más alto de quien escribe:
   admin en oro y delegación en rojo. Se carga la última para ganar a los
   temas claro, oscuro y glass, también en los mensajes propios. */

html body .app-shell .chat-message.role-admin .chat-bubble {
  border-color: #c99a1d;
  background: linear-gradient(135deg, #fbe08a, #e2b33c);
  box-shadow: 0 8px 20px rgba(201, 154, 29, .25);
  color: #3d2c00;
}

html body .app-shell .chat-message.role-delegation .chat-bubble {
  border-color: #b91c1c;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 8px 20px rgba(185, 28, 28, .25);
  color: #fff;
}

html body .app-shell .chat-message.role-admin .chat-bubble p,
html body .app-shell .chat-message.role-admin .chat-bubble header strong {
  color: #3d2c00;
}

html body .app-shell .chat-message.role-admin .chat-bubble header time,
html body .app-shell .chat-message.role-admin .chat-bubble header button {
  color: rgba(61, 44, 0, .7);
}

html body .app-shell .chat-message.role-admin .chat-bubble header span,
html body .app-shell .chat-message.role-admin .mention,
html body .app-shell .chat-message.role-admin .mention.mention-me {
  background: rgba(61, 44, 0, .12);
  color: #3d2c00;
}

html body .app-shell .chat-message.role-delegation .chat-bubble p,
html body .app-shell .chat-message.role-delegation .chat-bubble header strong {
  color: #fff;
}

html body .app-shell .chat-message.role-delegation .chat-bubble header time,
html body .app-shell .chat-message.role-delegation .chat-bubble header button {
  color: rgba(255, 255, 255, .78);
}

html body .app-shell .chat-message.role-delegation .chat-bubble header span,
html body .app-shell .chat-message.role-delegation .mention,
html body .app-shell .chat-message.role-delegation .mention.mention-me {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}