/* Custom scrollbar for light theme */
 ::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #E2E8F0;
  /* slate-200 */
} 

::-webkit-scrollbar-thumb {
  background: #94A3B8;
  /* slate-400 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748B;
  /* slate-500 */
}

/* Ensure body and html take full height for h-screen to work effectively */
html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #F1F5F9;
  /* slate-100, Main background for the page */
  overflow: hidden;
  /* Prevent body scroll when menus are open */
}

/* Custom styling for textarea to prevent resizing handle */
textarea {
  resize: none;
}

/* Hide scrollbar for prompt suggestions area on smaller screens
#prompt-suggestions::-webkit-scrollbar {
  display: none;
}*/

/* Keep display flex by default for layout, JS will toggle it */
#prompt-suggestions {
  display: flex;
  /* Keep display flex by default */
  position: relative;
  max-height: 300px; /* Set the maximum height */
  overflow: auto; /* Add scrollbars when content overflows in any direction */
  /*overflow-y: auto; /* Alternatively, if you only expect vertical scrolling */
  position: relative; /* Keep for absolute positioning of the close button */
  /* REMOVE these lines that hide scrollbars by default */
  /* -ms-overflow-style: none; */
  /* scrollbar-width: none; */
}

/* REMOVE the entire media query block for scrollbar styling */
/*
@media (min-width: 1024px) {
#prompt-suggestions::-webkit-scrollbar {
display: block;
height: 8px;
}

#prompt-suggestions::-webkit-scrollbar-track {
background: #E2E8F0;
}

#prompt-suggestions::-webkit-scrollbar-thumb {
background: #94A3B8;
border-radius: 4px;
}

#prompt-suggestions::-webkit-scrollbar-thumb:hover {
background: #64748B;
}

#prompt-suggestions {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
}
*/

#prompt-suggestion-close {
  position: absolute;
  /* 2. Take the element out of the normal flow and position it relative to its nearest positioned ancestor */
  top: 5px;
  /* 3. Position it 5px from the top edge of the positioned ancestor */
  right: 5px;
  /* 4. Position it 5px from the right edge of the positioned ancestor */
  cursor: pointer;
  /* Indicate that the icon is clickable */
  z-index: 10;
  /* Ensure the button is above other content if necessary */
  /* Your existing Tailwind classes like w-6 h-6 for size should still apply */
  color: #d3d3d3;
  stroke: #d3d3d3;
}

/* Style for the info overlay */
#initial-info-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  /* slate-100 with transparency */
  display: flex;
  /* Keep display flex here for centering its content */
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* Ensure it's above chat messages */
  backdrop-filter: blur(3px);
  /* Optional: add a slight blur */
}

/* Custom style for the colorful info message background */
.colorful-info-bg {
  background-image: url('https://www.ai-team.ch/linkedin/professor-at-your-side-welcome.jpeg');
  /* Placeholder image */
  background-size: cover;
  background-position: center;
  color: #ffffff;
  height: 350px;
  display: flex;
  /* Make the div a flex container */
  flex-direction: column;
  /* Stack the children vertically */
  justify-content: flex-end;
  /* Align children to the bottom of the container */
  text-align: center;
  /* Center the text horizontally within the container */
}

.colorful-info-bg h2 {
  color: #ffffff;
  /* sky-600 for heading */
}

.colorful-info-bg p {
  color: #ffffff;
  /* sky-700 for paragraph */
}

/* Style for the paste area */
#paste-area {
  background-color: #F1F5F9;
  /* slate-100 background like footer */
  border-top: none;
  /* Removed border-top */
  padding: 12px;
  /* p-3 */
  flex-shrink: 0;
  margin: 0 12px;
  /* Keep horizontal margin */
  margin-bottom: 12px;
  /* Keep bottom margin */
  max-height: 500px;
  position: relative;
}

#paste-area textarea {
  background-color: #F8FAFC;
  /* slate-50 */
  border: 1px solid #CBD5E1;
  /* slate-300 */
  border-radius: 8px;
  /* rounded-lg */
  padding: 12px;
  /* p-3 */
  width: 100%;
  min-height: 6rem;
  max-height: 440px;
  /* Adjust as needed */
  font-size: 0.875rem;
  /* text-sm */
  color: #1E293B;
  /* slate-800 */
  placeholder-color: #64748B;
  /* slate-500 */
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  /* text-sm - Standardized font size */
}

#paste-area .button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Space between paste and memorize */
  margin-top: 8px;
  /* mt-2 */
}

/* Style for the Paste from Clipboard button - Adjusted dimensions */
#paste-area .paste-button {
  padding: 8px 16px;
  /* px-4 py-2 */
  background-color: #0EA5E9;
  /* sky-500 */
  color: white;
  border-radius: 9999px;
  /* rounded-full */
  font-size: 0.875rem;
  /* text-sm */
  /* Standardized font size */
  font-weight: 400;
  /* font-medium */
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 150ms;
  cursor: pointer;
  min-width: 80px;
  /* Adjust minimum width */
  text-align: center;
  /* Center the text */
  justify-content: center;
  /* Center content if using flex */
  display: flex;
  /* Use flex to center content */
  align-items: center;
}

#paste-area .paste-button:hover {
  background-color: #0284C7;
  /* sky-600 */
}

/* Style for the Memorize button - Adjusted dimensions */
#paste-area .memorize-button {
  padding: 8px 16px;
  /* Adjusted padding to match paste button */
  color: #0EA5E9;
  /* text-sky-600 */
  border-radius: 9999px;
  /* rounded-full */
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 150ms;
  cursor: pointer;
  display: flex;
  /* To align icon and text */
  align-items: center;
  font-size: 0.875rem;
  /* text-sm - Standardized font size */
  font-weight: 400;
  /* font-medium */
  min-width: 120px;
  /* Adjust minimum width */
  text-align: center;
  /* Center the text */
  justify-content: center;
  /* Center content */
}

#paste-area .memorize-button:hover {
  background-color: #E2E8F0;
  /* hover:bg-slate-200 */
}

/* Style for the Memorize button text - Changed color and font-weight */
#paste-area .memorize-button span {
  margin-right: 0.25rem;
  /* space-x-1 effect */
  color: #334155;
  /* slate-700 - Matches suggestion text color */
  font-weight: 400;
  /* Normal font weight to match suggestion text */
}

#paste-area-close-button {
  position: absolute;
  /* 2. Take the element out of the normal flow and position it relative to its nearest positioned ancestor */
  top: 0px;
  /* 3. Position it 5px from the top edge of the positioned ancestor */
  right: -8px;
  /* 4. Position it 5px from the right edge of the positioned ancestor */
  cursor: pointer;
  /* Indicate that the icon is clickable */
  z-index: 10;
  /* Ensure the button is above other content if necessary */
  /* Your existing Tailwind classes like w-6 h-6 for size should still apply */
  color: #d3d3d3;
  stroke: #d3d3d3;
} 

/* Updated styles for prompt suggestions area */
#prompt-suggestions {
  display: flex;
  /* Keep flex for horizontal scrolling */
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  gap: 8px;
  /* Add gap between items (space-x-2 and space-y-2 equivalent) */
  padding: 12px;
  /* p-3 */
  background-color: #FFFFFF;
  /* White background for the area */
  border-top: none;
  /* Removed border-top */
  flex-shrink: 0;
  justify-content: center;
  /* Center the items */
}

/* Style for individual prompt suggestion items - Now clickable */
.prompt-suggestion-item {
  flex-shrink: 0;
  background-color: #F1F5F9;
  /* slate-100 background for items */
  padding: 12px;
  /* p-3 */
  border-radius: 0.5rem;
  /* rounded-lg */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  /* shadow */
  display: flex;
  align-items: center;
  /* Removed space-x: 3 as gap is handled by parent */
  border: none;
  /* Explicitly remove border on items */
  min-width: 150px;
  /* Ensure minimum width for scrolling */
  cursor: pointer;
  /* Indicate it's clickable */
  transition: background-color 150ms ease-in-out;
  /* Add hover transition */
}

.prompt-suggestion-item:hover {
  background-color: #E2E8F0;
  /* hover:bg-slate-200 */
}

.prompt-suggestion-item p {
  flex-grow: 1;
  /* Allow text to take up space */
  margin-right: 8px;
  /* Add space between text and button */
  font-size: 0.875rem;
  /* text-sm - Standardized font size */
  color: #334155;
  /* slate-700 - Standardized text color */
  font-weight: 400;
  /* Normal font weight */
}

/* Style for the red dot - Adjusted position again */
.red-dot {
  position: absolute;
  top: 0px;
  /* Adjusted position */
  left: 0px;
  /* Adjusted position */
  width: 8px;
  height: 8px;
  background-color: #EF4444;
  /* red-500 */
  border-radius: 50%;
  z-index: 1;
  /* Ensure it's above the icon */
  border: 1px solid #FFFFFF;
  /* Small white border for visibility */
  /* Using transform to fine-tune position relative to its own size */
  transform: translate(130%, 100%);
}

/* Class to hide the red dot */
.hidden-dot {
  display: none;
}

/* Make the toggle suggestions button relative for absolute positioning of the dot */
#toggle-suggestions-button {
  position: relative;
  /* Add padding to the button itself to create space for the dot */
  padding: 12px;
  /* p-3 equivalent */
}

/* Adjust padding on other footer buttons to match */
#attachment-button,
#clipboard-button {
  padding: 12px;
  /* p-3 equivalent */
}

/* Adjust padding on send button slightly if needed for alignment, ml-auto handles placement */
#send-button {
  padding: 12px;
  /* p-3 equivalent */
}

/* Styling for the left menu */
#header-menu-left {
  position: absolute;
  /* Position relative to the parent container */
  top: 64px;
  /* Height of the header */
  left: 0;
  /* Align to the left edge of the parent container */
  width: 250px;
  /* Fixed width for the menu */
  height: auto;
  /* Height based on content */
  max-height: calc(100% - 64px);
  /* Max height up to remaining parent height */
  background-color: #F1F5F9;
  /* slate-100 - Match paste area */
  padding: 16px;
  /* p-4 */
  /* Removed box-shadow */
  z-index: 20;
  /* Ensure it's above everything else */
  display: flex;
  /* Use flexbox for internal layout */
  flex-direction: column;
  /* Stack content vertically */
  overflow-y: auto;
  /* Add scrolling if content overflows */
  transform: translateX(-100%);
  /* Initially off-screen to the left */
  transition: transform 300ms ease-in-out;
  /* Smooth slide-in transition */
}

#header-menu-left.open {
  transform: translateX(0);
  /* Slide in when open */
}

/* Styling for the right menu */
#header-menu-right {
  position: absolute;
  /* Position relative to the parent container */
  top: 64px;
  /* Height of the header */
  right: 0;
  /* Align to the right edge of the parent container */
  width: 250px;
  /* Fixed width for the menu */
  height: auto;
  /* Height based on content */
  max-height: calc(100% - 64px);
  /* Max height up to remaining parent height */
  background-color: #F1F5F9;
  /* slate-100 - Match paste area */
  padding: 16px;
  /* p-4 */
  /* Removed box-shadow */
  z-index: 20;
  /* Ensure it's above everything else */
  display: flex;
  /* Use flexbox for internal layout */
  flex-direction: column;
  /* Stack content vertically */
  overflow-y: auto;
  /* Add scrolling if content overflows */
  transform: translateX(100%);
  /* Initially off-screen to the right */
  transition: transform 300ms ease-in-out;
  /* Smooth slide-in transition */
}

#header-menu-right.open {
  transform: translateX(0);
  /* Slide in when open */
}

.menu-section {
  margin-bottom: 10px;
  /* mb-4, was set to 16 */
}

.menu-section h3 {
  font-size: 1rem;
  /* text-base */
  font-weight: 600;
  /* font-semibold */
  color: #1E293B;
  /* slate-800 */
  margin-bottom: 8px;
  /* mb-2 */
  padding-bottom: 4px;
  /* pb-1 */
  border-bottom: 1px solid #E2E8F0;
  /* border-b border-slate-200 */
  display: flex;
  /* Use flex to align title and close button */
  justify-content: space-between;
  /* Space between title and close button */
  align-items: center;
  /* Vertically center title and close button */
}

.menu-section h3 .close-button {
  margin-left: 8px;
  /* Add some space between title and close button */
}

.menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-section li {
  padding: 8px 0;
  /* py-2 */
  font-size: 0.875rem;
  /* text-sm */
  color: #334155;
  /* slate-700 */
  cursor: pointer;
  transition: color 150ms ease-in-out;
}

.menu-section li:hover {
  color: #0EA5E9;
  /* text-sky-500 */
}

.menu-section a {
  display: block;
  /* Make links block for padding */
  padding: 8px 0;
  /* py-2 */
  font-size: 0.875rem;
  /* text-sm */
  color: #0EA5E9;
  /* text-sky-500 */
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.made-for-you-support-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.made-for-you-support-info a {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 0.6rem;
  color: #1E293B;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.made-for-you-support-info a:hover {
  color: #1E293B !important;
  text-decoration: none !important;
}

.menu-section a:hover {
  color: #0284C7;
  /* text-sky-600 */
  text-decoration: underline;
}

.menu-section p {
  font-size: 0.875rem;
  /* text-sm */
  color: #334155;
  /* slate-700 */
  margin-bottom: 8px;
  /* mb-2 */
}

/* Styling for the edits section */
/* Basic styling for a message bubble */
.message-bubble {
  position: relative;
  /* Needed for potential future absolute positioning */
}

.flex-column {
  flex-direction: column;
}

/* Container for main text and edits toggle */
.message-content {
  display: flex;
  justify-content: space-between;
  /* Space out text and toggle */
  align-items: center;
  /* Align items to the center vertically */
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.message-text {
  flex-grow: 1;
  /* Allow text to take up available space */
  /* Removed margin-right */
}

.edits-section {
  /* Adjusted margin-top to reduce gap */
  margin-top: -8px;
  /* Negative margin to pull it up */
  /* Removed padding-top: 10px; */
  /* Removed border-top */
}

/* Styling for the edits toggle (now an icon) */
.edits-toggle {
  /* Removed font-size, text-decoration */
  color: #0EA5E9;
  /* sky-500 */
  cursor: pointer;
  flex-shrink: 0;
  /* Prevent toggle from shrinking */
  white-space: nowrap;
  /* Prevent text from wrapping */
  margin-left: auto;
  /* Push the toggle to the right */
  /* Adjust vertical position */
  position: relative;
  bottom: 8px;
  /* Adjusted bottom value */
  width: 16px;
  /* Set icon width */
  height: 16px;
  /* Set icon height */
}

.edits-toggle svg {
  display: block;
  /* Ensure SVG takes up space */
  width: 100%;
  /* Make SVG fill the container */
  height: 100%;
  /* Make SVG fill the container */
}


.edits-list {
  list-style: none;
  padding: 0;
  /* Removed margin-top: 8px; */
}

.edits-list li {
  background-color: #E2E8F0;
  /* slate-50 */
  padding: 0px 8px;
  /* Reduced vertical padding to 4px, kept horizontal at 8px */
  margin-bottom: 0px;
  border-radius: 0.375rem;
  /* rounded-md */
  font-size: 0.7rem;
  color: #64748b;
  /* text-sm */
  /*color: #334155;*/
  /* slate-700 */
  cursor: pointer;
  transition: background-color 150ms ease-in-out;
  display: flex;
  /* Use flexbox for list item content */
  justify-content: space-between;
  /* Space out text and icon */
  align-items: center;
  /* Vertically align text and icon */
  width: 95%;
  border-top: 2px solid #f0f0f8;
  /* 1px thick, solid style, light gray color */
}

.edits-list li:hover {
  background-color: #cbd5e0;
  /* hover:bg-slate-300 */
}

.edit-item-text {
  flex-grow: 1;
  /* Allow text to take up space */
  margin-right: 8px;
  /* Space between text and icon */
}

.edit-item-icon {
  flex-shrink: 0;
  /* Prevent icon from shrinking */
  width: 16px;
  /* Icon width */
  height: 16px;
  /* Icon height */
  color: #0EA5E9;
  /* sky-500 */
}

/* Initially hide the edits list */
.edits-list.hidden {
  display: none;
}

/* Class to hide the entire edits section if there are no edits */
.edits-section.hidden {
  display: none;
}

#myForm {
  display: none;
}