.chat-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  max-width: 600px;
}

.chat-messages {
  height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
  font-family: monospace;
}

.chat-input {
  display: flex;
  gap: 5px;
  align-items: center; /* Align items vertically */
}

.chat-input input {
  flex: 1;
  padding: 8px 12px; /* Increased padding */
  border: 1px solid #aaa;
  border-radius: 4px;
  min-width: 300px; /* Minimum width */
  width: 100%; /* Added to ensure input takes available space */
  font-size: 14px; /* Readable font size */
  line-height: 1.5; /* Better line height */
}

.chat-input input::placeholder {
  opacity: 0.7; /* Make placeholder more visible */
  color: #666; /* Darker placeholder color */
}

.chat-input button {
  background: #0073aa;
  color: white;
  border: none;
  padding: 8px 16px; /* Increased padding */
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; /* Prevent button text from wrapping */
}

.user {
  color: blue;
}

.assistant {
  color: green;
}