<task>
This is a text message conversation between {{user}} and {{char}}. Write in a texting style that matches {{char}}'s personality. Avoid all narration, and only write {{char}}'s text message replies.
Double line breaks are used to signify consecutive, separate messages from someone.

After finishing a reply with however many messages, add a double line break along with the following timestamp text:
{{date}} - {{time}}

</task>

(\w+ \d{1,2}, \d{4}) - (\d{1,2}:\d{2} [AP]M)

<div class="datetime">$1 - $2</div>

^((?:(?!<div class="datetime">)[\s\S])*?)$

$1

<div class="datetime">{{date}} - {{time}}</div>

.mes_text {
font-family: Arial;
font-kerning: normal;
}

/* Customize colors */
:root {
  --user-color: #000000;
  --bot-color: #000000;
  --text-color: white;
  --user-border: black;
  --bot-border: black;
}

#chat {
    padding: 10px;
    background-image: url('bg.png'); /* BG image goes into the SillyTavern/public/ folder */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top bottom; 
}

/* Common styles for all messages */
.mes_text p, .mes_text ol, .mes_text ul {
    border-radius: 15px;
    padding: 16px 18px;
    color: var(--text-color);
    margin: 0px 0px 15px 0px;
    position: relative; /* Dialogue bubble tail */
    text-align: left;
    max-width: 70%;
    width: fit-content;
    display: inline-block
}

.mes_text li {
  margin-left: 20px; /* Gives some indent for list items */
}

.mes_text p:nth-last-child(2) {
  margin-bottom: 0;
}

.mes_text hr {
  display: none;
}

.mes[is_user="true"] p, .mes[is_user="true"] .mes_text ol, .mes[is_user="true"].mes_text ul {
    background-color: var(--user-color);
}

.mes[is_user="false"] p, .mes[is_user="false"] .mes_text ol, .mes[is_user="false"].mes_text ul {
    background-color: var(--bot-color);
}

.mes[is_user="true"] .mes_text {
  align-items: flex-end;
  justify-content: flex-end;
}

/* Clean up */
p:empty {
  display: none;
}

details {
  display: none;
}

/* Code box limit */
.mes_text .hljs {
  max-width: 70%;
  width: auto !important;
}

.mes[is_user="true"] .mes_text .hljs {
  align-self: flex-end;
  text-align: left;
  width: fit-content;
  max-width: 70%;
  margin-left: auto;
}

/* Date Time */
.mes_text p:last-of-type {
  display: inline-block;
  margin-bottom: 0;
}
.custom-datetime {
  display: inline-block;
  vertical-align: bottom;
  margin: 0px 10px;
  color: #ccc;
  font-size: 0.9em !important;  white-space: pre-wrap;
}

.custom-datetime::after {
  display: none;
}

/* Dialogue tail for user */
.mes[is_user="true"] .mes_text p::after, .mes[is_user="true"] .mes_text ol::after, .mes[is_user="true"].mes_text ul::after {
    content: '';
    position: absolute;
    top: 5px; /* Move the arrow higher */
    right: -12px; /* Move the arrow off the bubble to the right */
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent; /* Creates bottom side of the triangle */
    border-left: 30px solid var(--user-color); /* Creates the right-pointing arrow */
}

/* Dialogue tail for bot*/
.mes[is_user="false"] .mes_text p::after, .mes[is_user="false"] .mes_text ol::after, .mes[is_user="false"].mes_text ul::after {
    content: '';
    position: absolute;
    top: 5px; /* Move the arrow higher */
    left: -12px; /* Move the arrow off the bubble to the left */
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent; /* Creates bottom side of the triangle */
    border-right: 30px solid var(--bot-color); /* Creates the left-pointing arrow */
}

.last_mes .mes_block {
  padding-bottom: 20px;

}

.mes:last-child .mes_text {
    padding-right: 0px;
}

.avatar {
min-width: 60px;
height: 60px !important;
}

/* Avatar borders */

.mesAvatarWrapper .avatar img,
.avatar img {
  box-shadow: 0 0 0 3px var(--user-border) !important;
  border: none !important;
}

.mes[is_user="false"] .mesAvatarWrapper .avatar img,
.mes[is_user="false"] .avatar img {
  box-shadow: 0 0 0 3px var(--bot-border) !important;
}

.mesAvatarWrapper {
  order: 0;
  margin-right: 15px;
}

/* Move avatar to the right for user messages */
.mes[is_user="true"] .mesAvatarWrapper {
  order: 1;
  margin-right: 0;
  margin-left: 15px;
}

/* Align text to the right for user messages */
.mes[is_user="true"] .mes_block {
  text-align: right;
}

.mes_img_container {
margin-left: auto;
}

.mes[is_user="true"] .mes_block .mes_text{
  margin-right: 0;
}

.mes_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mes_block {
  overflow-x: visible;
  display: flex !important;
  flex-direction: column !important;
  padding: 0px;
}

.mes_buttons {
    order: 1;
}

.ch_name.flex-container.justifySpaceBetween {
    order: 1;
}

.mes[is_user="false"] .mes_block .ch_name.flex-container.justifySpaceBetween {
    flex-direction: row-reverse;
}


.mes_block .name_text {
  display: none;
}

.mes_block > *:not(.ch_name.flex-container.justifySpaceBetween) {
    order: 0; 
}

.mes_block .ch_name (
  max-width: auto !important;
}


.swipe_right, .swipe_left {
  bottom: 5px;
}

.last_mes .mesAvatarWrapper {
  padding-bottom: 0px;
}

/* User buttons left align */
div.mes[is_user="true"] * {
  flex-direction: row-reverse;
}

/* Fix preset list width */
@media (max-width: 768px) {
  #completion_prompt_manager {
    width: 90%;
    margin-left: 10%;
    margin-right: auto;
  }
}

/* Swipe buttons mod */
.swipe_right, .swipe_left {
  bottom: 5px;
}

.last_mes .mes_block { 
  padding-bottom: 20px;
}

/* Fix lorebook field sizes for mobile */
@media (max-width:768px) {
  .text_pole[name="comment"] {
    width: 280px !important;
  }
  textarea#customCSS {
    height: 200px;
    width: 100% !important;
  }
  .text_pole[name="content"] {
    width: 100% !important;
    margin: 5px 0px;
  }
}

/* Remove proxy warning */
#ReverseProxyWarningMessage {
  display: none !important;
}

/* Remove the small space between the chat and bottom tray */
#form_sheld {
  margin: 0px auto !important;
}

/* No Scrollbar */
/* Firefox */
@-moz-document url-prefix() {
  #chat {
    /scrollbar-width: none;
  }
}

/* Chrome */
#chat::-webkit-scrollbar {
  /display: none;
}

<task>
This is a text message conversation between {{user}} and {{char}}. Write in a texting style that matches {{char}}'s personality. Avoid all narration, and only write {{char}}'s text message replies.
Double line breaks are used to signify consecutive, separate messages from someone.

Begin each reply by analyzing the NARRATION as an AUTHOR with <thinking>thoughts</thinking> where thoughts go over the situation, how {{char}} would react, and how {{char}} would type given all the information.

After finishing a reply with however many messages, add a double line break along with the following timestamp text:
{{date}} - {{time}}

</task>

/* Dialogue tail for user */
.mes[is_user="true"] .mes_text p:first-of-type::after,
.mes[is_user="true"] .mes_text ol:first-of-type::after,
.mes[is_user="true"] .mes_text ul:first-of-type::after {
    content: '';
    position: absolute;
    top: 5px;
    right: -12px;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-left: 30px solid var(--user-color); /* Right-pointing arrow */
}

/* Dialogue tail for bot */
.mes[is_user="false"] .mes_text p:first-of-type::after,
.mes[is_user="false"] .mes_text ol:first-of-type::after,
.mes[is_user="false"] .mes_text ul:first-of-type::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -12px;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-right: 30px solid var(--bot-color); /* Left-pointing arrow */
}