Frizzle Fry

:root {
    /* MAIN COLOR VARIABLES */
    --user-text-color: floralwhite;
    --user-quote-color: darkcyan;
    --user-quote-color-opacity: #6CADAF;
    --user-em-color: cyan;
    --bot-text-color: floralwhite;
    --bot-quote-color: rebeccapurple;
    --bot-quote-color-opacity: #86698F;
    --bot-em-color: mediumpurple;

    /* BACKGROUND VARIABLES */
    --bg1: #402060;
    --bg2: #000222;
    --user-message-bg: #222222;
    --bot-message-bg: #111;
    --mes-gradient:
        repeating-radial-gradient(#666666cc 0.0001%, #222222cc 0 0.0002%) 50% 0/2500px 2500px,
        repeating-conic-gradient(#666666cc 0.0001%, #222222cc 0.0002%) 60% 60%/2500px 2500px;
    --scroll-track-bg: var(--bg1);
    --scroll-thumb-bg: #111617;
    --scroll-border: var(--bg1);

    /* FONT STYLE VARIABLES */
    --message-font: 'Lato';
    --name-font: "Lexend Giga";
    --main-text-style: normal;
    --main-text-weight: 300;
    --main-text-size: 1.15rem;
    --italic-weight: 400;
    --italic-style: italic;

    /* CODEBLOCK VARIABLES */
    --code-font: 'Victor Mono';
    --code-background: #111;
    --code-text: #E6BFAB;
    --code-glow: transparent;
    --glow-color: #EEEEEE44;
}

body {
    margin: 0;
    min-height: 100vh;
    min-width: 100vw;
    background: repeating-conic-gradient(var(--bg1) 0 0.00002%, var(--bg2) 0 .00016%) 0 0/50000px 2000px;
}

u {
    color: var(--user-text-color) !important;
}

#chat {
    background-color: transparent !important;
    padding: 10px;
}

.mes {
    padding: 0 !important;
    margin-bottom: 5px !important;
    border-radius: 0 !important;
    background: var(--mes-gradient);
    background-blend-mode: difference;
    animation: b .2s infinite alternate;
}

.mes br,
.mes p {
    margin-bottom: 1rem;
}

.mes_block {
    padding: 15px;
    margin-left: 0;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.mes .mesAvatarWrapper {
    min-height: 100% !important;
    height: 100%;
    width: 8rem;
    padding: 0;
    background: var(--mes-gradient);
    background-blend-mode: difference;
    animation: b .2s infinite alternate;
    border-right: 1px solid var(--user-quote-color);
    border-radius: 0 !important;
}

.mes[is_user="false"] .mesAvatarWrapper {
    border-right: 1px solid var(--bot-quote-color);
}

@keyframes b {
    100% { background-position: 50% 0, 60% 50% }
}

.mes .mesAvatarWrapper .avatar {
    width: 100% !important;
    height: 100% !important;
    align-content: center;
}

.mes .mesAvatarWrapper img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    opacity: 30%;
    filter: grayscale(20%);
    border: 0 !important;
    border-radius: 0 !important;
    transition: all 250ms ease-in-out;
    image-rendering: pixelated;
}

.mes .mesAvatarWrapper img:hover {
    opacity: 50%;
}

.mes[is_user="true"] {
    color: var(--user-text-color) !important;
    background-color: var(--user-message-bg) !important;
    padding: 5px;
}

.mes[is_user="false"] {
    color: var(--bot-text-color) !important;
    background-color: var(--bot-message-bg) !important;
    padding: 5px;
}

.mes .name_text {
    font-family: var(--name-font);
    font-size: 3rem;
    font-weight: 900;
    background-color: #000000;
    padding: 5px 10px;
    min-width: 500px;
    text-align: right;
    opacity: 0.5;
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="distort"><feTurbulence baseFrequency="0.01 0.01" numOctaves="1" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="R" /></filter></svg>#distort');
}

.mes[is_user="true"] .name_text {
    color: var(--user-quote-color) !important;
}

.mes[is_user="false"] .name_text {
    color: var(--bot-quote-color) !important;
}

.mes[is_user="true"] p q {
    color: var(--user-quote-color);
}

.mes[is_user="true"] p em, .mes[is_user="true"] p strong {
    color: var(--user-em-color);
}

.mes[is_user="false"] p q {
    color: var(--bot-quote-color);
}

.mes[is_user="false"] p em, .mes[is_user="false"] p strong {
    color: var(--bot-em-color);
}

.mes_text p {
    font-size: var(--main-text-size);
    font-family: var(--message-font);
    font-style: var(--main-text-style);
    font-weight: var(--main-text-weight);
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="distort"><feTurbulence baseFrequency="0.005 0.005" numOctaves="2" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="G" yChannelSelector="G" /></filter></svg>#distort');
}

.mes_text p em, .mes_text p strong {
    font-weight: var(--italic-weight);
    font-style: var(--italic-style) !important;
}

.mes_text p q {
    font-weight: normal;
    font-style: normal;
}

.mes_text code {
    background-color: var(--code-background);
    color: var(--code-text);
    text-shadow: 0px 0px 2px var(--code-glow) !important;
    font-family: var(--code-font);
}

.swipe_left,
.swipe_right,
.mfc--root span {
    opacity: 1;
    color: #EEEEEEBB;
}

.swipe_left::before,
.swipe_right::before,
.mfc--root span {
    opacity: 1;
    text-shadow: 2px 2px 3px black !important;
}

/* Scrollbar styles */
#chat::-webkit-scrollbar {
    width: 14px;
    height: 5px;
}

#chat::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: inset 200px 200px 0 200px var(--scroll-track-bg);
    border-radius: 0;
}

#chat::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-bg);
    border: 4px var(--scroll-border) solid;
    width: 14px;
}

#chat::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-bg);
}