#divContentHolder {
  position: relative !important;
  display: flex;
  top: unset !important;
  left: unset !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0px;
  padding: 0px;
  opacity: 1;
  transition: var(--ACZ-transition-panel);
  overflow: hidden;

  --ACZ-Chats-Height-1: 100%; /* System Messages */
  --ACZ-Chats-Height-2: 100%; /* timestamps, icons */

  --ACZ-Chats-Opacity-1: 1; /* System Messages */
  --ACZ-Chats-Opacity-2: 1; /* timestamps, icons */

  --ACZ-Chats-Display-1: flex; /* System Messages */
  --ACZ-Chats-Display-2: flex; /* timestamps, icons */
}

/* Main Chat Window */
div.ChatDivs {
  white-space: normal;
  display: flex !important;
  flex-direction: column;
  gap: var(--ACZ-margin-1);
  overflow: auto !important;
  align-items: flex-end;
  font-size: var(--ACZ-font-size-chats);
}
div.ChatDivs > div:first-child {
  margin-top: auto;
}

/* Chat input textarea */
textarea.ChatMemos {
  border-radius: var(--ACZ-border-radius-3);
  border: 1px solid var(--ACZ-color-5);
  padding: 5px;
  resize: vertical !important;
  field-sizing: content;
  min-height: var(--ACZ-elem-height-4);
  max-height: 500px;
  font-size: var(--ACZ-font-size-chats);
  overflow: auto !important;
}
div.ChatDivs:focus,
textarea.ChatMemos:focus {
  outline: 0px !important;
  box-shadow: none !important;
}

/* fiddle with Scrollbars */
div.ChatDivs::-webkit-scrollbar-track {
  border-top-right-radius: var(--ACZ-scroll-radius-1);
  border-bottom-right-radius: var(--ACZ-scroll-radius-1);
}

/* Chat History and Send buttons */
#PCChats  div.PageBlank > div.ToolHeader > button {
  max-height: 500px;
}

/* Everything to do with Chat Bubbles */

/* This is the main container for all Bubbles */
div.ChatDivs > .Bubble {
  display: flex;
  position: relative;
  width: 100%;
  background: none !important;
  border: none !important;
  opacity: 0;
  max-height: 0%;
  transition: var(--ACZ-transition-std);
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  flex-wrap: wrap;
}

/* For the AI side, we've got four stanzas to work with
** - the main conversation
** - the arrow on the left
** - the icon on the left
** - the text below the bubble
** Note that this is also controlled with the UI gauge */
div.ChatDivs > .Bubble > .AIBubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  justify-content: center;
  transition: var(--ACZ-transition-std);
  font-size: var(--ACZ-font-size-chats);
  padding: var(--ACZ-margin-2);
  background: var(--ACZ-color-5);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-3);
  color: var(--ACZ-color-input);
  max-width: 80%;
  width: auto;
  white-space: pre-wrap;
}
div.ChatDivs > .Bubble > .AIEngine {
  width: calc(3 * var(--ACZ-font-size-chats));
  height: calc(3 * var(--ACZ-font-size-chats));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ACZ-color-4);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-3);
  max-height: var(--ACZ-Chats-Height-1);
  opacity: var(--ACZ-Chats-Opacity-1);
  display: var(--ACZ-Chats-Display-1);
  margin-right: 11px;
  padding: 3px;
  transition: none;
  font-size: calc(var(--ACZ-font-size-chats) + 2px);
  color: var(--ACZ-color-1);
}
div.ChatDivs > .Bubble > .AIEngine > svg,
div.ChatDivs > .Bubble > .AIEngine > img,
div.ChatDivs > .Bubble > .AIEngine > i {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white);
}
div.ChatDivs > .Bubble > .AIEngine:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border: 12px solid;
  border-color: transparent var(--ACZ-color-7) transparent transparent;
  left: calc(3 * var(--ACZ-font-size-chats) - 12px);
  top: calc((3* var(--ACZ-font-size-chats) - 24px) / 2);
  z-index: 1;
}
div.ChatDivs > .Bubble > .AIEngine:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border: 12px solid;
  border-color: transparent var(--ACZ-color-5) transparent transparent;
  left: calc(3 * var(--ACZ-font-size-chats) - 11px);
  top: calc((3* var(--ACZ-font-size-chats) - 24px) / 2);
  z-index: 2;
}
div.ChatDivs > .Bubble > .AIInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 1px;
  margin-left: calc(3 * var(--ACZ-font-size-chats) + 18px);
  margin-bottom: var(--ACZ-margin-2);
  font-size: var(--ACZ-font-size-chats2);
  color: var(--ACZ-color-11);
  transition: var(--ACZ-transition-std);
  max-height: var(--ACZ-Chats-Height-1);
  opacity: var(--ACZ-Chats-Opacity-1);
  display: var(--ACZ-Chats-Display-1);
}

/* Same deal here for the human side of the conversation
** - the main conversation
** - the arrow on the right
** - the icon on the right
** - the text below the bubble
** Note that this is also controlled with the UI gauge */
div.ChatDivs > .Bubble > .HumanBubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
  font-size: var(--ACZ-font-size-chats);
  padding: var(--ACZ-margin-2);
  background: var(--ACZ-color-3);
  color: var(--ACZ-color-input);
  border-radius: var(--ACZ-border-radius-3);
  border: var(--ACZ-border-1);
  max-width: 80%;
  margin-left: auto;
  width: auto;
  white-space: pre-wrap;
  transition: var(--ACZ-transition-std);
}
div.ChatDivs > .Bubble > .Human {
  width: calc(3 * var(--ACZ-font-size-chats));
  height: calc(3 * var(--ACZ-font-size-chats));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ACZ-color-4);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-3);
  max-height: var(--ACZ-Chats-Height-1);
  opacity: var(--ACZ-Chats-Opacity-1);
  display: var(--ACZ-Chats-Display-1);
  margin-left: 11px;
  padding: 3px;
  transition: none;
  color: var(--ACZ-color-1);
}
div.ChatDivs > .Bubble > .Human:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border: 12px solid;
  border-color: transparent transparent transparent var(--ACZ-color-7);
  right: calc(3 * var(--ACZ-font-size-chats) - 12px);
  top: calc((3* var(--ACZ-font-size-chats) - 24px) / 2);
  z-index: 1;
}
div.ChatDivs > .Bubble > .Human:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border: 12px solid;
  border-color: transparent transparent transparent var(--ACZ-color-3);
  right: calc(3 * var(--ACZ-font-size-chats) - 11px);
  top: calc((3* var(--ACZ-font-size-chats) - 24px) / 2);
  z-index: 2;
}
div.ChatDivs > .Bubble > .ChatInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 1px;
  margin-right: calc(3 * var(--ACZ-font-size-chats) + 18px);
  margin-bottom: var(--ACZ-margin-2);
  font-size: var(--ACZ-font-size-chats2);
  color: var(--ACZ-color-11);
  transition: var(--ACZ-transition-std);
  max-height: var(--ACZ-Chats-Height-1);
  opacity: var(--ACZ-Chats-Opacity-1);
  display: var(--ACZ-Chats-Display-1);
}


/* System bubbles are little easier because there's no arrow or icon
** - the main conversation
** - the text below the bubble
** Note that this is also controlled with the UI gauge */
div.ChatDivs > .Bubble > .SystemBubble {
  font-size: var(--ACZ-font-size-chats);
  overflow: hidden;
  padding: var(--ACZ-margin-2);
  background: var(--ACZ-color-9);
  color: var(--ACZ-color-14);
  border-radius: var(--ACZ-border-radius-3);
  border: var(--ACZ-border-1);
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  transition: var(--ACZ-transition-std);
  max-height: var(--ACZ-Chats-Height-2);
  opacity: var(--ACZ-Chats-Opacity-2);
  display: var(--ACZ-Chats-Display-2);
}
div.ChatDivs > .Bubble > .SystemTimestamp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  margin-bottom: var(--ACZ-margin-2);
  overflow:hidden;
  font-size: var(--ACZ-font-size-chats2);
  color: var(--ACZ-color-11);
  transition: var(--ACZ-transition-std);
  max-height: var(--ACZ-Chats-Height-2);
  opacity: var(--ACZ-Chats-Opacity-2);
  display: var(--ACZ-Chats-Display-2);
}

/* This is used to style code blocks that use <pre> tags */
div.ChatDivs pre {
  display: block;
  margin-top: var(--ACZ-margin-1) !important;
  margin-bottom: var(--ACZ-margin-1) !important;
  overflow: auto;
  font-size: var(--ACZ-font-size-2);
  font-family: var(--ACZ-font-family-mono);
  color: var(--ACZ-color-input);
  background: var(--ACZ-color-14);
  padding: var(--ACZ-margin-2);
  border-radius: var(--ACZ-border-radius-2);
  filter: var(--ACZ-shadow-2);
  width: 100%;
}
div.ChatDivs code {
  color: var(--ACZ-color-9);
  font-family: var(--ACZ-font-family-mono);
}

/* Chat Engine Dropdown */
#btnChatModelBtn > svg {
  transition: var(--ACZ-transition-std);
}
#divChatEnginesHolder {
  display: none;
  opacity: 0;
  transition: var(--ACZ-transition-std);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-2);
  background: var(--ACZ-color-7);
  overflow: hidden;
  min-width: 219px; /* not sure where this 6px discrepancie arises */
  max-width: 744px;
  height: 0px;
}
#divChatEngines {
  width: 100% !important;
}