// ==UserScript==
// @name         아프리카TV 정렬 개선
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adjust chat styles on AfreecaTV live streams for consistent alignment
// @author       You
// @match        https://play.afreecatv.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const adjustLayout = () => {
        // 숨기고 싶은 클래스 목록
        const classesToHide = ['grade-badge-fan', 'thumb', 'grade-badge-vip'];

        // 각 클래스에 대해 숨기기 처리
        classesToHide.forEach(className => {
            document.querySelectorAll(`.${className}`).forEach(element => {
                element.style.display = 'none';
            });
        });

        // 모든 username 요소를 찾음
        const usernames = document.querySelectorAll('.username');
        const maxUsernameWidth = 6 * 14; // 6글자 * 14px

        // 각 username에 계산된 최대 너비를 적용
        usernames.forEach(username => {
            username.style.minWidth = `${maxUsernameWidth}px`;
        });

        // 모든 메시지 컨테이너 요소의 마진을 0으로 설정
        document.querySelectorAll('.message-container').forEach(container => {
            container.style.margin = '0px';
        });
    };

    // MutationObserver를 사용하여 DOM 변화 감지
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                adjustLayout();
            }
        });
    });

    // 관찰할 대상 요소와 설정 (채팅 메시지가 추가되는 컨테이너 지정 필요)
    const config = { childList: true, subtree: true };
    const targetNode = document.body; // 예시로 body를 사용했지만, 실제 채팅 메시지가 추가되는 컨테이너로 변경해야 함

    // 관찰 시작
    observer.observe(targetNode, config);

    // 초기 레이아웃 조정
    adjustLayout();
})();