/* ==========================================================================
   Menciones y mensajes de sistema de los chats.

   Va en una hoja global —y no en el CSS aislado de cada componente— porque el
   texto de un mensaje se pinta como MarkupString: el HTML que genera
   MentionText no lleva el atributo de ámbito que Blazor añade al marcado del
   componente, así que una regla aislada nunca lo alcanzaría.
   ========================================================================== */

.chat-mention {
    display: inline;
    font-weight: 600;
    color: var(--rs-primary-text);
    background: var(--rs-primary-subtle);
    border-radius: 4px;
    padding: 0 3px;
    white-space: nowrap;
}

/* Dentro de una burbuja propia (fondo de marca) el chip se apoya en el fondo del
   propio mensaje: el subtle claro sobre el primario no se leería. */
.chat-bubble-wrap.is-mine .chat-mention,
.fbmsg.is-mine .chat-mention {
    color: var(--rs-on-primary);
    background: color-mix(in srgb, var(--rs-on-primary) 22%, transparent);
}

/* Mensaje de sistema: «Ana ha añadido a Luis a la conversación». */
.chat-system-line {
    display: flex;
    justify-content: center;
    margin: 6px 0;
}

.chat-system-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 88%;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--rs-surface-container);
    color: var(--rs-on-surface-variant);
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
}

.chat-system-text .material-icons-round {
    font-size: 14px;
    color: var(--rs-primary-text);
}