:root {
  --bg-color: #070C29;

  --bg-color-mono-1: #1C2453;
  --bg-color-mono-2: #3F497E;
  --bg-color-mono-3: #7179A8;
  --bg-color-mono-4: #B0B6D3;

  --bg-brand:  #BC14A5;
;
  --bg-brand-mono-1: #20C07D;
  --bg-brand-mono-2: #32966C;
  --bg-brand-mono-3: #366B55;
  --bg-brand-mono-4: #2B4138;
}

.main-wrapper .main-content {
  min-height: calc(100vh - 48px - 54px);
}


.chat-container {
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg);
  color-scheme: dark;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  /* - header - footer - breadcrumbs - whatever it was missing */
  height: calc(100vh - 70px - 54px - 30px - 98px);
}


.info-container {
  overflow-y: auto;
  /* - header - footer - breadcrumbs - whatever it was missing */
  max-height: calc(100vh - 70px - 54px - 30px - 66px);
  direction: rtl;
  color-scheme: dark;
}

.info-container * {
  direction: ltr;
}

@media (max-width: 991px) {
  .info-container {
    overflow-y: visible;
    max-height: unset;
  }

  .chat-container {
    overflow-y: visible;
    height: unset;
  }
}

.msg-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;

  overflow-y: auto;
}

.msg-container .msg {
  border-radius: 8px;
  padding: 6px 10px;
  margin: 8px 0;
  max-width: 85%;
  word-wrap: break-word;
}

.assistant-msg {
  background-color: var(--bg-color-mono-2);
  align-self: flex-start;
  border-bottom-left-radius: 0 !important;
}

.system-prompt-msg {
  background-color: var(--bg-color-mono-1);
  align-self:center;
  max-width: 70%;
}
.error-prompt-msg {
  background-color: var(--bg-color-mono-1);
  align-self: center;
  max-width: 70%;
  border-left: 1px solid var(--bs-danger);
  border-right: 1px solid var(--bs-danger);
}

.assistant-msg .name {
  font-weight: bold;
}

.assistant-msg em {
  color: var(--bs-gray-500);
}

.user-msg {
  background-color: var(--bg-brand);
  color: var(--bg-color);
  align-self: flex-end;

  border-bottom-right-radius: 0 !important;
}

.user-msg .name {
  font-weight: bold;
}

.user-msg em {
  color: var(--bg-color-mono-2);
}

.chat-input-container {
  display: flex;
  border-top: 2px solid var(--bg-color);
}

.background-color-mono-1 {
  background-color: var(--bg-color-mono-1);
}

.chat-input {
  width: 100%;
  border: none;
  border-bottom-left-radius: 8px;
  padding: 10px;
  background-color: var(--bg-color-mono-1);
  color: var(--bg-color-mono-4);
  resize: none;
  outline: none;
}

.chat-send-btn {
  border: none;
  background-color: var(--bg-color-mono-2);
  color: var(--bg-color);
  padding: 10px 16px;
  cursor: pointer;
  border-bottom-right-radius: 8px;
}


.dot-loader {
  --color: #000;
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, var(--color) 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}

@keyframes l7 {
  33% {
    background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%
  }

  50% {
    background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%
  }

  66% {
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%
  }
}


.pulse {
  --pulse-color: #60a29066;
  --pulse-fade-color: #60a29000;

  box-shadow: 0 0 0 #60a29066;
  animation: pulse 1.5s;
}

.pulse-danger {
  --pulse-color: #ff5b5b66;
  --pulse-fade-color: #ff5b5b00;
}

.pulse-bright-danger {
  --pulse-color: #ff5b5b;
  --pulse-fade-color: #ff5b5b00;
}

.pulse-info {
  --pulse-color: #1286a466;
  --pulse-fade-color: #1286a400;
}

.pulse-white {
  --pulse-color: #ffffffaa;
  --pulse-fade-color: #ffffff00;
}

.pulse-repeat {
  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--pulse-color);
  }

  70% {
    -webkit-box-shadow: 0 0 0 10px var(--pulse-fade-color);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 var(--pulse-fade-color);
  }
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 var(--pulse-color);
    box-shadow: 0 0 0 0 var(--pulse-color);
  }

  70% {
    -moz-box-shadow: 0 0 0 10px var(--pulse-fade-color);
    box-shadow: 0 0 0 10px var(--pulse-fade-color);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 var(--pulse-fade-color);
    box-shadow: 0 0 0 0 var(--pulse-fade-color);
  }
}

.btn-brand {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--bg-brand);
  --bs-btn-border-color: var(--bg-brand);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bg-brand-mono-1);
  --bs-btn-hover-border-color: var(--bg-brand-mono-1);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bg-brand-mono-1);
  --bs-btn-active-border-color: var(--bg-brand-mono-1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--bg-brand);
  --bs-btn-disabled-border-color: var(--bg-brand);
}

.tooltip{
  --bs-tooltip-color: var(--bg-brand);
  --bs-tooltip-bg: var(--bg-color-mono-1);
  --bs-tooltip-opacity: 1;
}

[data-bs-theme=blue-theme] body .form-control:read-only{
  background-color: var(--bs-disabled-bg);
}