/* Active styles for sidebar-toggle */
.sidebar-toggle.active {
  left: 20px;
}

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px; /* Adjust the width of the sidebar */
  height: 100%;
  background-image: linear-gradient(to right, #101010, #0e0e0e);
  overflow-y: auto;
  box-shadow: 0 0 20px  rgb(18, 18, 18);
  transition: transform 0.3s ease; /* Add a smooth transition for sliding effect */
  z-index: 9999;
  overflow-x: hidden;
  transform: translateX(-100%); /* Initially hide the sidebar off-screen */
}

/* Add an overlay for shading */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity and color as needed */
  z-index: 9998; /* Place the overlay behind the sidebar */
  display: none; /* Initially hidden */
}

/* Styles for the sidebar-toggle button */
.sidebar-toggle {
  top: 15px;
  left: 200px;
  position: fixed;
  cursor: pointer;
  background-color: #202020;
  border-radius: 7px;
  padding: 0;
  z-index: 99999;
  transition: left 0.3s ease;
}

/* Show the sidebar when it's active */
.sidebar.active {
  transform: translateX(0);
}

.sidebar.active ~ .sidebar-toggle {
  left: 290px; /* Adjust the position of the sidebar toggle based on the width of the sidebar */
  top: 10px; /* Adjust the top position for mobile */
}

#sidebar-conversations li {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-left:-35px;
  width: 15rem;
  padding-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer; /* Set cursor to pointer to indicate clickability */
}

#sidebar-conversations li:hover {
  background-color: #444444;
  border-radius: 5px;
}

/* Remove default button styles */
#sidebar-conversations li button {
  background: none;
  border: none;
  cursor: pointer;
  padding-left: -50px;
}

/* Styles for the conversation actions (edit and remove buttons) */
.conversation-actions {
  display: flex;
  align-items: center;
}

/* Style for regular, unvisited links */
a:link {
  color: #dbdada; /* Change this to your desired color */
  text-decoration: none;
  margin-top: 10px; /* Remove the default underline */
}

/* Style for visited links */
a:visited {
  color: #f2f2f2;
  margin-top: 10px; /* Change this to your desired color for visited links */
}

/* Custom scrollbar styles */
.sidebar::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
  border-radius: 4px; /* Round the edges of the thumb */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Set the color of the scrollbar thumb on hover */
}

.sidebar-toggle:hover {
  color: #0b4b83;
}

.edit-conversation-button i:hover {
  color: rgb(41, 186, 96);
}

.edit-conversation-button i {
  color: #b0b0b0; /* Change to your desired color */
  font-size: 14px;
  /* Add any additional styles for the icon */
}

.burger-menu {
  width: 31px;
  height: 31px;
  margin-right:2px;
  background-color: #202020;
  border-radius:5px;
  padding: 2px 2px 4px 4px;
}

.new-chat-button {
  background-color: transparent;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  font-family: 'Instrument Sans', sans-serif;
  margin: 12px 20px 40px 25px;
  padding: 8px 35px;
  color: white;
  font-size: 14.5px;
}

.new-chat-button:hover {
  background-color: rgba(33, 33, 33, 0.858);
}

/* Styles for the edit and remove buttons */
.edit-conversation-button,
.remove-conversation-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-left: 1px;
  margin-top:10px;
}

.edit-conversation-button {
  margin-left:40px;
}

.remove-conversation-button {
  margin-left:-5px;
}

/* Truncate long conversation names */
.conversation-link {
  display: inline-block;
  max-width: 100px; /* Adjust the max-width as needed */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-align: left;
}

/* Hide the trash icon by default */
.remove-conversation-button i {
  font-size: 14px;
  color: #d8d8d8;
  padding-top: 5px;
}

.remove-conversation-button:hover i {
   color: #d91616;
   animation: ease-in;
}

.fa-comment-alt {
  color: #b0b0b0; /* Change to your desired color */
  font-size: 12px; 
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  /* Change to your desired font size */
}

/* CSS for the modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.81);
  z-index: 99999!important;
}

.modal-content {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #373e45;
  padding: 20px;
  font-size: 15px;
  width: 400px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content p {
  position: absolute;
  top: 20%;
  left:15%;
  font-size: 18px;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  cursor: pointer;
}

.modal-button {
  margin: 0 15px;
  padding: 8px 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button:hover {
  background-color: #0056b3;
}


/* Sidebar styles for mobile devices */
@media (max-width: 768px) {
  /* Hide the sidebar in mobile view by default */
  .sidebar {
    transform: translateX(-100%);
    background-color: rgb(13, 13, 13);
    width: 300px;
  }
  /* Sidebar will be shown when the toggle button is clicked in mobile view */
  /* Sidebar will be shown when the toggle button is clicked in mobile view */
  .sidebar.active {
    transform: translateX(0);
    box-shadow: 0 0 50px  rgb(11, 11, 11); /* Add shadow when sidebar is active in mobile view */
  }

  .modal-content p {
    position: absolute;
    top: 20%;
    left:10%;
    font-size: 16px;
  }

  .sidebar-toggle.active {
    left: 245px;
  }

  .sidebar-toggle {
    left: 20px;
    top: 15px;
    transition: left 0.032s ease-in-out;
  }
  

  .edit-conversation-button {
    margin-left:10px;
  }

  .modal-buttons {
    display: flex;
    justify-content: center;
    margin-left:20px;
    margin-top:90px;
    cursor: pointer;
  }

.remove-conversation-button {
  margin-left:-20px;
}
/* Remove default button styles */
#sidebar-conversations li button {
  padding-left: 20px;
}

  .new-chat-button {
    margin: 10px 20px 40px 55px;
  }

}


/* Sidebar styles for mobile devices */
@media (max-width: 768px) {


  .modal {
    width: 100%;
    top:0;
  }
  

  .modal-content{
    width: 300px;
  }

  .modal-button {
    margin-left:10px;
  }
}