/*********************/
/*** CAI-like chat ***/
/*********************/

body {
  color: rgba(229, 224, 216, 0.85);
  background-color: rgb(36, 36, 37);
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  font-family: Noto Sans !important;
}

* {
  scrollbar-color: #4e5151 #2b2d2d40;
  scrollbar-width: thin;
}

/***********/

#top-bar {
  padding-bottom: 3.5rem;
  box-shadow: none;
}
#top-settings-holder::after {
  content: 'Remember: Everything Characters say is made up!';
  display: block;
  position: absolute;
  color: rgb(208, 82, 91);
  font-size: 12px;
  font-weight: 400;
  background: rgb(36, 36, 37);
  margin: 2.3rem auto; 
}

/***********/

#chat {
  background-color: transparent;
  border: none;
  scrollbar-width: unset;
  margin-top: 2rem;
}
#chat .mes {
  padding: 10px 5px 0 5px
}

#chat .mes_block {
  padding: 0 0 8px 8px;
}

/***********/

#chat .mesAvatarWrapper .avatar img {
  height: 45px;
  width: 45px;
  border-radius: 45px;
  object-fit: cover;
  box-shadow: none;
}
#chat .mesAvatarWrapper > :not(.avatar) {
  display:none;
}

/***********/

#chat .mes_block .mes_text p {
  font-size: 15px;
  line-height: 23px;
}
#chat .mes_block .mes_text p:not(:last-child) {
  margin-bottom: 1rem;
}

#chat .mes_block .mes_text ul {
  margin-top: -0.25rem;
}

#chat .mes_block .mes_text,
#chat .mes_block .mes_buttons {
  margin-right: 1rem;
}
@media (min-width:679px) {
  #chat .mes_block .mes_text,
  #chat .mes_block .mes_buttons {
    margin-right: 6rem;
  }
  #chat .mes_block .mes_buttons,
  #chat .mes_block .mes_buttons .extraMesButtons {
    visibility: hidden;
  }
  #chat .mes_block:hover .mes_buttons,
  #chat .mes_block:hover .mes_buttons .extraMesButtons {
    visibility: visible;
  }
}

/***********/

#chat .mes_block .name_text {
  font-weight: 650;
  font-size: 15px;
}
#chat .mes_block .timestamp,
#chat .mes_block #svg2,
#chat .mes_block .icon-svg {
  display:none;
}

/***********/

#chat .mes[is_user="false"] .mes_block .name_text:after {
  content: 'c.ai';
  display: inline-block;
  border-radius: .25rem !important;
  background-color: rgb(28, 77, 153);
  color: rgb(229, 224, 216);
  font-size: 12px;
  font-weight: 600;
  height: 18px;
  line-height: 18px;
  margin-left: 5px;
  padding: 0 4px 0 4px;
}

/***********/

body.no-blur #top-bar, 
body.no-blur #send_form {
  background-color: rgb(36, 36, 37) !important;
}
#form_sheld {
  margin: 1.5rem .5rem 30px .5rem;
  width: 95%;
}
#form_sheld #send_form {
  border-color: rgb(51, 63, 79);
  border-radius: 32px;
  margin: 0 1rem 0 1rem;
  width: 95%;
}
#form_sheld #send_form #send_textarea::placeholder {
  text-align: left;
}

/***********/

.swipe_right, .swipe_left {
  bottom: 50%;
}
.swipe_left {
  left: 10px;
}
.swipe_right {
  right: 20px;
}
.swipes-counter {
  display: none;
}

/***********/

.mes_text strong em {
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
    color: var(--SmartThemeBodyColor);
}

/***********/

#leftSendForm, #rightSendForm {
    display: flex;
    flex-wrap: wrap;
    align-content: end;
}

/***********/

#form_sheld #send_form #mes_stop {
    background: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='12 12 6 6' style='color: rgb(230, 100, 100); display: flex; width: 30px; height: 30px; cursor: pointer; --darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor; --darkreader-inline-color: %23d9706c;' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' data-darkreader-inline-fill='' data-darkreader-inline-stroke='' data-darkreader-inline-color=''%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M6 6h12v12H6z'%3E%3C/path%3E%3C/svg%3E") 50% 50% no-repeat !important;
    width: 1.5rem;
    height: 2rem;
    margin-right: 2rem;
}
#form_sheld #send_form #mes_stop::before,
#form_sheld #send_form #mes_stop .fa-circle-stop::before {
    display:none !important;
}

/***********/

#form_sheld #send_form #send_but {
    background: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' id='send-btn-icon' class=' dark' style='color: rgb(60, 133, 246); --darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor; --darkreader-inline-color: %23589ee0;' height='25' width='25' xmlns='http://www.w3.org/2000/svg' data-darkreader-inline-fill='' data-darkreader-inline-stroke='' data-darkreader-inline-color=''%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'%3E%3C/path%3E%3C/svg%3E") 50% 50% no-repeat !important;
    margin-right: 2rem;
    width: 1.5rem;
    height: 2rem;
    margin-right: 2rem;
}
#form_sheld #send_form #send_but::before {
    display:none !important;
}

/***********/

#form_sheld #send_form #send_but_sheld #extensionsMenuButton {
    display:none !important;
}

/***********/

#form_sheld #send_form #options_button {
    background: url("data:image/svg+xml,%3Csvg stroke='rgb(159, 151, 136)' fill='rgb(159, 151, 136)' stroke-width='0' viewBox='0 0 16 16' style='margin-right: 5px; --darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor;' height='25' width='25' xmlns='http://www.w3.org/2000/svg' data-darkreader-inline-fill='' data-darkreader-inline-stroke=''%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'%3E%3C/path%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'%3E%3C/path%3E%3C/svg%3E") 50% 50% no-repeat !important;
    color: rgb(159, 151, 136) !important;
    margin-left: 0.2rem;
}
#form_sheld #send_form #options_button::before {
    display:none !important;
}