/* Add additional styles here */
 body {
  background: url('chatbot.jpg') center/cover no-repeat;
}

.message-container {
  max-height: 400px;
  overflow-y: auto;
}

.message {
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  max-width: 70%;
}

.user-message {
  background-color: #0084FF;
  color: #26721b;
  align-self: flex-end;
}

.feedback-message {
  background-color: #F0F0F0;
  color: #333;
  align-self: flex-start;
}

.message-content {
    background-color: #F0F0F0; /* Set your desired background color */
    border-radius: 8px;
    padding: 8px;
    display: inline-block; /* Ensure the background covers only the content width */
}

.loader {
  text-align: left;
}
.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 8px;
  animation: loader 0.8s infinite alternate;
}
.loader span:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {
  animation-delay: 0.6s;
}
@keyframes loader {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}