CSS/chat_style.css

.gradio-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* Occupy full height of the container */
}

.chat-box {
  flex-grow: 1; /* Allow the chat box to expand and fill available space */
  overflow-y: auto; /* Add vertical scroll if content overflows */
}

/* Media Queries for Different Screen Sizes */
@media (max-width: 768px) {
  /* Styles for tablets and smaller screens */
  .chat-container {
    flex-direction: column; /* Stack chat boxes vertically */
  }
}

@media (max-width: 480px) {
  /* Styles for mobile phones */
  /* Add more specific styles as needed */
}