/* style.css */

/* General Styles */
body {
  font-family: sans-serif;
}

#chat-window {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #ccc;
  height: 400px;
  overflow-y: scroll;
  padding: 10px;
}

.chat-message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.chat-message.user {
  background-color: #eee;
  text-align: right;
}

.chat-message.bot {
  background-color: #ccf;
}

#input-area {
  width: 80%;
  margin: 10px auto;
  display: flex;
}

#user-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#send-button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#menu {
  width: 80%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#menu button {
  margin: 5px;
  padding: 10px;
  background-color: #eee;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#content-area {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Landing Page Chatbot Styles */
#landing-page-chatbot {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
}

.chatbot-container {
  /* Styles for the chatbot container */
}

.chatbot-header {
  /* Styles for the chatbot header */
}

.chatbot-body {
  /* Styles for the chatbot body */
}

.chatbot-message {
  /* Styles for the chatbot messages */
  margin-bottom: 10px;
}

.chatbot-options button {
  /* Styles for the chatbot option buttons */
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #eee;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Other Styles */
#markdown-viewer {
  /* Styles for the Markdown viewer */
}

#knowledge-graph-visualization {
  /* Styles for the knowledge graph visualization */
}

#react-root {
  /* Styles for the React components */
}