S'mores Company

:root {
    /* MAIN COLOR VARIABLES */
    --user-text-color: floralwhite;
    --user-quote-color: #d1a62b;
    --user-quote-color-opacity: #d1a62b99;
    --user-em-color: cyan;
    --bot-text-color: floralwhite;
    --bot-quote-color: #518DC0;
    --bot-quote-color-opacity: #518DC099;
    --bot-em-color: mediumpurple;

    /* BACKGROUND VARIABLES */
    --bg1: #518DC099;
    --bg2: #000222;
    --user-message-bg: #222222;
    --bot-message-bg: #262626;
    --scroll-track-bg: var(--bg1);
    --scroll-thumb-bg: #111617;
    --scroll-border: var(--bg1);

    /* FONT STYLE VARIABLES */
    --message-font: 'Outfit';
    --name-font: "Fascinate";
    --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-size: cover;
    background-position: center center;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml;utf8,%3Csvg width=%222000%22 height=%221400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23dbc8a6%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23e4d5bc%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22b%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23cdb380%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23d9c69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22c%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23688c72%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%238da895%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22d%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23036564%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23428b8a%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22e%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23034e57%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23427a81%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22f%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23033649%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23426876%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22g%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%2303263f%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23425c6f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22h%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23031634%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23425066%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill=%22%23e8ddcb%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cpath d=%22M0 155c35.155 5.124 70.31 10.248 104 8 33.69-2.248 65.912-11.87 102-12 36.088-.13 76.04 9.23 114 12 37.96 2.77 73.93-1.05 108-9 34.07-7.95 66.243-20.028 99-14 32.757 6.028 66.097 30.161 103 29 36.903-1.161 77.368-27.618 114-34 36.632-6.382 69.43 7.311 104 8 34.57.689 70.915-11.626 105-5 34.085 6.626 65.913 32.193 99 38 33.087 5.807 67.435-8.146 104-14 36.565-5.854 75.348-3.607 109 3s62.173 17.575 98 9 78.961-36.694 115-42c36.039-5.306 64.983 12.2 96 21 31.017 8.8 64.108 8.895 102 15 37.892 6.105 80.586 18.22 119 13 38.414-5.22 72.547-27.777 106-35 33.453-7.223 66.227.889 139 9l-40 1245H0Z%22 fill=%22url(%23a)%22%2F%3E%3Cpath d=%22M0 311c38.309 1.143 76.618 2.286 109 3 32.382.714 58.837 1 93-1s76.033-6.284 112-5c35.967 1.284 66.032 8.136 101 10 34.968 1.864 74.838-1.26 113-8 38.162-6.74 74.617-17.098 109-18 34.383-.902 66.696 7.651 101 19s70.6 25.492 104 20c33.4-5.492 63.901-30.62 98-38 34.099-7.38 71.795 2.989 106 13s64.92 19.666 103 15 83.525-23.652 121-32c37.475-8.348 66.98-6.057 99-2 32.02 4.057 66.559 9.88 103 14 36.441 4.12 74.787 6.535 108 0 33.213-6.535 61.294-22.02 96-16s76.036 33.544 114 40c37.964 6.456 72.561-8.155 107-14 34.439-5.845 68.72-2.922 143 0l-40 1089H0Z%22 fill=%22url(%23b)%22%2F%3E%3Cpath d=%22M0 466c31.038-.406 62.076-.811 98-1 35.924-.189 76.734-.16 114 0 37.266.16 70.989.455 107 8 36.011 7.545 74.311 22.342 107 19 32.689-3.342 59.767-24.822 93-27 33.233-2.178 72.621 14.947 111 15 38.379.053 75.75-16.967 113-17 37.25-.033 74.383 16.921 107 18 32.617 1.079 60.72-13.718 92-27s65.736-25.05 102-14c36.264 11.05 74.334 44.916 113 50 38.666 5.084 77.927-18.616 115-24 37.073-5.384 71.958 7.548 104 13s61.24 3.425 94-7 69.082-29.246 107-22c37.918 7.246 77.432 40.56 114 41 36.568.44 70.191-31.997 103-45s64.802-6.572 99 0c34.198 6.572 70.599 13.286 147 20l-40 934H0Z%22 fill=%22url(%23c)%22%2F%3E%3Cpath d=%22M0 622c37.763 12.556 75.526 25.112 112 24 36.474-1.112 71.658-15.893 104-20 32.342-4.107 61.84 2.462 95 1 33.16-1.462 69.978-10.953 106-15 36.022-4.047 71.247-2.65 106-4s69.034-5.445 103-8c33.966-2.555 67.617-3.57 103-1 35.383 2.57 72.498 8.723 109 9 36.502.277 72.391-5.323 107-5 34.609.323 67.936 6.57 105 4 37.064-2.57 77.864-13.956 113-11 35.136 2.956 64.61 20.255 98 18 33.39-2.255 70.699-24.062 105-17 34.301 7.062 65.595 42.994 102 46 36.405 3.006 77.92-26.916 113-41s63.722-12.332 100-7c36.278 5.332 80.19 14.243 117 25s66.517 23.36 99 24c32.483.64 67.741-10.68 143-22l-40 778H0Z%22 fill=%22url(%23d)%22%2F%3E%3Cpath d=%22M0 777c39.715-7.904 79.43-15.808 112-21 32.57-5.192 57.992-7.673 91-2s73.6 19.501 112 20c38.4.499 74.607-12.33 109-16s66.972 1.822 100 3c33.028 1.178 66.505-1.959 104 0 37.495 1.959 79.01 9.014 113 20 33.99 10.986 60.457 25.905 95 16 34.543-9.905 77.164-44.632 112-44 34.836.632 61.888 36.623 97 39 35.112 2.377 78.283-28.862 114-40 35.717-11.138 63.98-2.177 97 12s70.797 33.568 108 32c37.203-1.568 73.832-24.095 111-25 37.168-.905 74.874 19.813 108 30 33.126 10.187 61.673 9.844 94-1s68.434-32.189 107-34 79.59 15.911 116 21 68.205-2.456 140-10l-40 623H0Z%22 fill=%22url(%23e)%22%2F%3E%3Cpath d=%22M0 933c33.167-9.492 66.335-18.985 103-20 36.665-1.015 76.829 6.447 113 6 36.171-.447 68.351-8.803 104-9 35.649-.197 74.767 7.765 108 11 33.233 3.235 60.58 1.742 95 10s75.91 26.267 111 21c35.09-5.267 63.777-33.811 98-43s73.982.977 111 14 71.295 28.904 106 32 69.84-6.592 102-16c32.16-9.408 61.348-18.537 97-24 35.652-5.463 77.768-7.261 114-5s66.58 8.581 99 11c32.42 2.419 66.913.937 106 0s82.77-1.328 119 5c36.23 6.328 65.01 19.377 100 26 34.99 6.623 76.19 6.822 112 2s66.232-14.663 99-19 67.884-3.168 143-2l-40 467H0Z%22 fill=%22url(%23f)%22%2F%3E%3Cpath d=%22M0 1088c36.716 1.838 73.433 3.675 110 2 36.567-1.675 72.986-6.864 106-7 33.014-.136 62.624 4.78 99 8 36.376 3.22 79.518 4.747 115 1s63.303-12.766 96-14 70.27 5.318 105 4c34.73-1.318 66.616-10.507 99-10 32.384.507 65.267 10.71 103 12 37.733 1.29 80.317-6.333 117-10 36.683-3.667 67.464-3.377 101 6 33.536 9.377 69.827 27.84 105 28 35.173.16 69.229-17.983 107-24 37.771-6.017 79.257.094 113 10 33.743 9.906 59.742 23.608 95 17 35.258-6.608 79.776-33.525 117-34 37.224-.475 67.153 25.491 101 23 33.847-2.491 71.613-33.44 107-37 35.387-3.56 68.396 20.269 102 29 33.604 8.731 67.802 2.366 142-4l-40 312H0Z%22 fill=%22url(%23g)%22%2F%3E%3Cpath d=%22M0 1244c35.167-10.736 70.335-21.472 105-26 34.665-4.528 68.828-2.849 106 1s77.352 9.866 112 16c34.648 6.134 63.762 12.384 98 6s73.598-25.402 110-20c36.402 5.402 69.845 35.226 101 38 31.155 2.774 60.023-21.5 96-35s79.062-16.224 115-7 64.73 30.398 98 37c33.27 6.602 71.022-1.367 110-4 38.978-2.633 79.184.071 113 4s61.244 9.083 95-1 73.841-35.404 110-32c36.159 3.404 68.391 35.532 104 35 35.609-.532 74.594-33.723 108-30 33.406 3.723 61.233 44.359 94 43 32.767-1.359 70.476-44.712 109-51 38.524-6.288 77.864 24.49 114 35 36.136 10.51 69.068.755 142-9l-40 156H0Z%22 fill=%22url(%23h)%22%2F%3E%3C%2Fsvg%3E");
}

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

#sheld {
    width: 100%;
    align-content: center;
    justify-items: center;
    align-items: center;
}

#extensionTopBar, #top-bar, #form_sheld {
    width: 60vw;
    background-color: #222;
    border-radius: 0;
}

#chat {
    background-color: transparent !important;
    position: relative;
    backdrop-filter: unset;
    padding-top: 20px;
}

.mes {
    padding: 0 !important;
    margin-bottom: 15px !important;
    background-color: transparent !important;
    top: 10px;
    transform-origin: top center;
    transition: all 0.2s ease-out;
    border: 0 !important;
}

.mes br,
.mes p {
    margin-bottom: 1rem;
}
.ch_name{
    width: 70vw;
    position: absolute;
    top: 0;
    left: 0;
}

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

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

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

.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: 50%;
    filter: grayscale(100%);
    border: 0 !important;
    border-radius: 0 !important;
    transition: all 250ms ease-in-out;
}

.mes_block .mes_text {
    width: 50%;
    display: block;
    margin-top: 80px;
    margin-right: 30px;
    background: #222;
    padding: 30px;
    border: 3px dashed var(--bot-quote-color);
    padding-bottom: 2rem;
    align-self: center;
    border-radius: 20px;
    margin-bottom: 40px;
}

.mes[is_user="false"] .mes_text{
    border: 3px dashed var(--user-quote-color);
}

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

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

.mes .name_text {
    font-family: var(--name-font);
    font-size: 3rem;
    font-weight: 900;
    background-color: #d1a62b99;
    padding: 5px 10px;
    text-wrap: nowrap;
    min-width: 50vw;
    text-align: right;
    display: block !important;
    border-radius: 0 20px 20px 0;
    text-transform: uppercase !important;
}

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

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

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