/* ChatWindow.css */

.chat-container {
  display: flex;
  flex-direction: column;
  height: 40vh; /* Adjust height as needed */
  width: 1000px;
  border: 3px solid #ccc;
  border-radius: 8px;
  background-color: #242526;
  margin-top: 1vw;
  margin-bottom: 1vw;
  position: relative;
}

.chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.chat-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.message-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  align-items: flex-start;
  overflow-y: auto;
  height: 100%;
}

.message {
  margin: 5px;
  padding: 10px;
  border-radius: 15px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 97%;
}

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

.system-message {
  background-color: #3e4042;
  align-self: flex-start;
}

.input-container {
  display: flex;
  padding: 10px;
  background-color: #242526;
  width: 100%; /* Use width 100% to fit the container */
  box-sizing: border-box;
  border-top: 3px solid #ccc; /* Add a border-top to separate the input */
  border-radius: 0 0 8px 8px; /* Adjust the border radius */
  margin-top: 10px; /* Add margin-top for spacing */
}

.message-input {
  color: white;
  background-color: #1e1e1e;
  font-family: "Roboto", sans-serif;
  flex: 1;
  margin-right: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}

.send-button {
  background-color: #4caf50;
  color: #fff;
  border-radius: 8px;
  border: none;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

.send-button:hover {
  background-color: #3e8e41;
}

.reset-button-container {
  text-align: center;
  margin-bottom: 10px;
}

.reset-button {
  color: white;
  background-color: #3e4042;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

.reset-button:hover {
  background-color: #ff0000;
}

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

.knowledge-adder {
  display: flex;
  flex-direction: column;
  width: 1000px; /* Same width as .chat-container */
  border: 3px solid #ccc;
  border-radius: 8px;
  background-color: #242526;
  margin-top: 1vw; /* Same margin as .chat-container */
  margin-bottom: 1vw; /* Same margin as .chat-container */
  position: relative;
  padding: 10px; /* Add padding */
  box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

.knowledge-input {
  color: white;
  background-color: #1e1e1e;
  font-family: "Roboto", sans-serif;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  flex: 1;
  margin-bottom: 10px; /* Add space between input and button */
  min-height: 100px; /* Adjust as needed */
  overflow-y: auto; /* Allow vertical scrolling */
}

.submit-button {
  background-color: #4caf50;
  color: #fff;
  border-radius: 8px;
  border: none;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
  align-self: flex-end; /* Align the button to the right */
}

.submit-button:hover {
  background-color: #3e8e41;
}
