:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --neon: #c0fe31;
  --neon_supra: #93FF1B;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --dark-light: #393F46;
  --main-bg-color: #343a40;
  --receiver-bg-color: #F5F5F5;
  --sender-bg-color: #F5F5F5;
  --top-section: #343a40;
  font-family: 'Montserrat', sans-serif;
}

/* Adjust the font size of h3 to fit on mobile devices */
h3 {
  font-size: 55px;
  font-weight: bold;
  color: var(--neon_supra);
  text-shadow: 1px 1px 1px #555;
}


/* Adjust logo container size*/
.logo-container {
    display: flex;
    align-items: center;
}

/* Adjust logo size*/
.logo {
  width: 70px; /* Adjust the width as needed */
  height: 70px; /* Maintain aspect ratio */
  margin-right: 10px; /* Add space between the logo and text */
}

.top-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  margin: 0;
}
/* Adjust the top and bottom section heights */
.top-section {
  padding: 1% 0;
}

.bottom-section {
  padding-top: 0.5%;
  padding-left: 3%; /* Increase the left padding */
  padding-right: 2%; /* Adjust the right padding if necessary */
  margin-bottom: 1%;
}

/* Adjust the margin and padding of the middle section */
.middle-section {
  margin-top: 3%;
  margin-bottom: 2%;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 3%; /* Increase the left margin */
  margin-right: 3%; /* Increase the right margin */
}

/* Add styles for the bottom banner section */
.banner-section {
  background-color: var(--dark);
  padding: 1% 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.banner-section {
  background-color: var(--dark);
  padding: 1% 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
  display: flex; /* Add display:flex */
  justify-content: flex-start; /* Add justify-content:flex-start */
  align-items: center; /* Add align-items:center */
}

.banner-section p {
  margin: 0;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

/* Adjust the padding of sender and receiver elements */
.sender,
.receiver {
  padding: 1% !important;
}

/* Remove the custom scrollbar styles */
.text-wrap::-webkit-scrollbar,
.middle-section::-webkit-scrollbar {
  display: none;
}

.text-wrap,
.middle-section {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.btn {
  background-color: main-bg-color; /* Change the background color to green */
  color: #93FF1B; /* Change the text color to white */
}

/* Adjust the code block styles for mobile */
@media (max-width: 576px) {
  pre[class*="language-"] {
    padding-left: 0;
  }
  pre[class*="language-"]::before {
    display: none;
  }
}

/* Adjust the height and overflow of the message container */
.message-container {
  height: auto;
  max-height: none; /* Add a max-height to limit the container height */
  overflow: hidden;
  resize:vertical;
}

/* Adjust the keyframes for thinking animation */
@keyframes thinking {
  0% {
    content: "...";
  }
  20% {
    content: ".. .";
  }
  40% {
    content: ". .";
  }
  60% {
    content: " . .";
  }
  80% {
    content: "  . .";
  }
  100% {
    content: "   . .";
  }
}

/* Adjust the keyframes for typewriter animation */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Adjust the blink animation */
@keyframes blink {
  from,
  to {
    opacity: 1.0;
  }
  50% {
    opacity: 0.3;
  }
}

/* Remove the animation styles for thinking and blink in the .thinking class */
.thinking p {
  animation: none;
}

/* Add the animation styles to the .thinking::after pseudo-element */
.thinking::after {
  display: inline-block;
  content: "...";
  animation: thinking 1.5s infinite;
}

/* Adjust the margin for the .thinking class */
.thinking {
  margin-left: 1%; /* Increase the left margin */
  margin-right: 1%; /* Increase the right margin */
}