/* Reset any additional margins or paddings that might be affecting layout */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Ensures consistent box sizing */
}

/* Settings Page Styles */
.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  color: var(--text-color, #FFFFFF);
}

.settings-card {
  background: var(--card-bg, linear-gradient(to right, #1F2937, #111827));
  border: 1px solid var(--card-border, #374151);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--card-text, #FFFFFF);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.settings-form-input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--input-bg, #1A1D21);
  border: 1px solid var(--input-border, #374151);
  color: var(--text-color, #FFFFFF);
  margin-bottom: 1rem;
}

.settings-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color, #FFFFFF);
}

.settings-button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background-color: var(--button-bg, #7C3AED);
  color: #FFFFFF;
  font-weight: 500;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.settings-button:hover {
  background-color: var(--button-hover-bg, #6D28D9);
}

.settings-button.danger {
  background-color: #DC2626;
}

.settings-button.danger:hover {
  background-color: #B91C1C;
}

.settings-button.success {
  background-color: #10B981;
}

.settings-button.success:hover {
  background-color: #059669;
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--button-bg, #7C3AED);
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

#confirmRemovePromptModal{
  z-index: 1000;
}

/* Confirmation Modal Styles */
.confirmation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.confirmation-modal-content {
  width: 100%;
  max-width: 500px;
  padding: 1.5rem;
  border-radius: 0.5rem;
  color: var(--text-color, #FFFFFF);
}

/* Theme-specific Chat Modal Styles */
.theme-card {
  background: var(--card-bg, linear-gradient(to right, #1F2937, #111827));
  border: 1px solid var(--card-border, #374151);
  color: var(--card-text, #FFFFFF);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
}

.theme-card-header {
  background: var(--card-header-bg, linear-gradient(to right, #1F2937, #111827));
  border-bottom: 1px solid var(--card-border, #374151);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 12px 16px;
}

.theme-card-body {
  background: var(--card-body-bg, #0D1117);
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #4B5563) var(--scrollbar-track, #1F2937);
}

.theme-card-body::-webkit-scrollbar {
  width: 6px;
}

.theme-card-body::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #1F2937);
  border-radius: 8px;
}

.theme-card-body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb, #4B5563);
  border-radius: 8px;
}

.theme-card-secondary {
  background: var(--sidebar-selected-bg, #374151);
}

.theme-prompt-button {
  background-color: var(--button-bg, #7C3AED);
  color: white;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.theme-prompt-button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.theme-card-secondary {
  border-radius: 8px;
}

.theme-card-footer {
  background: var(--card-footer-bg, linear-gradient(to right, #1F2937, #111827));
  border-top: 1px solid var(--card-border, #374151);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 12px 16px;
}

.theme-input {
  background: var(--input-bg, #1A1D21);
  color: var(--text-color, #FFFFFF);
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.theme-chat-input-container {
  background: var(--input-bg, #1A1D21);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-input:focus {
  border-color: var(--button-bg, #7C3AED);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
  outline: none;
}

.theme-button {
  background: var(--button-bg);
  padding: 12px 16px;
  transition: all 0.2s ease;
  border: none;
}

.theme-button:hover {
  background: var(--button-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.theme-button-text {
  color: white;
  font-weight: 500;
}

.theme-text {
  color: var(--text-color, #FFFFFF);
}

.theme-border {
  border-color: var(--card-border, #374151);
}

.theme-chat-user-bubble {
  background: var(--user-bubble-bg, linear-gradient(135deg, #7C3AED, #6D28D9));
  color: white;
  text-align: left;
  border-radius: 18px 18px 0 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-chat-mentor-bubble {
  background: var(--mentor-bubble-bg, #1E2A3B);
  text-align: left;
  border-radius: 18px 18px 18px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html, body {
  background-color: #050A1E; /* Replace with theme-specific color */
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-serif: 'EB Garamond', 'serif';
  --font-sans: 'Poppins', 'sans-serif'
  padding: 0;
  box-sizing: border-box;
  /* color: white; */
  text-align: center;
  height: 100%; /* Ensure the background covers the entire height */
}

/* User Highlights Styles */
.highlights-container {
  position: relative;
}

.highlight-card {
  flex: 1;
  margin-bottom: 0;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.highlight-content-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.highlight-content-wrapper::-webkit-scrollbar {
  width: 4px;
}

.highlight-content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.highlight-content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

#highlight-navigation {
  z-index: 10;
}

/* If you have specific elements like headers, links, etc., ensure they are styled appropriately */

a,
h1,
h2,
h3,
h4,
h5,
h6 {
  /* color: white; */
  /* Ensure text is visible on a black background */
  font-family: 'Avenir Next', sans-serif;
  /* Use a font that mimics handwriting or traditional print */
  /* 8-bit style font */
  font-size: 1.5em;
  /* Adjust base font size */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: black;
  /* Adjust the color as needed */
  color: white;
}

.nav-logo h2 {
  margin: 0;
  /* Removes default margin */
  /* Additional styling for your logo or brand name */
}

.nav-links {
  /* Style as needed */
}


.dropbtn {
  font-family: 'Press Start 2P';
  background-color:black;
  /* 8-bit style font */
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  border: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

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

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#legendX-description {
  margin: 20px 1050px 5px 0px;
  visibility: hidden;
}

#legendY-description {
  display: grid;
}

@media only screen and (max-width: 600px) {
  /* Adjust styles for small screens */

  .nav-links, .navbar, .input-group, #homeTweetButton {
    /* Example adjustments */
    flex-direction: column;
    padding: smaller amount;
    font-size: smaller;
    /* Other adjustments as needed */
  }
}

.personal-dashboard-container {
  position: relative;
  z-index: 10;
}

.personal-dashboard {
  padding: 10px; /* Padding around the dashboard */
  display: flex; /* Ensures items are laid out horizontally */
  gap: 10px; /* Space between stat blocks */
  align-items: right;
}

.stat {
  border: 0.5px solid rgba(255, 255, 255, 0.5); /* Adjust the opacity here (0.5 means 50% opacity) */
  border-radius: 10px; /* Rounded corners for the blocks */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for 3D effect */
  display: flex; /* Flex layout to align icon and text */
  flex-direction: row;
}

.life-stat {
  perspective: 1000;
  border: 0.5px solid rgba(255, 255, 255, 0.5); /* Adjust the opacity here (0.5 means 50% opacity) */
  border-radius: 8px; /* Rounded corners for the blocks */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for 3D effect */
  display: flex; /* Flex layout to align icon and text */
  flex-direction: column; /* Stack the items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  width: 130px; /* Fixed width for each block */
}

.number {
  font-size: 24px; /* Large font size for numbers */
  font-weight: bold; /* Bold font for emphasis */
}

.label {
  font-size: 16px; /* Smaller font size for labels */
  text-transform: uppercase; /* Uppercase letters for labels */
  color: #cbd5e1; /* Light grey for less emphasis on labels */
}

.stat-item {
  flex: 0 0 33.333%;
  /* Do not grow or shrink, take up exactly one-third of the space */
  box-sizing: border-box;
  /* Include padding and border in the width */
  padding: 5px;
  /* Small padding inside the stat items, can be set to 0 if needed */
  margin: 0;
  /* No margin around items */
  min-width: 0;
  /* No minimum width */
  text-align: center;
  /* Center the text inside each stat item */
}

#home-page {
  max-width: 1200px;
}

#homeTweetButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Start by aligning it to the right for large screens */
  z-index: 901;
  background-color:  #8b5cf6;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Avenir Next', sans-serif;
  font-size: 1.2em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  /* Presuming there's a mechanism to toggle visibility */
}

#homeTweetButton:hover {
  background-color: #6d28d9;
}

@media (max-width: 768px) {
  #homeTweetButton {
    right: 50%;
    /* Centered */
    transform: translateX(50%);
    /* Adjusted for true center alignment */
    visibility: visible;
    /* Always visible on smaller screens */
  }
}

#exploreTweetButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Start by aligning it to the right for large screens */
  z-index: 901;
  background-color:  #8b5cf6;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Avenir Next', sans-serif;
  font-size: 1.2em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#exploreTweetButton:hover {
  background-color: #6d28d9;
}

@media (max-width: 768px) {
  #exploreTweetButton {
    right: 50%;
    transform: translateX(50%);
    visibility: visible;
  }
}

#goDeeperButton {
  width: 120px;  /* Adjust width as needed */
  height: 40px;  /* Adjust height as needed */
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 1em;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

#logout-form {
  display: inline-block;
  /* Ensures the form is displayed inline */
}

.nav-login-button {
  color: #733cf3;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px;
  font-size: 1em;
  font-family: 'Press Start 2P';
  /* 8-bit style font */
}

.nav-login-button:hover {
  color: #733cf3;
  color:white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P';
  /* 8-bit style font */
  font-size: 1em;
}

.nav-signup-button {
  background-color: #8b5cf6;
  /* Google's blue color, change as desired */
  color: black;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P';
  /* 8-bit style font */
  font-size: 1em;
}

.nav-signup-button:hover {
  background-color: #733cf3;
  /* Darker shade of blue for hover effect */
}

.nav-logout-button:hover {
  background-color: #39bf9da9;
  color: white;
}

.nav-logout-button {
  color: #39bf9e;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P';
  /* 8-bit style font */
  font-size: 1em;
}

.nav-logout-button:hover {
  background-color: #39bf9da9;
  color: white;
}

/* Adjust the styles of other elements like buttons, inputs, etc., as needed */


.input-group {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#birthdayInput {
  border: 2px solid #dddddd;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 30px;
  font-size: 16px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

#birthdayInput:focus {
  border-color:#8b5cf6;
  outline: none;
  box-shadow: none;
}

/* This will center your container */

.centered-container {
  display: flex;
  justify-content: center;
  /* Horizontally center children */
  align-items: center;
  /* Vertically center children */
  height: 80vh;
  /* Full height of the viewport */
  text-align: center;
  /* Ensure text inside is centered */
}

/* Base styles for the cube */

.pink-cube {
  display: block;
  /* Display block to remove any inline behaviors */
  margin: auto;
  /* Center the SVG horizontally */
  height: auto;
  /* Maintain the aspect ratio */
}

/* Animation for moving cubes */

@keyframes moveCube {
  0%,
    100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(50px, -50px);
    /* Adjust values to move the cubes outward */
  }
}

/* Apply the animation to the three specific <use> elements that should move */

.pink-cube use:nth-of-type(6) {
  animation: moveCube 3s infinite linear;
}

@keyframes moveCubeUp {
  0%,
    100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0px, -90px);
    /* Adjust values to move the cubes outward */
  }
}

/* Apply the animation to the three specific <use> elements that should move */

.pink-cube use:nth-of-type(20) {
  animation: moveCubeUp 3s infinite linear;
}

@keyframes moveCubeLeft {
  0%,
    100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-50px, 0);
    /* Adjust values to move the cubes outward */
  }
}

/* Apply the animation to the three specific <use> elements that should move */

.pink-cube use:nth-of-type(5) {
  animation: moveCubeLeft 3s infinite linear;
}

#visualizeButton {
  margin-top: 20px;
  background-color: #3D1B89;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Press Start 2P', cursive;
  /* 8-bit style font */
  cursor: pointer;
  transition: background-color 0.3s;
}

#visualizeButton:hover {
  background-color:  #733cf3;
}

/* Styling for input with the calendar icon */

input[type="date"] {
  background: no-repeat right;
}

input[type="date"]:focus {
  border: none;
  outline: none;
  box-shadow: none;
}


input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  text-align: center;
  /* 8-bit style font */
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}


/* Hide the arrow for Firefox */

input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}

/* Attempt to change the calendar icon color */

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  /* Adjust the size if needed */
  width: 20px;
  height: 20px;
  /* Position it on the right, inside the input */
  right: 5px;
  /* Align the icon to the right inside the input */
  top: 50%;
  transform: translateY(-50%);
  /* Center it vertically */
  /* If you want to change the color, you might need to use filter as direct color change may not be supported */
  filter: invert(1);
  /* Example to make it white, adjust as needed */
  /* Example to make it white, adjust the hue-rotate for other colors */
}

#lifeStages {
  display: none !important;
}

.calendar-container {
  background-color: black;
  /* Black background */
  color: white;
  /* White text */
  display: none !important;
  grid-template-columns: 100px 20px auto;
  /* Updated to include space for the SVG */
  position: relative;
  /* Needed for absolute positioning of children */
  justify-content: center;
  /* Align content to the start to not stretch the grid */
  align-items: center;
  /* Align items to the top */
  overflow: visible;
  /* Make sure it's not set to 'hidden' */
  /* make container centered */
}

/* Existing styles for .calendar-view */

.calendar-view {
  display: none;
  /* Hide all views by default */
}

/* Modified styles to increase specificity */

.calendar-container .calendar-view {
  display: none;
}

.calendar-container .calendar-view.active {
  display: grid;
  /* Show the active view */
}

/* Adjust the #calendar specific styles */

#calendar {
  grid-template-columns: repeat(52, 20px);
  /* 52 columns to match the weeks in a year */
  grid-auto-rows: 20px;
  /* Each row is 20px tall */
  gap: 3px;
  /* 3px gap between cells */
}

#legendX {
  display: grid;
  grid-template-columns: repeat(52, 20px);
  /* Each column is 20px wide */
  gap: 3px;
  /* 2px gap between columns */
}

#legendY {
  display: grid;
  grid-template-rows: repeat(90, 20px);
  /* Corrected unit from 20x to 20px */
  gap: 3px;
  /* Maintain the same gap as between calendar weeks */
  margin-top: 20px;
  /* Adjust as necessary to align with the calendar */
}

.legend-cell {
  background-color: transparent;
  /* No background color for legend cells */
  font-size: smaller;
  /* Smaller font size for the legend numbers */
}

.week,
.legend-cell {
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
}

.week {
  background-color: lightgrey;
  /* Week background color */
  color: white;
  /* White text */
  position: relative;
  /* Adjust as necessary */
  margin: 0;
  /* Add more space around the squares */
  /* make the edges slightly rounded */
  border-radius: 1.5px;
}

.week:hover {
  background-color: #b3b3b3;
  /* A lighter shade when hovered over */
  cursor: pointer;
  /* Change the cursor to indicate it's hoverable */
}

/* .week.passed.low-intensity {
    background-color: #adebad; 
}

.week.passed.medium-intensity {
    background-color: #5cd65c; 
}

.week.passed.high-intensity {
    background-color: #339933; 
}

.passed {
    background-color: #62b39e;
}

.passed:hover {
    background-color: #009900;
    cursor: pointer;
} */

.unborn {
  background-color: #94a4a0;
  /* Light green, for example */
}

.popup {
  display: none;
  /* Hide by default */
  position: absolute;
  /* Position absolutely for placement control */
  width: 250px;
  /* Adjust width as needed */
  background: linear-gradient(150deg, #000000, #3b3b3b,  #000000, #3b3b3b);
  /* Brown background */
  color: white;
  /* Text color */
  padding: 12px;
  border-radius: 10px;
  /* Rounded corners */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  /* Shadow for depth */
  z-index: 100;
  /* Ensure it's above other items */
  transition: all 0.3s ease-in-out;
  text-align: center;
  font-size: 1.1em;
  font-weight: 500;
  font-family: 'Avenir Next', sans-serif;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  /* background-color: rgba(0, 0, 0, 0.4); */
  background-color: rgba(0, 0, 0, 0.7); /* Black with 60% opacity */
  backdrop-filter: blur(5px); /* Optional: CSS blur effect for supported browsers */
}

.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  margin: 3% auto;
  /* Increased for smaller devices */
  border-radius: 10px;
  /* Adjusted margin for better centering */
  padding: 2%;
  /* Proportional padding */
  border: 1px solid #888;
  width: 90%;
  /* Adjusted for smaller screens */
  /* Maximum size */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  animation-name: modalOpen;
  animation-duration: 0.4s;
  overflow: visible;
  margin-top:150px;
  /* To ensure the modal does not scroll */
}

.week-modal-content {
  margin-top:100px;
  width: 60%;
}

.modal-header,
.modal-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.modal-footer {
  justify-content: flex-end;
}

.modal-body {
  width: 100%;
  /* Full width */
  overflow-y: auto;
  /* Adjust the color (#444) as needed for visibility */
}

#modalText {
  margin: 5px;
}

@media (max-width: 768px) {
  .modal-content {
    margin: 15% auto;
    width: 95%;
  }

  .modal-header,
  .modal-footer {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .modal-content {
    margin: 20% auto;
    /* Even more margin on very small screens */
  }

  .modal-header h2,
  .modal-footer button {
    font-size: 14px;
    /* Adjust font size for very small screens */
  }
}

@keyframes modalOpen {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 10%;
    opacity: 1
  }
}

.date-picker-container {
  position: relative;
  /* Adjust the width of the date picker container as needed */
  width: 120px;
}

.date-input {
  font-size: 14px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
  width: 100%;
  padding-right: 30px;
  box-sizing: border-box;
  outline: none;
  /* Include padding in the width */
  /* Adjust based on padding to fit container width */
}

.week-view-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Enable vertical scrolling */
  padding: 10px;
  background: #000;
  /* Black background if desired */
  align-items: center;
  /* Center the cards horizontally */
}

.journal-entry-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align the journal entries */
  position: relative;
  max-width: 800px; /* Adjust as necessary */
  margin-left: auto;
  margin-right: auto;
  /* margin: 20px 0; */
  width: 100%;

}

.week-view {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* One column layout */
  gap: 10px;
  overflow-y: auto;
  /* Enable vertical scrolling */
  max-height: 90vh;
  /* Adjust the max height as needed */
}

.day-column {
  background: black;
  /* Adjust background color as needed */
  border-radius: 5px;
  /* Add some space between the columns */
  color: #fff;
  /* Light text color for visibility on dark background */
  display: flex;
  position: relative;
  flex-direction: column;
}

.entries-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertical line for thread */
  margin-left: 20px;
  padding-left: 10px;
  /* overflow-y: auto; */
  /* Add scrolling to the entries container */
  /* max-height: calc(100vh - 200px); */
  /* Example value, adjust as needed */
}

.entries-container .journal-entry {
  margin: 2px 0 2px 0;
  background: black;
}

/* home editor after write button clicked */

#editor {
  height:300px;
  /* Set a fixed height */
  width: 100%;
  /* color:white !important; */
}

#explore-editor {
  height:300px;
  /* Set a fixed height */
  width: 100%;
  color:white !important;
}

.ql-bubble .ql-tooltip {
  left: 0% !important;
}

/* Targeting the placeholder of Quill editor with 'bubble' theme */
.ql-bubble .ql-editor.ql-blank::before {
  opacity: 0.5; /* Adjust transparency */
  font-style: italic;
  font-size: 2em; /* Typical size for H1 in many defaults */
  font-weight: bold; /* Bold style for Heading 1 */
  content: attr(data-placeholder); /* Ensures the placeholder text is used */
  pointer-events: none; /* Makes the placeholder non-interactive */
  color: inherit; /* Inherits the color from the editor styling */
}


.ql-editor.ql-blank::before {
  font-style: italic;
  left: 0;
  right: 0;
  color: #666666; /* This will be overridden by the theme */
}

/* Twitter-like card for journal entries */

.journal-entry {
  box-sizing: border-box;
  background-color: black;
  color: #ddd;
  border: 1px solid #e1e8ed;
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 10px 15px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height: 200px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Responsive design adjustments */

/* Adjust styles for smaller screens */

@media (max-width: 768px) {
  .journal-entry {
    max-width: 80%;
    /* Allow the entry to use the full width */
    max-height: none;
    /* Remove max height constraint */
    padding: 8px;
    /* Adjust padding for smaller screens */
    margin-bottom: 15px;
    /* Adjust spacing between entries */
  }
}

@media (max-width: 600px) {
  .journal-entry {
    max-width: 80%;
    min-height: 20vh;
    /* Allow content to determine height */
    padding: 8px 10px;
    /* Slightly reduce padding */
    margin-bottom: 15px;
    /* Adjust spacing */
  }
}

/* Optional: Add a hover effect */

.journal-entry:hover {
  background-color: black;
  /* Slightly darker on hover like Twitter */
}

#inspiration-entry {
  background-color: #ffeb3b;
  /* Yellow background for inspiration */
  border-color: #fbc02d;
  /* Darker yellow border */
  color: #333;
  /* Dark text for readability */
  font-style: italic;
  /* Italicize to differentiate */
  padding: 10px;
  /* Add some padding */
  margin-top: 10px;
  /* Space above the entry */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  /* Soft shadow for emphasis */
}

.avatar-container {
  display: flex;
  margin-right: auto;
  margin-bottom: 10px;
  width: 100%;
}

.dropdown-content {
  display: none;
  position: flex;
  background-color: #111;
  border-radius: 10px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  margin-top: 15px;
  z-index: 100;
}

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

/* Responsive menu positioning */

@media screen and (max-width: 600px) {
  .dropdown-content {
    right: 10px;
    /* Adjust for smaller screens */
  }
}

.chat-dialogue {
  background-color: black;
  width: 50%;
  margin: 30px 0 0 500px;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

h4, p {
  margin: 0;
}

/* Adjust the .entries-container if needed */

.locked-entry {
  /* background:#1f2937; */
  /* Dark background for the textarea */
  border: none !important;
  /* No border on all sides */
  border-bottom: 1px solid #555 !important;
  /* Subtle line at the bottom */
  color: #ddd;
  /* Light text color for visibility */
  cursor: not-allowed;
  /* Cursor indicating non-editability */
}

#writeJournal {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  font-family: 'Press Start 2P', cursive;
  /* 8-bit style font */
  background-color: #8b5cf6;
  /* Green background */
  color: white;
  cursor: pointer;
  margin-top: 10px;
  z-index: 100;
}

/* Style for the textareas */

textarea {
  width: 100%;
  /* Make the textarea take up the full width of its parent */
  min-height: 120px;
  /* Increase the minimum height */
  background: #222;
  /* Dark background for the textarea */
  border: 1px solid #555;
  /* Subtle border */
  /* color: #ddd; */
  /* Light text color for visibility */
  border-radius: 4px;
  /* Match the border-radius with the day-column if used */
  padding: 10px;
  /* Padding inside the textarea */
  box-sizing: border-box;
  /* Include padding and border in the element's size */
  margin-top: 5px;
  /* Space between the label and the textarea */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.arrow {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 20px;
  font-size: 140px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.week-tile {
  width: 250px;
  height: 250px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  /* background-color: rgba(255, 130, 20, 0.8); */
  opacity: 0.5;
  box-shadow: inset 0 0 80px rgba(255, 130, 20, 0.8), 0 0 25px rgba(0, 191, 255, 0.7);
  transform: rotate(45deg);
  /* Equal to rotateZ(45deg) */
  margin: 20px auto;
  border-radius: 20px;
  font-size: 20px;
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
  position: relative;
  /* Necessary for absolutely positioned pseudo-elements */
}

/* Before and After pseudo-elements for added 3D effect */

.week-tile::before,
.week-tile::after {
  content: '';
  position: absolute;
  top: 10px;
  /* Adjust these values to control the depth effect */
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: -1;
  background: inherit;
  /* Inherits the gradient from the parent */
  border-radius: inherit;
  /* Inherits the border-radius from the parent */
  transition: all 0.3s ease;
}

.week-tile::after {
  transform: translateZ(-1px) scale(0.98);
  /* Slightly smaller to give depth */
  filter: blur(2px);
  /* Soften the shadow for a depth effect */
  opacity: 0.7;
  /* Make it slightly transparent */
}

/* Hover effect for interaction */

.week-tile:hover::before {
  transform: translateZ(-20px);
  /* Moves further back on hover */
}

.week-tile:hover::after {
  transform: translateZ(-2px) scale(0.96);
  /* Slightly smaller and further back on hover */
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

/* .celebratory-week {
    background-color: #dec475; /* Or any celebratory color */

/* Add more styles if needed */

/* } */

/* .christmas-week {
    background-color: #d38484; /* Red background for Christmas week */

/* } */

/* .glow-effect {
    box-shadow: inset 0 0 10px rgba(255, 130, 20, 0.8), 0 0 15px rgba(0, 191, 255, 0.7);
    transition: box-shadow 0.3s ease-in-out;
} */

.personal-glow {
  box-shadow: inset 0 0 10px rgba(255, 130, 20, 0.8), 0 0 15px rgba(0, 191, 255, 0.7);
}

.inspiration-glow {
  box-shadow: inset 0 0 10px rgba(128, 0, 128, 0.5), 0 0 15px rgba(75, 0, 130, 0.3);
  /* A deep purple color */
}

.day-rating label {
  cursor: pointer;
  margin-right: 5px;
  font-size: 24px;
  /* Adjust size as needed */
}

.day-rating label:hover {
  opacity: 0.7;
  /* Style for hover effect, can be adjusted */
}

/* Style for emoji rating labels */

.emoji-label {
  opacity: 0.5;
  /* Reduced opacity for unselected */
  background-color: transparent;
  /* Ensure background is transparent */
  cursor: pointer;
  display: inline-block;
  /* Align emojis in a row */
  margin: 0 5px;
  /* Space out emojis */
  font-size: 24px;
  /* Emoji size */
  transition: all 0.3s ease;
  /* Smooth transition for interaction states */
}

.emoji-label:hover {
  transform: scale(1.2);
  /* Slightly enlarge emoji on hover */
  opacity: 0.75;
  /* Slightly increase opacity on hover */
}

.selected-emoji {
  opacity: 1;
  /* Make it fully opaque */
  transform: scale(1.2);
  /* Enlarge selected emoji */
}

.emoji-label.currently-selected-emoji {
  opacity: 1;
  /* Make it fully opaque */
  transform: scale(1.2);
  /* Enlarge selected emoji */
  background-color: transparent;
  /* Maintain transparent background */
}

@keyframes heartbeat {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

.current-week {
  background-color: #FABC3C !important;
  animation: heartbeat 6s infinite;
}

.current-year {
  background-color: #FABC3C !important;
  animation: heartbeat 6s infinite;
}

.future-week {
  opacity: 0.7;
  /* Sets the initial opacity of future weeks to 70% */
  position: relative;
  /* Establishes a positioning context for the ::after pseudo-element */
}

.future-year {
  opacity: 0.7;
  /* Sets the initial opacity of future weeks to 70% */
  /* position: relative; */
  /* Establishes a positioning context for the ::after pseudo-element */
}

.future-week::after {
  content: '\1F512';
  /* Unicode for the lock emoji */
  position: absolute;
  /* Positions the pseudo-element absolutely within the .future-week container */
  top: 50%;
  /* Centers the emoji vertically within the container */
  left: 50%;
  /* Centers the emoji horizontally within the container */
  transform: translate(-50%, -50%);
  /* Adjusts the position to center the emoji precisely */
  font-size: 16px;
  /* Sets the size of the lock emoji */
  display: none;
  /* Initially hides the lock emoji */
  animation: showLock 3s ease;
  /* Applies an animation to the emoji when it's displayed */
}

.future-week.animate-lock::after {
  display: block;
  /* Displays the lock emoji when .future-week has .animate-lock class */
}

@keyframes showLock {
  0%,
    100% {
    opacity: 0;
  }

  /* The lock starts and ends invisible */

  10%,
    90% {
    opacity: 1;
  }

  /* The lock becomes visible quickly and remains so for most of the duration */
}

.alert-success {
  padding: 10px;
  font-weight: bold;
  background-color:  #3D1B89; /* Dark purple text on the button */
  opacity: 0.9;
  color:  #FABC3C; 
  animation: alert-disappear 5s forwards;
}

@keyframes alert-disappear {
  0% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
  }
}

#lifeProgressBarContainer {
  display: none;
  cursor: pointer;
  width: 40%;
  padding: 5px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

#lifeProgressBar {
  width: 0%;
  /* background: linear-gradient(90deg, #733cf3 0%, rgba(9, 9, 121, 1) 35%, rgba(2, 0, 36, 1) 100%); */
  text-align: center;
  line-height: 30px;
  /* Same as height to vertically center the text */
  height: 30px;
  border-radius: 5px;
  color: white;
  font-family: 'Press Start 2P', cursive;
  /* 8-bit style font */
  overflow: hidden;
  /* Ensures content fits within the rounded corners */
}

#lifeProgressBarContainer:hover #lifeProgressBar {
  animation: colorCycle 3s infinite, pulse 1.5s infinite; /* Add color cycling and pulsing */
  transform: translateY(-1px); /* Slight bounce effect */
}

@keyframes colorCycle {
  0% {
    background: linear-gradient(90deg, #733cf3 0%, rgba(9, 9, 121, 1) 35%, rgba(2, 0, 36, 1) 100%);
  }
  25% {
    background: linear-gradient(90deg, #3D1B89 0%, #6D28D9 50%, #F7F7F7 100%);
  }
  50% {
    background: linear-gradient(90deg, #9F7AEA 0%, #805AD5 75%, #F7FAFC 100%);
  }
  75% {
    background: linear-gradient(90deg, #9B7653 0%, #8A6746 50%, #F5F5DC 100%);
  }
  100% {
    background: linear-gradient(90deg, #733cf3 0%, rgba(9, 9, 121, 1) 35%, rgba(2, 0, 36, 1) 100%);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 1);
  }
}

#lifeProgressPercentage {
  display: none;
  width: 100%;
  font-size: 0.9rem;
  color: white;
  font-family: 'Press Start 2P', cursive;
}

#lifeProgressTitle {
  display: none;
  font-size: 1.6rem;
  font-family: 'Avenir Next', sans-serif;
  color: white;
  margin-top: 20px;
  margin-left: 200px;
  margin-bottom: 20px;
}

#lifeStages {
  display: none;
}

#calendar-toggle-label {
  visibility: hidden;
  width: 280px;
  font-size: 0.8em;
  margin-top: 20px;
}

.monthly-calendar-container {
  grid-template-columns: repeat(12, 80px);
  /* 52 columns to match the weeks in a year */
  display: none;
  justify-content: center;
  margin-right: 180px;
}

#calendar-monthly {
  display: grid;
  /* Make sure this is set to display as a grid */
  grid-template-columns: repeat(12, 80px);
  /* 12 columns for each month */
  grid-auto-rows: 70px;
  /* This should match the height of rows in #monthly-legendY */
  gap: 3px;
  /* Set the gap to match your design */
}

#monthly-legendX {
  display: grid;
  grid-template-columns: repeat(12, 80px);
  /* 12 columns for each month */
  gap: 3px;
  /* 2px gap between columns */
  color: white;
}

#monthly-legendY {
  display: grid;
  grid-template-rows: repeat(90, 70px);
  /* Each row is 20px high */
  margin-top: 40px;
  gap: 3px;
  /* 2px gap between columns */
}

#monthly-legendY .monthly-legend-cell {
  color: white;
  /* White text */
}

.calendar-container .monthLabel {
  text-align: center;
  /* Center the text within each .monthLabel */
  /* The .monthLabel items will automatically flow into the grid columns, so no need to set grid-column here */
}

.month {
  grid-auto-rows: 70px;
  /* This should match the height of rows in #monthly-legendY */
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  /* Soft grey background */
  color: #333;
  /* Dark grey text for contrast */
  border-radius: 10px;
  /* Rounded edges */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  transition: transform 0.3s, box-shadow 0.3s;
  /* Smooth transitions for interaction */
}

.month:hover {
  transform: translateY(-3px);
  /* Lift effect on hover */
  box-shadow: inset 0 0 10px rgba(255, 130, 20, 0.8), 0 0 15px rgba(0, 191, 255, 0.7);
}

.yearly-calendar-container {
  display: grid;
  flex-direction: row;
  justify-content: center;
  margin: 50px 0px 0px 70px;
  width: 50%;
}

#calendar-yearly {
  display: grid;
  grid-template-columns: repeat(10, minmax(20px, 1fr)); /* 10 columns for 10 years */
  grid-template-rows: repeat(9, minmax(20px, 1fr)); /* 9 rows, adjust height to match width */
  gap: 4px;
}

#yearly-legendX {
  display: grid;
  grid-template-columns: repeat(10, minmax(20px, 1fr)); /* Adjust to 10 columns */
  color: white;
}

#yearly-legendY {
  display: grid;
  margin-top: 15px;
  grid-template-rows: repeat(9, minmax(11px, 1fr)); /* Adjust to 9 rows */
  margin-right: 20px;
}

.yearly-legend-cell {
  display: grid;
  color: white;
}

.calendar-container .yearLabel {
  text-align: center;
}

.year {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: #374151;
  color: white;
  margin: 0;
  border: none;
  border-radius: 1.5px;
  box-shadow: none;
  transition: background-color 0.3s, transform 0.3s;
  font-size: 10px; /* Smaller font size */
  font-weight: 300;
  cursor: pointer;

}

.year:hover {
  transform: translateY(-2px);
}

/* You may want to style the current year differently to highlight it */

/* .year.current-year {
  background-color: #d1eaff;
  color: #333;
  font-weight: 500;
} */

.year:hover::after {
  visibility: visible;
  opacity: 1;
}

.expand-button {
  position: absolute;
  /* Changed from 'flex' to 'absolute' */
  top: 2px;
  /* Adjust as needed */
  right: 2px;
  /* Adjust as needed */
  border: none;
  /* Assuming you don't want a border */
  background: transparent;
  /* No background for just the icon */
  cursor: pointer;
  /* To indicate the button is clickable */
  padding: 5px;
  /* Space around the icon for easier clicking */
  z-index: 10;
  /* Ensure it's above other elements */
}

.expanded-journal-view-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  top: 0;
  /* left: 100px; */
  /* Offset by the sidebar width */
  right: 0;
  bottom: 0;
  /* width: calc(100vw - 100px); */
  /* Reduce width by sidebar's width */
  background-color: black;
  color: white;
  z-index: 900;
  overflow-y: scroll;
  /* Allows for scrolling */
  padding-top: 50px;
  /* Add padding to avoid overlapping the close button */
}

.timeline-view-container {
  left: 0px;
  /* Offset by the sidebar width */
  width: 100vw;
  /* Reduce width by sidebar's width */
  background-color: black;
  color: white;
  z-index: 900;
  overflow-y: scroll;
  /* Allows for scrolling */
  padding-top: 50px;
  /* Add padding to avoid overlapping the close button */
}

.expanded-journal-view-container .expanded-journal-wrapper {
  margin: 50px auto;
  /* This is already correct, but 'auto' margin centers it */
  min-height: 500px;
  /* Changed to 'min-height' to allow expansion */
  box-sizing: border-box;
  /* Makes sure padding and borders are included in the width */
  display: flex;
  /* Makes it a flex container */
  flex-direction: column;
  /* Stacks children vertically */
  align-items: center;
  /* Aligns children in the center horizontally */
}

.expanded-date {
  margin: 10px;
  text-align: left;
}

.expanded-editor {
  width: 100%;
  /* Full width of its parent */
  min-height: 400px;
  /* Or any minimum height you prefer */
  border: 1px solid #ccc !important;
  /* Force border visibility */
}

#close-expanded-view {
  position: absolute;
  background-color: #f0f0f0;
  /* Light grey background for button */
  color: #333;
  /* Dark text for contrast */
  border: none;
  border-radius: 5px;
  /* Rounded corners for a button-like appearance */
  border: 2px solid #ddd;
  /* Border to look like a button */
  font-size: 1.5em;
  /* Larger text to match h2 size */
  padding: 10px 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  display: inline-block;
  /* Allows setting width/height */
  margin: 20px;
  transition: all 0.3s ease-in-out;
  text-align: center;
  /* Center text */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Prevent text selection */
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition for hover and focus */
}

#close-expanded-view:hover,
#close-expanded-view:focus {
  background-color: #e8e8e8;
  /* Darker background on hover/focus */
  color: #000;
  /* Black text on hover/focus */
  outline: none;
  /* Remove default focus outline */
}

/* Accessibility: Indicate the element is active when focused */

#close-expanded-view:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  /* Blue glow for focus */
}

/* Style adjustments for keyboard navigation */

#close-expanded-view::-moz-focus-inner {
  border: 0;
  /* Remove inner border in Firefox */
}

.expanded-journal-view-container .top-element,
.expanded-journal-view-container .bottom-element {
  position: absolute;
  /* Absolute positioning within the fixed container */
  left: 0;
  right: 0;
  height: 100px;
  /* Minimal height to make them detectable */
  background: transparent;
  /* Ensures the element is invisible */
  pointer-events: none;
  /* No mouse events are registered, it's like it's not even there */
}

.expanded-journal-view-container .top-element {
  top: 0;
  /* At the very top of the container */
}

.expanded-journal-view-container .bottom-element {
  bottom: 0;
  /* At the very */
}

.load-earlier {
  display: inline-block;
  /* Align items inline */
  padding: 10px 20px;
  /* Padding to increase area */
  /* Margin for spacing */
  background-color: #f0f0f0;
  /* Light grey background for button */
  color: #333;
  /* Dark text for contrast */
  text-align: center;
  /* Center text */
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  /* Font styling */
  border-radius: 5px;
  /* Rounded corners for a button-like appearance */
  border: 2px solid #ddd;
  /* Border to look like a button */
  font-size: 1.5em;
  /* Larger text to match h2 size */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Prevent text selection */
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition for hover and focus */
  margin: 100px;
  outline: none;
  cursor: pointer;
  /* Apply a hand cursor on hover */
}

.load-earlier:hover,
.load-earlier:focus {
  background-color: #e8e8e8;
  /* Darker background on hover/focus */
  color: #000;
  /* Black text on hover/focus */
  outline: none;
  /* Remove default focus outline */
}

/* Accessibility: Indicate the element is active when focused */

.load-earlier:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  /* Blue glow for focus */
}

/* Style adjustments for keyboard navigation */

.load-earlier::-moz-focus-inner {
  border: 0;
  /* Remove inner border in Firefox */
}

.load-after {
  display: inline-block;
  /* Align items inline */
  padding: 10px 20px;
  /* Padding to increase area */
  /* Margin for spacing */
  background-color: #f0f0f0;
  /* Light grey background for button */
  color: #333;
  /* Dark text for contrast */
  text-align: center;
  /* Center text */
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  /* Font styling */
  border-radius: 5px;
  /* Rounded corners for a button-like appearance */
  border: 2px solid #ddd;
  /* Border to look like a button */
  font-size: 1.5em;
  /* Larger text to match h2 size */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Prevent text selection */
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition for hover and focus */
  margin: 100px;
  outline: none;
  cursor: pointer;
  /* Apply a hand cursor on hover */
}

.load-after:hover,
.load-after:focus {
  background-color: #e8e8e8;
  /* Darker background on hover/focus */
  color: #000;
  /* Black text on hover/focus */
  outline: none;
  /* Remove default focus outline */
}

/* Accessibility: Indicate the element is active when focused */

.load-after:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  /* Blue glow for focus */
}

/* Style adjustments for keyboard navigation */

.load-after::-moz-focus-inner {
  border: 0;
  /* Remove inner border in Firefox */
}

#lifeStages {
  position: relative;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  grid-column-start: 1;
  /* Position the SVG in the third column */
}

#lifeStages rect {
  transition: fill 0.2s ease-in-out;
}

.life-stage:hover + .calendar .week {
  /* This assumes .week boxes are immediately after your SVG in the HTML structure */
  opacity: 0.3;
  /* Or any level of transparency you prefer */
}

.overlay {
  display: none;
  position: absolute;
  opacity: 0.5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

life-stage:hover .overlay {
  display: block;
}

#lifeStageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 2em;
  z-index: 101;
  pointer-events: none;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  /* White text shadow for readability */
}

.beta-badge {
  display: inline;
  background: rgba(255, 130, 20, 0.8);
  /* Beta color */
  color: #fff;
  /* Text color */
  padding: 0 6px;
  margin-left: 10px;
  /* Space between title and badge */
  border-radius: 5px;
  /* Rounded corners */
  font-weight: bold;
  line-height: 2;
  /* Align vertically */
  vertical-align: middle;
}

@media (min-width: 1024px) {
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:flex {
    display: flex;
  }
}


#themeText {
  background-color: #8b5cf6;
  /* subtle highlight on hover */
}

/* The sidebar menu */

/* Style the open button to look like ChatGPT's */
.sidebar-toggle-btn {
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
  outline: none;
}

html.dark .sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-toggle-btn .tooltip-text {
  visibility: hidden;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  position: absolute;
  z-index: 1001;
  left: 100%; /* Position to the right of the button */
  top: 50%; /* Align vertically with the button */
  transform: translate(10px, -50%); /* Adjust horizontal position and vertically center */
  white-space: nowrap; /* Prevents the text from wrapping */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for better visibility */
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-toggle-btn:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  background-color: #6d28d9; 
}

.sidebar-toggle-btn:hover {
  background-color: rgba(109, 40, 217, 0.2); /* Lighter purple background on hover */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.sidebar-toggle-btn.active .tooltip-text {
  content: "Close sidebar"; /* Change tooltip when active */
}

.sidebar-toggle-btn svg {
  width: 24px;
  height: 24px;
}


/* Adjust the main content when sidebar is open */

#main.open {
  margin-left: 100px;
  /* Adjust the position to the width of the sidebar */
}

/* Style the close button to look like ChatGPT's */

.closebtn {
  position: absolute;
  top: 15px;
  /* Adjust to center vertically, similar to open button */
  right: 25px;
  /* Adjust as needed */
  font-size: 26px;
  /* Adjust size as needed, similar to open button */
  color: white;
  cursor: pointer;
  line-height: 1;
  /* Default line height to ensure proper alignment */
}

.closebtn:before {
  content: '≡';
  /* Unicode for the 'hamburger' icon */
  transform: rotate(90deg);
  /* Rotate icon for the 'X' look */
  font-weight: bold;
  font-size: 20px;
  /* Adjust size as needed */
  line-height: 1;
}

/* Style the sidebar when it's open */

.sidebar.open {
  width: 200px;
  transform: translateX(-100%); /* Initially hide the sidebar */
}

#main.open {
  margin-left: 250px;
  /* Adjust the position to the width of the sidebar */
}

/* Profile Menu */

.profile-menu {
  position: relative;
  display: inline-block;
}

/* Profile Dropdown Button */

.profile-button {
  border: none;
  /* Removes border */
  background: none;
  outline: none;
  /* Removes background */
  color: white;
  /* Inherits text color from parent */
  font: inherit;
  /* Inherits font from parent */
  cursor: pointer;
  /* Changes cursor to pointer to indicate it's clickable */
  padding: 0;
  /* Removes padding */
  margin: 0;
  /* Removes margin */
  /* Add text-align if necessary, depending on your design */
}

.profile-button:focus {
  outline: none;
}

/* Dropdown Menu */

/* Profile dropdown menu - consolidated styles */
.profile-dropdown {
  display: none;
  position: absolute;
  left: 0;
  bottom: 70px;
  width: calc(100% - 20px);
  margin: 0 10px;
  background-color: var(--sidebarBg, #111);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  z-index: 1001;
  border: 1px solid var(--sidebarHoverBg, rgba(255, 255, 255, 0.1));
}

/* Dropdown links */
.profile-dropdown a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--sidebarText, #FFFFFF);
  text-decoration: none;
  font-size: 1.1em;
  text-align: left;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Change color of dropdown links on hover */
.profile-dropdown a:hover {
  background-color: var(--sidebarHoverBg, #4B5563);
}

/* Show dropdown when active */
.profile-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.profile-container {
  display: flex;
  align-items: center;
  /* Vertically center the items in the container */
  justify-content: center;
  /* Horizontally center the items in the container */
  height: 5%;
  /* Make sure the container takes full height or adjust as needed */
}

.user-info {
  display: flex;
  /* Aligns children (img and button) in a row */
  align-items: center;
  /* Centers children vertically */
  /* You may not need to set justify-content here unless you want specific spacing */
}

.user-avatar {
  width: 40px;
  /* Adjust size as necessary */
  height: 40px;
  /* Adjust size as necessary */
  border-radius: 50%;
  /* Makes the image round */
  margin-right: 10px;
  /* Adds some space between the image and the name */
}

/* Position the profile container at the bottom of the sidebar */

.sidebar .profile-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Ensure the dropdown menu appears below the button */

.sidebar .profile-button {
  width: 100%;
  text-align: left;
}

/* Show the dropdown menu when clicking the profile button */

.sidebar .profile-dropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 95%;
  /* Full width of the sidebar */
  margin-bottom: 10px;
  margin-left: 5px;
  box-shadow: 0 8px 16px 0 #0003;
  z-index: 1;
}

/* Dropdown links */

.sidebar .profile-dropdown a {
  color: black;
  padding: 12px 16px;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change color of dropdown links on hover */

.sidebar .profile-dropdown a:hover {
  background-color: #8b5cf6;
  /* slightly darker on hover/focus */
}

.settings-container {
  padding: 20px;
  max-width: 600px;
  /* Adjust the width as necessary */
  margin: auto;
}

.user-details {
  background: #fff;
  /* Light background for the details */
  padding: 15px;
  border-radius: 8px;
  /* Optional: for rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Optional: for subtle shadow */
}

.user-field {
  margin-bottom: 15px;
  /* Space between fields */
}

.user-info {
  font-size: 16px;
  /* Adjust size as necessary */
  color: #333;
  /* Darker text color for readability */
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }

  .user-info {
    font-size: 14px;
    /* Slightly smaller font size on mobile */
  }
}

/* Style page content */

#main {
  transition: margin-left .5s;
  /* Smooth transition for sidebar movement */

}

/* Navbar styles */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.sidebar {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  overflow: auto; /* or 'scroll' if necessary */
  padding-top: 60px;
  transition: transform .3s ease;
}

.sidebar::-webkit-scrollbar {
  display: none; /* Hides scrollbar */
}

#responseContent::-webkit-scrollbar {
  display: none; /* Hides scrollbar */
}

/* For Firefox */
.sidebar {
  scrollbar-width: none; /* Hides scrollbar */
}

#journal-entries-sidebar-wrap {
  scrollbar-width: none; /* Hides scrollbar */
}

.sidebar a {
  font-family: 'Avenir Next', 'Helvetica Neue', 'sans-serif';
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  display: block;
  transition: .3s;
}

.closebtn {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}

.closebtn:before {
  content: "≡";
  transform: rotate(90deg);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.sidebar .profile-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.sidebar .profile-button {
  width: 100%;
  text-align: left;
}
.sidebar .profile-dropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 95%;
  margin-bottom: 10px;
  margin-left: 5px;
  box-shadow: 0 8px 16px 0 #0003;
  z-index: 1;
}
.sidebar .profile-dropdown a {
  color: #000;
  padding: 12px 16px;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.sidebar .profile-dropdown a:hover {
  background-color: #8b5cf6;
}
.settings-container {
  padding: 20px;
  max-width: 600px;
  margin: auto;
}
.user-details {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px #0000001a;
}
.user-field {
  margin-bottom: 15px;
}
.user-info {
  font-size: 16px;
  color: #333;
}
@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  .user-info {
    font-size: 14px;
  }
}
#main {
  transition: margin-left .5s;
}
.navbar {
  justify-content: space-between;
  padding: 0 20px;
}
.nav-logo, .navbar {
  display: flex;
  align-items: center;
}
.hamburger, .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  cursor: pointer;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  .sidebar {
    width: 0;
  }
  #main {
    margin-left: 0;
  }
  .nav-links {
    display: none;
  }
  .navbar h2 {
    font-size: 18px;
  }
  .beta-badge {
    display: none;
  }
}

/* Responsive adjustments */

@media screen and (max-width: 768px) {
  .sidebar {
    width: 0px;
    /* Smaller sidebar for smaller screens */
  }

  #main {
    margin-left: 0;
  }

  .nav-links {
    display: none;
    /* Hide nav links on small screens */
  }

  .navbar h2 {
    font-size: 18px;
    /* Adjust title size for small screens */
  }

  .beta-badge {
    display: none;
    /* Optionally hide the beta badge on small screens */
  }
}

/* Ensure the main content is responsive */

@media screen and (max-width: 768px) {
  .nav-logo h2,
  .nav-logo .beta-badge {
    display: inline-block;
    /* Ensure inline display of logo and beta badge */
  }
}

/* The Modal (background) */

#settingsModal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Add a semi-transparent backdrop */
  /* Remove the background color for a transparent backdrop */
}

#settingsModal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 2000;
}

.settingModalBox {
  margin: 5% auto; /* Responsive margin to keep it centered vertically */
  border-width: 1px; /* Adjusted border width to a more standard size */
  overflow-y: auto; /* Scrollable if content is too large */
  max-height: 100%; /* Ensure the modal doesn't exceed the viewport height */
  padding: 20px; /* Add padding */
  border-radius: 8px; /* Slightly rounded corners */
}

@media (min-height: 800px) {
  .settingModalBox {
    margin-top: 250px; /* Maintain the margin for taller screens */
  }
}

@media (max-height: 600px) {
  .settingModalBox {
    margin-top: 150px; /* Reduce margin on smaller screens */
  }
}

/* Modal styles */

.confirmation-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 1001;
  /* Above the toast message */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0,0,0);
  /* Fallback color */
  background-color: rgba(0,0,0,0.4);
  /* Black w/ opacity */
}

/* Modal Content */
.letter-confirmation-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001; /* Above the toast message */
  left: 0;
  top: 0;
  width: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}

.letter-confirmation-modal-center {
  background-color: rgb(31, 41, 55);
  color: white;
  /* padding: 20px; */
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
  max-width: 400px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Buttons inside the modal */
.letter-confirmation-modal button {
  padding: 8px 16px; /* Reduced padding for smaller height */
  margin: 20px 8px 15px 8px; /* Adjusted margin for a tighter layout */
  border: none;
  border-radius: 4px;
  background-color: #555;
  color: white;
  font-size: 14px; /* Reduced font size */
  cursor: pointer;
}

.letter-confirmation-modal button:hover {
  background-color: #8b5cf6;
}

#confirmationModal {
  z-index: 10000;
}
/* Add styles for the updated modal */
#confirmationModal .bg-white {
  max-width: 400px;
  width: 90%;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.toast-message {
  /* Common styles */
  position: fixed;
  left: 55%;
  top: 30px;
  /* Position from the top of the screen */
  transform: translateX(-50%);
  z-index: 1000;
  background-color: #8b5cf6;
  color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  font-size: 16px;
  text-align: center;
  max-width: 80%;
  /* Avoids the toast being too wide on larger screens */
  box-sizing: border-box;
  /* Transition for the toast message to appear and disappear */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s, top 0.5s;
}

.toast-message.show {
  visibility: visible;
  opacity: 1;
  top: 50px;
  /* Raise the toast slightly for visibility */
}

@media only screen and (max-width: 600px) {
  /* Styles for mobile devices */

  .toast-message {
    width: 90%;
    max-height: 10%;
    /* Adjust this value to half of the width to keep it centered */
    padding: 10px;
    font-size: 14px;
  }
  /* Additional mobile-specific styles here */
}


.floating-logo-home {
  animation: float 5s ease-in-out infinite;
  margin-left: 42px;
  height: auto; /* This will maintain the aspect ratio */
  width: 100%; /* This will make the image responsive */
  max-width: 220px; /* Replace with the actual image width */
}

@media (max-width: 767px) {
  .floating-logo-home {
    height: auto; /* This will maintain the aspect ratio */
    width: 100%; /* This will make the image responsive */
    max-width: 170px; /* Replace with the actual image width */
    margin-left: 62px;
  }
}

@keyframes float {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-8px);
  }
  100% {
      transform: translateY(0);
  }
}

.delete-post {
  border-radius: 4px;
  padding: 8px 14px; /* Smaller padding */
  font-size: 1.2em; /* Smaller font size */
}

#dropdownPanel {
  z-index: 1001; /* Higher than the modal's z-index */
  position: absolute;
  background-color: #1f2937; /* Dark background */
  /* Other styling remains unchanged */
}

/* Cancel button - Assuming you are using an "X" button for cancel */
#dropdownPanel .cancel-button {
  color: white; /* Light text for visibility */
  background-color: transparent; /* Transparent background */
  border: none; /* No border */
}

/* Adjustments to emoji buttons to ensure visibility in dark mode */
#dropdownPanel button {
  color: white; /* Light text for visibility */
  background-color: transparent; /* Transparent background */  /* Other styles for hover, focus, etc. */
}

/* Ensure that hover states are also visible in dark mode */
#dropdownPanel button:hover {
  background-color: #4b5563; /* Darker background for hover */
}

.loading-container {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px dashed #8b5cf6;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
}

.goal-loading-container {
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px dashed #8b5cf6;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
}

.loading-icon {
font-size: 1.8em;
margin-right: 10px;
animation: bounce 0.5s infinite alternate;
}

.loading-text {
font-size: 2em;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}


.exploreTweetButton:hover {
  background-color: #6d28d9;
}

.explore-modal-header {
  display: flex;
  justify-content: flex-end; /* Align items to the right */
  align-items: center; /* Align items vertically */
  width: 100%; /* Ensure the header takes full width */
}

.button-container {
  display: flex;
  align-items: center;
}

.inspiration-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  display: flex;
  align-items: center;
  justify-content: center;
}

#inspirationTourContainer {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 100%; /* Ensures it fills the modal height */
  overflow: visible; /* Allows child elements to display fully */
}

.inspiration-modal-content {
  background: url('../assets/textured-diary.webp');
  background-size: cover;
  position: relative; /* Allows for an overlay */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
  max-width: 800px;
  max-height: 100vh;
  min-height: 80vh;
  overflow-y: auto;
  overflow: hidden !important;
  border-radius: 20px;
  color: #333;
  font-size: 18px;
  line-height: 1.6;
  align-items: stretch;
  /* min-height: 90%; */
}

.inspiration-modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.55); /* White overlay with reduced opacity */
  z-index: 1;
  pointer-events: none; /* Ensures text is still clickable */
  border-radius: 20px; /* Match border radius with the container */
}

.inspiration-modal-content * {
  position: relative;
  z-index: 2; /* Ensures text is above the overlay */
}

.col-span-1 {
  display: flex;
  align-items: flex-start; /* Ensure avatar aligns to the left */
}

.feedback-section {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.feedback-section.show {
  opacity: 1;
  visibility: visible;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.avatar {
  width: 50px; /* Slightly larger avatars */
  object-fit: cover; /* Ensure the image fits within the circle */
  height: 50px;
  border-radius: 50%;
  border: 2px solid #ddd; /* Add border to avatars */
  margin-right: 10px;
} 

#celebrationModal {
  margin-bottom: 250px;
  z-index: 3000;
}

.loading-spinner {
  margin-left: 70px;
  height: 100px;
}

#loadingSpinner {
  position: absolute;  /* Changed from fixed to absolute */
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 350px; 
  height: 140px;
  border: none;
}

.weekday-label {
  text-align: left;
  font-weight: bold;
  color: gray;
  width: 30px; /* Adjust this width to your needs */
}

.sidebar-entry {
  display: flex;
  align-items: center;
}

.sidebar-entry .entry-title {
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: left;
}

.journal-dropdown-content {
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

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

.journal-dropdown-content a:hover {
  border-radius: 5px;
}

#editable-title {
  border: none;
  outline: none;
  background: none;
}

.tabs {
    border-bottom: 2px solid #333;
}

.tab-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    color: #888;
    border: none;
    background: none;
    outline: none;
    transition: color 0.3s, border-color 0.3s;
}
.tab-button.active {
    border: none;
    background: none;
    outline: none;
}
.tab-button:hover {
    border: none;
    outline: none;
}

.mentor-tab-button.active {
  color: #6d28d9;
}

.star {
  cursor: pointer;
}

textarea:focus, button:focus, .mentor-tab-button:focus {
  outline: none;
  box-shadow: none;
}


.tab-content.active {
    display: block;
}
.analysis-section h3 {
    font-weight: bold;
    margin-bottom: 4px;
}
.analysis-section p {
    margin-bottom: 16px;
}

.tag {
  margin-right: 0.5rem; /* Add spacing between tags */
}

.completed-goal {
  border-left: 5px solid #28a745; /* Green border for emphasis */
  transition: all 0.3s ease; /* Smooth transition */
}

.goal {
  min-width: 1120px;
  max-width: 1120px;
}

/* Make the card brighter on hover */
.goal:hover {
  filter: brightness(1.03); /* Increase brightness to 120% */
}

.filter-button {
  border: none;
  outline: none; /* Remove the default outline (blue border) */
  border: 1px solid transparent; /* Ensure the button has a border to fall back on */
  box-shadow: none;
  transition: background-color 0.3s, color 0.3s;
}

.filter-button:focus {
  outline: none; 
  border: none;
  box-shadow: none;
}

.filter-button.bg-blue-600 {
  background-color:#6d28d9;
}

.filter-button.text-white {
  color: #FFFFFF; /* White text */
}

.card:hover {
  filter: brightness(1.03);
}

.user-input-container {
  flex: 1; /* Allow the container to grow and shrink */
}

.user-input-container:hover {
  filter: brightness(1.03);
  z-index: 100;
}

.ultimate-life-container {
  /* box-shadow: inset 0 0 1px rgba(255, 130, 20, 0.4), 0 0 15px rgba(0, 191, 255, 0.4); */
}

.ultimate-life-container:hover {
  /* box-shadow: inset 0 0 5px rgba(255, 130, 20, 0.5), 0 0 15px rgba(0, 191, 255, 0.5); */
}

#ultimateLifeAim, #userAmbitions {
  min-height: 250px;
  min-width: 500px;
  overflow-y: auto;
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;

}

.theme-group {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.subgoal-input {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

.subgoal-input:focus {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

.subgoal-due-date {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

.subgoal-due-date:focus {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

.subgoal-button {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

.subgoal-button:focus {
  resize: none; /* Disable manual resizing */
  box-shadow: none;
  outline: none;
  border: none;
}

#ultimateLifeAim:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

#userAmbitions:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* .chat-container {
  display: none;
} */


.chat-container {
  max-height: 60vh; /* or whatever max height you want */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#chatModal {
  z-index: 1000;
}

#chatModalContent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#homeChatModalContent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#chat-container {
  max-width: 600px;
  z-index: 500;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: black;
  border: 1px solid #ddd;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.message {
  padding: 10px 15px;
  border-radius: 10px;
  margin: 5px 0;
  max-width: 75%;
  word-wrap: break-word;
}
.message.user {
  align-self: flex-end;
  background-color: #6d28d9;
  color: black;
}
.message.bot {
  align-self: flex-start;
  background-color: #fabc3c;
  color: black;
}
.typing-indicator {
  font-style: italic;
  color: #8b5cf6;
}
#user-input {
  width: calc(100% - 40px);
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-top: 10px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#chatLoadingSpinner {
  width: 50px;
  height: 50px;
  display: none;
}
.hidden {
  display: none;
}
.visible {
  display: block;
}

#home-journal-container {
  position: fixed;
  bottom: 5px;
  /* right: 20px; */
  max-width: 230px;
  width: 100%;
  border-color: #8b5cf6;
  padding: 18px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Prevent overflow */
  transition: height 0.3s ease; /* Smooth transition */
  z-index: 1000;
}

#record-button {
  background-color: #8b5cf6;
  position: relative;
  width: 120px; /* Set a fixed width for the button */
  height: 40px;  /* Set a fixed height for the button */
}

#record-button:hover {
  background-color: #6d28d9; 
}

#voiceLoadingSpinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#recording-controls {
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: center;
}

#submitJournalEntry {
  background-color: #8b5cf6;
  position: relative;
  width: 70px;  /* Adjust width as needed */
  height: 32px;  /* Adjust height as needed */
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

#submitJournalEntry:hover {
  background-color: #6d28d9; 
}

#publishLoadingSpinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.goal-name-input {
  min-height: 20px; /* Set a minimum height for the textarea */
  overflow: hidden; /* Hide the scrollbar until user starts typing */
  width: 500px; /* Full width */
  padding: 10px; /* Comfortable padding */
  margin: 5px; /* Spacing for a clean layout */
  box-sizing: border-box; /* To ensure padding does not affect overall width */
  /*vertical centered*/
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* Make background transparent */
  border: none; /* Remove border */
  outline: none; /* Remove outline */
  font-size: 18px; /* Larger font size */
  font-weight: bold; /* Make text bold */
  box-shadow: none; /* Remove box shadow if any */
  resize: none; /* Disable textarea resizing */
}

.goal-name-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.slider-button:hover {
  color: #8B5CF6;
}

.slider-button:focus {
  outline: none;
  border: none;
}

/* Improved container and layout styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.bubble {
  cursor: pointer;
}

.bubble text {
  text-anchor: middle;
  pointer-events: none;
}

#bubbleChart svg {
  display: block;
}

.locked {
  filter: blur(3px);
  z-index: 50;
  position: relative;
  pointer-events: none;
}

#overlay-component-bubble {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  z-index: 100; /* Ensure this is higher than the blur */
}

#overlay-component-feeling {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  z-index: 100; /* Ensure this is higher than the blur */
}

#themeDropdown {
z-index: 200;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-title {
  font-size: 0.8em;
}

.bubble-text {
  text-anchor: middle;
  font-size: 14px;
  color: black;
}

.journal-tile:hover {
  filter: brightness(1.03); /* Increase brightness to 120% */
}

.book-tile:hover {
  background-color: #6d28d9 !important; /* Force background color change */
  filter: brightness(1.03); /* Increase brightness to 120% */
}

/* Toggle on/off styles */
#calendar-toggle:checked ~ .block {
  background: linear-gradient(90deg, #733cf3 0%, rgba(9, 9, 121, 1) 35%, rgba(2, 0, 36, 1) 100%);
}

#calendar-toggle:checked:hover {
  background-color: #6d28d9; /* The blue color you want */
}

/* Adjust the X translation to keep the dot within the bounds of the background */
#calendar-toggle:checked ~ .dot {
  transform: translateX(100%); /* Move dot to the right */
}

.smart-goal-bar {
  width: 25px;
  margin-bottom:5px;
  margin-left: 38px;
}
/* 
#generateLifeGoalButton {
  width: 180px;
  height: 40px;
  position: relative;
}

#generateLifeGoalButton #generateText {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
} */

#lifeGoalLoadingSpinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;  /* Adjust the spinner size as necessary */
  height: 80px; /* Adjust the spinner size as necessary */
}

#onboarding-checklist{
  width: 350px;
  transition: all 0.3s ease;
}

.hidden-text {
  opacity: 0;
}

#onboarding-checklist {
  z-index: 199;
}

#popover-ultimate-life-aim {
  z-index: 500;
}

.front, .back {
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

.flipped .front {
  transform: rotateY(-180deg);
}

.flipped .back {
  transform: rotateY(0deg);
}

.steve-portrait {
  width: 200px;
  animation: flashPortrait 5s infinite;
  opacity: 0;
  filter: url(#invert-colors); /* Apply the SVG filter for color inversion */
}

@keyframes flashPortrait {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

.steve-portrait-container {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.mentor-highlight {
  background: #bca3f6;
  padding: 2px 4px; /* Add some padding for better visibility */
  border-radius: 3px; /* Rounded corners for a smoother look */
}

.ql-editor {
  font-family: 'Avenir Next', sans-serif; /* Change to a more readable font */
  font-size: 16px; /* Increase the font size */
  line-height: 1.6; /* Increase line height for better readability */
}

.ql-editor strong {
  font-weight: bold;
  font-size: 1.15em; /* Slightly larger font size for emphasis */
}

.ql-editor em {
  font-style: italic;
  font-size: 1.1em; /* Slightly larger font size for emphasis */
}

#journalConfirmModal,
#journalConfirmModal * {
  pointer-events: auto !important;
}

#tourCloseConfirmModal,
#tourCloseConfirmModal * {
  pointer-events: auto !important;
}

#journalConfirmModal {
  z-index: 2000000000 !important; /* Set a z-index higher than the Driver.js popover */
  display: none;
}

#tourCloseConfirmModal {
  z-index: 2000000000 !important; /* Set a z-index higher than the Driver.js popover */
  display: none;
}

.driver-active .tour-exit-modal-active,
.driver-active .tour-exit-modal-active * {
  pointer-events: auto !important;
}

/* 
.custom-popover-position {
  inset: auto auto 574.5px 1200px !important; 
} */


#inspiration-menu-button {
  transition: all 0.3s ease;
}

#inspiration-menu {
  transition: all 0.3s ease;
}

.inspiration-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #fff;
  transition: all 0.3s ease;
}

.inspiration-option:hover {
  background-color: #4a5568;
}

.inspiration-option input[type="checkbox"] {
  margin-right: 0.5rem;
}


#globalOverlay {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

/* Styles for the inspiration sidebar */
.inspiration-sidebar {
  position: relative;
  width: 100%;
  background-color: transparent;
  z-index: 10;
}

.category-filter {
  margin-bottom: 1rem;
}

.dropdown-menu {
  padding: 0;
  max-height: 100vh;
  overflow-y: auto;
  width: 100%;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

.dropdown-item {
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  display: block;
}

.dropdown-item:hover {
  color: #8b5cf6;
}

.dropdown-item.selected {
  color: #8b5cf6;
  font-weight: bold;
}

#globalOverlay.active {
  opacity: 1;
}

#streak-chart {
    padding: 20px;
    border-radius: 10px;
}

.ch-subdomain-bg.highlight {
  stroke:rgb(84, 39, 143);
}

.ch-domain-text {
  font-size: medium;
  margin-bottom: 5px;
}

#prevCalendarButton{
  outline: none;
  box-shadow: none;
}

#nextCalendarButton{
  outline: none;
  box-shadow: none;
}

#prevCalendarButton:hover{
  color: #6d28d9;
}

#nextCalendarButton:hover{
  color: #6d28d9;
}

/* Default arrow color (white) */
.arrow-svg path {
    stroke: lightgrey
}

/* Change arrow color to purple on hover */
.slider-button:hover .arrow-svg path {
    stroke: #6d28d9;
}

.filter-buttons {
  outline: none;
  box-shadow: none;
  border-color: none;
}

.goal-input-button:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

#goal-buttons-container {
  position: fixed; /* Fixed to the bottom of the screen */
  bottom: 20px; /* Adjust the distance from the bottom */
  transform: translateX(-50%); /* Shift it back by 50% to center correctly */
  z-index: 50; /* Ensure it's on top of other elements */
  transition: left 0.3s ease; /* Smooth movement when sidebar toggles */
}

#goalsList {
  margin-bottom: 80px;
}

/* Optional: Smooth transitions for message bubbles */
.message-bubble {
  transition: background-color 0.3s ease;
}


#chatInput {
  background-color: #fafafa; /* Adjust color as needed */
  color: #333; /* Fixed color value with '#' */
  box-shadow: none;
  padding: 8px; /* Add padding for better spacing */
  font-size: 16px; /* Ensure readable font size */
  line-height: 1.4; /* Control line height */
  height: 40px; /* Set a fixed height or use min-height */
  resize: none; /* Prevent manual resizing */
  overflow: auto; /* Hide overflow to prevent scrollbars */
  border-radius: 4px; /* Optional: rounded corners */
  outline: none; /* Remove default outline */
  width: 100%; /* Make it responsive */
  box-sizing: border-box; /* Include padding and border in width */
}

#inspirationChatInput{
  overflow: auto;
}

#homeChatInput{
  background-color: #fafafa; /* Adjust color as needed */
  color: #333; /* Fixed color value with '#' */
  border: 1px solid #8b5cf6; /* Use shorthand for border */
  box-shadow: none;
  padding: 8px; /* Add padding for better spacing */
  font-size: 16px; /* Ensure readable font size */
  line-height: 1.4; /* Control line height */
  height: 40px; /* Set a fixed height or use min-height */
  resize: none; /* Prevent manual resizing */
  overflow: auto; /* Hide overflow to prevent scrollbars */
  border-radius: 4px; /* Optional: rounded corners */
  outline: none; /* Remove default outline */
  width: 100%; /* Make it responsive */
  box-sizing: border-box; /* Include padding and border in width */
}

#historicalChatInput{
  background-color: #fafafa; /* Adjust color as needed */
  color: #333; /* Fixed color value with '#' */
  border: 1px solid #8b5cf6; /* Use shorthand for border */
  box-shadow: none;
  padding: 8px; /* Add padding for better spacing */
  font-size: 16px; /* Ensure readable font size */
  line-height: 1.4; /* Control line height */
  height: 40px; /* Set a fixed height or use min-height */
  resize: none; /* Prevent manual resizing */
  overflow: auto; /* Hide overflow to prevent scrollbars */
  border-radius: 4px; /* Optional: rounded corners */
  outline: none; /* Remove default outline */
  width: 100%; /* Make it responsive */
  box-sizing: border-box; /* Include padding and border in width */
}


.prompt-tooltip {
  visibility: hidden;
  opacity: 0; /* Start with opacity 0 for smooth transition */
  background-color: #000;
  max-width: 400px;
  word-wrap: break-word; /* Ensures long words or text wrap within the box */
  color:  #f0f0f0;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Adjust this to move tooltip above the button */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  transition: visibility 0s, opacity 0.3s ease-in-out; /* Smooth transition */
}

.prompt-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Pointing triangle at the bottom */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f0f0f0 transparent transparent transparent;
}

.prompt-button-wrapper:hover .prompt-tooltip {
  visibility: visible;
  opacity: 1; /* Make tooltip visible smoothly */
}

#heartIcon {
  color: #dcaddf; /* Slightly gray with a red hue */
  transition: color 0.3s ease;
}

/* Fill opacity for each milestone */
#heartFill.goal-25 {
  opacity: 0.2;
}
#heartFill.goal-50 {
  opacity: 0.4;
}
#heartFill.goal-75 {
  opacity: 0.6;
}
#heartFill.goal-100 {
  opacity: 0.8;
}
#heartFill.goal-150 {
  opacity: 0.9;
}
#heartFill.goal-200 {
  opacity: 1;
}

/* Example: Position tooltip above the heart icon */
#tooltip-why-150 {
  bottom: 100%; /* Positions tooltip above the trigger element */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem; /* Adds space between the tooltip and the heart icon */
  width: 400px;
}

/* Custom class for multiline ellipsis */
.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-item {
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.draft-item:hover {
  background-color: #f3f4f6; /* Slightly lighter gray */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
}

/* Add this CSS */
.delete-draft-button:hover .trash-svg {
  color: #B91C1C; /* Tailwind's red-700 */
}

.delete-button:hover .trash-svg {
  color: #B91C1C; /* Tailwind's red-700 */
}

#feedbackModal {
  z-index: 2000;
}

#cancelConfirmationModal {
  z-index: 10000;
}

#resumeConfirmationModal {
  z-index: 10000;
}


.custom-tooltip-container {
  position: relative;
  display: inline-block;
}

.custom-tooltip {
  visibility: hidden;
  opacity: 0;
  max-width: 500px; /* Set your desired max width */
  background-color: #1a202c;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  position: absolute;
  z-index: 5000;
  top: 100%; /* Position below the text */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  transition: opacity 0.3s;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 0.5rem; /* Add space below the text */
}

.custom-tooltip-container:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
}

.custom-prompt-card:hover .save-svg,
.custom-prompt-card:hover .write-svg {
  opacity: 1 !important;
}

#homeChatModal {
  z-index: 10000;
}

/* Modal Container */
#entryModal {
  position: absolute;
  display: none;
  z-index: 50000;
  width: 100%;
  max-width: 450px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Modal Content */
#entryModalContent {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  background: url('../assets/textured-diary.webp') no-repeat center;
  background-size: cover;
  font-size: 0.85em;
  line-height: 1.5;
  scrollbar-width: thin;
}

/* Sticky Header */
.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 3;
}

/* Background overlay */
#entryModalContent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  pointer-events: none;
}

/* Content styles */
.entry-content {
  position: relative;
  z-index: 2;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Custom scrollbar */
#entryModalContent::-webkit-scrollbar {
  width: 6px;
}

#entryModalContent::-webkit-scrollbar-track {
  background: transparent;
}

#entryModalContent::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Ensure all content is above overlay */
#entryModalContent * {
  position: relative;
  z-index: 2;
}

/* Text and image styles */
#entryModalContent p {
  margin: 0;
  padding-bottom: 1em;
}

#entryModalContent img {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
}

#overlay-component-home-chat {
  /* Positioning for bottom-centered placement */
  position: absolute;
  bottom: 5%; /* Adjust this value to position it closer or further from the bottom */
  left: 50%; 
  transform: translateX(-50%); /* Center horizontally */
  
  /* Size and styling */
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  z-index: 100; 
}


#timeline-modal{
  z-index: 1002;  
}

/* Modal Styling */
#emotionsModal {
  z-index: 1000;
  margin: auto;
  width: 100%;
  max-width: 1200px;
  max-height: 100vh;
  overflow-y: auto;
  border-radius: 20px;
  font-size: 18px;
  align-items: stretch;
}

/* Emotion Tooltip Styles */
.emotion-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    z-index: 1050; /* Higher than the modal content, but within its scope */
    max-width: calc(100vw - 40px);
    word-break: break-word;
    pointer-events: none;
}

.group:hover .emotion-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Tooltip Arrow Default (Top) */
.tooltip-arrow {
    bottom: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #2d3748;
}

/* Tooltip Positioned to Bottom */
.emotion-tooltip.tooltip-bottom {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%);
}

.emotion-tooltip.tooltip-bottom .tooltip-arrow {
    top: -6px;
    bottom: auto;
    border-top: none;
    border-bottom: 6px solid #2d3748;
}

/* Tooltip Positioned to Left */
.emotion-tooltip.tooltip-left {
    left: 0;
    transform: translateX(0%);
}

.emotion-tooltip.tooltip-left .tooltip-arrow {
    left: 10%;
    transform: translateX(0%);
}

/* Tooltip Positioned to Right */
.emotion-tooltip.tooltip-right {
    left: auto;
    right: 0;
    transform: translateX(0%);
}

.emotion-tooltip.tooltip-right .tooltip-arrow {
    left: auto;
    right: 10%;
    transform: translateX(0%);
}

/* Category Row Styling */
.category-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem;
    align-items: start;
}

/* Category Title Styling */
.category-title {
    width: 120px;
    text-align: right;
    padding-right: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .category-row {
        grid-template-columns: 100px 1fr;
    }
    
    .category-title {
        width: 100px;
        padding-right: 0.25rem;
        font-size: 0.875rem;
    }
}


.setting-tab-button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
}

.setting-tab-button.active-tab {
  background-color: var(--active-button-background-color);
  color: var(--active-button-text-color);
}

.selectGoalModal {
  z-index: 1005;
}

.collapse-toggle:focus {
  outline: none;
}

#goal-details-modal {
  z-index: 10000;
}

#streakModal {
  z-index: 1001; 
}

/* Pagination indicators - ensure they stay purple */
#indicator-0, #indicator-1, #indicator-2, #indicator-3 {
  background-color: #8B5CF6 !important; /* bg-purple-500 equivalent */
}

#feelings-container {
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

#bubbleChart {
  display: flex;
  justify-content: center;
}

#expand-highlights-btn {
  outline: none;
}

#languageSelectionModal {
  z-index: 5001;
}

.language-option {
  outline: none;  
  box-shadow: none;
}

.language-option::selection {
  outline: none;  
  box-shadow: none;
}