sillytavern 1.4.1

package/public/style.css

@@ -0,0 +1,3633 @@
+@charset "UTF-8";
+
+:root {
+    --doc-height: 100%;
+    --transparent: rgba(0, 0, 0, 0);
+
+    --black30a: rgba(0, 0, 0, 0.3);
+    --black50a: rgba(0, 0, 0, 0.5);
+    --black60a: rgba(0, 0, 0, 0.6);
+    --black70a: rgba(0, 0, 0, 0.7);
+    --black90a: rgba(0, 0, 0, 0.9);
+    --black100: rgba(0, 0, 0, 1);
+
+    --white30a: rgba(255, 255, 255, 0.3);
+    --white50a: rgba(255, 255, 255, 0.5);
+    --white60a: rgba(255, 255, 255, 0.6);
+    --white70a: rgba(255, 255, 255, 0.7);
+    --white100: rgba(255, 255, 255, 1);
+
+    --grey10: rgb(25, 25, 25);
+    --grey30: rgb(75, 75, 75);
+    --grey50: rgb(125, 125, 125);
+    --grey70: rgb(175, 175, 175);
+    --grey75: rgb(190, 190, 190);
+
+    --grey30a: rgba(50, 50, 50, 0.3);
+    --grey7070a: rgba(175, 175, 175, 0.7);
+
+    --fullred: rgba(255, 0, 0, 1);
+    --crimson70a: rgba(100, 0, 0, 0.7);
+    --okGreen70a: rgba(0, 100, 0, 0.7);
+    --cobalt30a: rgba(100, 100, 255, 0.3);
+    --sienna: rgb(210, 100, 40);
+    --orangered: rgb(255, 90, 0);
+    --greyCAIbg: rgb(36, 36, 37);
+    --ivory: rgb(220, 220, 210);
+
+
+    /*Default Theme, will be changed by ToolCool Color Picker*/
+    --SmartThemeBodyColor: rgb(220, 220, 210);
+    --SmartThemeEmColor: rgb(175, 175, 175);
+    --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
+    --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
+    --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
+
+    --sheldWidth: 800px;
+    /*base variable calculated in rems*/
+    --fontScale: 1;
+    --mainFontSize: calc(var(--fontScale) * 1rem);
+
+    /* base variable for blur strength slider calculations */
+    --blurStrength: 10;
+    color-scheme: only light;
+
+
+    /*styles for the color picker*/
+    --tool-cool-color-picker-btn-bg: transparent;
+    --tool-cool-color-picker-btn-border-color: transparent;
+}
+
+* {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-shadow: 0px 0px 3px black;
+}
+
+html {
+    /*fix for chrome flickering on blurred divs*/
+    -webkit-transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective: 1000;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    /*fallback for JS load*/
+    height: 100svh;
+    /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
+    height: var(--doc-height);
+    background-color: var(--greyCAIbg);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-size: var(--mainFontSize);
+    color: var(--SmartThemeBodyColor);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    scrollbar-gutter: stable;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--grey7070a);
+    border: 2px solid transparent;
+    box-shadow: inset 0 0 0 1px var(--black50a);
+    border-radius: 10px;
+    background-clip: content-box;
+}
+
+.fa-solid::before,
+.fa-regular::before {
+    vertical-align: middle;
+    text-align: center;
+}
+
+.mes_text p {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.mes_text li tt {
+    min-width: 80px;
+    display: inline-block;
+    text-align: right;
+}
+
+.mes_text br {
+    content: ' ';
+}
+
+.mes_bias {
+    display: block;
+    font-size: calc(var(--mainFontSize) - 0.1rem);
+    font-weight: 500;
+    color: darkgoldenrod;
+}
+
+.mes_text i,
+.mes_text em {
+    color: var(--SmartThemeEmColor);
+    font-weight: 500;
+}
+
+.mes_text strong,
+.mes_text h2,
+.mes_text h1 {
+    font-weight: bold;
+}
+
+code {
+    padding: 5px;
+    font-family: Consolas, monospace;
+    color: var(--white50a);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border: 1px solid var(--white30a);
+    border-radius: 5px;
+    background-color: var(--black70a);
+    display: inline-block;
+    max-width: 80%;
+    line-height: var(--mainFontSize);
+}
+
+#bg1,
+#bg_custom {
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: background-image 0.5s ease-in-out;
+}
+
+#bg1 {
+    background-image: url(backgrounds/tavern1.jpg);
+    z-index: -2;
+}
+
+#bg_custom {
+    background-image: none;
+    z-index: -1;
+}
+
+/*TOPPER margin*/
+
+#top-bar {
+    width: var(--sheldWidth);
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    display: inline-block;
+    height: 40px;
+    position: fixed;
+    border-bottom: 1px solid var(--grey30a);
+    box-shadow: 0 2px 20px 0 var(--black70a);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--SmartThemeBlurTintColor);
+    /* border-radius: 0 0 20px 20px; */
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    z-index: 3000;
+}
+
+#sheld {
+    display: grid;
+    grid-template-rows: auto min-content;
+    height: calc(100svh - 42px);
+    overflow-x: hidden;
+    max-width: 800px;
+    position: absolute;
+    left: calc((100svw - var(--sheldWidth))/2);
+    top: 41px;
+    /* margin: 0 auto; */
+    z-index: 2;
+    /* resize: both; */
+    min-height: 100px;
+    min-width: 100px;
+    width: var(--sheldWidth);
+}
+
+.drag-grabber {
+    position: absolute;
+    width: 20px !important;
+    height: 20px !important;
+    color: var(--SmartThemeBodyColor);
+    z-index: 2000;
+    text-align: center;
+    border-radius: 5px;
+    vertical-align: middle;
+    right: 5px;
+    top: 5px;
+    opacity: 0.5;
+    cursor: grab;
+    border: 1px solid var(--white30a);
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    display: none;
+}
+
+#sheldheader:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
+.pull-tab {
+    height: 10px;
+    width: 10px;
+    background-color: var(--SmartThemeEmColor);
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    pointer-events: none;
+    z-index: 2001;
+}
+
+#chat {
+    /* margin-top: 5px; */
+    max-height: calc(100vh - 42px);
+
+    overflow-x: hidden;
+    padding-bottom: 0;
+    overflow-y: scroll;
+    display: flex;
+    bottom: 10px;
+    border-bottom: 1px solid var(--grey30a);
+    border-left: 1px solid var(--grey30a);
+    border-right: 1px solid var(--grey30a);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--SmartThemeBlurTintColor);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    text-shadow: #000 0 0 3px;
+    scrollbar-width: thin;
+    /* transition: all 1s ease-in-out; */
+    flex-direction: column;
+    z-index: 3;
+}
+
+#form_sheld {
+    white-space: nowrap;
+    width: 100%;
+    margin: 1px auto 0 auto;
+    z-index: 3;
+}
+
+#send_form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0 auto 0 auto;
+    border: 1px solid var(--grey30a);
+
+    border-radius: 0 0 20px 20px;
+    background-color: var(--SmartThemeBlurTintColor);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+}
+
+#send_form.no-connection {
+    background-color: rgba(100, 0, 0, 0.5) !important;
+}
+
+#send_but_sheld {
+    padding: 0;
+    border: 0;
+    height: 40px;
+    position: relative;
+    background-position: center;
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    font-size: 30px;
+    overflow: hidden;
+}
+
+#send_but {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    display: none;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    order: 99999;
+    align-items: center;
+    justify-content: center;
+}
+
+
+#loading_mes {
+    display: none;
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+    order: 99999;
+    align-items: center;
+    justify-content: center;
+    filter: brightness(0.7);
+}
+
+#options_button {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    outline: none;
+    border: none;
+    position: relative;
+    opacity: 0.7;
+    cursor: pointer;
+    z-index: 2001;
+    padding-left: 10px;
+    padding-top: 0;
+    transition: 0.3s;
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+}
+
+.font-family-reset {
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-size: var(--mainFontSize);
+    font-weight: 400;
+}
+
+#options_button:hover,
+#send_but:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#options {
+    opacity: 0.0;
+    display: none;
+    z-index: 1990;
+
+}
+
+.options-content {
+    overflow: hidden;
+    display: block;
+    background-color: var(--SmartThemeBlurTintColor);
+    border: 1px solid var(--white30a);
+    border-radius: 15px;
+    box-shadow: 0 0 5px black;
+    text-shadow: 0 0 3px black;
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
+    /* min-width: 200px; */
+    z-index: 2000;
+    margin-bottom: 3px;
+}
+
+.options-content hr {
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid var(--white30a);
+}
+
+#right-nav-panel hr,
+#personality_div hr,
+#top-settings-holder hr {
+    background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
+    min-height: 1px;
+}
+
+.options-content a {
+    color: var(--SmartThemeBodyColor);
+    padding: 12px 16px;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+    cursor: pointer;
+}
+
+.options-content a div:first-child {
+    min-width: 20px;
+}
+
+.options-content img {
+    width: calc(var(--mainFontSize) + .5rem);
+    margin-right: 5px;
+    height: calc(var(--mainFontSize) + .25rem);
+    vertical-align: middle;
+}
+
+.options-content span {
+    vertical-align: middle;
+}
+
+.options-content a:hover {
+    background-color: var(--SmartThemeEmColor);
+}
+
+
+#message_template {
+    display: none !important;
+}
+
+.auto_hide {
+    content-visibility: auto;
+}
+
+.mes {
+    display: grid;
+    grid-template-columns: min-content min-content auto min-content;
+    padding: 20px 10px 0 10px;
+    margin-top: 0;
+    width: 100%;
+    color: var(--SmartThemeBodyColor);
+}
+
+.last_mes {
+    grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] 50px [name-mestext] auto [edit-rightswipe] 30px !important;
+    grid-template-rows: [avatar-NameMesText-edit] 50px [swipes] auto;
+    grid-row-gap: 20px;
+    margin-bottom: 0 !important;
+    /*only affects bubblechat to make it sit nicely at the bottom*/
+
+}
+
+/* SWIPE RELATED STYLES*/
+
+.swipe_right,
+.swipe_left {
+    height: 40px;
+    width: 40px;
+    opacity: 0.3;
+    right: 5px;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    grid-row-start: 2;
+    grid-column-start: 4;
+    flex-flow: column;
+    font-size: 30px;
+}
+
+.swipe_right img,
+.swipe_left img {
+    height: 30px;
+    width: 30px;
+}
+
+.swipes-counter {
+    color: white;
+    font-size: 12px;
+    padding: 0;
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-weight: 400;
+
+}
+
+.swipe_left {
+    left: 15px;
+    right: auto;
+    grid-column-start: 2;
+    align-items: flex-end;
+    padding-bottom: 17px;
+}
+
+.ui-settings {
+    display: flex;
+    flex-direction: column;
+    /* align-items: flex-end; */
+    gap: 10px;
+}
+
+/* .ui-settings>div {
+         flex: 1; 
+}
+ */
+#avatars-style .range-block-range,
+#chat-display .range-block-range,
+#sheld-width .range-block-range {
+    display: flex;
+    flex-direction: column;
+}
+
+.avatar {
+    width: 50px;
+    height: 50px;
+    border-style: none;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    border-radius: 50%;
+    border: 1px solid var(--black30a);
+    box-shadow: 0 0 5px var(--black50a);
+}
+
+body.big-avatars .avatar {
+    width: 60px;
+    height: 90px;
+    border-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: visible;
+    border-radius: 10px;
+    box-shadow: 0 0 5px var(--black50a);
+}
+
+body.big-avatars #user_avatar_block .avatar,
+body.big-avatars #user_avatar_block .avatar_upload {
+    height: 90px;
+    width: 60px;
+    border-radius: 10px;
+}
+
+body.big-avatars #user_avatar_block .avatar img {
+    height: 90px;
+    width: 60px;
+}
+
+body.big-avatars .last_mes {
+    grid-template-rows: [avatar-NameMesText-edit] 80px [swipes] auto;
+    grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] fit-content(60px) [name-mestext] auto [edit-rightswipe] 30px !important;
+}
+
+body.big-avatars .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border: 1px solid var(--black30a);
+    border-radius: 10px;
+}
+
+.mes_block {
+    padding-top: 0;
+    padding-left: 10px;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    grid-column-start: 3;
+}
+
+.ch_name {
+    font-weight: bolder;
+}
+
+.mes_text {
+    font-weight: 500;
+    line-height: calc(var(--mainFontSize) + .5rem);
+    padding-left: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    /*max-width: 720px;*/
+    word-wrap: break-word;
+    /* animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; */
+}
+
+/* .mes_text::after {
+    content: "▋";
+    animation: blink 1s steps(1) infinite;
+    opacity: 0.7;
+    display: none;
+}
+
+@keyframes blink {
+    60% {
+        visibility: hidden;
+    }
+} */
+
+br {
+    display: block;
+    margin: 3px 0;
+}
+
+textarea {
+    width: 100%;
+    resize: vertical;
+    display: block;
+    background-color: var(--black30a);
+    outline: none;
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    color: var(--white70a);
+    font-size: var(--mainFontSize);
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    padding: 5px 10px;
+    scrollbar-width: thin;
+}
+
+input,
+select {
+    font-size: var(--mainFontSize);
+}
+
+#send_textarea {
+    /*     font-size: 1rem;
+    line-height: 1.5rem;*/
+    min-height: 40px;
+    max-height: 50svh;
+    word-wrap: break-word;
+    height: 40px;
+    resize: vertical;
+    display: block;
+    background-color: rgba(255, 0, 0, 0);
+    border: 0;
+    box-shadow: none;
+    padding: 6px;
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    margin: 0;
+    text-shadow: #000 0 0 3px;
+    flex: 1;
+}
+
+#send_textarea::placeholder,
+.text_pole::placeholder {
+    color: var(--white70a)
+}
+
+#rm_ch_create_block textarea {
+    min-height: 200px;
+}
+
+.margin-bot-10px {
+    margin-bottom: 10px;
+}
+
+#description_textarea {
+    height: -webkit-fill-available;
+    width: -moz-available;
+}
+
+#character_name_pole {
+    margin-bottom: 0;
+}
+
+#character_cross,
+#world_cross,
+#select_chat_cross {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+    font-size: 24px;
+}
+
+#firstmessage_textarea {
+    height: -webkit-fill-available;
+    width: -moz-available;
+}
+
+.text_pole {
+    background-color: var(--black30a);
+    color: var(--white70a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+
+    padding: 7px;
+    width: 100%;
+    margin: 5px 0;
+}
+
+h3 {
+    margin: 10px 0;
+}
+
+#top-bar h3 {
+    margin: 0;
+    padding: 10px 0;
+}
+
+#top-bar h4 {
+    margin: 0;
+    padding: 5px 0;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+#right-nav-panel-tabs {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+    width: 100%;
+    max-height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+}
+
+#right-nav-panel-tabs .right_menu_button:last-of-type {
+    padding-right: 0;
+}
+
+/* ##################################################################### */
+/*                      Right Panel's Upper Tabs                         */
+/* ##################################################################### */
+
+.right_menu_button {
+    display: block;
+    cursor: pointer;
+    text-align: center;
+    padding-right: 20px;
+    margin-top: 0;
+    filter: grayscale(1) brightness(75%);
+    -webkit-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+}
+
+.right_menu_button:hover {
+    filter: brightness(150%) grayscale(1);
+}
+
+#rm_button_characters,
+#rm_button_panel_pin_div,
+#lm_button_panel_pin_div {
+    font-size: 24px;
+    display: inline;
+}
+
+#rm_button_panel_pin_div,
+#lm_button_panel_pin_div {
+    opacity: 0.5;
+    transition: 0.3s;
+}
+
+#rm_button_panel_pin_div:hover,
+#lm_button_panel_pin_div:hover {
+    opacity: 1;
+}
+
+#lm_button_panel_pin_div {
+    text-align: start;
+}
+
+#rm_button_panel_pin,
+#lm_button_panel_pin {
+    display: none;
+}
+
+#rm_button_panel_pin:checked+label,
+#lm_button_panel_pin:checked+label {
+    display: inline;
+}
+
+#rm_button_panel_pin:checked+label .checked,
+#lm_button_panel_pin:checked+label .checked {
+    display: inline;
+}
+
+#rm_button_panel_pin:checked+label .unchecked,
+#lm_button_panel_pin:checked+label .unchecked {
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked)+label .checked,
+#lm_button_panel_pin:not(:checked)+label .checked {
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked)+label .unchecked,
+#lm_button_panel_pin:not(:checked)+label .unchecked {
+    display: inline;
+}
+
+#rm_button_selected_ch {
+    flex: 1;
+    overflow: hidden;
+    opacity: 0.5;
+}
+
+#rm_button_selected_ch:hover {
+    opacity: 1;
+}
+
+#rm_button_selected_ch h2 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.selected-right-tab {
+    filter: brightness(150%);
+}
+
+/* ####################################################################### */
+
+#characloud_url {
+    opacity: 0.3;
+}
+
+#characloud_url img {
+    width: 25px;
+}
+
+#rm_print_characters_block {
+    padding: 5px 0;
+    overflow-y: auto;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#rm_ch_create_block {
+    display: none;
+    overflow-y: auto;
+    padding: 0 5px;
+}
+
+#rm_extensions_block {
+    display: none;
+    overflow-y: auto;
+}
+
+/* ################################################################*/
+/*   CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
+/*#################################################################*/
+
+select {
+    color: var(--white70a);
+    padding: 7px;
+    background-color: var(--black30a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    margin-bottom: 10px;
+    height: min-content;
+}
+
+select option {
+    /* works to highlight selected/active option */
+    background-color: var(--white50a);
+    color: var(--black70a);
+
+}
+
+select option:not(:checked) {
+    /* works to color unselected items */
+    background-color: var(--black70a);
+    color: var(--white70a);
+}
+
+/*#######################################################################*/
+
+#rm_api_block {
+    display: none;
+    overflow-y: auto;
+}
+
+.API-logo {
+    margin: 0 auto;
+    width: min-content;
+    opacity: 0.5;
+}
+
+.oobabooga_logo {
+    margin: 5px auto;
+    text-align: center;
+}
+
+.menu_button.disabled {
+    filter: brightness(50%);
+    cursor: not-allowed;
+}
+
+
+#api_url_text,
+#textgenerationwebui_api_url_text {
+    /*margin-right: 4px;*/
+    display: block;
+}
+
+#textgenerationwebui_api pre {
+    display: inline;
+}
+
+#api_button:hover,
+#api_button_novel:hover,
+#api_button_textgenerationwebui:hover,
+#poe_connect:hover {
+    background-color: green;
+}
+
+.api-load-icon {
+    font-size: 24px;
+    display: none;
+}
+
+#rm_characters_block {
+    display: flex;
+    overflow-y: auto;
+    flex-direction: column;
+    /* visibility: hidden; */
+}
+
+#rm_characters_block .right_menu_button {
+    padding-right: 15px;
+}
+
+#rm_characters_topbar {
+    display: flex;
+    flex-direction: column;
+}
+
+#rm_characters_topbar_buttons {
+    margin-top: 0;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+}
+
+#rm_characters_topbar_expander {
+    flex-grow: 1;
+}
+
+#form_character_search_form {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 10px 5px;
+    column-gap: 10px;
+}
+
+#character_sort_order {
+    margin: 0;
+    flex: 1;
+}
+
+#character_search_bar {
+    flex: 1;
+    padding-left: 0.75em;
+    margin: 0;
+}
+
+input[type=search]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    border-radius: 50em;
+    background: url('/img/times-circle.svg') no-repeat 50% 50%;
+    background-size: contain;
+    opacity: 0;
+    pointer-events: none;
+    cursor: pointer;
+}
+
+input[type=search]:focus::-webkit-search-cancel-button {
+    opacity: .3;
+    pointer-events: all;
+}
+
+.character_select {
+    padding: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: 67px auto;
+}
+
+.character_select .ch_name {
+    margin-left: 10px;
+    margin-top: 5px;
+    /* transform: translateY(25%); */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-self: center;
+}
+
+.character_select:hover {
+    background-color: var(--white30a);
+}
+
+#avatar_url_div {
+    display: none;
+}
+
+#selected_chat_div {
+    display: none;
+}
+
+#create_date_div {
+    display: none;
+}
+
+#last_mes_div {
+    display: none;
+}
+
+/*LEFT SIDE BG MENU*/
+
+#logo_block {
+    z-index: 3001;
+}
+
+#bg_menu {
+    cursor: pointer;
+    position: fixed;
+    z-index: 3001;
+}
+
+#bg_menu_content {
+    margin-top: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    width: calc(var(--sheldWidth) - 10px);
+    max-width: 100svw;
+    justify-content: space-evenly;
+}
+
+.bg_example {
+    width: 23%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 20px;
+    border: 1px solid var(--black50a);
+    box-shadow: 0 0 7px var(--black50a);
+    margin: 5px;
+    cursor: pointer;
+    aspect-ratio: 16/9;
+}
+
+.bg_example_cross {
+    width: 15px;
+    height: 15px;
+    position: relative;
+    float: right;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+    opacity: 0.7;
+    border-radius: 50%;
+    font-size: 20px;
+    color: var(--black70a);
+    text-shadow: none;
+    padding: 0;
+    margin: 0;
+    filter: drop-shadow(0px 0px 3px white);
+}
+
+.no-border {
+    border: none !important;
+}
+
+.no-shadow {
+    box-shadow: none !important;
+}
+
+.add_bg_but {
+    cursor: pointer;
+    opacity: 0.1;
+    height: 100%;
+    width: 100%;
+}
+
+.input-file {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+
+#form_create {
+    display: grid;
+    height: 100%;
+    overflow-y: auto;
+    grid-template-rows:
+        [avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto [hidden] min-content;
+}
+
+.avatar_div {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    margin-top: 16px;
+    margin-bottom: 10px;
+    align-items: center;
+}
+
+#user-settings-block h4,
+#user-settings-block h3 {
+    margin: 10px 0;
+}
+
+#avatar-and-name-block {
+    justify-content: space-between;
+    display: flex;
+    flex: 0 0 100%;
+    flex-wrap: wrap;
+    margin-bottom: 4px;
+}
+
+#description_div {
+    position: relative;
+}
+
+#name_div {
+    width: 100%;
+}
+
+#create_button {
+    display: none;
+}
+
+.avatar_div .avatar {
+    margin-left: 4px;
+    margin-right: 10px;
+    height: 70px;
+    width: 70px;
+    display: inline-block;
+}
+
+#first_message_div {
+    position: relative;
+}
+
+
+#rm_characters_block .form_create_bottom_buttons_block {
+    justify-content: space-evenly !important;
+    flex-grow: 0;
+}
+
+.form_create_bottom_buttons_block {
+    display: flex;
+    flex: 1;
+    grid-template-columns: repeat(3, min-content);
+    grid-gap: 10px;
+    align-items: center;
+    justify-content: end;
+    flex-wrap: wrap;
+}
+
+.form_create_bottom_buttons_block .menu_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#rm_info_block {
+    display: none;
+    width: 100%;
+    height: 80%;
+    justify-content: center;
+    flex-direction: column;
+
+}
+
+#rm_info_panel {
+    font-size: calc(var(--mainFontSize) + .5rem);
+    display: block;
+    text-align: center;
+}
+
+#rm_info_button {
+    width: min-content;
+    margin: 0 auto;
+}
+
+#rm_info_avatar {
+    display: flex;
+    column-gap: 10px;
+    width: fit-content;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#delete_button {
+    background-color: var(--crimson70a);
+}
+
+#delete_button:hover {
+    background-color: var(--fullred);
+}
+
+#result_info {
+    font-size: calc(var(--mainFontSize) - 0.2rem);
+    font-weight: bold;
+}
+
+/* Focus */
+#colab_popup {
+
+    width: 300px;
+    height: 150px;
+    position: absolute;
+    z-index: 2060;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    margin-top: 36svh;
+    box-shadow: 0 0 2px var(--black50a);
+    padding: 4px;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--black70a);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    border-radius: 10px;
+}
+
+#dialogue_popup {
+
+    width: 300px;
+    position: absolute;
+    z-index: 9999;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    box-shadow: 0 0 5px 5px var(--fullred);
+    padding: 4px;
+    background-color: var(--black70a);
+    border-radius: 10px;
+}
+
+#dialogue_popup_ok {
+    display: inline-block;
+    margin-right: 20px;
+    background-color: var(--crimson70a);
+    cursor: pointer;
+}
+
+#dialogue_popup_input {
+    width: 100%;
+}
+
+#dialogue_popup_cancel {
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+}
+
+#dialogue_del_mes {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4px;
+    text-align: center;
+    padding: 0;
+    height: min-content;
+}
+
+#dialogue_del_mes_ok {
+    /*changes background of OK button in the deletion menu*/
+    display: inline-block;
+    background-color: var(--crimson70a);
+    cursor: pointer;
+}
+
+#dialogue_del_mes_cancel {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.menu_button {
+    /* font-weight: bold; */
+    color: var(--white70);
+    background-color: var(--black50a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    padding: 10px;
+    width: min-content;
+    cursor: pointer;
+    margin: 5px 0;
+    transition: 0.3s;
+}
+
+.avatar_div .menu_button,
+.form_create_bottom_buttons_block .menu_button,
+#select_chat_popup .menu_button {
+    font-weight: bold;
+    padding: 5px;
+    margin: 0;
+    height: 40px;
+    filter: grayscale(0.5);
+    text-align: center;
+    font-size: 24px;
+    aspect-ratio: 1 / 1;
+}
+
+.menu_button:hover {
+    background-color: var(--white30a);
+}
+
+
+
+
+
+#dialogue_del_mes .menu_button {
+
+    margin-left: 25px;
+    margin-right: 25px;
+}
+
+#shadow_popup {
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    background-color: var(--black70a);
+    display: none;
+    opacity: 0.0;
+    position: absolute;
+    width: 100%;
+    height: 100svh;
+    z-index: 9999;
+    top: 0;
+}
+
+#colab_shadow_popup {
+
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--black30a);
+    display: none;
+    opacity: 1.0;
+    position: absolute;
+    width: 100%;
+    height: 100svh;
+    z-index: 2298;
+}
+
+#bgtest {
+    display: none;
+    width: 100svw;
+    height: 100svh;
+    position: absolute;
+    z-index: -100;
+    background-color: red;
+}
+
+/* ------ online status indicators and texts. 2 = kobold AI, 3 = Novel AI  ----------*/
+#online_status2,
+.online_status4 {
+    opacity: 0.5;
+    margin-top: 2px;
+    margin-bottom: 15px;
+}
+
+#online_status_indicator2,
+.online_status_indicator4 {
+    border-radius: 7px;
+    width: 14px;
+    height: 14px;
+    background-color: red;
+    display: inline-block;
+}
+
+#online_status_text2,
+.online_status_text4 {
+    margin-left: 4px;
+    display: inline-block;
+}
+
+#online_status3 {
+    opacity: 0.5;
+    margin-top: 2px;
+
+    margin-bottom: 30px;
+}
+
+#online_status_indicator3 {
+    border-radius: 7px;
+    width: 14px;
+    height: 14px;
+    background-color: red;
+    display: inline-block;
+}
+
+#online_status_text3 {
+    margin-left: 4px;
+    display: inline-block;
+}
+
+.horde_model_title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 20px;
+}
+
+
+#softprompt {
+    margin-bottom: 10px;
+}
+
+/* hidden until we find out a way to handle it better */
+#softprompt_block {
+    display: none;
+}
+
+#world_info {
+    margin-bottom: 0;
+}
+
+#world_info_block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#world_import_button,
+#world_create_button {
+    cursor: pointer;
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+}
+
+#world_import_button h4,
+#world_create_button h4 {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 1rem;
+
+}
+
+#world_popup {
+    display: none;
+    background-color: var(--SmartThemeBlurTintColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    max-width: var(--sheldWidth);
+    height: calc(100% - 40px);
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 40px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    padding: 4px;
+    /*border: 1px solid #333333;*/
+    flex-direction: column;
+    z-index: 3010;
+    border-radius: 0 0 20px 20px;
+}
+
+#world_popup_bottom_holder {
+    padding: 0.5rem 0;
+    margin: 0 18px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+#world_popup_bottom_holder div {
+    cursor: pointer;
+    width: fit-content;
+    user-select: none;
+    opacity: 0.8;
+}
+
+#world_popup_bottom_holder div:not(:first-of-type) {
+    margin-left: 1rem;
+}
+
+#world_info_buttons {
+    margin-left: 1rem;
+}
+
+#entry_edit_template {
+    display: none !important;
+}
+
+.world_entry:not(:last-child)::after {
+    margin-top: 1rem;
+    height: 1px;
+    display: block;
+    width: 100%;
+    content: '';
+    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.75), rgba(0, 0, 0, 0));
+}
+
+.world_popup_logo_block {
+    display: flex;
+    align-items: center;
+}
+
+#world_popup_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 18px;
+}
+
+#world_popup_header h3 {
+    margin: 0;
+}
+
+#form_rename_world {
+    display: flex;
+    align-items: center;
+    margin-right: 50px;
+    opacity: 0.8;
+}
+
+#form_rename_world input[type="submit"] {
+    cursor: pointer;
+}
+
+#form_rename_world input:not(:last-child) {
+    margin-right: 10px;
+}
+
+#world_popup_header h5 {
+    display: inline-block;
+}
+
+.world_popup_expander {
+    flex-grow: 1;
+}
+
+#world_popup_entries_list {
+    flex-grow: 1;
+    overflow-y: scroll;
+}
+
+#world_popup_entries_list:empty {
+    width: 100%;
+    height: 100%;
+}
+
+#world_popup_entries_list:empty::before {
+    content: 'No entries exist. Try creating one!';
+    font-size: calc(var(--mainFontSize) + .5rem);
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+.world_entry_form_control {
+    display: flex;
+    flex-direction: column;
+    margin: 0 10px;
+}
+
+.world_entry_thin_controls {
+    display: flex;
+    flex-direction: row;
+}
+
+.world_entry_thin_controls>div {
+    flex: 1;
+}
+
+.checkbox_fancy {
+    cursor: pointer;
+}
+
+.world_entry_form_control label {
+    margin-left: 10px;
+}
+
+
+.world_entry_form_control label h4 {
+    margin-bottom: 0px;
+    margin-top: 0.5rem;
+}
+
+.world_entry_form_control label h5 {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+.world_entry_form_control textarea {
+    height: auto;
+    width: auto;
+    margin-top: 0;
+}
+
+.world_entry_form_control.world_entry_form_horizontal {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.world_entry_form_control input[type=button] {
+    cursor: pointer;
+}
+
+.world_entry_form_horizontal h5 {
+    margin: 0 1rem;
+}
+
+.world_entry_form_control .checkbox {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    column-gap: 10px;
+}
+
+.world_entry_form_control .checkbox h4 {
+    margin: 0;
+    display: inline-block;
+}
+
+.world_entry_form_radios label {
+    margin-left: 0;
+}
+
+.world_entry_form_radios h4 {
+    display: inline;
+}
+
+#world_cross {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+#world_logo {
+    width: 35px;
+    height: 35px;
+    margin-right: 0.5rem;
+}
+
+#world_popup h5 {
+    color: var(--grey70);
+}
+
+/* STLYES FOR THE CHAT MESSAGE DELETION CHECKBOXES */
+/* --------------------------------------------------------------------------------------*/
+
+/* checkboxes default to being hidden unless called by the delete mesasges option menu button, which uses JS to force them to be display:block*/
+.del_checkbox {
+    display: none;
+    opacity: 0.7;
+    margin-top: 12px;
+    margin-right: 12px;
+}
+
+/*this hides the replacement for input form until Delete Messages mode is called*/
+#dialogue_del_mes {
+    display: none;
+}
+
+/*this is the default-shown div that is shown when message-deletion mode is NOT on, and hidden when JS calls message deletion mode*/
+.for_checkbox {
+    display: block;
+}
+
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: none;
+    position: relative;
+    width: var(--mainFontSize);
+    height: var(--mainFontSize);
+    overflow: hidden;
+    border-radius: 3px;
+    background-color: white;
+    box-shadow: inset 0 0 3px 0 var(--black70a);
+    cursor: pointer;
+}
+
+/* the checkbox starts with a size 0 background of a checkmark */
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin)::after {
+    content: '';
+    color: var(--white100);
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    left: 1px;
+    background-color: var(--transparent);
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-radius: 2px;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    -webkit-transition: 0.25s ease-in-out;
+    transition: 0.25s ease-in-out;
+    background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNWMtNC41IDQuNS0xMC43NSA3LTE3IDdzLTEyLjUtMi41LTE3LTdsLTEyNC41LTEyNC41Yy00LjUtNC41LTctMTAuNzUtNy0xN3MyLjUtMTIuNSA3LTE3bDM0LTM0YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=");
+}
+
+/* when the checkbox is checked, the background image is grown to normal size to fill the background of the 'checkbox'*/
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):checked::after {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+/*---------------------------------------------------------------------------------------------------------*/
+
+.option_select_right_menu {
+    width: 284px;
+    margin-bottom: 35px;
+    color: var(--white70a);
+    background-color: var(--black30a);
+}
+
+#user_avatar_block {
+    display: flex;
+    grid-gap: 10px;
+    flex-wrap: wrap;
+}
+
+#user_avatar_block .avatar {
+    cursor: pointer;
+    width: 64px;
+    height: 64px;
+    outline: 2px solid rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+}
+
+#user_avatar_block .avatar:not(.selected) {
+    outline: 2px solid transparent;
+}
+
+#user_avatar_block .avatar img {
+    width: 64px;
+    height: 64px;
+}
+
+#user_avatar_block .avatar_upload {
+    cursor: pointer;
+    width: 60px;
+    height: 60px;
+    background: var(--grey30);
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*this is just a big + sign, no need to dynamically size it*/
+    font-size: 3rem;
+}
+
+#form_upload_avatar {
+    display: none !important;
+}
+
+.range-block {
+    height: min-content;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 10px;
+    justify-content: space-between;
+}
+
+.range-block-title {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+
+}
+
+.range-block-counter {
+    width: max-content;
+    margin-left: 5px;
+    font-size: calc(var(--mainFontSize) - 0.2rem);
+    color: var(--white50a);
+}
+
+.range-block-range {
+    margin: 0;
+    width: 80%;
+    /* margin-bottom: 10px; */
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--white50a);
+    border-radius: 15px;
+    background-size: 70% 100%;
+    background-repeat: no-repeat;
+    box-shadow: inset 0 0 2px black;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    position: relative;
+    box-shadow: 0 0 5px 0 black;
+    box-shadow: inset 0 0 5px var(--black70a);
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    /* margin-top: -5px; */
+    border-radius: 50%;
+    background: var(--white100);
+}
+
+/*Notes '?' links*/
+
+.note-link-span {
+    color: var(--sienna);
+    border: 1px solid var(--sienna);
+    border-radius: 10px;
+    line-height: var(--mainFontSize);
+    font-size: var(--mainFontSize);
+    font-weight: 700;
+    width: calc(var(--mainFontSize) + 0.2rem);
+    height: calc(var(--mainFontSize) + 0.2rem);
+    display: inline-block;
+    opacity: 0.7;
+    margin: 0 5px;
+    text-align: center;
+    box-shadow: 0 0 3px black;
+}
+
+
+.note-link-span:hover {
+    color: var(--white100);
+    background-color: var(--orangered);
+    opacity: 1;
+}
+
+#tips_popup {
+
+    width: 500px;
+    height: 600px;
+    position: absolute;
+    z-index: 2060;
+    background-color: var(--cobalt30a);
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    margin-top: 15vh;
+    box-shadow: 5px 5px var(--black30a);
+    padding: 4px;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--black70a);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    border-radius: 10px;
+    padding-top: 30px;
+}
+
+.nice-link {
+    color: var(--SmartThemeBodyColor);
+    opacity: 0.5;
+    font-weight: 400;
+    text-decoration: none;
+    border-bottom: 2px dashed red;
+    transition: 0.3s;
+}
+
+.whitespacenowrap {
+    white-space: nowrap;
+}
+
+#chartokenwarning a {
+    color: var(--SmartThemeBodyColor);
+}
+
+.nice-link:hover {
+    opacity: 1;
+}
+
+#shadow_tips_popup {
+    display: none;
+    opacity: 0.0;
+    position: absolute;
+    width: 100%;
+    height: 100svh;
+    z-index: 2055;
+    background-color: var(--black70a);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+}
+
+.mes_stop {
+    display: none;
+    float: right;
+    cursor: pointer;
+    transition: opacity 0.3s ease-in-out;
+    height: 20px;
+    width: 20px;
+    opacity: 0.5;
+}
+
+.mes_edit {
+    float: right;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    height: 20px;
+    width: 20px;
+    filter: drop-shadow(0px 0px 2px black);
+    opacity: 0.2;
+}
+
+.mes_edit:hover,
+.mes_stop:hover {
+    opacity: 1;
+}
+
+.last_mes .mes_edit,
+.last_mes .mes_edit_buttons,
+.last_mes .mes_stop {
+    grid-row-start: 1;
+    position: relative;
+    right: -30px;
+}
+
+.mes_edit_buttons {
+    display: none;
+    flex-direction: row;
+    column-gap: 5px;
+    float: right;
+    cursor: pointer;
+    padding-bottom: 5px;
+    filter: drop-shadow(0px 0px 2px black);
+    transition: 0.3s ease-in-out;
+}
+
+.mes_edit_buttons .menu_button {
+    opacity: 0.5;
+    padding: 0px;
+    font-size: 1rem;
+    height: 2rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mes_edit_cancel.menu_button {
+    background-color: var(--crimson70a);
+}
+
+.mes_edit_done.menu_button {
+    background-color: var(--okGreen70a);
+}
+
+.mes_edit_buttons .menu_button:hover {
+    opacity: 1;
+}
+
+.edit_textarea {
+    padding: 5px;
+    margin: 0;
+    outline: none;
+    background-color: var(--black50a);
+    line-height: calc(var(--mainFontSize) + .25rem);
+}
+
+#anchor_order {
+    margin-bottom: 15px;
+}
+
+#anchor_checkbox,
+#power-user-option-checkboxes {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
+#anchor_checkbox label,
+#power-user-option-checkboxes label,
+.checkbox_label,
+.multigen_settings_block {
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    align-items: center;
+}
+
+.multigen_settings_block {
+    margin-top: 10px;
+}
+
+.multigen_settings_block label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#shadow_character_popup {
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--black70a);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    display: none;
+    opacity: 1.0;
+    position: absolute;
+    width: 100%;
+    height: 100svh;
+    z-index: 2058;
+}
+
+#character_popup {
+    display: none;
+    background-color: var(--black30a);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
+    grid-template-rows: 50px 1fr 1fr 1fr 5fr;
+    grid-gap: 10px;
+    max-width: var(--sheldWidth);
+    height: calc(100svh - 40px);
+    position: absolute;
+    z-index: 3002;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 40px;
+    box-shadow: 0 0 20px var(--black70a);
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-top: 20px;
+    padding-bottom: 30px;
+    border: 1px solid var(--black30a);
+    border-radius: 0 0 20px 20px;
+}
+
+#character_popup h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    display: inline;
+}
+
+h4 {
+    margin: 10px 0;
+}
+
+h5 {
+    margin: 5px 0;
+}
+
+#character_popup h5 {
+    color: var(--grey50);
+}
+
+
+#character_popup_text {
+    display: grid;
+    grid-template-columns: 50px auto;
+    grid-gap: 20px;
+    align-items: center;
+    width: 100%;
+}
+
+#personality_textarea {
+    width: 100%;
+}
+
+#mes_example_div {
+    height: 100%;
+    display: grid;
+    grid-template-rows: min-content auto;
+}
+
+#scenario_pole {
+    width: 100%;
+    margin-left: 0;
+}
+
+#mes_example_textarea {
+    width: 100%;
+    max-height: 100%;
+    margin-left: 0;
+}
+
+#character_popup_ok {
+    cursor: pointer;
+    display: none;
+    height: 40px;
+    margin-top: 15px;
+    margin-left: 36px;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--black70a);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    width: 110px;
+    text-align: center;
+}
+
+#shadow_select_chat_popup {
+    display: none;
+    opacity: 1.0;
+    position: absolute;
+    width: 100%;
+    height: 100svh;
+    z-index: 3001;
+    top: 0;
+    background-color: var(--black70a);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+}
+
+#select_chat_popup {
+    display: grid;
+    grid-template-rows: auto auto;
+    max-width: var(--sheldWidth);
+    height: min-content;
+    max-height: calc(100svh - 40px);
+    min-height: 100px;
+    position: absolute;
+    z-index: 2066;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    /* margin-top: 40px; */
+    box-shadow: 0px 0px 20px black;
+    padding: 10px;
+    background-color: var(--SmartThemeBlurTintColor);
+    border-radius: 20px;
+    overflow-y: auto;
+    border: 1px solid var(--grey30);
+}
+
+.TxtLrgBoldCenter {
+    text-align: center;
+    font-size: large;
+    font-weight: 600;
+}
+
+#export_div {
+    cursor: pointer;
+}
+
+#load_select_chat_div {
+    position: absolute;
+    bottom: 154px;
+    left: 174px;
+}
+
+#load_select_chat_div img {
+    width: 80px;
+    height: 80px;
+}
+
+#select_chat_div {
+    padding: 0;
+    height: min-content;
+}
+
+#select_chat_div hr {
+    margin: 0;
+}
+
+#select_chat_import {
+    display: grid;
+    grid-template-columns: min-content auto;
+    align-items: center;
+    grid-gap: 10px;
+    margin-bottom: 10px;
+}
+
+.select_chat_block_wrapper {
+    display: grid;
+    grid-template-columns: auto min-content;
+    align-items: center;
+    grid-gap: 10px;
+}
+
+.select_chat_block {
+    border-radius: 10px;
+    margin-top: 10px;
+    border: 1px solid var(--white30a);
+    padding: 10px;
+    display: grid;
+    grid-template-columns: min-content auto;
+    grid-template-rows: auto auto;
+    grid-gap: 10px;
+}
+
+.select_chat_block:hover {
+    background-color: var(--white30a);
+}
+
+.select_chat_block[highlight] {
+    background-color: var(--cobalt30a);
+}
+
+.select_chat_block .avatar {
+
+    grid-row: span 2;
+}
+
+.select_chat_block_filename {
+    opacity: 0.5;
+}
+
+.select_chat_block_mes {
+    font-size: calc(var(--mainFontSize) - .25rem);
+}
+
+#select_chat_cross {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.PastChat_cross {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    opacity: 0.4;
+}
+
+.PastChat_cross:hover {
+    color: red;
+    filter: drop-shadow(0 0 2px red);
+}
+
+#advanced_book_logo {
+    width: 35px;
+    height: 35px;
+    display: inline-block;
+}
+
+#export_character_div {
+    display: grid;
+    grid-template-columns: 340px auto;
+}
+
+/* GROUP CHATS */
+
+#rm_group_top_bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    column-gap: 15px;
+}
+
+#rm_button_group_chats h2 {
+    margin-top: auto;
+    margin-bottom: auto;
+    /* font-size: 16px; */
+    color: rgb(188, 193, 200, 1);
+    border: 1px solid #333;
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 6px;
+    border-radius: 10px;
+}
+
+#rm_group_chats_block {
+    display: none;
+    height: calc(100% - 45px);
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0 5px;
+}
+
+#rm_group_chats_block h3,
+#rm_group_chats_block h5 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+#rm_group_chat_name {
+    width: 90%;
+}
+
+#rm_group_buttons {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    column-gap: 10px;
+    flex-wrap: wrap;
+    padding: 0 5px;
+}
+
+.rm_group_settings {
+    display: flex;
+    flex-direction: column;
+}
+
+#rm_group_buttons .checkbox {
+    display: flex;
+}
+
+#rm_group_buttons .checkbox h4 {
+    display: inline-block;
+}
+
+#rm_group_buttons>input {
+
+    cursor: pointer;
+    user-select: none;
+}
+
+#rm_group_buttons>input:disabled {
+    filter: brightness(0.3);
+    cursor: unset;
+}
+
+#rm_group_members,
+#rm_group_add_members {
+    margin-top: 0.25rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid grey;
+    border-radius: 10px;
+    background-color: var(--black30a);
+}
+
+#rm_group_buttons_expander {
+    flex-grow: 1;
+}
+
+#rm_group_delete {
+    color: rgb(190, 0, 0);
+}
+
+#rm_group_members:empty {
+    width: 100%;
+}
+
+#rm_group_members:empty::before {
+    content: 'Group is empty';
+
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+#rm_group_add_members:empty {
+    width: 100%;
+}
+
+#rm_group_add_members_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    column-gap: 1rem;
+}
+
+#rm_group_add_members_header input {
+    flex: 1;
+    width: 100%;
+}
+
+#rm_group_add_members:empty::before {
+    content: 'No characters available';
+
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+.group_member_icon {
+    margin: 0 10px;
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+}
+
+.group_member {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.group_member .ch_name {
+    flex-grow: 1;
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 110px);
+}
+
+/* Rules for icon display */
+#rm_group_members .group_member[order="start"] .fa-chevron-down,
+#rm_group_members .group_member[order="end"] .fa-chevron-up,
+#rm_group_add_members .right_menu_button:not(.fa-plus),
+#rm_group_members .fa-plus {
+    display: none;
+}
+
+#rm_group_members .right_menu_button,
+#rm_group_add_members .right_menu_button {
+    padding: 0px;
+}
+
+#group_member_template,
+#group_list_template {
+    display: none !important;
+}
+
+.group_select {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.group_select:hover {
+    background-color: var(--white30a);
+}
+
+.group_select .group_icon {
+    width: 20px;
+    height: 20px;
+    margin: 0 10px;
+}
+
+.group_select .ch_name {
+    flex-grow: 1;
+    max-width: calc(100% - 100px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#typing_indicator_template {
+    display: none !important;
+}
+
+.typing_indicator {
+    position: sticky;
+    bottom: 10px;
+    margin: 10px;
+    opacity: 0.85;
+    text-shadow: 2px 2px 2px var(--black60a);
+}
+
+.missing-avatar {
+    font-size: 36px;
+}
+
+.typing_indicator:after {
+    display: inline-block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4, end) 1500ms infinite;
+    content: "";
+    /* ascii code for the ellipsis character */
+    width: 0px;
+}
+
+.group_member .avatar {
+    flex-shrink: 0;
+}
+
+@keyframes ellipsis {
+    0% {
+        content: ""
+    }
+
+    25% {
+        content: "."
+    }
+
+    50% {
+        content: ".."
+    }
+
+    75% {
+        content: "..."
+    }
+}
+
+#group_avatars_template {
+    display: none;
+}
+
+.avatar_collage {
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+body:not(.big-avatars) .avatar_collage {
+    min-width: 50px;
+}
+
+body.big-avatars .avatar_collage {
+    min-width: 60px;
+}
+
+
+.avatar_collage img {
+    position: absolute;
+    overflow: hidden;
+}
+
+body:not(.big-avatars) .avatar_collage img {
+    border-radius: 0% !important;
+}
+
+.collage_2 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 100%;
+    width: 50%;
+    height: 100%;
+}
+
+.collage_2 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 100%;
+    width: 50%;
+    height: 100%;
+}
+
+.collage_3 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_3 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_3 .img_3 {
+    left: 0;
+    top: 50%;
+    max-width: 100%;
+    max-height: 50%;
+    width: 100%;
+    height: 50%;
+}
+
+.collage_4 .img_1 {
+    left: 0;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_2 {
+    left: 50%;
+    top: 0;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_3 {
+    left: 0;
+    top: 50%;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+.collage_4 .img_4 {
+    left: 50%;
+    top: 50%;
+    max-width: 50%;
+    max-height: 50%;
+    width: 50%;
+    height: 50%;
+}
+
+/* border radius for big avatars collages */
+
+body.big-avatars .collage_2 .img_1 {
+    border-radius: 10px 0 0 10px !important;
+}
+
+body.big-avatars .collage_2 .img_2 {
+    border-radius: 0 10px 10px 0 !important;
+}
+
+body.big-avatars .collage_3 .img_1 {
+    border-radius: 10px 0 0 0 !important;
+}
+
+body.big-avatars .collage_3 .img_2 {
+    border-radius: 0 10px 0 0 !important;
+}
+
+body.big-avatars .collage_3 .img_3 {
+    border-radius: 0 0 10px 10px !important;
+}
+
+body.big-avatars .collage_4 .img_1 {
+    border-radius: 10px 0 0 0 !important;
+}
+
+body.big-avatars .collage_4 .img_2 {
+    border-radius: 0 10px 0 0 !important;
+}
+
+body.big-avatars .collage_4 .img_3 {
+    border-radius: 0 0 0 10px !important;
+}
+
+body.big-avatars .collage_4 .img_4 {
+    border-radius: 0 0 10px 0 !important;
+}
+
+span.warning {
+    color: rgba(255, 0, 0, 0.5);
+    font-weight: bolder;
+}
+
+#talkativeness_hint {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    width: 100%;
+}
+
+#talkativeness_expander {
+    flex: 1;
+}
+
+
+#talkativeness_div input[type="range"] {
+    width: 100%;
+}
+
+#talkativeness_hint span {
+    min-width: 10em;
+    font-size: calc(var(--mainFontSize) - .25rem);
+}
+
+#talkativeness_hint span:nth-child(1) {
+    text-align: left;
+}
+
+#talkativeness_hint span:nth-child(2) {
+    text-align: center;
+}
+
+#talkativeness_hint span:nth-child(3) {
+    text-align: right;
+}
+
+/* css/style.css */
+
+p {
+    margin-bottom: 16px;
+    margin-top: 0;
+}
+
+hr {
+    margin: 5px 0;
+    height: 1px;
+    border: 0;
+}
+
+h1 {
+    font-size: calc(var(--mainFontSize) + 1rem);
+    line-height: 32px;
+    margin-bottom: 22px;
+}
+
+h2 {
+    margin-top: 5px;
+    margin-bottom: 22px;
+}
+
+.right_menu_button h2 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.right_menu_button img {
+    display: block;
+    cursor: pointer;
+    height: 26px;
+}
+
+a {
+    color: orange;
+    text-decoration: none;
+}
+
+#export_format_popup {
+    display: none;
+    z-index: 9999;
+}
+
+.list-group {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 3px;
+    overflow: hidden;
+    background-color: var(--SmartThemeBlurTintColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
+    border: 1px solid var(--white30a);
+    border-radius: 15px;
+    box-shadow: 0 0 5px black;
+    text-shadow: 0 0 3px black;
+}
+
+.list-group-item:hover {
+    background-color: var(--SmartThemeEmColor);
+}
+
+.list-group-item {
+    color: var(--SmartThemeBodyColor);
+    padding: 0.75rem 1.25rem;
+    margin-bottom: -1px;
+    box-sizing: border-box;
+    user-select: none;
+    cursor: pointer;
+}
+
+/* ############################################################# */
+/*           Right nav panel and nav-toggle */
+/* ############################################################# */
+
+#right-nav-panel {
+    width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    max-height: calc(100svh - 42px);
+    height: calc(100svh - 42px);
+    position: fixed;
+    top: 0;
+    margin: 0;
+    right: 0;
+    left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
+    padding: 5px;
+    margin-bottom: 5px;
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    background-color: var(--SmartThemeBlurTintColor);
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    z-index: 3000;
+    border: 0;
+    border-left: 1px solid var(--grey30a);
+    border-bottom: 1px solid var(--grey30a);
+    /* max-height: 100svh; */
+    box-shadow: none;
+    border-radius: 0 0 0 20px;
+    overflow: hidden;
+    scrollbar-width: thin;
+}
+
+#nav-toggle {
+    position: fixed;
+    right: 13px;
+    top: 12px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    z-index: 3001;
+}
+
+/* #right-nav-panel>div:not(#right-nav-panel-tabs) {
+    height: calc(100% - 50px);
+    overflow-y: auto;
+} */
+
+#hidden-divs {
+    display: none;
+}
+
+/* Message images */
+.mes img.img_extra {
+    max-width: 600px;
+    max-height: 300px;
+    border-radius: 10px;
+    display: block;
+}
+
+.mes img.img_extra~* {
+    display: none;
+}
+
+/* Extensions */
+#extensions_url {
+    display: block;
+}
+
+#extensions_status {
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.extensions_block input[type="submit"]:hover {
+    background-color: green;
+}
+
+.extensions_block input[type="checkbox"] {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+label[for="extensions_autoconnect"] {
+    display: flex;
+    align-items: center;
+    margin: 0 !important;
+}
+
+.extensions_url_block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.extensions_url_block h4 {
+    display: inline;
+}
+
+.extensions_block {
+    clear: both;
+    padding: 0.05px;
+    /* clear fix */
+}
+
+.extensions_info {
+    text-align: left;
+    margin: 0 1em;
+}
+
+.extensions_info h3 {
+    margin-bottom: 0.5em;
+}
+
+.extensions_info h4 {
+    margin-bottom: 0.5em;
+}
+
+.extensions_info p {
+    margin-bottom: 0.5em;
+}
+
+.extensions_info .disabled {
+    color: lightgray;
+}
+
+#extensions_list .disabled {
+    text-decoration: line-through;
+    color: lightgray;
+}
+
+.success {
+    color: green;
+}
+
+.failure {
+    color: red;
+}
+
+.optional {
+    color: lightgray;
+}
+
+.expander {
+    flex-grow: 1;
+}
+
+/*------------ TOP SIDE SETTINGS ----------------*/
+
+#top-settings-holder {
+    margin: 0 auto;
+    padding-top: 5px;
+    height: 40px;
+    max-width: var(--sheldWidth);
+    /* color: white; */
+    justify-content: center;
+    display: grid;
+    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%;
+    z-index: 3000;
+    position: relative;
+    grid-gap: 2%;
+
+}
+
+.drawer {
+    align-items: center;
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    /* z-index: 3001; */
+
+}
+
+.drawer-icon {
+    display: inline-block;
+    cursor: pointer;
+    font-size: 1.8rem;
+}
+
+.drawer-icon.openIcon {
+
+    filter: drop-shadow(0px 0px 2px black);
+    ;
+    transition: all 0.275s;
+}
+
+.drawer-icon.closedIcon {
+    filter: drop-shadow(0px 0px 2px black);
+    opacity: 0.3;
+    transition: all 0.275s;
+}
+
+.drawer-icon.closedIcon:hover {
+    opacity: 1;
+}
+
+.inline-drawer {
+    padding-bottom: 10px;
+}
+
+.inline-drawer-icon {
+    display: block;
+    cursor: pointer;
+    font-size: calc(var(--mainFontSize)*1.5);
+    background-size: cover;
+    background-repeat: no-repeat;
+    filter: brightness(75%);
+}
+
+.redOverlayGlow {
+    color: #ad0000;
+    opacity: 0.8 !important;
+    filter: drop-shadow(0px 0px 2px red) !important;
+}
+
+.inline-drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.inline-drawer-content {
+    display: none;
+}
+
+.drawer25pWidth {
+    flex-basis: calc((var(--sheldWidth) / 4) - 16px);
+}
+
+.drawer-content {
+    background-color: var(--SmartThemeBlurTintColor);
+    color: var(--SmartThemeBodyColor);
+    border-radius: 20px;
+    padding: 10px;
+    border: 1px solid var(--grey30a);
+    box-shadow: 0 0 20px black;
+    min-width: 450px;
+    width: var(--sheldWidth);
+    overflow-y: scroll;
+    max-height: calc(100svh - 70px);
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    max-width: var(--sheldWidth);
+    margin: 35px auto 0 auto;
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    /* resize: both; */
+    z-index: 9999 !important;
+}
+
+.fillRight,
+.fillLeft {
+    min-width: unset;
+}
+
+.fillLeft {
+    width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    height: calc(100svh - 42px);
+    max-height: calc(100svh - 42px);
+    position: fixed;
+    top: 0;
+    margin: 0;
+    left: 0;
+    right: auto;
+    padding: 5px;
+    border-radius: 0 0 20px 0;
+    box-shadow: none;
+    overflow: hidden;
+}
+
+.scrollableInner {
+    overflow-x: hidden;
+    height: calc(100% - 30px);
+}
+
+.width100p {
+    width: 100%;
+}
+
+.drawer-content select {
+    width: 100%;
+}
+
+toolcool-color-picker {
+    margin-right: 10px;
+}
+
+.flex-container {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.flexnowrap {
+    flex-wrap: nowrap;
+}
+
+.alignitemscenter {
+    align-items: center;
+}
+
+.padding5 {
+    padding: 5px;
+}
+
+.margin0 {
+    margin: 0;
+}
+
+.margin-r5 {
+    margin-right: 5px;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.flexFlowColumn {
+    flex-flow: column;
+}
+
+.wideMinContent {
+    width: min-content;
+}
+
+.flexWide50p {
+    flex: 50%;
+}
+
+.wide50p {
+    width: 50% !important;
+}
+
+
+.justifyLeft {
+    text-align: start;
+    justify-content: left;
+    margin-left: unset;
+}
+
+.justifyCenter {
+    justify-content: center;
+    margin: 0 auto;
+}
+
+.spaceEvenly {
+    justify-content: space-evenly;
+}
+
+.widthNatural {
+    width: unset !important;
+    min-width: unset !important;
+    max-width: unset !important;
+}
+
+.widthFreeExpand {
+    width: -webkit-fill-available;
+    width: -moz-available;
+}
+
+.wide100p {
+    width: 100%;
+}
+
+#openai_api-presets {
+    display: flex;
+    flex-direction: row;
+    column-gap: 10px;
+    flex-wrap: wrap;
+}
+
+#openai_api-presets>div {
+    flex: 1;
+}
+
+#openai_api-presets select {
+    width: 100%;
+}
+
+#openai_logit_bias_text,
+.openai_logit_bias_range_block {
+    flex: 1;
+}
+
+.openai_logit_bias_form .range-block-counter {
+    margin-top: 0px;
+}
+
+.openai_logit_bias_form {
+    display: flex;
+    flex-direction: row;
+    column-gap: 10px;
+    align-items: center;
+}
+
+.openai_logit_bias_list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+    flex-wrap: wrap;
+}
+
+.openai_logit_bias_list_item .separator {
+    margin: 0 3px;
+    display: block;
+    font-weight: 700;
+    font-size: calc(var(--mainFontSize) + .2rem);
+}
+
+.openai_logit_bias_list_item {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    background-color: var(--ivory);
+    color: var(--black100);
+    font-weight: 500;
+    border-radius: 20px;
+    min-height: fit-content;
+    padding: 3px 5px;
+}
+
+.openai_restorable,
+.poe_restorable {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.openai_restorable .right_menu_button img {
+    height: 20px;
+}
+
+.openai_preset_buttons {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.reverse_proxy_warning,
+.neutral_warning {
+    color: rgba(255, 0, 0, 0.5)
+}
+
+.textarea_compact {
+    font-size: calc(var(--mainFontSize) * 0.9);
+    line-height: 1.2;
+}
+
+
+
+/*bubble chat style*/
+
+
+body.bubblechat .mes {
+    padding: 10px;
+    border-radius: 20px;
+    background-color: var(--SmartThemeBlurTintColor);
+    margin-bottom: 5px;
+    border: 1px solid var(--white30a);
+}
+
+body.w1000px #sheld {
+    max-width: 1000px !important;
+}
+
+/*FastUI blur removal*/
+
+body.no-blur * {
+    backdrop-filter: unset !important;
+}
+
+
+
+body.no-blur #send_form.no-connection {
+    background-color: rgba(100, 0, 0, 0.9) !important;
+}
+
+body.no-blur #bg1,
+body.no-blur #bg_custom {
+    filter: unset;
+
+}
+
+body.no-blur .drawer-content,
+body:not(.bubblechat).no-blur #chat,
+body.bubblechat.no-blur .mes,
+body.no-blur #top-bar,
+body.no-blur #character_popup,
+body.no-blur #world_popup,
+body.no-blur #dialogue_popup,
+body.no-blur #select_chat_popup,
+body.no-blur .options-content,
+body.no-blur #send_form,
+body.no-blur .list-group {
+    background-color: var(--SmartThemeFastUIBGColor) !important;
+}
+
+/* wAIfu mode*/
+
+
+body.waifuMode #top-bar {
+    border-radius: 0 0 20px 20px;
+    border: 1px solid var(--grey30a);
+}
+
+body.waifuMode #sheld {
+    height: 40svh;
+    top: calc(100% - 40vh);
+    bottom: 0;
+}
+
+body.waifuMode #chat {
+    border-top: 1px solid var(--grey30a);
+    border-radius: 20px 20px 0 0;
+}
+
+body.waifuMode .expression-holder {
+    max-height: 90vh;
+    max-width: 90vw;
+    height: 90vh;
+    width: fit-content;
+    position: unset;
+    margin: 0 auto;
+    bottom: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    z-index: 1;
+    /* resize: both; */
+}
+
+body.waifuMode img.expression {
+    /* height: 90vh; */
+}
+
+body.movingUI .drag-grabber {
+    display: inline;
+}
+
+body.movingUI #sheld,
+body.movingUI .drawer-content,
+body.movingUI #expression-holder {
+    resize: both;
+}
+
+/* ---------- @media queries must always go at the bottom ------------*/
+
+/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
+
+@media screen and (max-width: 1000px) {
+
+
+
+    .mes img.img_extra {
+        max-width: 100%;
+    }
+
+    .world_entry_thin_controls {
+        flex-direction: column;
+    }
+
+    .world_entry_form_control.world_entry_form_horizontal {
+        flex-direction: column;
+        align-items: flex-start;
+        row-gap: 0.5rem;
+    }
+
+    .world_entry_form_control.world_entry_form_horizontal .world_popup_expander {
+        display: none;
+    }
+
+    #world_popup_header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    #world_popup_header .world_popup_expander {
+        display: none;
+    }
+
+    body {
+        touch-action: none;
+        overflow: hidden;
+    }
+
+    .drawer-content {
+        min-width: unset;
+        width: 100%;
+        max-height: calc(100svh - 45px);
+        position: fixed;
+        left: 0;
+        top: 5px;
+        border: 1px solid var(--grey30);
+    }
+
+    #select_chat_popup {
+        align-items: start;
+        height: min-content;
+        align-content: start;
+    }
+
+    #top-settings-holder,
+    #top-bar {
+        width: 100svw;
+    }
+
+    #bg1,
+    #bg_custom {
+        position: fixed;
+    }
+
+    #sheld,
+    #character_popup,
+    #world_popup {
+        height: calc(100svh - 45px);
+        width: 100% !important;
+        margin: 0 auto;
+        max-width: 100%;
+        left: 0 !important;
+        resize: none;
+        top: 42px;
+    }
+
+    #character_popup,
+    #world_popup,
+    #send_form {
+        border: 1px solid var(--grey30);
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    }
+
+    #chat {
+        border-left: 1px solid var(--grey30);
+        border-right: 1px solid var(--grey30);
+        border-bottom: 1px solid var(--grey30);
+        align-items: start;
+        align-content: start;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .drag-grabber,
+    .pull-tab {
+        display: none !important;
+
+    }
+
+    .mes-text {
+        padding-right: 25px;
+    }
+
+    #right-nav-panel,
+    #left-nav-panel {
+        height: calc(100svh - 45px);
+        min-width: 100%;
+        width: 100%;
+        max-width: 100%;
+        overflow-y: hidden;
+        border-left: 1px solid var(--grey30);
+        border-right: 1px solid var(--grey30);
+        border-bottom: 1px solid var(--grey30);
+        border-radius: 0 0 20px 20px;
+        top: 40px !important;
+        left: 0 !important;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    }
+
+    #right-nav-panel h4 {
+        margin: 5px auto;
+    }
+
+    #form_create {
+        grid-template-rows:
+            [avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto;
+    }
+
+    #result_info {
+        font-size: calc(var(--mainFontSize) - .1rem);
+    }
+
+    .avatar_div {
+        margin-top: 5px;
+    }
+
+    #character_popup {
+        width: 100%;
+        border-radius: 0 0 20px 20px;
+        margin-top: 0px;
+        height: calc(100% - 40px);
+    }
+
+
+    #send_textarea {
+        font-size: calc(var(--mainFontSize) + .25rem);
+        line-height: calc(var(--mainFontSize) + .5rem);
+        min-height: calc(2rem + 0.75rem + 2px);
+        max-height: 200px;
+        word-wrap: break-word;
+        height: 40px;
+        resize: vertical;
+        display: block;
+        background-color: rgba(255, 0, 0, 0);
+        border: 0;
+        box-shadow: none;
+        padding: 6px 0 6px 0;
+        font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+        margin: 0;
+        text-shadow: #000 0 0 3px;
+    }
+
+    #rm_ch_create_block textarea {
+        max-height: 200px;
+    }
+
+    #talkativeness_hint span {
+        min-width: 33%;
+    }
+
+    .drawer25pWidth {
+        flex-basis: max(calc(100% / 4 - 10px), 200px);
+    }
+
+    .expression-holder {
+        display: none;
+    }
+
+    body.waifuMode #sheld {
+        height: 40svh;
+        top: 60svh;
+        align-items: end;
+        bottom: 0 !important;
+    }
+
+    body.waifuMode .expression-holder {
+        display: inline;
+        width: unset;
+        max-height: unset;
+        max-width: unset;
+        bottom: unset;
+        left: unset;
+        top: unset;
+        height: 100vh;
+        width: 100vw;
+        margin: 0 auto;
+        position: absolute;
+        filter: drop-shadow(2px 2px 2px #51515199);
+        z-index: 1;
+    }
+
+    body.waifuMode img.expression {
+        object-fit: cover;
+    }
+
+    .scrollableInner {
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: calc(100svh - 90px);
+    }
+}
+
+@media screen and (max-width: 1000px) and (orientation: landscape) {
+    body.waifuMode img.expression {
+        object-fit: contain;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .drawer25pWidth {
+        flex-basis: max(calc(100% / 2 - 10px), 200px);
+    }
+}
+
+/*this part only only applies to iOS devices*/
+
+
+
+@supports (-webkit-touch-callout: none) {
+    body {
+        margin: 0 auto;
+    }
+
+    #top-bar {
+        width: 100vw;
+    }
+
+    #sheld {
+        margin: unset;
+        padding: unset;
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+        width: 100svw;
+        height: calc(100svh - 40px);
+        padding-right: max(env(safe-area-inset-right), 5px);
+        padding-left: max(env(safe-area-inset-left), 5px);
+        padding-bottom: max(env(safe-area-inset-bottom), 15px);
+    }
+
+    #character_popup,
+    #world_popup,
+    #left-nav-panel,
+    #right-nav-panel,
+    .drawer-content {
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        height: calc(100svh - 70px);
+        width: calc(100% - 5px);
+        max-height: calc(100svh - 70px);
+        max-width: calc(100% - 5px);
+
+    }
+
+    #character_popup,
+    #world_popup,
+    .drawer-content {
+        margin-top: 40px;
+    }
+
+    .scrollableInner {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}