/* eveai_chat.css */
:root {
  --user-message-bg: #292929; /* Default user message background color */
  --bot-message-bg: #1e1e1e; /* Default bot message background color */
  --chat-bg: #1e1e1e; /* Default chat background color */
  --status-line-color: #e9e9e9; /* Color for the status line text */
  --status-line-bg: #1e1e1e; /* Background color for the status line */
  --status-line-height: 30px; /* Fixed height for the status line */

  --algorithm-color-rag-tenant: #0f0; /* Green for RAG_TENANT */
  --algorithm-color-rag-wikipedia: #00f; /* Blue for RAG_WIKIPEDIA */
  --algorithm-color-rag-google: #ff0; /* Yellow for RAG_GOOGLE */
  --algorithm-color-llm: #800080; /* Purple for RAG_LLM */

  /*--font-family: 'Arial, sans-serif'; !* Default font family *!*/
  --font-family: 'Segoe UI, Roboto, Cantarell, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol';
  --font-color: #e9e9e9; /* Default font color */
  --user-message-font-color: #e9e9e9; /* User message font color */
  --bot-message-font-color: #e9e9e9; /* Bot message font color */
  --input-bg: #292929; /* Input background color */
  --input-border: #ccc; /* Input border color */
  --input-text-color: #e9e9e9; /* Input text color */
  --button-color: #007bff; /* Button text color */

  /* Variables for hyperlink backgrounds */
  --link-bg: #1e1e1e; /* Default background color for hyperlinks */
  --link-hover-bg: #1e1e1e; /* Background color on hover for hyperlinks */
  --link-color: #dec981; /* Default text color for hyperlinks */
  --link-hover-color: #D68F53; /* Text color on hover for hyperlinks */

  /* New scrollbar variables */
  --scrollbar-bg: #292929; /* Background color for the scrollbar track */
  --scrollbar-thumb: #4b4b4b; /* Color for the scrollbar thumb */
  --scrollbar-thumb-hover: #dec981; /* Color for the thumb on hover */
  --scrollbar-thumb-active: #D68F53; /* Color for the thumb when active (dragged) */

  /* Thumb colors */
  --thumb-icon-outlined: #4b4b4b;
  --thumb-icon-filled: #e9e9e9;

  /* Connection Status colors */
  --status-connected-color: #28a745; /* Green color for connected status */
  --status-disconnected-color: #ffc107; /* Orange color for disconnected status */
}

/* Connection status styles */
.connection-status-icon {
    vertical-align: middle;
    font-size: 24px;
    margin-right: 8px;
}

.status-connected {
    color: var(--status-connected-color);
}

.status-disconnected {
    color: var(--status-disconnected-color);
}

/* Custom scrollbar styles */
.messages-area::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

.messages-area::-webkit-scrollbar-track {
  background: var(--scrollbar-bg); /* Background color for the track */
}

.messages-area::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb); /* Color of the thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
  border: 3px solid var(--scrollbar-bg); /* Space around the thumb */
}

.messages-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover); /* Color when hovering over the thumb */
}

.messages-area::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active); /* Color when active (dragging) */
}

/* For Firefox */
.messages-area {
  scrollbar-width: thin; /* Make scrollbar thinner */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Thumb and track colors */
}

/* General Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 75vh;
  /*max-height: 100vh;*/
  max-width: 600px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--chat-bg);
  font-family: var(--font-family); /* Apply the default font family */
  color: var(--font-color); /* Apply the default font color */
}

.disclaimer {
  font-size: 0.7em;
  text-align: right;
  padding: 5px 20px 5px 5px;
  margin-bottom: 5px;
}

.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: var(--bot-message-bg);
}

.message {
  max-width: 90%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 15px;
  font-size: 1rem;
}

.message.user {
  margin-left: auto;
  background-color: var(--user-message-bg);
  color: var(--user-message-font-color); /* Apply user message font color */
}

.message.bot {
  background-color: var(--bot-message-bg);
  color: var(--bot-message-font-color); /* Apply bot message font color */
}

.message-icons {
  display: flex;
  align-items: center;
}

/* Scoped styles for thumb icons */
.thumb-icon.outlined {
  color: var(--thumb-icon-outlined); /* Color for outlined state */
}

.thumb-icon.filled {
  color: var(--thumb-icon-filled); /* Color for filled state */
}

/* Default styles for material icons */
.material-icons {
  font-size: 24px;
  vertical-align: middle;
  cursor: pointer;
}

.question-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--user-message-bg);
  padding: 10px;
}

.language-select-container {
  width: 100%;
  margin-bottom: 10px; /* Spacing between the dropdown and the textarea */
}

.language-select {
  width: 100%;
  margin-bottom: 5px; /* Space between the dropdown and the send button */
  padding: 8px;
  border-radius: 5px;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: var(--input-text-color);
  font-size: 1rem;
}

.question-area textarea {
  flex: 1;
  border: none;
  padding: 10px;
  border-radius: 15px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text-color);
  font-family: var(--font-family); /* Apply the default font family */
  font-size: 1rem;
  resize: vertical;
  min-height: 60px;
  max-height: 150px;
  overflow-y: auto;
  margin-right: 10px; /* Space between textarea and right-side container */
}

.right-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.question-area button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--button-color);
}

/* Styles for the send icon */
.send-icon {
  font-size: 24px;
  color: var(--button-color);
  cursor: pointer;
}

.send-icon.disabled {
  color: grey; /* Color for the disabled state */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

/* New CSS for the status-line */
.status-line {
  height: var(--status-line-height); /* Fixed height for the status line */
  padding: 5px 10px;
  background-color: var(--status-line-bg); /* Background color */
  color: var(--status-line-color); /* Text color */
  font-size: 0.9rem; /* Slightly smaller font size */
  text-align: center; /* Centered text */
  border-top: 1px solid #ccc; /* Subtle top border */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Algorithm-specific colors for fingerprint icon */
.fingerprint-rag-tenant {
  color: var(--algorithm-color-rag-tenant);
}

.fingerprint-rag-wikipedia {
  color: var(--algorithm-color-rag-wikipedia);
}

.fingerprint-rag-google {
  color: var(--algorithm-color-rag-google);
}

.fingerprint-llm {
  color: var(--algorithm-color-llm);
}

/* Styling for citation links */
.citations a {
  background-color: var(--link-bg); /* Apply default background color */
  color: var(--link-color); /* Apply default link color */
  padding: 2px 4px; /* Add padding for better appearance */
  border-radius: 3px; /* Add slight rounding for a modern look */
  text-decoration: none; /* Remove default underline */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.citations a:hover {
  background-color: var(--link-hover-bg); /* Background color on hover */
  color: var(--link-hover-color); /* Text color on hover */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  .chat-container {
    max-width: 90%; /* Reduce max width on smaller screens */
  }
}

@media (max-width: 480px) {
  .chat-container {
    max-width: 95%; /* Further reduce max width on very small screens */
  }

  .question-area input {
    font-size: 0.9rem; /* Adjust input font size for smaller screens */
  }

  .status-line {
    font-size: 0.8rem; /* Adjust status line font size for smaller screens */
  }
}