/* vars */
:root {
  --color-blue: #0d6efd;
  --color-red: #dc3545;
  --color-gray: #cccccc;
}

/* Base Styles */
.container {
  max-width: 800px;
}

.logout-btn {
  display: block;
  margin-left: auto;
  width: 140px;
}

/* Form Styles */
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

textarea.form-control {
  height: 100px;
  resize: none;
}

.error-message,
#error-api-key {
  color: var(--color-red);
  font-size: 0.875em;
}

.error-message {
  line-height: 1;
  margin-bottom: -0.875em;
}

#error-api-key {
  display: none;
}

/* Chat Styles */
.main-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 94px);
}

.name-title {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 0;
}

.bot-img {
  width: 30px;
  height: 30px;
  margin-top: 15px;
  margin-bottom: 0;
}

.message-text {
  margin-top: 0;
  margin-bottom: 5px;
}

.message-text--bot, .name-title--bot {
  color: var(--color-blue);
}

form#create-text-form {
  margin-bottom: 48px;
}

.chat-box {
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--color-gray);
  margin-bottom: 10px;
  padding: 10px;
}

.loader {
  margin-top: 15px;
  width: 30px;
  aspect-ratio: 4;
  --_g: no-repeat
    radial-gradient(circle closest-side, var(--color-blue) 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%;
  }
  40% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
  }
  50% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
  }
}