
/* [Start] = Flashcord Beta == ChatEffects Code CSS = */

[class^="messageListItem_"]:nth-last-child(-n + 9 ):has([href^="http://flashcord/"], [class="replugged-greentext"]) {
    container-name: var(--Flashcord-Chat_Effects, FC-ChatEffects_Animated);
    container-type: inline-size;
}

@container FC-ChatEffects_Animated (min-width: 0px) {
    [href="http://flashcord/small"],
    [href="http://flashcord/shake"],
    [href="http://flashcord/dramatic"],
    [href="http://flashcord/fade-bottom"],
    [href="http://flashcord/4chan"] {
        display: none;
    }
    [class^="message_"]:has(a[href="http://flashcord/small"]) {
        animation: FCME-Small 1s;
        scale: 0.8;
        transform-origin: left center;
    }
    [class^="message_"]:has(a[href="http://flashcord/shake"]) {
        animation: FlashCore-Shake 100ms infinite;
    }
    [class^="message_"]:has(a[href="http://flashcord/dramatic"]) {
        animation: FCME-Dramatic 8s ease-out;
        transform-origin: left center;
    }
    [class^="message_"]:has(a[href="http://flashcord/fade-bottom"]) {
        animation: FCME-Old_BottomFade 2s;
    }

    /* Green Text Mode from 4Chan */
    [class^="message_"]:has([href="http://flashcord/4chan"], [class="replugged-greentext"]) {
        display: flex !important;
        background: #fffeed !important;
        container-name: FC-ChatEffects_4Chan-L1 !important;
        container-type: inline-size !important;
    }
    @container FC-ChatEffects_4Chan-L1 (min-width: 0px) { /* This is entirely fucked with replies, needs fixing */
        [class^="contents_"] {
            margin-left: 16px !important;
            order: 1;
        }
        [class^="contents_"] [id^="message-content-"] {
            margin-top: 1.2rem;
        }
        [class^="username_"] {
            color: #117743 !important;
        }
        span {
            color: #d00;
        }
        [class^="avatar_"], /* WTF Does this do? // Brother can't read - Sirius 03/12/23 */
        [class^="replyAvatar_"],
        [class^="avatarDecoration_"],
        span[role="button"]:has(svg) { 
            display: none;
        }
        [class^="timestamp_"] {
            color: #800 !important;
        }
        .replugged-greentext > span {
            color: #789922 !important;
        }
        [id^="message-reply-context-"] {
            container-name: FC-ChatEffects_4Chan-L2 !important;
            container-type: inline-size !important;
            display: -webkit-box !important;
            font-size: 1rem;
            top: 1.3rem;
        }
        [id^="message-reply-context-"]::before { display: none !important; }
        [class^="contents_"] [class^="header-"] {
            margin-bottom: 1rem;
        }
        [class^="mediaAttachmentsContainer"] { width: 100% !important;}
        .stafftag, .platform-indicators { display: none; }
        @container FC-ChatEffects_4Chan-L2 (min-width: 0px) {
            img, svg, span:has(.stafftag) { display: none; }
            [class^="username_"]::before {
                content: ">>";
                color: #d00 !important;
                margin-left: 1rem;
            }
            [class^="username_"] {
                color: #d00 !important;
                margin-top: 10px;
            }
            [class^="repliedTextPreview_"] {
                margin-top: 0px;
                opacity: 0.5;
            }
        }
    }
}

@container FC-ChatEffects_Text (min-width: 0px) {
    [href="http://flashcord/small"],
    [href="http://flashcord/shake"],
    [href="http://flashcord/dramatic"],
    [href="http://flashcord/fade-bottom"], 
    [href="http://flashcord/4chan"]{
        display: none;
    }

    [id^="message_content-"]:has([href="http://flashcord/small"]):after {
        content: "\A 🎉 Flashcord Effect: Small";
        white-space: pre;
        color: var(--text-normal);
        font-size: small;
    }
    [id^="message_content-"]:has([href="http://flashcord/shake"]):after {
        content: "\A 🎉 Flashcord Effect: Shaking";
        white-space: pre;
        color: var(--text-normal);
        font-size: small;
    }
    [id^="message_content-"]:has([href="http://flashcord/dramatic"]):after {
        content: "\A 🎉 Flashcord Effect: Dramatic";
        white-space: pre;
        color: var(--text-normal);
        font-size: small;
    }
    [id^="message_content-"]:has([href="http://flashcord/fade-bottom"]):after {
        content: "\A 🎉 Flashcord Effect: Fading from the Bottom";
        white-space: pre;
        color: var(--text-normal);
        font-size: small;
    }
    [id^="message_content-"]:has([href="http://flashcord/4chan"]):after {
        content: "\A 🎉 Flashcord Effect: 4Chan";
        white-space: pre;
        color: var(--text-normal);
        font-size: small;
    }
}


/* [END] = Flashcord Beta == ChatEffects Code CSS = */
