<style>
    /* Стили для нашей панели */
    .ts-reaction-wrap {
        display: inline-block !important;
        position: relative !important;
        cursor: pointer !important;
        padding: 5px 10px !important;
        background: #f0f2f5 !important;
        border-radius: 5px !important;
        margin-right: 10px !important;
        font-weight: bold !important;
        color: #555 !important;
        z-index: 10 !important;
    }
    .ts-selector-box {
        display: none;
        position: absolute !important;
        bottom: 35px !important;
        left: 0 !important;
        background: white !important;
        box-shadow: 0 5px 25px rgba(0,0,0,0.3) !important;
        border-radius: 30px !important;
        padding: 5px 10px !important;
        white-space: nowrap !important;
        z-index: 999999 !important; /* Максимальный приоритет */
        border: 1px solid #ddd !important;
    }
    .ts-reaction-wrap:hover .ts-selector-box {
        display: block !important;
    }
    .re-btn-v3 {
        font-size: 24px !important;
        margin: 0 5px !important;
        display: inline-block !important;
        transition: transform 0.2s !important;
    }
    .re-btn-v3:hover {
        transform: scale(1.4) !important;
    }
</style>

<script>
(function() {
    function initReactions() {
        // Ищем контейнеры кнопок под постами
        var controls = document.querySelectorAll('.wall-entry-controls');
        
        controls.forEach(function(el) {
            if (!el.querySelector('.ts-reaction-wrap')) {
                var postId = el.closest('.wall-entry').getAttribute('data-content-key');
                
                // Создаем элемент вручную через чистый JS (так надежнее)
                var wrap = document.createElement('div');
                wrap.className = 'ts-reaction-wrap';
                wrap.innerHTML = 'РЕАКЦИЯ';
                
                var box = document.createElement('div');
                box.className = 'ts-selector-box';
                box.innerHTML = `
                    <span class="re-btn-v3" data-type="love">❤️</span>
                    <span class="re-btn-v3" data-type="lol">😂</span>
                    <span class="re-btn-v3" data-type="wow">😮</span>
                    <span class="re-btn-v3" data-type="sad">😢</span>
                `;
                
                wrap.appendChild(box);
                el.prepend(wrap);
                
                // Клик по эмодзи
                box.querySelectorAll('.re-btn-v3').forEach(function(btn) {
                    btn.onclick = function(e) {
                        e.stopPropagation();
                        var type = this.getAttribute('data-type');
                        alert('Выбрано: ' + type + ' для поста ' + postId);
                        // Сюда мы потом подключим отправку в наш reactions_api.php
                    };
                });
            }
        });
    }

    // Запускаем проверку постоянно (для динамической ленты)
    setInterval(initReactions, 2000);
})();
</script>