@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  background-color: #121212;
  color: #ffffff;
  overflow: auto; /* Ensure the body scrolls */
  display: flex;
  flex-direction: column; /* Arrange items vertically */
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* Ensure the chat container takes up the full height of the screen */
html,
body {
  height: 100%;
  margin: 0;
}

#chatContainer {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

#chatLog {
  flex: 1; /* Takes up all available space above the input field */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  overflow-y: auto;
  background-color: #1e1e1e; /* Background color for chat area */
}

.user-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1e1e1e;
  width: 100%;
  box-sizing: border-box; /* Ensure padding is included in width */
}

.user-input input {
  flex: 1;
  border-radius: 100px;
  padding: 10px;
  border: 1px transparent;
  outline: 1px solid #333; /* Simulate the border look */
  background-color: #121212;
  color: white;
  margin-right: 10px; /* Space between input and button */
  margin-left: 12px;
  box-sizing: border-box;
}

#userInputContainer {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff; /* Background color for input area */
}

#userInput {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.send-button {
  background-color: #007bff;
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  margin-right: 12px;
}

#sendButton {
  margin-left: 10px;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff; /* Button background color */
  color: #fff; /* Button text color */
  cursor: pointer;
}

.new-message {
  animation: fadeIn 0.3s ease-out;
}

.user-message {
  animation: fadeIn 0.3s ease-out;
  align-self: flex-end;
  background-color: #2c2c2c;
  color: white;
  border-radius: 15px;
  padding: 10px;
  margin: 5px 0;
  max-width: 55%;
  word-wrap: break-word;
}

.ai-message {
  animation: fadeIn 0.3s ease-out;
  align-self: flex-start;
  background-color: #333333;
  color: #fff;
  border-radius: 15px;
  padding: 10px;
  margin: 5px 0;
  max-width: 90%;
  word-wrap: break-word;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  color: #888;
}

.typing-indicator span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #888;
  animation: typing 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Animation for typing dots */
@keyframes typing {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.top-bar {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
  background-color: #1e1e1e;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0;
}

.top-bar-logo i {
  display: inline-flex; /* Ensure alignment */
  justify-content: center; /* Center icon horizontally */
  align-items: center; /* Center icon vertically */
  width: 40px; /* Set circle size */
  height: 40px; /* Same as width for a circle */
  border-radius: 50%; /* Makes it circular */
  background-color: #2e2e2e; /* Circle background color */
  color: #fff; /* Icon color */
  font-size: 20px; /* Icon size */
}