/*Version 9.6.8*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    --primary-clr: #609966;
    --btn-hover-clr: #9DC08B;
    --primary-dark-shade: #40513B;
    --primary-light-shade: #f2f2ee;
    --user-message-bg-clr: #88A97F;
    --ai-message-bg-clr: #B9D9A9;
    --user-message-txt-clr: #1e1e1e;
    --ai-message-txt-clr: #212B1F;
    --btn-txt-clr-when-primary: #0b0b0b;
    --btn-txt-clr-when-hover: #0b0b0b;
    --btn-txt-clr-when-primary-dark: #eeeeee;
    --btn-icon-clr-when-primary: #eeeeee;
    --btn-icon-clr-when-hover: #eeeeee;
    --btn-border-clr-when-primary: #609966;
    --btn-border-clr-when-hover: #609966;
    --btn-border-clr-when-primary-dark: #40513B;
    --input-bg-clr: #EDF1D6;
    --txt-clr-when-input: #273124;
    --txt-primary: #273124;
    --background-clr: #EDF1D6;
    --background-dark-shade: #d9ddc0;
    --low-op-border-clr: #609966;
    --ai-process-msg-strobe-clr: #609966;
    --primary-clr-in-hsl: 126, 23%, 49%;
    --pre-code-bg-clr: #273124;
    --hover-options-bg: #bddaae;
    --hover-options-bg-hover: #9DC08B;
    --anchor-clr: #1a2417;
    --inputbox-clr: #EDF1D6;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-clr);
    overflow: hidden;
}

p {
    line-height: 1.6;
}

a {
    color: var(--anchor-clr);
    background-color: var(--background-dark-shade);
}

.mobileAppWrapper {
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    width: 100vw;
    position: relative;
}

.ChatlorinMainPage {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mainPageChats {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

.mainPagePersonalities {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

#chatbox {
    background-color: var(--background-clr);
    flex: 1;
    position: relative;
    width: 100vw;
    margin: 0 auto;
    height: 100%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);

}

.chat-inner-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
}

#chatlog {
    display: grid;
    overflow-y: auto;
    align-content: start;
    padding: 2vw 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    flex: 1;
}

.user-message {
    background-color: var(--user-message-bg-clr);
    color: var(--user-message-txt-clr);
    margin-bottom: 30px;
    padding: 10px 15px;
    display: block;
    max-width: 80vw;
    min-width: 40vw;
    width: fit-content;
    display: block;
    justify-self: right;
    height: fit-content;
    line-height: 1.5;
    position: relative;
    margin-right: 20px;
    word-wrap: break-word;
    border-radius: 10px;
}

.user-message p+p {
    margin-top: 15px;
}

.ai-message {
    background-color: var(--ai-message-bg-clr);
    color: var(--ai-message-txt-clr);
    margin-bottom: 30px;
    margin-left: 50px;
    padding: 50px 20px 20px;
    display: block;
    border-radius: 10px;
    width: 80vw;
    justify-self: left;
    height: fit-content;
    line-height: 1.5;
    position: relative;
    font-weight: 400;
    word-wrap: break-word;
}

.ai-message::after {
    content: var(--ai-name);
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    position: absolute;
    left: 20px;
    top: 15px;
    font-weight: bold;
    font-size: 17px;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-message::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -45px;
    top: 5px;
    background-image: var(--avatar);
    background-size: contain;
    border-radius: 50%;
    border: 3px solid var(--ai-message-bg-clr);
}

.chat-intro {
    background-color: var(--ai-message-bg-clr);
    color: var(--ai-message-txt-clr);
    margin-bottom: 30px;
    margin-left: 50px;
    margin-top: max(9vh, 60px);
    padding: 50px 20px 20px;
    display: block;
    border-radius: 10px;
    max-width: 80%;
    min-width: 70%;
    justify-self: left;
    height: fit-content;
    line-height: 1.5;
    position: relative;
    font-weight: 400;
}

.chat-intro::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -45px;
    top: 5px;
    background-image: url('/assets/icons8-queen-crown-96.png');
    background-size: contain;
    border-radius: 50%;
    border: 3px solid var(--primary-clr);
}

.chat-intro p+p {
    margin-top: 15px;
}

.ai-message ul .user-message ul,
.chat-intro ul {
    padding: 20px 40px;
}

.ai-message ol,
.user-message ol,
.chat-intro ol {
    padding: 20px 40px;
}

.ai-message ol li+li,
.user-message ol li+li,
.chat-intro ol li+li {
    margin-top: 10px;
}

.ai-message ul li+li,
.user-message ul li+li {
    margin-top: 10px;
}

.ai-message-process {
    background-color: var(--ai-message-bg-clr);
    color: var(--ai-message-txt-clr);
    margin-bottom: 30px;
    margin-left: 50px;
    padding: 50px 20px 20px;
    display: block;
    border-radius: 10px;
    width: 80vw;
    justify-self: left;
    height: fit-content;
    line-height: 1.5;
    position: relative;
    font-weight: 400;
    word-wrap: break-word;
}

.ai-message-process::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -45px;
    top: 5px;
    background-image: var(--avatar);
    background-size: contain;
    border-radius: 50%;
    border: 3px solid var(--ai-message-bg-clr);
}

.ai-message-process::after {
    content: var(--ai-name);
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    position: absolute;
    left: 20px;
    top: 15px;
    font-weight: bold;
    font-size: 17px;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-intro::after {
    content: "System Message";
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    position: absolute;
    left: 20px;
    top: 15px;
    font-weight: bold;
    font-size: 17px;
}

.ai-message-process p+p {
    margin-top: 15px;
}

@keyframes changeColor {
    0% {
        background-color: var(--ai-process-msg-strobe-clr);
    }

    50% {
        background-color: var(--ai-message-bg-clr);
    }

    100% {
        background-color: var(--ai-process-msg-strobe-clr);
    }
}

.ai-message p+p,
.history-ai-message p+p {
    margin-top: 15px;
}

pre {
    font-size: 14px;
    line-height: 1.5;
    margin: 25px 10px;
    overflow-x: auto;
    background: var(--pre-code-bg-clr);
    padding-right: 15px;
    border-radius: 15px;
}

pre code {
    border-radius: 15px;
}

.hljs {
    background: var(--pre-code-bg-clr) !important;
}

.textarea-send {
    display: flex;
    position: relative;
    align-items: end;
}

.chat-input-section {
    align-self: end;
    padding: 20px 0 15px 0;
    background-color: var(--background-clr);
    max-width: 96vw;
    margin: 0 auto;
    width: 100%;
}

#inputbox {
    border: 2px solid var(--primary-clr);
    padding: 3vw;
    font-size: 16px;
    margin-inline: auto;
    max-height: 20vw;
    height: fit-content;
    min-height: 45px;
    background-color: var(--inputbox-clr);
    border-radius: 25px;
    flex: 75%;
    color: var(--txt-primary);
    overflow-y: scroll;
    word-wrap: break-word;
    margin-right: 2vw;
    display: block;
    line-height: 1;
    font-size: 15px;

}

.button-wrapper {
    display: flex;
    gap: 25px;
    justify-content: end;
    width: 90%;
    margin-inline: auto;
}



#SendMessage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    border: 2px solid var(--primary-clr);
    transition: all 0.4s;
}

#sendicon {
    width: 25px;
    height: auto;
}

#sendicon path {
    fill: var(--btn-icon-clr-when-primary);
}

#regenerate,
#clearchat {
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    border: 2px solid var(--primary-clr);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    justify-self: left;
    display: inline-block;
    transition: all 0.4s;
    width: 100%;

}

#clearchat {
    margin-bottom: 10px;
}

#SendMessage:hover {
    background-color: var(--btn-hover-clr);
    cursor: pointer;
    color: var(--btn-txt-clr-when-hover);
    border: 2px solid var(--btn-border-clr-when-hover);
}

#SendMessage:hover path {
    fill: var(--btn-icon-clr-when-hover);
}

#regenerate:hover,
#clearchat:hover {
    background-color: var(--btn-hover-clr);
    cursor: pointer;
    color: var(--txt-primary);
}

.chatConversation {
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    z-index: 50;
    overflow: hidden;
}

.chatConvoHeader {
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: var(--ai-message-bg-clr);
    color: var(--txt-primary);
    font-size: 18px;
    padding: 2vw 4vw 2vw 2vw;
    display: flex;
    height: max(8vh, 50px);
    align-items: center;
    justify-content: space-between;
    column-gap: 2vw;
    width: 100vw;
    box-shadow: 0 0 10px hsl(var(--primary-clr-in-hsl), 0.5);

}

.chatConvoBack {
    display: grid;
    padding-right: 3vw;
    width: fit-content;
    height: 100%;
    place-content: center;
    opacity: 0.3;
    flex: 0 0 auto;
}

.chatConvoBack svg {
    width: 18px;
    height: auto;
}

.chatConvoBack svg path {
    fill: var(--ai-message-txt-clr);
}

.chatConvoOptions {
    display: grid;
    place-content: center;
    flex: 0 0 auto;
}

.chatConvoOptions svg {
    width: 35px;
    height: auto;

}

.chatConvoOptions svg path {
    stroke: var(--ai-message-txt-clr);
}

.chatConvoName {
    flex: 1;
    color: var(--ai-message-txt-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


.chatConvoName h2 {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chatConvoIcon {
    /*Make this 40px width and align it to left center*/
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--txt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    /*add a 3px width border with the pirmary color*/
    border: 3px solid var(--primary-clr);
    overflow: hidden;
    flex: 0 0 auto;
}

.chatConvoIcon img {
    width: 40px;
    height: auto;

    /*make the img fit inside chatConvoIcon mainting aspect ratio as cover*/
    object-fit: cover;
}

.chatConvoOptionsMenu {
    display: none;
    position: absolute;
    padding: 0;
    margin-top: 1vw;
    background-color: var(--user-message-bg-clr);
    top: 0;
    right: 1vw;
    border-radius: 1vw;
    overflow: hidden;
}

.chatConvoOptionsMenuButton {
    display: block;
    padding: 4vw;
    width: 100%;
    min-width: 100px;
    text-align: left;
    font-size: 16px;
    background-color: var(--user-message-bg-clr);
    color: var(--user-message-txt-clr);
    border: none;
    box-shadow: none;
    transition: all 0.25s ease-in-out;
}


.chatConvoOptionsMenuButton:hover,
.chatConvoOptionsMenuButton:focus,
.chatConvoOptionsMenuButton:focus-within {
    background-color: var(--btn-hover-clr);
    color: var(--btn-txt-clr-when-hover);
    cursor: pointer;
}

/*Settings Container*/

.mainPageSettings {
    height: 100vh;
    height: 100dvh;
    flex: 1;
}

/* if there's overflow in mainpagesettings, make it scrollable up and down */

#settings-container {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow-y: scroll;
    padding: 6vw;
    overflow-x: hidden;
}

.settings-content-inner-wrapper {
    background-color: var(--background-clr);
    margin: 30px auto 15px;
    border-radius: 8px;
    width: 90vw;
}

.api-label,
.personality-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

#settings-container h2.api-label {
    margin-top: 2vw;
}

.api-input-container {
    display: grid;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
}

.api-input {
    margin: 2vw 0;
    border: 2px solid var(--primary-clr);
    background-color: var(--input-bg-clr);
    border-radius: 50px;
    padding: 10px;
    color: var(--txt-clr-when-input);
    font-size: 16px;
    display: block;
    width: 100%;
}

.api-btn,
.import-button {
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    border: 2px solid var(--primary-clr);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 10px 10vw;
    width: fit-content;
    margin: 0 auto;
}

.chatlorin-setting-descriptions {
    margin: 8vw 0;
}

.chatlorin-setting-descriptions p {
    font-size: 16px;
    color: var(--txt-primary);
    line-height: 1.6;
    margin-bottom: 3vw;
}

.chatlorin-setting-descriptions li {
    font-size: 16px;
    color: var(--txt-primary);
    line-height: 1.6;
    margin-bottom: 3vw;
}

.chatlorin-setting-descriptions ul,
.chatlorin-setting-descriptions ol {
    margin-left: 8vw;
}


#user-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 6vw;
    margin: 6vw auto;
    font-size: 16px;
}

#user-info label {
    margin: 3vw 10px 0;
    color: var(--txt-primary);
}

#user-info input {
    border: 2px solid var(--primary-clr);
    background-color: var(--input-bg-clr);
    border-radius: 50px;
    padding: 10px;
    margin: 10px;
    color: var(--txt-clr-when-input);
    font-size: 14px;

}

#user-info button {
    border: 2px solid var(--primary-clr);
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    border-radius: 8px;
    padding: 12px 80px;
    cursor: pointer;
    width: fit-content;
    margin: 20px auto;
    transition: all 0.25s ease-in;
    font-size: 16px;
}

#user-info button:hover,
#save-api-key:hover,
.import-button:hover {
    background-color: var(--btn-hover-clr);
    cursor: pointer;
    color: var(--btn-txt-clr-when-hover);
}

#user-info button,
#save-api-key,
.import-button {
    border-radius: 50px;
    min-width: 50vw;
}

.import-btn-wrapper {
    display: grid;
    justify-content: center;
}

.import-btn-wrapper p {
    text-align: center;
    color: var(--primary-dark-shade);
}

.import-button {
    margin: 10vw auto 0;
    padding: 10px 40px;
}

#settings-container h2 {
    margin-top: 10vw;
    opacity: 0.8;
    color: var(--txt-primary);
}

.ethereal-nightscape-chatlorintheme {
    --primary-clr: #00989F;
    --btn-hover-clr: #094144;
    --primary-dark-shade: #00ADB5;
    --primary-light-shade: #00ADB5;
    --user-message-bg-clr: #006F75;
    --ai-message-bg-clr: #434850;
    --user-message-txt-clr: #EEE;
    --ai-message-txt-clr: #EEE;
    --btn-icon-clr-when-primary: #eeeeee;
    --btn-icon-clr-when-hover: #094144;
    --btn-txt-clr-when-primary: #ffffff;
    --btn-txt-clr-when-hover: #fafafa;
    --btn-txt-clr-when-primary-dark: #fafafa;
    --btn-border-clr-when-primary: #00989F;
    --btn-border-clr-when-hover: #094144;
    --btn-border-clr-when-primary-dark: #00ADB5;
    --input-bg-clr: #EEEEEE;
    --txt-clr-when-input: #434343;
    --txt-primary: #EEEEEE;
    --background-clr: #222831;
    --background-dark-shade: #393E46;
    --low-op-border-clr: #00ADB5;
    --ai-process-msg-strobe-clr: #00686C;
    --primary-clr-in-hsl: 183, 100%, 35%;
    --pre-code-bg-clr: #292c31;
    --hover-options-bg: #eee;
    --hover-options-bg-hover: #e4fcff;
    --anchor-clr: #46E7EE;
    --inputbox-clr: #222831;

}

.sanas-serenity-chatlorintheme {
    --primary-clr: #BAD7DF;
    --btn-hover-clr: #FFE2E2;
    --primary-dark-shade: #5BB9A1;
    --primary-light-shade: #BAD7DF;
    --user-message-bg-clr: #F7C9C9;
    --ai-message-bg-clr: #CDE5EC;
    --user-message-txt-clr: #434343;
    --ai-message-txt-clr: #434343;
    --btn-icon-clr-when-primary: #444;
    --btn-icon-clr-when-hover: #444;
    --btn-txt-clr-when-primary: #222222;
    --btn-txt-clr-when-hover: #222222;
    --btn-txt-clr-when-primary-dark: #222222;
    --btn-border-clr-when-primary: #BAD7DF;
    --btn-border-clr-when-hover: #BAD7DF;
    --btn-border-clr-when-primary-dark: #5BB9A1;
    --input-bg-clr: #E7F3F7;
    --txt-clr-when-input: #434343;
    --txt-primary: #434343;
    --background-clr: #F6F6F6;
    --background-dark-shade: #eafaff;
    --low-op-border-clr: #879FA6;
    --ai-process-msg-strobe-clr: #FFE2E2;
    --primary-clr-in-hsl: 193, 37%, 80%;
    --pre-code-bg-clr: #363738;
    --hover-options-bg: #FFE2E2;
    --hover-options-bg-hover: #d8b5b5;
    --anchor-clr: #0b3744;
    --inputbox-clr: #E3F4F9;
}


.olive-grove-chatlorintheme {
    --primary-clr: #609966;
    --btn-hover-clr: #9DC08B;
    --primary-dark-shade: #40513B;
    --primary-light-shade: #f2f2ee;
    --user-message-bg-clr: #88A97F;
    --ai-message-bg-clr: #B9D9A9;
    --user-message-txt-clr: #1e1e1e;
    --ai-message-txt-clr: #212B1F;
    --btn-icon-clr-when-primary: #0b0b0b;
    --btn-icon-clr-when-hover: #0b0b0b;
    --btn-txt-clr-when-primary: #0b0b0b;
    --btn-txt-clr-when-hover: #0b0b0b;
    --btn-txt-clr-when-primary-dark: #eeeeee;
    --btn-border-clr-when-primary: #609966;
    --btn-border-clr-when-hover: #609966;
    --btn-border-clr-when-primary-dark: #40513B;
    --input-bg-clr: #EDF1D6;
    --txt-clr-when-input: #273124;
    --txt-primary: #273124;
    --background-clr: #EDF1D6;
    --background-dark-shade: #d9ddc0;
    --low-op-border-clr: #609966;
    --ai-process-msg-strobe-clr: #609966;
    --primary-clr-in-hsl: 126, 23%, 49%;
    --pre-code-bg-clr: #273124;
    --hover-options-bg: #bddaae;
    --hover-options-bg-hover: #9DC08B;
    --anchor-clr: #1a2417;
    --inputbox-clr: #EDF1D6;
}

.wilderness-trail-chatlorintheme {
    --primary-clr: #8E6C51;
    --btn-hover-clr: #ca9160;
    --primary-dark-shade: #f0b585;
    --primary-light-shade: #c4a184;
    --user-message-bg-clr: #9C7758;
    --ai-message-bg-clr: #3F4E4F;
    --user-message-txt-clr: #fbfbfb;
    --ai-message-txt-clr: #fcfcfc;
    --btn-icon-clr-when-primary: #FCFCFC;
    --btn-icon-clr-when-hover: #FCFCFC;
    --btn-txt-clr-when-primary: #FCFCFC;
    --btn-txt-clr-when-hover: #FCFCFC;
    --btn-txt-clr-when-primary-dark: #202020;
    --btn-border-clr-when-primary: #A27B5C;
    --btn-border-clr-when-hover: #ca9160;
    --btn-border-clr-when-primary-dark: #f0b585;
    --input-bg-clr: #DFDFDF;
    --txt-clr-when-input: #273124;
    --txt-primary: #FCFCFC;
    --background-clr: #2C3639;
    --background-dark-shade: #3F4E4F;
    --low-op-border-clr: #A27B5C;
    --ai-process-msg-strobe-clr: #A27B5C;
    --primary-clr-in-hsl: 27, 28%, 50%;
    --pre-code-bg-clr: #1a2018;
    --hover-options-bg: #3F4E4F;
    --hover-options-bg-hover: #283131;
    --anchor-clr: #d6bba6;
    --inputbox-clr: #2C3639;
}

.raspberry-sorbet-chatlorintheme {
    --primary-clr: #88304E;
    --btn-hover-clr: #612350;
    --primary-dark-shade: #E23E57;
    --primary-light-shade: #9b2637;
    --user-message-bg-clr: #ac3244;
    --ai-message-bg-clr: #522546;
    --user-message-txt-clr: #fdecf8;
    --ai-message-txt-clr: #fdecf8;
    --btn-icon-clr-when-primary: #FCFCFC;
    --btn-icon-clr-when-hover: #FCFCFC;
    --btn-txt-clr-when-primary: #FCFCFC;
    --btn-txt-clr-when-hover: #FCFCFC;
    --btn-txt-clr-when-primary-dark: #ffffff;
    --btn-border-clr-when-primary: #88304E;
    --btn-border-clr-when-hover: #612350;
    --btn-border-clr-when-primary-dark: #E23E57;
    --input-bg-clr: #46203c;
    --txt-clr-when-input: #fcfcfc;
    --txt-primary: #FCFCFC;
    --background-clr: #311D3F;
    --background-dark-shade: #3f2552;
    --low-op-border-clr: #751e2b;
    --ai-process-msg-strobe-clr: #9b2637;
    --primary-clr-in-hsl: 340, 48%, 36%;
    --pre-code-bg-clr: #31172a;
    --hover-options-bg: #572c4b;
    --hover-options-bg-hover: #270e20;
    --anchor-clr: #E23E57;
    --inputbox-clr: #522546;
}

.lavender-love-chatlorintheme {
    --primary-clr: #8675A9;
    --btn-hover-clr: #EFBBCF;
    --primary-dark-shade: #8675A9;
    --primary-light-shade: #f2f2ee;
    --user-message-bg-clr: #C3AED6;
    --ai-message-bg-clr: #EFBBCF;
    --user-message-txt-clr: #1e1e1e;
    --ai-message-txt-clr: #212B1F;
    --btn-icon-clr-when-primary: #f8f8f8;
    --btn-icon-clr-when-hover: #0b0b0b;
    --btn-txt-clr-when-primary: #f8f8f8;
    --btn-txt-clr-when-hover: #0b0b0b;
    --btn-txt-clr-when-primary-dark: #eeeeee;
    --btn-border-clr-when-primary: #8675A9;
    --btn-border-clr-when-hover: #8675A9;
    --btn-border-clr-when-primary-dark: #8675A9;
    --input-bg-clr: #EFBBCF;
    --txt-clr-when-input: #273124;
    --txt-primary: #273124;
    --background-clr: #FFD5CD;
    --background-dark-shade: #f1cbc3;
    --low-op-border-clr: #C3AED6;
    --ai-process-msg-strobe-clr: #8675A9;
    --primary-clr-in-hsl: 260, 23%, 56%;
    --pre-code-bg-clr: #273124;
    --hover-options-bg: #EFBBCF;
    --hover-options-bg-hover: #C3AED6;
    --anchor-clr: #362852;
    --inputbox-clr: #EFBBCF;
}

#theme-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 6vw 0;
}

.theme-card {
    position: relative;
    margin-bottom: 20px;
    display: block;
    overflow: hidden;
    width: 35vw;
    height: 50vw;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.1s ease-in;
    margin: 15px;
}

.theme-card label {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--ai-message-txt-clr);
    background-color: var(--ai-message-bg-clr);
    transition: background-color 0.25s ease-in-out;
}

.color-palette {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.color-panel {
    width: 25%;
    height: 240px;
    background-color: #ccc;
}

.mainPageColumns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--ai-message-bg-clr);
}

.mainPageColumns button {
    display: inline-block;
    width: fit-content;
    padding: 3vw 5vw;
    font-size: 16px;
    background: var(--ai-message-bg-clr);
    color: var(--txt-primary);
    box-shadow: none;
    border: 2px solid var(--ai-message-bg-clr);
    transition: all 0.15s ease-in;
    flex: 1;
}

.mainPageColumns button:hover {
    cursor: pointer;
}

.mainPageColumns button.categories-active {
    border: 2px solid var(--primary-clr);
    background: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
}

.mainPageHeader {
    background-color: var(--ai-message-bg-clr);
    padding: 4vw 4vw 2vw;
}

.mainPageHeader h1 {
    color: var(--primary-dark-shade);
    font-size: 6vw;
}

#personality-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 5vw;
}

.mainPageChatsInnerWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 5vw;
}

.vault-card {
    padding: 3vw;
    background-color: var(--background-clr);
    color: var(--txt-primary);
    transition: all 0.25s ease-in-out;
}

.vault-card:hover {
    background-color: var(--btn-hover-clr);
    color: var(--btn-txt-clr-when-hover);
}

.vault-card-header-wrapper {
    display: grid;
    grid-template-columns: min(15vw, 55px) 1fr;
    column-gap: 2vw;
}

.vault-card-img {
    width: min(14vw, 50px);
    height: min(14vw, 50px);
    overflow: hidden;
    grid-row: 1/3;
    border-radius: 50%;
    border: 3px solid var(--primary-clr);
    align-self: center;
}

.vault-card img {
    width: 100%;
    height: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    object-fit: cover;
    /*Disable users being able to drag or select the img*/
}

.vault-card-name {
    font-size: 18px;
    color: var(--txt-primary);
    font-weight: 500;
    grid-row: 1/2;
    line-height: 1.15;
}

.vault-card-author {
    grid-row: 2/3;
    font-size: 14px;
    opacity: 0.8;
    color: var(--txt-primary);
}

.slider-container {
    height: 100%;
    width: fit-content;
    display: inline-flex;
    overflow: hidden;
    transform: translateX(0);
    transition: transform 0.25s ease-out;
}

/* MainPage chats */

.mpChat {
    display: grid;
    grid-template-columns: min(50px, 14vw) 55% 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 2vw;
    padding: 3vw;
    background-color: var(--background-clr);
    color: var(--txt-primary);
    transition: all 0.25s ease-in-out;
}

.mpChat:hover {
    background-color: var(--btn-hover-clr);
    color: var(--btn-txt-clr-when-hover);
}

.mpChat img {
    width: min(50px, 14vw);
    height: auto;
    border-radius: 50%;
    border: 3px solid var(--primary-clr);
    grid-column: 1/2;
    grid-row: 1/3;
    align-self: center;
    pointer-events: none;
}

.mpChatName {
    font-size: 18px;
    font-weight: 500;
    grid-column: 2/3;
    grid-row: 1/2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpChatLastMessage {
    font-size: 14px;
    font-weight: 300;
    grid-column: 2/4;
    grid-row: 2/3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpChatTime {
    font-size: 14px;
    font-weight: 400;
    grid-column: 3/4;
    grid-row: 1/2;
    text-align: right;
    opacity: 0.8;
}

.hidden {
    display: none;
}

.ChatConvoFlex {
    display: flex;
}

.typing-indicator span {
    height: 10px;
    width: 10px;
    float: left;
    margin: 10px 1px 0;
    background-color: var(--ai-message-txt-clr);
    display: block;
    border-radius: 50%;
    opacity: 0.4;
}

.typing-indicator span:nth-child(1) {
    animation: 1s blink infinite 0.3333s;
}

.typing-indicator span:nth-child(2) {
    animation: 1s blink infinite 0.6666s;
}

.typing-indicator span:nth-child(3) {
    animation: 1s blink infinite 0.9999s;
}

/* Animations */
@keyframes blink {
    50% {
        opacity: 1;
    }
}

.kyoto-button-container {
    width: 90vw;
    display: flex;
    justify-content: space-between;
}

.kyoto-button-container button {
    padding: 10px 15px;
    margin: 10px;
    border-radius: 50px;
    box-shadow: none;
    border: 2px solid var(--btn-border-clr-when-primary);
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    transition: all 0.25s ease;
}

.kyoto-currentmemory {
    background-color: var(--btn-hover-clr) !important;
    color: var(--btn-txt-clr-when-hover) !important;
    border: 2px solid var(--btn-border-clr-when-hover) !important;
}


.openAiTextTokens {
    font-size: 16px;
    display: grid;
    grid-template-columns: 4fr 1fr;
    width: 85vw;
    margin: 10vw auto;
    column-gap: 10vw;
    color: var(--txt-primary);
}

.install {
    display: flex;
    justify-content: space-between;
    align-items: center;
    row-gap: 3vw;
    color: var(--txt-primary);
    width: 100vw;
    background-color: var(--background-dark-shade);
    padding: 3vw 8vw;
    margin: 0;
    position: absolute;
    top: -6vw;
    left: -6vw;
    z-index: 5;
}

.install p {
    font-size: 17px;
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
}

.install button {
    background-color: var(--primary-clr);
    color: var(--btn-txt-clr-when-primary);
    border: 2px solid var(--primary-clr);
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 5px 5vw;
    width: fit-content;
    margin: 0;
}

.install-wrapper {
    position: relative;
    width: 100vw;
    height: 6vw;
    display: none;
}