@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
:root {
  /* Define Font Variables */
  --gsd-font-family: "JetBrains Mono", monospace;
  /* Define Colors Variables */
  --gsd-txt-color: #ccc;
  --gsd-txt-color-light: #fff;
  --gsd-txt-color-dark: #999;
  --gsd-txt-color-darker: #666;
  --gsd-bg-color: #111;
  --gsd-bg-color-light: #222;
  --gsd-bg-color-lightest: #333;
  --gsd-bg-color-dark: #050505;
  --gsd-bg-color-darkest: #000;
  --gsd-bg-color-darkest-transparent: rgba(0, 0, 0, 0.5);
  --gsd-scrollbar-thumb-color: rgba(102, 105, 153, 0.25);
  --gsd-aiProcessStatus-color: rgba(255, 255, 255, 0.60);
  --gsd-aiProcessStatus-bg-color: rgba(102, 105, 153, 0.90);
  --gsd-highlight-color: #009933; /* Gothic Green */
  --gsd-highlight-color: #d63384; /* Flamingo Pink */
  --gsd-highlight-color: #0066AA; /* Gothic Blue */
  --gsd-highlight-color: #990000; /* Vampire Red */
  --gsd-highlight-color: rgb(102, 105, 153); /* Gothic Purple */
}
body { width: 100vw; height: 100vh; margin:0; padding: 0; color: var(--gsd-txt-color); font-family: 'JetBrains Mono', monospace; font-size: 1em; -ms-overflow-style: none; scroll-behavior: smooth; overflow-y: hidden; overflow-x: hidden; }
body::-webkit-scrollbar { width: 0.5em; }
body::-webkit-scrollbar-thumb { background-color: var(--gsd-scrollbar-thumb-color); border-radius: 0.25em; }
body::-webkit-scrollbar-track { background-color: transparent; }
@-moz-document url-prefix() {
  body { scrollbar-width: thin; scrollbar-color: var(--gsd-scrollbar-thumb-color) transparent; }
}
.chat-container { width: 100vw; height: 100vh; margin:0; padding: 0; color: var(--gsd-txt-color); font-family: 'JetBrains Mono', monospace; -ms-overflow-style: none; scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; text-align: justify; text-justify: inter-word; hyphens: auto; background: var(--gsd-bg-color-darkest-transparent) url('https://gothicdruids.com/images/app/purple/background.webp') no-repeat bottom center fixed; background-size: cover; }
.chat-container::-webkit-scrollbar { width: 0.5em; }
.chat-container::-webkit-scrollbar-thumb { background-color: var(--gsd-scrollbar-thumb-color); border-radius: 0.25em; }
.chat-container::-webkit-scrollbar-track { background-color: transparent; }
@-moz-document url-prefix() {
  .chat-container { scrollbar-width: thin; scrollbar-color: var(--gsd-scrollbar-thumb-color) transparent; }
}
.chat-div { margin:0; padding: 1.5em; }
h1.app-title { color: var(--gsd-highlight-color); font-size: 2em; font-weight: thin; margin: 0 0 0 0; }
h2.app-subtitle { color: var(--gsd-txt-color-dark); font-size: 0.8em; font-weight: thin; font-style: italic; margin: 0 0 1.5em 0; }
hr { border-color: var(--gsd-bg-color-light); margin: 0; }
em { color: var(--gsd-txt-color-dark); }
strong { color: var(--gsd-highlight-color); }
img { width: 100%; height: auto; margin: 0 0 0 0; }
.message-content > img { margin: 1em 0 1em 0; }
pre { width: calc(100% - 2em); overflow: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 2em 0 2em 1em; }
pre::-webkit-scrollbar { display: none; }
code { font-size: 1em; font-family: 'JetBrains Mono', monospace; color: var(--gsd-highlight-color); }
pre code { font-size: 0.8em; font-family: 'JetBrains Mono', monospace; background-color: transparent; color: var(--gsd-highlight-color); display: contents; }
pre code.hljs { font-size: 0.8em; background-color: transparent; color: var(--gsd-highlight-color); display: contents; }
.message { background-color:transparent; padding: 1em 0 1em 0;}
.message img { margin: 1em 0 1em 0; }
.message-markdown { display: none; }
.message-header { display: flex; align-items: center; justify-content: flex-start; margin: 0 0 1em 0; }
.message-header-text { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; }
.message-header-icon { width: 3em; margin: 0 1em 0 0; display: flex; align-items: center; justify-content: flex-start; }
.message-header-icon > img { margin: 0 0 0 -0.5em; }
.thinking-icon { position: relative; top: -1em; left: -0.5em; cursor: default; }
.message-header-username { font-weight: bold; font-size: 1.2em; cursor: default; }
.message-header-timestamp { font-size: 0.8em; color: var(--gsd-txt-color-dark); cursor: default; }
.thinking { display: none; margin: 1em 0 1em 0; }
.thinking-content { color: var(--gsd-txt-color-dark); cursor: default; }
#aiProcessStatus { font-size: 0.8em; color: var(--gsd-aiProcessStatus-color); display: flex; align-items: center; justify-content: flex-end; margin: 0 0.5em 0 0.8em; cursor: default; }
#aiProcessStatusDiv { background-color: var(--gsd-aiProcessStatus-bg-color); outline: 1px solid var(--gsd-aiProcessStatus-bg-color); border-radius: 3em; padding: 0.3em; position: fixed; top: 1.5em; right: 1.5em; z-index: 666; display: none; align-items: center; justify-content: flex-end; }
#aiProcessStatusImg { transform: scaleX(-1); display: flex; align-items: center; justify-content: flex-end;  width: 1.5em; }
#aiProcessStatusImg > img { position: relative; top: -0.1em; margin: 0; }
.chat-input-padding { height: calc(100px - 26px); margin: 0; display: block; }
.chat-input-div { background-color: var(--gsd-bg-color); height: 240px; margin: 0; display: none; position: fixed; bottom: 0; right: 0; left: 0; padding: 24px 24px 100px 24px; z-index: 666; -ms-overflow-style: none; scroll-behavior: smooth; overflow-y: hidden; overflow-x: hidden; background: var(--gsd-bg-color-darkest-transparent) url('https://gothicdruids.com/images/app/purple/background.webp') no-repeat bottom center fixed; background-size: cover;}
.chat-input-div::-webkit-scrollbar { width: 0.5em; }
.chat-input-div::-webkit-scrollbar-thumb { background-color: var(--gsd-scrollbar-thumb-color); border-radius: 0.25em; }
.chat-input-div::-webkit-scrollbar-track { background-color: transparent; }
@-moz-document url-prefix() {
  .chat-input-div { scrollbar-width: thin; scrollbar-color: var(--gsd-scrollbar-thumb-color) transparent; }
}
.chat-input { height: 120px; overflow-y: auto; padding: 0; margin: 0; display: block; outline: none; border: none; background-color: transparent; color: var(--gsd-txt-color); overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
.chat-input-controls { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: absolute; top: -0.5em; right: 1em; }
.chat-input-controls > span { width: 2em; height: auto; margin: 0 0 0 0.25em; }
.chat-controls { display: flex; flex-direction: row; justify-content: center; align-items: center; position: fixed; z-index: 999; bottom: 0; width: 100%; height:100px; padding: 20px; }
.chat-controls-background { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; width: 100%; max-width: 300px; height: auto; background-color: var(--gsd-bg-color-darkest-transparent); border-radius: 50px; padding: 10px; }
.chat-controls-background > span { width: 40px; height: auto; }
.chat-controls-background > span > img { width: 100%; height: auto; }
.tts-player-div { display: none; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: fixed; bottom: 0; right: 0; left: 0; padding: 24px 24px 100px 24px; z-index: 666; -ms-overflow-style: none; scroll-behavior: smooth; overflow-y: hidden; overflow-x: hidden; }