@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /* Colors */
    --gray0: hsl(0, 0%, 0%);
    --gray10: hsl(0, 0%, 10%);
    --gray30: hsl(0, 0%, 30%);
    --gray50: hsl(0, 0%, 50%);
    --gray70: hsl(0, 0%, 70%);
    --gray90: hsl(0, 0%, 90%);
    --gray100: hsl(0, 0%, 100%);
    --colora: #FC766AFF;
    --colora2: #5B84B1FF;

    /* Typography */
    --ff: "Inter", sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --big: 1.25rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff);
    --small: .75rem/2em var(--ff);

    /* UI Elements */
    --h1ui: bold 3rem/1.2em var(--ff);
    --h2ui: bold 2.25rem/1.2em var(--ff);
    --h3ui: bold 1.5rem/1.2em var(--ff);
    --h4ui: bold 1.12rem/1.6em var(--ff);
    --bigui: 1rem/1.6em var(--ff);
    --pui: .8rem/1.6em var(--ff);
    --smallui: .75rem/1.8em var(--ff);
}


/* Headings and Text */
h1 { font: var(--h1); }
h2 { font: var(--h2); }
h3 { font: var(--h3); }
h4 { font: var(--h4); }
.big { font: var(--big); }
p { font: var(--p); }
.small { font: var(--small); }

/* UI Headings and Text */
.ui h1 { font: var(--h1ui); }
.ui h2 { font: var(--h2ui); }
.ui h3 { font: var(--h3ui); }
.ui h4 { font: var(--h4ui); }
.ui .big { font: var(--bigui); }
.ui p { font: var(--pui); }
.ui .small { font: var(--smallui); }

/* General */
.ts { color: var(--gray70); }
h1, h2, h3, h4, .big, p, .small { margin: 0; margin-top: 2rem; }
.ui { margin-top: 4rem; }



/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--gray100);
  color: var(--gray10);
}

/* Navbar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--colora2);
  border-bottom: 2px solid var(--gray70);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.logo {
  max-height: 50px; /* Adjust the size to fit your design */
  cursor: pointer;
}

.navbar-middle {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex: 1;
}

.nav-link {
  padding: 0.5rem 1rem;
  border: 2px solid var(--gray100);
  border-radius: 0.5rem;
  text-decoration: none;
  background-color: var(--gray100);
  color: var(--colora2);
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: var(--colora);
  color: var(--gray0);
  border: 2px solid var(--colora);
  border-radius: 0.5rem;
}

.navbar-right {
  display: flex;
  gap: 1rem;
}

/* Auth Buttons */
.button-primary {
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--colora);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--gray100);
  background-color: var(--colora);
  font-weight: bold;
  transition: background-color 0.3s;
}

.button-primary:hover {
  /* background-color: hsl(5, 80%, 60%); */
  color: var(--gray0);
}

.button-secondary {
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--colora2);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--gray100);
  background-color: var(--colora2);
  font-weight: bold;
  transition: background-color 0.3s;
}

.button-secondary:hover {
  background-color: hsl(205, 50%, 50%);
}

.button-tertiary {
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.button-tertiary:hover {
  background-color: var(--colora);
  color: var(--gray0);
  border: 2px solid var(--colora);
}


/* Icon Buttons */
.nav-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.nav-icon:hover {
  /* background-color: var(--gray90); */
  background-color: var(--colora);
  color: var(--gray0);
  border: 2px solid var(--colora);
}


/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 2rem;
  background-color: var(--gray90);
}

.hero h1 {
  font: var(--h1);
}

.hero p {
  font: var(--p);
  margin: 1rem 0;
}

.hero .button-primary {
  margin-top: 1rem;
}

/* Section Containers */
.section {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font: var(--h2);
}

.grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  padding: 1.5rem;
  background-color: var(--gray100);
  text-align: center;
}

.card h3 {
  font: var(--h3);
  margin-bottom: 1rem;
}

.card p {
  font: var(--p);
}

.pricing {
  display: flex;
  justify-content: space-around;
  gap: 1.5rem;
}

.pricing .card {
  flex: 1;
}



/* FAQ Chat Section */
.faq-chat {
  background-color: var(--gray90);
  padding: 3rem 2rem;
  border-top: 2px solid var(--gray70);
}

.faq-chat .chat-box {
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  padding: 1.5rem;
  background-color: var(--gray100);
}




/* Settings Page Layout */
.settings-container {
  display: flex;
  padding: 2rem;
  gap: 2rem;
}

/* Sidebar */
.settings-sidebar {
  width: 250px; /* Adjust the width as needed */
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray90);
  padding: 1rem;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 1rem; /* Add space between buttons */
}

.settings-sidebar ul {
  list-style: none;
  padding: 0;
}

.settings-sidebar li {
  margin-bottom: 1rem;
  font: var(--p);
  color: var(--gray10);
}

/* Main Content Area */
.settings-content {
  flex: 1;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  padding: 2rem;
  display: flex;
  justify-content: left;
  align-items: left;
}

.settings-content p {
  font: var(--p);
  color: var(--gray30);
  text-align: left;
}


.settings-button {
  display: block; /* Full block-level to stack vertically */
  width: 100%; /* Full width to fit the sidebar */
  padding: 0.5rem 1rem;
  border: 2px solid var(--colora2);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  font-weight: bold;
  text-align: left; /* Align text to the left */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.settings-button:hover {
  background-color: var(--colora2);
  color: var(--gray100);
}




/* Chat Page Layout */
.chat-container {
  display: flex; /* Enables Flexbox layout */
  flex-direction: row; /* Ensures items are aligned horizontally */
  gap: 1rem;
  padding: 1rem;
  height: calc(100vh - 100px); /* Adjusts to fit within the viewport minus header */
}



/* Main Chat Area */
.chat-main {
  display: flex;
  flex-direction: column; /* Stack chatbox and input-area vertically */
  height: calc(100vh - 100px); /* Adjust based on available viewport minus header or other fixed elements */
  width: 100%; /* Ensures it takes up all horizontal space */
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: hidden; /* Prevent overflow from affecting layout */
  position: relative; /* Contain position-related adjustments */
  min-height: 0; /* Prevent flex items from causing excessive growth */
  flex-grow: 1; /* Ensures it expands to fill available space */
}



/* Input Area */
.input-area {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  position: sticky;
  bottom: 0; 
  border-top: 2px solid var(--gray70);
}

.input-field {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
}




/* Hover effect for chat buttons */
.chat-button:hover {
  background-color: var(--colora2);
  color: var(--gray100);
}



.hint-messages {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping to the next line */
  gap: 0.25rem; /* Small gap between items */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  padding: 1rem; /* Adjust padding as needed */
}

.hint-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  padding: 1rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  text-align: left;
  transition: transform 0.3s, background-color 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.hint-card:hover {
  transform: translateY(-5px);
  background-color: var(--colora2);
  color: var(--gray0);
}

.hint-card i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--colora2);
}

.hint-card p {
  font: var(--p);
  color: var(--gray10);
  margin: 0;
  line-height: 1.5;
}








/* Chat Page Layout */
.output-area {
  flex: 1; /* Takes up available space above input-area */
  overflow-y: auto; /* Allows scrolling when content overflows */
  padding: 1rem;
  border: 2px solid var(--gray70); /* Optional border */
  border-radius: 0.5rem; /* Optional rounded corners */
  background-color: var(--gray100); /* Set background color */
}




.sidebar {
  width: 15rem; /* Adjust width as needed */
  background-color: var(--gray90); /* Sidebar background color */
  padding: 1rem; /* Padding around the sidebar content */
  border-right: 2px solid var(--gray70); /* Optional border to separate the sidebar */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
}

.top-buttons {
  display: flex; /* Arrange buttons in a row */
  gap: 0.5rem; /* Space between the buttons */
  margin-bottom: 1rem; /* Space below the button group */
}

.sidebar-button {
  flex: 1; /* Make buttons equally sized */
  padding: 0.5rem 1rem; /* Button padding */
  border: 2px solid var(--colora2); /* Button border */
  border-radius: 0.5rem; /* Rounded corners */
  background-color: var(--gray100); /* Button background color */
  color: var(--colora2); /* Button text color */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth hover transition */
}

.sidebar-button:hover {
  background-color: var(--colora2); /* Change background on hover */
  color: var(--gray100); /* Change text color on hover */
}









.chatbox {
  display: flex;
  flex-direction: column; /* Stack messages vertically */
  flex-grow: 1; /* Allow it to take up available space but within set constraints */
  padding: 1rem;
  max-width: 100%; /* Prevent horizontal overflow */
  overflow-y: auto; /* Allows vertical scrolling for overflowing messages */
  overflow-x: hidden; /* Prevents horizontal scroll */
  min-height: 0; /* Prevent growth beyond parent constraints */
}



.userText {
  align-self: flex-end; /* Aligns the message bubble to the right */
  background-color: var(--colora); /* Optional: color for the user message */
  padding: 0.5rem 1rem; /* Padding inside the message bubble */
  border-radius: 0.5rem; /* Rounded corners */
  max-width: 60%; /* Maximum width of the message bubble */
  margin: 0.5rem 0; /* Space between messages */
  color: var(--gray0); /* Text color */
  text-align: left; /* Left-aligns text inside the bubble */
  word-wrap: break-word; /* Breaks long words inside the bubble */
  word-break: break-word; /* Forces line breaks for long words */
  white-space: pre-wrap; /* Allows wrapping inside the bubble */
  display: inline-block; /* Keeps the bubble contained */
  overflow: hidden; /* Prevents expanding due to overflow */
}


.botText {
  align-self: flex-start; /* Aligns the message bubble to the left */
  background-color: var(--gray70); /* Optional: color for the user message */
  padding: 0.5rem 1rem; /* Padding inside the message bubble */
  border-radius: 0.5rem; /* Rounded corners */
  max-width: 60%; /* Maximum width of the message bubble */
  margin: 0.5rem 0; /* Space between messages */
  color: var(--gray0); /* Text color */
  text-align: left; /* Left-aligns text inside the bubble */
  word-wrap: break-word; /* Breaks long words inside the bubble */
  word-break: break-word; /* Forces line breaks for long words */
  white-space: pre-wrap; /* Allows wrapping inside the bubble */
  display: inline-block; /* Keeps the bubble contained */
  overflow: hidden; /* Prevents expanding due to overflow */
}








/* Main layout container */
.vault-container {
  display: flex;
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
  padding: 1rem;
  gap: 1rem;
}

/* Sidebar styles */
.vault-sidebar {
  width: 15rem; /* Fixed width for sidebar */
  background-color: var(--gray90); /* Darker background */
  border-right: 2px solid var(--gray70); /* Optional border for visual separation */
  padding: 1rem;
  flex-direction: column; /* Vertical stacking of elements */
  gap: 0.5rem;
  display: flex;
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: visible; /* Allows the element to expand with its content */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
}

/* Top buttons inside sidebar */
.vault-top-buttons {
  display: flex; /* Aligns buttons horizontally */
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Sidebar buttons and storage section */
.vault-sidebar-button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--colora2);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.vault-sidebar-button:hover {
  background-color: var(--colora2);
  color: var(--gray100);
}

.storage-info {
  margin-top: auto; /* Pushes storage info to the bottom */
  padding-top: 1rem;
  border-top: 2px solid var(--gray70);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.storage-progress {
  background: var(--gray70);
  height: 0.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.storage-progress-bar {
  width: 30%; /* Dynamic width based on usage */
  height: 100%;
  background: var(--colora);
}

/* Main content area styles */
.vault-main-content {
  flex: 1; /* Takes up remaining space */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Search and filter bar */
.search-bar {
  display: flex;
  width: 40%;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--gray100);
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.5rem;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--gray10);
}

.filter-button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--colora2);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.filter-button:hover {
  background-color: var(--colora2);
  color: var(--gray100);
}

/* Folders and files grid */
.vault-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column grid */
  grid-auto-rows: min-content; /* Automatically adjust row height based on content */

  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
}




.vault-nav {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  width: 100%; /* Ensures it takes up all horizontal space */
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: visible; /* Allows the element to expand with its content */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
}


.vault-nav-entities {
  display: flex;
  flex-direction: row; /* Stack elements vertically */
  width: 100%; /* Ensures it takes up all horizontal space */
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: visible; /* Allows the element to expand with its content */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
  gap: 1rem; /* Adjust this value to increase space between items */
}


/* Folder and file items */
.vault-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  cursor: pointer;
  transition: background-color 0.3s;
}

.vault-grid-item:hover {
  background-color: var(--colora2);
  color: var(--gray0);
}

.vault-grid-item button {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--gray50);
}









/* Main layout container */
.create-container {
  display: flex;
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
  padding: 1rem;
  gap: 1rem;
}


/* Sidebar styles */
.create-sidebar {
  width: 15rem; /* Fixed width for sidebar */
  background-color: var(--gray90); /* Darker background */
  border-right: 2px solid var(--gray70); /* Optional border for visual separation */
  padding: 1rem;
  flex-direction: column; /* Vertical stacking of elements */
  gap: 0.5rem;
  display: flex;
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: visible; /* Allows the element to expand with its content */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
}



/* Top buttons inside sidebar */
.create-top-buttons {
  display: flex; /* Aligns buttons horizontally */
  gap: 0.5rem;
  margin-bottom: 1rem;
}



.create-nav {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  width: 100%; /* Ensures it takes up all horizontal space */
  max-width: 100%; /* Prevent horizontal expansion */
  overflow: visible; /* Allows the element to expand with its content */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */
}



/* Sidebar buttons and storage section */
.create-sidebar-button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--colora2);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  color: var(--colora2);
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.create-sidebar-button:hover {
  background-color: var(--colora2);
  color: var(--gray100);
}



/* Main content area styles */
.create-main-content {
  flex: 1; /* Takes up remaining space */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



/* Folders and files grid */
.create-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column grid */

  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--gray70);
  border-radius: 0.5rem;
  background-color: var(--gray100);
  
  flex-direction: column; /* Vertical stacking of elements */
  display: flex;
  max-width: 100%; /* Prevent horizontal expansion */

  overflow-y: auto; /* Allows scrolling if content overflows */
  position: relative; /* Maintain position-related adjustments */
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: auto; /* Allows the height to expand based on content */

}





.footer {
  width: 100%;
  background-color: var(--gray90);
  color: var(--gray0);
  padding: 2rem 0;
  display: flex;
  flex-direction: column; /* Stack container and bottom section vertically */
  align-items: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 90%;
  max-width: 1200px;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 2rem; /* Adjust gap between footer sections as needed */
}

.footer-about,
.footer-links,
.footer-legal,
.footer-social,
.footer-newsletter {
  flex: 1; /* Makes each section take equal space */
  min-width: 150px; /* Minimum width for each section */
}

.footer h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.footer-links ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li,
.footer-legal ul li {
  margin-bottom: 0.5rem;
}

.footer-links ul li a,
.footer-legal ul li a {
  text-decoration: none;
  color: var(--gray0);
  transition: color 0.3s;
}

.footer-links ul li a:hover,
.footer-legal ul li a:hover {
  color: var(--colora); /* Change color on hover */
}

.footer-social a {
  margin-right: 0.5rem;
  color: var(--gray0);
  font-size: 1.5rem;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: var(--colora); /* Change color on hover */
}

.footer-newsletter input {
  padding: 0.5rem;
  border: 1px solid var(--gray70);
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.footer-newsletter button {
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  background-color: var(--colora);
  color: var(--gray100);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.footer-newsletter button:hover {
  background-color: var(--colora2);
}

.footer-bottom {
  margin-top: 2rem; /* Adds space above the bottom section */
  text-align: center;
  width: 100%;
  border-top: 1px solid var(--gray70); /* Optional top border */
  padding: 1rem 0;
}



.dropdown {
  position: relative;
  display: inline-block;
  
}




.dropdown-content {
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow-y: auto; /* Enable vertical scrolling if child content overflows */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  display: none;
  flex-direction: column;
  flex-grow: 0; /* Adjust as needed, setting to 0 avoids unnecessary stretching */
  min-height: auto; /* Allows the element to grow with content */
  height: 20rem; /* Allows the height to expand based on content */
}

.dropdown-content.show {
  display: flex;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}



/* Overlay Button Styles */
.overlay-button {
  flex: 1; /* Make buttons equally sized */
  cursor: pointer; /* Pointer cursor on hover */
  height: 2rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--colora);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--gray100);
  background-color: var(--colora);
  font-weight: bold;
  transition: background-color 0.3s;
  align-self: flex-start;
  
}





/* Hide the sidebar */
.hidden {
  display: none;
}





/* Modal styles */
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* This will keep the modal hidden by default */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 18px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.conversation-sidebar {

  height: 100%;
  width: 100%; /* Ensures it takes up all horizontal space */



  flex: 1; /* Takes up available space */
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Enable vertical scrolling if child content overflows */
}


.conversation-link {
  display: block; /* Display links as block elements to act like buttons */
  padding: 0.5rem 1rem; /* Link padding */
  border: 0.125rem solid var(--colora2); /* Link border */
  border-radius: 0.5rem; /* Rounded corners */
  background-color: var(--gray100); /* Link background color */
  color: var(--colora2); /* Link text color */
  font-weight: bold; /* Bold text */
  text-decoration: none; /* Remove underline from link */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth hover transition */
  margin: 0.5rem 0; /* Optional: space between links */
}


.conversation-link:hover {
  background-color: var(--colora2); /* Change background on hover for visual feedback */
  color: var(--gray100); /* Change text color on hover */
}





/* Spinner styles */
.spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
  margin: 10px auto;
}



@keyframes spin {
  to {
      transform: rotate(360deg);
  }
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  width: 100%;
  height: 40px; /* Ensures the container has height */
  z-index: 1000; /* Ensures it is on top of other content */
  position: relative; /* Ensures it doesn't get hidden by other elements */
}



/* Conversation Item */
.conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}


.options-icon {
  cursor: pointer;
  padding: 0 5px;
}




/* Dropdown Menu */
.options-dropdown {
  background-color: white;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.dropdown-option {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-option:hover {
  background-color: #f0f0f0;
}