/* ═══════════════════════════════════════════════════════════════════════════════
   13. TIPOS ESPECIALES DE MENSAJES
   Reacciones, ubicación, contactos, stickers e interactivos
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   13.1 Reacciones
   ───────────────────────────────────────────────────────────────────────────── */

.message-reaction {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: rgba(0, 168, 132, 0.1);
    border-radius: 8px;
    margin-bottom: 5px;
}

.reaction-emoji {
    font-size: 20px;
}

.reaction-text {
    font-size: 12px;
    color: #667781;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13.2 Ubicación
   ───────────────────────────────────────────────────────────────────────────── */

.message-location {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #202c33;
    border-radius: 8px;
    margin-bottom: 5px;
}

.location-icon {
    color: #00a884;
    font-size: 20px;
}

.location-info {
    flex: 1;
}

.location-name {
    font-weight: bold;
    margin-bottom: 4px;
}

.location-address {
    font-size: 12px;
    color: #aebac1;
    margin-bottom: 8px;
}

.location-link {
    color: #00a884;
    text-decoration: none;
    font-size: 12px;
}

.location-link:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13.3 Contactos e Interactivos
   ───────────────────────────────────────────────────────────────────────────── */

.message-contact, .message-interactive {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #202c33;
    border-radius: 8px;
    margin-bottom: 5px;
}

.contact-icon, .interactive-icon {
    color: #00a884;
    font-size: 20px;
}

.contact-info, .interactive-info {
    flex: 1;
}

.contact-name, .interactive-type {
    font-weight: bold;
    margin-bottom: 4px;
}

.contact-details, .interactive-details {
    font-size: 12px;
    color: #aebac1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13.4 Stickers
   ───────────────────────────────────────────────────────────────────────────── */

.sticker-container {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.sticker-container img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
}

.file-caption {
    font-size: 12px;
    color: #aebac1;
    margin-top: 4px;
    font-style: italic;
}

.message-sticker {
    background-color: transparent;
    padding: 4px;
}

.message-sticker .media-loading {
    background-color: #202c33;
    border-radius: 8px;
    padding: 20px;
}