/* style.css */
  :root {
    --primary-color: #4d4d4d;
    --background-color: #1e1e1e;
    --panel-background: #252526;
    --text-color: #d4d4d4;
    --border-color: #3c3c3c;
    --hover-color: #3a3a3a;
    --input-background: #333333;
    --user-message-bg: #3a3a3a;
    --bot-message-bg: #1e1e1e;
    --user-text-color: #fff;
    --bot-text-color: #d4d4d4;
  }
  
  body,
  html {
    height: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
  }


  
  .logout-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
  }
  
  .logout-btn:hover {
    background-color: var(--hover-color);
  }
  
  .navbar {
    background-color: var(--panel-background);
    padding: 10px;
  }
  
  .navbar-brand {
    color: white;
  }
  
  
  /* General styling to unify logo alignment */
  .container-fluid,
  .left-panel {
    padding-left: 0px;
    /* Ensures same left padding for both the navbar and the left panel */
  }
  
  /* Logo class (applies to all logos) */
  .logo {
    height: 40px;
    width: auto;
    margin-bottom: 0;
    vertical-align: middle;
  }
  
  
  /* Service card-specific adjustments */
  .left-panel .card-body {
    padding-left: 0;
    /* Ensure no extra padding inside the card-body */
  }
  
  
  .grafana-iframe {
    border: none;
    width: 100%;
    height: 100%;
    /* Adjust height dynamically */
    min-height: 200px;
    /* Define a minimum height */
    border-radius: 8px;
  }
  
  /* Add some responsiveness */
  @media (max-width: 992px) {
    .grafana-iframe {
      height: 250px;
    }
  }
  
  @media (max-width: 768px) {
    .grafana-iframe {
      height: 200px;
    }
  }
  
  .row {
    margin-bottom: 20px;
  }
  
  
  .card {
    background-color: var(--panel-background);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 8px;
  }
  
  
  .card-title {
    font-size: 20px;
    /* Slightly larger */
      margin-top: 10px; /* Space from the top of the card body */
      margin-bottom: 15px; /* Increase bottom margin if needed */
  }
  
  .card-text {
    font-size: 16px;
    /* Enhance readability */
  }
  
  .service-btn {
    margin-top: 10px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
  }
  
  .service-btn:hover {
    background-color: var(--hover-color);
  }
  
  .logo {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
  }
  
  .container-full {
    height: 100vh;
    display: flex;
  }
  
  .left-panel {
    background-color: var(--panel-background);
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    height: 100%;
  }
  
  .card-body {
    display: block;
    /* Stack elements vertically */
    text-align: left;
  }
  
  .left-panel h4 {
    margin-bottom: 20px;
    text-align: left;
  }
  
  /* Right panel (chatbot) */
  .right-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--panel-background);
    padding: 20px;
    height: 100%;
  }
  
  .right-panel-header {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
  }
  
  
  /* Chat message styles */
  .chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 75%;
    word-wrap: break-word;
  }
  
  .user-message {
    background-color: var(--user-message-bg);
    color: var(--user-text-color);
    margin-left: auto;
    justify-content: flex-end;
  }
  
  .bot-message {
    background-color: var(--bot-message-bg);
    color: var(--bot-text-color);
    justify-content: flex-start;
  }
  
  .message-text {
    font-size: 15px;
  }
  
  /* Ensure the footer is fixed within the right-panel */
  .right-panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--panel-background);
    position: sticky;
    /* Make it stick to the bottom of the right panel */
    bottom: 0;
    width: 100%;
    /* Make sure it takes full width of the right panel */
    z-index: 100;
    /* Ensure it stays above other content */
    border-top: 1px solid var(--border-color);
  }
  
  /* Adjust the height and overflow of the chatbot body to accommodate the footer */
  .right-panel-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding-bottom: 80px;
    /* Add space for the footer */
    height: calc(100vh - 70px);
    /* Adjust for height of header and footer */
  }
  
  /* Styling for the input and button in the footer */
  .right-panel-footer input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 20px;
    background-color: var(--input-background);
    border: 1px solid var(--border-color);
    color: var(--text-color);
  }
  
  .right-panel-footer button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 50%;
    border: none;
  }
  
  .right-panel-footer button:hover {
    background-color: var(--hover-color);
  }
  
  
  .support-card .card-body {
    display: block;
    /* Ensure support card items stack properly */
    text-align: left;
  }
  
  /* OpenAI API Key Form Enhancements */
  #api-key-input {
    background-color: var(--input-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
  }
  
  #api-key-input::placeholder {
    color: var(--text-color);
    opacity: 0.7;
  }
  
  #openai-api-form button {
    background-color: #00a67f;
    /* OpenAI's green color */
    border: none;
  }
  
  #openai-api-form button:hover {
    background-color: #007d5a;
    /* Darker green on hover */
  }
  
  .predefined-question {
    background-color: var(--input-background);
    /* Or another color */
    color: var(--text-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: left;
  }
  
  /* Footer styles */
  footer {
    background-color: var(--panel-background);
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    /* Keep items at the ends */
    align-items: center;
    /* Vertically center content */
    position: relative;
  }
  
  .footer-logo img {
    height: 40px;
    /* Adjust the logo height */
    width: auto;
  }
  
  .footer-text {
    flex-grow: 1;
    /* Allows text to take up central space */
    text-align: center;
  }
  
  footer a {
    color: var(--primary-color);
    text-decoration: none;
  }
  
  footer a:hover {
    color: var(--hover-color);
    text-decoration: underline;
  }
  
  /* Ensure logo is well-positioned */
  .footer-logo,
  .footer-placeholder {
    width: 100px;
    /* Adjust width to balance the layout */
  }
     /* Adjust form in left panel */
.left-panel form input[type="file"] {
  background-color: var(--input-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

/* new icons */

.services-link {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.single-service-link {
  width: 72px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
.single-service-link .icon-container {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.single-service-link .icon-container:hover {
  background-color: rgba(255, 255, 255, 0.35);
}
.single-service-link .icon-container::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(156.52deg, rgba(0, 0, 0, 0.05) 2.12%, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 54.33%, rgba(0, 0, 0, 0.15) 93.02%);
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
}
.single-service-link .icon-container .icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
}
.single-service-link .name {
  margin: 0px;
  font-family: sans-serif;
  text-shadow: var(--leo-effect-elevation-02);
  max-width: 100%;
  height: 17px;
  color: var(--override-readability-color, white);
  padding: 0px 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}


/* Style for the list container */
#file-list {
  padding: 10px;
  background-color: var(--panel-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 300px; /* Example height, adjust as needed */
  overflow-y: auto; /* Enable scrolling if needed */
}

/* Style for each file item */
.file-item {
  display: flex;
  justify-content: space-between; /* Spread the filename and button */
  align-items: center;
  background-color: var(--input-background);
  color: var(--text-color);
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  margin-bottom: 8px; /* Space between file items */
}

/* Style for the delete button */
.file-item button {
  background-color: #d9534f;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
}

.file-item button:hover {
  background-color: #c9302c;
}