document.addEventListener("DOMContentLoaded", function () {
    const toggleButtons = document.querySelectorAll('.toggleReply');

    toggleButtons.forEach(button => {
        button.addEventListener('click', function () {
            const replyContainer = this.closest('.replyContainer');
            const reply = replyContainer.querySelector('.reply');
            const arrowUp = replyContainer.querySelector('.arrowUp');
            const arrowDown = replyContainer.querySelector('.arrowDown');

            reply.classList.toggle('hidden');

            if (reply.classList.contains('hidden')) {
                arrowUp.classList.add('hidden');
                arrowDown.classList.remove('hidden');
            } else {
                arrowUp.classList.remove('hidden');
                arrowDown.classList.add('hidden');
            }

            if (!reply.classList.contains('hidden')) {
                replyContainer.classList.add('shadow-md');
            } else {
                replyContainer.classList.remove('shadow-md');
            }
        });
    });
});