[THEME] Pro Bono

: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: #161616;
    --bot-message-bg: #111;
    --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;
    --s: 12px;
    --c: #111;

    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: 35.36% 35.36% at;
    --_c1: #0000 66%, var(--user-quote-color) 68% 70%, #0000 72%;
    --_c2: #0000 66%, var(--bot-quote-color) 68% 70%, #0000 72%;
    background:
        radial-gradient(var(--_g) 100% 25%, var(--_c1)) var(--s) var(--s)/var(--_s),
        radial-gradient(var(--_g) 0    75%, var(--_c2)) var(--s) var(--s)/var(--_s),
        radial-gradient(var(--_g) 100% 25%, var(--_c2)) 0 0/var(--_s),
        radial-gradient(var(--_g) 0    75%, var(--_c1)) 0 0/var(--_s),
        repeating-conic-gradient(var(--c) 0 25%, #0000 0 50%) 0 0/var(--_s),
        radial-gradient(var(--_c1)) 0 calc(var(--s)/2)/var(--s) var(--s)
        var(--c);
}

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

#chat {
    background-color: transparent !important;
    padding: 10px;
    position: relative;
    overflow-x: hidden;
    backdrop-filter: unset;
}

.mes {
    padding: 0 !important;
    margin-bottom: 15px !important;
    border-radius: 2px !important;
    background: #111;
    position: sticky;
    top: 10px;
    transform-origin: top center;
    transition: all 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.mes:nth-child(1) {
    z-index: 1;
    top: 5px;
}

.mes:nth-child(2) {
    z-index: 2;
    top: 15px;
    transform: scale(0.995);
}

.mes:nth-child(3) {
    z-index: 3;
    top: 20px;
    transform: scale(0.99);
}

.mes:nth-child(4) {
    z-index: 4;
    top: 25px;
    transform: scale(0.985);
}

.mes:nth-child(5) {
    z-index: 5;
    top: 30px;
    transform: scale(0.98);
}

.mes:nth-child(6) {
    z-index: 6;
    top: 35px;
    transform: scale(0.975);
}

.mes:nth-child(7) {
    z-index: 7;
    top: 40px;
    transform: scale(0.97);
}

.mes:nth-child(8) {
    z-index: 8;
    top: 45px;
    transform: scale(0.965);
}

.mes:nth-child(9) {
    z-index: 9;
    top: 50px;
    transform: scale(0.96);
}

.mes:nth-child(10) {
    z-index: 10;
    top: 55px;
    transform: scale(0.955);
}

.mes:nth-child(n+11) {
    z-index: 11;
    top: 60px;
    transform: scale(0.95);
}

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

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

.mes .mesAvatarWrapper {
    width: 35% !important;
    height: 35% !important;
    min-height: 150px;
    min-width: 150px;
    padding: 0;
    border-right: 1px solid var(--user-quote-color);
    border-bottom: 1px solid var(--user-quote-color);
    border-radius: 0 !important;
    display: block;
    position: absolute;
    z-index: -5;
}

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

.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_text {
    overflow-y: auto;
    max-height: 100%;
    width: 80%;
    display: block;
    margin-top: 80px;
    margin-right: 30px;
    float: right;
    background: #111d;
    padding: 10px;
    padding-bottom: 2rem;
}

.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;
    padding-right: 10%;
    border-bottom: 4px solid var(--user-text-color);
    left: 0;
    position: absolute;
    clear: both;
}

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

.mes[is_user="false"] .name_text {
    color: var(--bot-quote-color) !important;
    border-bottom: 4px solid var(--bot-text-color);
}

.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);
}

.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);
}