/* Реакции под сообщениями (контекстное меню — в lumina-ui.css) */

.message-highlight {
    background: var(--lumina-accent-soft) !important;
    border-radius: 8px;
}

.message-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 2px 2px 0;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--lumina-bg-hover);
    border: 1px solid var(--lumina-border-strong);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--lumina-text);
    cursor: pointer;
}

.reaction-badge img {
    width: 16px;
    height: 16px;
    filter: none;
}

.reaction-badge.my-reaction {
    color: var(--lumina-accent);
    border-color: var(--lumina-accent-border);
    background: var(--lumina-accent-soft);
}

.reaction-badge--pop {
    animation: reaction-pop 0.22s cubic-bezier(0.2, 0.9, 0.35, 1);
}

.reaction-badge--out {
    animation: reaction-out 0.16s ease-in forwards;
}

.message-reactions--out {
    opacity: 0;
    transition: opacity 0.16s ease;
}

@keyframes reaction-pop {
    from {
        transform: scale(0.55);
        opacity: 0.4;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes reaction-out {
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

.message-wrapper--gift .message-reactions {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}
/* Добавить в конец файла */

.paid-reaction {
    background: rgba(245, 176, 66, 0.15);
    border-color: rgba(245, 176, 66, 0.35);
}

.paid-reaction.my-reaction {
    background: rgba(245, 176, 66, 0.3);
    border-color: #f5b042;
    color: #f5b042;
}

.paid-reaction-icon {
    width: 14px;
    height: 14px;
    filter: none !important;
}

.tg-action img[src*="kristall"] {
    filter: none !important;
}
.paid-reaction {
    background: rgba(245, 176, 66, 0.15);
    border-color: rgba(245, 176, 66, 0.35);
}

.paid-reaction.my-reaction {
    background: rgba(245, 176, 66, 0.3);
    border-color: #f5b042;
    color: #f5b042;
}

.paid-reaction-icon {
    width: 14px;
    height: 14px;
    filter: none !important;
}

.tg-action img[src*="kristall"] {
    filter: none !important;
}