/* ==========================================================
   Latinbook — Fotos, videos, audio y archivos dentro del chat
   --------------------------------------------------------
   Archivo NUEVO y separado a propósito: así no hace falta tocar
   messages-modern.css ni messages-voice-video.css (que ya existen y
   funcionan) para agregar el estilo de las fotos/videos/audios/archivos
   que ahora sí se pintan dentro de la burbuja del mensaje.
   Reutiliza las clases que ya existían (.message-group, .message-bubble,
   .message-time, .date-separator) y solo agrega las nuevas.
   ========================================================== */

.message-bubble .msg-photo {
    display: block;
    max-width: 260px;
    max-height: 320px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    object-fit: cover;
}

.message-bubble .msg-video {
    display: block;
    max-width: 280px;
    max-height: 360px;
    width: 100%;
    border-radius: 12px;
    background: #000;
}

.message-bubble .msg-audio {
    display: block;
    width: 240px;
    max-width: 100%;
    min-width: 220px;
    height: 40px;
}

.message-bubble .msg-media-caption {
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.3;
}

.message-bubble a.msg-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.12);
    text-decoration: none;
    color: inherit;
    max-width: 260px;
}

.message-bubble a.msg-file:hover {
    background: rgba(127, 127, 127, 0.2);
}

.message-bubble a.msg-file i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.message-bubble .msg-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.message-bubble .msg-file-size {
    font-size: 0.78rem;
    opacity: 0.7;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .message-bubble .msg-photo,
    .message-bubble .msg-video,
    .message-bubble a.msg-file {
        max-width: 200px;
    }
    .message-bubble .msg-audio {
        width: 200px;
        min-width: 180px;
    }
}

/* ==========================================================
   Botón de Latinmojis del chat (antes abría un buscador de
   emojis viejo y separado, #emojiPicker, que no mandaba bien
   los emojis elegidos — ver app.html). Ahora el botón usa el
   mismo sistema de Latinmojis que ya funciona en el resto de
   la app (clase .latinmoji-trigger), pero esa clase por sí sola
   trae su propio tamaño/forma de botón redondo (pensado para ir
   SEPARADO, al lado de un textarea) — aquí en cambio el botón
   tiene que seguir flotando DENTRO del cuadro de texto, en la
   esquina, como siempre estuvo. Este selector combinado
   (.chat-input-emoji.latinmoji-trigger) tiene más "peso" en CSS
   que cualquiera de las dos clases por separado, así que gana
   sin importar en qué orden se carguen las hojas de estilo, y
   deja el botón en su lugar de siempre.
   ========================================================== */
.chat-input-field-container .chat-input-emoji.latinmoji-trigger {
    position: absolute;
    right: 12px;
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 22px;
    padding: 0;
}
.chat-input-field-container .chat-input-emoji.latinmoji-trigger:hover {
    transform: translateY(-50%) scale(1.1);
}